/* ---------- panel lokalu ---------- */
.as-admin { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: -6px 0 18px; padding: 12px 16px; border-radius: 14px;
  background: rgba(255, 181, 71, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 181, 71, 0.45); color: #ffe2a8; font-size: 0.92rem; font-weight: 650; }
.as-admin[hidden] { display: none; }
.as-admin span { margin-right: auto; }
.as-admin a { color: #fff; font-weight: 800; }
.side-plan { font-size: 0.72rem; font-weight: 800; color: #d4bfff; padding: 3px 9px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(196, 173, 255, 0.55); }
.hello { margin: -14px 0 22px; color: var(--on-d-soft); font-size: 1rem; }

.copy-row { display: flex; gap: 8px; }
.copy-row .input { min-height: 44px; font-size: 0.92rem; }
.copy-row .btn { min-height: 44px; padding: 8px 16px; font-size: 0.9rem; }
.idea { display: grid; gap: 12px; padding: 18px; border-radius: 18px; background: linear-gradient(135deg, rgba(123, 77, 255, 0.22), rgba(255, 181, 71, 0.1)); box-shadow: inset 0 0 0 1px rgba(196, 173, 255, 0.3); }
.idea b { font-size: 1.02rem; }
.idea p { color: #e6e3ee; font-size: 0.94rem; }
.idea .btn { justify-self: start; min-height: 44px; padding: 10px 18px; font-size: 0.92rem; }

/* edytor karty */
.editor { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.ed-form { display: grid; gap: 18px; min-width: 0; }
.ed-form .box + .box { margin-top: 0; }
.ed-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 16px; }
.ed-form legend { padding: 0; margin-bottom: 4px; font-family: var(--display); font-weight: 800; font-stretch: 108%; font-size: 1.15rem; }
.tabs { display: inline-grid; grid-auto-flow: column; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.tabs button { min-height: 38px; padding: 6px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--on-d-soft); font: inherit; font-weight: 800; font-size: 0.9rem; cursor: pointer; }
.tabs button[aria-pressed="true"] { background: var(--grad-btn); color: #fff; }
.drop { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px; border-radius: 16px; cursor: pointer;
  background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.18); }
.drop:hover { background: rgba(255, 255, 255, 0.06); }
.drop:focus-within { box-shadow: inset 0 0 0 2px var(--violet); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop-thumb { width: 56px; height: 56px; border-radius: 14px; background: var(--night-3) center / cover no-repeat; display: grid; place-items: center; color: #8d87a0; }
.drop-thumb svg { width: 24px; height: 24px; }
.drop.has .drop-thumb svg { display: none; }
.drop b { display: block; font-size: 0.95rem; }
.drop small { display: block; color: var(--on-d-soft); font-size: 0.84rem; }
.color-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.color-own { display: inline-flex; align-items: center; gap: 8px; font-size: 0.86rem; font-weight: 700; color: var(--on-d-soft); }
.color-own input { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.color-own input::-webkit-color-swatch-wrapper { padding: 0; }
.color-own input::-webkit-color-swatch { border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; }
.icons { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; }
.icon-opt { position: relative; }
.icon-opt input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.icon-opt span { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); color: var(--gold); }
.icon-opt svg { width: 24px; height: 24px; }
.icon-opt input:checked + span { background: rgba(139, 92, 255, 0.2); box-shadow: inset 0 0 0 2px var(--violet); }
.icon-opt input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.mid-reward { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; }
.mid-reward[hidden] { display: none; }
.warn { padding: 12px 14px; border-radius: 12px; background: rgba(255, 181, 71, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 181, 71, 0.35); color: #ffe2a8; font-size: 0.88rem; font-weight: 600; }
.warn[hidden] { display: none; }

/* podgląd karty: Apple i Google */
.ed-preview { position: sticky; top: 20px; display: grid; gap: 16px; justify-items: center; }
.ed-preview .tabs { justify-self: center; }
.wc { --bg: #1f3d36; --ink: #f3f1ea; --accent: #f2b33d; width: 340px; max-width: 100%; color: var(--ink); background: var(--bg); font-size: 15px;
  border-radius: 18px; overflow: hidden; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.08); transition: background-color 250ms ease; }
.wc-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px 12px; }
.wc-org { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 800; }
.wc-org span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wc-logo { flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--accent) center / cover no-repeat; color: var(--bg); display: grid; place-items: center;
  font-family: var(--display); font-weight: 900; font-stretch: 120%; }
.wc-logo.img { color: transparent; }
.wc-count { text-align: right; line-height: 1.1; }
.wc small { display: block; font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.72; font-weight: 700; }
.wc-count b { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.wc-strip { position: relative; padding: 14px 14px; background: rgba(0, 0, 0, 0.22) center / cover no-repeat; }
.wc-strip.photo::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); }
.wc-strip .slots { position: relative; display: grid; gap: 8px; justify-items: center; }
.wc .slot { width: 36px; height: 36px; border-color: color-mix(in srgb, var(--ink) 50%, transparent); }
.wc .slot i { background: radial-gradient(circle, var(--accent) 0 30%, var(--bg) 32% 50%, var(--accent) 52% 64%, var(--bg) 66% 100%); }
.wc .slot.ico i { background: var(--accent); display: grid; place-items: center; color: var(--bg); }
.wc .slot.ico i svg { width: 60%; height: 60%; }
.wc .slot.gift { border: 2px solid var(--accent); }
.wc-fields { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px 6px; }
.wc-fields div { min-width: 0; }
.wc-fields div:last-child { text-align: right; }
.wc-fields b { display: block; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wc-qr { width: 112px; margin: 10px auto 16px; padding: 8px; border-radius: 10px; background: #fff; }
.wc-qr svg { display: block; width: 100%; }
.wc-title { display: none; }
/* Google: okrągłe logo, tytuł programu, obraz z pieczątkami na dole */
.wc.g { border-radius: 24px; display: flex; flex-direction: column; }
.wc.g .wc-logo { border-radius: 50%; }
.wc.g .wc-count { display: none; }
.wc.g .wc-title { display: block; padding: 0 16px; font-family: var(--body); font-size: 1.35rem; font-weight: 800; line-height: 1.2; }
.wc.g .wc-fields { order: 3; }
.wc.g .wc-gcount { display: block; }
.wc-gcount { display: none; }
.wc.g .wc-qr { order: 4; }
.wc.g .wc-strip { order: 5; }
.wc.g .wc-fields div:last-child { text-align: left; }
.wc-back { width: 340px; max-width: 100%; padding: 14px 16px; border-radius: 16px; background: var(--night-2); box-shadow: inset 0 0 0 1px var(--line-d); display: grid; gap: 8px; font-size: 0.9rem; }
.wc-back > b { font-size: 0.82rem; color: var(--on-d-soft); }
.wc-back div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; }
.wc-back span { color: var(--on-d-soft); }
.wc-back em { font-style: normal; overflow-wrap: anywhere; }
.savebar { position: sticky; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 18px; padding: 12px 14px 12px 18px; border-radius: 18px;
  background: #241f2e; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.savebar[hidden] { display: none; }
.savebar span { margin-right: auto; font-size: 0.92rem; font-weight: 650; color: #e6e3ee; }
.savebar .btn { min-height: 44px; padding: 10px 18px; font-size: 0.92rem; }

/* klienci */
.dots { display: grid; gap: 5px; min-width: 110px; }
.dots i { display: flex; gap: 3px; }
.dots i b { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
.dots i b.on { background: var(--gold); }
.dots small { font-size: 0.8rem; color: var(--on-d-soft); }
.pill { display: inline-block; margin: 2px 4px 2px 0; padding: 2px 8px; border-radius: 999px; font-size: 0.76rem; font-weight: 750; background: rgba(255, 255, 255, 0.07); color: #e6e3ee; }
.pill.off { color: #6f6a80; text-decoration: line-through; background: transparent; }
.list-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.list-tools .filters { margin: 0; }
.list-tools .search { width: min(300px, 100%); }

/* wiadomości */
.compose { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.chan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.chan label { position: relative; display: grid; gap: 4px; padding: 14px; border-radius: 16px; cursor: pointer; background: var(--night-3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.chan input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.chan b { font-size: 0.98rem; }
.chan small { color: var(--on-d-soft); font-size: 0.82rem; font-weight: 600; line-height: 1.35; }
.chan label:has(input:checked) { background: #2a2338; box-shadow: inset 0 0 0 2px var(--violet); }
.chan label:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; }
.counter { display: flex; justify-content: space-between; gap: 10px; font-size: 0.84rem; color: var(--on-d-soft); font-weight: 650; }
.counter .over { color: #ff9a9a; }
.when { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.when .input { width: auto; min-height: 44px; }
.phone-prev { position: sticky; top: 20px; display: grid; gap: 14px; }
.lk-screen { position: relative; aspect-ratio: 9 / 15; border-radius: 34px; padding: 22px 14px; overflow: hidden; display: grid; align-content: start; gap: 14px;
  background: radial-gradient(120% 80% at 30% 0%, #6b3fd6 0%, #2b1a52 45%, #120c1f 100%); box-shadow: 0 0 0 8px #0b0910, 0 30px 70px -20px rgba(0, 0, 0, 0.8); }
.lk-time { text-align: center; color: #fff; }
.lk-time small { display: block; font-size: 0.82rem; font-weight: 700; opacity: 0.85; }
.lk-time b { display: block; font-family: var(--display); font-size: 3.4rem; font-weight: 800; line-height: 1; }
.lk-nt { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 11px 12px; border-radius: 18px; background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: #fff; font-size: 0.86rem; line-height: 1.35; }
.lk-nt .app-i { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: #34c759; }
.lk-nt .app-i svg { width: 20px; height: 20px; }
.lk-nt .app-i.w { background: #111; }
.lk-nt .app-i.m { background: #2f7cf6; }
.lk-nt .head { display: flex; justify-content: space-between; opacity: 0.8; font-size: 0.76rem; font-weight: 700; }
.lk-nt b { display: block; }
.lk-nt p { overflow-wrap: anywhere; }
.send-sum { display: grid; gap: 6px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--line-d); font-size: 0.92rem; }
.send-sum b { font-size: 1.05rem; }

.gift { margin: -6px 0 18px; }
.extras { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 6px; font-size: 0.88rem; color: #ffe2a8; }
.extras li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 8px; }
.extras li::before { content: ""; width: 8px; height: 8px; margin-top: 0.5em; border-radius: 50%; background: var(--gold); }
/* bezpieczeństwo: przypomnienie na pulpicie i ustawienia */
.sec-nudge { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px 16px; align-items: center; margin: 0 0 18px; padding: 16px 18px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(123, 77, 255, 0.2), rgba(123, 77, 255, 0.05)); box-shadow: inset 0 0 0 1px rgba(196, 173, 255, 0.35); }
.sec-nudge[hidden] { display: none; }
.sec-nudge b { display: block; font-size: 1rem; }
.sec-nudge p { color: #e6e3ee; font-size: 0.92rem; max-width: 70ch; }
.nudge-act { display: flex; flex-wrap: wrap; gap: 8px; }
.nudge-act .btn { min-height: 44px; padding: 10px 18px; font-size: 0.92rem; }
.box-head .st { flex: none; }
.tfa { display: grid; gap: 18px; }
.tfa[hidden] { display: none; }
.sec-lead { color: #e6e3ee; font-size: 0.96rem; max-width: 62ch; }
.rec { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 14px; border-radius: 14px; background: rgba(255, 181, 71, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 181, 71, 0.3); color: #ffe2a8; font-size: 0.9rem; }
.rec svg { width: 22px; height: 22px; color: var(--gold); }
.rec b { color: #fff; }
.chan-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tag-rec { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--gold); color: #1a1420; font-size: 0.7rem; font-weight: 800; vertical-align: 2px; }
.setup { list-style: none; counter-reset: krok; margin: 0; padding: 0; display: grid; gap: 22px; }
.setup > li { counter-increment: krok; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; }
.setup > li::before { content: counter(krok); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(139, 92, 255, 0.2); color: #d4bfff; font-weight: 800; }
.setup b { display: block; margin-bottom: 6px; }
.totp { display: flex; flex-wrap: wrap; gap: 16px 20px; align-items: center; margin-top: 12px; }
.totp-qr { width: 150px; padding: 10px; border-radius: 14px; background: #fff; }
.totp-qr svg { display: block; width: 100%; }
.totp-key { display: grid; gap: 6px; font-size: 0.86rem; color: var(--on-d-soft); }
.totp-key code, .codes { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; color: #fff; letter-spacing: 0.06em; }
.totp-key code { font-size: 1.05rem; }
.verify { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.verify .code-input { width: 200px; min-height: 50px; font-size: 1.4rem; }
.verify .btn { min-height: 50px; }
.codes { list-style: none; margin: 0; padding: 16px 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--line-d); font-size: 1rem; }
.off-form { display: grid; gap: 14px; padding: 16px; border-radius: 16px; background: rgba(255, 122, 122, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 122, 122, 0.3); }
.off-form[hidden] { display: none; }
.box .form-msg { margin-top: 16px; }
.devices { list-style: none; margin: 0 0 14px; padding: 0; display: grid; }
.devices li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line-d); }
.devices li:first-child { border-top: 0; padding-top: 0; }
.devices b { display: block; font-size: 0.95rem; }
.devices small { display: block; color: var(--on-d-soft); font-size: 0.84rem; }
.devices .link-btn { font-size: 0.88rem; }
.dev-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.06); color: #d9d4e6; }
.dev-ic svg { width: 20px; height: 20px; }
.this { font-size: 0.8rem; font-weight: 800; color: #7ee08f; }
[data-owner-only].locked .tfa, [data-owner-only].locked .btn-row { opacity: 0.55; }

@media (max-width: 1180px) { .editor, .compose { grid-template-columns: minmax(0, 1fr); } .ed-preview { position: static; order: -1; } .phone-prev { position: static; } .lk-screen { max-width: 280px; margin-inline: auto; width: 100%; } }
@media (max-width: 860px) { .sec-nudge { grid-template-columns: 40px minmax(0, 1fr); align-items: start; } .nudge-act { grid-column: 1 / -1; } }
@media (max-width: 620px) { .chan, .chan-2 { grid-template-columns: minmax(0, 1fr); } .codes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; padding: 14px; font-size: 0.92rem; } .verify .code-input { width: 100%; } .verify .btn { width: 100%; } .mid-reward { grid-template-columns: minmax(0, 1fr); } .wc { width: 100%; } .wc-back { width: 100%; } }