/* PLANY PROMO – ciemny motyw: głęboka czerń, srebro jak w logo, jaskrawy lodowy błękit + pomarańcz, smugi światła jak w mugo.pl, font i kontenery jak w n8n.io, ziarno (motyw „Orbit”, 16.10.2026) */
:root {
--bg: #020304;
--bg-2: #07090c;
--surface: #0d1016;
--surface-2: #151922;
--line: #1f2430;
--line-2: #2a303d;
--text: #f2f6fc;
--muted: #9fa9bb;
--faint: #6a7488;
--ice: #4cc2ff;
--ice-2: #4aa8ff;
--ice-glow: rgba(76, 194, 255, .38);
--orange: #ff6b2c;
--orange-2: #ff8b52;
--cyan: #8be6ff;
--ok: #4ade9b;
--warn: #ffc857;
--err: #ff5d6c;
--radius: 24px;
--radius-sm: 12px;
--shadow: 0 16px 50px rgba(0, 0, 0, .55);
--grad: linear-gradient(100deg, #e6f6ff 0%, #a6defd 45%, #5cc6ff 100%);
--chrome: linear-gradient(180deg, #ffffff 0%, #e6eef8 55%, #c4d3e6 100%);
--font: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
--display: "Outfit", system-ui, sans-serif;
--display-x: "Outfit", system-ui, sans-serif;
/* platformy */
--p-instagram: #e1306c; --p-tiktok: #25f4ee; --p-youtube: #ff3b3b; --p-facebook: #4b8bff; --p-x: #d6dbe4;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0; background: var(--bg); color: var(--text); font: 15px/1.55 var(--font);
min-height: 100vh; overflow-x: hidden;
}
a { color: var(--ice); text-decoration: none; }
a:hover { color: #9fe0ff; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(30px, 5vw, 54px); font-weight: 700; }
h2 { font-size: clamp(24px, 3.4vw, 36px); font-weight: 700; }
h3 { font-size: 19px; font-weight: 600; }
h4 { font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
p { margin: 0 0 1em; }
small, .muted { color: var(--muted); }
.faint { color: var(--faint); }
hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
code { background: var(--surface-2); padding: 2px 6px; border-radius: 6px; font-size: .9em; }
.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.stack > * + * { margin-top: 16px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.grid { display: grid; gap: 16px; }
.grid.c2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid.c3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid.c4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.spacer { flex: 1; }
.hide-sm { }
@media (max-width: 760px) { .hide-sm { display: none !important; } }
/* ---------- przyciski ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text);
padding: 10px 18px; border-radius: 999px; font: 600 14px/1.2 var(--font); white-space: nowrap;
transition: transform .12s, box-shadow .2s, background .2s, border-color .2s;
}
.btn:hover { border-color: var(--ice); color: var(--text); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(135deg, #ffffff, #bfe3ff); color: #071019; border-color: transparent;
box-shadow: 0 0 24px var(--ice-glow); }
.btn.primary:hover { box-shadow: 0 0 34px rgba(76, 194, 255, .55); color: #071019; }
.btn.accent { background: var(--orange); border-color: var(--orange); color: #fff; }
.btn.accent:hover { background: var(--orange-2); }
.btn.ghost { background: transparent; }
.btn.danger { border-color: rgba(255, 93, 108, .5); color: var(--err); background: transparent; }
.btn.sm { padding: 6px 12px; font-size: 13px; }
.btn.lg { padding: 14px 26px; font-size: 16px; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.linkbtn { background: none; border: 0; color: var(--ice); cursor: pointer; font: inherit; padding: 0; }
/* ---------- formularze ---------- */
label { display: block; font-weight: 600; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.field { margin-bottom: 16px; }
.hint { font-size: 12.5px; color: var(--faint); margin-top: 4px; }
input[type=text], input[type=tel], input[type=search], input[type=email], input[type=password], input[type=number], input[type=date], input[type=time], input[type=datetime-local],
input[type=url], select, textarea {
width: 100%; background: var(--bg-2); color: var(--text); border: 1px solid var(--line-2);
border-radius: var(--radius-sm); padding: 11px 12px; font: 15px/1.4 var(--font); transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ice); box-shadow: 0 0 0 3px rgba(76, 194, 255, .18); }
input[type=file] { color: var(--muted); max-width: 100%; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; color: var(--text); font-size: 14px; cursor: pointer; }
.check input { margin-top: 3px; accent-color: var(--ice-2); width: 16px; height: 16px; flex: none; }
.radio-cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.radio-cards label { margin: 0; display: flex; gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--line-2);
border-radius: var(--radius-sm); background: var(--bg-2); color: var(--text); cursor: pointer; font-weight: 500; }
.radio-cards input { accent-color: var(--ice-2); }
.radio-cards label:has(input:checked) { border-color: var(--ice); box-shadow: 0 0 0 3px rgba(76, 194, 255, .15); }
.form-grid { display: grid; gap: 0 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 4px; margin: 0 0 18px; }
legend { padding: 0 8px; font-family: var(--display); font-weight: 600; }
/* ---------- karty / tabele ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.card.glow { box-shadow: 0 0 0 1px rgba(76, 194, 255, .25), 0 0 50px rgba(76, 194, 255, .08); }
.card h3 { margin-bottom: 8px; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.card-head h3 { margin: 0; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
tr:last-child td { border-bottom: 0; }
.empty { text-align: center; color: var(--faint); padding: 28px 12px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
background: var(--surface-2); border: 1px solid var(--line-2); color: var(--muted); white-space: nowrap; }
.badge.ok { color: var(--ok); border-color: rgba(74, 222, 155, .35); background: rgba(74, 222, 155, .08); }
.badge.warn { color: var(--warn); border-color: rgba(255, 200, 87, .35); background: rgba(255, 200, 87, .08); }
.badge.err { color: var(--err); border-color: rgba(255, 93, 108, .35); background: rgba(255, 93, 108, .08); }
.badge.ice { color: var(--ice); border-color: rgba(76, 194, 255, .35); background: rgba(76, 194, 255, .08); }
.badge.orange { color: var(--orange-2); border-color: rgba(255, 107, 44, .4); background: rgba(255, 107, 44, .08); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: currentColor; }
.flash-stack { position: fixed; top: 14px; right: 14px; left: 14px; z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.flash { pointer-events: auto; max-width: 460px; width: 100%; padding: 12px 16px; border-radius: 12px; background: var(--surface-2);
border: 1px solid var(--line-2); box-shadow: var(--shadow); font-size: 14px; animation: slide .25s ease-out; }
.flash.ok { border-color: rgba(74, 222, 155, .5); }
.flash.error { border-color: rgba(255, 93, 108, .6); }
.flash.info { border-color: rgba(76, 194, 255, .5); }
@keyframes slide { from { opacity: 0; transform: translateY(-8px); } }
/* ---------- strona publiczna ---------- */
.pub-nav { position: sticky; top: 0; z-index: 50; background: rgba(6, 7, 9, .82); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(32, 37, 47, .6); }
.pub-nav .container { display: flex; align-items: center; gap: 18px; height: 66px; }
.logo { display: flex; align-items: center; }
.logo img { height: 34px; width: auto; }
.pub-links { display: flex; gap: 4px; }
.pub-links a { color: var(--muted); padding: 8px 12px; border-radius: 999px; font-weight: 500; font-size: 14px; }
.pub-links a:hover, .pub-links a.active { color: var(--text); background: var(--surface); }
.lang-switch { display: inline-flex; border: 1px solid var(--line-2); border-radius: 999px; overflow: hidden; font-size: 12px; font-weight: 700; }
.lang-switch a { padding: 5px 9px; color: var(--muted); }
.lang-switch a.on { background: var(--surface-2); color: var(--text); }
.menu-toggle { display: none; background: none; border: 1px solid var(--line-2); color: var(--text); border-radius: 10px; padding: 7px 10px; cursor: pointer; }
@media (max-width: 960px) {
.menu-toggle { display: inline-flex; }
.pub-links { display: none; position: absolute; top: 66px; left: 0; right: 0; flex-direction: column; background: var(--bg-2);
padding: 10px 16px 16px; border-bottom: 1px solid var(--line); }
.pub-links.open { display: flex; }
.pub-links a { padding: 12px; }
}
.hero { position: relative; padding: 90px 0 70px; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: -20% -10% auto; height: 620px;
background: radial-gradient(ellipse at 70% 30%, rgba(124, 200, 255, .28), transparent 55%),
radial-gradient(ellipse at 15% 70%, rgba(255, 107, 44, .16), transparent 50%); pointer-events: none; }
.hero .container { position: relative; display: grid; gap: 40px; grid-template-columns: 1.15fr .85fr; align-items: center; }
.hero h1 { margin-bottom: 18px; }
.hero h1 em { font-style: normal; background: linear-gradient(90deg, #fff, var(--ice)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lead { font-size: 18px; color: #c7d0e0; max-width: 560px; margin-bottom: 28px; }
.hero-art { position: relative; aspect-ratio: 1; border-radius: 28px; overflow: hidden; border: 1px solid var(--line);
background: radial-gradient(circle at 50% 50%, #0f2036, #08090d 70%); box-shadow: 0 0 80px rgba(124, 200, 255, .18); }
.hero-art img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
@media (max-width: 860px) { .hero { padding: 48px 0 40px; } .hero .container { grid-template-columns: 1fr; } .hero-art { max-width: 380px; } }
.eyebrow { display: inline-flex; gap: 8px; align-items: center; font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--ice); font-weight: 700; margin-bottom: 14px; }
.eyebrow::before { content: "✦"; color: #fff; }
.section { padding: 70px 0; }
.section.alt { background: linear-gradient(180deg, var(--bg-2), var(--bg)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { max-width: 720px; margin-bottom: 36px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { padding: 9px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-2); font-size: 14px; }
.chip::before { content: "✦ "; color: var(--ice); }
.benefit { position: relative; padding: 26px; }
.benefit .num { font-family: var(--display); font-size: 40px; font-weight: 700; color: transparent; -webkit-text-stroke: 1px var(--ice); line-height: 1; margin-bottom: 14px; display: block; }
.steps { counter-reset: s; display: grid; gap: 14px; }
.step { display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start; }
.step::before { counter-increment: s; content: counter(s); width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
font: 700 18px var(--display); background: var(--surface-2); border: 1px solid var(--ice); box-shadow: 0 0 20px var(--ice-glow); }
.quote { font-family: var(--display); font-size: clamp(22px, 3vw, 32px); line-height: 1.3; max-width: 860px; }
.quote::before { content: "“"; color: var(--orange); }
.quote::after { content: "”"; color: var(--orange); }
.price-card { display: flex; flex-direction: column; gap: 14px; }
.price-card.featured { border-color: var(--ice); box-shadow: 0 0 50px rgba(76, 194, 255, .15); }
.price { font: 700 44px/1 var(--display); }
.price small { font: 500 15px var(--font); color: var(--muted); }
.feat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.feat-list li { display: flex; gap: 10px; font-size: 14px; }
.feat-list li.no { color: var(--faint); text-decoration: line-through; }
.feat-list li::before { content: "✓"; color: var(--ok); font-weight: 700; width: 14px; }
.feat-list li.no::before { content: "—"; color: var(--faint); }
details.faq { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 0 20px; }
details.faq + details.faq { margin-top: 10px; }
details.faq summary { cursor: pointer; padding: 18px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
details.faq summary::after { content: "+"; color: var(--ice); font-size: 20px; line-height: 1; }
details.faq[open] summary::after { content: "–"; }
details.faq p { color: var(--muted); padding-bottom: 8px; }
.pub-footer { border-top: 1px solid var(--line); padding: 44px 0 30px; margin-top: 40px; background: var(--bg-2); }
.pub-footer .cols { display: grid; gap: 28px; grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.pub-footer h4 { margin-bottom: 12px; }
.pub-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pub-footer a { color: var(--muted); }
.pub-footer a:hover { color: var(--text); }
@media (max-width: 760px) { .pub-footer .cols { grid-template-columns: 1fr 1fr; } }
.auth-wrap { min-height: calc(100vh - 66px); display: grid; place-items: center; padding: 40px 16px; }
.auth-card { width: 100%; max-width: 460px; }
.auth-card.wide { max-width: 760px; }
.stepper { display: flex; gap: 8px; margin-bottom: 18px; font-size: 12px; color: var(--faint); flex-wrap: wrap; }
.stepper span { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-2); }
.stepper span.on { color: var(--text); border-color: var(--ice); }
/* ---------- aplikacja (panel) ---------- */
.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; border-right: 1px solid var(--line); background: var(--bg-2);
padding: 18px 14px; display: flex; flex-direction: column; gap: 4px; }
.sidebar .logo { padding: 4px 8px 18px; }
.nav-group { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--faint); padding: 14px 10px 6px; }
.nav-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--muted); font-weight: 500; font-size: 14px; }
.nav-link svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.nav-link:hover { background: var(--surface); color: var(--text); }
.nav-link.active { background: var(--surface-2); color: var(--text); box-shadow: inset 2px 0 0 var(--ice); }
.nav-link .lock { margin-left: auto; font-size: 11px; color: var(--faint); }
.nav-link .count { margin-left: auto; background: var(--orange); color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 7px; }
.sidebar .bottom { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.main { min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 12px; height: 62px; padding: 0 24px;
background: rgba(6, 7, 9, .85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.topbar .title { flex: 1; min-width: 0; font-family: var(--display); font-weight: 600; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bell { position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--text); }
.bell svg { width: 18px; height: 18px; }
.bell .n { position: absolute; top: -4px; right: -4px; background: var(--orange); color: #fff; font-size: 10px; font-weight: 700; border-radius: 999px; padding: 1px 6px; }
.content { padding: 26px 24px 80px; max-width: 1240px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.page-head h1 { font-size: clamp(24px, 3vw, 32px); margin: 0; }
.page-head p { margin: 6px 0 0; color: var(--muted); }
.mobile-nav-toggle { display: none; }
.scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 55; display: none; }
@media (max-width: 960px) {
.app { grid-template-columns: minmax(0, 1fr); }
.sidebar { position: fixed; z-index: 60; left: 0; top: 0; width: 270px; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--shadow); }
.sidebar.open { transform: none; }
.mobile-nav-toggle { display: inline-flex; }
.topbar { padding: 0 16px; }
.content { padding: 20px 16px 80px; }
.scrim.open { display: block; }
}
.stat { padding: 18px; }
.stat .label { color: var(--muted); font-size: 13px; display: flex; justify-content: space-between; gap: 8px; }
.stat .value { font: 700 28px/1.2 var(--display); margin-top: 6px; }
.stat .delta { font-size: 12.5px; color: var(--faint); }
.stat .delta.up { color: var(--ok); }
.stat.locked { opacity: .55; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 22px; overflow-x: auto; scrollbar-width: none; }
.tabs a { padding: 10px 14px; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; font-weight: 500; font-size: 14px; }
.tabs a.on { color: var(--text); border-color: var(--ice); }
.tabs a .badge { margin-left: 6px; padding: 0 7px; }
.list-item { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.list-item:last-child { border-bottom: 0; }
.list-item .grow { flex: 1; min-width: 0; }
.list-item small { display: block; }
.list-item .grow strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* platformy i typy postów */
.plat { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; text-transform: capitalize; }
.plat::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--ice)); }
.plat.instagram { --c: var(--p-instagram); } .plat.tiktok { --c: var(--p-tiktok); } .plat.youtube { --c: var(--p-youtube); }
.plat.facebook { --c: var(--p-facebook); } .plat.x { --c: var(--p-x); }
/* ---------- kalendarz ---------- */
.cal-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.cal-toolbar .period { font: 600 17px var(--display); min-width: 180px; }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 999px; overflow: hidden; }
.seg button { background: none; border: 0; color: var(--muted); padding: 7px 14px; font: 600 13px var(--font); cursor: pointer; }
.seg button.on { background: var(--surface-2); color: var(--text); }
.calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-dow { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); padding: 0 6px 4px; }
.cal-day { min-height: 118px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cal-day.out { opacity: .35; }
.cal-day.today { border-color: var(--ice); }
.cal-day.release { border-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange), 0 0 24px rgba(255, 107, 44, .15); }
.cal-day .d { font-size: 12px; font-weight: 700; color: var(--muted); display: flex; justify-content: space-between; gap: 4px; }
.cal-day .d .tag { color: var(--orange-2); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.cal-post { text-align: left; width: 100%; background: var(--bg-2); border: 1px solid var(--line-2); color: var(--text);
border-radius: 7px; padding: 5px 7px; font: 12px/1.3 var(--font); cursor: pointer; overflow: hidden; }
.cal-post:hover { border-color: var(--ice); }
.cal-post .t { color: var(--muted); font-weight: 600; }
.cal-post .s { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-post.story { opacity: .8; border-style: dashed; }
.cal-post.instagram { --c: var(--p-instagram); } .cal-post.tiktok { --c: var(--p-tiktok); } .cal-post.youtube { --c: var(--p-youtube); }
.cal-post.facebook { --c: var(--p-facebook); } .cal-post.x { --c: var(--p-x); }
.calendar.week .cal-day { min-height: 340px; }
.calendar.week .cal-post .s { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
@media (max-width: 760px) {
.calendar { grid-template-columns: minmax(0, 1fr); }
.cal-dow { display: none; }
.cal-day { min-height: 0; }
.cal-day.empty-day { display: none; }
.cal-day.out { display: none; }
.calendar.week .cal-day { min-height: 0; }
}
/* ---------- modal ---------- */
dialog { border: 1px solid var(--line-2); background: var(--surface); color: var(--text); border-radius: 18px; padding: 0; width: min(640px, calc(100vw - 24px));
max-height: calc(100vh - 40px); box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(2, 2, 4, .7); backdrop-filter: blur(4px); }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 1; }
.modal-body { padding: 18px 20px; }
.modal-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.x { background: none; border: 0; color: var(--muted); font-size: 22px; cursor: pointer; line-height: 1; }
/* ---------- czat (dymek w prawym dolnym rogu) ---------- */
.chat-widget { position: fixed; right: 20px; bottom: 20px; z-index: 80; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.chat-fab { position: relative; width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
background: linear-gradient(135deg, #ffffff, #a9dcff); color: #071019; box-shadow: 0 0 0 1px rgba(76, 194, 255, .4), 0 8px 30px rgba(124, 200, 255, .35);
transition: transform .15s; }
.chat-fab:hover { transform: scale(1.06); }
.chat-fab svg { width: 26px; height: 26px; }
.chat-fab-n { position: absolute; top: -3px; right: -3px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--orange);
color: #fff; font: 700 12px/22px var(--font); text-align: center; box-shadow: 0 0 0 2px var(--bg); }
.chat-panel { width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100vh - 120px)); display: flex; flex-direction: column;
background: var(--surface); border: 1px solid var(--line-2); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden;
animation: chatIn .18s ease-out; transform-origin: bottom right; }
.chat-panel[hidden] { display: none; }
@keyframes chatIn { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line);
background: linear-gradient(180deg, rgba(76, 194, 255, .08), transparent); }
.chat-title { flex: 1; min-width: 0; }
.chat-title strong { display: block; font-family: var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-title small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-back { background: none; border: 1px solid var(--line-2); color: var(--text); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 18px; line-height: 1; }
.chat-back[hidden] { display: none; }
.chat-body { flex: 1; min-height: 0; overflow-y: auto; }
.chat-list { display: flex; flex-direction: column; }
.chat-list[hidden] { display: none; }
.chat-conv { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line);
color: var(--text); padding: 12px 16px; cursor: pointer; font: inherit; }
.chat-conv:hover { background: var(--surface-2); }
.chat-conv .grow { flex: 1; min-width: 0; }
.chat-conv strong, .chat-conv small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-conv .n { background: var(--orange); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; padding: 1px 7px; }
.chat { display: flex; flex-direction: column; gap: 10px; padding: 14px; min-height: 100%; }
.chat[hidden] { display: none; }
.chat .empty { margin: auto; }
.msg { max-width: 82%; padding: 9px 13px; border-radius: 14px 14px 14px 4px; background: var(--surface-2); font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; align-self: flex-start; }
.msg.me { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: rgba(76, 194, 255, .16); border: 1px solid rgba(76, 194, 255, .28); }
.msg.system { align-self: center; max-width: 92%; border-radius: 10px; background: transparent; border: 1px dashed var(--line-2); color: var(--muted); font-size: 13px; text-align: center; }
.msg .meta { display: block; font-size: 11px; color: var(--faint); margin-top: 4px; }
.chat-form { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid var(--line); }
.chat-form[hidden] { display: none; }
.chat-form textarea { min-height: 40px; max-height: 120px; resize: none; padding: 9px 12px; }
.chat-form .btn { height: 40px; width: 44px; padding: 0; }
@media (max-width: 760px) {
.chat-widget { right: 14px; bottom: 14px; }
.chat-widget.open { left: 0; right: 0; bottom: 0; top: 0; gap: 0; }
.chat-widget.open .chat-fab { display: none; }
.chat-widget.open .chat-panel { width: 100%; height: 100%; border-radius: 0; border: 0; }
}
.prose { white-space: pre-wrap; color: #d5dcea; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.thumbs { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.thumb { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; font-size: 12px; }
.thumb .media { aspect-ratio: 1; display: grid; place-items: center; background: #040507; color: var(--faint); font-size: 26px; }
.thumb .media img, .thumb .media video { width: 100%; height: 100%; object-fit: cover; }
.thumb .cap { padding: 6px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lock-box { text-align: center; padding: 48px 20px; }
.lock-box .ic { font-size: 40px; margin-bottom: 10px; }
.cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90; max-width: 560px; margin: 0 auto; display: none; }
.cookie.show { display: block; }
.posts-table td.caption { min-width: 260px; max-width: 420px; white-space: pre-wrap; }
.status-flow { display: flex; gap: 6px; flex-wrap: wrap; font-size: 12px; }
.status-flow span { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--faint); }
.status-flow span.done { color: var(--ok); border-color: rgba(74, 222, 155, .35); }
.status-flow span.now { color: var(--text); border-color: var(--ice); box-shadow: 0 0 14px var(--ice-glow); }
/* ---------- twórcy: „To ja” ---------- */
.credit-row { display: flex; gap: 8px; align-items: stretch; }
.credit-row input[type=text] { flex: 1; min-width: 0; }
.credit-row input[type=text]:disabled { opacity: .45; }
.self-toggle { margin: 0; display: inline-flex; align-items: center; cursor: pointer; flex: none; }
.self-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.self-toggle span { display: inline-flex; align-items: center; gap: 6px; height: 100%; padding: 0 12px; border-radius: var(--radius-sm);
border: 1px solid var(--line-2); background: var(--bg-2); color: var(--muted); font: 600 13px var(--font); white-space: nowrap; transition: all .15s; }
.self-toggle span::before { content: "✦"; color: var(--faint); }
.self-toggle input:checked + span { border-color: var(--ice); color: var(--text); background: rgba(76, 194, 255, .12); box-shadow: 0 0 14px rgba(76, 194, 255, .2); }
.self-toggle input:checked + span::before { color: var(--ice); }
.self-toggle input:focus-visible + span { outline: 2px solid var(--ice); outline-offset: 2px; }
/* ---------- pliki: dropzone + postęp ---------- */
.dropzone { position: relative; border: 1.5px dashed var(--line-2); border-radius: var(--radius); background: var(--bg-2); transition: border-color .15s, background .15s; margin-bottom: 12px; }
.dropzone.over { border-color: var(--ice); background: rgba(76, 194, 255, .06); }
.dropzone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.dropzone-label { margin: 0; padding: 26px 16px; text-align: center; color: var(--muted); font-weight: 500; font-size: 14px; pointer-events: none; }
.dropzone-label strong { color: var(--ice); }
.dropzone-label small { display: block; margin-top: 4px; color: var(--faint); }
.upload-list { display: grid; gap: 8px; margin-bottom: 14px; }
.upload-item { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-2); }
.upload-item .ic { grid-row: span 2; font-size: 22px; text-align: center; }
.upload-item .name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-item .name small { font-weight: 400; color: var(--faint); margin-left: 6px; }
.upload-item input[type=text] { padding: 7px 10px; font-size: 13px; }
.upload-item .rm { grid-row: span 2; background: none; border: 0; color: var(--faint); font-size: 20px; cursor: pointer; }
.upload-item .bar { grid-column: 2 / 3; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; display: none; }
.upload-item .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--ice-2), var(--ice)); transition: width .2s; }
.upload-item.busy .bar, .upload-item.done .bar { display: block; }
.upload-item.done .bar i { background: var(--ok); }
.upload-item.err { border-color: rgba(255, 93, 108, .55); }
.upload-item .msg-err { grid-column: 2 / 3; color: var(--err); font-size: 12.5px; }
.upload-status { font-size: 13px; }
/* ---------- admin: zmiana planu ---------- */
.plan-form { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.plan-form select, .plan-form input[type=date] { width: auto; padding: 7px 9px; font-size: 13px; }
.users-table tr:target td { background: rgba(76, 194, 255, .07); }
/* ---------- kreator rejestracji ---------- */
.ob-stepper { display: flex; align-items: center; gap: 8px; margin: 6px 0 22px; }
.ob-step { display: inline-flex; align-items: center; gap: 8px; color: var(--faint); font-size: 13px; font-weight: 600; white-space: nowrap; }
a.ob-step:hover { color: var(--text); }
.ob-num { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; border: 1px solid var(--line-2);
background: var(--bg-2); font: 700 13px var(--display); color: var(--muted); }
.ob-step.done .ob-num, .ob-item.done .ob-num { border-color: rgba(74, 222, 155, .5); color: var(--ok); background: rgba(74, 222, 155, .08); }
.ob-step.on { color: var(--text); }
.ob-step.on .ob-num { border-color: var(--ice); color: var(--text); box-shadow: 0 0 16px var(--ice-glow); }
.ob-line { flex: 1; min-width: 16px; height: 2px; border-radius: 2px; background: var(--line-2); }
.ob-line.done { background: rgba(74, 222, 155, .5); }
@media (max-width: 560px) { .ob-step:not(.on) .ob-label { display: none; } }
.ob-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.ob-progress { height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; margin: 18px 0 8px; }
.ob-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--ice-2), var(--ice)); border-radius: 6px; }
.ob-list { display: grid; gap: 4px 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ob-item { display: flex; gap: 12px; align-items: center; padding: 10px 0; color: var(--text); }
.ob-item .grow { flex: 1; min-width: 0; }
.ob-item strong, .ob-item small { display: block; }
.ob-item small { color: var(--muted); }
.ob-item.done strong { color: var(--muted); }
.ob-ring { width: 18px; height: 18px; border-radius: 50%; flex: none; background: conic-gradient(var(--ice) calc(var(--p) * 1%), var(--line-2) 0);
-webkit-mask: radial-gradient(circle, transparent 5px, #000 6px); mask: radial-gradient(circle, transparent 5px, #000 6px); }
.social-grid { display: grid; gap: 0 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.social-field label { display: flex; align-items: center; gap: 8px; }
.plat-ic { width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--ice)); }
.plat-instagram { --c: var(--p-instagram); } .plat-tiktok { --c: var(--p-tiktok); } .plat-youtube { --c: var(--p-youtube); }
.plat-facebook { --c: var(--p-facebook); } .plat-x { --c: var(--p-x); } .plat-spotify { --c: #1ed760; }
/* ---------- materiały: miniatura | opis ---------- */
.media-list { display: grid; gap: 10px; }
.media-row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-2); }
.media-row.need { border-color: rgba(255, 93, 108, .5); }
.media-prev { aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: #040507; display: grid; place-items: center; }
.media-prev img, .media-prev video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-prev video { object-fit: contain; background: #000; }
.audio-prev { display: grid; gap: 8px; place-items: center; font-size: 28px; padding: 10px; width: 100%; }
.audio-prev audio { width: 100%; }
.media-desc { min-width: 0; display: flex; flex-direction: column; }
.media-desc textarea { flex: 1; min-height: 70px; }
.media-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
@media (max-width: 640px) { .media-row { grid-template-columns: minmax(0, 1fr); } }
.bio-preview { border: 1px solid rgba(76, 194, 255, .3); background: rgba(76, 194, 255, .06); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 22px; font-size: 14px; }
.spinner { width: 13px; height: 13px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; display: inline-block; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-note { font-size: 13px; flex-basis: 100%; }
/* ---------- podgląd w pop-upie ---------- */
.media-open { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #040507; cursor: zoom-in; }
.media-open img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s, opacity .2s; }
.media-open:hover img { transform: scale(1.03); opacity: .9; }
.media-fallback { display: grid; place-items: center; width: 100%; height: 100%; font-size: 30px; }
.play-badge { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; display: grid; place-items: center;
background: rgba(6, 7, 9, .7); color: #fff; font-size: 16px; padding-left: 3px; border: 1px solid rgba(255, 255, 255, .35); backdrop-filter: blur(4px); pointer-events: none; }
.media-open:hover .play-badge { background: var(--ice-2); }
dialog.lightbox { width: min(760px, calc(100vw - 24px)); max-height: calc(100vh - 40px); background: #040507; overflow: hidden; }
.lightbox-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface); }
.lightbox-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.lightbox-body { display: grid; place-items: center; }
.lightbox-body img { display: block; max-width: 100%; max-height: calc(100vh - 110px); width: auto; height: auto; margin: 0 auto; }
.lightbox-body video { display: block; width: 100%; height: min(70vh, 600px); object-fit: contain; background: #000; }
/* ---------- kalendarz: miniatury materiałów ---------- */
.cal-post.has-media { display: flex; gap: 7px; align-items: flex-start; }
.cal-txt { min-width: 0; flex: 1; display: block; }
.cal-thumb { position: relative; flex: none; width: 34px; height: 34px; border-radius: 5px; overflow: hidden; background: #040507; display: grid; place-items: center; font-size: 14px; }
.cal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cal-thumb.todo { background: rgba(255, 107, 44, .08); border: 1px solid rgba(255, 107, 44, .4); color: var(--orange-2);
font: 700 15px/1 var(--font); }
.cal-thumb.video::after { content: "▶"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 10px; background: rgba(0, 0, 0, .35); }
.calendar.week .cal-thumb { width: 100%; height: auto; aspect-ratio: 16 / 10; }
.calendar.week .cal-post.has-media { flex-direction: column; }
.calendar.week .cal-thumb.video::after { font-size: 16px; }
.post-media { margin: 0 0 14px; display: grid; gap: 6px; }
.post-media video, .post-media .media-open { width: 100%; max-height: 340px; border-radius: 10px; overflow: hidden; background: #000; }
.post-media video { display: block; }
.post-media .media-open img { max-height: 340px; object-fit: contain; }
@media (max-width: 760px) { .calendar.week .cal-thumb { width: 54px; height: 54px; aspect-ratio: auto; } .calendar.week .cal-post.has-media { flex-direction: row; } }
.prompt-text { font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; tab-size: 2; }
/* ---------- zwijane sekcje ---------- */
.collapsible .when-closed, .collapsible.collapsed .when-open { display: none; }
.collapsible.collapsed .when-closed { display: inline; }
.collapsible.collapsed .collapse-body, .collapsible.collapsed .collapse-hide { display: none; }
.collapsed-summary { display: none; align-items: center; gap: 6px; flex-wrap: wrap; }
.collapsible.collapsed .collapsed-summary { display: flex; }
.collapsed-summary img { width: 34px; height: 34px; object-fit: cover; border-radius: 5px; }
.collapsed-summary .muted { margin-left: 8px; font-size: 13px; }
.collapsible.collapsed .card-head { margin-bottom: 10px; }
/* ---------- ekran ładowania (generowanie planu) ---------- */
.busy-overlay { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px;
background: rgba(4, 5, 7, .78); backdrop-filter: blur(6px); animation: fadeIn .2s ease-out; }
@keyframes fadeIn { from { opacity: 0; } }
.busy-card { width: min(440px, 100%); text-align: center; padding: 34px 28px 26px; border-radius: 22px; background: var(--surface);
border: 1px solid rgba(76, 194, 255, .3); box-shadow: 0 0 80px rgba(124, 200, 255, .18), var(--shadow); }
.busy-card h3 { margin: 18px 0 6px; }
.busy-step { min-height: 1.5em; margin: 0 0 14px; transition: opacity .3s; }
.busy-time { font: 600 14px var(--display); color: var(--ice); }
.busy-card .hint { margin-top: 10px; }
.busy-spin { position: relative; width: 74px; height: 74px; margin: 0 auto; }
.busy-spin span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; color: #fff; text-shadow: 0 0 18px var(--ice); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; transform: scale(.85); } }
.busy-ring { width: 74px; height: 74px; border-radius: 50%;
background: conic-gradient(from 0deg, transparent 0 25%, var(--ice) 70%, #fff 100%);
-webkit-mask: radial-gradient(circle, transparent 29px, #000 30px); mask: radial-gradient(circle, transparent 29px, #000 30px);
animation: spin 1.1s linear infinite; }
@media (prefers-reduced-motion: reduce) { .busy-ring { animation-duration: 3s; } }
/* ---------- edycja danych singla (pracownik) ---------- */
.editable .edit-only { display: none; }
.editable.editing .edit-only { display: block; }
.editable.editing .view-only { display: none; }
.editable.editing { border-color: rgba(76, 194, 255, .45); }
/* ---------- przeciąganie postów w kalendarzu ---------- */
.cal-post.draggable { cursor: grab; touch-action: pan-y; -webkit-touch-callout: none; user-select: none; }
.cal-post.drag-src { opacity: .35; }
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none; margin: 0; box-shadow: 0 12px 30px rgba(0, 0, 0, .55), 0 0 0 1px var(--ice); cursor: grabbing; opacity: .95; }
.calendar.dragging .cal-day { transition: background .12s, border-color .12s; }
.calendar.dragging .cal-day.empty-day { display: flex; }
.cal-day.drop-target { border-color: var(--ice) !important; background: rgba(76, 194, 255, .1); box-shadow: inset 0 0 0 1px var(--ice); }
body.no-select, body.no-select * { user-select: none !important; cursor: grabbing !important; }
.cal-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 250; width: auto; max-width: 90vw; }
/* ---------- dashboard: pasek planów ---------- */
.plan-strip { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 560px) { .plan-strip { grid-template-columns: minmax(0, 1fr); } }
.plan-stat { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; color: var(--text); }
a.plan-stat:hover { border-color: var(--ice); color: var(--text); }
.plan-stat .label { color: var(--muted); font-size: 13px; }
.plan-stat .value { font: 700 26px/1.2 var(--display); }
.plan-stat .hint { margin: 0; color: var(--ice); }
.plan-stat.hot { border-color: rgba(76, 194, 255, .5); box-shadow: 0 0 30px rgba(76, 194, 255, .12); }
/* ---------- tydzień: siatka godzin co 15 min ---------- */
.calendar.weekgrid { display: block; }
.wg-head { display: grid; grid-template-columns: 52px repeat(7, minmax(0, 1fr)); gap: 4px; position: sticky; top: 62px; z-index: 5;
background: var(--surface); padding: 4px 0 8px; }
.wg-dh { text-align: center; font-size: 12px; color: var(--muted); padding: 4px; border-radius: 8px; border: 1px solid transparent;
box-sizing: border-box; height: 46px; position: relative; padding-top: 7px; } /* ta sama wysokość z „Premiera” i bez; dzień i data zawsze w tym samym miejscu */
.wg-dh strong { color: var(--text); font-family: var(--display); }
.wg-dh em { position: absolute; left: 0; right: 0; bottom: 5px; font-style: normal; font-size: 10px; line-height: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--orange-2); }
.wg-dh.today { border-color: var(--ice); }
.wg-dh.release { border-color: var(--orange); background: rgba(255, 107, 44, .08); }
.wg-dh.drop-target { border-color: var(--ice); background: rgba(76, 194, 255, .1); }
.wg-body { position: relative; display: grid; grid-template-columns: 52px repeat(7, minmax(0, 1fr)); gap: 4px; }
.wg-times { position: relative; }
.wg-h { position: absolute; right: 6px; transform: translateY(-50%); font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.wg-h:first-child { transform: none; }
.wg-col { position: relative; border-radius: 8px; border: 1px solid var(--line); background-color: var(--bg-2);
background-image:
repeating-linear-gradient(to bottom, rgba(255,255,255,.08) 0 1px, transparent 1px calc(var(--slot) * 2)); }
.wg-col.today { border-color: rgba(76, 194, 255, .5); }
.wg-col.release { border-color: rgba(255, 107, 44, .6); background-color: rgba(255, 107, 44, .05); }
.wg-col.drop-target { border-color: var(--ice); box-shadow: inset 0 0 0 1px var(--ice); }
.wg-col .cal-post { position: absolute; margin: 0; padding: 3px 6px; overflow: hidden; font-size: 11.5px; line-height: 1.25; z-index: 1; }
.wg-col .cal-post:hover { z-index: 3; }
.wg-col .cal-post .s { white-space: nowrap; }
.wg-col .cal-post.has-media { flex-direction: row; gap: 5px; }
.wg-col .cal-thumb { width: 30px; height: 30px; aspect-ratio: auto; }
.calendar.weekgrid .cal-post.has-media { flex-direction: row; }
.wg-drop { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--ice); z-index: 4; pointer-events: none;
font: 700 11px/1 var(--display); color: transparent; }
.wg-drop::before { content: attr(data-label); position: absolute; left: 2px; top: -9px; padding: 3px 6px; border-radius: 6px; background: var(--ice); color: #071019; }
/* ---------- pop-up posta: poprzedni / następny ---------- */
.post-nav { width: 34px; height: 34px; flex: none; border-radius: 50%; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--text);
font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding-bottom: 2px; }
.post-nav:hover:not([disabled]) { border-color: var(--ice); }
.post-nav[disabled] { opacity: .3; cursor: default; }
.post-nav-title { flex: 1; min-width: 0; text-align: center; }
.post-nav-title strong, .post-nav-title small { display: block; }
/* ---------- kampania / ocena / pitch / notka – w wierszach ---------- */
.plan-extras { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.plan-extras .field { margin-bottom: 0; }
#post-dialog .kv dd { white-space: pre-line; }
/* ---------- bez górnego paska ---------- */
.mobile-menu-btn { display: none; }
@media (max-width: 960px) {
.mobile-menu-btn { display: inline-flex; position: fixed; top: 12px; left: 12px; z-index: 50; width: 42px; height: 42px; align-items: center; justify-content: center;
background: rgba(10, 12, 16, .9); backdrop-filter: blur(8px); font-size: 18px; }
.mobile-menu-btn .n { position: absolute; top: -5px; right: -5px; background: var(--orange); color: #fff; font: 700 10px/1 var(--font); border-radius: 999px; padding: 3px 6px; }
.content { padding-top: 66px; }
}
.wg-head { top: 0; }
/* ---------- strona główna artysty: odstępy między modułami ---------- */
.dash-section { margin-bottom: 44px; }
.dash-label { margin: 0 0 14px; }
.dash-cols { gap: 22px; }
.content > .page-head { margin-bottom: 30px; }
@media (max-width: 760px) { .dash-section { margin-bottom: 32px; } }
.stats-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
/* ---------- menu: funkcje spoza planu ---------- */
.nav-link.locked { position: relative; color: #4c5466; cursor: not-allowed; }
.nav-link.locked svg { opacity: .7; }
.nav-link.locked:hover { background: transparent; color: #5b6377; }
.nav-link.locked .lock { margin-left: auto; display: inline-flex; }
.nav-link.locked .lock svg { width: 14px; height: 14px; opacity: 1; }
.nav-link.locked::after { content: attr(data-tip); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
width: 230px; padding: 9px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line-2); box-shadow: var(--shadow);
color: var(--text); font-size: 12.5px; font-weight: 500; line-height: 1.4; white-space: normal; z-index: 70;
opacity: 0; visibility: hidden; transition: opacity .15s; pointer-events: none; }
.nav-link.locked:hover::after, .nav-link.locked:focus-visible::after { opacity: 1; visibility: visible; }
@media (min-width: 961px) { .sidebar { overflow: visible; z-index: 20; } }
@media (max-width: 960px) {
.nav-link.locked::after { left: 12px; right: 12px; top: calc(100% + 4px); transform: none; width: auto; }
}
/* ---------- ocena materiałów: minimalistyczny wykres (status = kropka + podpis) ---------- */
:root { --st-good: #3fae6a; --st-warning: #d9a53a; --st-critical: #d0605e; }
.mat-chart { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 32px; align-items: center; padding: 6px 0 2px; }
@media (max-width: 640px) { .mat-chart { grid-template-columns: minmax(0, 1fr); gap: 20px; } .mat-score { justify-self: start; } }
.mat-score { position: relative; width: 104px; height: 104px; }
.mat-score svg { width: 104px; height: 104px; transform: rotate(-90deg); }
.mat-score circle { fill: none; stroke-width: 1.6; }
.mat-score .trk { stroke: rgba(255, 255, 255, .07); }
.mat-score .val { stroke-linecap: round; opacity: .85; }
.mat-score.s-good .val { stroke: var(--st-good); } .mat-score.s-warning .val { stroke: var(--st-warning); } .mat-score.s-critical .val { stroke: var(--st-critical); }
.mat-score-txt { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2px; }
.mat-score-txt strong { font: 500 28px/1 var(--display); color: var(--text); letter-spacing: -.02em; }
.mat-score-txt small { color: var(--muted); font-size: 11px; letter-spacing: .04em; }
.mat-rows { display: grid; gap: 16px; }
.mat-row { position: relative; outline: none; }
.mat-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 7px; flex-wrap: wrap; }
.mat-label { font-size: 13.5px; font-weight: 500; color: #dfe5ee; }
.mat-val { color: var(--faint); font-size: 12.5px; }
.mat-st { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.mat-st i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.mat-st.s-good i { background: var(--st-good); } .mat-st.s-warning i { background: var(--st-warning); } .mat-st.s-critical i { background: var(--st-critical); }
.meter { height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.meter span { display: block; height: 100%; border-radius: 3px; opacity: .8; }
.meter .s-good { background: var(--st-good); } .meter .s-warning { background: var(--st-warning); } .meter .s-critical { background: var(--st-critical); }
.mat-row::after { content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 6px); max-width: 320px; padding: 8px 11px; border-radius: 9px;
background: var(--surface-2); border: 1px solid var(--line-2); box-shadow: var(--shadow); color: var(--text); font-size: 12.5px; line-height: 1.4;
opacity: 0; visibility: hidden; transition: opacity .12s; pointer-events: none; z-index: 5; }
.mat-row:hover::after, .mat-row:focus-visible::after { opacity: 1; visibility: visible; }
/* ---------- kafelki planu: jak „Twój plan jest gotowy!” (nazwa) i „Przejrzyj kalendarz…” (opis) ---------- */
.plan-extras .card h3 { font: 700 15px/1.55 var(--font); letter-spacing: 0; color: var(--text); margin-bottom: 4px; }
.plan-extras .prose { font-size: 15px; line-height: 1.55; color: var(--muted); }
/* ---------- tydzień: nachodzące się posty – jeden na drugim ---------- */
.wg-col .cal-post.stacked { box-shadow: 0 -6px 14px rgba(0, 0, 0, .45); }
.wg-col .cal-post.stacked:hover, .wg-col .cal-post.stacked:focus-visible { z-index: 20 !important; border-color: var(--ice); }
.wg-col .cal-post.stacked { opacity: 1; background: #0e0e13; }
.wg-col .cal-post.stacked.story { border-style: dashed; }
/* ---------- podgląd posta: szeroki i niski (lewo: materiał, prawo: pola) ---------- */
dialog#post-dialog { width: min(1060px, calc(100vw - 24px)); }
dialog#post-dialog:focus { outline: none; }
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 24px; align-items: start; }
.post-left { min-width: 0; }
.post-right { min-width: 0; }
.post-badges { margin-bottom: 8px; }
.post-format { font-size: 12.5px; margin: 0 0 10px; }
.post-left .post-media { margin-bottom: 12px; }
.post-left .post-media video, .post-left .post-media .media-open { max-height: min(240px, 32vh); }
.post-left .post-media .media-open img { max-height: min(240px, 32vh); width: 100%; object-fit: contain; }
.post-left .post-media .media-open { min-height: 80px; display: grid; place-items: center; }
.post-kv { font-size: 13.5px; margin: 0; grid-template-columns: max-content minmax(0, 1fr); }
.post-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 10px; }
.post-fields.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.post-fields .field { margin-bottom: 10px; }
.post-form label { font-size: 12px; margin-bottom: 4px; }
.post-form input, .post-form select { padding: 8px 10px; font-size: 14px; }
.post-form textarea[name=caption] { min-height: 150px; }
.post-form .field { margin-bottom: 10px; }
.post-more { margin-top: 4px; }
.post-more summary { cursor: pointer; color: var(--muted); font-size: 13px; margin-bottom: 10px; }
@media (max-width: 760px) {
.post-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.post-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ---------- story: brak opisu posta ---------- */
.caption-wrap.is-story label { color: var(--faint); }
.caption-wrap.is-story textarea { opacity: .4; cursor: not-allowed; resize: none; background: transparent; border-style: dashed; }
[hidden] { display: none !important; }
/* ---------- podgląd posta: stały rozmiar i pozycja (nic nie skacze przy zmianie posta) ---------- */
dialog#post-dialog[open] { display: flex; flex-direction: column; position: fixed; inset: 0; margin: auto;
width: min(1060px, calc(100vw - 24px)); height: min(640px, calc(100vh - 40px)); max-height: none; overflow: hidden; }
dialog#post-dialog .modal-head, dialog#post-dialog .modal-foot { flex: none; }
dialog#post-dialog .modal-head { min-height: 74px; }
dialog#post-dialog .modal-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
dialog#post-dialog .modal-foot { min-height: 70px; align-items: center; }
dialog#post-dialog .post-form textarea[name=caption] { height: 190px; min-height: 190px; resize: none; }
dialog#post-dialog .post-left .post-media { height: min(240px, 32vh); }
dialog#post-dialog .post-left .post-media video,
dialog#post-dialog .post-left .post-media .media-open { height: calc(100% - 22px); max-height: none; }
dialog#post-dialog .post-left .post-media .media-open img { height: 100%; max-height: none; }
dialog#post-dialog .modal-foot .spacer { flex: 1; }
@media (max-width: 760px) { dialog#post-dialog[open] { height: calc(100vh - 24px); } }
/* ---------- podgląd posta: lewa = sam materiał / propozycja, prawa = reszta ---------- */
dialog#post-dialog .post-layout { height: 100%; align-items: stretch; }
dialog#post-dialog .post-left { display: flex; min-height: 0; }
dialog#post-dialog .post-left .post-media { height: auto; flex: 1; margin: 0; display: flex; border-radius: 12px; overflow: hidden; background: #040507; }
dialog#post-dialog .post-left .post-media video,
dialog#post-dialog .post-left .post-media .media-open { width: 100%; height: 100%; max-height: none; border-radius: 0; }
dialog#post-dialog .post-left .post-media .media-open img { width: 100%; height: 100%; max-height: none; object-fit: contain; }
dialog#post-dialog .audio-box { margin: auto; display: grid; gap: 12px; place-items: center; font-size: 34px; width: 80%; }
dialog#post-dialog .audio-box audio { width: 100%; }
dialog#post-dialog .post-proposal { flex: 1; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); overflow-y: auto; }
dialog#post-dialog .post-proposal h4 { margin-bottom: 10px; }
dialog#post-dialog .post-proposal .prose { white-space: pre-line; color: var(--text); line-height: 1.6; }
dialog#post-dialog .post-right { overflow-y: auto; min-height: 0; padding-right: 2px; }
dialog#post-dialog .post-kv { margin: 2px 0 10px; font-size: 13px; }
dialog#post-dialog .post-form textarea[name=caption] { height: 170px; min-height: 170px; }
@media (max-width: 760px) { dialog#post-dialog .post-layout { height: auto; } dialog#post-dialog .post-left { height: 260px; } }
/* ---------- karuzela w podglądzie posta ---------- */
dialog#post-dialog .post-media.carousel { position: relative; }
.carousel .slides { position: relative; flex: 1; display: flex; }
.carousel .slide { position: absolute; inset: 0; display: none; }
.carousel .slide.on { display: flex; }
.carousel .slide .media-open, .carousel .slide video { width: 100%; height: 100%; }
.carousel .slide .media-open img { width: 100%; height: 100%; object-fit: contain; }
.slide-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25);
background: rgba(6, 7, 9, .6); backdrop-filter: blur(6px); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding-bottom: 2px; z-index: 2; }
.slide-nav.prev { left: 10px; } .slide-nav.next { right: 10px; }
.slide-nav:hover:not([disabled]) { border-color: var(--ice); }
.slide-nav[disabled] { opacity: .25; cursor: default; }
.slide-count { position: absolute; top: 10px; right: 10px; padding: 3px 9px; border-radius: 999px; background: rgba(6, 7, 9, .65); color: #fff; font-size: 12px; font-weight: 600; z-index: 2; }
.slide-dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; z-index: 2; }
.slide-dots button { width: 7px; height: 7px; padding: 0; border-radius: 50%; border: 0; background: rgba(255,255,255,.35); cursor: pointer; }
.slide-dots button.on { background: #fff; }
.cal-thumb .slides-n { position: absolute; right: 1px; bottom: 1px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 4px; background: rgba(6, 7, 9,.8);
color: #fff; font-size: 9.5px; line-height: 14px; text-align: center; }
dialog#post-dialog .post-kv dd.empty-val { color: var(--faint); }
/* ---------- strona główna: „Twój ostatni plan promo” ---------- */
.last-plan { padding: 24px 26px; }
.last-plan-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.last-plan-title { font-size: clamp(22px, 2.6vw, 28px); margin: 0; }
.last-plan-badge { font-size: 13px; padding: 5px 12px; }
.last-plan-text { color: var(--muted); margin: 14px 0 0; }
.last-plan-progress { margin-top: 18px; display: grid; gap: 8px; font-size: 14px; }
.last-plan-progress .meter { height: 6px; }
.last-plan-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; }
.last-plan-foot .btn { margin-left: auto; }
.last-plan-next { font-size: 14px; }
.last-plan-next .muted { font-size: 12.5px; }
/* ---------- integracje artysty (pracownik) ---------- */
.keys-card { margin-bottom: 18px; display: grid; gap: 10px; }
.keys-row { display: flex; flex-wrap: wrap; gap: 8px; }
.key-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); padding: 4px 10px; border: 1px solid var(--line-2); border-radius: 999px; }
.key-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--st-critical); }
.key-chip.on i { background: var(--st-good); }
.integ-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); margin-bottom: 18px; }
.integ-card .card-head h3 { display: flex; align-items: center; gap: 8px; }
.integ-warn { font-size: 13px; color: var(--warn); margin: 0 0 12px; }
.integ-err { font-size: 13px; color: var(--err); background: rgba(255, 93, 108, .07); border: 1px solid rgba(255, 93, 108, .25); border-radius: 8px; padding: 8px 10px; margin: 0 0 12px; }
.integ-data { font-size: 13px; margin: 0 0 12px; }
.integ-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 12px; }
.integ-help ol { color: var(--muted); font-size: 14px; line-height: 1.6; padding-left: 20px; margin: 12px 0 0; }
.integ-help summary { cursor: pointer; }
@media (max-width: 760px) { .integ-grid { grid-template-columns: minmax(0, 1fr); } }
/* ---------- wskaźniki: zmiana % i podział ---------- */
.stat .delta.up { color: var(--st-good); }
.stat .delta.down { color: var(--st-critical); }
.stat .delta .faint { font-size: 11.5px; }
.stat-lock { color: var(--faint); display: inline-flex; }
.stat[data-tip] { position: relative; cursor: help; outline: none; }
.stat[data-tip]::after { content: attr(data-tip); white-space: pre-line; position: absolute; left: 12px; right: 12px; top: calc(100% + 6px); padding: 8px 11px; border-radius: 9px;
background: var(--surface-2); border: 1px solid var(--line-2); box-shadow: var(--shadow); color: var(--text); font-size: 12.5px; line-height: 1.45;
opacity: 0; visibility: hidden; transition: opacity .12s; pointer-events: none; z-index: 5; }
.stat[data-tip]:hover::after, .stat[data-tip]:focus-visible::after { opacity: 1; visibility: visible; }
/* status połączeń u artysty */
.conn-list { display: grid; gap: 8px; }
.conn-row { display: flex; align-items: center; gap: 10px; font-size: 14px; flex-wrap: wrap; }
.conn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); flex: none; }
.conn-dot.s-good { background: var(--st-good); } .conn-dot.s-warning { background: var(--st-warning); } .conn-dot.s-critical { background: var(--st-critical); }
/* ---------- Ustawienia → Integracje (artysta) ---------- */
.integ-card .card-head h3 { margin: 0; font-size: 17px; }
.conn-st { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); }
.conn-dot.s-none { background: var(--line-2); }
.howto { margin: 0 0 12px; font-size: 13.5px; }
.howto summary { cursor: pointer; color: var(--ice); font-weight: 500; }
.howto ol { color: var(--muted); line-height: 1.6; padding-left: 20px; margin: 10px 0 0; }
.howto ol li + li { margin-top: 4px; }
/* ---------- Ustawienia → Integracje: 4 karty w jednym rzędzie ---------- */
.integ-row { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
.integ-row .integ-card { display: flex; flex-direction: column; }
.integ-row .integ-card .card-head { flex-direction: column; align-items: flex-start; gap: 6px; }
.integ-row .integ-card .form-grid { grid-template-columns: minmax(0, 1fr); }
.integ-row .integ-card .integ-foot { margin-top: auto; flex-direction: column; align-items: stretch; }
.integ-row .integ-card .integ-foot .row { justify-content: flex-end; }
@media (max-width: 1250px) { .integ-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .integ-row { grid-template-columns: minmax(0, 1fr); } }
.social-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
/* ---------- Analityka ---------- */
.an-total { font: 700 28px/1 var(--display); }
.an-bars { display: grid; gap: 12px; }
.an-bar { display: grid; grid-template-columns: 110px minmax(0, 1fr) 190px; gap: 14px; align-items: center; font-size: 14px; }
.an-bar-label { color: var(--muted); }
.an-bar-track { height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.an-bar-track span { display: block; height: 100%; border-radius: 8px; background: var(--ice); opacity: .85; }
.an-bar-val { text-align: right; white-space: nowrap; }
.an-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.an-card .card-head h3 { margin: 0; }
.an-video { display: grid; gap: 2px; padding: 10px 12px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); color: var(--text); font-size: 13.5px; }
.an-video:hover { border-color: var(--ice); color: var(--text); }
.an-video .faint { font-size: 12px; }
.an-rows { margin: 0; display: grid; }
.an-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.an-row:last-child { border-bottom: 0; }
.an-row dt { color: var(--muted); font-size: 14px; }
.an-row dt small { display: block; color: var(--faint); font-size: 11.5px; }
.an-row dd { margin: 0; display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.an-row dd strong { font: 600 17px var(--display); color: var(--text); }
.an-delta { font-size: 12.5px; color: var(--muted); }
.an-delta.up { color: var(--st-good); } .an-delta.down { color: var(--st-critical); }
.an-empty { margin: 0; font-size: 14px; }
.stat-info { color: var(--faint); cursor: help; font-size: 13px; }
@media (max-width: 640px) { .an-bar { grid-template-columns: 80px minmax(0, 1fr); } .an-bar-val { grid-column: 1 / -1; text-align: left; } }
/* Trendy TikTok */
.trend-fetch { margin-bottom: 18px; display: grid; gap: 4px; justify-items: start; }
.trend-fetch .field { width: 100%; margin-bottom: 8px; }
.trend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; align-items: start; }
.trend-card { display: flex; gap: 16px; padding: 16px; }
.trend-cover { width: 92px; height: 164px; align-self: flex-start; object-fit: cover; border-radius: 10px; flex: none; background: var(--bg-2); }
.trend-body { flex: 1; min-width: 0; display: grid; gap: 8px; align-content: start; }
.trend-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.trend-kind { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ice); }
.trend-card h3 { margin: 0; font-size: 17px; }
.trend-what { margin: 0; color: var(--muted); font-size: 14px; }
.trend-how { padding: 10px 12px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); }
.trend-how strong { font-size: 12px; color: var(--muted); font-weight: 600; }
.trend-how p { margin: 4px 0 0; font-size: 14px; }
.trend-stats { margin: 0; font-size: 13px; color: var(--muted); }
.trend-ex { display: flex; flex-wrap: wrap; gap: 6px; }
.trend-ex a { font-size: 12.5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text); white-space: nowrap; }
.trend-ex a:hover { border-color: var(--ice); }
.trend-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; padding-top: 4px; }
.trend-actions form { margin: 0; }
.trend-edit { flex-basis: auto; }
.trend-edit summary { list-style: none; cursor: pointer; }
.trend-edit summary::-webkit-details-marker { display: none; }
.trend-edit[open] { flex-basis: 100%; order: 9; }
.trend-edit[open] form { margin-top: 10px; }
@media (max-width: 520px) { .trend-grid { grid-template-columns: 1fr; } .trend-cover { width: 64px; } }
/* Ustawienia: wybór jak przełącznik (język) i włącznik zgody */
.seg-radio label { margin: 0; cursor: pointer; }
.seg-radio input { position: absolute; opacity: 0; pointer-events: none; }
.seg-radio span { display: block; padding: 8px 18px; color: var(--muted); font: 600 13.5px var(--font); }
.seg-radio input:checked + span { background: var(--surface-2); color: var(--text); }
.seg-radio input:focus-visible + span { outline: 2px solid var(--ice); outline-offset: -2px; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px;
border: 1px solid var(--line-2); border-radius: var(--radius-sm); cursor: pointer; position: relative; }
.switch-row > span { display: grid; gap: 2px; }
.switch-row strong { font-size: 14px; color: var(--text); font-weight: 600; }
.switch-row small { color: var(--muted); font-size: 13px; font-weight: 400; }
.switch-row input { position: absolute; opacity: 0; pointer-events: none; }
.switch-row i { flex: none; width: 38px; height: 22px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line-2); position: relative; transition: background .15s; }
.switch-row i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: transform .15s, background .15s; }
.switch-row input:checked + i { background: var(--ice-2); border-color: var(--ice-2); }
.switch-row input:checked + i::after { transform: translateX(16px); background: #09090c; }
.switch-row input:focus-visible + i { outline: 2px solid var(--ice); outline-offset: 2px; }
/* Integracje: „Skąd wziąć…?” na tej samej wysokości w każdej karcie (tuż nad przyciskami) */
.integ-row .integ-card .howto { margin-top: auto; }
.integ-row .integ-card .integ-remove { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.integ-row .integ-card .integ-foot { margin-top: 0; flex-direction: row; justify-content: flex-end; align-items: center; }
/* Dobre praktyki */
.pr-progress { margin-bottom: 18px; display: grid; gap: 10px; max-width: 980px; }
.pr-bar { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.pr-bar i { display: block; height: 100%; background: var(--ice-2); border-radius: 999px; transition: width .25s; }
.pr-sections { display: grid; gap: 16px; max-width: 980px; }
.pr-section h2 { margin: 0 0 4px; font-size: 18px; }
.pr-lead { margin: 0 0 10px; font-size: 14px; }
.pr-item { border-top: 1px solid var(--line); }
.pr-item summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 12px 0; cursor: pointer; }
.pr-item summary::-webkit-details-marker { display: none; }
.pr-title { flex: 1; min-width: 0; font-weight: 500; font-size: 15px; }
.pr-item.done .pr-title { color: var(--muted); }
.pr-freq { flex: none; font-size: 12px; color: var(--muted); border: 1px solid var(--line-2); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.pr-check { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-2); background: none; cursor: pointer; padding: 0; position: relative; }
.pr-check:hover { border-color: var(--ice); }
.pr-check[aria-pressed="true"] { background: var(--ice-2); border-color: var(--ice-2); }
.pr-check[aria-pressed="true"]::after { content: ""; position: absolute; left: 6px; top: 2.5px; width: 5px; height: 10px; border: solid #09090c; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pr-body { padding: 0 0 14px 32px; font-size: 14px; color: var(--muted); line-height: 1.6; }
.pr-body p { margin: 0; }
.pr-tip { margin-top: 8px !important; color: var(--text); }
.pr-tip b { color: var(--ice); font-weight: 600; }
.pr-count { flex: none; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pr-item.done .pr-count { color: var(--ice); }
.pr-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pr-body p + .pr-steps { margin-top: 10px; }
.pr-step { display: flex; gap: 12px; align-items: flex-start; }
.pr-step .pr-check { margin-top: 2px; }
.pr-step strong { display: block; color: var(--text); font-weight: 500; }
.pr-step.done strong { color: var(--muted); }
@media (max-width: 600px) { .pr-freq { display: none; } .pr-body { padding-left: 0; } }
/* Kafelek wskaźnika: tytuł numeru / filmu, z którego pochodzi wartość (pełny w dymku) */
.stat-src { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
/* Analityka: jedna platforma = jeden wiersz na całą szerokość, tabela wskaźników z kolumną wzrostu */
.an-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: stretch; }
.an-grid .an-tiktok { grid-column: 1 / -1; }
@media (max-width: 900px) { .an-grid { grid-template-columns: minmax(0, 1fr) !important; } }
.an-card .an-video { display: inline-grid; margin-right: 10px; min-width: 260px; }
.an-table { width: 100%; }
.an-table th.num, .an-table td.num { text-align: right; white-space: nowrap; }
.an-table td small { display: block; color: var(--faint); font-size: 11.5px; }
.an-table td strong { font: 600 17px var(--display); color: var(--text); }
.an-table th:first-child { width: 45%; }
.an-table th.num { white-space: normal; }
/* Społeczność */
.cm-join { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.cm-join h3 { margin: 0 0 4px; } .cm-join p { margin: 0; }
.cm-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.cm-filter a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); font-size: 13px; font-weight: 500; }
.cm-filter a.on { background: var(--surface-2); color: var(--text); border-color: var(--line-2); }
.cm-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-items: stretch; }
.cm-card { display: flex; flex-direction: column; gap: 10px; }
.cm-head { display: flex; gap: 12px; align-items: center; }
.cm-head h3 { margin: 0; font-size: 17px; }
.cm-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none;
background: var(--surface-2); border: 1px solid var(--line-2); font: 700 16px var(--display); color: var(--ice); }
.cm-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cm-tag { font-size: 12px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text); }
.cm-about { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.55; }
.cm-looking { margin: 0; font-size: 13.5px; }
.cm-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.cm-links { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; }
.cm-links a { color: var(--muted); } .cm-links a:hover { color: var(--ice); }
.cm-thread { color: var(--text); } .cm-thread:hover { color: var(--text); background: var(--bg-2); }
.chip-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-checks label { margin: 0; cursor: pointer; }
.chip-checks input { position: absolute; opacity: 0; pointer-events: none; }
.chip-checks span { display: inline-block; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); font: 500 13.5px var(--font); }
.chip-checks input:checked + span { background: var(--surface-2); color: var(--text); border-color: var(--ice); }
.chip-checks input:focus-visible + span { outline: 2px solid var(--ice); outline-offset: 2px; }
.dm-box { max-width: 760px; display: grid; gap: 14px; margin-bottom: 10px; }
.dm-list { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; padding-right: 4px; }
.dm-msg { max-width: 75%; align-self: flex-start; background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; padding: 9px 12px; }
.dm-msg.mine { align-self: flex-end; background: var(--surface-2); border-radius: 14px 14px 4px 14px; }
.dm-msg p { margin: 0; white-space: pre-wrap; font-size: 14.5px; }
.dm-msg small { display: block; margin-top: 4px; color: var(--faint); font-size: 11.5px; }
.dm-empty { margin: 0; font-size: 14px; }
.dm-form { display: flex; gap: 10px; align-items: flex-end; border-top: 1px solid var(--line); padding-top: 14px; }
.dm-form textarea { flex: 1; resize: vertical; }
@media (max-width: 600px) { .cm-join { flex-direction: column; align-items: flex-start; } .dm-msg { max-width: 90%; } }
.cm-compose { display: grid; gap: 12px; margin-bottom: 16px; max-width: 760px; }
.cm-compose textarea { resize: vertical; }
.cm-compose-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cm-compose-foot .chip-checks { flex: 1; min-width: 0; } /* rodzaje posta i „Opublikuj” w jednej linii */
.cm-compose-foot .btn { margin-left: auto; flex: none; }
.cm-feed { display: grid; gap: 14px; max-width: 760px; }
.cm-post { display: grid; gap: 10px; }
.cm-post .grow small { display: block; }
.cm-body { margin: 0; white-space: pre-wrap; font-size: 15px; line-height: 1.55; }
.cm-actions { display: flex; gap: 8px; align-items: center; border-top: 1px solid var(--line); padding-top: 10px; }
.cm-actions form { margin: 0; }
.cm-like { background: none; border: 1px solid var(--line-2); color: var(--muted); border-radius: 999px; padding: 4px 12px; font: 600 13px var(--font); cursor: pointer; }
.cm-like.on { color: var(--orange); border-color: rgba(255, 107, 44, .45); }
.cm-like:disabled { cursor: default; opacity: .6; }
.cm-head .grow { flex: 1; min-width: 0; }
/* odpowiedzi pod postem (forum) */
.cm-replies { display: grid; gap: 12px; padding-left: 14px; border-left: 2px solid var(--line); }
.cm-reply { display: flex; gap: 10px; align-items: flex-start; }
.cm-reply .grow { flex: 1; min-width: 0; }
.cm-reply .cm-body { margin-top: 2px; font-size: 14.5px; }
.cm-reply form { margin: 0; }
.cm-avatar-sm { width: 30px; height: 30px; font-size: 13px; }
.cm-reply-form { display: flex; gap: 10px; align-items: flex-end; margin: 0; }
.cm-reply-form textarea { flex: 1; resize: vertical; min-height: 38px; }
/* Analityka: równe wiersze w kartach obok siebie – linie w Spotify i YouTube (FB i IG) na tej samej wysokości */
.an-table tbody td { height: 60px; vertical-align: middle; padding-top: 0; padding-bottom: 0; }
.an-table tbody td:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; }
.an-table tbody td:first-child small { overflow: hidden; text-overflow: ellipsis; }
.an-card .an-video { min-height: 62px; box-sizing: border-box; }
.an-card .an-video strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-table { table-layout: fixed; }
.an-table th:first-child { width: 54%; } .an-table th:nth-child(2) { width: 18%; }
/* Analityka: niższe wiersze, dopisek pod „?” (dymek po najechaniu) */
.an-table tbody td { height: 46px; }
.an-table tbody td:first-child { overflow: visible; }
.an-table td strong { font-size: 16px; }
.an-hint { position: relative; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 4px; border-radius: 50%;
border: 1px solid var(--line-2); color: var(--faint); font: 600 10.5px var(--font); cursor: help; vertical-align: 1px; outline: none; }
.an-hint:hover, .an-hint:focus-visible { color: var(--text); border-color: var(--ice); }
.an-hint::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); white-space: nowrap;
padding: 6px 10px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--text); font: 500 12.5px var(--font);
opacity: 0; visibility: hidden; transition: opacity .12s; z-index: 5; pointer-events: none; }
.an-hint:hover::after, .an-hint:focus-visible::after { opacity: 1; visibility: visible; }
/* Analityka: wykres roczny */
.an-year { margin-bottom: 16px; }
.yc-head { flex-wrap: wrap; gap: 10px; }
.yc-head h3 { margin: 0; }
.yc-sub { margin: 4px 0 8px; font-size: 12.5px; }
.yc-plot { position: relative; width: 100%; }
.yc-plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.yc-grid { stroke: var(--line); stroke-width: 1; }
.yc-ax { fill: var(--faint); font: 500 11.5px var(--font); }
.yc-line { fill: none; stroke: var(--ice); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.yc-dot { fill: var(--ice); stroke: var(--surface); stroke-width: 2; }
.yc-cross { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 3; }
.yc-hit { fill: transparent; cursor: crosshair; }
.yc-tip { position: absolute; pointer-events: none; padding: 6px 10px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line-2);
box-shadow: var(--shadow); display: grid; gap: 1px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.yc-tip strong { color: var(--text); font: 600 15px var(--display); }
.yc-empty { margin: 6px 0 0; font-size: 13.5px; }
.an-table th .an-hint { text-transform: none; letter-spacing: 0; }
.an-table th .an-hint::after { white-space: normal; width: 240px; left: auto; right: -6px; transform: none; text-align: left; font-weight: 500; line-height: 1.45; }
.an-table th .an-hint::after { bottom: auto; top: calc(100% + 8px); z-index: 6; }
/* dymki przy wskaźnikach: zawijany tekst od ikony w prawo; tabela nie przewija się w poziomie (table-layout: fixed), więc nie przycina dymka */
.an-card .table-wrap { overflow: visible; }
.an-table td .an-hint::after { white-space: normal; width: max-content; max-width: min(280px, 70vw); left: -10px; transform: none;
text-align: left; line-height: 1.45; z-index: 6; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
/* Analityka: jeden odstęp (16 px) między wszystkimi kartami */
.an-followers, .an-year { margin: 0 0 16px; }
.an-grid { gap: 16px; margin: 0; }
.tt-sounds { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.tt-sounds .an-video { margin: 0; min-height: 0; }
.tt-uses { font-size: 12.5px; color: var(--ice); }
.an-total { display: inline-flex; align-items: baseline; gap: 10px; }
.an-total-g { font: 600 14px var(--font); }
.an-bar { grid-template-columns: 110px minmax(0, 1fr) 210px; }
.an-bar-val { display: inline-flex; justify-content: flex-end; align-items: baseline; gap: 8px; }
.an-bar-g { display: inline-block; min-width: 64px; text-align: right; }
/* Plan promo: Viral TikTok */
.viral-card .card-head { margin-bottom: 6px; }
.viral-card .card-head h3 { margin: 0; }
.viral-kv { margin: 0; display: grid; gap: 10px; }
.viral-kv dt { font-size: 12px; color: var(--muted); font-weight: 600; }
.viral-kv dd { margin: 2px 0 0; font-size: 14.5px; line-height: 1.55; }
.viral-kv dd { color: var(--muted); }
/* Analityka TikTok: profil z lewej, virale z prawej */
.tt-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.tt-sub { margin: 4px 0 10px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
@media (max-width: 900px) { .tt-split { grid-template-columns: minmax(0, 1fr); gap: 18px; } }
.tt-after .tt-sounds { margin: 14px 0 0; }
.an-tt-wrap { margin: 0 0 16px; }
.an-tt-wrap .an-card { height: auto; }
/* TikTok: „Twój dźwięk” w linii nagłówka */
.an-tiktok .card-head { gap: 16px; align-items: center; }
.tt-head-sounds { flex: 1; min-width: 0; }
.tt-head-sounds .tt-sounds { margin: 0; gap: 8px; }
.tt-head-sounds .an-video { display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 12px; min-width: 0; margin: 0; flex-wrap: wrap; }
.tt-head-sounds .an-video strong { white-space: nowrap; }
.an-tiktok .tt-head-sounds { margin: 0 0 14px; }
/* Followers: suma w tej samej kolumnie co liczby platform (wartość | udział | wzrost) */
.an-followers .card-head { align-items: baseline; }
.an-total { display: inline-flex; align-items: baseline; gap: 8px; }
.an-share { display: inline-block; width: 40px; text-align: right; }
.an-total-g { font: 500 14px var(--font); }
/* Działania (zadania techniczne) w kalendarzu i oknie posta */
.cal-post.action { border-style: dotted; }
.post-actions ul { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 8px; color: var(--text); font-size: 14.5px; line-height: 1.5; }
/* Post: format i platformy tylko do podglądu; kwadracik „opublikowano” w kalendarzu */
.post-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; margin-bottom: 12px; }
.post-meta .field { margin: 0; }
.post-ro { min-height: 38px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; color: var(--text); }
.plat-chip { font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text); white-space: nowrap; }
.cal-post { position: relative; }
.cal-check { position: absolute; top: 4px; right: 4px; width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--line-2);
background: var(--surface); cursor: pointer; z-index: 2; }
.cal-check:hover { border-color: var(--ice); }
.cal-check.on { background: var(--st-good, #4ade9b); border-color: var(--st-good, #4ade9b); }
.cal-check.on::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #09090c; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.cal-post .cal-txt { padding-right: 16px; }
.cal-post.is-done { opacity: .6; }
.cal-post.is-done .t { text-decoration: line-through; text-decoration-color: var(--muted); }
.post-actions li strong { font-weight: 600; color: var(--text); }
/* Podgląd posta: platformy do klikania, status jako checkbox, oznaczenia w jednej linii, opis z ikoną kopiowania */
button.plat-chip { background: none; cursor: pointer; color: var(--muted); font: 500 12px var(--font); border-style: dashed; }
button.plat-chip:hover { border-color: var(--ice); color: var(--text); }
.plat-chip.on { border-style: solid; background: var(--surface-2); color: var(--text); border-color: var(--ice); }
.post-pub { display: inline-flex; align-items: center; gap: 8px; height: 38px; margin: 0; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); cursor: pointer; font: 500 14px var(--font); color: var(--text); }
.post-pub input { position: absolute; opacity: 0; pointer-events: none; }
.post-pub i { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--line-2); position: relative; flex: none; }
.post-pub input:checked + i { background: var(--st-good, #4ade9b); border-color: var(--st-good, #4ade9b); }
.post-pub input:checked + i::after { content: ""; position: absolute; left: 4.5px; top: 1px; width: 4px; height: 8px; border: solid #09090c; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.post-pub input:focus-visible + i { outline: 2px solid var(--ice); outline-offset: 2px; }
.post-mentions { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 10px; font-size: 13.5px; }
.post-mentions b { font-weight: 600; color: var(--muted); }
.post-mentions em { font-style: normal; color: var(--text); }
.post-mentions .empty-val { color: var(--faint); }
.post-mentions .an-hint { vertical-align: 1px; }
.post-mentions .an-hint::after { white-space: nowrap; }
.cap-box { position: relative; }
.cap-box .prose { padding-right: 36px; }
.cap-copy { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; border: 1px solid var(--line-2);
background: var(--surface); color: var(--muted); cursor: pointer; padding: 0; }
.cap-copy svg { width: 15px; height: 15px; }
.cap-copy:hover { color: var(--text); border-color: var(--ice); }
.cap-copy.done { color: var(--st-good, #4ade9b); border-color: var(--st-good, #4ade9b); }
.cap-copy.done svg { display: none; } .cap-copy.done::after { content: "✓"; font-size: 14px; font-weight: 700; }
.caption-wrap.is-story .cap-copy { display: none; }
/* opis posta wypełnia resztę wysokości okna */
dialog#post-dialog .post-right { display: flex; flex-direction: column; min-height: 0; }
dialog#post-dialog .post-form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
dialog#post-dialog .caption-wrap { flex: 1; display: flex; flex-direction: column; min-height: 170px; }
dialog#post-dialog .caption-wrap .field { flex: 1; display: flex; flex-direction: column; margin-bottom: 0; }
dialog#post-dialog .caption-wrap .cap-box { flex: 1; display: flex; }
dialog#post-dialog .post-form textarea[name=caption] { flex: 1; height: auto; min-height: 150px; resize: none; }
/* Podgląd posta: bez etykiet daty/godziny/statusu, białe ikony kalendarza i zegara, dyskretny „?” */
dialog#post-dialog .post-fields input[type=date]::-webkit-calendar-picker-indicator,
dialog#post-dialog .post-fields input[type=time]::-webkit-calendar-picker-indicator { color: transparent; opacity: 1; cursor: pointer; width: 16px; height: 16px;
background: center / 16px 16px no-repeat; }
dialog#post-dialog .post-fields input[type=date]::-webkit-calendar-picker-indicator { background-image: url("data:image/svg+xml;utf8,"); }
dialog#post-dialog .post-fields input[type=time]::-webkit-calendar-picker-indicator { background-image: url("data:image/svg+xml;utf8,"); }
dialog#post-dialog .post-fields input[type=date], dialog#post-dialog .post-fields input[type=time] { color-scheme: dark; }
.post-mentions .an-hint { width: 13px; height: 13px; font-size: 9px; border-color: var(--line); color: var(--faint); opacity: .55; }
.post-mentions .an-hint:hover, .post-mentions .an-hint:focus-visible { opacity: 1; }
.post-type-ro { text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: 12.5px; }
.post-meta { grid-template-columns: 112px minmax(0, 1fr); } /* stała szerokość formatu – platformy zawsze w tym samym miejscu */
dialog#post-dialog .post-left .post-media { border: 1px solid var(--line); } /* ta sama ramka co przy propozycji treści */
/* Oznaczenie i Współtworzenie zawsze w tym samym miejscu (dwie równe kolumny) */
.post-mentions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.post-mentions > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-mentions > span:has(.an-hint) { overflow: visible; }
.plat-chip.on { background: rgba(76, 194, 255, .16); border-color: var(--ice); color: var(--text); } /* zaznaczone platformy – lekko niebieskie tło */
/* Oznaczenie i Współtworzenie pod sobą, wartości w jednej kolumnie */
.post-mentions { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.post-mentions > span { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: baseline; }
.post-mentions em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-mentions > span { grid-template-columns: 126px minmax(0, 1fr); } /* wartości w jednej linii z platformami (112px + 14px odstępu) */
dialog#post-dialog .post-pub { display: flex; width: 100%; box-sizing: border-box; } /* data | godzina | opublikowano = szerokość pola opisu */
/* Podgląd posta: równe odstępy między rzędami (data/godzina → format/platformy → oznaczenia → opis) */
dialog#post-dialog .post-form { gap: 16px; }
dialog#post-dialog .post-form > * { margin: 0 !important; }
dialog#post-dialog .post-fields .field, dialog#post-dialog .post-meta .field { margin: 0; }
dialog#post-dialog .post-meta { align-items: center; }
dialog#post-dialog .post-meta .post-ro { min-height: 0; }
dialog#post-dialog .post-pub { justify-content: space-between; } dialog#post-dialog .post-pub span { order: -1; } /* napis z lewej, kwadracik z prawej */
/* Viral TikTok – zwarty jak Kampania / Pitch / Notka */
.viral-card h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.viral-card h3 .badge { font-size: 11.5px; }
.viral-prose p { margin: 0 0 6px; } .viral-prose p:last-child { margin-bottom: 0; }
.viral-prose strong { color: var(--text); font-weight: 600; }
.viral-prose { white-space: normal; } .viral-card h3 { margin-bottom: 8px; }
.viral-prose { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
/* Podgląd posta: wgranie pliku zrobionego według propozycji treści */
.post-upload { display: grid; gap: 2px; justify-items: center; margin-top: 18px; padding: 14px; border: 1px dashed var(--line-2); border-radius: 10px; cursor: pointer; text-align: center; }
.post-upload:hover { border-color: var(--ice); }
.post-upload input { position: absolute; opacity: 0; pointer-events: none; width: 1px; }
.post-upload span { font: 600 14px var(--font); color: var(--text); }
.post-upload small { font-size: 12px; }
.post-upload.busy { opacity: .6; pointer-events: none; }
.post-upload:focus-within { outline: 2px solid var(--ice); outline-offset: 2px; }
dialog#post-dialog .post-proposal { display: flex; flex-direction: column; } dialog#post-dialog .post-proposal .post-upload { margin-top: auto; } /* przycisk wgrania na dole kafla */
dialog#post-dialog .post-proposal > .prose, dialog#post-dialog .post-proposal > ul { margin-bottom: 18px; }
.plan-sub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plan-title { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .plan-title .badge { font-family: var(--font); }
.cal-post.drag-ghost { position: fixed; } /* przeciągany post podąża za kursorem (nadpisuje position: relative z kwadracika) */
/* Kalendarz: godzina i format zawsze w jednej linii */
.cal-post .cal-txt { min-width: 0; }
.cal-post .t { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10.5px; letter-spacing: .02em; }
/* Kalendarz: linia „godzina · FORMAT” na całą szerokość posta, pod nią miniatura i tekst */
.cal-post .t { padding-right: 18px; font-size: 10.5px; }
.cal-post .cal-txt { padding-right: 0; }
.cal-post.has-media, .wg-col .cal-post.has-media, .calendar.weekgrid .cal-post.has-media, .calendar.week .cal-post.has-media {
display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 7px; row-gap: 3px; align-items: center; }
.cal-post.has-media .t { grid-column: 1 / -1; }
/* Tydzień (siatka godzin): miniatura po lewej na dwie linie, obok „godzina · FORMAT” i tekst */
.wg-col .cal-post.has-media { grid-template-columns: 26px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 6px; row-gap: 1px; align-items: start; }
.wg-col .cal-post.has-media .cal-thumb { grid-column: 1; grid-row: 1 / 3; width: 26px; height: 26px; }
.wg-col .cal-post.has-media .t { grid-column: 2; grid-row: 1; padding-right: 15px; }
.wg-col .cal-post.has-media .cal-txt { grid-column: 2; grid-row: 2; }
.wg-col .cal-check { top: 3px; right: 3px; width: 13px; height: 13px; }
/* Tydzień: jak w miesiącu – „godzina · FORMAT” na całą szerokość, pod spodem mała miniatura + tekst */
.wg-col .cal-post.has-media { grid-template-columns: 20px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 6px; row-gap: 2px; align-items: center; }
.wg-col .cal-post.has-media .t { grid-column: 1 / -1; grid-row: 1; }
.wg-col .cal-post.has-media .cal-thumb { grid-column: 1; grid-row: 2; width: 20px; height: 20px; font-size: 9px; }
.wg-col .cal-post.has-media .cal-txt { grid-column: 2; grid-row: 2; }
.wg-col .cal-thumb .slides-n { display: none; }
/* Z miniaturą: dwie linie tekstu na wysokości miniatury (miesiąc i tydzień) */
.cal-post.has-media .s { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.25; }
.cal-post.has-media .cal-thumb { width: 32px; height: 32px; }
.wg-col .cal-post.has-media { grid-template-columns: 30px minmax(0, 1fr); }
.wg-col .cal-post.has-media .cal-thumb { width: 30px; height: 30px; font-size: 11px; }
.wg-col .cal-post.has-media .s { font-size: 11px; }
/* Odrzucone materiały */
.media-row.rejected { opacity: .7; }
.media-row.rejected .media-prev { filter: grayscale(.8); }
.reject-note { margin: 6px 0 8px; font-size: 13.5px; color: var(--text); padding: 8px 10px; border-left: 2px solid var(--err); background: rgba(255, 93, 108, .06); border-radius: 0 8px 8px 0; }
.reject-box { margin-top: 8px; }
.reject-box summary { cursor: pointer; color: var(--err); font-size: 13px; font-weight: 500; }
.reject-box textarea { margin: 8px 0; width: 100%; }
.rej-card { max-width: 880px; margin: 0 0 18px; } .single-detail-wrap .rej-card, .card + .rej-card { margin-top: 18px; }
.group-pick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; font-size: 13px; color: var(--muted); font-weight: 500; }
.group-pick select { width: auto; padding: 4px 8px; font-size: 13px; }
.group-pick .faint { font-size: 12px; font-weight: 400; }
/* Lewy dolny róg: nazwa artysty + plan; po najechaniu „Ulepsz plan” */
.side-user { display: grid; gap: 4px; padding: 8px 12px; border-radius: 10px; color: var(--text); }
.side-user:hover, .side-user:focus-visible { background: var(--surface-2); color: var(--text); }
.side-user-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.side-user-name { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.side-plan { flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--ice); color: var(--ice); }
.side-upgrade { font-size: 12px; color: var(--ice); font-weight: 600; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .15s, opacity .15s; }
.side-user:hover .side-upgrade, .side-user:focus-visible .side-upgrade { max-height: 20px; opacity: 1; }
/* Podgląd posta: pobieranie pliku w oryginalnej jakości */
.post-media { position: relative; }
.media-dl { position: absolute; top: 10px; left: 10px; z-index: 3; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px;
background: rgba(6, 7, 9, .72); border: 1px solid var(--line-2); color: var(--text); }
.media-dl svg { width: 16px; height: 16px; }
.media-dl:hover { border-color: var(--ice); color: var(--ice); }
/* Plan promo: kafelek „Do stworzenia” */
/* „Do stworzenia” – ten sam język co „Ocena materiałów” i kafelki niżej: tytuł 15px, wyciszony opis, lekkie wiersze z kropką statusu */
.todo-card .card-head { align-items: flex-start; }
.todo-card .card-head h3 { display: flex; align-items: baseline; gap: 8px; margin: 0; font: 700 15px/1.55 var(--font); letter-spacing: 0; color: var(--text); }
.todo-count { font: 600 12px var(--font); color: var(--orange-2); padding: 1px 9px; border-radius: 999px;
border: 1px solid rgba(255, 107, 44, .4); background: rgba(255, 107, 44, .08); align-self: center; }
.todo-lead { margin: 2px 0 0; font-size: 14px; line-height: 1.55; color: var(--muted); max-width: 640px; }
.todo-list { display: grid; gap: 8px; padding: 2px 0; }
.todo-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center;
padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .015); transition: border-color .15s; }
.todo-row:hover { border-color: var(--line-2); }
.todo-row.done { background: transparent; border-style: dashed; }
.todo-main { min-width: 0; }
.todo-meta { color: var(--text); font-size: 13.5px; font-weight: 500; margin-bottom: 3px; }
.todo-meta strong { color: var(--text); font-weight: 600; }
.todo-what { font-size: 13px; line-height: 1.5; color: var(--muted); }
.todo-count.all { color: var(--st-good); border-color: transparent; background: none; padding: 0; }
.todo-toggle { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 6px 2px; cursor: pointer;
color: var(--faint); font: 500 12.5px var(--font); letter-spacing: .02em; transition: color .15s; }
.todo-toggle:hover { color: var(--text); }
.todo-toggle:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; border-radius: 6px; }
.todo-toggle svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
transform: rotate(180deg); transition: transform .2s ease; }
.collapsible.collapsed .todo-toggle svg { transform: none; }
.todo-ok { font-size: 12.5px; color: var(--faint); white-space: nowrap; }
.todo-row.done .todo-what { text-decoration: line-through; text-decoration-color: var(--faint); color: var(--faint); font-weight: 400; }
.todo-row.done .todo-meta, .todo-row.done .todo-meta strong { color: var(--faint); opacity: .8; }
.todo-up { position: relative; cursor: pointer; white-space: nowrap; background: transparent; border: 1px dashed var(--line-2);
color: var(--muted); font-weight: 500; }
.todo-up:hover { background: transparent; border-color: var(--muted); color: var(--text); }
.todo-up input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.todo-up.busy { opacity: .6; pointer-events: none; }
.todo-up:focus-within { outline: 2px solid var(--ice); outline-offset: 2px; }
@media (max-width: 760px) { .todo-row { gap: 8px 12px; } }
/* Lewy dolny róg: nazwa + plan, obok sama ikona wylogowania (podpis po najechaniu) */
.side-foot { display: flex; align-items: center; gap: 6px; }
.side-foot .side-user { flex: 1; min-width: 0; }
.side-email { flex: 1; min-width: 0; font-size: 12px; padding: 6px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-logout { position: relative; flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: var(--muted); }
.side-logout svg { width: 18px; height: 18px; }
.side-logout-form { display: contents; }
button.side-logout { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; }
.side-logout:hover, .side-logout:focus-visible { color: var(--text); background: var(--surface-2); }
.side-logout::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); right: 0; white-space: nowrap; padding: 5px 9px; border-radius: 7px;
background: var(--surface-2); border: 1px solid var(--line-2); color: var(--text); font-size: 12px; opacity: 0; visibility: hidden; transition: opacity .12s; pointer-events: none; }
.side-logout:hover::after, .side-logout:focus-visible::after { opacity: 1; visibility: visible; }
/* kalendarz: propozycja treści bez pliku – mały kwadrat z „!” także w widoku tygodnia */
.calendar.week .cal-thumb.todo { width: 34px; height: 34px; aspect-ratio: auto; }
/* pulpit artysty: „Materiały do stworzenia 0/6” w karcie ostatniego planu */
.last-plan-todo { display: flex; align-items: center; gap: 14px; margin-top: 20px; padding: 14px 16px; border-radius: 14px; color: var(--text);
border: 1px solid rgba(255, 107, 44, .28); background: rgba(255, 107, 44, .05); transition: border-color .15s, background .15s; }
.last-plan-todo:hover { border-color: rgba(255, 107, 44, .5); background: rgba(255, 107, 44, .08); }
.lpt-icon { flex: none; width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; font: 700 17px/1 var(--font);
color: var(--orange-2); background: rgba(255, 107, 44, .1); border: 1px solid rgba(255, 107, 44, .4); }
.lpt-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.lpt-txt strong { font-size: 14.5px; font-weight: 600; }
.lpt-txt small { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.lpt-arrow { color: var(--faint); transition: transform .15s, color .15s; }
.last-plan-todo:hover .lpt-arrow { color: var(--text); transform: translateX(2px); }
.last-plan-todo.all { border-color: var(--line); background: transparent; }
.last-plan-todo.all .lpt-icon { color: var(--st-good); background: rgba(63, 174, 106, .08); border-color: rgba(63, 174, 106, .35); }
@media (max-width: 560px) { .last-plan-todo { flex-wrap: wrap; } .lpt-txt { flex-basis: calc(100% - 52px); } .last-plan-todo .todo-count { margin-left: 52px; } .lpt-arrow { margin-left: auto; } }
/* najbliższa publikacja z miniaturą posta */
.last-plan-next { display: flex; align-items: center; gap: 12px; }
.lpn-txt { display: grid; gap: 4px; }
.lpn-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lpn-countdown { font-size: 11.5px; padding: 2px 9px; font-weight: 600; }
.lpn-thumb { position: relative; flex: none; width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: #040507; display: grid; place-items: center; }
.lpn-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lpn-thumb.video::after { content: "▶"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 11px; background: rgba(0, 0, 0, .3); }
.lpn-thumb.todo { background: rgba(255, 107, 44, .08); border: 1px solid rgba(255, 107, 44, .4); color: var(--orange-2); font: 700 17px/1 var(--font); }
/* pulpit: „Wskaźniki” + dyskretny link „Zobacz wszystko” do analityki */
.dash-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.dash-label-row .dash-label { margin: 0; }
.dash-more { font-size: 13px; font-weight: 500; color: var(--faint); white-space: nowrap; transition: color .15s; }
.dash-more:hover { color: var(--text); }
.lp-release { margin: 2px 0 0; }
.lp-countdown { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }
/* kalendarz: story i działania (bez opisu) – godzina i format u góry kafelka, nie na środku */
.cal-post.story:not(.has-media), .cal-post.action:not(.has-media) { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; }
/* analityka Spotify: playlisty „Discovered On” + czy jest na nich najnowszy numer */
.sp-pl { margin-top: 16px; }
.sp-pl .tt-sub { display: flex; align-items: center; gap: 6px; }
.sp-pl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sp-pl-list a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); }
.sp-pl-list a:hover { border-color: var(--line-2); }
.sp-pl-img { flex: none; width: 34px; height: 34px; border-radius: 6px; overflow: hidden; background: var(--bg-2); }
.sp-pl-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-pl-txt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.sp-pl-txt strong { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-pl-txt small { font-size: 12px; }
.sp-pl-st { flex: none; font-size: 12px; white-space: nowrap; max-width: 45%; overflow: hidden; text-overflow: ellipsis; }
.sp-pl-st.yes { color: var(--st-good); font-weight: 600; }
.sp-pl-st.no, .sp-pl-st.na { color: var(--faint); }
.sp-pl-empty { font-size: 13px; margin: 0; }
/* analityka: przełącznik Miesiąc / Tydzień (linki w stylu .seg) */
.seg.an-period a { display: inline-block; color: var(--muted); padding: 7px 14px; font: 600 13px var(--font); }
.seg.an-period a.on { background: var(--surface-2); color: var(--text); }
.an-grid.an-grid-top { margin: 0 0 16px; } /* Spotify i YouTube nad TikTokiem i wykresem */
/* analityka: kafelek „Analiza” (AI, edytowana przez zespół) nad Followers */
.an-analysis { margin: 0 0 16px; }
.an-analysis .card-head h3 { margin: 0; }
.an-analysis-text { font-size: 14.5px; line-height: 1.65; color: #d5dcea; }
.analysis-edit { margin-bottom: 16px; }
.analysis-edit textarea { font-size: 14px; line-height: 1.55; }
/* przycisk w kolorze „ice” (lekko niebieski), np. Zapisz w Użytkownikach */
.btn.ice { color: var(--ice); border-color: rgba(76, 194, 255, .35); background: rgba(76, 194, 255, .08); }
.btn.ice:hover { border-color: var(--ice); background: rgba(76, 194, 255, .14); }
/* ---------- pola wyboru: własna strzałka; odstęp strzałki od prawej krawędzi = odstęp tekstu od lewej (symetrycznie) ---------- */
select:not([multiple]) { -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer;
--sel-pad: 12px; padding-left: var(--sel-pad); padding-right: calc(var(--sel-pad) * 2 + 10px);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-size: 10px 6px; background-position: right var(--sel-pad) center; }
select:not([multiple]):hover { background-image: url("data:image/svg+xml;utf8,"); }
.plan-form select:not([multiple]) { --sel-pad: 9px; }
.post-form select:not([multiple]) { --sel-pad: 10px; }
.group-pick select:not([multiple]) { --sel-pad: 8px; }
select option { background: var(--surface); color: var(--text); }
/* ---------- pola daty i godziny w całej aplikacji: biała ikona kalendarza / zegara i ciemne okienko wyboru ---------- */
input[type=date], input[type=time], input[type=datetime-local] { color-scheme: dark; }
input[type=date]::-webkit-calendar-picker-indicator, input[type=time]::-webkit-calendar-picker-indicator {
color: transparent; opacity: .85; cursor: pointer; width: 16px; height: 16px; background-repeat: no-repeat; background-position: center; background-size: 16px 16px; }
input[type=date]::-webkit-calendar-picker-indicator:hover, input[type=time]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
input[type=date]::-webkit-calendar-picker-indicator { background-image: url("data:image/svg+xml;utf8,"); }
input[type=time]::-webkit-calendar-picker-indicator { background-image: url("data:image/svg+xml;utf8,"); }
/* Użytkownicy: nazwa → e-mail → integracje; plan i subskrypcja w jednej linii */
.users-table .user-acc { display: table-cell; }
.users-table .user-acc a { color: var(--text); }
.users-table td .badge { font-weight: 400; } /* wiersze bez pogrubień */
.users-table td { font-size: 14px; font-weight: 400; } /* jedna czcionka w całym wierszu */
.users-table td .badge { font-size: 12px; }
.users-table .user-plan { display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; }
.users-table td:last-child { white-space: nowrap; }
/* klikalny wiersz tabeli (cały wiersz prowadzi do strony, nazwa jest też zwykłym linkiem – dla klawiatury) */
tr.row-link { cursor: pointer; }
tr.row-link:hover td { background: rgba(255, 255, 255, .025); }
.row-link-main { color: inherit; }
tr.row-link:hover .row-link-main { color: var(--ice); }
/* ---------- strona publiczna (poprawki Sebastiana) ---------- */
.pub-nav .logo { margin-right: 26px; } /* większa przerwa między logo a „Strona główna” */
/* nagłówki i cytat w jednej linii na komputerze (na telefonie zawijają się normalnie) */
@media (min-width: 900px) {
.one-line { white-space: nowrap; }
h1.one-line { font-size: clamp(30px, 3.6vw, 46px); }
.quote.one-line { max-width: none; font-size: clamp(18px, 2.15vw, 27px); }
}
/* korzyści: 4 kafle w rzędzie (8 = dwa pełne rzędy) */
.grid.c4-fixed { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .grid.c4-fixed { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grid.c4-fixed { grid-template-columns: minmax(0, 1fr); } }
/* opinie */
.testimonial { margin: 0; display: grid; gap: 14px; }
.testimonial blockquote { margin: 0; font-size: 15px; line-height: 1.6; color: #d5dcea; }
.testimonial figcaption { display: grid; gap: 2px; }
/* polecenia */
.referral-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 30px 32px;
border-color: rgba(255, 107, 44, .35); background: linear-gradient(135deg, rgba(255, 107, 44, .08), rgba(76, 194, 255, .05)); }
.referral-cta > div { flex: 1 1 420px; }
.referral-cta h2 { font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 8px; }
.referral-cta p { margin: 0; }
/* „Jak to działa”: co jest w planie – lista w dwóch kolumnach; segmenty „Dodatkowo” */
.how-plan .feat-list { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); column-gap: 32px; }
.card.extra h3 { margin: 0 0 6px; }
.card.extra .row { align-items: flex-start; gap: 10px; }
/* sklep: jedna karta konsultacji w jednej linii (długość, cena, zamów) + rozwijane tematy */
.consult-main { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.consult-title { flex: 1 1 240px; }
.consult-title p { margin: 4px 0 0; font-size: 13.5px; }
.consult-price { font-size: 28px; margin: 0; min-width: 96px; text-align: right; }
.consult-topics { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.consult-topics summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--muted); }
.consult-topics summary:hover { color: var(--text); }
.consult-topic-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 18px; margin: 12px 0; }
.consult-topic-list .check { font-weight: 400; color: var(--text); font-size: 14px; margin: 0; }
@media (max-width: 640px) { .consult-price { text-align: left; } }
/* sklep: szersza konsultacja, linia warsztatów, wyceny w jednym rzędzie, kursy „wkrótce” */
.consult-card { padding: 26px 28px; }
.consult-card .consult-title h3 { font-size: 20px; }
.shop-line { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
.shop-line h3 { margin: 0; flex: 1 1 260px; font-size: 17px; }
.shop-line input[type=text] { flex: 0 1 280px; width: auto; }
.shop-line .price { font-size: 24px; margin: 0; min-width: 96px; text-align: right; }
.shop-label { margin: 26px 0 12px; }
.shop-quotes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 8px; }
@media (max-width: 900px) { .shop-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .shop-quotes { grid-template-columns: minmax(0, 1fr); } }
.shop-quote { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; padding: 16px; }
.shop-quote h3 { margin: 0; font-size: 15px; }
.shop-quote .btn { align-self: flex-start; }
.shop-soon { margin-bottom: 26px; }
.soon-card { opacity: .5; filter: grayscale(1); pointer-events: none; user-select: none; }
.soon-card h3 { margin: 0; font-size: 16px; }
.consult-price-wrap { display: grid; justify-items: end; min-width: 120px; }
.consult-price-wrap small { font-size: 11.5px; text-align: right; }
@media (max-width: 640px) { .consult-price-wrap { justify-items: start; } .consult-price-wrap small { text-align: left; } }
/* konsultacja w pionie: opis → długość → cena → tematy → Zamów */
.consult-card { max-width: 720px; display: flex; flex-direction: column; gap: 16px; }
.consult-card .consult-main { flex-direction: column; align-items: flex-start; gap: 14px; }
.consult-card .consult-title { flex: none; }
.consult-card .consult-price-wrap { justify-items: start; }
.consult-card .consult-price-wrap small { text-align: left; }
.consult-card .consult-price { text-align: left; }
.consult-card .consult-topics { margin-top: 0; }
.consult-card .consult-topic-list { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.consult-order { align-self: flex-start; }
/* sklep: „Twoje zamówienia” zwijane (domyślnie zwinięte, stan zapamiętany) */
.shop-orders .card-head { margin-bottom: 14px; }
.collapsible.collapsed.shop-orders .card-head { margin-bottom: 0; }
.shop-orders h3 { display: flex; align-items: baseline; gap: 8px; }
.shop-orders-n { font: 500 13px var(--font); }
.shop-orders .todo-toggle svg { transform: rotate(180deg); }
.shop-orders.collapsed .todo-toggle svg { transform: none; }
/* konsultacja: bardziej „hookowa” karta, tematy w jednej kolumnie, szare puste checkboxy */
.consult-card { border-color: rgba(255, 107, 44, .35); background: linear-gradient(160deg, rgba(255, 107, 44, .09), rgba(76, 194, 255, .04) 55%, var(--surface));
box-shadow: 0 0 60px rgba(255, 107, 44, .08); padding: 30px 30px 28px; }
.consult-eyebrow { margin-bottom: 12px; display: inline-block; }
.consult-card .consult-title h3 { font-size: clamp(23px, 2.9vw, 31px); line-height: 1.25; margin: 0 0 8px; }
.consult-card .consult-title p { font-size: 16.5px; margin: 0; }
.consult-card .consult-topic-list { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.topic-check { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 400; font-size: 14px; color: var(--text); cursor: pointer; }
.topic-check input { -webkit-appearance: none; appearance: none; flex: none; width: 18px; height: 18px; margin: 0; border: 1.5px solid var(--faint);
border-radius: 5px; background: transparent; display: grid; place-items: center; cursor: pointer; transition: border-color .15s; }
.topic-check input::after { content: ""; width: 9px; height: 5px; border: solid var(--text); border-width: 0 0 1.6px 1.6px; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.topic-check input:checked { border-color: var(--muted); }
.topic-check input:checked::after { opacity: 1; }
.topic-check:hover input { border-color: var(--muted); }
.topic-check input:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
.consult-order { margin-top: 4px; }
.consult-topics-head { margin: 0; font: 600 14px var(--font); letter-spacing: 0; text-transform: none; color: var(--text); }
.topic-check, .topic-check span { color: var(--muted); font-weight: 400; } /* tematy konsultacji – stonowane, nie rzucają się w oczy */
.topic-check:hover span, .topic-check input:checked + span { color: var(--text); }
/* konsultacja: ciaśniej ułożone tematy, żeby cała karta mieściła się na ekranie */
.consult-card .consult-topic-list { gap: 3px; margin: 8px 0 10px; }
.topic-check { font-size: 13.5px; line-height: 1.35; padding: 2px 0; }
.topic-check input { width: 16px; height: 16px; }
.consult-card { gap: 12px; padding: 26px 28px 24px; }
.consult-card .consult-main { gap: 10px; }
/* konsultacja: mniejsze, węższe pole „Inny temat lub szczegóły” */
.consult-topics input[name="notes"] { max-width: 380px; padding: 7px 10px; font-size: 13px; }
/* konsultacja: cena po lewej, „Umów konsultację” po prawej, w jednej linii na dole karty */
.consult-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
border-top: 1px solid var(--line); padding-top: 14px; }
.consult-foot .consult-price-wrap { justify-items: start; min-width: 0; }
.consult-foot .consult-price { text-align: left; }
.consult-foot .consult-order { margin: 0; }
/* konsultacja: rabat przy dłuższym czasie */
.consult-price-row { display: flex; align-items: center; gap: 10px; }
.consult-save { font: 700 13px var(--font); color: var(--ice); background: rgba(76, 194, 255, .1); border: 1px solid rgba(76, 194, 255, .35);
border-radius: 999px; padding: 2px 9px; }
/* rabat jak indeks górny – tuż przy prawym górnym rogu ceny */
.consult-price-row { align-items: flex-start; gap: 3px; }
.consult-save { font-size: 11.5px; padding: 1px 7px; transform: translateY(-6px); }
/* konsultacja: linia nad wyborem czasu; czas bezpośrednio nad „Tematy do omówienia” (bez linii między nimi) */
.consult-sep { align-self: stretch; width: 100%; margin: 2px 0 0; border: 0; border-top: 1px solid var(--line); }
.consult-card .consult-topics { border-top: 0; padding-top: 0; }
/* konsultacja: równe odstępy (12 px) – nagłówek „Wybierz czas i temat” → czas → tematy */
.consult-card { gap: 12px; }
.consult-card .consult-main { gap: 12px; }
.consult-card .consult-topics-head { margin: 0; }
.consult-card .consult-topic-list { margin: 0; }
/* sklep: jeden kafelek „Wycena indywidualna” z usługami do zaznaczenia */
.quote-card { max-width: 720px; display: flex; flex-direction: column; gap: 12px; margin: 16px 0 0; }
.quote-head h3 { margin: 0 0 4px; font-size: 18px; }
.quote-head p { margin: 0; font-size: 13.5px; }
.quote-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 18px; }
@media (max-width: 560px) { .quote-options { grid-template-columns: minmax(0, 1fr); } }
.quote-notes { margin: 4px 0 0; } .quote-notes[hidden] { display: none; }
/* sklep: większe odstępy między konsultacją, wyceną indywidualną i „Wkrótce dostępne” */
.consult-card { margin-bottom: 0 !important; }
.quote-card { margin-top: 32px; }
.shop-soon { margin-top: 0; }
.quote-card + .shop-label, .consult-card + .shop-label { margin-top: 40px; }
.an-period-row { display: flex; justify-content: flex-end; margin: 0 0 12px; } /* Dzień / Tydzień / Miesiąc – po prawej, pod „Analiza” */
.page-head.an-head { margin-bottom: 12px; } /* Analityka: kafelek Analiza bliżej nagłówka */
/* sklep: konsultacja wyraźnie wyróżniona; wycena indywidualna jak kafelki kursów (zwykła karta, przycisk ice) */
.consult-card { border: 1.5px solid rgba(255, 107, 44, .6); box-shadow: 0 0 0 4px rgba(255, 107, 44, .06), 0 18px 60px rgba(255, 107, 44, .14); }
.quote-card .consult-foot { border-top: 1px solid var(--line-2); padding-top: 10px; }
/* kolejność: konsultacja → wkrótce dostępne → wycena indywidualna */
.consult-card + .shop-label { margin-top: 36px; }
.shop-soon { margin-bottom: 0; }
.shop-soon + .quote-card { margin-top: 32px; }
.shop-soon { max-width: 720px; } /* ta sama szerokość co konsultacja i wycena */
.consult-limit { max-width: 720px; margin: 8px 0 0; padding: 0 4px; font-size: 12px; color: var(--faint); text-align: right; }
.consult-limit + .shop-label { margin-top: 28px; }
@media (max-width: 560px) { .consult-limit { text-align: left; } }
.consult-limit { text-align: left; font-size: 11.5px; color: var(--faint); opacity: .7; } /* mniej widoczny dopisek, po lewej */
.consult-limit { margin-top: 12px; }
.consult-card .consult-limit { margin: -4px 0 0; padding: 0; max-width: none; text-align: left; } /* w kafelku, na dole po lewej */
/* stopka konsultacji: cena + dopisek po lewej, „Umów konsultację” po prawej, wyrównany do dołu */
.consult-foot-left { display: grid; gap: 2px; }
.consult-card .consult-foot { align-items: flex-end; }
.consult-card .consult-foot .consult-limit { margin: 0; }
/* sklep: opis pod „Wkrótce dostępne” */
.shop-label + .shop-soon-lead { margin: -6px 0 12px; max-width: 720px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.consult-card .consult-foot .consult-limit { margin-top: 6px; } /* trochę dalej od ceny */
.consult-card .consult-foot .consult-order { align-self: flex-end; top: -8px; } /* „Umów konsultację” na dole stopki, w marginesie karty */
/* „Umów konsultację”: metaliczny błysk przesuwający się po przycisku co kilka sekund */
.consult-order { position: relative; overflow: hidden; isolation: isolate; }
.consult-order::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 45%; z-index: 1; pointer-events: none;
background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, .08) 30%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, .08) 70%, transparent 100%);
transform: skewX(-18deg); animation: consult-shine 5.5s ease-in-out 1.2s infinite; }
@keyframes consult-shine { 0% { left: -60%; } 18% { left: 130%; } 100% { left: 130%; } }
.consult-order:hover::after { animation-duration: 2.2s; }
@media (prefers-reduced-motion: reduce) { .consult-order::after { animation: none; display: none; } }
.cm-myprofile { margin: 0 0 8px; text-align: right; font-size: 13px; }
.cm-myprofile a { color: var(--faint); }
.cm-myprofile a:hover { color: var(--text); }
/* Społeczność → Wiadomości: rozmowy + lista twórców jak „aktywni” na Messengerze */
.dm-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
@media (max-width: 860px) { .dm-layout { grid-template-columns: minmax(0, 1fr); } .dm-people { order: -1; } }
.dm-people { padding: 14px 10px; position: sticky; top: 80px; }
.dm-people-head { margin: 0 8px 8px; display: flex; gap: 6px; align-items: baseline; }
.dm-person { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; color: var(--text); }
.dm-person:hover { background: var(--surface-2); }
.dm-av { position: relative; flex: none; }
.dm-av.on::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%;
background: var(--st-good); border: 2px solid var(--surface); }
.dm-person-txt { display: grid; min-width: 0; }
.dm-person-txt strong { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-person-txt small { font-size: 12px; }
.dm-on { color: var(--st-good); }
.dm-people-empty { margin: 4px 8px; font-size: 13px; }
/* „Wkrótce dostępne”: wyszarzona tylko informacja, zapis na listę rezerwową aktywny */
.soon-card { opacity: 1; filter: none; pointer-events: auto; user-select: auto; display: flex; flex-direction: column; gap: 12px; }
.soon-card .soon-info { opacity: .5; filter: grayscale(1); }
.soon-cta { display: grid; gap: 8px; border-top: 1px solid var(--line-2); padding-top: 10px; }
.soon-cta small { font-size: 12px; line-height: 1.45; }
.soon-cta .btn { justify-self: start; }
.soon-done { font-size: 13px; color: var(--ice); font-weight: 600; }
/* sklep: odrobinę większa czcionka w „Wkrótce dostępne” i „Wycena indywidualna” */
.shop-label + .shop-soon-lead { font-size: 14px; }
.soon-card h3 { font-size: 17px; }
.soon-cta small { font-size: 13px; }
.soon-cta .btn { font-size: 13.5px; }
.quote-card .quote-head h3 { font-size: 16.5px; }
.quote-card .quote-head p { font-size: 13.5px; }
.quote-card .topic-check span { font-size: 14px; }
.quote-card .consult-foot .btn { font-size: 13.5px; }
/* kursy: przerywana linia na tej samej wysokości w obu kartach (opis rozciąga się, zapis zawsze na dole) */
.shop-soon { align-items: stretch; }
.soon-card .soon-info { flex: 1 1 auto; }
.soon-cta { margin-top: auto; }
/* sklep: jeszcze większa czcionka w „Wkrótce dostępne” i „Wycena indywidualna” */
.shop-label + .shop-soon-lead { font-size: 15px; }
.soon-card h3 { font-size: 18.5px; }
.soon-cta small { font-size: 14px; }
.soon-cta .btn { font-size: 14.5px; }
.quote-card .quote-head h3 { font-size: 18.5px; }
.quote-card .quote-head p { font-size: 14.5px; }
.quote-card .topic-check span { font-size: 15px; }
.quote-card .consult-foot .btn { font-size: 14.5px; }
/* sklep: białe tytuły w kursach i wycenie (wyszarzona zostaje tylko cena i plakietka kursów) */
.soon-card .soon-info { opacity: 1; filter: none; }
.soon-card .soon-info .badge { opacity: .5; filter: grayscale(1); }
.soon-card h3, .quote-card .quote-head h3 { color: #fff; }
.shop-label { color: var(--text); }
.soon-card h3, .quote-card .quote-head h3 { color: #c9d1de; } /* tytuły kursów i wyceny – odrobinę mniej jasne */
/* strona publiczna: dłuższe teksty w kaflach justowane (z dzieleniem wyrazów) */
.pub-main .card p, .pub-main details.faq p, .pub-main .card .muted { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
/* cennik: przełącznik miesięcznie / rocznie */
.billing-toggle { display: inline-flex; border: 1px solid var(--line-2); border-radius: 999px; overflow: hidden; margin: 0 0 22px; }
.billing-toggle label { margin: 0; cursor: pointer; }
.billing-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.billing-toggle span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; font: 600 14px var(--font); color: var(--muted); }
.billing-toggle input:checked + span { background: var(--surface-2); color: var(--text); }
.billing-toggle input:focus-visible + span { outline: 2px solid var(--ice); outline-offset: -2px; }
.billing-gift { font: 700 11px var(--font); color: var(--ice); background: rgba(76, 194, 255, .1); border: 1px solid rgba(76, 194, 255, .35); border-radius: 999px; padding: 2px 8px; }
.price-year-note { margin-top: -8px; font-size: 12.5px; }
/* cennik: przy rozliczeniu rocznym niebieski dymek z rabatem obok ceny */
.price-off { display: inline-block; margin-left: 10px; vertical-align: middle; padding: 4px 10px; border-radius: 999px; font: 600 13px/1.2 var(--font); letter-spacing: 0;
color: #04121c; background: linear-gradient(180deg, #c4ebff, #7cc8ff); box-shadow: 0 0 16px rgba(124, 200, 255, .45); position: relative; top: -6px; }
.price-off[hidden] { display: none; }
/* cennik: opis funkcji po najechaniu; funkcje spoza planu częściowo rozmyte zamiast przekreślenia */
.price-card .feat-list li { position: relative; cursor: default; outline: none; }
.price-card .feat-list li[data-tip]::after { content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 6px); width: min(280px, 80vw);
padding: 8px 11px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--line-2); box-shadow: var(--shadow); color: var(--text);
font-size: 12.5px; line-height: 1.45; text-decoration: none; filter: none; opacity: 0; visibility: hidden; transition: opacity .12s; pointer-events: none; z-index: 5; }
.price-card .feat-list li[data-tip]:hover::after, .price-card .feat-list li[data-tip]:focus-visible::after { opacity: 1; visibility: visible; }
.price-card .feat-list li.no { text-decoration: none; color: var(--muted); }
.price-card .feat-list li.no::before { content: "✓"; color: var(--faint); }
.price-card .feat-list li.no { filter: blur(1.6px); opacity: .55; transition: filter .15s, opacity .15s; }
.price-card .feat-list li.no:hover, .price-card .feat-list li.no:focus-visible { filter: none; opacity: .8; }
/* konsultacja: tematy z pytaniami rozwijanymi po zaznaczeniu; „Inne” z polem */
.topic-item { display: grid; gap: 4px; }
.topic-row { display: flex; align-items: center; gap: 8px; }
.topic-row .topic-check { flex: 1 1 auto; min-width: 0; }
.topic-q { margin: 0 0 4px 26px; padding: 0; list-style: none; display: grid; gap: 3px; }
.topic-q li { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.topic-q li::before { content: "– "; color: var(--faint); }
.consult-card input.topic-other { margin: 2px 0 4px 26px; max-width: 340px; padding: 6px 9px; font-size: 13px; }
.consult-base { color: var(--faint); font-size: 14px; margin-right: 6px; align-self: center; }
.consult-plan-disc { font-size: 12px; color: var(--ice); margin-top: 8px; }
/* cennik: funkcje spoza planu wykreślone (zamiast rozmycia) */
.price-card .feat-list li.no, .price-card .feat-list li.no:hover, .price-card .feat-list li.no:focus-visible {
filter: none; opacity: 1; color: var(--faint); text-decoration: line-through; }
.price-card .feat-list li.no::before { content: "—"; color: var(--faint); }
/* =====================================================================
Motyw „Orbit” (16.10.2026): czysto, ciemno, scenicznie – w duchu mugo.pl, font i kontenery jak w n8n.io.
Czerń, pionowa smuga lodowego światła z prawej (jak reflektor), gruby Inter w nagłówkach,
pełne przyciski w lodowym błękicie, ziarno. Pomarańcz zostaje jako akcent. Układ i odstępy bez zmian.
===================================================================== */
html { scrollbar-color: #2a303d transparent; }
::selection { background: rgba(76, 194, 255, .35); color: #fff; }
body { background: var(--bg); }
/* światła sceniczne: pionowa smuga tylko z prawej strony ekranu – lewa strona czarna (na stronie publicznej mocniejsza) */
body::before {
content: ""; position: fixed; inset: -10% -6%; z-index: -1; pointer-events: none;
background: linear-gradient(90deg,
transparent 72%, rgba(115, 198, 255, .1) 82%, rgba(135, 212, 255, .38) 92%, rgba(185, 238, 255, .46) 100%);
filter: blur(26px);
-webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .5) 55%, #000 100%);
mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .5) 55%, #000 100%);
opacity: .38;
}
body:has(.pub-nav)::before { opacity: .72; }
/* ziarno (jak druk / analogowa okładka) – nad wszystkim, nie łapie kliknięć */
body::after {
content: ""; position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; opacity: .07;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
mix-blend-mode: overlay;
}
/* typografia w duchu n8n.io: Outfit – cienkie nagłówki z ciasnym odstępem, spokojny tekst */
h1, h2 { font-weight: 400; letter-spacing: -.025em; }
h1 { line-height: 1.06; }
h3, legend, .card-head h3 { font-weight: 500; letter-spacing: -.01em; }
h4, th, .eyebrow, .nav-group, .cal-dow, .dash-label { font-weight: 500; }
.btn { font-weight: 500; letter-spacing: 0; }
a:hover { color: #9fe0ff; }
/* przyciski: pełny lodowy błękit z ciemnym tekstem, pomarańczowy akcent */
.btn { border-color: var(--line-2); background: rgba(255, 255, 255, .04); }
.btn:hover { border-color: rgba(76, 194, 255, .6); background: rgba(76, 194, 255, .07); }
.btn.primary { background: linear-gradient(180deg, #c4ebff, #96d8ff); color: #04121c; border-color: transparent;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 8px 26px rgba(124, 200, 255, .3); }
.btn.primary:hover { background: linear-gradient(180deg, #ddf4ff, #b0e3ff); color: #04121c; box-shadow: inset 0 1px 0 #fff, 0 0 34px rgba(124, 200, 255, .6); }
.btn.accent { background: var(--orange); border-color: transparent; color: #fff; box-shadow: 0 8px 30px rgba(255, 107, 44, .28); }
.btn.accent:hover { background: var(--orange-2); color: #fff; box-shadow: 0 0 40px rgba(255, 107, 44, .4); }
.btn.ghost { background: transparent; }
/* pola: ciemniejsze, błękitna poświata przy fokusie */
input[type=text], input[type=tel], input[type=search], input[type=email], input[type=password], input[type=number], input[type=date], input[type=time],
input[type=url], select, textarea { background: rgba(0, 0, 0, .45); border-color: var(--line-2); }
input:focus, select:focus, textarea:focus { border-color: rgba(76, 194, 255, .75); box-shadow: 0 0 0 3px rgba(124, 200, 255, .2); }
/* kontenery w duchu n8n.io: duże zaokrąglenie, cienka półprzezroczysta ramka, szkło z delikatnym gradientem po skosie */
.card { border-color: rgba(255, 255, 255, .1);
background: linear-gradient(155deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018) 45%, rgba(124, 200, 255, .035)), rgba(10, 12, 17, .8); }
.card.glow { border-color: transparent;
background: radial-gradient(560px 240px at 100% 0%, rgba(124, 200, 255, .1), transparent 70%) padding-box,
linear-gradient(rgba(13, 16, 22, .94), rgba(13, 16, 22, .94)) padding-box,
linear-gradient(140deg, rgba(170, 225, 255, .6), rgba(124, 200, 255, .2) 40%, rgba(255, 255, 255, .06) 70%) border-box;
box-shadow: 0 0 60px rgba(124, 200, 255, .12); }
.cookie.card { background: var(--surface); }
dialog { border-color: rgba(255, 255, 255, .09); background: var(--surface); }
dialog::backdrop { background: rgba(0, 0, 0, .72); backdrop-filter: blur(6px); }
.badge { background: rgba(255, 255, 255, .04); }
/* panel: pasek boczny jak czarne szkło, aktywna pozycja ze świecącym błękitnym paskiem */
.sidebar { background: rgba(3, 4, 6, .78); backdrop-filter: blur(22px); border-right-color: rgba(255, 255, 255, .06); }
.nav-link { position: relative; }
.nav-link:hover { background: rgba(255, 255, 255, .05); }
.nav-link.active { background: linear-gradient(90deg, rgba(124, 200, 255, .14), rgba(124, 200, 255, .02)); box-shadow: none; }
.nav-link.active::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 3px;
background: linear-gradient(180deg, #e6f6ff, #7cc8ff); box-shadow: 0 0 12px rgba(124, 200, 255, .8); }
.nav-link.active svg { color: #9fe0ff; opacity: 1; }
.sidebar .bottom { border-top-color: rgba(255, 255, 255, .06); }
/* nagłówek strony panelu i duże liczby (wskaźniki, ceny) */
.page-head h1 { font-size: clamp(24px, 2.8vw, 32px); }
.last-plan-title { font-weight: 400; letter-spacing: -.02em; }
.stat .value, .plan-stat .value, .an-total, .price { font-family: var(--display-x); font-weight: 400; letter-spacing: -.03em; }
.mat-score-txt strong { font-family: var(--display-x); letter-spacing: -.02em; }
.an-bar-track span { background: var(--grad); opacity: 1; }
.yc-line { stroke: var(--ice); filter: drop-shadow(0 0 6px rgba(76, 194, 255, .55)); }
.yc-area { stroke: none; pointer-events: none; }
.yc-dot { fill: var(--ice); stroke: var(--surface); }
.yc-tip { background: rgba(21, 25, 34, .92); backdrop-filter: blur(8px); }
.tabs a.on { border-image: linear-gradient(90deg, #e6f6ff, #7cc8ff) 1; }
.seg button.on, .lang-switch a.on { background: rgba(124, 200, 255, .18); color: #fff; }
/* kalendarz */
.cal-day { border-color: rgba(255, 255, 255, .06); background: rgba(13, 16, 22, .92); }
.cal-day.today { border-color: rgba(76, 194, 255, .75); box-shadow: 0 0 22px rgba(124, 200, 255, .18); }
.cal-post { background: rgba(0, 0, 0, .4); border-color: rgba(255, 255, 255, .08); }
/* czat: lodowy przycisk z poświatą */
.chat-fab { background: linear-gradient(180deg, #c4ebff, #96d8ff); color: #04121c; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 0 10px 34px rgba(124, 200, 255, .45); }
/* ---------- strona publiczna ---------- */
/* menu jak w n8n.io: pływający, zaokrąglony pasek z cienką ramką */
.pub-nav { background: transparent; border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 12px 16px 0; }
.pub-nav .container { position: relative; height: 60px; max-width: 1148px; padding: 0 12px 0 18px; }
/* tło paska na pseudo-elemencie – rozmycie na samym pasku zmieniałoby punkt odniesienia i krycie rozwijanego menu */
.pub-nav .container::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px;
background: rgba(8, 10, 15, .74); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
@media (max-width: 960px) {
.pub-nav .container { padding: 0 10px 0 14px; }
.pub-links { top: calc(100% + 8px); left: 0; right: 0; border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; background: #080a0f; } /* pełne tło – półprzezroczyste prześwitywało */
}
.pub-links a:hover { background: rgba(255, 255, 255, .06); }
/* aktywna zakładka: świecący „języczek” przy górnej krawędzi (jak w mugo.pl) */
@media (min-width: 961px) {
.pub-links a.active { position: relative; background: none; color: #fff; font-weight: 700; }
.pub-links a.active::before { content: ""; position: absolute; left: 4px; right: 4px; top: -12px; height: 6px; border-radius: 0 0 8px 8px;
background: #a6defd; box-shadow: 0 0 18px rgba(124, 200, 255, .9), 0 0 40px rgba(185, 238, 255, .35); }
}
@media (max-width: 960px) { .pub-links a.active { background: rgba(124, 200, 255, .14); } }
.hero::before {
background: radial-gradient(ellipse 16% 75% at 70% 30%, rgba(115, 198, 255, .15), transparent 72%),
radial-gradient(ellipse 7% 85% at 83% 38%, rgba(190, 240, 255, .1), transparent 72%);
filter: blur(8px); }
.hero h1 { color: #a3adbf; }
/* pierwsza sekcja zaczyna się pod pływającym menu (72 px = wysokość .pub-nav), żeby jej światło nie było ucięte na linii menu;
padding = 72 px menu + odstęp treści od menu */
.hero { margin-top: -72px; padding-top: 122px; }
@media (max-width: 860px) { .hero { padding-top: 100px; } }
/* „Twojej muzyki”: lodowy neon – od jasnego lodu do lodowego błękitu, na górze liter biały połysk, błękitna poświata;
width: fit-content – gradient na szerokość samego napisu, nie kolumny */
.hero h1 em { display: block; width: fit-content;
background: linear-gradient(180deg, rgba(240, 250, 255, .7) 6%, rgba(240, 250, 255, 0) 52%),
linear-gradient(100deg, #e2f5ff 0%, #a9e2ff 38%, #7fd2ff 68%, #4cc2ff 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
filter: drop-shadow(0 0 10px rgba(76, 194, 255, .4)) drop-shadow(0 0 2px rgba(150, 215, 255, .35));
padding: .06em 0 .2em; margin: -.06em 0 -.2em; } /* tło (gradient tekstu) obejmuje też ogonki j i y */
.hero .lead { color: #c7d0e0; }
/* „Zacznij teraz”: gradient od ognistego pomarańczu do złota, biały napis; mała poświata, po najechaniu duża korona; żółto-pomarańczowa krawędź, czerwono-pomarańczowa korona, która lekko „oddycha” */
.btn.fire { color: #fff; font-weight: 600; border: 1.5px solid transparent;
/* w stylu karty PRO w cenniku: ciemne wnętrze z pomarańczową łuną od góry, pomarańczowa ramka z gradientem, lekka poświata */
background-image: radial-gradient(130% 140% at 50% 0%, rgba(255, 107, 44, .38), rgba(255, 107, 44, .1) 55%, transparent 85%),
linear-gradient(rgba(13, 16, 22, .95), rgba(13, 16, 22, .95)),
linear-gradient(165deg, #ffc08f 0%, #ff6b2c 40%, rgba(255, 107, 44, .55) 75%, rgba(255, 107, 44, .3) 100%);
background-clip: padding-box, padding-box, border-box; background-origin: padding-box, padding-box, border-box;
box-shadow: 0 0 22px rgba(255, 107, 44, .18);
transition: box-shadow .35s ease, filter .35s ease; }
/* po najechaniu: jaśniejsza łuna i ramka, mocniejsza pomarańczowa poświata */
.btn.fire:hover { color: #fff; border-color: transparent;
background-image: radial-gradient(130% 140% at 50% 0%, rgba(255, 120, 55, .55), rgba(255, 107, 44, .16) 55%, transparent 85%),
linear-gradient(rgba(13, 16, 22, .95), rgba(13, 16, 22, .95)),
linear-gradient(165deg, #ffd6b3 0%, #ff7a3a 40%, rgba(255, 107, 44, .75) 75%, rgba(255, 107, 44, .45) 100%);
box-shadow: 0 0 26px rgba(255, 107, 44, .4), 0 0 60px rgba(255, 90, 20, .22); }
/* logo w hero bez ramki – unosi się w świetle */
.hero-art { border: 0; box-shadow: none;
background: radial-gradient(circle at 50% 50%, rgba(124, 200, 255, .26), rgba(90, 160, 220, .07) 42%, transparent 68%); }
.hero-art img { padding: 0; } /* logo trochę większe */
.eyebrow { color: #7fd6ff; }
.eyebrow::before { color: #fff; text-shadow: 0 0 10px rgba(76, 194, 255, .9); }
.section.alt { background: transparent; border-color: rgba(255, 255, 255, .05); }
.chip { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .1); }
.chip::before { color: #9fe0ff; }
.benefit .num { display: inline-block; font-family: var(--display-x); font-weight: 400; letter-spacing: -.03em; -webkit-text-stroke: 0; color: transparent;
background: var(--grad); -webkit-background-clip: text; background-clip: text; }
.step::before { background: rgba(0, 0, 0, .5); border-color: rgba(76, 194, 255, .65); }
.quote { font-weight: 400; letter-spacing: -.02em; }
.quote::before, .quote::after { color: var(--orange); }
/* cennik: PRO wyróżniony pomarańczowym gradientem – ramka, poświata od góry, plakietka */
.price-card.featured { border-color: transparent;
background: radial-gradient(120% 55% at 50% 0%, rgba(255, 107, 44, .26), rgba(255, 107, 44, .06) 55%, transparent 80%) padding-box,
linear-gradient(rgba(13, 16, 22, .95), rgba(13, 16, 22, .95)) padding-box,
linear-gradient(165deg, #ffc08f 0%, #ff6b2c 40%, rgba(255, 107, 44, .35) 75%, rgba(255, 107, 44, .15) 100%) border-box;
box-shadow: 0 0 70px rgba(255, 107, 44, .18), 0 0 24px rgba(255, 107, 44, .12); }
/* karta PRO: jedna pomarańczowa łuna przyklejona u góry z prawej */
.price-card.featured { position: relative; isolation: isolate; container-type: size; background:
radial-gradient(75% 55% at 100% 0%, rgba(255, 107, 44, .4), rgba(255, 107, 44, .1) 50%, transparent 80%) padding-box,
linear-gradient(rgba(13, 16, 22, .95), rgba(13, 16, 22, .95)) padding-box,
linear-gradient(165deg, #ffc08f 0%, #ff6b2c 40%, rgba(255, 107, 44, .35) 75%, rgba(255, 107, 44, .15) 100%) border-box; }
.price-card.featured .badge.ice { color: var(--orange-2); border-color: rgba(255, 107, 44, .45); background: rgba(255, 107, 44, .1); }
details.faq { border-color: rgba(255, 255, 255, .08); }
details.faq summary::after { color: #9fe0ff; }
.pub-footer { background: transparent; border-top-color: rgba(255, 255, 255, .06); }
.stepper span.on { border-color: rgba(76, 194, 255, .75); }
/* strona główna i Korzyści: pomarańczowe światło „za” kafelkiem płynie za kursorem – kafelek jak matowe szkło (.spot + app.js) */
.spot { position: relative; isolation: isolate; overflow: hidden; background: transparent; transition: border-color .3s, box-shadow .3s; }
.spot::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
background: linear-gradient(155deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018) 45%, rgba(124, 200, 255, .035)), rgba(10, 12, 17, .6);
-webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
.referral-cta.spot::after { background: linear-gradient(135deg, rgba(255, 107, 44, .08), rgba(76, 194, 255, .05)), rgba(13, 16, 22, .62); }
.spot::before { content: ""; position: absolute; left: 0; top: 0; z-index: -2; width: 300px; height: 300px; border-radius: 50%; pointer-events: none;
background: radial-gradient(circle, rgba(255, 155, 85, 1), rgba(255, 107, 44, .5) 42%, transparent 70%);
filter: blur(18px); opacity: 0;
transform: translate(calc(var(--mx, 0px) - 150px), calc(var(--my, 0px) - 150px));
transition: opacity .4s ease, transform .2s ease-out; }
@media (hover: hover) {
.spot:hover { border-color: rgba(255, 140, 80, .32); box-shadow: 0 0 40px rgba(255, 107, 44, .1); }
.spot:hover::before { opacity: 1; }
}
/* strona główna: co kilka sekund za pierwszą sekcją przelatuje lodowa kometa (canvas w .hero + app.js) – za treścią, nie łapie kliknięć */
.hero-comet { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
/* strona główna: lodowy dym leży na linii pod pierwszą sekcją (nad „Co zyskujesz”) i unosi się w górę – canvas w .hero (home.html + app.js),
za treścią, nie łapie kliknięć; niski pas, gęsty przy linii */
.smoke { position: absolute; left: 0; right: 0; bottom: 0; height: 340px; z-index: -1; pointer-events: none; overflow: hidden;
-webkit-mask-image: linear-gradient(to top, #000 28%, transparent); mask-image: linear-gradient(to top, #000 28%, transparent); }
.smoke canvas { display: block; width: 100%; height: 100%; /* na bokach słabszy, pełny na środku */
-webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, .55) 18%, #000 36%, #000 64%, rgba(0, 0, 0, .55) 82%, rgba(0, 0, 0, .15));
mask-image: linear-gradient(90deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, .55) 18%, #000 36%, #000 64%, rgba(0, 0, 0, .55) 82%, rgba(0, 0, 0, .15)); }
/* neonowa linia na środku linii pod pierwszą sekcją (jak w n8n.io) – rozbija równe odcięcie dymu; poświata w górę i w dół */
.hero + .section { position: relative; }
.hero + .section::before, .hero + .section::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); pointer-events: none; }
.hero + .section::before { top: -1px; width: min(940px, 84%); height: 1px;
background: linear-gradient(90deg, transparent, rgba(124, 200, 255, .6) 20%, #bfe8ff 38%, #fff 50%, #bfe8ff 62%, rgba(124, 200, 255, .6) 80%, transparent);
filter: drop-shadow(0 0 2px #bfe8ff) drop-shadow(0 0 8px rgba(124, 200, 255, .95)) drop-shadow(0 0 22px rgba(76, 194, 255, .6)); }
.hero + .section::after { top: -70px; width: min(1180px, 96%); height: 140px;
background: radial-gradient(50% 50% at 50% 50%, rgba(124, 200, 255, .22), rgba(124, 200, 255, .06) 45%, transparent 75%); }
/* strona główna: gasnące gwiazdki z lewej strony pierwszej sekcji (app.js) – kształt jak w logo, kolor komety/dymu, za treścią */
.hero-star { position: absolute; z-index: -1; pointer-events: none; display: block; opacity: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23b9e6ff' d='M12 2c.6 6 2.4 8.4 10 10-7.6 1.6-9.4 4-10 10-.6-6-2.4-8.4-10-10 7.6-1.6 9.4-4 10-10z'/%3E%3C/svg%3E") center / contain no-repeat;
filter: drop-shadow(0 0 5px rgba(110, 190, 255, .7)); }
/* strona główna: „Kontroluj wszystkie social media na jednej stronie” – rzędy kafelków z logo platform przesuwające się jak w n8n.io
(pochylone w perspektywie, wygaszone na brzegach; rzędy na zmianę w lewo i w prawo) */
.soc-sec { position: relative; padding-bottom: 40px; overflow: hidden; }
/* czarne rozmycie po bokach kafelków (na .soc-stage – pseudo-elementy sekcji zajmuje neonowa linia pod pierwszą sekcją);
z-index -2 = pod niebieską smugą światła (body::before, z-index -1), więc z prawej smuga zostaje na wierzchu */
.soc-stage::before, .soc-stage::after { content: ""; position: absolute; top: 0; bottom: 0; width: 26%; z-index: -2; pointer-events: none; filter: blur(24px); }
.soc-stage::before { left: -6%; background: linear-gradient(90deg, #020304 35%, transparent); }
.soc-stage::after { right: -6%; background: linear-gradient(270deg, #020304 35%, transparent); }
.soc-title { text-align: center; margin: 0 auto 44px; max-width: 900px; font-size: clamp(30px, 4.2vw, 50px); line-height: 1.06; }
.soc-title span { color: #a3adbf; }
/* kafelki: pojawiają się rozrzucone, po chwili zjeżdżają do środka, tam rozbłyska logo PLANY PROMO; pętla 9 s */
.soc-stage { position: relative; height: 340px; }
/* animacja startuje dopiero, gdy sekcja pierwszy raz pojawi się na ekranie (.go dodaje app.js) */
.soc-conv:not(.go) .soc-tile, .soc-conv:not(.go) .soc-logo, .soc-conv:not(.go) .soc-line, .soc-conv:not(.go) .soc-head { animation-play-state: paused; }
.soc-conv { position: absolute; inset: 0; }
.soc-tile { position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; display: grid; place-items: center; border-radius: 21px;
border: 1px solid rgba(255, 255, 255, .1); background: linear-gradient(155deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)), rgba(12, 14, 20, .92);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 10px 24px rgba(0, 0, 0, .35);
opacity: 0; animation: soc-gather 6s cubic-bezier(.55, 0, .3, 1) infinite; animation-delay: calc(var(--i) * .08s); }
.soc-tile svg { width: 38px; height: 38px; }
.soc-tiktok svg { filter: drop-shadow(-1.5px -1px 0 #25f4ee) drop-shadow(1.5px 1px 0 #fe2c55); }
/* rozrzucone pozycje startowe */
.soc-tile:nth-child(1) { --x: -440px; --y: -70px; } .soc-tile:nth-child(2) { --x: -250px; --y: 85px; }
.soc-tile:nth-child(3) { --x: -95px; --y: -105px; } .soc-tile:nth-child(4) { --x: 120px; --y: 95px; }
.soc-tile:nth-child(5) { --x: 275px; --y: -80px; } .soc-tile:nth-child(6) { --x: 445px; --y: 60px; }
/* pojawiają się, unoszą, biorą krótki rozbieg (szybko rosną i wracają), potem zjeżdżają do środka */
@keyframes soc-gather {
0% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.6); }
9% { opacity: 1; transform: translate(var(--x), var(--y)) scale(1); }
40% { opacity: 1; transform: translate(calc(var(--x) * 1.03), calc(var(--y) * 1.08)) scale(1); } /* lekkie unoszenie */
42.5% { opacity: 1; transform: translate(calc(var(--x) * 1.06), calc(var(--y) * 1.1)) scale(1.15); } /* krótki rozbieg: większe i lekko do tyłu */
45% { opacity: 1; transform: translate(calc(var(--x) * 1.03), calc(var(--y) * 1.06)) scale(.97); }
60% { opacity: 1; transform: translate(0, 0) scale(.45); }
64%, 100% { opacity: 0; transform: translate(0, 0) scale(.3); } }
.soc-logo { position: absolute; left: 50%; top: 50%; width: 340px; /* logo z obręczą */
height: auto; transform: translate(-50%, -50%) scale(.6); opacity: 0;
filter: drop-shadow(0 0 18px rgba(124, 200, 255, .55)) drop-shadow(0 0 40px rgba(76, 194, 255, .3));
animation: soc-logo 6s cubic-bezier(.2, .8, .2, 1) infinite; animation-delay: .4s; pointer-events: none; }
@keyframes soc-logo {
0%, 58% { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
66% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
72%, 90% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
98%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.95); } }
/* strzałki: rozwijają się od kafelków do środka, gdy kafelki stoją; zwijają się do środka tuż przed tym, jak kafelki zjeżdżają do logo */
.soc-arrows { position: absolute; left: 50%; top: 50%; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.soc-arrows-m { display: none; }
.soc-line, .soc-head { fill: none; stroke: rgba(255, 255, 255, .9); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
filter: drop-shadow(0 0 4px rgba(255, 255, 255, .55)); }
.soc-line { stroke-linecap: butt; stroke-dasharray: 1; /* płaski koniec – zaokrąglony dawał kropkę na początku i końcu */
stroke-dashoffset: 1; animation: soc-draw 6s ease-in-out infinite; animation-delay: calc(var(--i) * .08s); }
.soc-head { opacity: 0; animation: soc-head 6s ease-in-out infinite; animation-delay: calc(var(--i) * .08s); }
/* rozwija się od kafelka do środka, potem zwija się do środka, zanim ruszą kafelki (te ruszają od 42%) – dashoffset 1 → 0 → -1 */
/* opacity 0 przed i po – zaokrąglony koniec zerowej kreski zostawiał kropkę */
@keyframes soc-draw { 0%, 10.9% { stroke-dashoffset: 1; opacity: 0; } 11% { stroke-dashoffset: 1; opacity: 1; } 26%, 33% { stroke-dashoffset: 0; opacity: 1; } 40.9% { stroke-dashoffset: -1; opacity: 1; } 41%, 100% { stroke-dashoffset: -1; opacity: 0; } }
/* grot gaśnie razem ze zwijaniem, żeby na końcu nie zostawał sam jak kropka */
@keyframes soc-head { 0%, 24% { opacity: 0; } 27%, 34% { opacity: 1; } 39%, 100% { opacity: 0; } }
@media (max-width: 760px) {
.soc-stage { height: 300px; }
.soc-arrows-d { display: none; } .soc-arrows-m { display: block; }
.soc-tile { width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 15px; } .soc-tile svg { width: 26px; height: 26px; }
.soc-tile:nth-child(1) { --x: -130px; --y: -95px; } .soc-tile:nth-child(2) { --x: -40px; --y: 100px; }
.soc-tile:nth-child(3) { --x: -125px; --y: 35px; } .soc-tile:nth-child(4) { --x: 125px; --y: -45px; }
.soc-tile:nth-child(5) { --x: 45px; --y: -110px; } .soc-tile:nth-child(6) { --x: 130px; --y: 85px; }
.soc-logo { width: 230px; }
}
@media (prefers-reduced-motion: reduce) { .soc-tile, .soc-logo, .soc-line, .soc-head { animation: none; } .soc-line { stroke-dashoffset: 0; } .soc-head { opacity: 1; } .soc-tile { opacity: 1; transform: translate(var(--x), var(--y)); } }
/* koniec strony głównej i stopka w duchu n8n.io: wyśrodkowane hasło + przycisk nad lodową łuną, stopka jako zaokrąglona karta */
.end-cta { position: relative; text-align: center; padding: 150px 0 0; isolation: isolate; }
/* kosmiczne tło za hasłem: trzy warstwy gwiazd, najjaśniejsze lekko migoczą */
.end-stars, .end-stars::before, .end-stars::after { position: absolute; pointer-events: none; }
.end-stars { inset: -140px 0 -60px; z-index: -1;
background: radial-gradient(1.2px 1.2px at 45.4% 55.6%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 90.7% 46.8%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 50.8% 58.2%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 19.7% 51.1%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 62.5% 77.5%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 11.0% 31.5%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 10.7% 79.1%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 68.6% 6.9%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 96.3% 93.7%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 64.8% 60.9%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 17.1% 4.4%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 52.7% 8.6%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 20.3% 25.7%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 4.9% 46.6%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 44.3% 82.2%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 51.8% 63.2%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 50.0% 65.3%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 45.9% 29.1%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 97.8% 96.6%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 82.7% 69.5%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 32.3% 24.6%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 29.7% 9.6%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 75.6% 40.6%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 83.3% 39.3%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 94.0% 82.6%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 2.1% 22.7%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 89.4% 47.2%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 96.1% 40.4%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 9.0% 62.2%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 76.7% 28.4%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 10.4% 34.3%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 94.6% 74.3%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 13.3% 26.2%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 11.7% 8.6%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 78.5% 19.7%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 55.7% 45.1%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 20.3% 71.8%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 14.6% 63.5%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 13.2% 42.6%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 22.4% 28.4%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 95.2% 78.5%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 31.2% 86.2%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 22.2% 40.1%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 84.0% 63.3%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 11.6% 96.0%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 22.5% 27.3%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 76.2% 33.9%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 30.4% 9.9%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 10.7% 57.8%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 25.3% 59.5%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 37.7% 45.6%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 94.1% 48.5%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 57.2% 84.5%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 19.6% 17.5%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 89.2% 79.9%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 26.0% 20.8%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 73.0% 91.4%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 20.9% 92.3%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 86.7% 59.7%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 42.5% 12.8%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 5.7% 93.5%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 24.9% 69.2%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 26.7% 80.4%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 59.3% 30.6%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 18.8% 70.7%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 8.6% 24.5%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 55.7% 83.1%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 61.0% 29.3%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 90.1% 22.2%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 3.6% 28.3%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 44.8% 8.7%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 18.9% 37.7%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 56.9% 15.4%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 36.8% 86.7%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 96.1% 64.8%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 68.4% 57.9%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 15.5% 6.3%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 3.7% 88.6%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 69.3% 93.5%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 4.0% 62.8%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 48.3% 71.7%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 32.6% 96.9%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 9.2% 54.3%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 72.8% 87.6%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 72.8% 69.1%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 78.2% 89.0%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 35.8% 67.4%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 88.5% 84.9%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 42.0% 77.3%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 84.9% 56.8%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 62.0% 38.9%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 57.9% 60.2%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 9.7% 63.1%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 97.4% 85.7%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 71.9% 39.5%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 72.6% 57.6%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 44.3% 81.8%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 10.0% 73.5%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 4.9% 59.5%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 48.2% 24.6%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 69.0% 49.7%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 61.0% 89.5%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 26.6% 4.1%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 30.9% 66.7%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 21.4% 18.9%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 88.9% 65.0%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 44.4% 86.8%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 33.4% 65.6%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 21.1% 43.5%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 79.4% 88.9%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 86.5% 39.1%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 58.0% 32.7%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 15.1% 49.7%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 82.4% 82.8%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 70.3% 92.3%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 28.6% 18.9%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 45.3% 28.9%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 22.6% 41.9%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 62.1% 49.4%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 32.3% 81.9%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 96.3% 45.5%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 9.2% 6.0%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 85.8% 6.9%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 70.0% 56.6%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 31.7% 77.4%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 3.8% 15.8%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 45.7% 5.3%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 81.6% 25.3%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 15.5% 7.4%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 62.4% 45.0%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 62.5% 64.6%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 79.5% 93.1%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 67.7% 21.7%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 47.6% 19.8%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 3.0% 47.4%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 70.6% 19.8%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 28.1% 35.5%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 68.9% 51.9%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 61.0% 74.1%, rgba(255,255,255,0.7), transparent 70%), radial-gradient(1.2px 1.2px at 39.8% 77.4%, rgba(255,255,255,0.7), transparent 70%);
-webkit-mask-image: radial-gradient(80% 85% at 50% 50%, #000 45%, transparent 90%); mask-image: radial-gradient(80% 85% at 50% 50%, #000 45%, transparent 90%); }
.end-stars::before { content: ""; inset: 0; background: radial-gradient(2px 2px at 89.0% 11.2%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 91.5% 70.9%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 14.5% 45.6%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 62.1% 88.5%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 38.2% 56.5%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 86.4% 77.9%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 92.6% 46.6%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 64.5% 22.3%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 71.3% 79.9%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 63.6% 70.5%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 22.5% 87.6%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 96.1% 94.9%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 53.5% 77.3%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 32.8% 88.5%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 84.2% 35.8%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 9.9% 44.4%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 54.8% 75.2%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 48.8% 5.7%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 79.7% 9.0%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 78.8% 19.3%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 34.2% 77.1%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 15.5% 17.0%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 51.6% 71.0%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 82.6% 67.8%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 92.8% 49.3%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 93.1% 11.1%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 23.3% 52.5%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 29.9% 71.5%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 63.3% 52.1%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 83.0% 55.6%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 31.9% 38.8%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 83.1% 87.6%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 22.0% 83.0%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 95.0% 52.3%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 57.0% 21.9%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 53.4% 50.3%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 60.1% 5.6%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 95.1% 51.5%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 40.5% 78.3%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 56.0% 49.2%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 68.3% 9.2%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 53.7% 41.9%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 93.9% 89.8%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 27.8% 47.5%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 14.2% 43.8%, rgba(255,255,255,0.85), transparent 70%); }
.end-stars::after { content: ""; inset: 0; background: radial-gradient(3px 3px at 80.3% 87.7%, rgba(255,255,255,1), transparent 70%), radial-gradient(3px 3px at 47.7% 32.8%, rgba(255,255,255,1), transparent 70%), radial-gradient(3px 3px at 20.4% 61.1%, rgba(255,255,255,1), transparent 70%), radial-gradient(3px 3px at 90.8% 15.2%, rgba(255,255,255,1), transparent 70%), radial-gradient(3px 3px at 76.8% 5.1%, rgba(255,255,255,1), transparent 70%), radial-gradient(3px 3px at 20.6% 24.4%, rgba(255,255,255,1), transparent 70%), radial-gradient(3px 3px at 68.0% 33.3%, rgba(255,255,255,1), transparent 70%), radial-gradient(3px 3px at 36.1% 61.3%, rgba(255,255,255,1), transparent 70%), radial-gradient(3px 3px at 12.1% 71.7%, rgba(255,255,255,1), transparent 70%), radial-gradient(3px 3px at 13.8% 51.0%, rgba(255,255,255,1), transparent 70%), radial-gradient(3px 3px at 26.1% 21.6%, rgba(255,255,255,1), transparent 70%), radial-gradient(3px 3px at 52.9% 44.1%, rgba(255,255,255,1), transparent 70%), radial-gradient(3px 3px at 38.1% 41.9%, rgba(255,255,255,1), transparent 70%), radial-gradient(3px 3px at 52.8% 18.0%, rgba(255,255,255,1), transparent 70%), radial-gradient(3px 3px at 21.6% 62.3%, rgba(255,255,255,1), transparent 70%), radial-gradient(3px 3px at 63.3% 52.8%, rgba(255,255,255,1), transparent 70%);
filter: drop-shadow(0 0 4px rgba(190, 230, 255, 1)); animation: end-twinkle 3.6s ease-in-out infinite alternate; }
@keyframes end-twinkle { from { opacity: .35; } to { opacity: 1; } }
/* „Zobacz cennik” jak słońce ze zdjęć: biała tarcza z żółto-pomarańczowym brzegiem, wokół migoczące języki ognia (korona)
i jeden łuk protuberancji; języki rozłożone po obwodzie przycisku (home.html), każdy pulsuje w innym rytmie */
.sun-cta { position: relative; display: inline-flex; isolation: isolate; }
.sun-cta .btn.accent { color: #000; font-weight: 600; border: 0;
background: radial-gradient(130% 190% at 50% 50%, #fff 0%, #fffbea 45%, #ffe39a 72%, #ffb347 88%, #ff8a2a 100%);
box-shadow: 0 0 4px #fff7d6, 0 0 14px rgba(255, 200, 90, .95), 0 0 30px rgba(255, 130, 30, .75), 0 0 60px rgba(230, 70, 10, .45), 0 0 110px rgba(170, 40, 0, .3); }
.sun-cta .btn.accent:hover { color: #000; filter: brightness(1.06); }
.sun-flare { position: absolute; width: var(--w); height: var(--h); margin: calc(var(--h) * -1) 0 0 calc(var(--w) / -2); z-index: -1; pointer-events: none;
transform-origin: 50% 100%; transform: rotate(calc(var(--a) + 90deg));
background: radial-gradient(50% 70% at 50% 100%, rgba(255, 220, 130, .9), rgba(255, 130, 35, .65) 38%, rgba(210, 55, 10, .3) 68%, transparent 100%);
border-radius: 50% 50% 45% 45% / 80% 80% 20% 20%; filter: blur(4px); opacity: .8;
animation: sun-flick var(--t) ease-in-out infinite alternate; animation-delay: calc(var(--d) * -1); }
/* miękka, ciągła korona pod językami */
.sun-cta::before { content: ""; position: absolute; inset: -10px -12px; z-index: -2; border-radius: 999px; pointer-events: none;
background: radial-gradient(closest-side, rgba(255, 170, 60, .55), rgba(230, 80, 15, .3) 70%, transparent 100%); filter: blur(8px); }
@keyframes sun-flick {
0% { transform: rotate(calc(var(--a) + 90deg)) scaleY(.55) scaleX(.85); opacity: .5; }
45% { transform: rotate(calc(var(--a) + 97deg)) scaleY(1.15) scaleX(1.05); opacity: .9; }
100% { transform: rotate(calc(var(--a) + 83deg)) scaleY(.8) scaleX(.95); opacity: .65; } }
/* łuk protuberancji z lewej u góry, jak na drugim zdjęciu */
.sun-prom { position: absolute; left: -6px; top: -26px; width: 46px; height: 34px; z-index: -1; pointer-events: none; border-radius: 50% 50% 0 0;
border: 3px solid rgba(230, 80, 20, .75); border-bottom: 0; filter: blur(1.5px) drop-shadow(0 0 6px rgba(255, 110, 30, .8)); transform: rotate(-24deg);
animation: sun-prom 5s ease-in-out infinite alternate; }
@keyframes sun-prom { from { opacity: .45; transform: rotate(-24deg) scale(.92); } to { opacity: .9; transform: rotate(-20deg) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .end-stars::after, .sun-flare, .sun-prom { animation: none; } }
.end-cta h2 { font-size: clamp(30px, 4.4vw, 54px); line-height: 1.08; max-width: 900px; margin: 0 auto 64px; }
.pub-footer { position: relative; margin-top: 0; padding: 110px 0 40px; border-top: 0; background: transparent; }
/* łuna: pozioma lodowa poświata z ciepłym pomarańczowym środkiem i drobnymi gwiazdkami; pod niebieską smugą z prawej (z-index -2) */
.pub-footer::before { content: ""; position: absolute; left: 0; right: 0; top: -300px; bottom: 0; z-index: -2; pointer-events: none;
/* środek łuny na wysokości górnej krawędzi karty (300 px + padding stopki 110 px = 410 px); dół wygaszony maską, żeby nic się nie ucinało */
-webkit-mask-image: linear-gradient(180deg, #000 520px, transparent calc(100% - 20px)); mask-image: linear-gradient(180deg, #000 520px, transparent calc(100% - 20px));
background:
radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, .7), transparent 60%), radial-gradient(1px 1px at 27% 26%, rgba(255, 255, 255, .5), transparent 60%),
radial-gradient(1.5px 1.5px at 38% 14%, rgba(255, 255, 255, .6), transparent 60%), radial-gradient(1px 1px at 52% 22%, rgba(255, 255, 255, .5), transparent 60%),
radial-gradient(1px 1px at 63% 16%, rgba(255, 255, 255, .7), transparent 60%), radial-gradient(1.5px 1.5px at 74% 27%, rgba(255, 255, 255, .5), transparent 60%),
radial-gradient(1px 1px at 86% 20%, rgba(255, 255, 255, .6), transparent 60%), radial-gradient(1px 1px at 94% 25%, rgba(255, 255, 255, .4), transparent 60%),
radial-gradient(42% 70px at 50% 410px, rgba(255, 150, 80, .3), transparent 75%),
radial-gradient(75% 110px at 50% 410px, rgba(124, 210, 255, .55), rgba(40, 140, 240, .2) 50%, transparent 80%),
radial-gradient(100% 260px at 50% 430px, rgba(31, 120, 220, .22), transparent 75%); }
.pub-footer .container { max-width: 1240px; }
.foot-card { border: 1px solid rgba(255, 255, 255, .1); border-radius: 28px; padding: 40px 40px 28px;
background: linear-gradient(180deg, rgba(18, 34, 52, .78), rgba(8, 10, 15, .94) 70%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.foot-top { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 28px; }
.foot-brand img { height: 32px; width: auto; margin-bottom: 14px; }
.foot-brand p { color: var(--muted); font-size: 14px; max-width: 340px; margin: 0 0 18px; }
.foot-social { display: flex; gap: 14px; }
.foot-social a { color: #d5dcea; display: inline-flex; transition: color .2s, transform .2s; }
.foot-social a:hover { color: #9fe0ff; transform: translateY(-2px); }
.foot-social svg { width: 20px; height: 20px; }
.foot-top ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; align-content: start; }
.pub-footer a { color: #d5dcea; }
.pub-footer a:hover { color: #fff; }
.foot-bottom { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-top: 36px; padding-top: 22px;
border-top: 1px solid rgba(255, 255, 255, .1); font-size: 14px; color: var(--muted); }
.foot-bottom i { font-style: normal; margin: 0 8px; opacity: .5; }
.foot-powered { font-size: 11.5px; letter-spacing: .22em; color: #8f9ab0; align-self: center; }
@media (max-width: 860px) {
.foot-top { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; }
.foot-card { padding: 28px 22px 22px; border-radius: 22px; } .end-cta { padding-top: 90px; }
}
/* przyciski w pierwszej sekcji: bardziej kwadratowe, z zaokrąglonymi rogami, cieńsza czcionka */
.hero .btn { border-radius: 14px; font-weight: 400; }
.hero .btn.lg { padding-left: 20px; padding-right: 20px; } /* węższe niż zwykłe duże przyciski (26 px) */
/* „Co zyskujesz”: duże karty w stylu n8n.io nachodzące na siebie przy przewijaniu – tekst z lewej, świecąca kula z ikoną z prawej,
łuna u góry karty (ogień / lód / oba); przykryte lekko maleją i ciemnieją (app.js) */
.gain-stack { display: grid; margin-top: 10px; }
/* miejsce składania kart (--stick);
nagłówek sekcji jest pierwszą kartą stosu (.gain-intro) */
.gain-sec { --stick: 110px; } /* karty składają się u góry, pod menu */
/* karta startowa („Co daje Ci”) i końcowa („Setki tysięcy zasięgów”): układ jak pozostałe, nagłówek h2 z lewej, z prawej kula z „1” / rosnący licznik */
.gain-card.gain-intro { min-height: min(400px, 60vh); } /* ta sama wysokość co pozostałe – stos odkleja się równo */
/* tytuły kart startowej i końcowej takie same jak pozostałych kart */
.gain-intro h2 { margin: 0; font-size: clamp(26px, 3.1vw, 42px); font-weight: 400; letter-spacing: -.03em; line-height: 1.05; }
@media (min-width: 861px) { .gain-intro h2 { white-space: nowrap; } }
.gain-intro h2.two-lines { white-space: normal; max-width: 12ch; } /* „Kilkadziesiąt razy / większe szanse” – celowo na dwie linie */
.gain-intro .eyebrow { margin-bottom: 14px; }
.gain-intro .gain-copy p { margin: 18px 0 0; }
.gain-orb-num { font-family: var(--display-x); font-size: 64px; font-weight: 300; line-height: 1; color: transparent;
background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03) 60%), #12151d; }
.gain-orb-num::after { content: "1"; position: absolute; inset: 0; display: grid; place-items: center; color: transparent;
background: var(--grad); -webkit-background-clip: text; background-clip: text; }
.gain-cap { position: absolute; top: calc(50% + 74px); left: 0; right: 0; text-align: center; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #9fb0c6; }
.gain-count { position: relative; font-family: var(--display-x); font-size: clamp(44px, 5.4vw, 72px); font-weight: 300; letter-spacing: -.03em; line-height: 1;
font-variant-numeric: tabular-nums; color: transparent; background: linear-gradient(100deg, #ffd6b3, #ff8a3d 55%, #ff5a1e); -webkit-background-clip: text; background-clip: text;
filter: drop-shadow(0 0 18px rgba(255, 107, 44, .35)); }
.gain-count + .gain-cap { top: calc(50% + 48px); }
.gain-card { position: sticky; top: calc(var(--stick) + var(--i) * 16px); min-height: min(400px, 60vh); margin-bottom: 4vh; /* mały odstęp – następna karta zaczyna nachodzić wcześniej */ display: grid; grid-template-columns: 1.1fr .9fr;
align-items: center; gap: 32px; padding: clamp(24px, 4vw, 52px); border-radius: 24px; border: 1px solid rgba(255, 255, 255, .1); overflow: hidden;
/* szkło: prawie czarne, półprzezroczyste, z rozmyciem tego, co pod spodem (także kart przykrytych) */
background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .01) 40%), rgba(4, 5, 8, .55);
-webkit-backdrop-filter: blur(26px) saturate(140%); backdrop-filter: blur(26px) saturate(140%);
border-color: rgba(255, 255, 255, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 -20px 50px rgba(0, 0, 0, .5);
transform-origin: 50% 0; will-change: transform; isolation: isolate; }
.gain-card:last-child { margin-bottom: 0; }
.gain-card::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background-image: radial-gradient(1px 1px at 72% 12%, rgba(255, 255, 255, .7), transparent 60%), radial-gradient(1px 1px at 84% 24%, rgba(255, 255, 255, .5), transparent 60%),
radial-gradient(1.5px 1.5px at 92% 8%, rgba(255, 255, 255, .6), transparent 60%), radial-gradient(1px 1px at 60% 6%, rgba(255, 255, 255, .5), transparent 60%),
var(--glow); }
.gain-card.tone-fire { --glow: radial-gradient(70% 70% at 30% 0%, rgba(214, 70, 30, .42), rgba(150, 40, 20, .12) 45%, transparent 75%),
radial-gradient(45% 55% at 62% 0%, rgba(255, 130, 50, .26), transparent 70%); }
.gain-card.tone-ice { --glow: radial-gradient(70% 70% at 30% 0%, rgba(40, 120, 220, .4), rgba(20, 70, 150, .12) 45%, transparent 75%),
radial-gradient(45% 55% at 62% 0%, rgba(124, 210, 255, .22), transparent 70%); }
.gain-card.tone-mix { --glow: radial-gradient(60% 70% at 22% 0%, rgba(214, 70, 30, .45), transparent 70%),
radial-gradient(60% 70% at 70% 0%, rgba(40, 140, 230, .42), transparent 70%); }
/* tytuły kart w jednej linii na komputerze (mogą wejść nad kolumnę z kulą) */
@media (min-width: 861px) { .gain-copy h3 { white-space: nowrap; } .gain-copy { position: relative; z-index: 1; } }
.gain-copy h3 { font-size: clamp(26px, 3.1vw, 42px); font-weight: 400; letter-spacing: -.03em; line-height: 1.05; margin: 0 0 16px; }
.gain-copy p { color: #c3cad8; font-size: clamp(15px, 1.3vw, 17px); max-width: 520px; margin: 0 0 22px; text-align: left; }
.gain-copy ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 520px; }
.gain-copy li { position: relative; padding-left: 30px; color: #c3cad8; font-size: 15.5px; }
.gain-copy li::before { content: "✦"; position: absolute; left: 0; top: 0; color: var(--orange-2); }
.gain-card.tone-ice .gain-copy li::before { color: #9fe0ff; }
.gain-copy li strong { color: #fff; font-weight: 500; }
.gain-art { position: relative; display: grid; place-items: center; height: 100%; min-height: 220px; }
/* świecąca kula z ikoną w pierścieniach (jak błyskawica w n8n.io) */
.gain-art::before, .gain-art::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .06); }
.gain-art::before { width: 240px; height: 240px; } .gain-art::after { width: 176px; height: 176px; border-color: rgba(255, 255, 255, .09); }
.gain-orb { position: relative; width: 108px; height: 108px; border-radius: 50%; display: grid; place-items: center; color: #fff;
background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03) 60%), #12151d;
box-shadow: 0 0 0 10px rgba(255, 255, 255, .03), 0 0 0 3px rgba(124, 200, 255, .55), 0 0 40px rgba(124, 200, 255, .35), inset 0 0 22px rgba(124, 200, 255, .15); }
.gain-card.tone-fire .gain-orb { box-shadow: 0 0 0 10px rgba(255, 255, 255, .03), 0 0 0 3px rgba(255, 130, 60, .6), 0 0 40px rgba(255, 107, 44, .35), inset 0 0 22px rgba(255, 107, 44, .15); }
.gain-orb svg { width: 38px; height: 38px; opacity: .9; }
@media (max-width: 860px) {
.gain-sec { --stick: 84px; } .gain-card.gain-intro { min-height: 0; } .gain-cap { top: calc(50% + 54px); } .gain-count + .gain-cap { top: calc(50% + 34px); }
.gain-card { grid-template-columns: 1fr; gap: 10px; top: calc(var(--stick) + var(--i) * 12px); min-height: 0; margin-bottom: 4vh; border-radius: 22px; }
.gain-art { min-height: 170px; order: -1; } .gain-art::before { width: 190px; height: 190px; } .gain-art::after { width: 140px; height: 140px; }
.gain-orb { width: 92px; height: 92px; } .gain-orb svg { width: 34px; height: 34px; }
}
/* „Jak to działa” w duchu n8n.io: duży kontener z ognistą łuną i gwiazdkami, w środku ciemny panel z przesuwającymi się krokami */
.how-box { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; overflow: hidden; isolation: isolate;
padding: clamp(28px, 5vw, 72px); border-radius: 28px; border: 1px solid rgba(255, 255, 255, .1); background: #0a0c12; }
.how-box::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: radial-gradient(1px 1px at 46% 12%, rgba(255, 255, 255, .8), transparent 60%), radial-gradient(1.5px 1.5px at 62% 8%, rgba(255, 255, 255, .7), transparent 60%),
radial-gradient(1px 1px at 74% 20%, rgba(255, 255, 255, .6), transparent 60%), radial-gradient(1px 1px at 88% 10%, rgba(255, 255, 255, .7), transparent 60%),
radial-gradient(1px 1px at 93% 32%, rgba(255, 255, 255, .5), transparent 60%), radial-gradient(1px 1px at 35% 22%, rgba(255, 255, 255, .5), transparent 60%),
radial-gradient(55% 90% at 18% 55%, rgba(200, 45, 25, .55), transparent 70%), radial-gradient(45% 60% at 58% 18%, rgba(255, 120, 40, .45), transparent 70%),
radial-gradient(40% 50% at 60% 92%, rgba(255, 110, 40, .22), transparent 70%); }
.how-copy h2 { font-size: clamp(28px, 3.4vw, 46px); font-weight: 400; letter-spacing: -.03em; line-height: 1.08; margin: 0 0 18px; }
.how-lead { color: #d3d8e2; margin: 0 0 22px; }
.how-list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 6px; }
.how-list button { display: flex; gap: 14px; align-items: baseline; width: 100%; text-align: left; background: none; border: 0; padding: 8px 0; cursor: pointer;
color: rgba(255, 255, 255, .6); font: 400 16px/1.4 var(--font); transition: color .25s; }
.how-list button span { font-family: var(--display-x); color: #ffb27a; font-size: 13px; letter-spacing: .08em; }
.how-list button:hover, .how-list button.on { color: #fff; }
.how-list button.on span { color: #ff8a3d; }
.how-more { color: #ffd2b0; } .how-more:hover { color: #fff; }
/* panel kroków jak okno aplikacji */
.how-panel { position: relative; border-radius: 22px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .12);
background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015)), rgba(10, 12, 18, .82);
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 30px 70px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .08); }
.how-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.how-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.how-bar i:first-child { background: #ff6b4a; } .how-bar i:nth-child(2) { background: #ffbf3a; } .how-bar i:nth-child(3) { background: #39d07c; }
.how-bar span { margin-left: auto; font-size: 11px; letter-spacing: .18em; color: #8f9ab0; }
.how-progress { height: 2px; background: rgba(255, 255, 255, .06); }
.how-progress b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffb27a, #ff6b2c); box-shadow: 0 0 10px rgba(255, 107, 44, .7); }
.how-progress b.run { width: 100%; transition: width var(--how-ms, 3800ms) linear; }
.how-view { overflow: hidden; }
.how-track { display: flex; transition: transform .7s cubic-bezier(.65, 0, .25, 1); }
.how-slide { flex: 0 0 100%; display: grid; grid-template-rows: auto 1fr; gap: 22px; padding: clamp(22px, 3vw, 34px); min-height: 360px; }
.how-num { display: inline-block; font-family: var(--display-x); font-size: 13px; letter-spacing: .14em; padding: 4px 10px; border-radius: 999px; margin-bottom: 12px;
color: #ffb27a; border: 1px solid rgba(255, 140, 70, .4); background: rgba(255, 107, 44, .1); }
.how-slide h3 { font-size: clamp(20px, 2vw, 25px); font-weight: 500; margin: 0 0 8px; }
.how-slide p { color: #b9c1cf; margin: 0; font-size: 15px; }
/* mini-grafiki kroków */
.how-mock { display: grid; gap: 10px; align-content: start; padding: 16px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .08);
background: radial-gradient(80% 120% at 100% 0%, rgba(255, 107, 44, .12), transparent 60%), rgba(255, 255, 255, .02); }
.hm-field { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 10px; font-size: 13px;
background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .08); }
.hm-field span { color: #8f9ab0; } .hm-field b { font-weight: 500; }
.hm-drop { padding: 12px; border-radius: 10px; border: 1px dashed rgba(255, 178, 122, .45); color: #ffd2b0; font-size: 13px; text-align: center; }
.hm-drop small { display: block; color: #8f9ab0; font-size: 11.5px; margin-top: 2px; }
.hm-check { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; color: #b9c1cf;
background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .08); }
.hm-check i { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-style: normal; font-size: 12px; border: 1px solid rgba(255, 255, 255, .2); }
.hm-check.on { color: #fff; } .hm-check.on i { background: rgba(74, 222, 155, .15); border-color: rgba(74, 222, 155, .5); color: #4ade9b; }
.hm-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.hm-cal span { aspect-ratio: 1.3; border-radius: 7px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); }
.hm-cal span.p { background: linear-gradient(160deg, rgba(124, 200, 255, .35), rgba(124, 200, 255, .1)); border-color: rgba(124, 200, 255, .4); }
.hm-cal span.r { background: linear-gradient(160deg, rgba(255, 140, 70, .55), rgba(255, 107, 44, .2)); border-color: rgba(255, 140, 70, .6); box-shadow: 0 0 14px rgba(255, 107, 44, .4); }
.how-dots { display: flex; gap: 8px; justify-content: center; padding: 0 0 16px; }
.how-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .2); transition: background .3s, width .3s; }
.how-dots i.on { width: 22px; border-radius: 4px; background: #ff8a3d; }
@media (max-width: 860px) { .how-box { grid-template-columns: 1fr; } .how-slide { min-height: 0; } }
/* „Więcej niż kalendarz” (Jak to działa): siatka kafli w stylu make.com – u góry mini-grafika jak z panelu, na dole tytuł i opis */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.bento-tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 370px; overflow: hidden; border-radius: 24px;
border: 1px solid rgba(255, 255, 255, .1); padding: 26px; isolation: isolate;
background: radial-gradient(90% 70% at 70% 15%, var(--bt-glow, rgba(76, 194, 255, .2)), transparent 70%), linear-gradient(160deg, #141823, #0a0c12); }
.bento-tile.wide { grid-column: span 2; }
.bento-tile { will-change: transform; transition: transform .15s linear; } /* skala przy przewijaniu – app.js */
.bento-tile:nth-child(3n+2) { --bt-glow: rgba(255, 107, 44, .22); }
.bento-tile:nth-child(3n) { --bt-glow: rgba(124, 200, 255, .16); }
.bento-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.4px) 0 0 / 18px 18px;
-webkit-mask-image: linear-gradient(180deg, #000, transparent 60%); mask-image: linear-gradient(180deg, #000, transparent 60%); }
.bento-art { position: absolute; inset: 0 0 170px; display: grid; place-items: center; } /* grafika nad tekstem, bez nachodzenia */
.bento-tile.wide .bento-art { inset: 0 0 130px; }
.bento-copy { position: relative; }
.bento-copy h3 { font-size: 22px; font-weight: 500; margin: 0 0 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bento-copy h3 .badge { font-size: 11px; }
.bento-copy p { margin: 0; color: #b9c1cf; font-size: 14.5px; text-align: left; }
/* elementy mini-grafik */
.ba-card { border-radius: 14px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(16, 19, 27, .92); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); padding: 14px 16px; }
.ba-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; }
.ba-k { color: #8f9ab0; font-size: 12px; } .ba-up { color: #4ade9b; font-weight: 600; font-size: 12px; }
.ba-chart { width: min(320px, 70%); transform: rotate(-2deg); margin-top: 20px; }
.ba-v { font-family: var(--display-x); font-size: 26px; margin: 4px 0 10px; }
.ba-bars { display: flex; align-items: flex-end; gap: 6px; height: 54px; }
.ba-bars i { flex: 1; border-radius: 4px 4px 1px 1px; background: linear-gradient(180deg, #9fdcff, #2b7fd6); opacity: .9; }
.ba-pill { position: absolute; padding: 7px 13px; border-radius: 999px; font-size: 12.5px; color: #fff; white-space: nowrap;
background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ba-float1 { right: 8%; top: 12%; } .ba-float2 { left: 8%; bottom: 6%; }
.wide .ba-float1 { right: 6%; top: 14%; }
.art-analytics .ba-float1 { top: auto; bottom: 4%; right: 8%; }
.ba-orb { width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center;
background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .2), rgba(255, 255, 255, .04) 65%), #1a1f2b; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 14px 34px rgba(0, 0, 0, .45), 0 0 40px var(--bt-glow); }
.ba-orb svg { width: 34px; height: 34px; }
.ba-tiktok svg { filter: drop-shadow(-1.5px -1px 0 #25f4ee) drop-shadow(1.5px 1px 0 #fe2c55); }
.ba-seg { position: absolute; bottom: 4%; display: flex; gap: 4px; align-items: center; padding: 4px; border-radius: 999px; font-size: 12px; color: #8f9ab0;
background: rgba(16, 19, 27, .9); border: 1px solid rgba(255, 255, 255, .12); }
.ba-seg span { padding: 4px 10px; border-radius: 999px; color: #c9d1de; } .ba-seg span.on { background: #ff8a3d; color: #1c0a03; font-weight: 600; } .ba-seg { padding-right: 12px; }
.ba-doc { width: min(240px, 78%); display: grid; gap: 8px; transform: rotate(2deg); }
.ba-doc.ba-wide { width: min(380px, 80%); transform: rotate(-1.5deg); }
.ba-doc i { display: block; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .12); } .ba-doc i.s { width: 60%; }
.ba-doc b { font-size: 12.5px; font-weight: 600; }
.ba-spot { width: 16px; height: 16px; border-radius: 50%; background: #1ed760; margin-right: auto; } .ba-doc .ba-row b { margin-right: auto; }
.ba-ok { justify-self: start; margin-top: 4px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; color: #4ade9b; background: rgba(74, 222, 155, .1); border: 1px solid rgba(74, 222, 155, .35); }
.ba-btn { position: absolute; right: 9%; bottom: 12%; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; /* „✓ Wysłano” – jak „✓ gotowe” w kaflu Pitch */
color: #4ade9b; background: rgba(74, 222, 155, .1); border: 1px solid rgba(74, 222, 155, .35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ba-ring { position: relative; width: 96px; height: 96px; display: grid; place-items: center; margin-bottom: 34px; }
.ba-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); } .ba-ring circle { fill: none; stroke-width: 2.6; }
.ba-ring .t { stroke: rgba(255, 255, 255, .1); } .ba-ring .v { stroke: #4ade9b; stroke-linecap: round; }
.ba-ring b { font-family: var(--display-x); font-size: 22px; font-weight: 400; }
.ba-list { position: absolute; bottom: 2%; display: flex; gap: 12px; font-size: 12px; color: #c9d1de; }
.ba-list span { display: flex; align-items: center; gap: 6px; } .ba-list i { width: 7px; height: 7px; border-radius: 50%; } .ba-list .g { background: #4ade9b; } .ba-list .o { background: #ffb347; }
@media (max-width: 980px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .bento { grid-template-columns: 1fr; } .bento-tile.wide { grid-column: auto; } }
/* animacja „losowania” hasła: litery w pudełkach o szerokości liter docelowych, słowa się nie łamią – układ się nie zmienia */
.scr-w { white-space: nowrap; }
.scr-c { display: inline-block; text-align: center; overflow: visible; }
/* „Co daje Ci”: po bokach stosu kart pole gwiazd (drobne + kilka czteroramiennych jak w logo, migoczą) i delikatne łuki orbit */
.gain-sec, .space-sides { position: relative; isolation: isolate; }
.gain-sec::before, .gain-sec::after, .space-sides::before, .space-sides::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.gain-sec::before, .space-sides::before { background: radial-gradient(1.2px 1.2px at 7.5% 69.0%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 8.8% 92.9%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 1.3% 73.6%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 2.1% 80.2%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 1.2% 16.8%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 9.7% 40.3%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 2.8% 66.2%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 6.6% 81.4%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 1.9% 20.3%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 9.1% 79.7%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 8.9% 94.0%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 11.8% 97.9%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 1.9% 55.9%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 7.7% 39.0%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 5.1% 15.3%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 7.4% 29.6%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 12.5% 50.1%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 4.8% 48.5%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 4.2% 82.7%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 2.9% 71.2%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 12.8% 1.3%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 1.8% 59.7%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 7.3% 57.0%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 4.8% 97.0%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 2.4% 66.6%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 8.5% 82.7%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 5.0% 75.7%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 12.2% 25.1%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 3.0% 91.5%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 3.1% 43.0%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 2.9% 4.6%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 7.2% 65.5%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 3.9% 90.9%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 3.0% 73.7%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 1.2% 35.0%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 7.1% 66.4%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 12.2% 25.1%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 7.7% 44.0%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 5.9% 73.7%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 1.7% 29.2%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 11.2% 65.5%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 1.4% 25.4%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 5.7% 86.3%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 8.7% 15.3%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 2.8% 72.4%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 1.6% 14.7%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 8.8% 90.3%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 6.7% 94.4%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 11.8% 36.8%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 2.8% 37.1%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 10.3% 48.5%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 11.8% 47.7%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 2.7% 58.7%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 2.7% 71.6%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 5.6% 13.3%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 95.6% 26.9%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 90.9% 25.5%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 98.5% 42.3%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 95.2% 74.7%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 96.7% 14.6%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 88.7% 39.9%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 89.2% 63.9%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 96.4% 8.0%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 88.4% 28.6%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 90.6% 93.3%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 91.8% 88.0%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 94.5% 18.8%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 97.3% 20.8%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 95.9% 75.2%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 94.2% 50.5%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 95.9% 6.6%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 98.2% 39.0%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 97.4% 40.0%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 93.8% 84.7%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 89.8% 95.5%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 94.3% 74.1%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 89.9% 16.3%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 95.7% 98.1%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 96.8% 79.7%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 92.9% 57.2%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 93.5% 6.9%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 94.1% 32.7%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 93.2% 29.6%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 94.5% 75.3%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 89.3% 61.4%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 90.9% 20.7%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 87.8% 65.5%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 92.0% 86.1%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 94.8% 62.4%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 96.7% 96.8%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 93.1% 93.8%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 95.2% 70.2%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 92.7% 51.3%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 97.5% 7.9%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 87.3% 65.8%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 87.5% 28.0%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 94.1% 40.6%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 92.1% 79.2%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 91.8% 33.1%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 89.7% 90.6%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 94.9% 4.7%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 89.1% 37.6%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 94.3% 22.2%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 92.4% 63.0%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 94.4% 72.6%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 94.3% 81.4%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 90.1% 48.2%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 93.0% 31.0%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 91.6% 52.4%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 95.5% 90.1%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(2px 2px at 2.9% 20.8%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 11.5% 71.2%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 2.1% 18.2%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 7.3% 61.8%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 5.5% 73.8%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 12.8% 98.1%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 3.0% 43.5%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 9.1% 37.5%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 8.0% 19.5%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 2.0% 3.8%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 7.2% 93.6%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 12.6% 89.2%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 7.1% 24.4%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 9.3% 71.2%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 2.9% 39.5%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 5.8% 46.2%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 9.0% 66.6%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 9.0% 61.9%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 88.2% 96.6%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 89.6% 35.4%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 94.6% 86.5%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 91.4% 8.3%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 94.0% 40.0%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 92.3% 45.1%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 98.9% 93.3%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 88.8% 96.3%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 89.3% 37.3%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 87.0% 17.3%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 93.8% 90.4%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 92.2% 83.4%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 90.7% 41.9%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 97.6% 24.9%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 93.9% 81.7%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 94.0% 46.8%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 96.5% 65.6%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 87.9% 43.7%, rgba(255,255,255,0.85), transparent 70%); }
.gain-sec::after, .space-sides::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23cfeeff' d='M12 2c.6 6 2.4 8.4 10 10-7.6 1.6-9.4 4-10 10-.6-6-2.4-8.4-10-10 7.6-1.6 9.4-4 10-10z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23cfeeff' d='M12 2c.6 6 2.4 8.4 10 10-7.6 1.6-9.4 4-10 10-.6-6-2.4-8.4-10-10 7.6-1.6 9.4-4 10-10z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23cfeeff' d='M12 2c.6 6 2.4 8.4 10 10-7.6 1.6-9.4 4-10 10-.6-6-2.4-8.4-10-10 7.6-1.6 9.4-4 10-10z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23cfeeff' d='M12 2c.6 6 2.4 8.4 10 10-7.6 1.6-9.4 4-10 10-.6-6-2.4-8.4-10-10 7.6-1.6 9.4-4 10-10z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23cfeeff' d='M12 2c.6 6 2.4 8.4 10 10-7.6 1.6-9.4 4-10 10-.6-6-2.4-8.4-10-10 7.6-1.6 9.4-4 10-10z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23cfeeff' d='M12 2c.6 6 2.4 8.4 10 10-7.6 1.6-9.4 4-10 10-.6-6-2.4-8.4-10-10 7.6-1.6 9.4-4 10-10z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23cfeeff' d='M12 2c.6 6 2.4 8.4 10 10-7.6 1.6-9.4 4-10 10-.6-6-2.4-8.4-10-10 7.6-1.6 9.4-4 10-10z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23cfeeff' d='M12 2c.6 6 2.4 8.4 10 10-7.6 1.6-9.4 4-10 10-.6-6-2.4-8.4-10-10 7.6-1.6 9.4-4 10-10z'/%3E%3C/svg%3E"); background-position: 4.2% 7.1%, 93.4% 15.8%, 8.7% 29.1%, 95.5% 37.6%, 3.5% 53.8%, 96.5% 64.7%, 10.0% 76.4%, 94.3% 83.7%; background-size: 16px 16px, 20px 20px, 13px 13px, 20px 20px, 13px 13px, 20px 20px, 20px 20px, 16px 16px; background-repeat: no-repeat;
filter: drop-shadow(0 0 6px rgba(124, 200, 255, .8)); animation: gain-twinkle 4.5s ease-in-out infinite alternate; }
@keyframes gain-twinkle { from { opacity: .35; } to { opacity: 1; } }
.gain-sec > .container, .space-sides > .container { position: relative; }
.gain-sec > .container::before, .gain-sec > .container::after, .space-sides > .container::before, .space-sides > .container::after { content: ""; position: absolute; top: 8%; width: 520px; height: 520px; border-radius: 50%; pointer-events: none; z-index: -1;
border: 1px solid rgba(124, 200, 255, .12); box-shadow: 0 0 40px rgba(124, 200, 255, .05) inset; }
.gain-sec > .container::before, .space-sides > .container::before { left: -470px; }
.gain-sec > .container::after, .space-sides > .container::after { right: -470px; top: 48%; border-color: rgba(255, 140, 70, .12); }
@media (max-width: 860px) { .gain-sec > .container::before, .gain-sec > .container::after, .space-sides > .container::before, .space-sides > .container::after { display: none; } }
@media (prefers-reduced-motion: reduce) { .gain-sec::after, .space-sides::after { animation: none; } }
/* podstrony: pole gwiazd nad stopką (przy łunie), wygaszone ku górze; migoczące gwiazdki z logo dodaje app.js */
.pub-main { position: relative; }
.top-stars { position: absolute; left: 0; right: 0; bottom: -150px; height: 560px; z-index: -1; pointer-events: none; overflow: hidden;
background: radial-gradient(1.2px 1.2px at 38.3% 24.1%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 17.3% 89.7%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 57.6% 68.3%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 55.2% 38.8%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 72.7% 57.3%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 77.6% 65.5%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 83.3% 44.2%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 16.2% 16.4%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 71.9% 18.1%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 65.2% 61.6%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 6.8% 77.3%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 4.2% 85.2%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 83.4% 22.7%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 72.2% 72.3%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 13.3% 66.3%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 13.1% 89.7%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 68.5% 96.1%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 6.2% 32.5%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 61.8% 60.4%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 18.8% 87.2%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 84.0% 30.9%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 15.3% 66.1%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 40.9% 65.7%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 49.3% 39.9%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 3.1% 15.0%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 45.9% 71.9%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 42.7% 73.5%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 53.9% 86.5%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 65.2% 32.9%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 14.6% 8.3%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 4.9% 84.8%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 86.7% 74.1%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 11.7% 65.4%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 13.5% 87.4%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 65.2% 74.0%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 60.7% 42.2%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 84.1% 94.3%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 24.7% 44.0%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 72.9% 67.3%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 41.2% 45.2%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 95.8% 28.5%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 21.7% 67.9%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 28.1% 88.2%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 32.9% 90.8%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 38.2% 87.0%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 74.6% 72.3%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 22.0% 17.8%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 4.0% 19.3%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 66.3% 8.2%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 24.2% 56.4%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 16.2% 33.6%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 23.4% 66.9%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 12.6% 97.8%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 59.7% 70.5%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 55.2% 49.8%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 96.1% 87.8%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 81.6% 4.9%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 58.8% 92.4%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 63.6% 51.2%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 64.7% 19.0%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 72.3% 77.2%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 8.0% 50.9%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 59.3% 35.8%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 67.8% 90.5%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 89.8% 31.5%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 15.9% 84.0%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 61.0% 81.6%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 86.2% 28.8%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 58.6% 31.1%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 79.2% 68.4%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 24.4% 50.0%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 59.2% 24.4%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 18.9% 47.5%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 8.1% 49.5%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 93.1% 81.3%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 6.3% 81.3%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 71.2% 70.0%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 3.6% 75.0%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 20.2% 79.1%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 32.6% 37.2%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 17.9% 85.3%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 22.7% 85.8%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 51.4% 16.3%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 65.2% 53.0%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 3.6% 81.1%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 27.6% 4.3%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 76.1% 71.8%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 38.8% 19.9%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 52.6% 58.3%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 68.6% 49.0%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 56.6% 71.2%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 19.6% 19.3%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 48.5% 74.4%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 79.7% 83.9%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 44.0% 70.5%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 11.4% 39.3%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 7.5% 82.2%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 99.0% 66.3%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 74.7% 37.7%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 78.9% 10.2%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 37.3% 35.7%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 85.7% 18.6%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 16.6% 10.6%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 83.6% 32.3%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 89.5% 32.0%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 83.0% 20.7%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 89.4% 95.5%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 87.1% 68.4%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 88.8% 89.8%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(1.2px 1.2px at 95.5% 28.4%, rgba(255,255,255,0.6), transparent 70%), radial-gradient(2px 2px at 84.3% 76.8%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 34.9% 18.1%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 89.2% 47.3%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 53.0% 87.1%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 48.4% 26.2%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 68.2% 53.1%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 27.7% 68.4%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 89.6% 25.6%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 80.6% 74.4%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 52.2% 20.6%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 66.2% 29.0%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 25.6% 83.9%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 27.5% 10.9%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 83.9% 97.5%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 30.9% 40.9%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 54.4% 74.3%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 2.2% 64.2%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 23.9% 91.2%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 41.6% 92.6%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 45.1% 64.9%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 4.7% 21.5%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 30.0% 37.5%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 18.0% 42.4%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 9.6% 56.4%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 95.4% 84.3%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 62.0% 96.2%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 72.4% 62.9%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 45.8% 9.9%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 88.5% 88.0%, rgba(255,255,255,0.85), transparent 70%), radial-gradient(2px 2px at 79.9% 68.1%, rgba(255,255,255,0.85), transparent 70%);
-webkit-mask-image: linear-gradient(0deg, #000 45%, transparent); mask-image: linear-gradient(0deg, #000 45%, transparent); }
.top-stars .hero-star { z-index: 0; }
/* cennik: plakietka „HOT” przy PRO – dokładnie jak „Zobacz cennik” (ta sama tarcza słońca, korona .sun-flare, protuberancja), tylko w małej skali */
.hot-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 74px; height: 24px; padding: 0 14px; border-radius: 999px;
font: 700 12.5px/1 var(--font); letter-spacing: .02em; color: #6b2004; white-space: nowrap;
background: radial-gradient(130% 190% at 50% 50%, #fff 0%, #fffbea 45%, #ffe39a 72%, #ffb347 88%, #ff8a2a 100%);
box-shadow: 0 0 3px #fff7d6, 0 0 9px rgba(255, 200, 90, .95), 0 0 18px rgba(255, 130, 30, .75), 0 0 34px rgba(230, 70, 10, .45); }
.hot-sun::before { inset: -6px -8px; filter: blur(5px); }
.hot-sun .sun-flare { filter: blur(2px); }
.hot-sun .sun-prom { left: -4px; top: -14px; width: 24px; height: 18px; border-width: 2px; }
/* cennik: BASIC i MAX z lodowoniebieską ramką z gradientem (PRO zostaje pomarańczowe) */
.price-card:not(.featured) { border-color: transparent;
background: linear-gradient(rgba(13, 16, 22, .95), rgba(13, 16, 22, .95)) padding-box,
linear-gradient(165deg, #bfe8ff 0%, #4cc2ff 40%, rgba(76, 194, 255, .35) 75%, rgba(76, 194, 255, .15) 100%) border-box;
box-shadow: 0 0 50px rgba(76, 194, 255, .1); }
/* cennik: znaczki ✓ przy funkcjach lodowoniebieskie */
.feat-list li::before { color: var(--ice); }
/* cennik: „Wybierz plan” i przełącznik miesięcznie/rocznie na środku */
.pricing-head { margin-left: auto; margin-right: auto; text-align: center; }
.pricing-head + .billing-toggle, [data-billing] { margin-left: auto; margin-right: auto; }
[data-billing] { display: flex; width: fit-content; }
/* cennik: większy kontrast – ciemniejsze tło kart, funkcje z planu jasne, spoza planu wyraźnie przygaszone, ceny i opisy jaśniejsze */
.price-card { --card-bg: rgba(6, 8, 12, .97); }
.price-card:not(.featured) { background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
linear-gradient(165deg, #bfe8ff 0%, #4cc2ff 40%, rgba(76, 194, 255, .35) 75%, rgba(76, 194, 255, .15) 100%) border-box; }
.price-card .feat-list li { color: #f4f7fc; font-size: 14.5px; }
.price-card .feat-list li.no { color: rgba(200, 210, 225, .32); text-decoration-color: rgba(200, 210, 225, .32); }
.price-card .feat-list li.no::before { color: rgba(200, 210, 225, .3); }
.price-card .feat-list li b { color: #fff; font-weight: 700; }
.price-card h3 { color: #fff; }
.price-card .price small, .price-card .price-year-note { color: #b9c3d3; }
/* cennik: „Najczęściej wybierane” w stylu przycisku „Zacznij teraz” – ciemne wnętrze z pomarańczową łuną od góry, pomarańczowa ramka z gradientem */
.pop-badge { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 9px; white-space: nowrap;
font: 500 12.5px/1 var(--font); color: #fff; border: 1.5px solid transparent;
background-image: radial-gradient(130% 140% at 50% 0%, rgba(255, 107, 44, .45), rgba(255, 107, 44, .12) 55%, transparent 85%),
linear-gradient(rgba(13, 16, 22, .95), rgba(13, 16, 22, .95)),
linear-gradient(165deg, #ffc08f 0%, #ff6b2c 40%, rgba(255, 107, 44, .55) 75%, rgba(255, 107, 44, .3) 100%);
background-clip: padding-box, padding-box, border-box; background-origin: padding-box, padding-box, border-box;
box-shadow: 0 0 18px rgba(255, 107, 44, .25); }
/* ---------- podstrony (Jak to działa, Korzyści, FAQ) w stylu strony głównej ---------- */
.page-hero { text-align: center; max-width: 820px; margin: 0 auto 44px; }
.page-hero h1 { font-size: clamp(32px, 4.6vw, 58px); font-weight: 400; letter-spacing: -.03em; line-height: 1.05; margin: 0 0 16px; }
.page-hero p { color: #c3cad8; font-size: 17px; margin: 0; }
/* szklana karta z łuną u góry – jak karty „Co daje Ci” / kafle „Więcej niż kalendarz” */
.glass-card { position: relative; overflow: hidden; isolation: isolate; padding: 30px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, .11);
background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .01) 40%), rgba(4, 5, 8, .6);
-webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.glass-card::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--glow, none); }
.glass-card.tone-fire { --glow: radial-gradient(80% 60% at 20% 0%, rgba(214, 70, 30, .4), transparent 70%), radial-gradient(50% 50% at 70% 0%, rgba(255, 130, 50, .2), transparent 70%); }
.glass-card.tone-ice { --glow: radial-gradient(80% 60% at 20% 0%, rgba(40, 120, 220, .38), transparent 70%), radial-gradient(50% 50% at 70% 0%, rgba(124, 210, 255, .18), transparent 70%); }
.glass-card.tone-mix { --glow: radial-gradient(60% 60% at 15% 0%, rgba(214, 70, 30, .32), transparent 70%), radial-gradient(60% 60% at 85% 0%, rgba(40, 140, 230, .32), transparent 70%); }
.glass-card h3 { font-size: 21px; font-weight: 500; margin: 14px 0 8px; }
.glass-card p { color: #b9c1cf; margin: 0; text-align: left; }
.pub-main .glass-card p { text-align: left; }
/* Jak to działa: kroki 2×2 */
.step-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1000px) { .step-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.step-grid .glass-card { min-height: 210px; }
.plan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.plan-list li { position: relative; padding-left: 28px; color: #e6ebf3; }
.plan-list li::before { content: "✦"; position: absolute; left: 0; color: #ffb27a; }
.hm-cal { grid-template-columns: repeat(7, 1fr); }
/* Korzyści: kafle z numerem */
.glass-card.benefit { min-height: 250px; }
.glass-card.benefit .num { font-size: 44px; margin-bottom: 6px; }
/* FAQ: szklane pytania */
.faq-glass details.faq { border-radius: 18px; border: 1px solid rgba(255, 255, 255, .1); padding: 0 24px;
background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .01) 40%), rgba(4, 5, 8, .6);
-webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); transition: border-color .25s, box-shadow .25s; }
.faq-glass details.faq + details.faq { margin-top: 12px; }
.faq-glass details.faq[open] { border-color: rgba(124, 200, 255, .35); box-shadow: 0 0 30px rgba(76, 194, 255, .12); }
.faq-glass details.faq summary { font-size: 16.5px; font-weight: 500; padding: 20px 0; }
.faq-glass details.faq summary::after { content: "+"; width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%;
border: 1px solid rgba(124, 200, 255, .4); color: #9fe0ff; font-size: 18px; transition: transform .25s; }
.faq-glass details.faq[open] summary::after { content: "+"; transform: rotate(45deg); }
.faq-glass details.faq p { color: #c3cad8; padding-bottom: 18px; text-align: left; }
.faq-ask { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 30px; }
.faq-ask h3 { margin: 0 0 6px; }
@media (max-width: 760px) { .step-grid { grid-template-columns: 1fr; } .page-hero { margin-bottom: 30px; } }
/* Jak to działa: kroki w stylu karty „Polecenia” (pomarańczowa ramka, gradient ogień→lód, światło za kursorem z .spot) */
.step-card { min-height: 210px; padding: 30px; border-color: rgba(255, 107, 44, .35); }
.step-card.spot::after { background: linear-gradient(135deg, rgba(255, 107, 44, .08), rgba(76, 194, 255, .05)), rgba(13, 16, 22, .62); }
.step-card h3 { font-size: 21px; font-weight: 500; margin: 14px 0 8px; }
.step-card p { color: #b9c1cf; margin: 0; }
.pub-main .step-card p { text-align: left; }
.step-card.benefit { min-height: 250px; }
.step-card.benefit .num { font-size: 44px; margin-bottom: 6px; }
/* Jak to działa – „Kampania rozpisana dzień po dniu” jako baner w stylu make.com: tekst + przycisk z lewej, przechylone kartki z panelu z prawej (ucięte dołem) */
.plan-banner { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 440px;
border-radius: 28px; border: 1px solid rgba(255, 255, 255, .1); padding: clamp(32px, 5vw, 72px);
/* tło prawie czarne, półprzezroczyste jak szkło (rozmyte to, co pod spodem); łuny zostają */
background: radial-gradient(60% 90% at 85% 30%, rgba(76, 194, 255, .22), transparent 70%), radial-gradient(55% 80% at 10% 100%, rgba(255, 107, 44, .22), transparent 70%),
linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .01) 40%), rgba(3, 4, 7, .7);
-webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.pb-copy { position: relative; z-index: 2; max-width: 520px; }
.pb-copy h2 { font-size: clamp(30px, 3.6vw, 48px); font-weight: 400; letter-spacing: -.03em; line-height: 1.06; margin: 0 0 18px; }
.pb-copy p { color: #c3cad8; font-size: 17px; margin: 0 0 30px; text-align: left; }
.pb-art { position: absolute; right: 0; top: 0; bottom: 0; width: 50%; pointer-events: none; }
.pb-doc { position: absolute; width: 270px; height: 340px; border-radius: 22px; padding: 26px; display: grid; align-content: start; gap: 12px;
border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 30px 60px rgba(0, 0, 0, .5); font-size: 13px; color: #c9d1de; }
.pb-doc b { font-size: 13px; color: #fff; font-weight: 600; }
.pb-doc i.l { display: block; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .12); } .pb-doc i.l.s { width: 60%; }
.pb-doc-1 { left: 8%; bottom: -70px; transform: rotate(-9deg); z-index: 3; color: #fff;
background: radial-gradient(80% 60% at 30% 0%, rgba(255, 130, 60, .55), transparent 70%), linear-gradient(160deg, #3a1f1a, #121520 55%, #07080c); } /* ognista góra, dalej czarno jak kalendarz */
.pb-doc-1 .pb-tag { justify-self: start; font-size: 11px; letter-spacing: .16em; padding: 4px 10px; border-radius: 999px; color: #ffd2b0; border: 1px solid rgba(255, 160, 100, .45); }
.pb-doc-1 h4 { font-size: 24px; font-weight: 400; line-height: 1.1; margin: 6px 0 0; text-transform: none; letter-spacing: -.02em; color: #fff; } .pb-doc-1 h4 em { font-style: normal; color: #ffb27a; }
.pb-doc-1 p { margin: 0; color: #d8c8c0; font-size: 13px; }
.pb-glow { margin-top: 18px; display: grid; place-items: center; } .pb-glow img { width: 150px; filter: drop-shadow(0 0 18px rgba(124, 200, 255, .5)); }
.pb-doc-2 { left: 38%; bottom: -40px; transform: rotate(4deg); z-index: 2; background: linear-gradient(170deg, #121520, #07080c); color: #c9d1de; } /* czarny kalendarz */
.pb-doc-2 b { color: #fff; }
.pb-doc-2 .hm-cal span.r { box-shadow: 0 0 12px rgba(255, 107, 44, .5); }
.pb-doc-3 { left: 66%; bottom: 10px; transform: rotate(12deg); z-index: 1; background: linear-gradient(170deg, #121520, #07080c); }
.pb-doc-3 .ba-bars { height: 70px; }
@media (max-width: 900px) {
.plan-banner { grid-template-columns: 1fr; padding-bottom: 300px; }
.pb-art { left: 0; right: 0; top: auto; height: 320px; width: auto; }
.pb-doc { width: 200px; height: 260px; padding: 18px; } .pb-doc-1 { left: 6%; } .pb-doc-2 { left: 36%; } .pb-doc-3 { left: 62%; }
.pb-doc-1 h4 { font-size: 19px; } .pb-glow img { width: 100px; }
}
/* Jak to działa i Korzyści: kafle w lodowym błękicie zamiast pomarańczu (ramka, gradient, światło za kursorem, plakietka z numerem) */
.step-card { border-color: rgba(124, 200, 255, .35); }
.step-card.spot::after { background: linear-gradient(135deg, rgba(124, 200, 255, .09), rgba(76, 194, 255, .03)), rgba(13, 16, 22, .62); }
.step-card.spot::before { background: radial-gradient(circle, rgba(170, 225, 255, .85), rgba(76, 194, 255, .42) 42%, transparent 70%); }
@media (hover: hover) { .step-card.spot:hover { border-color: rgba(124, 200, 255, .55); box-shadow: 0 0 40px rgba(76, 194, 255, .12); } }
.step-card .how-num { color: #9fe0ff; border-color: rgba(124, 200, 255, .45); background: rgba(76, 194, 255, .1); }
.faq-glass details.faq p + p { margin-top: -6px; }
/* ---------- wydajność (16.10): ten sam wygląd, mniej pracy przy przewijaniu ----------
1) ziarno z gotowego kafelka PNG zamiast filtra SVG liczonego przy każdym malowaniu; warstwy stałe (ziarno, smuga) na osobnej warstwie GPU
2) duże „szklane” karty: zamiast rozmycia tła na żywo (backdrop-filter – najdroższe przy przewijaniu) ciemniejsze tło o tym samym odcieniu;
za nimi i tak jest prawie czarne tło, więc wygląd się nie zmienia. Rozmycie zostaje tam, gdzie widać je naprawdę (menu, panel boczny, okna). */
body::after { background-image: url("../img/grain.png"); background-size: 180px 180px; will-change: transform; transform: translateZ(0); }
body::before { will-change: transform; transform: translateZ(0); filter: none; } /* rozmycie smugi było niewidoczne (krawędzie poza ekranem), a kosztowało przy każdej klatce */
.gain-card, .glass-card, .spot::after, .faq-glass details.faq, .how-panel, .plan-banner, .foot-card {
-webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.gain-card { background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .01) 40%), #06070b; } /* pełne – karta pod spodem nie prześwituje */
.glass-card { background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .01) 40%), rgba(6, 7, 11, .88); }
.faq-glass details.faq { background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .01) 40%), rgba(6, 7, 11, .88); }
.how-panel { background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015)), rgba(10, 12, 18, .94); }
.foot-card { background: linear-gradient(180deg, rgba(18, 34, 52, .9), rgba(8, 10, 15, .97) 70%); }
.spot::after { background: linear-gradient(155deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018) 45%, rgba(124, 200, 255, .035)), rgba(10, 12, 17, .82); }
.referral-cta.spot::after { background: linear-gradient(135deg, rgba(255, 107, 44, .08), rgba(76, 194, 255, .05)), rgba(13, 16, 22, .82); }
.step-card.spot::after { background: linear-gradient(135deg, rgba(124, 200, 255, .09), rgba(76, 194, 255, .03)), rgba(13, 16, 22, .82); }
/* animowane drobiazgi na własnych warstwach (bez ponownego malowania sąsiedztwa) */
.sun-flare, .soc-tile, .soc-logo, .hero-star, .trail-star { will-change: transform, opacity; }
/* migoczące warstwy gwiazd (z cieniem/poświatą) – raz namalowane na własnej warstwie, migotanie to już tylko zmiana przezroczystości */
.gain-sec::after, .space-sides::after, .end-stars::after { will-change: opacity; transform: translateZ(0); }
.gain-sec::before, .space-sides::before, .end-stars, .end-stars::before, .top-stars { transform: translateZ(0); }
/* podstrony (Jak to działa, Korzyści, FAQ, Cennik, Kontakt): tylko statyczne tło gwiazd – bez migających gwiazdek z logo */
.space-sides::after { display: none; }
/* wydajność na słabszych komputerach: pola gwiazd (po ~140 gradientów na sekcję) zastąpione gotowymi obrazkami z tymi samymi gwiazdami */
.gain-sec::before, .space-sides::before { background: url("../img/stars-sides.png") top center / 100% auto repeat-y; transform: none; }
.top-stars { background: url("../img/stars-foot.png") bottom center / 100% auto no-repeat; transform: none; }
/* podstrony: bez gwiazd i orbit po bokach – zostaje tylko pole gwiazd przy stopce (.top-stars) */
.space-sides::before, .space-sides::after, .space-sides > .container::before, .space-sides > .container::after { display: none; }
/* Jak to działa: kroki na przemian (tekst | karta z wycinkiem aplikacji), wiersze ułożone schodkowo jak w make.com */
.zig { display: grid; gap: clamp(60px, 9vw, 120px); margin-top: 20px; }
.zig-row { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(28px, 6vw, 90px); align-items: center; }
.zig-row.rev .zig-copy { order: 2; }
.zig-copy h3 { font-size: clamp(28px, 3.2vw, 42px); font-weight: 400; letter-spacing: -.03em; line-height: 1.08; margin: 16px 0 14px; }
.zig-copy p { color: #c3cad8; font-size: 17px; margin: 0; max-width: 460px; text-align: left; }
.zig-art { position: relative; display: grid; justify-items: center; align-content: center; gap: 0; min-height: 340px; padding: 40px 20px; border-radius: 28px;
border: 1px solid rgba(255, 255, 255, .1); overflow: hidden; isolation: isolate; background: #06070b; }
.zig-art::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.zig-art.tone-ice::before { background: radial-gradient(70% 70% at 15% 0%, rgba(76, 194, 255, .55), rgba(76, 194, 255, .12) 45%, transparent 75%), radial-gradient(50% 60% at 95% 100%, rgba(150, 215, 255, .22), transparent 70%); } /* lodowy błękit jak w banerze kampanii */
.zig-art.tone-fire::before { background: radial-gradient(70% 70% at 15% 0%, rgba(214, 70, 30, .5), transparent 70%), radial-gradient(50% 60% at 95% 100%, rgba(255, 140, 70, .16), transparent 70%); }
/* wiersze „aplikacji”: coraz szersze i nachodzące, ostatni największy */
.zr { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .1);
background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)), #0e1118; box-shadow: 0 14px 30px rgba(0, 0, 0, .45); position: relative; }
.zr.w1 { width: 72%; opacity: .55; filter: blur(.4px); z-index: 1; }
.zr.w2 { width: 82%; margin-top: -6px; opacity: .8; z-index: 2; }
.zr.w3 { width: 94%; margin-top: -4px; z-index: 3; }
.zr.big { padding: 20px 22px; border-color: rgba(255, 255, 255, .16); }
.zr > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.zr b { font-weight: 500; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .zr.big b { font-size: 19px; }
.zr small { color: #8f9ab0; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zr em { font-style: normal; font-size: 12px; color: #9fe0ff; } .tone-fire .zr em { color: #ffb27a; }
.zr strong { font-family: var(--display-x); font-weight: 400; font-size: 24px; }
.zi { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; color: #cfe8ff;
background: rgba(124, 200, 255, .12); border: 1px solid rgba(124, 200, 255, .3); }
.tone-fire .zi { color: #ffd2b0; background: rgba(255, 107, 44, .12); border-color: rgba(255, 140, 70, .35); }
.zr.big .zi { width: 46px; height: 46px; font-size: 18px; }
.zi.ok { color: #4ade9b; background: rgba(74, 222, 155, .12); border-color: rgba(74, 222, 155, .4); }
.zi.bell { font-size: 16px; }
.zr.btns { justify-content: center; gap: 10px; }
.zb { padding: 7px 14px; border-radius: 10px; font-size: 13px; border: 1px solid rgba(255, 255, 255, .16); color: #c9d1de; }
.zb.ok { color: #4ade9b; border-color: rgba(74, 222, 155, .45); background: rgba(74, 222, 155, .1); }
@media (max-width: 860px) {
.zig-row { grid-template-columns: 1fr; } .zig-row.rev .zig-copy { order: 0; }
.zig-art { min-height: 0; padding: 30px 14px; } .zr.w1 { width: 84%; } .zr.w2 { width: 92%; } .zr.w3 { width: 100%; }
}.zig-copy .how-num { color: #9fe0ff; border-color: rgba(124, 200, 255, .45); background: rgba(76, 194, 255, .1); }
/* Jak to działa: oś na środku (osobny pas między tekstem a kartą) – cienki lodowy tor, kropka przy każdym kroku
i kometa (jasna głowa + rozmyty, zwężający się ogon) zjeżdżająca w dół przy przewijaniu (app.js ustawia --p) */
.zig { position: relative; }
.zig-row { grid-template-columns: 1fr 90px 1fr; gap: 0 clamp(16px, 3vw, 40px); position: relative; z-index: 1; } /* równe kolumny – pas z osią dokładnie na środku */
.zig-row > .zig-copy { grid-column: 1; } .zig-row > .zig-art { grid-column: 3; }
.zig-row.rev > .zig-copy { grid-column: 3; order: 0; } .zig-row.rev > .zig-art { grid-column: 1; grid-row: 1; }
.zig-line { position: absolute; left: 50%; top: 70px; bottom: 0; width: 1px; /* start niżej – kometa nie wchodzi pod nagłówek strony */
margin-left: -.5px; z-index: 0; pointer-events: none;
background: linear-gradient(180deg, transparent, rgba(124, 200, 255, .22) 6%, rgba(124, 200, 255, .22) 94%, transparent); }
.zig-line i { position: absolute; left: 50%; top: calc(var(--p, 0) * 100%); width: 0; height: 0; --trail: inherit; }
/* kometa jak w pierwszej sekcji: miękka głowa bez wyraźnej krawędzi, płynnie przechodząca w szeroki u dołu, zwężający się i gasnący ogon */
.zig-line i::before { content: ""; position: absolute; left: -10px; bottom: -14px; width: 20px; height: var(--trail, 10px);
/* ogon jako wydłużona miękka elipsa: najjaśniejsza przy głowie, rozmywa się i zwęża ku górze */
background: radial-gradient(50% 100% at 50% 100%, rgba(255, 255, 255, .95) 0%, rgba(200, 235, 255, .7) 12%, rgba(130, 200, 255, .35) 40%, rgba(110, 190, 255, .1) 70%, transparent 100%);
filter: blur(3px); }
.zig-line i::after { content: ""; position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border-radius: 50%;
background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(225, 245, 255, .9) 10%, rgba(150, 212, 255, .45) 26%, rgba(110, 190, 255, .15) 45%, transparent 70%); }
@media (max-width: 860px) { .zig-line, .zig-row::before { display: none; } .zig-row, .zig-row.rev { grid-template-columns: 1fr; }
.zig-row > .zig-copy, .zig-row.rev > .zig-copy, .zig-row > .zig-art, .zig-row.rev > .zig-art { grid-column: 1; grid-row: auto; } }
/* kroki „spadają” razem z kometą: zanim dotrze do nich kometa – nad swoim miejscem i niewidoczne */
.zig-js .zig-row > .zig-copy, .zig-js .zig-row > .zig-art { opacity: 0; transform: translateY(-60px); transition: opacity .6s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.zig-js .zig-row > .zig-art { transition-delay: .08s; }
.zig-js .zig-row.in > .zig-copy, .zig-js .zig-row.in > .zig-art { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .zig-js .zig-row > .zig-copy, .zig-js .zig-row > .zig-art { opacity: 1; transform: none; transition: none; } }
/* oś pod kometą tymczasowo niewidoczna (sama kometa zostaje) – żeby przywrócić, usuń tę regułę */
.zig-line { background: none; }
.zig-copy h3 { margin-top: 0; }
/* przewijanie w górę: kometa „leci w górę” – ogon odwrócony pod głowę (lustrzane odbicie wokół głowy) */
/* kometa czekająca na starcie: unosi się w miejscu jak postać w grze (w dół – zwalnia – w górę), bez ogona */
@keyframes comet-idle { 0%, 100% { translate: 0 -6px; } 50% { translate: 0 10px; } }
.zig-line.idle i { animation: comet-idle 2.6s cubic-bezier(.45, 0, .55, 1) infinite; }
.zig-line.idle i::before { opacity: 0; } /* w spoczynku sama głowa, bez ogona */
.zig-line i::before { transition: opacity .3s ease; }
@media (prefers-reduced-motion: reduce) { .zig-line.idle i { animation: none; } }
/* Jak to działa: większy tekst kroków i dwa punkty pod opisem (więcej treści obok dużych kart) */
.zig-copy p { font-size: 18px; line-height: 1.6; }
.zig-more { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; max-width: 470px; }
.zig-more li { position: relative; padding-left: 28px; color: #e2e8f2; font-size: 16px; line-height: 1.5; }
.zig-more li::before { content: "✦"; position: absolute; left: 0; top: 0; color: #9fe0ff; }
/* większy odstęp między ostatnim krokiem (koniec drogi komety) a banerem „Kampania rozpisana…” */
.zig { margin-bottom: 90px; }
/* Jak to działa: kilka drobnych, statycznych gwiazdek na kartach kroków (u góry i u dołu, poza wierszami; bez animacji – nie obciąża) */
.zig-art::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(1.5px 1.5px at 34% 8%, rgba(255,255,255,0.75), transparent 70%), radial-gradient(2px 2px at 92% 22%, rgba(255,255,255,0.75), transparent 70%), radial-gradient(1px 1px at 81% 13%, rgba(255,255,255,0.9), transparent 70%), radial-gradient(1px 1px at 34% 89%, rgba(255,255,255,0.9), transparent 70%), radial-gradient(1px 1px at 25% 94%, rgba(255,255,255,0.5), transparent 70%), radial-gradient(1px 1px at 81% 92%, rgba(255,255,255,0.5), transparent 70%), radial-gradient(1px 1px at 57% 19%, rgba(255,255,255,0.75), transparent 70%), radial-gradient(2px 2px at 62% 96%, rgba(255,255,255,0.5), transparent 70%), radial-gradient(2px 2px at 73% 21%, rgba(255,255,255,0.9), transparent 70%), radial-gradient(2px 2px at 72% 18%, rgba(255,255,255,0.5), transparent 70%); }
.zig-row.rev .zig-art::after { transform: scaleX(-1); }
/* Jak to działa: tekst kroku zaczyna się na wysokości górnej krawędzi karty (zamiast na środku) */
.zig-row { align-items: start; }
.zig-copy { padding-top: 6px; }
/* Jak to działa: nagłówek z lewej (kometa czeka z prawej, obok niego) */
.how-hero { text-align: left; margin-left: 0; max-width: 640px; }
/* ogon komety: długość ustawia pętla w app.js (szybciej = dłuższy), zmiany płynne */
.zig-line i::before { transition: opacity .3s ease, height .25s ease; }
/* Jak to działa – typografia: hierarchia jasności (przygaszony wstęp → jasny akcent → stonowany podtytuł),
„PLAN PROMO” szerokim krojem jak w logo (Michroma), lodowy gradient, pisane i cofane jak na maszynie (app.js) */
.how-hero h1 { font-size: clamp(32px, 4.2vw, 54px); line-height: 1.06; margin-bottom: 20px; }
.how-hero .hh-lead { color: #aab4c4; font-weight: 400; letter-spacing: -.03em; }
.hh-type { position: relative; display: inline-block; font: inherit; letter-spacing: -.03em; white-space: nowrap; } /* ten sam krój co nagłówek, zostaje gradient i pisanie */
.hh-ghost { visibility: hidden; }
.hh-text { position: absolute; left: 0; top: 0; color: transparent; background: linear-gradient(100deg, #e9f7ff 0%, #a9e2ff 45%, #5cc6ff 100%);
-webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 14px rgba(124, 200, 255, .35)); }
.how-hero p { color: #8f9ab0; font-size: 18px; font-weight: 400; max-width: 520px; }
/* kroki: tytuł biały, opis stonowany, punkty pośrodku jasności */
.zig-copy h3 { color: #f4f7fc; }
.zig-copy p { color: #a7b1c2; }
.zig-more li { color: #d0d8e4; }
/* kometa kończy drogę przy „Zacznij teraz” w banerze – musi być nad banerem (kroki dalej nad kometą) */
.zig { z-index: 2; }.space-sides:has(.zig) { z-index: 3; } /* sekcja z krokami nad sekcją banera – kometa przy „Zacznij teraz” nie jest przyciemniona */
/* Jak to działa: większy odstęp między nagłówkiem a pierwszym krokiem */
.how-hero { margin-bottom: 110px; }
@media (max-width: 860px) { .how-hero { margin-bottom: 50px; } }
/* Jak to działa: kometa rysowana na canvasie (app.js) – ślad gasnących kul światła jak dawna kometa przy kursorze.
Canvas wewnątrz .zig: pod kartami kroków, nad banerem; stare pseudo-elementy głowy i ogona wyłączone */
.zig-cv { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }
.zig-canvas .zig-line i { display: none; }
@media (max-width: 860px) { .zig-cv { display: none; } }
/* „PLAN PROMO” jak neon LED (w duchu navvia.pl): białe wnętrze, lodowa poświata – statycznie, bez mrugania */
.hh-neon { color: #f4fbff; white-space: nowrap; letter-spacing: -.03em;
text-shadow: 0 0 .04em #fff, 0 0 .12em #9fe0ff, 0 0 .28em #4cc2ff, 0 0 .6em rgba(76, 194, 255, .7), 0 0 1.2em rgba(40, 140, 255, .45); }
/* Jak to działa: większy odstęp między „Odkryj, jak powstaje Twój” a „PLAN PROMO” */
.hh-neon { display: inline-block; margin-top: 12px; }
/* „Zacznij teraz” na karcie „Kampania…”: pulsująca pomarańczowa poświata + rozchodzący się i znikający pierścień wokół przycisku */
.plan-banner .btn.fire[data-comet-end] { position: relative; animation: fire-glow 2.8s ease-in-out infinite; }
.plan-banner .btn.fire[data-comet-end]::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none;
border: 1.5px solid rgba(255, 140, 70, .7); box-shadow: 0 0 18px rgba(255, 107, 44, .5);
animation: fire-ring 2.8s ease-out infinite; }
@keyframes fire-glow {
0%, 100% { box-shadow: 0 0 18px rgba(255, 107, 44, .18); }
40% { box-shadow: 0 0 34px rgba(255, 107, 44, .55), 0 0 80px rgba(255, 90, 20, .3); }
}
@keyframes fire-ring {
0% { opacity: .9; transform: scale(1); }
70%, 100% { opacity: 0; transform: scale(1.18, 1.45); }
}
@media (prefers-reduced-motion: reduce) { .plan-banner .btn.fire[data-comet-end], .plan-banner .btn.fire[data-comet-end]::after { animation: none; } .plan-banner .btn.fire[data-comet-end]::after { opacity: 0; } }
/* =====================================================================
Korzyści: historia przewijana w stylu twilio.com – ekran przypięty, slajdy zmieniają się z przewijaniem,
na dole oś z gwiazdkami jak w logo (aktywna świeci lodowo, nad nią podpis). Telefon: slajdy jeden pod drugim, bez osi.
Grafiki celowo inne niż w „Jak to działa”: „scena” z poświatą i snopami światła + jeden duży element panelu.
===================================================================== */
.bs-sec { padding-top: 0; padding-bottom: 0; }
@media (min-width: 861px) { .bs-sec { margin-top: -72px; } } /* start pod pływającym menu (72 px w układzie) – bez pustego pasa nad slajdem */
.bs { position: relative; height: calc(var(--n, 5) * 100vh); }
.bs-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; padding: 96px 0 6px; }
/* tytuł slajdu na tej samej wysokości co „Gotowy plan promocji…” na stronie głównej (243 px od góry);
na niższych ekranach wyżej, żeby wszystko zmieściło się nad osią */
.bs-stage { position: relative; flex: 1; min-height: 0; display: grid; align-items: start; padding-top: clamp(0px, calc(100vh - 680px), 147px); }
.bs-slide { grid-area: 1 / 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; pointer-events: none; }
.bs-slide.on { pointer-events: auto; }
.bs-final { grid-template-columns: 1fr 1.1fr; }
.bs-final .bs-art { order: -1; }
.bs-copy, .bs-art { opacity: 0; transition: opacity .55s ease, transform .75s cubic-bezier(.2, .8, .2, 1); will-change: opacity, transform; }
.bs-copy { transform: translateY(28px); }
.bs-art { transform: translateX(46px) scale(.97); }
.bs-final .bs-art { transform: translateX(-46px) scale(.97); }
.bs-slide.on .bs-copy, .bs-slide.on .bs-art { opacity: 1; transform: none; }
.bs-slide.on .bs-art { transition-delay: .08s; }
.bs-copy h2 { font-size: clamp(32px, 4.2vw, 54px); line-height: 1.06; letter-spacing: -.03em; margin: 0 0 24px; font-weight: 400; }
.bs-copy h2 span { display: block; color: #aab4c4; font-weight: 400; letter-spacing: -.03em; } /* jak „Odkryj, jak powstaje Twój” w Jak to działa */
/* druga linia tytułu jak „PLAN PROMO” w Jak to działa: neon LED – białe wnętrze, lodowa poświata */
.bs-copy h2 em { display: block; font-style: normal; color: #f4fbff;
text-shadow: 0 0 .04em #fff, 0 0 .12em #9fe0ff, 0 0 .28em #4cc2ff, 0 0 .6em rgba(76, 194, 255, .7), 0 0 1.2em rgba(40, 140, 255, .45); }
.bs-copy p { color: #a7b1c2; font-size: 18px; line-height: 1.6; max-width: 560px; margin: 0; }
.bs-copy .btn { margin-top: 34px; }
/* „W Twoim planie”: zawsze 4 równe kafle 2×2 z ikonką */
.bs-feats-h { color: #8f9ab0; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; margin: 32px 0 12px; }
.bs-feats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 560px; }
.bs-feats li { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 10px 14px; border-radius: 14px; font-size: 15.5px; font-weight: 500; color: #eef6ff;
border: 1px solid rgba(255, 255, 255, .09); background: linear-gradient(135deg, rgba(124, 200, 255, .09), rgba(255, 255, 255, .02)); }
.bs-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: #9fe0ff;
background: rgba(124, 200, 255, .12); box-shadow: inset 0 0 0 1px rgba(124, 200, 255, .25); }
.bs-ico svg { width: 17px; height: 17px; }
/* ---- grafika: „wycinek ekranu” prawdziwego panelu (te same komponenty co w aplikacji), krawędzie wygaszone jak przy zrzucie ---- */
.bs-art { position: relative; min-height: 460px; height: 460px; margin-top: -20px; border-radius: 24px; overflow: hidden; isolation: isolate;
padding: 26px 0 0 26px; border: 1px solid rgba(255, 255, 255, .1);
background: radial-gradient(90% 60% at 100% 0%, rgba(76, 194, 255, .16), transparent 62%), radial-gradient(70% 50% at 0% 100%, rgba(76, 194, 255, .06), transparent 70%), #030407; }
.bs-art.tone-fire { background: radial-gradient(90% 60% at 100% 0%, rgba(76, 194, 255, .14), transparent 62%), radial-gradient(70% 50% at 0% 100%, rgba(255, 107, 44, .1), transparent 70%), #030407; }
.bs-art::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
background: linear-gradient(90deg, transparent 94%, #030407 100%), linear-gradient(180deg, transparent 74%, rgba(3, 4, 7, .96) 98%); }
.bs-screen { width: 600px; zoom: .8; pointer-events: none; user-select: none; }
.bs-screen .bp-head { margin-bottom: 16px; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.bs-screen .bp-head h1 { margin: 0; font-size: 30px; }
.bs-screen .bp-head p { margin: 4px 0 0; color: var(--muted); font-size: 15px; }
.bs-screen .bp-card { margin: 0 0 14px; }
.bs-screen .bp-calcard { padding: 14px; }
.bs-screen .calendar.bp-cal { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bs-screen .bp-cal .cal-day { min-height: 168px; }
.bs-screen .bp-thumb { background: linear-gradient(135deg, #3b6a8f, #0b1824 70%); }
.bs-screen .bp-thumb.video { background: linear-gradient(135deg, #8a4220, #1a0c06 70%); }
.bs-screen .bp-tabs span { padding: 10px 14px; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; font-weight: 500; font-size: 14px; }
.bs-screen .bp-tabs span.on { color: var(--text); border-image: linear-gradient(90deg, #e6f6ff, #7cc8ff) 1; }
.bs-screen .bp-cover { flex: none; width: 96px; aspect-ratio: 9 / 16; border-radius: 10px; display: grid; place-items: center; color: rgba(255, 255, 255, .9); font-size: 18px;
background: radial-gradient(70% 50% at 50% 35%, rgba(124, 200, 255, .45), transparent 70%), linear-gradient(180deg, #13283a, #05080c); }
.bs-screen .bp-todo-h { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 16px; }
.bs-screen .bp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* powiadomienie jak w aplikacji (zamiast białego dymka) */
.bs-note { position: absolute; right: 18px; bottom: 18px; z-index: 3; display: flex; align-items: center; gap: 12px; max-width: min(86%, 380px);
padding: 12px 16px 12px 12px; border-radius: 16px; background: rgba(10, 13, 19, .94); border: 1px solid rgba(124, 200, 255, .38);
box-shadow: 0 18px 50px rgba(0, 0, 0, .6), 0 0 26px rgba(76, 194, 255, .14);
opacity: 0; transform: translateY(14px); transition: opacity .5s ease .45s, transform .6s cubic-bezier(.2, .8, .2, 1) .45s; }
.bs-slide.on .bs-note { opacity: 1; transform: none; }
.bs-note-ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: #9fe0ff; background: rgba(124, 200, 255, .14); }
.bs-note-ic svg { width: 18px; height: 18px; }
.bs-note-tx { display: grid; gap: 2px; min-width: 0; }
.bs-note-tx b { font-weight: 600; font-size: 14px; color: #f4f7fc; }
.bs-note-tx small { font-size: 12.5px; color: #a7b1c2; }
.tone-fire .bs-note { border-color: rgba(255, 140, 70, .42); box-shadow: 0 18px 50px rgba(0, 0, 0, .6), 0 0 26px rgba(255, 107, 44, .14); }
.tone-fire .bs-note-ic { color: #ffb27a; background: rgba(255, 120, 60, .14); }
/* ---- oś z gwiazdkami ---- */
.bs-rail { position: relative; display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); height: 112px; --prog: 0; --gx: 10%; }
.bs-rail::before { content: ""; position: absolute; left: 0; bottom: 0; width: 46%; height: 90px; transform: translateX(calc(var(--gx) - 50%));
background: radial-gradient(50% 100% at 50% 100%, rgba(76, 194, 255, .2), transparent 75%); transition: transform .6s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.bs-line { position: absolute; left: calc(50% / var(--n)); right: calc(50% / var(--n)); bottom: 32px; height: 1px; background: rgba(255, 255, 255, .14); }
.bs-line i { position: absolute; inset: 0; transform: scaleX(var(--prog)); transform-origin: 0 50%; will-change: transform;
background: linear-gradient(90deg, rgba(124, 200, 255, .25), #9fe0ff); box-shadow: 0 0 10px rgba(124, 200, 255, .7); }
.bs-stop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px; padding: 0 0 15px;
background: none; border: 0; color: #7f8aa0; font: inherit; cursor: pointer; }
.bs-lab { font-size: 15px; white-space: nowrap; transition: transform .45s cubic-bezier(.2, .8, .2, 1), color .3s, font-size .3s; }
.bs-stop:hover .bs-lab { color: #cfd8e6; }
.bs-stop.on .bs-lab { color: #fff; font-weight: 600; font-size: 19px; transform: translateY(-12px); }
.bs-star { position: relative; z-index: 1; width: 26px; height: 34px; overflow: visible; fill: #0b0f16; stroke: rgba(255, 255, 255, .5); stroke-width: 1.4;
transform: scale(.6); transition: transform .45s cubic-bezier(.2, .8, .2, 1), fill .3s, stroke .3s, filter .3s; }
.bs-stop:hover .bs-star { stroke: #9fe0ff; }
.bs-stop.on .bs-star { transform: scale(1.3); fill: #e9f7ff; stroke: transparent;
filter: drop-shadow(0 0 6px rgba(159, 224, 255, .95)) drop-shadow(0 0 16px rgba(76, 194, 255, .65)); }
@media (prefers-reduced-motion: reduce) { .bs-copy, .bs-art, .bs-note, .bs-rail::before { transition: none; } }
@media (max-height: 760px) and (min-width: 861px) { .bs-art { min-height: 400px; height: 400px; } .bs-copy p { font-size: 16.5px; } .bs-feats-h { margin-top: 22px; } }
@media (max-width: 860px) {
.bs { height: auto; }
.bs-pin { position: static; height: auto; padding: 24px 0 0; }
.bs-stage { display: grid; gap: 72px; padding-top: 0; }
.bs-slide, .bs-final { grid-area: auto; grid-template-columns: 1fr; gap: 28px; pointer-events: auto; }
.bs-final .bs-art { order: 0; }
.bs-copy, .bs-art, .bs-final .bs-art, .bs-note { opacity: 1; transform: none; }
.bs-art { margin-top: 0; min-height: 0; height: 380px; padding: 18px 0 0 18px; }
.bs-screen { zoom: .6; }
.bs-screen .an-bar { grid-template-columns: 110px minmax(0, 1fr) 210px; } .bs-screen .an-bar-val { grid-column: auto; text-align: right; } /* w grafice zawsze układ z komputera */
.bs-note { right: 12px; bottom: 12px; left: 12px; max-width: none; }
.bs-feats li { font-size: 14px; padding: 9px 10px; gap: 10px; }
.bs-rail { display: none; }
}
/* tekst tylko dla czytników ekranu (np. ukryty nagłówek strony Korzyści) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* strona główna: „Twojej muzyki” jak „PLAN PROMO” w Jak to działa – statyczny neon LED (białe wnętrze, lodowa poświata) zamiast gradientu */
.hero h1 em { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #f4fbff; filter: none;
text-shadow: 0 0 .04em #fff, 0 0 .12em #9fe0ff, 0 0 .28em #4cc2ff, 0 0 .6em rgba(76, 194, 255, .7), 0 0 1.2em rgba(40, 140, 255, .45); }
/* pierwsze tytuły podstron na tej samej wysokości i w tym samym rozmiarze co „Gotowy plan promocji…” na stronie głównej (243 px od góry, 54 px) */
.how-hero { margin-top: var(--how-top, 101px); }
.faq-hero { margin-top: 0; } /* „Najczęstsze pytania” na wysokości tytułu w Cenniku */
.faq-hero h1 { font-size: clamp(32px, 4.2vw, 54px); line-height: 1.06; letter-spacing: -.025em; }
@media (max-width: 860px) { .how-hero, .faq-hero { margin-top: 0; } }
.bs-copy h2 em { margin-top: 12px; } /* odstęp między liniami jak w nagłówku Jak to działa */
/* Korzyści: grafiki pokazują mniej panelu – jeden główny element, większy, szczegóły rozmyte */
.bs-art { display: flex; align-items: center; padding: 0 0 78px 30px; }
.bs-screen { width: 500px; zoom: .95; }
.bs-screen .bp-blur { filter: blur(3px); opacity: .75; }
@media (max-width: 860px) { .bs-screen { zoom: .62; } }
/* strona główna: bez napisu „Plan promocji singla” nad tytułem – tytuł zostaje na 243 px (jak na podstronach) */
.hero h1 { margin-top: 54px; }
/* strona główna: odstęp między liniami tytułu i do opisu taki sam jak w Jak to działa i Korzyściach */
.hero h1 em { margin-top: calc(-.06em + 12px); }
.hero h1 { margin-bottom: 24px; }
/* strona główna: „Zacznij teraz” w pierwszej sekcji – po konturze jeździ świetlny „wąż”: jasny odcinek pojawia się i znika, okrążając przycisk */
@property --snake { syntax: ""; inherits: false; initial-value: 0deg; }
.hero .btn.fire { position: relative; isolation: isolate; }
.hero .btn.fire::before { content: ""; position: absolute; inset: -1.5px; border-radius: inherit; padding: 1.5px; pointer-events: none;
background: conic-gradient(from var(--snake), transparent 0deg, transparent 200deg, rgba(255, 190, 140, .35) 260deg, #fff2e6 330deg, transparent 360deg);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
filter: drop-shadow(0 0 4px rgba(255, 170, 110, .9)); animation: btn-snake 3.2s linear infinite; }
@keyframes btn-snake { to { --snake: 360deg; } }
@media (prefers-reduced-motion: reduce) { .hero .btn.fire::before { animation: none; opacity: 0; } }
/* strona główna, pierwsza sekcja: „Zacznij teraz” znów jak słońce (wersja z 1bcbefe) – biało-żółty żar w środku,
żółto-pomarańczowa krawędź, czerwono-pomarańczowa korona, która lekko „oddycha” */
.hero .btn.fire { color: #000; font-weight: 600; border: 1.5px solid #ffc24a;
background-image: radial-gradient(120% 170% at 50% 50%, #ffffff 0%, #fffdf6 55%, #ffeeb8 80%, #ffbd55 100%); background-origin: border-box;
box-shadow: inset 0 0 4px rgba(255, 150, 30, .9), inset 0 0 14px rgba(255, 120, 20, .45),
0 0 4px #ffcf6a, 0 0 14px rgba(255, 150, 40, .9), 0 0 34px rgba(255, 95, 20, .6), 0 0 70px rgba(200, 45, 0, .35);
animation: hero-sun-corona 3.2s ease-in-out infinite; }
.hero .btn.fire:hover { color: #000; border-color: #ffd36b;
background-image: radial-gradient(120% 170% at 50% 50%, #ffffff 0%, #ffffff 58%, #fff2c8 82%, #ffc463 100%);
box-shadow: inset 0 0 4px rgba(255, 150, 30, .9), inset 0 0 16px rgba(255, 120, 20, .5),
0 0 5px #ffd77a, 0 0 18px rgba(255, 150, 40, 1), 0 0 44px rgba(255, 95, 20, .75), 0 0 90px rgba(200, 45, 0, .45); animation: none; }
@keyframes hero-sun-corona { 50% { box-shadow: inset 0 0 4px rgba(255, 150, 30, .9), inset 0 0 14px rgba(255, 120, 20, .45),
0 0 5px #ffd77a, 0 0 18px rgba(255, 150, 40, 1), 0 0 42px rgba(255, 95, 20, .7), 0 0 84px rgba(200, 45, 0, .42); } }
@media (prefers-reduced-motion: reduce) { .hero .btn.fire { animation: none; } }
/* Kontakt: teksty z lewej w węższym kontenerze (krótsze linie) */
.contact-intro h1 { max-width: 390px; } /* „o” przechodzi do drugiej linii */
.contact-intro p { max-width: 380px; }
/* strona główna, pierwsza sekcja: „Zacznij teraz” jako szkło – przezroczysty środek z lekkim rozmyciem,
słoneczna krawędź i korona bez zmian; biały napis (czarny zniknąłby na ciemnym tle) */
.hero .btn.fire, .hero .btn.fire:hover { color: #fff;
background-image: radial-gradient(120% 170% at 50% 50%, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .08) 55%, rgba(255, 220, 160, .18) 82%, rgba(255, 170, 70, .35) 100%);
-webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3); }
.hero .btn.fire:hover { background-image: radial-gradient(120% 170% at 50% 50%, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .14) 55%, rgba(255, 225, 170, .24) 82%, rgba(255, 180, 80, .42) 100%); }
/* napis „Zacznij teraz” taki sam jak w „Jak to działa?” obok (cienka czcionka 400, kolor tekstu) */
.hero .btn.fire, .hero .btn.fire:hover { font-weight: 400; color: var(--text); }
/* „Zacznij teraz”: ramka i blask w pomarańczu strony (--orange #ff6b2c) zamiast żółto-złotego */
.hero .btn.fire { border-color: var(--orange);
background-image: radial-gradient(120% 170% at 50% 50%, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .08) 55%, rgba(255, 139, 82, .16) 82%, rgba(255, 107, 44, .32) 100%);
box-shadow: inset 0 0 4px rgba(255, 107, 44, .9), inset 0 0 14px rgba(255, 107, 44, .4),
0 0 4px var(--orange), 0 0 14px rgba(255, 107, 44, .85), 0 0 34px rgba(255, 90, 30, .55), 0 0 70px rgba(200, 45, 0, .35);
animation-name: hero-orange-corona; }
.hero .btn.fire:hover { border-color: var(--orange-2);
background-image: radial-gradient(120% 170% at 50% 50%, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .14) 55%, rgba(255, 139, 82, .22) 82%, rgba(255, 107, 44, .4) 100%);
box-shadow: inset 0 0 4px rgba(255, 107, 44, .9), inset 0 0 16px rgba(255, 107, 44, .45),
0 0 5px var(--orange-2), 0 0 18px rgba(255, 107, 44, 1), 0 0 44px rgba(255, 90, 30, .7), 0 0 90px rgba(200, 45, 0, .45); }
@keyframes hero-orange-corona { 50% { box-shadow: inset 0 0 4px rgba(255, 107, 44, .9), inset 0 0 14px rgba(255, 107, 44, .4),
0 0 5px var(--orange-2), 0 0 18px rgba(255, 107, 44, 1), 0 0 42px rgba(255, 90, 30, .65), 0 0 84px rgba(200, 45, 0, .42); } }
/* „Zacznij teraz”: mniejsza, krótsza poświata (mniej „sprayu” wokół) */
.hero .btn.fire { box-shadow: inset 0 0 4px rgba(255, 107, 44, .9), inset 0 0 12px rgba(255, 107, 44, .35),
0 0 3px var(--orange), 0 0 10px rgba(255, 107, 44, .7), 0 0 22px rgba(255, 90, 30, .38), 0 0 44px rgba(200, 45, 0, .2);
animation-name: hero-orange-corona-sm; }
.hero .btn.fire:hover { box-shadow: inset 0 0 4px rgba(255, 107, 44, .9), inset 0 0 14px rgba(255, 107, 44, .4),
0 0 4px var(--orange-2), 0 0 13px rgba(255, 107, 44, .85), 0 0 30px rgba(255, 90, 30, .5), 0 0 60px rgba(200, 45, 0, .28); }
@keyframes hero-orange-corona-sm { 50% { box-shadow: inset 0 0 4px rgba(255, 107, 44, .9), inset 0 0 12px rgba(255, 107, 44, .35),
0 0 4px var(--orange-2), 0 0 13px rgba(255, 107, 44, .82), 0 0 28px rgba(255, 90, 30, .46), 0 0 54px rgba(200, 45, 0, .25); } }
/* Korzyści: „Zacznij teraz” na ostatnim slajdzie z tym samym efektem co na karcie „Kampania…” w Jak to działa
(pulsująca pomarańczowa poświata + rozchodzący się i znikający pierścień) */
.bs-copy .btn.fire { position: relative; animation: fire-glow 2.8s ease-in-out infinite; }
.bs-copy .btn.fire::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none;
border: 1.5px solid rgba(255, 140, 70, .7); box-shadow: 0 0 18px rgba(255, 107, 44, .5);
animation: fire-ring 2.8s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .bs-copy .btn.fire, .bs-copy .btn.fire::after { animation: none; } .bs-copy .btn.fire::after { opacity: 0; } }
/* Cennik: „Wybieram PRO” z tym samym efektem co „Zacznij teraz” w Jak to działa i Korzyściach, ale w lodowym błękicie
(pulsująca niebieska poświata + rozchodzący się i znikający pierścień) */
.price-card.featured .btn.primary { position: relative; animation: ice-glow 2.8s ease-in-out infinite; }
.price-card.featured .btn.primary::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none;
border: 1.5px solid rgba(124, 210, 255, .75); box-shadow: 0 0 18px rgba(76, 194, 255, .5);
animation: fire-ring 2.8s ease-out infinite; }
@keyframes ice-glow {
0%, 100% { box-shadow: 0 0 18px rgba(76, 194, 255, .18); }
40% { box-shadow: 0 0 34px rgba(76, 194, 255, .55), 0 0 80px rgba(40, 140, 255, .3); }
}
@media (prefers-reduced-motion: reduce) { .price-card.featured .btn.primary, .price-card.featured .btn.primary::after { animation: none; } .price-card.featured .btn.primary::after { opacity: 0; } }
/* „Zacznij teraz” (strona główna): lekka pomarańczowa łuna w środku szkła, przesunięta w lewo-górę */
.hero .btn.fire { background-image:
radial-gradient(55% 90% at 28% 30%, rgba(255, 107, 44, .30), rgba(255, 107, 44, .10) 50%, transparent 75%),
radial-gradient(120% 170% at 50% 50%, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .08) 55%, rgba(255, 139, 82, .16) 82%, rgba(255, 107, 44, .32) 100%); }
.hero .btn.fire:hover { background-image:
radial-gradient(60% 95% at 28% 30%, rgba(255, 107, 44, .38), rgba(255, 107, 44, .13) 50%, transparent 78%),
radial-gradient(120% 170% at 50% 50%, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .14) 55%, rgba(255, 139, 82, .22) 82%, rgba(255, 107, 44, .4) 100%); }
/* „Zacznij teraz” (strona główna): ramka jak na innych stronach – gradient od jasnej brzoskwini/żółtawej (lewa góra)
przez pomarańcz do wygaszonego pomarańczu; rysowana w ::after z maską, żeby nie barwić przezroczystego środka */
.hero .btn.fire, .hero .btn.fire:hover { border-color: transparent; }
.hero .btn.fire::after { content: ""; position: absolute; inset: -1.5px; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: -1;
background: linear-gradient(165deg, #ffc08f 0%, #ff6b2c 40%, rgba(255, 107, 44, .55) 75%, rgba(255, 107, 44, .3) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.hero .btn.fire:hover::after { background: linear-gradient(165deg, #ffd6b3 0%, #ff7a3a 40%, rgba(255, 107, 44, .75) 75%, rgba(255, 107, 44, .45) 100%); }
/* Dobre praktyki: podpunkty podzadania (np. platformy w „Ustaw profile na platformach”) */
.pr-subs { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.pr-sub .pr-check { width: 17px; height: 17px; }
.pr-sub .pr-check[aria-pressed="true"]::after { left: 5px; top: 2px; width: 4px; height: 8px; }
.pr-sub strong { font-size: 14px; }
.pr-extra { display: block; margin-top: 6px; padding: 8px 10px; border-left: 2px solid var(--line-2); border-radius: 0 8px 8px 0;
background: rgba(255, 255, 255, .03); color: var(--muted); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Zdjęcie artysty: kółko w lewym dolnym rogu panelu obok nazwy + pole w Ustawieniach → Konto */
.avatar { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
background: var(--surface-2); border: 1px solid var(--line-2); color: var(--text); font-weight: 600; font-size: 14px; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.lg { width: 72px; height: 72px; font-size: 26px; }
.side-foot .side-avatar { margin-left: 6px; }
.side-foot .side-avatar:hover, .side-foot .side-avatar:focus-visible { border-color: var(--ice); color: var(--text); }
.side-foot .side-avatar + .side-user { padding-left: 6px; }
.avatar-row { display: flex; align-items: center; gap: 16px; }
.avatar-row > div { display: grid; gap: 6px; justify-items: start; }
.avatar-row .btn { cursor: pointer; }
.check-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; }
/* Dobre praktyki: karta z pseudonimem, zdjęciem, bio i linkiem nad platformami do odhaczenia */
.pr-card { display: flex; gap: 16px; align-items: flex-start; margin-top: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, .02); }
.pr-card dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 14px; font-size: 13.5px; min-width: 0; flex: 1; }
.pr-card dt { color: var(--muted); }
.pr-card dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.pr-card dd.pr-extra { margin: 0; }
@media (max-width: 600px) { .pr-card { flex-direction: column; } .pr-card dl { grid-template-columns: 1fr; gap: 2px; } .pr-card dd { margin-bottom: 8px; } }
.pr-step.pr-group > div { flex: 1; min-width: 0; }
.pr-step.pr-group.done > div > strong { color: var(--muted); }
.pr-step.pr-group .pr-sub.done strong { color: var(--muted); }
.pr-card dt small { display: block; font-size: 11.5px; color: var(--faint); }
/* Dobre praktyki: zdjęcie w karcie profilu z przyciskiem pobierania obok */
.pr-avatar { flex: none; display: flex; align-items: flex-end; gap: 6px; }
.pr-dl { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--muted); background: var(--surface-2); }
.pr-dl:hover, .pr-dl:focus-visible { color: var(--text); border-color: var(--ice); }
/* odhaczone praktyki i podpunkty – przekreślony tekst */
.pr-item.done .pr-title, .pr-step.done > div > strong, .pr-step.done > div > span:not(.pr-extra) { text-decoration: line-through; text-decoration-color: currentColor; text-decoration-thickness: 1px; }
/* Dobre praktyki: bio do skopiowania (przycisk w rogu, tekst nie wchodzi pod przycisk) */
.pr-card dd.pr-copyable { position: relative; padding-right: 44px; }
.pr-card dd.pr-copyable .cap-copy { top: 6px; right: 6px; }
.pr-card dd.pr-copyable a { overflow-wrap: anywhere; }
.bio-gen { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Profil artysty: dane, z których powstaje bio – zwijane pod biografią */
details.artist-data { margin: 8px 0 20px; border: 1px solid var(--line); border-radius: 14px; padding: 0 16px; }
details.artist-data summary { list-style: none; cursor: pointer; padding: 14px 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-weight: 500; }
details.artist-data summary::-webkit-details-marker { display: none; }
details.artist-data summary::after { content: "+"; margin-left: auto; color: var(--ice); font-size: 20px; line-height: 1; }
details.artist-data[open] summary::after { content: "–"; }
details.artist-data small { font-weight: 400; }
.artist-data-body { padding-bottom: 6px; }
/* Profil artysty: generowanie bio zablokowane – szary przycisk, po najechaniu dymek z informacją o limicie */
.bio-gen-wrap { position: relative; display: inline-block; }
.bio-gen-wrap .btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.bio-gen-wrap[data-tip]::after { content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 8px); width: max-content; max-width: min(320px, 80vw);
padding: 7px 10px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--text); font-size: 12.5px; line-height: 1.35;
opacity: 0; visibility: hidden; transition: opacity .12s; pointer-events: none; z-index: 5; }
.bio-gen-wrap[data-tip]:hover::after, .bio-gen-wrap[data-tip]:focus-visible::after { opacity: 1; visibility: visible; }
.bio-gen-wrap[data-tip] { cursor: not-allowed; }
.profile-actions { margin-top: 8px; }
/* Profil artysty: kadrowanie zdjęcia do kwadratu */
dialog.crop-dialog { width: min(440px, calc(100vw - 24px)); }
.crop-stage { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 14px; background: #000; cursor: grab; touch-action: none; user-select: none; }
.crop-stage:active { cursor: grabbing; }
.crop-stage img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
.crop-stage::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px rgba(0, 0, 0, .45); outline: 1px solid rgba(255, 255, 255, .5); pointer-events: none; }
.crop-zoom { display: flex; align-items: center; gap: 12px; margin: 14px 0 6px; font-size: 13px; color: var(--muted); }
.crop-zoom input { flex: 1; accent-color: var(--ice); }
/* =====================================================================
Strona www: wejście treści jak w n8n.io – elementy wsuwają się od dołu, kolejno (app.js: .rv-item → .rv-in).
„translate” zamiast „transform”, żeby nie gryzło się z własnymi transformacjami elementów. */
html.rv:not(.rv-ready) .pub-main, html.rv:not(.rv-ready) .pub-footer { opacity: 0; }
.rv-item { opacity: 0; translate: 0 36px; }
.rv-item.rv-in { opacity: 1; translate: 0 0;
transition: opacity .8s cubic-bezier(.2, .7, .2, 1), translate 1s cubic-bezier(.16, .84, .3, 1);
transition-delay: var(--rv-d, 0s); }
html.rv-off .rv-item { opacity: 1; translate: none; }
@media (prefers-reduced-motion: reduce) { .rv-item { opacity: 1; translate: none; } }
/* Dobre praktyki: zamiast częstotliwości z prawej „Rozwiń” / „Zwiń” z trójkątem */
.pr-toggle { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.pr-toggle i { width: 0; height: 0; border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; border-top: 6px solid currentColor; transition: transform .2s ease; }
.pr-item[open] .pr-toggle i { transform: rotate(180deg); }
.pr-close, .pr-item[open] .pr-open { display: none; }
.pr-item[open] .pr-close { display: inline; }
.pr-item summary:hover .pr-toggle { color: var(--text); }
/* Dobre praktyki: samouczek (Treści, Społeczność i zasięgi) – jedna lekcja naraz */
.pr-guide-head h2 { margin: 0; }
.pr-guide-badge { font-size: 12.5px; color: var(--muted); border: 1px solid var(--line-2); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.pr-guide.done .pr-guide-badge { color: var(--ice); border-color: rgba(76, 194, 255, .4); }
.pr-lesson { padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, .02); animation: pr-lesson-in .35s ease; }
.pr-lesson[hidden] { display: none; }
.pr-lesson-num { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ice); margin-bottom: 6px; }
.pr-lesson h3 { margin: 0 0 8px; font-size: 17px; font-weight: 500; }
.pr-lesson p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.65; }
.pr-lesson .pr-tip { margin-top: 12px !important; }
@keyframes pr-lesson-in { from { opacity: 0; translate: 12px 0; } }
.pr-guide-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.pr-dots { display: flex; gap: 6px; }
.pr-dots button { width: 22px; height: 4px; padding: 0; border: 0; border-radius: 2px; background: var(--line-2); cursor: pointer; }
.pr-dots button.on { background: var(--ice); }
@media (prefers-reduced-motion: reduce) { .pr-lesson { animation: none; } }
/* Dobre praktyki: „Do zrobienia” przy sekcjach z odhaczaniem, „Wkrótce” – przygaszona zapowiedź */
.pr-guide-badge.pr-todo { color: var(--orange-2); border-color: rgba(255, 107, 44, .4); }
.pr-soon { opacity: .6; }
.pr-soon .pr-lead { margin-bottom: 0; }
/* Trendy TikTok: układ „masonry” bez dziur pod krótszymi kartami – wiersze po 4 px, każda karta zajmuje tyle wierszy, ile ma wysokości (app.js);
kolejność zostaje od lewej do prawej */
.trend-grid.masonry { grid-auto-rows: 4px; row-gap: 0; align-items: start; }
.trend-grid.masonry > * { margin-bottom: 16px; }
/* Ukraiński: Outfit nie ma cyrylicy – Onest (geometryczny, z cyrylicą) dla całej strony, łacińskie nazwy też w Onest, żeby nie mieszać krojów */
html[lang="uk"] { --font: "Onest", system-ui, sans-serif; --display: "Onest", system-ui, sans-serif; --display-x: "Onest", system-ui, sans-serif; }
/* Cennik: przełączniki rozliczenia i waluty obok siebie */
.pricing-toggles { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 auto 22px; }
.pricing-toggles .billing-toggle { margin: 0; }
/* O nas: karty osób, rolki 9:16 */
.about-neon { color: #eaf8ff; text-shadow: 0 0 .04em #fff, 0 0 .14em #9fe0ff, 0 0 .34em rgba(76, 194, 255, .7); }
.team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.team-card { padding: 28px; border-radius: 24px; }
.team-card p { color: #c3cad8; line-height: 1.7; margin: 0 0 12px; }
.team-head { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.team-head h2 { margin: 0; font-size: 24px; font-weight: 500; }
.team-photo { flex: none; width: 84px; height: 84px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
background: var(--surface-2); border: 1px solid var(--line-2); font-size: 28px; font-weight: 500; color: var(--text); }
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-nick { color: var(--ice); font-size: 14px; }
.team-head .team-role { margin: 4px 0 0; color: var(--orange-2); font-size: 14px; }
.tone-ice .team-role { color: var(--ice); }
.about-reels-head { margin-top: 72px; text-align: center; }
.about-reels-head .eyebrow { justify-content: center; }
.reels-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 260px)); justify-content: center; gap: 18px; }
.reel-slot { margin: 0; position: relative; aspect-ratio: 9 / 16; border-radius: 20px; overflow: hidden; border: 1px solid var(--line-2); background: #07090d; }
.reel-slot video { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel-slot figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px; font-size: 13.5px; color: #fff;
background: linear-gradient(transparent, rgba(0, 0, 0, .75)); pointer-events: none; }
.reel-soon { display: grid; place-items: center; background: radial-gradient(80% 60% at 50% 35%, rgba(76, 194, 255, .12), transparent 70%), #07090d; }
.reel-soon figcaption { background: none; text-align: center; color: var(--muted); }
.reel-play { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); color: var(--muted); font-size: 18px; padding-left: 4px; }
.about-cta { margin-top: 72px; }
@media (max-width: 860px) { .team-grid { grid-template-columns: 1fr; } .reels-row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
/* przełącznik języka (PL / EN / UA) nie może się ściskać w wąskim pasku menu na telefonie */
.lang-switch { flex: none; }
@media (max-width: 420px) { .lang-switch a { padding: 5px 6px; } .pub-nav .container { gap: 6px; } }
.pub-nav .logo { flex: none; }
@media (max-width: 420px) { .pub-nav .logo { margin-right: 0; } .pub-nav .logo img { height: 24px; width: auto; } .pub-nav .btn.sm { padding-left: 9px; padding-right: 9px; } }
/* O nas: osoby po kolei (Sebastian pierwszy), duże zdjęcie obok tekstu, co druga karta odwrócona */
.team-grid { grid-template-columns: 1fr; gap: 28px; }
.team-card { display: grid; grid-template-columns: minmax(240px, 380px) 1fr; gap: clamp(24px, 4vw, 48px); align-items: center; padding: clamp(20px, 3vw, 32px); }
.team-card.rev { grid-template-columns: 1fr minmax(240px, 380px); }
.team-card.rev .team-photo-lg { order: 2; }
.team-photo-lg { position: relative; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; border: 1px solid var(--line-2);
display: grid; place-items: center; align-content: center; gap: 10px;
background: radial-gradient(70% 55% at 50% 35%, rgba(76, 194, 255, .14), transparent 70%), #07090d; }
.tone-fire .team-photo-lg { background: radial-gradient(70% 55% at 50% 35%, rgba(255, 107, 44, .16), transparent 70%), #07090d; }
.team-photo-lg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.team-initials { font-size: clamp(56px, 7vw, 88px); font-weight: 300; letter-spacing: -.02em; color: rgba(255, 255, 255, .85); }
.team-photo-lg small { color: var(--muted); font-size: 13px; }
.team-copy h2 { margin: 0; font-size: clamp(26px, 3vw, 34px); font-weight: 500; }
.team-copy .team-role { margin: 6px 0 18px; color: var(--orange-2); font-size: 15px; }
.tone-ice .team-copy .team-role { color: var(--ice); }
@media (max-width: 760px) { .team-card, .team-card.rev { grid-template-columns: 1fr; } .team-card.rev .team-photo-lg { order: 0; } .team-photo-lg { max-height: 420px; } }
.team-card.no-photo, .team-card.rev.no-photo { grid-template-columns: 1fr; } /* osoba bez zdjęcia – sam tekst */
.team-grid + .about-cta { margin-top: 28px; } /* bez rolek CTA zaraz pod kartami */
/* Panel: funkcja spoza planu – link w menu z kłódką, strona widoczna jako rozmyty podgląd + ramka „Dostępne w planie … / Kup” */
.nav-link.locked-link .lock { margin-left: auto; display: inline-flex; color: var(--muted); }
.nav-link.locked-link .lock svg { width: 14px; height: 14px; }
.locked-preview { position: relative; min-height: 70vh; }
.locked-blur { filter: blur(7px) saturate(.85); opacity: .75; pointer-events: none; user-select: none; max-height: 140vh; overflow: hidden;
-webkit-mask: linear-gradient(#000 60%, transparent); mask: linear-gradient(#000 60%, transparent); }
.locked-cta { position: absolute; left: 50%; top: min(180px, 20vh); translate: -50% 0; width: min(440px, calc(100% - 24px)); text-align: center;
display: grid; justify-items: center; gap: 6px; padding: 28px 24px; border-radius: 24px; z-index: 2;
background: rgba(10, 13, 19, .88); backdrop-filter: blur(6px); border: 1px solid var(--line-2); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }
.locked-cta h3 { margin: 6px 0 0; font-size: 20px; font-weight: 500; }
.locked-cta p { margin: 0 0 12px; }
.locked-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--ice); }
.locked-ic svg { width: 20px; height: 20px; }
.cm-avatar { overflow: hidden; }
.cm-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Społeczność: zdjęcie w poście i podgląd przed publikacją */
.cm-photo { display: block; width: 100%; max-height: 560px; object-fit: contain; border-radius: 14px; margin: 4px 0 10px; background: #05070a; border: 1px solid var(--line); }
.cm-photo-preview { position: relative; width: fit-content; margin: 10px 0 0; }
.cm-photo-preview img { display: block; max-height: 180px; max-width: 100%; border-radius: 12px; border: 1px solid var(--line-2); }
.cm-photo-x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .65); color: #fff; cursor: pointer; font-size: 16px; line-height: 1; }
.cm-compose-foot { justify-content: space-between; }
/* Społeczność: „Dodaj zdjęcie” z lewej jako lekki przycisk z ikoną, „Opublikuj” z prawej */
.cm-compose-foot .btn { margin-left: 0; }
.cm-photo-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 12px; border-radius: 999px; cursor: pointer;
color: var(--muted); font-size: 14px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); transition: color .15s, border-color .15s, background .15s; }
.cm-photo-btn svg { width: 18px; height: 18px; color: var(--ice); }
.cm-photo-btn:hover, .cm-photo-btn:focus-within { color: var(--text); border-color: rgba(76, 194, 255, .5); background: rgba(76, 194, 255, .07); }
/* Funkcje z wyższego planu w kartach (Pitch, Notka, wskaźniki): rozmyty przykład + „Kup” */
.locked-teaser { position: relative; min-height: 120px; }
.locked-teaser-blur { filter: blur(5px); opacity: .6; pointer-events: none; user-select: none; color: var(--muted); line-height: 1.6; }
.locked-teaser-blur p { margin: 0 0 8px; }
.locked-teaser-cta { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; font-size: 14px; color: var(--text); }
.locked-num { filter: blur(6px); opacity: .7; user-select: none; }
/* Kolejka planów: zatwierdzone / zakończone na dole, wyszarzone */
tr.q-archived td { opacity: .45; }
tr.q-archived:hover td { opacity: .75; }
/* Plan singla (zespół): lewa kolumna (Dane wejściowe + Analiza stylu) tej samej wysokości co prawa – analiza stylu wypełnia resztę */
.single-top { align-items: stretch; }
.single-top > .card { align-self: start; }
.single-side { display: flex; flex-direction: column; }
.single-side .style-ai { flex: 1; display: flex; flex-direction: column; }
.single-side .style-ai textarea { flex: 1; min-height: 96px; resize: none; }
@media (max-width: 900px) { .single-side .style-ai textarea { flex: none; } }
.single-top > .stack:not(.single-side) { align-self: start; } /* prawa kolumna (Informacje dodatkowe) ma swoją wysokość, lewa się do niej dociąga */
/* Plan singla (zespół): zwijany „Profil stylu artysty” w kroku 2 */
.style-profile { margin: 4px 0 14px; border-bottom: 1px solid var(--line); }
.style-profile summary h4 { margin: 0; flex: 1; }
.style-profile[open] { padding-bottom: 4px; }
.style-ai-box { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.style-ai-box h4 { margin: 0 0 4px; }
/* zwinięty „Profil stylu artysty”: podgląd wartości (Ton, Humor, …) pod nagłówkiem; po rozwinięciu ukryty */
.style-preview { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: -4px 0 16px; font-size: 13.5px; }
.style-preview dt { color: var(--muted); }
.style-preview dd { margin: 0; overflow-wrap: anywhere; }
.style-profile[open] + .style-preview { display: none; }
.style-posts summary { cursor: pointer; font-size: 13px; margin: 2px 0 6px; }
.style-posts textarea { margin-top: 6px; }
/* Checkboxy w formularzach (.check): większe, w środku szare i półprzezroczyste, po zaznaczeniu lodowe z ✓ */
.check input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px; cursor: pointer;
border: 1.5px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .08); display: grid; place-items: center; transition: background .15s, border-color .15s; }
.check input[type="checkbox"]::after { content: ""; width: 5px; height: 10px; margin-top: -2px; border: solid #071019; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; }
.check input[type="checkbox"]:checked { background: var(--ice-2); border-color: var(--ice-2); }
.check input[type="checkbox"]:checked::after { opacity: 1; }
.check input[type="checkbox"]:hover { border-color: rgba(76, 194, 255, .7); }
.check input[type="checkbox"]:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
/* „Singiel jest z featem”: osobny, wyraźny kafelek z opisem */
.check-card { align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); }
.check-card:hover { border-color: rgba(76, 194, 255, .45); }
.check-card:has(input:checked) { border-color: rgba(76, 194, 255, .6); background: rgba(76, 194, 255, .07); }
.check-card strong { display: block; font-size: 15px; font-weight: 500; }
.check-card small { display: block; color: var(--muted); font-weight: 400; font-size: 13px; margin-top: 2px; }
/* „Kiedy rozpocząć promocję?”: wyraźne kafelki z tytułem i opisem; radio w środku szare półprzezroczyste, zaznaczone lodowe */
.radio-cards input[type="radio"] { appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; border-radius: 50%; margin: 0; cursor: pointer;
border: 1.5px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .08); display: grid; place-items: center; transition: border-color .15s, background .15s; }
.radio-cards input[type="radio"]::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #071019; opacity: 0; }
.radio-cards input[type="radio"]:checked { background: var(--ice-2); border-color: var(--ice-2); }
.radio-cards input[type="radio"]:checked::after { opacity: 1; }
.radio-cards input[type="radio"]:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
.start-cards label { align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .03); }
.start-cards label:hover { border-color: rgba(76, 194, 255, .45); }
.start-cards label:has(input:checked) { background: rgba(76, 194, 255, .07); }
.start-cards strong { display: block; font-size: 15px; font-weight: 500; }
.start-cards small { display: block; color: var(--muted); font-weight: 400; font-size: 13px; margin-top: 2px; line-height: 1.4; }
/* Twórcy utworu (Tekst, Wokal / feat, Produkcja, Mix, Master, Wideo): 3 w rzędzie, na telefonie 1 */
.form-grid.credits-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 700px) { .form-grid.credits-grid { grid-template-columns: 1fr; } }
/* Plan singla (zespół): pod formularzem danych – reszta informacji (YouTube, kolejny singiel, artysta) */
.single-extra { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
/* Formularz „Stwórz plan promo”: takie same karty jak w reszcie panelu (zamiast ramek fieldset), kroki 1–4 */
.single-form { max-width: 880px; display: grid; gap: 16px; }
.single-form .sf-section { margin: 0; }
.single-form .sf-section .card-head { margin-bottom: 14px; }
.single-form .sf-section > p.muted { margin-top: 0; }
.single-form .sf-actions { justify-content: flex-end; padding: 4px 0 8px; }
/* pole „Feat – kto gościnnie?” widoczne tylko po zaznaczeniu „Singiel jest z featem” */
.feat-field { display: none; }
.check-card:has(input:checked) + .feat-field { display: block; }
/* Terminy (YouTube / kolejny singiel): dwa kafelki Tak / Nie jak „Kiedy rozpocząć promocję?” */
.start-cards[data-reveal] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; }
@media (max-width: 560px) { .start-cards[data-reveal] { grid-template-columns: 1fr; } }
.tt-sound-missing { border-style: dashed; }
/* Dodatkowi twórcy (rola + osoba) w formularzu singla */
.extra-credits { margin: 4px 0 8px; display: grid; gap: 10px; justify-items: start; }
.extra-list { display: grid; gap: 8px; width: 100%; }
.extra-list:empty { display: none; }
.extra-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.extra-x { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; color: var(--muted); cursor: pointer; font-size: 18px; line-height: 1; }
.extra-x:hover { color: var(--err, #ff6b6b); border-color: currentColor; }
/* =====================================================================
Panel (artysta i zespół): więcej lodowych akcentów – wcześniej prawie czarno.
Tło z niebieską poświatą, karty z niebieskawą ramką i jaśniejszą górną krawędzią, niebieskie ikony menu i nagłówki sekcji. */
.app .main { background:
radial-gradient(900px 520px at 85% -8%, rgba(76, 194, 255, .13), transparent 65%),
radial-gradient(700px 480px at 0% 30%, rgba(40, 120, 255, .07), transparent 70%),
radial-gradient(800px 500px at 60% 110%, rgba(76, 194, 255, .06), transparent 70%); background-attachment: fixed; }
.app .sidebar { background: linear-gradient(180deg, rgba(76, 194, 255, .07), rgba(3, 4, 6, .82) 32%, rgba(3, 4, 6, .82) 70%, rgba(76, 194, 255, .05)); }
.app .nav-link svg { color: #7cc8ff; opacity: .75; }
.app .nav-link:hover { background: rgba(76, 194, 255, .07); }
.app .nav-link:hover svg { opacity: 1; }
.app .nav-link.active { background: linear-gradient(90deg, rgba(76, 194, 255, .16), rgba(76, 194, 255, .04)); color: #fff; }
.app .nav-link.active svg { color: var(--ice); opacity: 1; }
.app .nav-group { color: rgba(124, 200, 255, .6); }
.app .card { border-color: rgba(124, 200, 255, .14);
background: linear-gradient(180deg, rgba(124, 200, 255, .07), rgba(124, 200, 255, .015) 120px, rgba(255, 255, 255, .012)) , rgba(10, 13, 19, .84);
box-shadow: inset 0 1px 0 rgba(160, 220, 255, .12); }
.app .card-head h3, .app .card > h3:first-child, .app .card > h2:first-child, .app .pr-section h2 { color: #e8f6ff; }
.app .section-label, .app .eyebrow { color: #7cc8ff; }
.app .page-head h1 { background: linear-gradient(90deg, #ffffff 30%, #bfe6ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.app input:focus, .app textarea:focus, .app select:focus { border-color: rgba(76, 194, 255, .7); box-shadow: 0 0 0 3px rgba(76, 194, 255, .15); outline: none; }
.app .tabs a.on { color: #fff; box-shadow: inset 0 -2px 0 var(--ice); }
/* mocniejsze akcenty (druga wersja) */
.app .main { background:
radial-gradient(1000px 600px at 88% -10%, rgba(76, 194, 255, .22), transparent 62%),
radial-gradient(760px 560px at -5% 35%, rgba(40, 120, 255, .12), transparent 68%),
radial-gradient(900px 560px at 55% 112%, rgba(76, 194, 255, .1), transparent 70%); background-attachment: fixed; }
.app .sidebar { background: linear-gradient(180deg, rgba(76, 194, 255, .12), rgba(4, 7, 12, .86) 30%, rgba(4, 7, 12, .86) 68%, rgba(76, 194, 255, .1)); border-right-color: rgba(124, 200, 255, .14); }
.app .nav-link svg { opacity: .9; }
.app .nav-link.active { background: linear-gradient(90deg, rgba(76, 194, 255, .26), rgba(76, 194, 255, .06)); }
.app .card { border-color: rgba(124, 200, 255, .22);
background: linear-gradient(180deg, rgba(124, 200, 255, .1), rgba(124, 200, 255, .03) 140px, rgba(124, 200, 255, .015)), rgba(9, 13, 20, .86);
box-shadow: inset 0 1px 0 rgba(170, 225, 255, .18), 0 10px 40px rgba(0, 20, 50, .25); }
.app .card:hover { border-color: rgba(124, 200, 255, .3); }
/* Sklep: karta konsultacji z pomarańczowym glow (łuna w środku od góry, pomarańczowa ramka, poświata na zewnątrz) */
.app .consult-card { border-color: rgba(255, 107, 44, .45);
background: radial-gradient(70% 90% at 15% 0%, rgba(255, 107, 44, .22), transparent 65%),
radial-gradient(60% 80% at 100% 100%, rgba(255, 107, 44, .1), transparent 70%), rgba(14, 11, 12, .9);
box-shadow: inset 0 1px 0 rgba(255, 190, 140, .25), 0 0 40px rgba(255, 107, 44, .18), 0 0 90px rgba(255, 90, 20, .1); }
.app .consult-card:hover { border-color: rgba(255, 130, 70, .6); }
/* Terminy: po zaznaczeniu kafelka pole daty pojawia się obok w tej samej linii (na telefonie pod spodem) */
.inline-reveal { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 14px; align-items: center; margin-bottom: 14px; }
.inline-reveal:has(input[type="checkbox"]:checked) { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.inline-reveal > .check-card, .inline-reveal > .feat-field { margin-bottom: 0; }
.inline-reveal > .feat-field input { max-width: none !important; }
@media (max-width: 700px) { .inline-reveal:has(input[type="checkbox"]:checked) { grid-template-columns: 1fr; gap: 10px; } }
.btn.danger-text { color: #ff8a8a; margin-right: auto; }
.btn.danger-text:hover { color: #ffb0b0; border-color: rgba(255, 120, 120, .5); }
.single-form .sf-actions { justify-content: flex-start; }
.single-form .sf-actions .danger-text { margin-right: 0; }
.single-form .sf-actions .sf-spacer { margin-left: auto; }
/* Strona główna panelu: przycisk w karcie planu (Otwórz kalendarz / Sprawdź i zatwierdź) – spokojniejszy niż „Stwórz plan promo” */
.btn.last-plan-cta { color: #cfeeff; border-color: rgba(124, 200, 255, .4); background: rgba(76, 194, 255, .08); box-shadow: none; }
.btn.last-plan-cta:hover { color: #fff; border-color: rgba(124, 200, 255, .7); background: rgba(76, 194, 255, .14); }
/* Formularz singla: okładka w kroku 1 */
.cover-row { display: flex; align-items: center; gap: 16px; }
.cover-row > div { display: grid; gap: 6px; justify-items: start; }
.cover-prev { flex: none; width: 96px; height: 96px; border-radius: 12px; overflow: hidden; display: grid; place-items: center;
background: rgba(76, 194, 255, .06); border: 1px dashed rgba(124, 200, 255, .35); color: var(--muted); font-size: 28px; }
.cover-prev img { width: 100%; height: 100%; object-fit: cover; }
.cover-row .btn { cursor: pointer; }
/* Okładka singla: kwadratowy kafel do kliknięcia / przeciągnięcia, z podglądem i „Zmień okładkę” po najechaniu */
.cover-drop { position: relative; display: grid; place-items: center; width: 180px; aspect-ratio: 1; border-radius: 16px; overflow: hidden; cursor: pointer;
border: 1.5px dashed rgba(124, 200, 255, .45); background: radial-gradient(80% 80% at 50% 30%, rgba(76, 194, 255, .12), rgba(76, 194, 255, .03)); transition: border-color .15s, background .15s; }
.cover-drop:hover, .cover-drop.drag { border-color: var(--ice); background: radial-gradient(80% 80% at 50% 30%, rgba(76, 194, 255, .2), rgba(76, 194, 255, .05)); }
.cover-empty { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 12px; color: var(--muted); }
.cover-empty svg { width: 34px; height: 34px; color: var(--ice); margin-bottom: 4px; }
.cover-empty strong { color: var(--text); font-size: 14px; font-weight: 500; }
.cover-empty small { font-size: 12px; }
.cover-img { position: absolute; inset: 0; }
.cover-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-file { position: absolute; inset: 0; display: grid; place-items: center; padding: 10px; text-align: center; font-size: 12px; color: var(--text); overflow-wrap: anywhere; }
.cover-drop.has-cover { border-style: solid; border-color: rgba(124, 200, 255, .35); }
.cover-drop.has-cover .cover-empty { display: none; }
.cover-change { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px; text-align: center; font-size: 12.5px; color: #fff;
background: linear-gradient(transparent, rgba(0, 0, 0, .75)); opacity: 0; transition: opacity .15s; }
.cover-drop.has-cover:hover .cover-change, .cover-drop.has-cover:focus-within .cover-change { opacity: 1; }
.cover-drop:not(.has-cover) .cover-change { display: none; }
.cover-hint { display: block; margin-top: 8px; }
/* Krok 1: okładka z lewej, klimat i opis z prawej w jednym rzędzie */
.cover-layout { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 0 20px; align-items: start; }
.cover-layout .cover-side .field:last-child textarea { min-height: 128px; }
@media (max-width: 640px) { .cover-layout { grid-template-columns: 1fr; } }
/* krok 1: okładka 1/3, tytuł/data/klimat 2/3 */
.cover-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0 22px; }
.cover-layout .cover-drop { width: 100%; max-width: 280px; }
.cover-layout .cover-side .field:last-child textarea { min-height: 0; }
@media (max-width: 640px) { .cover-layout { grid-template-columns: 1fr; } }
/* krok 1: „Klimat” rozciąga się tak, żeby prawa kolumna kończyła się równo z okładką */
.cover-layout { align-items: stretch; }
.cover-layout .cover-field { margin-bottom: 0; }
.cover-layout .cover-side { display: flex; flex-direction: column; }
.cover-layout .mood-field { flex: 1; display: flex; flex-direction: column; margin-bottom: 0; }
.cover-layout .mood-field textarea { flex: 1; min-height: 56px; resize: none; }
.cover-layout + .field { margin-top: 18px; }
/* data + godzina premiery w jednej linii */
.date-time { display: grid; grid-template-columns: minmax(0, 1fr) 130px; gap: 8px; }
input[type=time] { color-scheme: dark; }
/* Formularz singla: plik audio utworu */
.audio-drop { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; cursor: pointer;
border: 1.5px dashed rgba(124, 200, 255, .4); background: rgba(76, 194, 255, .05); transition: border-color .15s, background .15s; }
.audio-drop:hover { border-color: var(--ice); background: rgba(76, 194, 255, .09); }
.audio-drop svg { width: 22px; height: 22px; color: var(--ice); flex: none; }
.audio-drop .audio-name { flex: 1; min-width: 0; color: var(--muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audio-drop.has-file, .audio-drop:has(+ .audio-player) { border-style: solid; }
.audio-drop.has-file .audio-name { color: var(--text); }
.audio-player { width: 100%; margin-top: 8px; height: 40px; }
/* poprawka: bez niebieskiego pasa przy logo – menu z równym, delikatnym odcieniem (gradient od krawędzi wyglądał jak pasek) */
.app .sidebar { background: linear-gradient(90deg, rgba(4, 7, 12, .9), rgba(8, 16, 28, .9)); }
/* „1. Dane wejściowe” u zespołu: zwinięta karta ukrywa formularz (ważniejsze niż .editing .edit-only { display: block }) */
.collapsible.collapsed .collapse-body.edit-only { display: none; }
/* zwinięte karty 1–3 u zespołu: bez pustego miejsca pod nagłówkiem */
.collapsible.collapsed > .card-head:last-of-type, form.collapsible.collapsed .card-head { margin-bottom: 0; }
/* Materiały od artysty (zespół): na całą szerokość, kafle po 3–4 w rzędzie – podgląd na górze, pod nim nazwa, opis, grupa */
#materialy .media-list { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; align-items: start; }
#materialy .media-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
#materialy .media-prev { aspect-ratio: 4 / 3; }
#materialy .media-desc .row.between { flex-wrap: wrap; gap: 6px; }
#materialy .media-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
#materialy .group-pick { font-size: 12.5px; }
/* kafle materiałów tej samej wysokości (w rzędzie) */
#materialy .media-list { align-items: stretch; }
#materialy .media-row { display: flex; flex-direction: column; }
#materialy .media-desc { flex: 1; }
#materialy .media-desc .reject-box { margin-top: auto; }
/* „Karuzela nr”: tekst z lewej, wybór z prawej w jednej linii */
#materialy .group-pick { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 13px; color: var(--muted); }
#materialy .group-pick select { width: auto; min-width: 70px; flex: none; }
/* Ocena materiałów: ręczna korekta (zespół) */
.metrics-edit { margin: -4px 0 14px; }
.metrics-edit summary { cursor: pointer; font-size: 13px; }
.metrics-edit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; }
.metrics-edit-grid label { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); }
/* Ocena materiałów: 3 suwaki */
.metrics-sliders { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 20px; margin-top: 12px; }
.m-slider { display: grid; gap: 8px; font-size: 13px; color: var(--muted); }
.m-slider-head { display: flex; justify-content: space-between; align-items: baseline; }
.m-slider-head b { color: var(--text); font-size: 15px; font-weight: 600; }
.m-slider input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; cursor: pointer;
background: linear-gradient(90deg, var(--ice) var(--p, 50%), rgba(255, 255, 255, .12) var(--p, 50%)); }
.m-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--ice); box-shadow: 0 0 10px rgba(76, 194, 255, .5); }
.m-slider input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--ice); }
/* ocena materiałów u zespołu: pasek jest suwakiem (przezroczysty input range na pasku + widoczna gałka) */
.mat-editable .mat-row { padding-bottom: 2px; }
.mat-editable .meter { height: 6px; overflow: visible; }
.mat-editable .meter-range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 18px; margin: -12px 0 0; background: transparent; cursor: pointer; position: relative; }
.mat-editable .meter-range::-webkit-slider-runnable-track { height: 18px; background: transparent; }
.mat-editable .meter-range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; background: #fff; border: 3px solid var(--ice); box-shadow: 0 0 8px rgba(76, 194, 255, .5); }
.mat-editable .meter-range::-moz-range-track { background: transparent; }
.mat-editable .meter-range::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--ice); }
/* Materiały od artysty (zespół): większa, pionowa miniatura 9:16; wideo gra w kaflu */
#materialy .media-prev { aspect-ratio: 9 / 16; }
#materialy .media-prev img, #materialy .media-prev video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
#materialy .media-prev video { object-fit: contain; }
#materialy .media-list { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
/* zdjęcia w materiałach: bez kadrowania – pełna szerokość kafla, wysokość według zdjęcia (wideo zostaje 9:16) */
#materialy .media-prev:has(.media-open) { aspect-ratio: auto; display: block; }
#materialy .media-prev .media-open { height: auto; }
#materialy .media-prev .media-open img { width: 100%; height: auto; object-fit: contain; }
/* poprawka: ramka podglądu zostaje 9:16 (równa wysokość kafli), zdjęcie dopasowane do szerokości, bez przycinania */
#materialy .media-prev:has(.media-open) { aspect-ratio: 9 / 16; display: grid; }
#materialy .media-prev .media-open { height: 100%; display: grid; place-items: center; background: #05070a; }
#materialy .media-prev .media-open img { width: 100%; height: 100%; object-fit: contain; }
/* Materiały: galeria wszystkich miniatur (wyłapywanie powtórzeń) */
dialog.gallery-dialog { width: min(1100px, calc(100vw - 24px)); max-height: 88vh; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; padding: 16px 20px 20px; overflow-y: auto; max-height: calc(88vh - 64px); }
.gallery-item { position: relative; margin: 0; }
.gallery-item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; background: #05070a; border: 1px solid var(--line); }
.gallery-item.rejected img { opacity: .35; filter: grayscale(1); }
.gallery-item figcaption { font-size: 11px; color: var(--muted); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gallery-badge { position: absolute; top: 6px; left: 6px; padding: 2px 6px; border-radius: 6px; background: rgba(0, 0, 0, .65); color: #fff; font-size: 11px; }
.gallery-group { left: auto; right: 6px; background: rgba(76, 194, 255, .85); color: #04121c; font-weight: 600; }
/* galeria: grupowanie w karuzele */
.gallery-tools { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 20px 0; font-size: 13px; }
.gallery-tools select { width: auto; }
.gallery-item[data-gallery-item] { cursor: pointer; }
.gallery-item[data-gallery-item] img { transition: outline-color .1s; outline: 3px solid transparent; outline-offset: -3px; }
.gallery-item[aria-pressed="true"] img { outline-color: var(--ice); }
.gallery-item[aria-pressed="true"]::after { content: "✓"; position: absolute; top: 6px; left: 6px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--ice); color: #04121c; font-size: 12px; font-weight: 700; }
.gallery-reject { display: flex; gap: 10px; align-items: flex-start; padding: 12px 20px 0; }
.gallery-reject textarea { flex: 1; }
.gallery-reject[hidden] { display: none; }
/* Media prasowe: filtr regionu jako lista wyboru */
.media-filter label { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.media-filter select { width: auto; min-width: 240px; }
.nav-link .lock { margin-left: auto; display: inline-flex; color: var(--muted); }
.nav-link .lock svg { width: 14px; height: 14px; }
.media-filter { display: flex; justify-content: flex-end; } /* filtr regionu z prawej */
/* lista rozwijana z polami wyboru (np. gatunki playlist) */
.multi-select { position: relative; }
.multi-select summary { list-style: none; cursor: pointer; padding: 11px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line-2); background: var(--bg-2); color: var(--muted);
display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.multi-select summary::-webkit-details-marker { display: none; }
.multi-select summary::after { content: "▾"; color: var(--muted); }
.multi-select.has-value summary { color: var(--text); }
.multi-select[open] summary { border-color: rgba(76, 194, 255, .7); }
.multi-options { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px;
background: var(--surface-2); border: 1px solid var(--line-2); box-shadow: 0 16px 40px rgba(0, 0, 0, .45); }
.multi-options .check { padding: 6px 2px; font-weight: 400; }
.pl-link-form { display: flex; gap: 6px; min-width: 260px; }
.pl-link-form input { padding: 6px 10px; font-size: 13px; }
/* Trendy (zespół): „+ Dodaj trend” jako przycisk rozwijający formularz */
details.add-trend { padding: 14px 18px; }
details.add-trend summary { list-style: none; display: inline-flex; }
details.add-trend summary::-webkit-details-marker { display: none; }
details.add-trend:not([open]) { background: transparent; border: 0; box-shadow: none; padding: 0; }
/* Kontakty DJ */
.dj-filter { gap: 10px; flex-wrap: wrap; }
.dj-filter input[type=search] { width: auto; min-width: 260px; }
.dj-links a { display: inline-block; margin-right: 8px; font-size: 12px; font-weight: 600; }
.dj-table td { vertical-align: top; font-size: 13px; }
.nowrap { white-space: nowrap; }
.dj-import { position: relative; }
.dj-import summary { list-style: none; } .dj-import summary::-webkit-details-marker { display: none; }
.dj-import-box { position: absolute; right: 0; z-index: 10; width: min(420px, 85vw); margin-top: 6px; padding: 14px; display: grid; gap: 10px; border-radius: 12px;
background: var(--surface-2); border: 1px solid var(--line-2); box-shadow: 0 16px 40px rgba(0, 0, 0, .45); }
.dj-filter { align-items: center; }
.dj-filter input[type=search] { min-width: 300px; padding: 9px 12px 9px 34px; font-size: 14px;
background: rgba(0, 0, 0, .45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238a96a8' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 11px center; }
.dj-filter input[type=search]::-webkit-search-cancel-button { filter: invert(1) opacity(.5); }
.dj-table td.nowrap a { color: var(--text); font-variant-numeric: tabular-nums; }
/* listy w bazach (Media, Playlisty, Kontakty DJ): filtr wyboru z lewej, wyszukiwarka z prawej */
.list-filter { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.list-filter label { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); margin: 0; }
.list-filter select { width: auto; min-width: 240px; }
.list-filter input[type=search] { width: auto; min-width: 300px; padding: 9px 12px 9px 34px; font-size: 14px;
background: rgba(0, 0, 0, .45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238a96a8' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 11px center; }
.list-filter input[type=search]::-webkit-search-cancel-button { filter: invert(1) opacity(.5); }
@media (max-width: 640px) { .list-filter select, .list-filter input[type=search] { min-width: 0; width: 100%; } .list-filter label { width: 100%; } }
.dj-table td.dj-links { white-space: nowrap; min-width: 130px; } /* WWW · FB · IG w jednej linii */
/* plan (artysta): pitch do odhaczenia */
.pitch-check { display: flex; gap: 12px; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; }
.pitch-check.done span { color: var(--muted); text-decoration: line-through; }
/* strona główna artysty: pitch do odhaczenia */
.last-plan-todo.pitch-todo { margin-top: 12px; padding: 14px 16px; border-top: 1px solid rgba(255, 107, 44, .28); font-size: inherit; }
.last-plan-todo.pitch-todo .lpt-txt { flex: 1; }
.last-plan-todo.pitch-todo.done { border-color: var(--line); background: transparent; }
.last-plan-todo.pitch-todo.done strong { text-decoration: line-through; color: var(--muted); }
/* Artysta (zespół) */
.artist-head { display: flex; align-items: center; gap: 16px; }
.artist-head p { margin: 4px 0 0; }
.artist-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin-bottom: 18px; }
.artist-single { color: var(--text); text-decoration: none; }
.artist-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.artist-links li { display: flex; align-items: center; gap: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.artist-an-title { margin: 26px 0 12px; font-size: 20px; }
.artist-link-ic { display: inline-flex; flex: none; width: 16px; height: 16px; color: var(--muted); }
.artist-link-ic svg { width: 16px; height: 16px; }
/* stronicowanie list */
.pager { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 14px; font-size: 13px; }
.pager .disabled { opacity: .4; pointer-events: none; }
/* ---------- profil artysty: gatunek (max 3) i rok (suwak + pole) ---------- */
.chip-checks input:disabled + span { opacity: .4; cursor: not-allowed; }
.year-pair { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 12px; align-items: center; }
.year-pair input[type=range] { width: 100%; accent-color: var(--ice); padding: 0; background: none; border: 0; }
/* ---------- formularz singla: featy (jedno pole na osobę), audio przeciągane, ekran ładowania wysyłki ---------- */
.feat-list { display: grid; gap: 8px; margin-bottom: 8px; max-width: 420px; }
.feat-row { grid-template-columns: minmax(0, 1fr) auto; }
.audio-drop.drag { border-color: var(--ice); border-style: solid; background: rgba(76, 194, 255, .12); }
dialog.send-overlay { width: min(420px, calc(100vw - 32px)); padding: 32px 24px; text-align: center; }
dialog.send-overlay .spinner { width: 34px; height: 34px; border-width: 3px; color: var(--ice); margin-bottom: 14px; }
dialog.send-overlay h3 { margin: 0 0 6px; }
dialog.send-overlay p { margin: 0; }
.cover-layout .mood-field .chip-checks { align-content: flex-start; }
/* ---------- trendy: miniatura trendu dodanego ręcznie, rodzaj (muzyczny / ogólny) ---------- */
.trend-cover-link { flex: none; align-self: flex-start; display: block; }
.trend-cat { align-self: flex-start; margin-top: 2px; }
/* ---------- zespół: Kontakty DJ – „Napisz do DJ-ów” ---------- */
.dj-mail .card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
/* ---------- jedno konto = jeden artysta: zablokowana ksywa i linki do profili ---------- */
input[readonly], input:disabled[readonly] { color: var(--muted); cursor: not-allowed; background: var(--bg-2); }
/* ---------- CRM (admin): koszty stałe i leady ---------- */
.crm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 12px; }
.crm-stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 18px; }
.crm-stat { padding: 16px 18px; display: grid; gap: 6px; }
.crm-stat strong { font-size: 24px; font-weight: 500; }
.crm-pos { color: var(--ok); } .crm-neg { color: var(--err); }
.crm-edit { display: inline-block; text-align: left; }
.crm-edit[open] > form { position: absolute; right: 24px; z-index: 5; width: min(640px, calc(100vw - 48px)); padding: 16px; margin-top: 6px;
background: var(--surface); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, .5); }
[data-copy-on-click] { cursor: copy; font-family: ui-monospace, monospace; font-size: 12.5px; }
[data-copy-on-click].copied { border-color: var(--ok); }
.crm-bulk { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 16px; align-items: center; padding: 12px 16px; margin-bottom: 12px; }
.crm-scope, .crm-actions { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.crm-actions select, .crm-actions input { width: auto; padding: 6px 10px; }
.crm-table td:first-child, .crm-table th:first-child { width: 32px; }
.crm-st { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; border: 1px solid var(--line-2); white-space: nowrap; }
.crm-st.st-new { color: var(--ice); border-color: rgba(76, 194, 255, .35); }
.crm-st.st-interested { color: var(--warn); border-color: rgba(255, 200, 87, .35); }
.crm-st.st-registered, .crm-st.st-client { color: var(--ok); border-color: rgba(74, 222, 155, .35); }
.crm-st.st-lost { color: var(--faint); }
@media (max-width: 1000px) { .crm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ---------- zespół: Społeczność (moderacja) ---------- */
.staff-cm { display: grid; gap: 16px; max-width: 820px; }
.staff-cm-img { max-width: 320px; max-height: 320px; border-radius: 12px; display: block; margin-top: 8px; object-fit: cover; }
.staff-cm-replies { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.staff-avatar-lg { width: 56px; height: 56px; font-size: 20px; }
/* Leady: filtry w jednej linii (węższe listy, wyszukiwarka zajmuje resztę) – silniejsze niż .list-filter input[type=search] */
.list-filter.crm-filter { flex-wrap: nowrap; justify-content: flex-start; }
.list-filter.crm-filter label { flex: none; white-space: nowrap; }
.list-filter.crm-filter select { min-width: 0; width: 140px; }
.list-filter.crm-filter input[type=search].crm-filter-q { min-width: 0; width: auto; flex: 1 1 160px; }
.list-filter.crm-filter .btn { flex: none; }
@media (max-width: 700px) { .list-filter.crm-filter { flex-wrap: wrap; } .list-filter.crm-filter input[type=search].crm-filter-q { flex-basis: 100%; } }
/* Leady: zaznaczanie jak w reszcie aplikacji – w środku szare półprzezroczyste, zaznaczone lodowe (✓ / kropka) */
.crm-table input[type="checkbox"], .crm-scope input[type="radio"] { appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 0;
cursor: pointer; border: 1.5px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .08); display: grid; place-items: center;
transition: background .15s, border-color .15s; vertical-align: middle; }
.crm-table input[type="checkbox"] { border-radius: 6px; }
.crm-table input[type="checkbox"]::after { content: ""; width: 5px; height: 10px; margin-top: -2px; border: solid #071019; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; }
.crm-scope input[type="radio"] { border-radius: 50%; }
.crm-scope input[type="radio"]::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #071019; opacity: 0; }
.crm-table input[type="checkbox"]:checked, .crm-scope input[type="radio"]:checked { background: var(--ice-2); border-color: var(--ice-2); }
.crm-table input[type="checkbox"]:checked::after, .crm-scope input[type="radio"]:checked::after { opacity: 1; }
.crm-table input[type="checkbox"]:hover, .crm-scope input[type="radio"]:hover { border-color: rgba(76, 194, 255, .7); }
.crm-table input[type="checkbox"]:focus-visible, .crm-scope input[type="radio"]:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
.crm-scope label.check { display: inline-flex; align-items: center; gap: 10px; margin: 0; cursor: pointer; }
.crm-table tr:has(input[data-bulk-row]:checked) td { background: rgba(76, 194, 255, .05); }
/* Plan: opis YouTube – zwinięta karta z kopiowaniem */
.yt-desc summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; }
.yt-desc summary::-webkit-details-marker { display: none; }
.yt-desc summary h3 { margin: 0; }
.yt-desc[open] .yt-desc-hint { display: none; }
.yt-desc-body { position: relative; margin-top: 14px; }
.yt-desc-body pre { white-space: pre-wrap; font-family: inherit; margin: 0; padding-right: 40px; max-height: 420px; overflow-y: auto; }
/* Twórcy: kilka osób w jednej roli – pole + przycisk „+” (pierwsze) / „×” (kolejne) */
.multi-list { display: grid; gap: 8px; }
.multi-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.multi-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; color: var(--muted);
cursor: pointer; font-size: 18px; line-height: 1; display: grid; place-items: center; }
.multi-btn:hover { color: var(--ice); border-color: var(--ice); }
.multi-btn[data-multi-remove]:hover { color: var(--err, #ff6b6b); border-color: currentColor; }
.sf-section .check-card + .feat-field { margin-bottom: 18px; }
/* Ustawienia AI: kiedy się uruchamia / ostatnio / ręcznie */
.ai-run { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 10px 0 0; font-size: 13px; align-items: center; }
.ai-run dt { color: var(--muted); }
.ai-run dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* Zespół → strona artysty: nowa analiza AI do zatwierdzenia */
.an-pending { margin-bottom: 16px; }
/* Analityka: karty w siatce nie rozpychają się długimi nazwami (min-width: 0); playlisty zwinięte do 3 */
.an-grid > *, .an-grid .sp-pl, .sp-pl-list, .sp-pl-list li, .sp-pl-list a { min-width: 0; }
.sp-pl-list.collapsed .sp-pl-more { display: none; }
.sp-pl-toggle { margin-top: 8px; }
/* Zespół → Poczta (IMAP) */
.mail-table td, .mail-table td a { font-weight: 300; color: var(--muted); } /* przeczytane – cieńsza czcionka */
.mail-table .mail-unread td, .mail-table .mail-unread td a { font-weight: 600; color: var(--text); } /* nieprzeczytane – pogrubione */
.mail-table .mail-from { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-body { white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: 14.5px; line-height: 1.55; margin: 0; max-height: 70vh; overflow-y: auto; }
.mail-table .mail-subject { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-table .mail-preview { max-width: 460px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--faint) !important; font-weight: 300 !important; }
.mail-actions { display: inline-flex; gap: 6px; margin: 0; }
/* Podgląd posta (zespół): propozycja treści do edycji w lewej ramce */
/* pole wypełnia całą ramkę – od nagłówka do „Wgraj” (albo do dołu ramki przy Działaniach) */
dialog#post-dialog .post-proposal.is-edit { display: flex; flex-direction: column; overflow: hidden; }
dialog#post-dialog .post-proposal.is-edit .post-proposal-edit { flex: 1; width: 100%; min-height: 120px; resize: none; margin: 0; font-size: 14px; line-height: 1.5; }
dialog#post-dialog .post-proposal.is-edit .post-upload { margin-top: 12px; flex: none; }
.cal-toast { z-index: 1000; }
/* Poczta → Nowa wiadomość: edytor z formatowaniem */
.rte { border: 1px solid var(--line-2); border-radius: 12px; background: var(--bg-2); overflow: hidden; }
.rte-bar { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; padding: 6px 8px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .03); }
.rte-bar button, .rte-color { min-width: 32px; height: 32px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--text); cursor: pointer; font-size: 14px; display: inline-grid; place-items: center; }
.rte-bar button:hover, .rte-color:hover { background: rgba(255, 255, 255, .08); }
.rte-sep { width: 1px; height: 20px; background: var(--line-2); margin: 0 4px; }
.rte-color { position: relative; margin: 0; }
.rte-color span { font-weight: 700; text-decoration: underline; text-decoration-color: #2563eb; text-decoration-thickness: 3px; }
.rte-color input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; padding: 0; border: 0; }
.rte-area { min-height: 260px; max-height: 60vh; overflow-y: auto; padding: 12px 14px; outline: none; font-size: 14.5px; line-height: 1.55; }
.rte-area:focus { box-shadow: inset 0 0 0 2px rgba(76, 194, 255, .25); }
.rte-area ul, .rte-area ol { padding-left: 22px; margin: 6px 0; }
.rte-area a { color: var(--ice); text-decoration: underline; }
.dj-mail.is-off a { color: var(--faint); text-decoration: line-through; }
/* ---------- Audyt profili (/audyt-profili) – hero jak na stronie głównej, formularz z ikonami serwisów ---------- */
.audit-hero .container { align-items: center; grid-template-columns: 1.05fr .95fr; } /* tekst na wysokości środka formularza */
.audit-hero h1 { font-size: clamp(32px, 4.4vw, 52px); }
.audit-hero .lead { margin-bottom: 26px; }
.audit-checks { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.audit-checks li { display: flex; gap: 12px; align-items: flex-start; }
.audit-checks strong { display: block; font-weight: 500; color: var(--text); }
.audit-checks small { display: block; color: var(--muted); font-size: 13px; margin-top: 1px; }
.audit-tick { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700;
color: #07131c; background: linear-gradient(140deg, #e2f5ff, #4cc2ff); box-shadow: 0 0 14px rgba(76, 194, 255, .35); }
.audit-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.audit-steps li { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 7px; border-radius: 999px; font-size: 14px;
background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .1); color: #c7d0e0; }
.audit-steps b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px;
background: rgba(76, 194, 255, .14); color: var(--ice); }
.audit-steps li.done b { background: #2fb36d; color: #fff; }
.audit-steps li.now { border-color: rgba(76, 194, 255, .45); color: #fff; }
.audit-steps li.now b { animation: audit-pulse 1.6s ease-in-out infinite; }
@keyframes audit-pulse { 50% { box-shadow: 0 0 0 6px rgba(76, 194, 255, .12); } }
.audit-form { padding: 26px; }
.audit-form h3 { margin: 0 0 4px; font-size: 20px; font-weight: 500; }
.audit-sub { margin: 0 0 16px; font-size: 14px; }
.audit-hp { position: absolute; left: -9999px; }
.audit-input { display: flex; align-items: center; margin-bottom: 10px; border-radius: 14px; border: 1px solid var(--line-2);
background: var(--surface-2); transition: border-color .2s, box-shadow .2s; }
.audit-input:focus-within { border-color: rgba(76, 194, 255, .55); box-shadow: 0 0 0 3px rgba(76, 194, 255, .14); }
.audit-ico { flex: none; width: 46px; display: grid; place-items: center; color: var(--muted); transition: color .15s; }
.audit-input:focus-within .audit-ico, .audit-input:has(input:not(:placeholder-shown)) .audit-ico { color: var(--text); }
.audit-ico svg { width: 20px; height: 20px; }
.audit-input input { border: 0; background: transparent; box-shadow: none; padding-left: 0; min-width: 0; flex: 1; }
.audit-input input:focus { outline: none; box-shadow: none; }
.audit-row { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .08); }
.audit-consent { margin: 18px 0 18px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 13px; font-weight: 400; color: var(--muted); }
.audit-submit { width: 100%; justify-content: center; }
.audit-done .container { grid-template-columns: 1fr; justify-items: center; }
.audit-done-card { max-width: 640px; width: 100%; text-align: center; padding: 40px 32px; }
.audit-done-card .audit-steps { justify-content: center; margin: 4px 0 18px; }
.audit-done-card h1 em { margin-left: auto; margin-right: auto; }
.audit-done-ico { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; font-weight: 700;
color: #07131c; background: linear-gradient(140deg, #e2f5ff, #4cc2ff); box-shadow: 0 0 40px rgba(76, 194, 255, .45); }
.audit-spam { font-size: 14px; margin: 0 0 20px; }
.audit-intro .lead { max-width: 560px; }
.audit-how { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.audit-how li { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 7px; border-radius: 999px; font-size: 14px;
border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); color: var(--text); }
.audit-how b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600;
background: rgba(76, 194, 255, .14); color: var(--ice); }
.audit-checks li { padding: 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .025); }
.audit-form-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.audit-form-head h3 { margin: 0; }
.auth-audit-note { margin: -4px 0 16px; padding: 10px 12px; border-radius: 12px; font-size: 14px; color: var(--text);
border: 1px solid rgba(76, 194, 255, .3); background: rgba(76, 194, 255, .07); }
.audit-free { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ice); padding: 4px 10px; border-radius: 999px;
border: 1px solid rgba(76, 194, 255, .35); background: rgba(76, 194, 255, .08); }
.audit-fields { display: grid; gap: 10px; }
.audit-fields .audit-input { margin-bottom: 0; }
.audit-name { flex: none; width: 82px; font-size: 13px; color: var(--muted); }
.audit-note { margin: 12px 0 0; text-align: center; font-size: 13px; color: var(--muted); }
@media (max-width: 520px) { .audit-name { display: none; } }
@media (max-width: 860px) { /* telefon: formularz zaraz pod opisem i krokami, korzyści pod nim */
.audit-hero .container { row-gap: 18px; }
.audit-intro { display: contents; }
.audit-intro h1, .audit-intro .lead, .audit-how { margin: 0; }
.audit-form { order: 2; } .audit-checks { order: 3; }
}
.pub-main .audit-form .audit-note { text-align: center; }
@media (max-width: 860px) { .audit-hero .container { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .audit-checks, .audit-row { grid-template-columns: 1fr; } .audit-form { padding: 20px; } .audit-done-card { padding: 30px 18px; } }
.pub-main .audit-done-card p { text-align: center; } /* wyżej: .pub-main .card p – justowanie */
.pub-main .audit-form .audit-sub { text-align: left; }
.audit-done-card .eyebrow { display: flex; justify-content: center; margin-bottom: 6px; }
.audit-done-card h1 { margin-top: 0; }
.audit-done-card .lead { margin: 0 auto 20px; }
.audit-hero h1 { margin-top: 0; }
/* ---------- Plan DUET – posty drugiej osoby wyszarzone, podpis kto publikuje ---------- */
.cal-post.is-partner { opacity: .45; filter: grayscale(.6); }
.cal-post.is-partner:hover { opacity: .8; filter: none; }
.cal-who { display: block; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ice);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 1px; }
.cal-post.is-partner .cal-who { color: var(--muted); }
.post-owner { display: inline-block; margin-bottom: 10px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px;
background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); color: var(--muted); }
.post-owner.mine { border-color: rgba(76, 194, 255, .4); color: var(--text); }
.post-owner.pick select { width: auto; padding: 2px 26px 2px 8px; min-height: 0; height: auto; font-size: 12.5px; background-color: transparent; border: 0; color: var(--text); }
.post-owner.pick { display: inline-flex; align-items: center; gap: 2px; width: auto; }
.post-owner.pick select { width: auto !important; flex: none; }
/* Cennik: w karcie MAX pogrubione wyróżniki (**…** w FEATURE_VALUES) lodowym błękitem */
.price-card.plan-max .feat-list b { color: var(--ice); }
/* Pierwszy odczyt wskaźników po rejestracji – pasek z kręciołkiem (panel/_first_sync.html) */
.first-sync { display: flex; gap: 14px; align-items: center; border-color: rgba(76, 194, 255, .35); }
.first-sync strong { display: block; font-weight: 500; }
.first-sync small { display: block; margin-top: 2px; }
.first-sync-spin { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid rgba(76, 194, 255, .25); border-top-color: var(--ice);
animation: fs-spin 1s linear infinite; }
@keyframes fs-spin { to { transform: rotate(360deg); } }
/* „Kontynuuj z Google” (logowanie / rejestracja) – biały przycisk wg wytycznych Google + separator „albo” */
.google-btn { width: 100%; justify-content: center; gap: 10px; background: #fff; color: #1f1f1f; border: 1px solid #dadce0; font-weight: 500; }
.google-btn:hover { background: #f2f2f2; color: #1f1f1f; border-color: #dadce0; }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--muted); font-size: 13px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, .1); }
/* Linki do profili (Profil artysty → Social media, rejestracja etap 3): logo serwisu przy nazwie */
.soc-label { display: inline-flex; align-items: center; gap: 8px; }
.soc-ic { display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; }
.soc-ic svg { width: 18px; height: 18px; }
.soc-ic { color: var(--text); opacity: .85; } /* ikony serwisów jednokolorowe (bez kolorów marek) */
/* Samouczek panelu artysty (panel/_tour.html): przyciemnienie z podświetleniem + karta z ikoną, kropkami postępu i strzałką */
.tour { position: fixed; inset: 0; z-index: 3000; }
.tour-hole { position: fixed; border-radius: 16px; pointer-events: none; transition: all .3s cubic-bezier(.2, .8, .2, 1);
box-shadow: 0 0 0 9999px rgba(3, 5, 9, .74), 0 0 0 2px rgba(127, 214, 255, .9), 0 0 26px 4px rgba(76, 194, 255, .45); }
.tour-hole::after { content: ""; position: absolute; inset: -6px; border-radius: 20px; border: 2px solid rgba(76, 194, 255, .6);
animation: tour-ring 1.6s ease-out infinite; }
@keyframes tour-ring { from { opacity: .9; inset: -6px; } to { opacity: 0; inset: -14px; } } /* stały odstęp – przy dużym elemencie (kalendarz) bez drugiej, szerokiej ramki */
.tour-tip { position: fixed; width: min(320px, calc(100vw - 24px)); padding: 20px 20px 16px; border-radius: 22px;
border: 1px solid transparent;
background: linear-gradient(160deg, rgba(22, 28, 40, .98), rgba(10, 13, 19, .98)) padding-box,
linear-gradient(150deg, rgba(127, 214, 255, .7), rgba(76, 194, 255, .15) 45%, rgba(255, 255, 255, .06)) border-box;
box-shadow: 0 24px 70px rgba(0, 0, 0, .6), 0 0 40px rgba(76, 194, 255, .12); transition: left .3s cubic-bezier(.2, .8, .2, 1), top .3s cubic-bezier(.2, .8, .2, 1); }
.tour-tip.in { animation: tour-in .28s ease; }
@keyframes tour-in { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
.tour-tip.center { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); width: min(360px, calc(100vw - 24px)); text-align: center; }
.tour-tip.center .tour-ic { margin-left: auto; margin-right: auto; }
.tour-ic { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 12px; color: #07131c;
background: linear-gradient(140deg, #e2f5ff, #4cc2ff); box-shadow: 0 0 22px rgba(76, 194, 255, .45); }
.tour-ic svg { width: 21px; height: 21px; }
.tour-tip h3 { margin: 0 0 4px; font-size: 20px; font-weight: 500; letter-spacing: -.01em; }
.tour-tip p { margin: 0 0 16px; color: #b9c3d3; font-size: 14.5px; line-height: 1.45; }
.tour-x { position: absolute; top: 10px; right: 12px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent;
color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.tour-x:hover { background: rgba(255, 255, 255, .06); color: var(--text); }
.tour-foot { display: flex; align-items: center; gap: 8px; }
.tour-tip.center .tour-foot { justify-content: center; }
.tour-dots { display: flex; gap: 5px; margin-right: auto; }
.tour-tip.center .tour-dots { margin-right: 6px; }
.tour-dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .16); transition: all .25s; }
.tour-dots i.done { background: rgba(76, 194, 255, .5); }
.tour-dots i.on { width: 18px; background: var(--ice); box-shadow: 0 0 8px rgba(76, 194, 255, .7); }
.tour-arrow { position: absolute; width: 14px; height: 14px; background: rgba(22, 28, 40, .98); transform: rotate(45deg); display: none; }
.tour-arrow.left { display: block; left: -8px; margin-top: -7px; border-left: 1px solid rgba(127, 214, 255, .55); border-bottom: 1px solid rgba(127, 214, 255, .55); }
.tour-arrow.top { display: block; top: -8px; margin-left: -7px; border-left: 1px solid rgba(127, 214, 255, .55); border-top: 1px solid rgba(127, 214, 255, .55); }
.tour-arrow.bottom { display: block; bottom: -8px; margin-left: -7px; background: rgba(10, 13, 19, .98); border-right: 1px solid rgba(76, 194, 255, .3); border-bottom: 1px solid rgba(76, 194, 255, .3); }
@media (max-width: 520px) { .tour-dots i { width: 5px; } .tour-dots i.on { width: 14px; } }
.tour-note { display: block; margin: -10px 0 14px; font-size: 12px; color: var(--muted); }
/* Samouczek: kroki-korzyści („hot”) – pomarańczowy motyw jak przycisk „Zacznij teraz” */
.tour.hot .tour-hole { box-shadow: 0 0 0 9999px rgba(3, 5, 9, .74), 0 0 0 2px rgba(255, 150, 80, .95), 0 0 30px 6px rgba(255, 107, 44, .5); }
.tour.hot .tour-hole::after { border-color: rgba(255, 120, 55, .7); }
.tour.hot .tour-tip { background: radial-gradient(120% 90% at 0% 0%, rgba(255, 107, 44, .18), transparent 60%) padding-box,
linear-gradient(160deg, rgba(26, 22, 22, .98), rgba(12, 11, 13, .98)) padding-box,
linear-gradient(150deg, #ffc08f, rgba(255, 107, 44, .55) 45%, rgba(255, 255, 255, .06)) border-box;
box-shadow: 0 24px 70px rgba(0, 0, 0, .6), 0 0 46px rgba(255, 107, 44, .2); }
.tour.hot .tour-ic { color: #2a0f02; background: linear-gradient(140deg, #ffd6b3, #ff6b2c); box-shadow: 0 0 24px rgba(255, 107, 44, .55); }
.tour.hot .tour-arrow { background: rgba(26, 22, 22, .98); border-color: rgba(255, 150, 80, .6) !important; }
.tour.hot .tour-dots i.on { background: #ff8a4c; box-shadow: 0 0 8px rgba(255, 107, 44, .8); }
.tour.hot .tour-dots i.done { background: rgba(255, 138, 76, .45); }
.tour-hot { display: inline-block; margin-bottom: 6px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .08em;
color: #ffd6b3; background: rgba(255, 107, 44, .16); border: 1px solid rgba(255, 138, 76, .45); }
.tour.hot .tour-ic { display: inline-grid; vertical-align: middle; margin-bottom: 12px; }
.tour.hot .tour-hot { margin: 0 0 12px 10px; vertical-align: middle; }
.tour-tip.center { width: min(400px, calc(100vw - 24px)); }
.tour-tip.center .tour-foot { flex-wrap: wrap; justify-content: center; }
.tour-tip.center .tour-dots { width: 100%; justify-content: center; margin: 0 0 14px; }
/* Samouczek: ognista ramka karty (jak przycisk „Zacznij teraz”) – pomarańczowa krawędź i łuna, która lekko „oddycha” */
.tour.hot .tour-tip { animation: tour-fire 2.6s ease-in-out infinite; }
.tour.hot .tour-tip.in { animation: tour-in .28s ease, tour-fire 2.6s ease-in-out infinite; }
@keyframes tour-fire {
0%, 100% { box-shadow: 0 24px 70px rgba(0, 0, 0, .6), 0 0 22px rgba(255, 107, 44, .22), 0 0 0 1px rgba(255, 150, 80, .25); }
50% { box-shadow: 0 24px 70px rgba(0, 0, 0, .6), 0 0 34px rgba(255, 107, 44, .45), 0 0 70px rgba(255, 90, 20, .18), 0 0 0 1px rgba(255, 170, 110, .45); }
}
/* Samouczek – otwarcie: pełna czerń rozsuwa się od środka (maska kołowa), zapala się pomarańczowe światło, karta wyskakuje,
zza niej ulatują iskierki i ikony. @property – płynna animacja promienia maski (bez wsparcia: zwykłe wygaszenie). */
@property --tour-r { syntax: ""; inherits: false; initial-value: 0px; }
.tour-curtain { position: fixed; inset: 0; background: #000; pointer-events: none; opacity: 0; }
.tour.intro .tour-curtain { opacity: 1; animation: tour-iris 3.2s cubic-bezier(.55, 0, .25, 1) .5s forwards;
-webkit-mask: radial-gradient(circle at 50% 50%, transparent var(--tour-r), #000 calc(var(--tour-r) + 140px));
mask: radial-gradient(circle at 50% 50%, transparent var(--tour-r), #000 calc(var(--tour-r) + 140px)); }
@keyframes tour-iris { 0% { --tour-r: 0px; opacity: 1; } 85% { opacity: 1; } 100% { --tour-r: 140vmax; opacity: 0; } }
.tour-bloom { position: fixed; left: 50%; top: 50%; width: 760px; height: 760px; margin: -380px 0 0 -380px; border-radius: 50%; pointer-events: none;
background: radial-gradient(circle, rgba(255, 140, 70, .34), rgba(255, 107, 44, .12) 38%, transparent 68%); opacity: 0; transform: scale(.2); }
.tour.intro .tour-bloom { animation: tour-bloom 3.6s ease-out .2s forwards; }
@keyframes tour-bloom { 0% { opacity: 0; transform: scale(.2); } 35% { opacity: 1; transform: scale(1.05); } 100% { opacity: 0; transform: scale(1.3); } }
/* karta od razu na scenie – płynnie wyłania się z czerni (bez opóźnienia), potem przelatuje po niej błysk światła */
/* tour-fire na pierwszym miejscu i bez opóźnienia – po zdjęciu .intro ta sama animacja płynie dalej (bez „przeładowania” karty) */
.tour.intro .tour-tip, .tour.hot.intro .tour-tip.in { animation: tour-fire 2.6s ease-in-out infinite, tour-emerge .45s ease-out both; overflow: hidden; }
@keyframes tour-emerge { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
.tour.intro .tour-tip::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
background: linear-gradient(105deg, transparent 35%, rgba(255, 220, 190, .28) 48%, rgba(255, 255, 255, .45) 50%, rgba(255, 220, 190, .28) 52%, transparent 65%);
transform: translateX(-120%); animation: tour-shine 1.1s ease-in-out .5s forwards; }
@keyframes tour-shine { to { transform: translateX(120%); } }
.tour-sparks { position: fixed; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.tour-spark { position: absolute; top: 40px; width: 7px; height: 7px; margin-left: -3px; border-radius: 50%;
background: radial-gradient(circle, #fff3e6, #ff9a55 55%, rgba(255, 107, 44, 0)); box-shadow: 0 0 8px rgba(255, 140, 70, .9);
opacity: 0; animation: tour-rise ease-out forwards; }
.tour-spark.glyph { width: auto; height: auto; background: none; box-shadow: none; color: #ffc59a; font-size: 22px; line-height: 1;
text-shadow: 0 0 10px rgba(255, 107, 44, .9); }
@keyframes tour-rise {
0% { opacity: 0; transform: translate(0, 0) scale(var(--s)); }
15% { opacity: 1; }
100% { opacity: 0; transform: translate(var(--drift), var(--rise)) scale(calc(var(--s) * .6)) rotate(25deg); }
}
.tour-tip { z-index: 1; }
@media (prefers-reduced-motion: reduce) { .tour.intro .tour-curtain, .tour.intro .tour-bloom { display: none; } .tour.intro .tour-tip { animation: none; } }
/* Samouczek: pytanie „Na pewno chcesz pominąć?” – zakrywa treść karty */
.tour-confirm { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
padding: 20px; border-radius: inherit; background: linear-gradient(160deg, #1a1616, #0c0b0d); }
.tour-confirm[hidden] { display: none; }
.tour-confirm h3 { margin: 0 0 6px; font-size: 18px; font-weight: 500; }
.tour-confirm p { margin: 0 0 16px; color: #b9c3d3; font-size: 13.5px; }
.tour-confirm-foot { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.tour-tip.asking { min-height: 190px; }
.tour-tip.asking .tour-arrow { display: none; }
/* znaczki pakietów w samouczku (MAX, PRO · MAX) – zawsze lodowy błękit */
.tour-hot { color: #cfeeff; background: rgba(76, 194, 255, .14); border-color: rgba(127, 214, 255, .5); }
/* znaczki pakietów w samouczku – wyraźniej: pełny lodowy gradient, ciemny tekst, poświata */
.tour-hot { font-size: 12.5px; padding: 4px 12px; letter-spacing: .1em; color: #07131c; border: 0;
background: linear-gradient(140deg, #e2f5ff, #7fd2ff 55%, #4cc2ff); box-shadow: 0 0 16px rgba(76, 194, 255, .55); }
/* Samouczek: błysk okrążający ramkę karty – jak przycisk „Zacznij teraz” na stronie głównej (--snake z sekcji hero) */
.tour-tip::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 4;
background: conic-gradient(from var(--snake), transparent 0deg, transparent 220deg, rgba(255, 190, 140, .35) 275deg, #fff2e6 335deg, transparent 360deg);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
filter: drop-shadow(0 0 5px rgba(255, 170, 110, .9)); animation: btn-snake 4.2s linear infinite; }
@media (prefers-reduced-motion: reduce) { .tour-tip::after { animation: none; opacity: 0; } }
/* Strona główna: pasek „Wróć do samouczka” (pominięty samouczek, pierwszy miesiąc) – w stylu kart samouczka */
.tour-return { position: relative; display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 20px; color: var(--text);
text-decoration: none; border: 1px solid transparent; overflow: visible; isolation: isolate;
background: radial-gradient(120% 140% at 0% 0%, rgba(255, 107, 44, .2), transparent 60%) padding-box,
linear-gradient(160deg, rgba(26, 22, 22, .96), rgba(12, 11, 13, .96)) padding-box,
linear-gradient(150deg, #ffc08f, rgba(255, 107, 44, .5) 45%, rgba(255, 255, 255, .06)) border-box;
animation: tour-fire 2.6s ease-in-out infinite; }
.tour-return::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
background: conic-gradient(from var(--snake), transparent 0deg, transparent 220deg, rgba(255, 190, 140, .35) 275deg, #fff2e6 335deg, transparent 360deg);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
filter: drop-shadow(0 0 5px rgba(255, 170, 110, .9)); animation: btn-snake 4.2s linear infinite; }
.tour-return:hover { color: var(--text); }
.tour-return-ic { flex: none; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; font-size: 20px; color: #2a0f02;
background: linear-gradient(140deg, #ffd6b3, #ff6b2c); box-shadow: 0 0 22px rgba(255, 107, 44, .55); }
.tour-return-txt { flex: 1; min-width: 0; }
.tour-return-txt strong { display: block; font-size: 16px; font-weight: 500; }
.tour-return-txt small { display: block; color: #b9c3d3; font-size: 13.5px; margin-top: 2px; }
.tour-return-btn { flex: none; }
.tour-return-sparks { position: absolute; left: 41px; top: 50%; width: 0; height: 0; pointer-events: none; }
.tour-return-sparks i { position: absolute; width: 6px; height: 6px; border-radius: 50%; opacity: 0;
background: radial-gradient(circle, #fff3e6, #ff9a55 55%, rgba(255, 107, 44, 0)); box-shadow: 0 0 8px rgba(255, 140, 70, .9); }
.tour-return:hover .tour-return-sparks i { animation: tr-spark 1.1s ease-out infinite; }
.tour-return-sparks i:nth-child(1) { --x: -30px; --y: -46px; animation-delay: 0s; } .tour-return-sparks i:nth-child(2) { --x: 18px; --y: -52px; animation-delay: .18s; }
.tour-return-sparks i:nth-child(3) { --x: 40px; --y: -30px; animation-delay: .36s; } .tour-return-sparks i:nth-child(4) { --x: -44px; --y: -20px; animation-delay: .54s; }
.tour-return-sparks i:nth-child(5) { --x: 6px; --y: -60px; animation-delay: .72s; } .tour-return-sparks i:nth-child(6) { --x: 30px; --y: -48px; animation-delay: .9s; }
@keyframes tr-spark { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1); } }
@media (max-width: 520px) { .tour-return { flex-wrap: wrap; } .tour-return-btn { width: 100%; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .tour-return, .tour-return::after, .tour-return:hover .tour-return-sparks i { animation: none; } }
.tour-return[hidden] { display: none; }
.tour-return.appear { animation: tour-return-in .6s cubic-bezier(.2, .9, .3, 1.2) both, tour-fire 2.6s ease-in-out infinite; }
@keyframes tour-return-in { from { opacity: 0; translate: 0 -12px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
/* Strona główna: pasek „Dokończ rejestrację · etap X/3” (zamiast dużej karty z listą kroków) */
.ob-bar { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 18px; color: var(--text); text-decoration: none;
background: var(--surface); border: 1px solid rgba(76, 194, 255, .35); box-shadow: 0 0 30px rgba(76, 194, 255, .08); }
.ob-bar:hover { color: var(--text); border-color: rgba(127, 214, 255, .6); }
.ob-bar-ring { width: 26px; height: 26px; }
.ob-bar-txt { flex: 1; min-width: 0; }
.ob-bar-txt strong { display: block; font-weight: 500; font-size: 15px; }
.ob-bar-txt small { display: block; color: var(--muted); font-size: 13px; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-bar-prog { flex: none; width: 140px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.ob-bar-prog i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7fd2ff, var(--ice)); }
@media (max-width: 640px) { .ob-bar { flex-wrap: wrap; } .ob-bar-prog { order: 5; width: 100%; } .ob-bar .btn { margin-left: auto; } }
/* Dokończ rejestrację (etapy 2–3) w panelu – formularz w karcie, szerokość jak dotąd */
.ob-panel { max-width: 860px; }
.ob-panel-card { padding: 26px; }
.ob-panel-card .ob-stepper { margin-bottom: 20px; }
/* Wskaźniki bez pakietu z analityką: całe kafelki rozmyte (jak zablokowana Analityka) + jeden przycisk „Kup PRO” nad nimi */
.stats-lock { position: relative; }
.stats-lock .stats-grid { filter: blur(7px) saturate(.8); opacity: .7; pointer-events: none; user-select: none; }
.stats-lock-cta { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; box-shadow: 0 0 30px rgba(255, 107, 44, .35); }
/* Pasek „Dokończ rejestrację” – wyraźniej: niebieska poświata i błysk krążący po ramce */
.ob-bar { position: relative; border: 1px solid transparent; isolation: isolate;
background: radial-gradient(120% 140% at 0% 0%, rgba(76, 194, 255, .16), transparent 60%) padding-box,
linear-gradient(160deg, rgba(18, 26, 38, .97), rgba(9, 12, 18, .97)) padding-box,
linear-gradient(150deg, #bfe9ff, rgba(76, 194, 255, .5) 45%, rgba(255, 255, 255, .06)) border-box;
animation: ob-glow 2.6s ease-in-out infinite; }
@keyframes ob-glow { 0%, 100% { box-shadow: 0 0 22px rgba(76, 194, 255, .2); } 50% { box-shadow: 0 0 38px rgba(76, 194, 255, .42), 0 0 70px rgba(76, 194, 255, .14); } }
.ob-bar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
background: conic-gradient(from var(--snake), transparent 0deg, transparent 220deg, rgba(150, 220, 255, .35) 275deg, #e9f7ff 335deg, transparent 360deg);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
filter: drop-shadow(0 0 5px rgba(127, 214, 255, .9)); animation: btn-snake 4.2s linear infinite; }
/* „Wróć do samouczka” – mniejszy, węższy pasek */
.tour-return { display: inline-flex; max-width: 520px; width: 100%; gap: 12px; padding: 10px 14px; border-radius: 16px; }
.tour-return-ic { width: 30px; height: 30px; border-radius: 10px; font-size: 15px; }
.tour-return-txt strong { font-size: 14px; }
.tour-return-txt small { font-size: 12.5px; }
.tour-return-sparks { left: 29px; }
.sample-cta.tour-return { display: flex; max-width: none; padding: 16px 20px; } /* pasek na przykładowym planie – pełna szerokość */
.sample-cta .tour-return-ic { width: 42px; height: 42px; border-radius: 14px; font-size: 20px; }
.sample-cta .tour-return-txt strong { font-size: 16px; }
@media (prefers-reduced-motion: reduce) { .ob-bar, .ob-bar::after { animation: none; } }
.tour-return { display: flex; max-width: none; } /* „Wróć do samouczka” na całą szerokość (niższy niż wcześniej) */
.tour-return::after { content: none; } /* „Wróć do samouczka” bez krążącego błysku na ramce */
.ob-bar::after { content: none; } /* „Dokończ rejestrację” bez krążącego błysku – zostaje niebieska poświata */
/* „Dokończ rejestrację” i „Wróć do samouczka”: bez pulsującej poświaty – statycznie, a co kilka sekund przelatuje po nich delikatny błysk */
.ob-bar, .tour-return, .tour-return.appear { animation: none; box-shadow: none; }
.tour-return.appear { animation: tour-return-in .6s cubic-bezier(.2, .9, .3, 1.2) both; }
.ob-bar::before, .tour-return::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .09) 47%, rgba(255, 255, 255, .16) 50%, rgba(255, 255, 255, .09) 53%, transparent 60%) no-repeat;
background-size: 250% 100%; background-position: 150% 0; animation: bar-shimmer 8s ease-in-out infinite; }
.tour-return::before { animation-delay: 1.2s; }
@keyframes bar-shimmer { 0%, 75% { background-position: 150% 0; } 92%, 100% { background-position: -50% 0; } }
@media (prefers-reduced-motion: reduce) { .ob-bar::before, .tour-return::before { animation: none; opacity: 0; } }
/* shimmer: oba paski naraz i delikatniej */
.tour-return::before { animation-delay: 0s; }
.ob-bar::before, .tour-return::before {
background-image: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .05) 47%, rgba(255, 255, 255, .09) 50%, rgba(255, 255, 255, .05) 53%, transparent 58%); }
/* Funkcja spoza pakietu (rozmyta strona): karta „Dostępne w planie …” w pomarańczu – jak przyciski zakupu */
.locked-cta { border: 1px solid transparent;
background: radial-gradient(120% 120% at 50% 0%, rgba(255, 107, 44, .16), transparent 60%) padding-box,
linear-gradient(160deg, rgba(26, 22, 22, .97), rgba(12, 11, 13, .97)) padding-box,
linear-gradient(150deg, #ffc08f, rgba(255, 107, 44, .5) 45%, rgba(255, 255, 255, .06)) border-box;
box-shadow: 0 20px 60px rgba(0, 0, 0, .5), 0 0 34px rgba(255, 107, 44, .16); }
.locked-cta .locked-ic { color: #2a0f02; background: linear-gradient(140deg, #ffd6b3, #ff6b2c); box-shadow: 0 0 22px rgba(255, 107, 44, .5); }
.locked-cta { background: radial-gradient(120% 120% at 50% 0%, rgba(255, 107, 44, .16), transparent 60%) padding-box,
linear-gradient(160deg, rgba(26, 22, 22, .97), rgba(12, 11, 13, .97)) padding-box,
linear-gradient(150deg, #ffc08f, #ff8a4c 50%, #ff6b2c) border-box; } /* cała ramka pomarańczowa */
/* .app .card (niebieska ramka kart w panelu) jest silniejsza – karta zakupu z tą samą szczegółowością */
.app .locked-cta.card { border: 1px solid transparent;
background: radial-gradient(120% 120% at 50% 0%, rgba(255, 107, 44, .16), transparent 60%) padding-box,
linear-gradient(160deg, rgba(26, 22, 22, .97), rgba(12, 11, 13, .97)) padding-box,
linear-gradient(150deg, #ffc08f, #ff8a4c 50%, #ff6b2c) border-box;
box-shadow: 0 20px 60px rgba(0, 0, 0, .5), 0 0 34px rgba(255, 107, 44, .18); }
/* Strona główna: paski „Dokończ rejestrację” i „Wróć do samouczka” obok siebie; jeden (drugi ukryty/zrobiony) – cała szerokość */
.dash-bars { display: flex; gap: 16px; align-items: stretch; }
.dash-bars > a { flex: 1 1 0; min-width: 0; margin: 0; }
.dash-bars > a[hidden] { display: none; }
.dash-bars .ob-bar-prog { width: 90px; }
@media (max-width: 900px) { .dash-bars { flex-direction: column; } }
/* „Dokończ rejestrację” w pomarańczu – jak „Wróć do samouczka” */
.ob-bar { background: radial-gradient(120% 140% at 0% 0%, rgba(255, 107, 44, .2), transparent 60%) padding-box,
linear-gradient(160deg, rgba(26, 22, 22, .96), rgba(12, 11, 13, .96)) padding-box,
linear-gradient(150deg, #ffc08f, rgba(255, 107, 44, .5) 45%, rgba(255, 255, 255, .06)) border-box; }
.ob-bar:hover { border-color: transparent; }
.ob-bar .ob-bar-ring { background: conic-gradient(#ff8a3a calc(var(--p) * 1%), rgba(255, 255, 255, .12) 0); }
.ob-bar-prog i { background: linear-gradient(90deg, #ffc08f, #ff6b2c); }
.ob-bar-txt small { color: #b9c3d3; }
/* przycisk niedostępny w pakiecie (np. „Stwórz plan promo” na darmowym koncie) – wyszarzony, ale klikalny (wybór pakietu) */
.btn.btn-off, .btn.btn-off:hover { background: rgba(255, 255, 255, .06); color: var(--muted); border-color: rgba(255, 255, 255, .1); box-shadow: none; filter: grayscale(1); }
.trend-cover-fake { display: grid; place-items: center; color: rgba(255, 255, 255, .8); font-size: 26px; background-size: cover; background-position: center;
text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.dash-bars > a { flex: 0 1 calc(50% - 8px); } /* zawsze pół szerokości – także gdy zostaje jeden pasek */
@media (max-width: 900px) { .dash-bars > a { flex-basis: auto; } }
/* „Materiały do poprawy” (panel/_rejected_uploads.html): kafelki z miniaturą, komentarzem zespołu i wgraniem nowej wersji */
.app .rej-card.card { border-color: rgba(255, 93, 108, .28);
background: radial-gradient(90% 120% at 0% 0%, rgba(255, 93, 108, .08), transparent 55%), rgba(10, 13, 19, .84); }
.rej-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.rej-head h3 { margin: 0 0 4px; display: flex; align-items: center; gap: 10px; }
.rej-head p { margin: 0; font-size: 14px; }
.rej-ic { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 18px;
color: #ff8d98; background: rgba(255, 93, 108, .12); border: 1px solid rgba(255, 93, 108, .35); }
.rej-count { font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; color: #ff8d98; background: rgba(255, 93, 108, .12); }
.rej-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.rej-item { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .025);
border: 1px solid var(--line); min-width: 0; }
.rej-item.done { opacity: .65; }
.rej-top { display: flex; gap: 12px; align-items: center; min-width: 0; }
.rej-thumb { flex: none; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: var(--bg-2); }
.rej-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rej-meta { min-width: 0; display: grid; gap: 6px; justify-items: start; }
.rej-meta strong { font-size: 14px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rej-note { position: relative; font-size: 13.5px; padding: 8px 12px; border-radius: 4px 12px 12px 12px; background: rgba(255, 93, 108, .08);
border-left: 2px solid rgba(255, 93, 108, .6); color: var(--text); }
.rej-note span { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #ff8d98; margin-bottom: 2px; }
.rej-form { display: flex; gap: 8px; align-items: center; margin-top: auto; }
.rej-pick { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px; cursor: pointer;
border: 1px dashed rgba(127, 214, 255, .35); color: var(--muted); font-size: 13px; transition: border-color .2s, color .2s, background .2s; }
.rej-pick:hover, .rej-pick:focus-within { border-color: rgba(127, 214, 255, .7); color: var(--text); background: rgba(76, 194, 255, .05); }
.rej-pick.chosen { border-style: solid; color: var(--text); }
.rej-pick input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.rej-pick-ic { color: var(--ice); font-weight: 700; }
.rej-pick-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rej-form .btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.rej-grid.collapsed .rej-more { display: none; }
.rej-toggle { margin-top: 14px; }
/* Dokumenty prawne (public/legal.html) */
.legal { max-width: 860px; }
.legal-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.legal-tabs a { padding: 7px 15px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); font-size: 14px; text-decoration: none; }
.legal-tabs a:hover { color: var(--text); border-color: rgba(127, 214, 255, .5); }
.legal-tabs a.on { color: #04121c; background: linear-gradient(180deg, #bfe9ff, var(--ice)); border-color: transparent; font-weight: 600; }
.legal-doc { padding: 32px 36px; line-height: 1.65; }
.legal-doc h1 { font-size: clamp(26px, 4vw, 34px); margin: 0 0 18px; }
.legal-doc h2 { font-size: 19px; margin: 28px 0 10px; }
.legal-doc ol, .legal-doc ul { padding-left: 22px; display: grid; gap: 6px; }
.legal-doc li > ul { margin-top: 6px; }
.legal-doc p, .legal-doc li { color: var(--text-2, #c9d3e0); font-size: 15px; }
.legal-doc a { color: var(--ice); }
.legal-table { width: 100%; font-size: 14px; border-collapse: collapse; }
.legal-table th, .legal-table td { text-align: left; padding: 9px 10px; border-top: 1px solid var(--line); vertical-align: top; }
.legal-date { margin-top: 30px; color: var(--muted); font-size: 13px; }
.legal-todo { background: rgba(255, 170, 60, .2); color: #ffc88a; padding: 0 4px; border-radius: 4px; }
.foot-legal a { white-space: nowrap; }
@media (max-width: 600px) { .legal-doc { padding: 22px 18px; } }
/* Strona główna: przypomnienie o potwierdzeniu adresu e-mail (services/verify.py) */
.verify-bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; }
.verify-ic { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-weight: 700;
color: var(--ice); background: rgba(76, 194, 255, .1); border: 1px solid rgba(76, 194, 255, .3); }
.verify-txt { flex: 1; min-width: 0; }
.verify-txt strong { display: block; font-size: 14.5px; font-weight: 600; }
.verify-txt small { display: block; color: var(--muted); font-size: 13px; }
@media (max-width: 640px) { .verify-bar { flex-wrap: wrap; } .verify-bar .btn { margin-left: auto; } }
/* Rejestracja: zgody (regulamin, marketing) cieńszą czcionką niż etykiety pól */
.check.consent, .check.consent span { font-weight: 400; font-size: 13.5px; color: var(--muted); }
.check.consent a { color: var(--ice); font-weight: 400; }
/* Album / EP (panel/album.html, album_form.html, album_empty.html) */
.album-head { display: flex; gap: 20px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.album-cover { flex: none; width: 120px; height: 120px; border-radius: 14px; overflow: hidden; display: grid; place-items: center;
background: linear-gradient(140deg, rgba(76, 194, 255, .2), rgba(255, 107, 44, .15)); border: 1px solid var(--line-2); font-size: 40px; color: var(--muted); }
.album-cover img { width: 100%; height: 100%; object-fit: cover; }
.album-head-txt { flex: 1; min-width: 220px; }
.album-head-txt h1 { margin: 4px 0 6px; font-size: clamp(24px, 3vw, 32px); }
.album-head-txt p { margin: 0; }
.album-cover-form { display: grid; gap: 4px; justify-items: end; }
.album-note { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 18px; padding: 14px 18px; }
.album-note > div, .album-wait { display: grid; gap: 2px; }
.album-proposed { border-color: rgba(255, 138, 58, .45); }
.album-sec { margin-bottom: 18px; }
.album-tracks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.album-track { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .025);
border: 1px solid var(--line); flex-wrap: wrap; }
.album-track.role-single { border-color: rgba(76, 194, 255, .3); }
.album-track.role-focus { border-color: rgba(255, 138, 58, .45); }
.at-num { flex: none; width: 26px; text-align: center; font-weight: 700; color: var(--muted); }
.at-title { flex: 1; min-width: 160px; display: grid; }
.at-title small { font-size: 12px; }
.at-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.at-status form { margin: 0; }
.at-audio { margin: 0; }
.at-audio-btn { margin: 0; font-size: 12.5px; font-weight: 500; color: var(--muted); cursor: pointer; border: 1px dashed var(--line-2); padding: 4px 10px; border-radius: 999px; }
.at-audio-btn:hover { color: var(--text); border-color: rgba(127, 214, 255, .5); }
.at-move { display: inline-flex; gap: 4px; }
.at-move button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line-2); background: transparent; color: var(--text); cursor: pointer; }
.album-reorder { margin-top: 12px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.album-reorder p { margin: 0; }
.album-singles-edit { margin-top: 14px; }
.album-singles-edit summary { cursor: pointer; color: var(--ice); font-weight: 600; }
.album-singles-grid { display: grid; gap: 6px; margin: 10px 0 14px; }
.album-single-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.album-single-row > span { flex: 1; min-width: 160px; }
.album-single-row .check { margin: 0; }
.album-date summary { list-style: none; }
.album-date summary::-webkit-details-marker { display: none; }
.album-date[open] form { margin-top: 10px; gap: 8px; }
.album-timeline { list-style: none; margin: 0; padding: 0; display: grid; }
.album-timeline li { display: grid; grid-template-columns: 70px 22px 1fr; align-items: center; gap: 10px; padding: 8px 0; position: relative; }
.album-timeline li::before { content: ""; position: absolute; left: 80px; top: 0; bottom: 0; width: 2px; background: var(--line-2); }
.album-timeline li:first-child::before { top: 50%; } .album-timeline li:last-child::before { bottom: 50%; }
.tl-date { font-weight: 600; font-size: 14px; display: grid; } .tl-date small { color: var(--muted); font-weight: 400; font-size: 11.5px; }
.tl-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--line-2); justify-self: center; position: relative; z-index: 1; }
.tl-single .tl-dot { background: var(--ice); } .tl-single_done .tl-dot { background: #2fd67a; }
.tl-milestone .tl-dot { background: #c9b98f; border-radius: 3px; transform: rotate(45deg); }
.tl-release .tl-dot { width: 18px; height: 18px; background: #ff8a3a; box-shadow: 0 0 14px rgba(255, 138, 58, .7); }
.tl-after .tl-dot { background: transparent; border: 2px dashed var(--muted); }
.album-timeline li.past { opacity: .55; }
.album-mats { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.album-mat { aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--bg-2); display: grid; place-items: center; color: var(--muted); }
.album-mat img { width: 100%; height: 100%; object-fit: cover; }
.album-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.album-task { display: flex; gap: 12px; align-items: center; padding: 8px 4px; border-top: 1px solid var(--line); }
.album-task:first-child { border-top: 0; }
.album-task .at-date { flex: none; width: 52px; font-weight: 600; font-size: 13.5px; }
.album-task .at-task { display: grid; } .album-task .at-task small { font-size: 12.5px; }
.album-task.done .at-task strong { text-decoration: line-through; color: var(--muted); }
.album-task.late .at-date { color: #ff8d98; }
.album-cd { display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; border-color: rgba(255, 138, 58, .35); }
.album-cd h3 { margin: 0 0 4px; } .album-cd p { margin: 0; max-width: 620px; }
.album-empty { display: grid; gap: 14px; justify-items: start; max-width: 760px; }
.album-steps { margin: 0; padding-left: 22px; display: grid; gap: 10px; }
.album-steps li { display: grid; } .album-steps li span { font-size: 13.5px; }
.album-form .card { margin-bottom: 18px; } .album-form h3 { margin-top: 0; }
.album-form-tracks { padding-left: 22px; display: grid; gap: 12px; }
.album-form-tracks { list-style: none; padding: 0; counter-reset: none; }
.aft-row { display: grid; grid-template-columns: 64px 1fr auto 170px; gap: 10px 12px; align-items: center; padding: 14px; border-radius: 14px;
border: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.aft-row textarea { grid-column: 2 / -1; min-height: 64px; }
.aft-row .check { margin: 0; }
.aft-row .aft-audio { grid-column: 2 / -1; justify-self: start; }
.aft-row .aft-pos { text-align: center; }
.aft-row .aft-date[hidden] { display: none; }
.at-audio-btn.chosen, .album-form label.btn.chosen { color: var(--text); border-color: rgba(47, 214, 122, .6); }
@media (max-width: 640px) { .aft-row { grid-template-columns: 56px 1fr; } .aft-row textarea, .aft-row .aft-audio, .aft-row .aft-released, .aft-row .aft-date { grid-column: 1 / -1; } .album-timeline li { grid-template-columns: 56px 18px 1fr; } .album-timeline li::before { left: 64px; } }
.album-q { margin-top: 6px; }
.album-q-pick { grid-template-columns: repeat(2, minmax(120px, 180px)); margin-bottom: 10px; }
.album-q-more select { max-width: 460px; }
.album-q-more .is-locked { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
/* ---------------------------------------------------------------- Płatność (panel/checkout.html) */
.checkout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.checkout-pick { display: flex; flex-direction: column; gap: 18px; }
.checkout-pick .billing-toggle { margin: 0; }
.checkout-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.checkout-plan { margin: 0; cursor: pointer; }
.checkout-plan input { position: absolute; opacity: 0; pointer-events: none; }
.checkout-plan span { display: flex; flex-direction: column; gap: 4px; padding: 18px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.checkout-plan strong { font-size: 18px; letter-spacing: .04em; }
.checkout-plan small { color: var(--muted); font-size: 13px; }
.checkout-plan input:checked + span { border-color: var(--ice); box-shadow: 0 0 34px rgba(76, 194, 255, .16); }
.checkout-plan input:focus-visible + span { outline: 2px solid var(--ice); outline-offset: 2px; }
.checkout-sum { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 20px; }
.checkout-label { margin: 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.checkout-total { font: 700 38px/1.1 var(--font); }
.checkout-total small { font-size: 15px; font-weight: 500; color: var(--muted); }
.checkout-consent { align-items: flex-start; font-size: 13px; line-height: 1.5; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 12px; }
.checkout-consent input { margin-top: 3px; flex-shrink: 0; }
.checkout-wait { max-width: 520px; margin: 40px auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.checkout-wait .spinner { width: 34px; height: 34px; border-width: 3px; color: var(--ice); }
.checkout-bare { display: grid; place-items: center; min-height: 100vh; }
.sub-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.sub-note { margin: 10px 0 0; font-size: 13px; }
.sub-pending { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); }
.sub-pending form { margin: 0; }
.sub-change { display: flex; flex-direction: column; gap: 8px; }
.sub-change form { margin: 0; }
.shop-pay-consent { font-size: 12.5px; line-height: 1.45; }
@media (max-width: 860px) {
.checkout { grid-template-columns: minmax(0, 1fr); }
.checkout-sum { position: static; }
}
@media (max-width: 520px) { .checkout-plans { grid-template-columns: minmax(0, 1fr); } }
.billing-toggle a { text-decoration: none; }
.billing-toggle span.on { background: var(--surface-2); color: var(--text); }
.shop-line .shop-pay-consent, .consult-foot .shop-pay-consent { flex: 1 0 100%; margin: 0; }
.order-pay { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 8px; max-width: 340px; }
.checkout-feats .feat-list { columns: 2; column-gap: 28px; margin: 10px 0 0; }
.checkout-feats .feat-list li { break-inside: avoid; }
@media (max-width: 520px) { .checkout-feats .feat-list { columns: 1; } }
/* CRM → Social media: konta połączone przez OAuth i publikacja z okna posta */
.soc-accounts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 18px; }
.soc-acc { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); }
.soc-acc-name { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.soc-acc form { margin: 0; }
.soc-publish { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.soc-publish .post-pub { align-self: flex-start; }
.soc-status { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.soc-status li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.soc-status li > span:first-child { min-width: 80px; }
.soc-err { flex-basis: 100%; color: var(--err); }
.soc-pages { display: grid; gap: 12px; max-width: 560px; }
.soc-page { display: flex; gap: 10px; align-items: center; cursor: pointer; }
dialog#post-dialog .post-right:has(.soc-publish) .post-form { flex: none; }
dialog#post-dialog .soc-publish { flex: none; }
.card:has(> .soc-accounts) { margin-bottom: 18px; }
.soc-accounts { margin-bottom: 0; }
.soc-publish > * { flex-shrink: 0; }
.soc-publish .post-pub { min-height: 38px; }
.soc-auto { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; margin-top: 16px; }
.soc-auto .post-pub { height: auto; min-height: 38px; padding: 8px 12px; }
.soc-tt-box { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); }
.soc-tt-box .check { font-weight: 400; font-size: 13px; margin: 0; }
.soc-tt-head { display: flex; gap: 8px; align-items: center; }
.soc-tt-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.soc-tt-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; }
.soc-tt-checks { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: 13px; }
.soc-tt-sub { display: flex; flex-direction: column; gap: 6px; padding-left: 26px; }
.soc-tt-label { color: var(--accent, var(--text)); font-weight: 500; }
/* Raport audytu profili w panelu (panel/audit.html): zwarty nagłówek z logo po prawej, punkty + podsumowanie AI, karty serwisów */
.aud-top { padding: 20px 24px; margin-bottom: 16px; }
.aud-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.aud-head .eyebrow { margin-bottom: 4px; }
.aud-head h1 { margin: 0; font-size: 26px; font-weight: 500; }
.aud-logo { height: 30px; width: auto; opacity: .9; flex: none; }
.aud-links { display: flex; gap: 10px; margin: 8px 0 0; }
.aud-links a { color: var(--muted); display: inline-grid; } .aud-links a:hover { color: var(--text); }
.aud-links svg { width: 18px; height: 18px; }
.aud-score { display: flex; gap: 20px; align-items: center; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .08); }
.aud-ring { flex: none; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center;
background: conic-gradient(var(--ice) calc(var(--p) * 1%), rgba(255, 255, 255, .08) 0); }
.aud-ring span { width: 66px; height: 66px; border-radius: 50%; background: var(--surface, #0b0d12); display: grid; place-items: center; font-size: 20px; font-weight: 600; }
.aud-sum h2 { margin: 0 0 6px; font-size: 18px; font-weight: 500; }
.aud-sum p { margin: 0; line-height: 1.55; }
.aud-lock { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
border: 1px solid rgba(76, 194, 255, .35); background: rgba(76, 194, 255, .06); }
.aud-lock p { margin: 4px 0 0; }
.aud-groups { display: grid; grid-template-columns: 1fr; gap: 16px; }
.aud-blurred { filter: blur(6px); pointer-events: none; user-select: none; opacity: .7; }
.aud-group { padding: 18px 20px; }
.aud-group-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.aud-group-head > div { min-width: 0; }
.aud-group-head strong { display: block; }
.aud-name { display: inline-flex !important; align-items: center; gap: 8px; }
.aud-name svg { width: 17px; height: 17px; color: var(--text); opacity: .85; flex: none; }
.aud-ava { flex: none; width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: rgba(255, 255, 255, .06); }
.aud-ava-ico { display: grid; place-items: center; color: var(--muted); } .aud-ava-ico svg { width: 18px; height: 18px; }
.aud-link { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aud-count { margin-left: auto; flex: none; font-size: 13px; padding: 3px 10px; border-radius: 999px; color: var(--muted); border: 1px solid rgba(255, 255, 255, .1); }
.aud-count.ok { color: #6fdc9b; border-color: rgba(111, 220, 155, .35); }
.aud-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; } /* analiza tej samej wysokości co sprawdzenia */
.aud-body.no-text { grid-template-columns: 1fr; }
.aud-checks .aud-check:first-child { border-top: 0; padding-top: 0; }
.aud-text { margin: 0; line-height: 1.6; color: var(--text); padding: 14px 16px; border-radius: 14px; background: rgba(76, 194, 255, .05);
border: 1px solid rgba(76, 194, 255, .18); }
.aud-text p { margin: 0; }
.aud-text-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ice); margin-bottom: 6px; }
.aud-check { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, .06); font-size: 14px; }
.aud-check .t { font-weight: 500; }
.aud-check .d { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.aud-check > div { min-width: 0; }
.aud-check .d.one-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* bio – jedna linia z „…” */
.aud-check .tip { font-size: 12.5px; color: #ffb4a8; margin-top: 2px; }
.aud-mark { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700;
color: #fff; background: rgba(255, 255, 255, .15); margin-top: 1px; }
.aud-mark.ok { background: #1f9d5c; } .aud-mark.bad { background: #d93a40; }
.aud-foot { margin-top: 14px; }
@media (max-width: 860px) { .aud-body { grid-template-columns: 1fr; } .aud-score { align-items: flex-start; } .aud-logo { height: 22px; } }