/* barzly.net — motyw ciemny szary (żółć tylko na akcentach/przyciskach/poświatach) */
:root {
  --bg:      #070708;
  --bg2:     #0e0e10;
  --panel:   #131316;
  --panel2:  #1a1a1e;
  --line:    #26262b;
  --line2:   #36363d;
  --text:    #f1f1f3;
  --muted:   #9a9aa3;
  --muted2:  #63636c;
  --yellow:  #fff312;
  --yellow2: #fff76b;
  --amber:   #d4c400;
  --good:    #c6e06a;
  --bad:     #e0863f;
  --radius:  16px;
  --glow:    0 0 24px rgba(255,243,18,.30);
  --glow-sm: 0 0 12px rgba(255,243,18,.25);
  --shadow:  0 18px 50px rgba(0,0,0,.55);
  --shadow-soft: 0 8px 26px rgba(0,0,0,.4);
  --mono: ui-monospace, "Cascadia Code", "JetBrains Mono", Consolas, monospace;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* #47: czcionka tekstu w edytorze à la Apple Notes — SF Pro na Apple, Segoe UI Variable na Win 11 */
  --ednotes: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* tło ROOT = tło appki → obszar paska statusu / „notcha" na iOS przestaje być czarnym paskiem (web, PWA i apka) */
html { background: var(--bg); }
html, body { overscroll-behavior-y: none; } /* ogranicz „gumowe" odbicie (PWA); natywny bounce apki wyłącza MainViewController */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  position: relative;
}
/* światła w tle — FIXED do viewportu, NIE do wysokości dokumentu (gradient na body liczy %
   od pełnej wysokości strony: po załadowaniu długiej treści światła „odjeżdżały" w dół i tło
   robiło się prawie czarne; jako ::before z position:fixed świecą zawsze tak samo) */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(1020px 560px at 80% -10%, rgba(255,243,18,.28), transparent 65%),
    radial-gradient(780px 720px at 50% 60%,   rgba(255,255,255,.09), transparent 70%);
}
/* delikatna winieta + ziarno */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(120% 90% at 50% 0%, transparent 60%, rgba(0,0,0,.45) 100%);
}
.wrap { max-width: 1060px; margin: 0 auto; padding: max(32px, env(safe-area-inset-top)) 20px 90px; position: relative; z-index: 1; } /* max(): treść tuż pod notchem, BEZ dublowania odstępu */

/* ---- header ---- */
header.top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; }
.brand .mark { display: block; border-radius: 13px; animation: boltpulse 3.6s ease-in-out infinite; }
@keyframes boltpulse {
  0%, 100% { filter: drop-shadow(0 0 11px rgba(255,243,18,.28)); }
  50%      { filter: drop-shadow(0 0 22px rgba(255,243,18,.52)); }
}
.logo {
  font-family: var(--mono); font-weight: 800; font-size: 2.7rem; letter-spacing: -1.5px;
  color: var(--text); margin: 0; line-height: 1; text-shadow: 0 2px 20px rgba(0,0,0,.6);
}
.logo b { color: var(--yellow); text-shadow: 0 0 22px rgba(255,243,18,.55), 0 0 4px rgba(255,243,18,.5); }
.logo .dot { color: var(--amber); text-shadow: 0 0 18px rgba(212,196,0,.7); }
/* pełne logo z napisem (bolt-„B" + „Barzly.com" + tagline) prosto z brandbooka (PDF s.4) */
.brand-logo { display: block; height: 48px; width: auto; }
@media (max-width: 760px) { .brand-logo { height: 38px; } }
.tagline { color: var(--muted); font-size: .98rem; }
.badge {
  font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .5px;
  color: #1a1710; background: linear-gradient(180deg, var(--yellow2), var(--yellow));
  padding: 4px 11px; border-radius: 999px; font-weight: 800;
  box-shadow: var(--glow-sm), inset 0 1px 0 rgba(255,255,255,.4);
}
.badge.ghost { background: transparent; color: var(--amber); border: 1px solid var(--line2); box-shadow: none; }

/* ---- input card ---- */
/* liquid glass: półprzezroczysta tafla na gradiencie body (światła prześwitują); blur realnie widać, bo karta nachodzi na treść strony */
.card {
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  padding: 22px;
  margin-top: 24px;
  position: relative;
}
/* subtelny żółty rant-poświata na górze karty */
.card::before {
  content: ""; position: absolute; inset: -1px; border-radius: var(--radius); pointer-events: none;
  background: linear-gradient(180deg, rgba(255,243,18,.18), transparent 28%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px;
}
textarea {
  width: 100%; min-height: 240px; resize: vertical;
  background: #121212; color: var(--text);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 16px; font-family: var(--mono); font-size: .98rem; line-height: 1.65;
  outline: none; transition: border-color .18s, box-shadow .18s;
  box-shadow: inset 0 2px 14px rgba(0,0,0,.5);
}
textarea:focus { border-color: var(--amber); box-shadow: inset 0 2px 14px rgba(0,0,0,.5), 0 0 0 3px rgba(255,243,18,.14), 0 0 26px rgba(255,243,18,.18); }
textarea::placeholder { color: var(--muted2); }

.row { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.spacer { flex: 1; }
.count { color: var(--muted); font-size: .82rem; font-family: var(--mono); }
.khint { font-family: var(--mono); font-size: .68rem; color: var(--muted2); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; }
.verdict:focus { outline: none; }
@media (max-width: 560px) { .khint { display: none; } }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  background: rgba(255,255,255,.05); color: var(--muted); border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px; padding: 6px 13px; font-size: .8rem; cursor: pointer;
  transition: all .16s;
}
.chip:hover { color: var(--text); border-color: var(--amber); box-shadow: var(--glow-sm); transform: translateY(-1px); }

button.go {
  background: linear-gradient(180deg, var(--yellow2), var(--yellow) 60%, var(--amber));
  color: #14120a; font-weight: 800; font-size: 1.02rem;
  border: none; border-radius: 12px; padding: 13px 30px; cursor: pointer;
  letter-spacing: .3px; transition: transform .08s, filter .18s, box-shadow .18s;
  box-shadow: 0 8px 22px rgba(255,243,18,.30), 0 0 30px rgba(255,243,18,.22), inset 0 1px 0 rgba(255,255,255,.45);
}
button.go:hover { filter: brightness(1.08); box-shadow: 0 10px 30px rgba(255,243,18,.42), 0 0 44px rgba(255,243,18,.34), inset 0 1px 0 rgba(255,255,255,.5); }
button.go:active { transform: translateY(1px); }
button.go:disabled { opacity: .5; cursor: default; box-shadow: none; }

/* ---- results ---- */
.results { margin-top: 30px; display: none; }
.results.show { display: block; animation: fade .4s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.verdict { font-size: 1.45rem; font-weight: 800; margin: 0 0 4px; letter-spacing: -.3px; }
.verdict .score { color: var(--yellow); font-family: var(--mono); text-shadow: 0 0 22px rgba(255,243,18,.5); }
.subverdict { color: var(--muted); margin-bottom: 20px; }

.grid { display: grid; grid-template-columns: 400px 1fr; gap: 24px; align-items: start; }
@media (max-width: 820px) { .grid { grid-template-columns: 1fr; } }

.chartbox {
  background: radial-gradient(120% 120% at 50% 30%, rgba(255,243,18,.06), transparent 60%), var(--bg2);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 16px;
  box-shadow: var(--shadow-soft), 0 0 50px rgba(255,243,18,.07) inset;
}

.axes { display: flex; flex-direction: column; gap: 13px; }
.axis {
  background: linear-gradient(180deg, var(--panel), var(--bg2));
  border: 1px solid var(--line); border-radius: 13px; padding: 13px 15px;
  box-shadow: var(--shadow-soft); transition: transform .15s, box-shadow .15s, border-color .15s;
}
.axis:hover { transform: translateY(-2px); border-color: var(--line2); box-shadow: var(--shadow-soft), var(--glow-sm); }
.axis .head { display: flex; align-items: center; gap: 9px; }
.axis .name { font-weight: 700; }
.axis .val { margin-left: auto; font-family: var(--mono); font-weight: 800; font-size: 1.15rem; color: var(--yellow); text-shadow: 0 0 16px rgba(255,243,18,.45); }
.axis .bar { height: 8px; background: #121212; border-radius: 999px; margin: 10px 0 8px; overflow: hidden; box-shadow: inset 0 1px 4px rgba(0,0,0,.6); }
.axis .bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--amber), var(--yellow2)); border-radius: 999px; width: 0; transition: width .8s cubic-bezier(.2,.8,.2,1); box-shadow: 0 0 12px rgba(255,243,18,.6); }
.axis .hint { color: var(--muted); font-size: .82rem; }
.tag {
  font-family: var(--mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .5px;
  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line2); color: var(--muted);
}
.tag.algo { color: var(--good); border-color: #4d5a2a; box-shadow: 0 0 10px rgba(198,224,106,.12); }
.tag.ai { color: var(--yellow2); border-color: var(--amber); box-shadow: var(--glow-sm); }
.tag.est { color: var(--bad); border-color: #6a4423; }

/* ---- info / footer ---- */
/* ---- werdykt + pierścień wyniku ---- */
.verdict-row { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.scorering {
  --p: 0; width: 108px; height: 108px; border-radius: 50%; flex: 0 0 auto;
  background: conic-gradient(var(--yellow) calc(var(--p) * 1%), #2a2a2a 0);
  display: grid; place-items: center;
  box-shadow: 0 0 28px rgba(255,243,18,.25), inset 0 0 0 1px rgba(0,0,0,.3);
  transition: background .8s cubic-bezier(.2,.8,.2,1);
}
.ring-inner { width: 84px; height: 84px; border-radius: 50%; background: var(--bg2); display: grid; place-items: center; line-height: 1; }
.ring-inner b { font-family: var(--mono); font-size: 2rem; font-weight: 800; color: var(--yellow); text-shadow: 0 0 18px rgba(255,243,18,.5); }
.ring-inner small { color: var(--muted); font-size: .72rem; }
.verdict-text .verdict { margin: 0; }
.share { margin-left: auto; display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.nick { background: #141414; border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 9px 12px; font: inherit; font-size: .85rem; outline: none; min-width: 210px; }
.nick:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255,243,18,.12); }
.dl { background: var(--panel2); color: var(--text); border: 1px solid var(--line2); border-radius: 10px; padding: 9px 14px; font: inherit; font-weight: 700; cursor: pointer; transition: color .15s, border-color .15s, box-shadow .15s; }
.dl:hover { color: var(--yellow2); border-color: var(--amber); box-shadow: var(--glow-sm); }
@media (max-width: 560px) { .verdict-row { flex-wrap: wrap; } .share { margin-left: 0; width: 100%; } }

/* ---- kafelki statystyk ---- */
.stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 24px; }
@media (max-width: 720px) { .stats { grid-template-columns: repeat(3, 1fr); } }
.tile { background: linear-gradient(180deg, var(--panel), var(--bg2)); border: 1px solid var(--line); border-radius: 12px; padding: 12px 10px; text-align: center; box-shadow: var(--shadow-soft); }
.tile .tv { display: block; font-family: var(--mono); font-size: 1.45rem; font-weight: 800; color: var(--text); }
.tile .tk { display: block; color: var(--muted); font-size: .72rem; margin-top: 4px; }

/* ---- podpowiedzi "co podkręcić" ---- */
.tips { margin-bottom: 24px; background: linear-gradient(180deg, var(--panel), var(--bg2)); border: 1px solid var(--line); border-left: 3px solid var(--yellow); border-radius: 12px; padding: 14px 18px; box-shadow: var(--shadow-soft); }
.tips-head { font-weight: 800; color: var(--yellow2); margin-bottom: 8px; font-size: .95rem; }
.tip { color: var(--text); font-size: .9rem; padding: 5px 0 5px 18px; position: relative; }
.tip::before { content: "›"; position: absolute; left: 2px; color: var(--amber); font-weight: 800; }

/* ---- historia ---- */
.history { display: none; margin-top: 16px; }
.history.show { display: block; animation: fade .3s ease; }
.hist-head { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: .8rem; margin-bottom: 8px; }
.hist-clear { background: transparent; border: none; color: var(--muted2); font: inherit; font-size: .78rem; cursor: pointer; }
.hist-clear:hover { color: var(--bad); }
.hist-items { display: flex; flex-wrap: wrap; gap: 8px; }
.hist-item { display: inline-flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 6px 8px 6px 13px; cursor: pointer; color: var(--muted); font: inherit; font-size: .8rem; transition: color .15s, border-color .15s; }
.hist-item:hover { color: var(--text); border-color: var(--line2); }
.hist-item .hp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
.hist-item .hs { font-family: var(--mono); font-weight: 800; color: var(--yellow); background: #141414; border-radius: 999px; padding: 2px 8px; font-size: .78rem; }

/* ---- panel rymów + podświetlanie ---- */
.panel { margin-top: 24px; background: linear-gradient(180deg, var(--panel), var(--bg2)); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-soft); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.panel-head h3 { margin: 0; font-size: 1.05rem; }
.muted { color: var(--muted); font-weight: 400; font-size: .85rem; }
.legend { display: inline-flex; align-items: center; }
.legend i.rh { display: inline-block; width: 15px; height: 15px; border-radius: 4px; background: var(--c); margin-left: 5px; box-shadow: 0 0 8px var(--c); }
.rhtext {
  font-family: var(--mono); line-height: 2.05; font-size: .98rem; color: var(--text);
  background: #141414; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px;
  box-shadow: inset 0 2px 14px rgba(0,0,0,.45); overflow-wrap: anywhere;
}
.rhtext .rh { color: var(--c); background: color-mix(in srgb, var(--c) 17%, transparent); border-radius: 5px; padding: 1px 3px; font-weight: 600; }
.rhtext .rh-deep { text-decoration: underline; text-decoration-color: var(--c); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.rhtext .rh-full { font-weight: 800; box-shadow: inset 0 -2px 0 var(--c); }
.rhtext .rh-soft { font-weight: 600; background: color-mix(in srgb, var(--c) 9%, transparent); border: 1px dashed color-mix(in srgb, var(--c) 55%, transparent); }

/* ---- zakładki Rymy/Klisze + klisze ---- */
.tabs { display: inline-flex; gap: 4px; background: #141414; border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.tab { background: transparent; border: none; color: var(--muted); font: inherit; font-size: .9rem; font-weight: 700; padding: 5px 13px; border-radius: 7px; cursor: pointer; transition: color .15s, background .15s; }
.tab:hover { color: var(--text); }
.tab.active { background: linear-gradient(180deg, var(--yellow2), var(--yellow)); color: #14120a; box-shadow: 0 0 14px rgba(255,243,18,.25); }
.tab .muted { font-weight: 400; }
.tab.active .muted { color: #3a3206; }
.rhtext .cl { color: #ff9a6b; background: rgba(224,134,63,.14); border-bottom: 2px dotted #e0863f; border-radius: 3px; padding: 1px 2px; }
.clist { display: none; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.clist.show { display: flex; }
.clitem { background: rgba(224,134,63,.12); border: 1px solid #6a4423; color: #ffb487; border-radius: 999px; padding: 4px 11px; font-size: .82rem; font-family: var(--mono); }
.clitem b { color: #ffd1a8; margin-left: 6px; font-weight: 700; }

.rhnote { color: var(--muted); font-size: .8rem; margin: 12px 0 0; }
/* 18 WYRAŹNIE różnych kolorów (zamiast par jasny/ciemny tego samego odcienia, które się zlewały) */
.rh-0 { --c: #fff76b; } .rh-1 { --c: #ff7eb6; } .rh-2 { --c: #2bd6c4; } .rh-3 { --c: #9be05a; }
.rh-4 { --c: #4d9bff; } .rh-5 { --c: #ff9d42; } .rh-6 { --c: #b072f5; } .rh-7 { --c: #ff5f5f; }
.rh-8 { --c: #16c290; } .rh-9 { --c: #ff4f8f; } .rh-10 { --c: #c2d63a; } .rh-11 { --c: #2bb8e0; }
.rh-12 { --c: #e0a52e; } .rh-13 { --c: #e060d0; } .rh-14 { --c: #ff8a4d; } .rh-15 { --c: #5cc85f; }
.rh-16 { --c: #7d7bff; } .rh-17 { --c: #c2723a; }

/* ---- per zwrotka ---- */
.verses { display: none; margin-top: 24px; }
.verses.show { display: block; animation: fade .35s ease; }
.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.vcard { background: linear-gradient(180deg, var(--panel), var(--bg2)); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow-soft); }
.vhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.vnum { font-weight: 700; font-size: .9rem; }
.vscore { font-family: var(--mono); font-weight: 800; color: var(--yellow); font-size: 1.25rem; text-shadow: 0 0 14px rgba(255,243,18,.4); }
.vbars { display: flex; flex-direction: column; gap: 6px; }
.mb { display: grid; grid-template-columns: 48px 1fr 26px; align-items: center; gap: 8px; }
.mbl { color: var(--muted); font-size: .72rem; }
.mbt { height: 6px; background: #141414; border-radius: 999px; overflow: hidden; box-shadow: inset 0 1px 3px rgba(0,0,0,.6); }
.mbt > i { display: block; height: 100%; background: linear-gradient(90deg, var(--amber), var(--yellow2)); border-radius: 999px; }
.mbv { font-family: var(--mono); font-size: .72rem; color: var(--text); text-align: right; }

/* ---- podpowiedź / shake ---- */
.hint-msg { color: var(--yellow2); font-size: .82rem; }
textarea.shake { animation: shake .35s; border-color: var(--amber); }
@keyframes shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }

.note {
  margin-top: 28px; padding: 16px 20px; background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--amber); border-radius: 12px; color: var(--muted); font-size: .88rem;
  box-shadow: var(--shadow-soft), -8px 0 24px rgba(212,196,0,.06);
}
.note b { color: var(--text); }
footer { margin-top: 44px; color: var(--muted2); font-size: .8rem; text-align: center; }
footer a, a { color: var(--yellow2); text-decoration: none; }
footer a:hover, a:hover { text-shadow: var(--glow-sm); }

/* ---- konta / logowanie ---- */
.authbox { display: inline-flex; align-items: center; gap: 8px; }
.authbtn { font: inherit; font-weight: 700; font-size: .85rem; cursor: pointer; border-radius: 9px; padding: 7px 14px;
  color: #14120a; background: linear-gradient(180deg, var(--yellow2), var(--yellow)); border: none; box-shadow: 0 0 14px rgba(255,243,18,.25); }
.authbtn.ghost { color: var(--text); background: transparent; border: 1px solid var(--line2); box-shadow: none; }
.authbtn:hover { filter: brightness(1.06); }
.authuser { color: var(--muted); font-size: .82rem; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.authmodal { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.62); backdrop-filter: blur(3px); padding: 20px; }
.authmodal.show { display: flex; }
.authcard { position: relative; width: 100%; max-width: 360px; background: var(--panel); border: 1px solid var(--line2);
  border-radius: var(--radius); padding: 26px 22px 20px; box-shadow: var(--shadow); }
.authclose { position: absolute; top: 10px; right: 12px; background: none; border: none; color: var(--muted); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.authclose:hover { color: var(--text); }
.authtabs { display: flex; gap: 4px; background: #141414; border: 1px solid var(--line); border-radius: 10px; padding: 3px; margin-bottom: 16px; }
.authtab { flex: 1; background: transparent; border: none; color: var(--muted); font: inherit; font-weight: 700; font-size: .9rem; padding: 8px; border-radius: 7px; cursor: pointer; }
.authtab.active { background: linear-gradient(180deg, var(--yellow2), var(--yellow)); color: #14120a; }
.authinput { width: 100%; background: #121212; color: var(--text); border: 1px solid var(--line2); border-radius: 10px;
  padding: 11px 13px; font: inherit; font-size: .95rem; margin-bottom: 10px; outline: none; }
.authinput:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255,243,18,.14); }
.authinput::placeholder { color: var(--muted2); }
/* pole hasła z oczkiem (pokaż/ukryj) */
.authpass { position: relative; margin-bottom: 10px; }
.authpass .authinput { margin-bottom: 0; padding-right: 46px; }
.authpass-eye { position: absolute; top: 0; right: 4px; height: 100%; display: inline-flex; align-items: center; justify-content: center; width: 38px; padding: 0; background: transparent; border: 0; border-radius: 8px; color: var(--muted2); cursor: pointer; transition: color .15s; }
.authpass-eye:hover { color: var(--text); }
.authpass-eye.on { color: var(--yellow); }
.authpass-eye:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
/* popup admina „Doładuj tokeny" */
.cp-quick { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.cp-quick .ed-btn { flex: 1; min-width: 72px; }
.admin-credit { border-color: rgba(255,243,18,.45) !important; color: var(--yellow) !important; }
/* przycisk „admin" jako toggle: szary = nie-admin, zielony = admin */
.admin-toggle { color: var(--muted) !important; }
.admin-toggle.on { color: #2bd66a !important; border-color: rgba(43,214,106,.5) !important; background: rgba(43,214,106,.1) !important; }
/* logowanie przez QR */
.qrlogin { margin-top: 4px; text-align: center; }
.qrlogin-toggle { font-size: .82rem; }
.qrlogin-card { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 10px; padding: 4px; }
.qrlogin-qr { width: 192px; height: 192px; border-radius: 12px; overflow: hidden; }
.qrlogin-qr svg { width: 100%; height: 100%; display: block; }
.qrlogin-hint { font-size: .76rem; color: var(--muted2); margin: 0; max-width: 210px; line-height: 1.35; }
/* QR żółto-czarny (zamiast biało-czarny): tło rect na żółto, moduły zostają czarne (skanowalne, brand) */
.qrlogin-qr svg rect, .share-qr svg rect { fill: var(--yellow); }
/* edytor avatara (kadrowanie + zoom) */
.ave-card { max-width: 360px; text-align: center; }
.ave-stage { position: relative; margin: 10px auto 14px; border-radius: 14px; overflow: hidden; background: #0e0e0e; touch-action: none; cursor: grab; }
.ave-stage canvas { display: block; touch-action: none; }
.ave-ring { position: absolute; inset: 0; pointer-events: none; border-radius: 50%; box-shadow: 0 0 0 9999px rgba(10,10,12,.55), inset 0 0 0 2px rgba(255,255,255,.5); } /* zaciemnia poza kołem + obrys koła */
.ave-zoom { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 1.05rem; }
.ave-zoom input[type=range] { flex: 1; accent-color: var(--yellow); cursor: pointer; }
.autherr { color: var(--bad); font-size: .82rem; min-height: 1.1em; margin: 2px 0 8px; }
.authsubmit { width: 100%; font: inherit; font-weight: 800; font-size: 1rem; cursor: pointer; border: none; border-radius: 10px;
  padding: 11px; color: #14120a; background: linear-gradient(180deg, var(--yellow2), var(--yellow)); box-shadow: 0 0 18px rgba(255,243,18,.22); }
.authsubmit:disabled { opacity: .6; cursor: default; }
.authhint { color: var(--muted2); font-size: .76rem; text-align: center; margin: 12px 0 0; }
.authh { margin: 0 0 6px; color: var(--text); font-size: 1.15rem; }
.authhint2 { color: var(--muted); font-size: .85rem; margin: 0 0 12px; }
.authreason { color: var(--text); background: rgba(255,243,18,.10); border: 1px solid rgba(255,243,18,.28);
  border-radius: 10px; padding: 9px 12px; margin: 0 0 14px; font-size: .86rem; }
.authlink { background: none; border: none; color: var(--amber); font: inherit; font-size: .82rem; cursor: pointer; padding: 4px 0; text-align: left; display: block; }
.authlink:hover { text-decoration: underline; }
/* „albo" — separator między logowaniem hasłem a logowaniem przez Apple */
.auth-or { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; color: var(--muted2); font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line2); }
/* przycisk „Zaloguj przez Apple" — czarny wg HIG Apple, biały logotyp + tekst */
.authbtn-apple { width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px; font: inherit; font-weight: 600; font-size: .98rem;
  cursor: pointer; border: 1px solid rgba(255,255,255,.22); border-radius: 10px; padding: 11px; color: #fff; background: #000;
  transition: background .15s, border-color .15s, transform .12s; }
.authbtn-apple:hover { background: #141414; border-color: rgba(255,255,255,.4); }
.authbtn-apple:active { transform: translateY(1px); }
.authbtn-apple:disabled { opacity: .6; cursor: default; }
.authbtn-apple svg { margin-top: -2px; flex: none; }
/* przycisk „Zaloguj przez Google" (apka natywna — własny guzik; web renderuje oficjalny przycisk GIS) */
.authbtn-google { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; font: inherit; font-weight: 600; font-size: .98rem;
  cursor: pointer; border: 1px solid rgba(255,255,255,.22); border-radius: 10px; padding: 11px; color: #fff; background: #131314;
  transition: background .15s, border-color .15s, transform .12s; margin-top: 10px; }
.authbtn-google:hover { background: #1d1d1f; border-color: rgba(255,255,255,.4); }
.authbtn-google:active { transform: translateY(1px); }
.authbtn-google:disabled { opacity: .6; cursor: default; }
.authbtn-google svg { flex: none; }
/* host na oficjalny przycisk Google (web) — wyśrodkuj i daj odstęp jak przy Apple */
.authbtn-google-host { margin-top: 10px; display: flex; justify-content: center; min-height: 40px; }

/* nick + avatar w nagłówku */
.authnick { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 1px solid var(--line2); color: var(--text); font: inherit; font-weight: 700; font-size: .85rem; padding: 3px 11px 3px 3px; border-radius: 999px; cursor: pointer; max-width: 220px; position: relative; }
.authnick-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.authnick:hover { border-color: var(--amber); }
.authnick-caret { color: var(--muted); font-size: .7rem; flex: none; }
.nav-dot { position: absolute; top: 1px; left: 22px; width: 9px; height: 9px; border-radius: 50%; background: #ff5252; box-shadow: 0 0 0 2px var(--bg); } /* nieprzeczytane wiadomości */
.nav-dot[hidden] { display: none; }
/* rozwijane menu użytkownika (Wiadomości/Profil/Admin/Wyloguj) */
.usermenu-wrap { position: relative; display: inline-block; }
/* #20: rozwijane menu profilu — liquid glass jak popupy edytora (półprzezroczysta tafla + blur+saturate) */
.usermenu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 210px;
  background: linear-gradient(180deg, rgba(34,34,40,.82), rgba(21,21,26,.86));
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.10); border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
  padding: 7px; z-index: 60; display: flex; flex-direction: column; gap: 3px; }
.usermenu[hidden] { display: none; }
.usermenu-i { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: none;
  border: 1px solid transparent; color: var(--text); font: inherit; font-size: .9rem; padding: 9px 12px;
  border-radius: 10px; cursor: pointer; transition: background .14s, border-color .14s, color .14s; }
.usermenu-i:hover { background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.045)); border-color: rgba(255,255,255,.11); }
.usermenu-ic { flex: none; color: var(--muted); transition: color .14s; }
.usermenu-i:hover .usermenu-ic { color: var(--yellow); }
.usermenu-i[data-nav="logout"]:hover { color: #ff9a9a; }
.usermenu-i[data-nav="logout"]:hover .usermenu-ic { color: #ff9a9a; }
.usermenu-badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ff5252; color: #fff; font-size: .68rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.usermenu-badge[hidden] { display: none; }
/* na HOME menu użytkownika jest w powitaniu („Cześć, NICK ▾") → stary przycisk profilu z nagłówka chowamy */
body.on-home .usermenu-wrap, body.hide-userbtn .usermenu-wrap { display: none; } /* #23: ukryty na home + wiadomości/profil/plany/admin */
/* na telefonie menu użytkownika przypięte do prawego rogu ekranu (nie ucieka poza viewport przy zawijaniu nagłówka) */
@media (max-width: 760px) {
  .usermenu { position: fixed; top: calc(env(safe-area-inset-top) + 52px); right: 12px; left: auto; width: min(250px, calc(100vw - 24px)); min-width: 0; }
}
.avatar { border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.avatar.avph { background: linear-gradient(180deg, var(--yellow2), var(--yellow)); color: #14120a; font-weight: 800; }
.avatar-sm { width: 26px; height: 26px; font-size: .9rem; }
.avatar-xs { width: 16px; height: 16px; font-size: .62rem; }
.avatar-lg { width: 72px; height: 72px; font-size: 2rem; }
.autosave { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: .8rem; cursor: pointer; user-select: none; }
.autosave input { accent-color: var(--yellow); }

/* panel użytkownika */
.phead { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.pid { min-width: 0; }
.pnick { font-weight: 800; font-size: 1.1rem; color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* UGC moderacja: zgłoś / zablokuj na publicznym profilu */
.pmod { display: flex; gap: 8px; margin: 6px 0 2px; flex-wrap: wrap; }
.pmod-btn { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: var(--muted); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.pmod-btn:hover { border-color: var(--yellow); color: var(--text); }
.pmod-block:hover { border-color: #ff5a5a; color: #ff8a8a; }
.set-blocked { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.set-bl-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.set-bl-nick { font-weight: 600; color: var(--text); }
.pemail { color: var(--muted); font-size: .82rem; margin-bottom: 4px; word-break: break-all; }
.pstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.ptile { background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035)); border: 1px solid rgba(255,255,255,.09); border-radius: 11px; padding: 8px; text-align: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 3px 10px rgba(0,0,0,.18); } /* liquid glass */
.ptv { display: block; font-family: var(--mono); font-weight: 800; font-size: 1.2rem; color: var(--yellow); }
.ptk { display: block; color: var(--muted); font-size: .72rem; margin-top: 2px; }
.plist { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
.pitem { display: flex; align-items: center; gap: 8px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.028)); border: 1px solid rgba(255,255,255,.085); border-radius: 10px; padding: 6px 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); } /* liquid glass */
.ppin { background: none; border: none; color: var(--muted2); font-size: 1rem; cursor: pointer; line-height: 1; flex: none; }
.ppin.on { color: var(--yellow); text-shadow: 0 0 10px rgba(255,243,18,.5); }
.pload { flex: 1; min-width: 0; background: none; border: none; color: var(--text); font: inherit; font-size: .85rem; text-align: left; cursor: pointer; overflow: hidden; }
.pload .pp { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.pload:hover .pp { color: var(--text); }
.ps { font-family: var(--mono); font-weight: 800; color: var(--yellow); font-size: .85rem; flex: none; }
.pdel { background: none; border: none; color: var(--muted2); cursor: pointer; font-size: .9rem; flex: none; }
.pdel:hover { color: var(--bad); }
.pcard-sub { font-weight: 400; font-size: .78rem; color: var(--muted2); }
/* karta projektu na liście (tytuł + linijka + avatary) — wspólna dla profilu, home, edytora */
.proj-card { position: relative; display: flex; align-items: center; gap: 10px; background: linear-gradient(180deg, rgba(255,255,255,.062), rgba(255,255,255,.028)); border: 1px solid rgba(255,255,255,.085); border-radius: 12px; padding: 9px 12px 22px; flex-wrap: wrap; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 4px 14px rgba(0,0,0,.2); transition: border-color .15s, box-shadow .15s; } /* liquid glass; padding-bottom na datę w rogu */
.proj-date { position: absolute; right: 12px; bottom: 6px; color: var(--muted2); font-size: .68rem; font-weight: 400; white-space: nowrap; pointer-events: none; } /* data ostatniej modyfikacji — ZAWSZE prawy dolny róg */
.proj-card:hover { border-color: rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 6px 18px rgba(0,0,0,.26); }
.proj-open { flex: 1; min-width: 0; background: none; border: none; text-align: left; cursor: pointer; font: inherit; display: flex; flex-direction: column; gap: 2px; padding: 0; }
.proj-title { font-weight: 700; color: var(--text); font-size: .92rem; display: flex; align-items: center; gap: 8px; min-width: 0; }
.proj-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
.proj-when { margin-left: auto; color: var(--muted2); font-size: .68rem; font-weight: 400; flex: none; white-space: nowrap; } /* data ostatniej modyfikacji, mały szary druczek */
.proj-priv { flex: none; margin-left: .4rem; padding: .05rem .3rem; border-radius: 5px; background: rgba(255,180,60,.16); color: #c98a1a; font-size: .62rem; font-weight: 600; white-space: nowrap; } /* plakietka: tekst prywatny (widok admina) */
.prof-adminnote { color: var(--muted2); font-weight: 400; font-size: .72rem; } /* notka „widok admina” przy nagłówku listy tekstów */
/* podgląd: 3 widoczne linijki, ciągła pętla w górę, lekki zanik u dołu */
.proj-preview { display: block; height: 3.5rem; overflow: hidden; position: relative; margin-top: 1px;
  -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent); mask-image: linear-gradient(to bottom, #000 68%, transparent); }
.proj-preview-in { display: block; }
.proj-pline { display: block; color: var(--muted); font-size: .8rem; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proj-open:hover .proj-pline { color: var(--text); }
@keyframes projScroll { from { transform: translateY(0); } to { transform: translateY(-50%); } } /* -50% bo linie zdublowane = pętla bez szwu */
.proj-anim .proj-preview-in { animation: projScroll 34s linear infinite; }
.proj-card:hover .proj-anim .proj-preview-in { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .proj-anim .proj-preview-in { animation: none; } }
.proj-role { font-weight: 500; font-size: .66rem; color: var(--muted2); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.07); border-radius: 999px; padding: 1px 8px; flex: none; }
.proj-side { display: flex; align-items: center; gap: 8px; flex: none; align-self: flex-start; } /* score+akcje przy GÓRNEJ krawędzi, by nie kolidowały z datą w dolnym rogu */
.proj-mem { display: inline-flex; align-items: center; }
.proj-mem .avatar-xs { margin-left: -5px; border: 1.5px solid var(--panel); box-sizing: content-box; }
.proj-mem .avatar-xs:first-child { margin-left: 0; }
.proj-mem-more { font-size: .66rem; color: var(--muted); margin-left: 4px; }
.proj-score { font-family: var(--mono); font-weight: 800; color: var(--yellow); font-size: .85rem; }
.proj-acts { display: inline-flex; align-items: center; gap: 1px; }
.proj-card .pversions { flex-basis: 100%; margin-left: 4px; }
#edProjResults { display: flex; flex-direction: column; gap: 6px; }

/* widok profilu (wbudowana podstrona) */
#view-profil { display: block; padding: 8px 0 40px; }
#view-profil[hidden] { display: none; }
#profilBody { display: flex; flex-direction: column; gap: 16px; }  /* FIX: gap był na #view-profil (1 dziecko = bez efektu); karty się stykały */
.ptop { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.ptop .pleft { flex: 1; min-width: 240px; }
.ptop .pright { width: 300px; max-width: 100%; }
.ptop .pright .pcard-h { text-align: center; }
.pcard { background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.09); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); } /* liquid glass — duża karta nachodzi na treść/światła, blur realnie widać */
.pcard-h { font-weight: 700; color: var(--text); margin-bottom: 12px; }
.pcard-h .muted { color: var(--muted2); font-weight: 500; }
/* strefa niebezpieczna (usuwanie konta) */
.pdanger { border-color: rgba(255,82,82,.28); }
.pdanger-h { color: #ff8a8a; }
.pdanger-btn { font: inherit; font-weight: 700; cursor: pointer; border-radius: 10px; padding: 10px 16px;
  color: #ff9a9a; background: rgba(255,82,82,.10); border: 1px solid rgba(255,82,82,.4); transition: background .15s, border-color .15s, color .15s; }
.pdanger-btn:hover:not(:disabled) { background: rgba(255,82,82,.9); border-color: rgba(255,82,82,.9); color: #fff; }
.pdanger-btn:disabled { opacity: .5; cursor: default; }
button.authsubmit.pdanger-btn { width: 100%; background: rgba(255,82,82,.16); }
button.authsubmit.pdanger-btn:hover:not(:disabled) { background: #ff5252; }
.pradar { display: flex; justify-content: center; }
.pradar canvas { max-width: 360px; width: 100%; height: auto; }
.pitem { flex-wrap: wrap; }
.pver { background: none; border: none; cursor: pointer; font-size: .9rem; flex: none; opacity: .7; }
.pver:hover { opacity: 1; }
.pedited { margin-left: 8px; font-size: .68rem; color: var(--muted2); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.07); border-radius: 999px; padding: 1px 7px; }
.pversions { flex-basis: 100%; margin: 6px 0 2px 34px; display: flex; flex-direction: column; gap: 4px; }
.pverrow { display: flex; align-items: center; gap: 10px; font-size: .8rem; color: var(--muted); }
.vdot { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); flex: none; }
.vscore { font-family: var(--mono); font-weight: 800; color: var(--yellow); width: 28px; }
.vdate { color: var(--muted2); }
.vnow { color: var(--good); font-size: .7rem; }

.editbar { background: color-mix(in srgb, var(--yellow) 9%, var(--panel)); border: 1px solid var(--line2); border-radius: 12px; padding: 9px 14px; margin-bottom: 12px; font-size: .85rem; color: var(--text); }
.savedinfo { color: var(--muted2); font-size: .76rem; }

/* --- lekki refresh --- */
.card, .panel, .note { box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, var(--shadow-soft); }
.ptile { transition: border-color .15s, transform .15s; }
.ptile:hover { border-color: var(--line2); transform: translateY(-1px); }
.pitem { transition: border-color .15s; }
.pitem:hover { border-color: var(--line2); }
.ms { transition: color .15s, background .15s; }

/* --- EDYTOR (pełny ekran) --- */
.ed-open-btn { background: transparent; border: 1px solid var(--line2); color: var(--text); border-radius: 9px; padding: 6px 11px; font: inherit; font-weight: 700; font-size: .82rem; cursor: pointer; }
.ed-open-btn:hover { border-color: var(--amber); color: var(--yellow); }
/* złota poświata jak na stronie głównej — .editor jest fixed inset:0, więc % liczą się od viewportu; BEZ białego punktu na środku (prześwitywał przez szklane pole jak plama) */
.editor { position: fixed; inset: 0; z-index: 100; background:
    radial-gradient(1020px 560px at 80% -10%, rgba(255,243,18,.28), transparent 65%),
    var(--bg);
  display: flex; flex-direction: column; }
/* mobile: nie przybliżaj ekranu przy kliknięciu (double-tap zoom) niczego w edytorze */
.editor, .editor button, .editor label, .editor input, .editor select, .editor textarea, .editor .ed-tab { touch-action: manipulation; }
.editor[hidden] { display: none; }
.ed-top { display: flex; align-items: center; gap: 10px; padding: max(10px, calc(env(safe-area-inset-top) + 4px)) 16px 10px; border-bottom: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.032)); box-shadow: 0 6px 20px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.08); position: relative; z-index: 5; flex-wrap: wrap; } /* liquid glass jak karty: półprzezroczysta tafla z gradientem + highlight górnej krawędzi (złota poświata .editor prześwituje); NADAL BEZ backdrop-filter — pod spodem tylko statyczny gradient (blur = niewidoczny koszt), a zagnieżdżony kiedyś position:fixed popup by się rozjechał */
/* na desktopie kontener narzędzi jest „przezroczysty" dla flexa (display:contents) — na mobile staje się przewijanym paskiem */
.ed-tools { display: contents; }
.ed-logo { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; color: var(--text); font-size: .95rem; cursor: pointer; border-radius: 8px; padding: 3px 6px; margin: -3px -6px; transition: background .15s; } /* #32: klik = powrót do tekstów */
.ed-logo:hover { background: rgba(255,243,18, .08); }
.ed-logo:hover b { color: var(--yellow); }
.ed-logo b { color: var(--text); transition: color .15s; }
.ed-logo-mark { display: block; flex: none; }
.ed-logo-sub { color: var(--muted); font-weight: 600; font-size: .82rem; padding-left: 7px; border-left: 1px solid var(--line2); }
.ed-name { flex: 0 1 280px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: var(--text); border-radius: 9px; padding: 7px 11px; font: inherit; font-size: .9rem; outline: none; box-shadow: inset 0 1px 3px rgba(0,0,0,.4); transition: border-color .15s, box-shadow .15s; } /* #44: szklany input */
.ed-name:focus { border-color: var(--amber); box-shadow: inset 0 1px 3px rgba(0,0,0,.4), 0 0 0 3px rgba(255,243,18,.14); }
.ed-sync { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); color: var(--muted); border-radius: 8px; padding: 5px 9px; font: inherit; font-size: .76rem; cursor: pointer; white-space: nowrap; }
.ed-sync:hover { border-color: var(--amber); color: var(--text); }
.ed-sync.saved { color: #34d399; border-color: rgba(52,211,153,.4); box-shadow: 0 0 10px rgba(52,211,153,.18); }   /* #40: poświaty stanów */
.ed-sync.dirty { color: var(--yellow); border-color: rgba(255,243,18,.5); box-shadow: 0 0 10px rgba(255,243,18,.2); }
.ed-sync.spin { color: var(--amber); border-color: var(--amber); box-shadow: 0 0 10px rgba(212,196,0,.25); }
.ed-sync-ic { display: inline-block; }
.ed-sync.spin .ed-sync-ic { animation: edspin .8s linear infinite; }
@keyframes edspin { to { transform: rotate(360deg); } }
.ed-spacer { flex: 1; }
/* przełącznik „rymy na żywo" — pigułka: off = szara (paletka 🎨 odbarwiona), on = pełne złoto z pulsującą poświatą (#40) */
.ed-rtoggle { border-radius: 999px; padding: 6px 14px; transition: background .15s, color .15s, border-color .15s, filter .15s, opacity .15s; }
.ed-rtoggle:not(.on) { background: transparent; color: var(--muted); filter: grayscale(1); opacity: .8; }
.ed-rtoggle:not(.on):hover { color: var(--text); filter: grayscale(.4); opacity: 1; border-color: var(--muted2); }
.ed-rtoggle.on { background: var(--yellow); color: #14120a; border-color: var(--yellow); font-weight: 800; text-shadow: 0 1px 0 rgba(255,255,255,.25); animation: rtglow 3s ease-in-out infinite; } /* #40: flat złoto + pulsująca poświata */
.ed-rtoggle.on:hover { filter: brightness(1.07); }
@keyframes rtglow {
  0%, 100% { box-shadow: 0 0 9px rgba(255,243,18,.28), 0 2px 8px rgba(0,0,0,.35); }
  50%      { box-shadow: 0 0 20px rgba(255,243,18,.5),  0 2px 8px rgba(0,0,0,.35); }
}
/* pasek avatarów współpracowników obok „zapisz teraz" (gdy >1 osoba w projekcie) */
.ed-collab { position: relative; display: inline-flex; align-items: center; } /* #44 ; pozycjonuje popup */
.ed-collab[hidden] { display: none; }
.ed-collab-btn { display: inline-flex; align-items: center; gap: 0; padding: 3px 8px 3px 6px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 999px; cursor: pointer; color: var(--text); transition: border-color .15s, background .15s; }
.ed-collab-btn:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.16); }
.ed-collab-ic { font-size: .8rem; margin-right: 4px; opacity: .8; }
.ed-collab .avatar-xs { margin-left: -5px; border: 1.5px solid var(--panel2); box-sizing: content-box; }
.ed-collab-btn .avatar-xs:first-of-type { margin-left: 2px; }
.ed-collab-more { margin-left: 4px; font-size: .72rem; font-weight: 700; color: var(--muted); }
/* popup z listą osób (avatar + rola; właściciel: zmiana roli / wyrzucenie) */
.cpop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: 286px; max-width: 86vw; padding: 8px; background: var(--panel2, #1b1b20); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; box-shadow: 0 16px 44px rgba(0,0,0,.5); animation: cpopIn .14s ease; }
@keyframes cpopIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.cpop-h { font-size: .72rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); padding: 2px 6px 8px; }
.cpop-row { display: flex; align-items: center; gap: 9px; padding: 6px; border-radius: 10px; }
.cpop-row:hover { background: rgba(255,255,255,.04); }
.cpop-person { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.cpop-person-link { background: none; border: none; padding: 0; margin: 0; font: inherit; text-align: left; cursor: pointer; }
.cpop-person-link:hover .cpop-id b { color: var(--yellow); text-decoration: underline; }
.cpop-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cpop-id b { font-size: .86rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cpop-you { font-weight: 600; color: var(--muted); font-size: .76rem; }
.cpop-meta { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cpop-role-badge { font-size: .68rem; font-weight: 700; letter-spacing: .02em; flex: none; }
.cpop-where { font-size: .7rem; color: #9aa0ac; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* jasno-szary: w jakim tekście siedzi online */
.cpop-r-owner { color: var(--yellow); }
.cpop-r-editor { color: #7fd1a6; }
.cpop-r-viewer { color: var(--muted); }
.cpop-ctrls { display: flex; align-items: center; gap: 4px; flex: none; }
.cpop-role { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: var(--text); border-radius: 999px; padding: 4px 8px; font: inherit; font-size: .68rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.cpop-role:hover { border-color: var(--amber); }
.cpop-role:disabled { opacity: .5; cursor: default; }
.cpop-kick { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; background: rgba(229,72,72,.1); border: 1px solid rgba(229,72,72,.28); color: #ff8a8a; border-radius: 999px; font-size: .8rem; cursor: pointer; flex: none; }
.cpop-kick:hover { background: rgba(229,72,72,.22); }
.cpop-foot { font-size: .72rem; color: var(--muted2); padding: 8px 6px 2px; border-top: 1px solid rgba(255,255,255,.06); margin-top: 4px; }
.ed-btn { background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.09); color: var(--text); border-radius: 9px; padding: 6px 11px; font: inherit; font-weight: 700; font-size: .82rem; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); transition: border-color .15s, box-shadow .15s, transform .12s; } /* #44: szklane przyciski */
.ed-btn:hover { border-color: var(--amber); box-shadow: 0 0 12px rgba(255,243,18,.22), 0 0 0 1px rgba(255,243,18,.14); transform: translateY(-1px); } /* #40: złota poświata */
.ed-btn:active { transform: translateY(0); }
.ed-btn.on { background: var(--yellow); color: #14120a; border-color: var(--yellow); box-shadow: 0 0 14px rgba(255,243,18,.45); }
/* #39: przycisk aA (małe A + duże A) otwierający suwak wielkości tekstu */
.ed-zoom-btn { display: inline-flex; align-items: baseline; gap: 1px; line-height: 1; }
.ed-za-s { font-size: .68rem; font-weight: 700; }
.ed-za-b { font-size: 1.02rem; font-weight: 800; }
.ed-zoom-pop { position: fixed; z-index: 112; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(26,26,30,.92); backdrop-filter: blur(14px) saturate(1.25); -webkit-backdrop-filter: blur(14px) saturate(1.25); border: 1px solid rgba(255,255,255,.09); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.5), 0 0 18px rgba(255,243,18,.08); }
.ed-zoom-pop[hidden] { display: none; }
.ed-zoom-pop input[type="range"] { width: 160px; accent-color: var(--yellow); cursor: pointer; }
.ed-zoom-val { font-size: .76rem; color: var(--muted); min-width: 36px; text-align: right; font-variant-numeric: tabular-nums; }
.ed-metro { display: inline-flex; align-items: center; gap: 4px; }
.ed-bpm { width: 52px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: var(--text); border-radius: 8px; padding: 6px 4px; font: inherit; font-size: .82rem; text-align: center; } /* #44 */
.ed-bpm-l { color: var(--muted2); font-size: .72rem; }
.ed-close { background: none; border: none; color: var(--muted); font-size: 1.3rem; cursor: pointer; line-height: 1; padding: 3px 8px; border-radius: 8px; transition: color .15s, background .15s; }
.ed-close:hover { color: #ff8a8a; background: rgba(255,107,107,.1); }
.ed-body { flex: 1; display: flex; min-height: 0; }
.ed-pane { flex: 1; min-width: 0; padding: 0; display: flex; flex-direction: column; } /* #43: pole tekstu NA STYK z bokami, bez odstępów */
.ed-stack { position: relative; flex: 1; min-height: 0; }
/* zakładki plików w projekcie — stylizowane na foldery, „przyczepione" do pola tekstowego */
.ed-tabs { display: flex; align-items: flex-end; gap: 4px; overflow-x: auto; overflow-y: hidden; padding: 2px 8px 0; scrollbar-width: thin; position: relative; z-index: 3; } /* #43: lekki odstęp zakładek od krawędzi przy polu na styk */
.ed-tabs[hidden] { display: none; }
.ed-tab { flex: 0 0 auto; background: rgba(255,255,255,.028); color: var(--muted); border: 1px solid rgba(255,255,255,.07); border-bottom: none;
  border-radius: 10px 10px 0 0; padding: 7px 13px; font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; max-width: 200px; margin-bottom: -1px; transition: color .15s, background .15s; }  /* -1px: wchodzi na górną krawędź panelu; #44: szklane nieaktywne CIEMNIEJSZE od aktywnej (aktywna MUSI mieć to samo rgba co .ed-highlight = zlewa się ze szklanym polem) */
.ed-tab:hover { color: var(--text); background: rgba(255,255,255,.06); }
.ed-tab.active { background: rgba(255,255,255,.045); color: var(--text); border-color: rgba(255,255,255,.1); position: relative; z-index: 1; padding-bottom: 8px; box-shadow: inset 0 2px 0 var(--yellow), 0 -3px 12px rgba(255,243,18,.12); }  /* aktywna ZLEWA SIĘ ze szklanym polem (IDENTYCZNE rgba co .ed-highlight) + złota linia i poświata na górze */
.ed-tab-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-tab-x { opacity: .45; font-weight: 800; font-size: 1rem; line-height: 1; padding: 0 2px; border-radius: 4px; }
.ed-tab-x:hover { opacity: 1; color: #ff6b6b; background: rgba(255,107,107,.12); }
.ed-tab-add { color: var(--yellow); font-weight: 800; padding: 7px 11px; }
.ed-tab-lock { font-size: .72rem; opacity: .7; line-height: 1; }
.ed-tab-locked { opacity: .5; cursor: not-allowed; font-style: italic; }
.ed-tab-locked:hover { color: var(--muted); }
.avatar.av-online { box-shadow: 0 0 0 2px var(--panel2), 0 0 0 3.5px #2bd66a; } /* zielony pierścień = ktoś INNY jest TERAZ w tym tekście */
.ed-tab.active .avatar.av-online { box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px #2bd66a; }
.avatar.av-self { box-shadow: 0 0 0 2px var(--panel2), 0 0 0 3.5px var(--yellow); } /* żółty pierścień (widzisz tylko Ty) = tekst, w którym TY teraz siedzisz sam */
.ed-tab.active .avatar.av-self { box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--yellow); }
.ed-vis { font-weight: 700; } /* przełącznik publiczny/prywatny aktywnego tekstu */
#fileModal { z-index: 130; } /* nad edytorem (z-index 100) i jego overlayami (do 120) — inaczej popup chowa się ZA edytorem */
/* popup „Nowy tekst": rząd publiczny/prywatny */
.file-pubrow { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 10px; color: var(--text); font-size: .9rem; cursor: pointer; }
.file-pubrow input { margin-top: 3px; flex: none; accent-color: var(--yellow); }
.file-pubhint { color: var(--muted); font-weight: 400; font-size: .82rem; }
.ed-highlight, .ed-selhi, .ed-anno, .ed-repeat, .ed-ghost, .ed-textarea {
  position: absolute; inset: 0; width: 100%; height: 100%;
  /* duzy padding-bottom = mozna doscrollowac PONIZEJ konca tekstu (jak w edytorach kodu);
     musi byc IDENTYCZNY na wszystkich 4 warstwach, inaczej rozjedzie sie sync scrolla */
  /* #43: pole na styk — tylko górna krawędź (linia pod zakładkami/toolbarem), zero zaokrągleń;
     border MUSI być identyczny na wszystkich 4 warstwach, inaczej rozjedzie się sync scrolla */
  margin: 0; border: 1px solid var(--line); border-left: none; border-right: none; border-bottom: none;
  padding: 16px 18px 35vh; box-sizing: border-box;
  /* #47: proporcjonalny font à la Apple Notes — UWAGA: na warstwach nakładanych NIE WOLNO zmieniać
     font-weight/font-style per-span (w mono uchodziło, proporcjonalny zmienia szerokość glifów → rozjazd) */
  font-family: var(--ednotes); font-size: 17px; line-height: 1.65; letter-spacing: .01em;
  white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; border-radius: 0;
  /* #50: gutter scrollbara REZERWOWANY identycznie na WSZYSTKICH 4 warstwach (stable) — pole pisania
     ma scrollbar, nakładki nie, ale dzięki stałemu gutterowi szerokość treści jest TA SAMA → rymy się
     nie rozjeżdżają (i nie ma skoku, gdy scrollbar się pojawia/znika). Firefox: cienki, przezroczysty. */
  scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent;
}
.ed-highlight { border-top-color: rgba(255,255,255,.09); }
.ed-highlight { background: rgba(255,255,255,.045); color: var(--text); pointer-events: none; overflow: hidden; z-index: 1; contain: layout paint style; } /* liquid glass: półprzezroczysta tafla, złota poświata .editor prześwituje; UWAGA: to samo rgba MUSI mieć .ed-tab.active (zlewanie zakładki z polem); BEZ backdrop-filter (pod spodem gładki gradient = blur nic nie daje, a kosztuje). contain (BEZ 'size' — wymiary z inset:0): izoluje reparse/paint nakładki przy swapie innerHTML do jej prostokąta; wewnątrz tylko inline <span>/<br>, więc bezpieczne */
.ed-anno { background: transparent; color: transparent; -webkit-text-fill-color: transparent; pointer-events: none; overflow: hidden; z-index: 2; border-color: transparent; }
/* WŁASNE podświetlenie zaznaczenia (po blur natywne znika; trzymamy je widoczne na czas chowania klawiatury) */
.ed-selhi { background: transparent; color: transparent; -webkit-text-fill-color: transparent; pointer-events: none; overflow: hidden; z-index: 2; border-color: transparent; }
.ed-selhi[hidden] { display: none; }
/* wyraźna, czytelna ramka na zaznaczonym słowie — nie „gubi się" na kolorowych rymach pod spodem.
   #edSelHi rysuje teraz ABSOLUTNE prostokąty (es-selrect) z caretCoords zamiast mirror-tekstu z <mark>
   (mark musiał zawijać 1:1 jak textarea → „przeskakiwał na inne słowo"; prostokąt ląduje dokładnie na zaznaczeniu). */
.ed-selhi .es-selrect { position: absolute; background: rgba(96,156,255,.34); border-radius: 4px; box-shadow: inset 0 0 0 2px rgba(150,196,255,.98), 0 0 0 1px rgba(10,26,60,.6); pointer-events: none; }
.ed-selhi mark { background: rgba(120,170,255,.30); color: transparent; -webkit-text-fill-color: transparent; border-radius: 3px; box-shadow: inset 0 0 0 1.5px rgba(150,195,255,.95); } /* legacy (nieużywane po zmianie na prostokąty) */
/* TEST (admin): warstwa podświetlająca często powtarzane zwroty — przezroczysty tekst, samo podkreślenie */
.ed-repeat { background: transparent; color: transparent; -webkit-text-fill-color: transparent; pointer-events: none; overflow: hidden; z-index: 2; border-color: transparent; }
.ed-repeat .rep-hit { border-radius: 3px; background: rgba(224,134,63,.14); box-shadow: inset 0 -2px 0 rgba(224,134,63,.85); }
/* „Twoje powtarzane zwroty" — sekcja w panelu bocznym (dla każdego): lista zwrotów + „×N" + przełącznik podświetlania */
.ed-repbox { border: 1px solid var(--line); border-radius: 12px; padding: 12px 13px; background: var(--panel); }
.ed-repbox[hidden] { display: none; }
.ed-repbox .rep-head { font-weight: 800; font-size: .95rem; color: var(--text); }
.ed-repbox .rep-sub { font-weight: 600; color: var(--muted); font-size: .76rem; }
.ed-repbox .rep-toggle { display: flex; align-items: center; gap: 8px; margin: 8px 0 6px; font-size: .85rem; color: var(--text); cursor: pointer; user-select: none; }
.ed-repbox .rep-toggle input { accent-color: var(--bad); width: 15px; height: 15px; cursor: pointer; flex: none; }
.ed-repbox .rep-note { color: var(--muted); font-size: .76rem; line-height: 1.4; margin: 0 0 8px; }
.ed-repbox .rep-list { max-height: 40vh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; }
.ed-repbox .rep-row { display: flex; align-items: baseline; gap: 10px; width: 100%; padding: 6px 8px; border: none; border-radius: 7px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ed-repbox .rep-row:nth-child(odd) { background: rgba(255,255,255,.03); }
.ed-repbox .rep-row:hover { background: var(--panel2); }
.ed-repbox .rep-row-here { background: rgba(224,134,63,.14); box-shadow: inset 0 -2px 0 rgba(224,134,63,.7); }
.ed-repbox .rep-p { flex: 1; color: var(--text); font-size: .88rem; }
.ed-repbox .rep-n { color: var(--yellow); font-family: var(--mono); font-weight: 800; font-size: .8rem; flex: none; }
.ed-repbox .rep-empty { color: var(--muted); font-size: .8rem; line-height: 1.45; margin-top: 6px; }
.ed-textarea { background: transparent; color: transparent; -webkit-text-fill-color: transparent; caret-color: var(--yellow); resize: none; outline: none; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; z-index: 3; } /* iOS: płynny momentum + bounce zatrzymany w polu (nie przewija strony pod spodem) */
/* ghost text — szara podpowiedź kolejnego wersu (premium). Ta sama geometria co tekst, więc trafia tuż pod kursor. */
.ed-ghost { background: transparent; color: transparent; -webkit-text-fill-color: transparent; border-color: transparent; pointer-events: none; overflow: hidden; z-index: 2; }
.ed-ghost .gh-base { color: transparent; -webkit-text-fill-color: transparent; }   /* tekst usera — niewidoczny, tylko „odpycha" podpowiedź na właściwą pozycję */
.ed-ghost .gh-sug { color: var(--muted); -webkit-text-fill-color: var(--muted); font-style: italic; font-weight: 300; }  /* sama podpowiedź — szara CIENKA KURSYWA, jak placeholder */
.ed-ghost .gh-sug.gh-hint { opacity: .85; }  /* tryb darmowy: wskazówka słów-rymów (nie do wstawienia) */
/* placeholder „generowanie" — kręcące się kółko, w miejscu gdzie pojawi się podpowiedziany wers */
.ed-ghost .gh-spin { display: inline-block; width: .78em; height: .78em; border: 2px solid var(--muted); border-top-color: transparent; border-radius: 50%; margin-right: 7px; vertical-align: -.08em; animation: ghspin .7s linear infinite; }
@keyframes ghspin { to { transform: rotate(360deg); } }
.admin-badge.prem { color: #000; border-color: rgba(255,243,18,.5); } /* czarny napis na żółtym pill (czytelny) */
/* kursory współpracowników (realtime) */
.ed-cursors { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 4; }
.ed-rsel { position: absolute; opacity: .35; border-radius: 2px; pointer-events: none; mix-blend-mode: screen; }
.ed-rcaret { position: absolute; width: 2px; margin-left: -1px; border-radius: 1px; }
.ed-rcaret-tag { position: absolute; top: -13px; left: -1px; font-size: 9px; line-height: 1; color: #14120a; padding: 1px 4px; border-radius: 3px 3px 3px 0; white-space: nowrap; font-weight: 800; }
/* adnotacje (BEZ paddingu/bordera/grubości czcionki — geometria musi się zgadzać z tekstem) */
.ed-anno .an-note { text-decoration: underline dotted; text-decoration-color: #8ab4f8; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.ed-anno .an-pron { text-decoration: underline dashed; text-decoration-color: #34d399; text-underline-offset: 3px; text-decoration-thickness: 2px; }
/* pasma sekcji (czwórka/refren…) — naprzemienny delikatny ton tła za tekstem */
.ed-anno .an-sec1 { background: rgba(124,154,255,.10); box-shadow: -6px 0 0 rgba(124,154,255,.10); }
.ed-anno .an-sec2 { background: rgba(52,211,153,.10); box-shadow: -6px 0 0 rgba(52,211,153,.10); }
/* menu wyboru sekcji */
.ed-secmenu { position: fixed; z-index: 112; display: flex; flex-direction: column; gap: 4px; background: rgba(26,26,30,.88); backdrop-filter: blur(14px) saturate(1.25); -webkit-backdrop-filter: blur(14px) saturate(1.25); border: 1px solid rgba(255,255,255,.09); border-radius: 11px; padding: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.ed-secmenu[hidden] { display: none; }
.ed-secmenu .est-del { color: #ff8a8a; border-color: rgba(255,107,107,.35); }
.edsec { display: flex; align-items: center; gap: 8px; background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: 6px 26px 6px 9px; margin-bottom: 6px; position: relative; }
.edsec-l { font-weight: 700; color: var(--text); font-size: .84rem; }
.edsec-r { color: var(--muted); font-size: .74rem; margin-left: auto; }
/* słowo liczone z WYMOWY (obcojęzyczne) — kropkowana ramka, żeby było widać że czytane fonetycznie */
.rh-pron { outline: 1px dashed rgba(52,211,153,.8); outline-offset: 1px; border-radius: 3px; }
.rhtext .rh-pron { outline: 1px dashed rgba(52,211,153,.8); }
/* pływający pasek na zaznaczeniu */
.ed-seltool { position: fixed; z-index: 110; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: min(540px, 94vw); background: rgba(24,24,29,.88); backdrop-filter: blur(14px) saturate(1.25); -webkit-backdrop-filter: blur(14px) saturate(1.25); border: 1px solid rgba(255,255,255,.09); border-radius: 12px; padding: 5px 7px; box-shadow: 0 12px 34px rgba(0,0,0,.55), 0 0 22px rgba(255,243,18,.08); } /* #40: złota poświata */
.ed-seltool[hidden] { display: none; }
/* rymy do zaznaczonego słowa — wiersz NAD przyciskami paska */
.est-rhymes { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 2px 2px 6px; margin-bottom: 1px; border-bottom: 1px solid var(--line2); max-height: 232px; overflow-y: auto; scrollbar-width: thin; }
.est-rhymes[hidden] { display: none; }
.est-rh { font-size: .72rem; color: var(--muted); margin-right: 2px; }
.est-rw { font: inherit; font-size: .8rem; color: var(--yellow); background: rgba(255,243,18,.08); border: 1px solid rgba(255,243,18,.25); border-radius: 999px; padding: 1px 9px; white-space: nowrap; cursor: pointer; }
.est-rw:hover { background: rgba(255,243,18,.22); }
/* pasek budżetu AI nad rymami: pełny = cały budżet, spada wraz ze zużyciem tokenów */
.est-tokbar { flex-basis: 100%; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; margin: 2px 0 3px; }
.est-tokbar i { display: block; height: 100%; background: linear-gradient(90deg, #7ddf87, var(--yellow)); border-radius: 999px; }
/* zapowiedź dla nie-premium: chipy mocno rozmyte (nieczytelne, nieklikalne) + nakładka na środku */
.est-rw.est-blur { filter: blur(6px); pointer-events: none; user-select: none; cursor: default; }
/* nagłówek nad propozycjami AI — złota czcionka z gradientem */
.est-aihead { flex-basis: 100%; font-weight: 800; font-size: .8rem; letter-spacing: .04em; background: linear-gradient(90deg, var(--yellow), #ffe08a, var(--yellow)); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 1px 2px 0; }
.est-blurwrap { position: relative; flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.est-lock-ov { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font-size: .76rem; font-weight: 700; color: var(--yellow); text-shadow: 0 1px 6px rgba(0, 0, 0, .85); }
.est-plans { font: inherit; font-size: .72rem; font-weight: 800; color: #1a1408; background: var(--yellow); border: 0; border-radius: 999px; padding: 3px 12px; cursor: pointer; box-shadow: 0 0 14px rgba(255,243,18,.45); } /* #40 */
.est-plans:hover { filter: brightness(1.08); }
/* przycisk AI — animowany gradient (paleta à la Apple Intelligence) + ZŁOTA pulsująca poświata (#36) + błysk + iskry */
.est-aibtn { position: relative; overflow: visible; color: #fff; font-weight: 800; border: 0; border-radius: 999px; padding: 6px 13px; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); background: linear-gradient(115deg, #0a84ff, #5e5ce6, #bf5af2, #ff375f, #ff9f0a, #bf5af2, #0a84ff); background-size: 600% 600%; animation: aiShift 7s ease-in-out infinite, aiGlow 2.6s ease-in-out infinite; }
.est-aibtn:hover { filter: brightness(1.12); }
/* błysk jako animacja background-position na pseudo z własnym border-radius — przycisk może mieć overflow:visible (iskry wylatują poza obrys) */
.est-aibtn::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 999px; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .5) 50%, transparent 62%) no-repeat; background-size: 300% 100%; animation: aiSheen 3.2s ease-in-out infinite; }
@keyframes aiShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes aiGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,243,18, .3), 0 0 8px rgba(255,243,18, .45), 0 0 20px rgba(255,243,18, .22); }
  50%      { box-shadow: 0 0 0 1px rgba(255,243,18, .45), 0 0 16px rgba(255,243,18, .75), 0 0 36px rgba(255, 159, 10, .4); }
}
@keyframes aiSheen { 0%, 15% { background-position: 145% 0; } 55%, 100% { background-position: -45% 0; } }
/* #36: błyszczące cząsteczki (4-ramienne gwiazdki) latające wokół przycisku AI */
.aib-glitter { position: absolute; inset: -16px -18px; pointer-events: none; }
.aib-glitter i { position: absolute; width: 5px; height: 5px; background: linear-gradient(180deg, #fff7d6, var(--yellow)); clip-path: polygon(50% 0, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0 50%, 35% 35%); opacity: 0; filter: drop-shadow(0 0 4px rgba(255,243,18, .9)); animation: aiSpark 2.7s ease-in-out infinite; }
.aib-glitter i:nth-child(1) { left: 5%;  top: 16%; }
.aib-glitter i:nth-child(2) { left: 88%; top: 4%;  width: 7px; height: 7px; animation-delay: .45s; }
.aib-glitter i:nth-child(3) { left: 72%; top: 76%; animation-delay: .9s; }
.aib-glitter i:nth-child(4) { left: 22%; top: 82%; width: 6px; height: 6px; animation-delay: 1.35s; }
.aib-glitter i:nth-child(5) { left: 48%; top: -6%; animation-delay: 1.8s; }
.aib-glitter i:nth-child(6) { left: -3%; top: 60%; width: 7px; height: 7px; animation-delay: 2.25s; }
/* wariant „wokół całej ramki" planu — ciaśniejszy inset + więcej iskier po obwodzie karty */
.aib-glitter-card { inset: -8px; }
.aib-glitter-card i:nth-child(7)  { left: 94%; top: 34%; width: 6px; height: 6px; animation-delay: .6s; }
.aib-glitter-card i:nth-child(8)  { left: 6%;  top: 46%; animation-delay: 1.1s; }
.aib-glitter-card i:nth-child(9)  { left: 60%; top: 97%; width: 7px; height: 7px; animation-delay: 1.6s; }
.aib-glitter-card i:nth-child(10) { left: 36%; top: 3%;  animation-delay: 2.1s; }
@keyframes aiSpark {
  0%   { opacity: 0; transform: translateY(4px) scale(.2) rotate(0deg); }
  18%  { opacity: 1; }
  60%  { opacity: .95; }
  100% { opacity: 0; transform: translateY(-11px) scale(1.15) rotate(160deg); }
}
/* chip salda tokenów AI przy nicku (tylko premium) */
.ai-tokchip { font-family: var(--mono); font-size: .72rem; font-weight: 700; color: var(--yellow); background: rgba(255,243,18,.08); border: 1px solid rgba(255,243,18,.3); border-radius: 999px; padding: 4px 10px; cursor: pointer; white-space: nowrap; }
.ai-tokchip:hover { background: rgba(255,243,18,.16); }
.est-btn { background: transparent; border: 1px solid var(--line2); color: var(--text); border-radius: 8px; padding: 5px 9px; font: inherit; font-size: .82rem; cursor: pointer; white-space: nowrap; transition: border-color .15s, background .15s; }
.est-btn:hover { border-color: var(--amber); background: rgba(255,243,18,.06); }
/* separator + przyciski schowka (kopiuj/wytnij/wklej) na pasku zaznaczenia edytora */
.est-sep { width: 1px; align-self: stretch; margin: 2px; background: rgba(255,255,255,.14); flex: none; }
.est-btn.est-clip { color: var(--muted); }
.est-btn.est-clip:hover { color: var(--text); }
/* własne mobilne menu zaznaczenia dla pól poza edytorem (kopiuj/wytnij/wklej) */
.selmenu { position: fixed; z-index: 140; display: flex; gap: 6px; background: rgba(24,24,29,.92); backdrop-filter: blur(14px) saturate(1.25); -webkit-backdrop-filter: blur(14px) saturate(1.25); border: 1px solid rgba(255,255,255,.10); border-radius: 12px; padding: 6px 8px; width: max-content; max-width: 94vw; box-shadow: 0 12px 34px rgba(0,0,0,.55); } /* >130 (#fileModal), <200 (notif) */
.selmenu[hidden] { display: none; }
.selmenu-b { background: transparent; border: 1px solid var(--line2); color: var(--text); border-radius: 8px; padding: 8px 13px; font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; min-height: 38px; white-space: nowrap; }
.selmenu-b:active { background: rgba(255,243,18,.10); border-color: var(--amber); }
/* krótki komunikat schowka (np. „Schowek pusty/niedostępny") — zamiast cichej awarii */
.clip-toast { position: fixed; left: 50%; bottom: 22%; transform: translateX(-50%) translateY(8px); z-index: 210; background: rgba(20,20,24,.95); color: var(--text); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 9px 14px; font-size: .86rem; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; max-width: 88vw; text-align: center; }
.clip-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* na dotyku tłumimy natywny callout iOS (długie przytrzymanie) TYLKO na polach z własnym menu — nie na linkach/obrazkach.
   UWAGA: to NIE tłumi natywnego menu EDYCJI w polach edytowalnych (to robi dopiero override natywny WKWebView/ActionMode). */
@media (pointer: coarse) { input, textarea { -webkit-touch-callout: none; } }
/* popup notatki */
.ed-notepop { position: fixed; z-index: 111; width: 300px; background: rgba(26,26,30,.92); backdrop-filter: blur(14px) saturate(1.25); -webkit-backdrop-filter: blur(14px) saturate(1.25); border: 1px solid rgba(255,255,255,.09); border-radius: 12px; padding: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.ed-notepop[hidden] { display: none; }
.enp-title { color: var(--text); font-weight: 700; font-size: .9rem; margin-bottom: 6px; }
.enp-snip { color: var(--yellow); font-family: var(--mono); font-size: .82rem; margin-bottom: 8px; max-height: 3.2em; overflow: hidden; }
.enp-ta { width: 100%; box-sizing: border-box; min-height: 70px; background: #121212; border: 1px solid var(--line2); color: var(--text); border-radius: 9px; padding: 8px 10px; font: inherit; font-size: .9rem; resize: vertical; outline: none; }
.enp-ta:focus { border-color: var(--amber); }
.enp-row { display: flex; gap: 8px; margin-top: 9px; justify-content: flex-end; }
/* lista notatek w panelu bocznym */
.ed-notes { margin-top: 18px; text-align: left; }
.ednote { position: relative; background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.09); border-left: 3px solid #8ab4f8; border-radius: 9px; padding: 8px 26px 8px 10px; margin-bottom: 7px; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); } /* liquid glass */
.ednote:hover { border-color: rgba(255,255,255,.16); }
.ednote-pron { border-left-color: #34d399; }
/* tooltip na hover słowa (wymowa / notatka) */
.ed-tip { position: fixed; z-index: 115; max-width: 280px; background: rgba(27,27,31,.88); backdrop-filter: blur(14px) saturate(1.25); -webkit-backdrop-filter: blur(14px) saturate(1.25); border: 1px solid rgba(255,255,255,.09); border-radius: 9px; padding: 7px 10px; box-shadow: 0 8px 22px rgba(0,0,0,.5); pointer-events: none; font-size: .82rem; line-height: 1.4; } /* #44: szklany tooltip (wisi nad tekstem — blur realnie widać) */
.ed-tip[hidden] { display: none; }
.ed-tip .tip-pron { color: #34d399; }
.ed-tip .tip-note { color: var(--text); }
.ed-tip .tip-pron + .tip-note { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }
.ednote-snip { color: var(--muted); font-family: var(--mono); font-size: .74rem; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ednote-txt { color: var(--text); font-size: .86rem; white-space: pre-wrap; }
.ednote-del { position: absolute; top: 5px; right: 5px; background: none; border: none; color: var(--muted2); cursor: pointer; font-size: .85rem; line-height: 1; padding: 2px 4px; }
.ednote-del:hover { color: #ff6b6b; }
.ed-textarea.plain { color: var(--text); -webkit-text-fill-color: var(--text); }
.ed-textarea::placeholder { color: var(--muted2); -webkit-text-fill-color: var(--muted2); }
/* rymy w edytorze: tylko kolor/tło (BEZ paddingu/bordera — inaczej rozjeżdża się z textarea) */
.ed-highlight .rh { color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); border-radius: 4px; }
.ed-highlight .rh-soft { background: color-mix(in srgb, var(--c) 9%, transparent); }
.ed-highlight .rh-deep { text-decoration: underline; text-decoration-color: var(--c); text-underline-offset: 2px; }
.ed-highlight .rh-full { box-shadow: inset 0 -2px 0 var(--c); text-shadow: 0 0 .6px var(--c); } /* #47: BEZ font-weight — proporcjonalny font zmienia szerokość bolda → rozjazd warstw */
/* znaczniki strukturalne w [NAWIASACH] (np. [Zwrotka 1]) — jasnoszara kursywa, nie tekst rapu */
.rhtext .rh-sec { color: #a7adba; font-style: italic; }
.ed-highlight .rh-sec { color: #a7adba; } /* #47: BEZ italic na nakładce — kursywa proporcjonalna ma inne szerokości → rozjazd z textarea */
/* ad-liby w (NAWIASACH OKRĄGŁYCH) — jasnoszara czcionka, NIE łapią rymów/kolorów (jak słyszy raper: tło) */
.rhtext .rh-adlib { color: #9aa0ac; }
.ed-highlight .rh-adlib { color: #9aa0ac; }
/* legenda pod edytorem: co znaczy kolor / pogrubienie / podkreślenie / ramka */
.ed-rhlegend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 0; padding: 8px 14px; background: rgba(20,20,24,.85); border: none; border-top: 1px solid rgba(255,255,255,.06); border-radius: 0; font-size: .76rem; color: var(--muted); box-shadow: inset 0 1px 0 rgba(255,255,255,.03); } /* #43: na styk; #44: szklana listwa */
.ed-rhlegend .leg-t { font-weight: 700; color: var(--text); }
.ed-rhlegend .leg-i { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ed-rhlegend .leg-ex { --c: #5cc85f; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); border-radius: 4px; padding: 1px 6px; font-family: var(--mono); font-weight: 600; }
.ed-rhlegend .leg-ex.b { font-weight: 800; }
.ed-rhlegend .leg-ex.u { text-decoration: underline; text-decoration-color: var(--c); text-decoration-thickness: 2px; text-underline-offset: 2px; }
.ed-rhlegend .leg-ex.p { background: transparent; outline: 1px dashed rgba(52,211,153,.85); outline-offset: 1px; }
@media (max-width: 640px) { .ed-rhlegend { font-size: .72rem; gap: 5px 10px; } }
.ed-side { width: 320px; flex: none; border-left: 1px solid rgba(255,255,255,.07); background: rgba(15,15,19,.55); padding: 18px; overflow-y: auto; box-shadow: inset 1px 0 0 rgba(255,255,255,.04); } /* liquid glass: mocniej przezroczysty — złota poświata .editor (prawy górny róg) prześwituje przez taflę; na mobile dostaje prawdziwy blur — patrz media query */
/* scrollbary w edytorze à la iOS: półprzezroczyste pigułki, momentum, bounce-containment
   (panel boczny / zakładki / nakładki / historia / diff / czat — NIE textarea, żeby nie ruszać geometrii warstw rymów) */
.ed-side, .ed-ov-body, .edh-list, .edh-diff-body, .ed-chat-log { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.24) transparent; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.ed-side::-webkit-scrollbar, .ed-tabs::-webkit-scrollbar, .ed-ov-body::-webkit-scrollbar, .edh-list::-webkit-scrollbar, .edh-diff-body::-webkit-scrollbar, .ed-chat-log::-webkit-scrollbar, .ed-tools::-webkit-scrollbar { width: 8px; height: 8px; }
.ed-side::-webkit-scrollbar-thumb, .ed-tabs::-webkit-scrollbar-thumb, .ed-ov-body::-webkit-scrollbar-thumb, .edh-list::-webkit-scrollbar-thumb, .edh-diff-body::-webkit-scrollbar-thumb, .ed-chat-log::-webkit-scrollbar-thumb, .ed-tools::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; transition: background-color .2s; }
.ed-side:hover::-webkit-scrollbar-thumb, .ed-ov-body:hover::-webkit-scrollbar-thumb, .edh-list:hover::-webkit-scrollbar-thumb, .edh-diff-body:hover::-webkit-scrollbar-thumb, .ed-chat-log:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,.34); }
.ed-side::-webkit-scrollbar-track, .ed-tabs::-webkit-scrollbar-track, .ed-ov-body::-webkit-scrollbar-track, .edh-list::-webkit-scrollbar-track, .edh-diff-body::-webkit-scrollbar-track, .ed-chat-log::-webkit-scrollbar-track, .ed-tools::-webkit-scrollbar-track { background: transparent; }
/* #50: pole pisania (textarea) — scrollbar jak iOS (cienka pigułka, znika gdy nie trzeba). Szerokość gutter
   8px na WSZYSTKICH 4 warstwach (overlay-y mają overflow:hidden, ale tę samą rezerwację) → zero rozjazdu rymów. */
.ed-highlight::-webkit-scrollbar, .ed-anno::-webkit-scrollbar, .ed-ghost::-webkit-scrollbar, .ed-textarea::-webkit-scrollbar { width: 8px; height: 8px; }
.ed-highlight::-webkit-scrollbar-track, .ed-anno::-webkit-scrollbar-track, .ed-ghost::-webkit-scrollbar-track, .ed-textarea::-webkit-scrollbar-track { background: transparent; }
/* domyślnie UKRYTY (jak iOS); pokazuje się tylko podczas scrollowania (klasa .sb-show z JS) i znika po chwili */
.ed-textarea::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; transition: background-color .35s ease; min-height: 36px; }
.ed-textarea.sb-show::-webkit-scrollbar-thumb { background: rgba(255,255,255,.5); }   /* JAŚNIEJSZY, dobrze widoczny */
.ed-textarea.sb-show::-webkit-scrollbar-thumb:active { background: rgba(255,255,255,.62); }
/* złoty fokus z klawiatury w całym edytorze */
.editor :is(button, [role="button"], input, .ed-tab):focus-visible { outline: 2px solid rgba(255,243,18,.6); outline-offset: 2px; }
.ed-side-h { font-weight: 700; color: var(--text); margin-bottom: 10px; }
/* #45: chat z asystentem AI na górze panelu bocznego (premium) */
.ed-chat { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.07); }
.ed-chat-h { display: flex; align-items: center; justify-content: space-between; }
.ed-chat-t { font-weight: 800; font-size: .92rem; letter-spacing: .03em; background: linear-gradient(90deg, var(--yellow), #ffe08a, var(--yellow)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* złoty gradient-text jak est-aihead (lista wyjątków #40) */
.ed-chat-clear { background: none; border: none; color: var(--muted2); font: inherit; font-size: .74rem; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.ed-chat-clear:hover { color: var(--text); background: rgba(255,255,255,.06); }
.ed-chat-clear[hidden] { display: none; }
.ed-chat-log { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; scrollbar-width: thin; }
.ed-chat-hint { color: var(--muted2); font-size: .8rem; line-height: 1.45; padding: 2px 0; }
.ed-chat-m { padding: 7px 10px; border-radius: 11px; font-size: .85rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: break-word; max-width: 92%; }
.ed-chat-m.user { align-self: flex-end; background: linear-gradient(180deg, rgba(255,243,18,.17), rgba(255,243,18,.1)); border: 1px solid rgba(255,243,18,.28); border-bottom-right-radius: 4px; color: var(--text); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); } /* liquid glass */
.ed-chat-m.ai { align-self: flex-start; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.09); border-bottom-left-radius: 4px; color: var(--text); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); } /* liquid glass */
.ed-chat-m.err { color: var(--muted); font-style: italic; }
.ed-chat-dots { display: inline-flex; gap: 4px; padding: 3px 0; }
.ed-chat-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: chDot 1.2s ease-in-out infinite; }
.ed-chat-dots i:nth-child(2) { animation-delay: .2s; }
.ed-chat-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes chDot { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.ed-chat-bar { display: flex; gap: 6px; }
.ed-chat-bar[hidden] { display: none; }
.ed-chat-in { flex: 1; min-width: 0; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 9px; color: var(--text); padding: 8px 10px; font: inherit; font-size: .85rem; outline: none; transition: border-color .15s, box-shadow .15s; }
.ed-chat-in:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255,243,18,.14); }
.ed-chat-send { flex: none; }
.ed-chat-lock { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025)); border: 1px dashed rgba(255,255,255,.12); border-radius: 11px; color: var(--muted); font-size: .82rem; text-align: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); } /* liquid glass */
.ed-chat-lock[hidden] { display: none; }
.ed-radar { display: flex; justify-content: center; margin: -20px -10px 0; } /* claw-back paddingu (szerszy radar) + podciągnięcie pod kreskę score (mało pustego miejsca) */
.ed-radar canvas { max-width: 380px; width: 100%; height: auto; }
.ed-stats { margin-top: 14px; text-align: center; }
.eds-big { font-family: var(--mono); font-weight: 800; font-size: 2.4rem; color: var(--yellow); }
.eds-big small { font-size: 1rem; color: var(--muted); }
.eds-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.eds-grid > div { background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035)); border: 1px solid rgba(255,255,255,.09); border-radius: 11px; padding: 8px 4px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 12px rgba(0,0,0,.22); } /* liquid glass: gradient tafli + highlight górnej krawędzi + miękki cień */
.eds-grid b { display: block; font-family: var(--mono); font-weight: 800; color: var(--text); font-size: 1.05rem; }
.eds-grid span { display: block; color: var(--muted); font-size: .68rem; margin-top: 2px; }
body.ed-open { overflow: hidden; }
/* stary baner „prototyp" zastąpiony przez hero */
#note { display: none; }

/* ===== STRONA GŁÓWNA (hero) ===== */
#view-home { padding: 18px 0 40px; }
.hero { text-align: center; max-width: 760px; margin: 0 auto; padding: 40px 16px 8px; }
/* #29: „byłem zalogowany" (inline-script w head) — hero gościa schowany do werdyktu me.php, zero mignięcia */
html.waitauth #homeGuest { display: none; }
.hero-title { font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1.05; font-weight: 800; letter-spacing: -.02em; margin: 0 0 18px; }
.hero-title .hl { color: var(--yellow); text-shadow: var(--glow-sm); }
.hero-sub { color: var(--muted); font-size: 1.05rem; max-width: 620px; margin: 0 auto 28px; }
.hero-cta { background: linear-gradient(180deg, var(--yellow2), var(--yellow)); color: #14120a; border: none; border-radius: 14px; padding: 16px 34px; font: inherit; font-weight: 800; font-size: 1.15rem; cursor: pointer; box-shadow: var(--glow); transition: transform .12s ease, box-shadow .2s ease; }
.hero-cta:hover { transform: translateY(-2px); box-shadow: 0 0 36px rgba(255,243,18,.45); }
.hero-hint { color: var(--muted2); font-size: .85rem; margin: 14px 0 0; }
.hero-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 44px auto 0; max-width: 720px; text-align: left; }
.hero-feats .feat { background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.09); border-radius: 14px; padding: 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 18px rgba(0,0,0,.22); backdrop-filter: blur(14px) saturate(1.25); -webkit-backdrop-filter: blur(14px) saturate(1.25); } /* liquid glass */
.hero-feats .feat b { display: block; margin-bottom: 6px; font-size: .98rem; }
.hero-feats .feat span { color: var(--muted); font-size: .85rem; }
@media (max-width: 680px) { .hero-feats { grid-template-columns: 1fr; } }

/* ===== HERO: układ tekst + animowany „kafelek edytora" ===== */
#homeGuest { max-width: 1080px; } /* szerzej niż domyślny hero (760), bo dwukolumnowy układ z podglądem */
.hero-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 36px; align-items: center; text-align: left; max-width: 1060px; margin: 0 auto; padding: 14px 0 4px; }
.hero-main .hero-title { margin: 0 0 16px; }
.hero-main .hero-sub { margin: 0 0 26px; }
.hero-copy { min-width: 0; }
@media (max-width: 900px) {
  .hero-main { grid-template-columns: 1fr; gap: 26px; text-align: center; max-width: 600px; }
  .hero-main .hero-sub { margin-left: auto; margin-right: auto; }
}

.hd-wrap { min-width: 0; }
.hd-window { position: relative; border: 1px solid var(--line2); border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, #101015, #0a0a0d);
  box-shadow: 0 26px 64px rgba(0,0,0,.5), 0 0 44px rgba(255,243,18,.06), inset 0 1px 0 rgba(255,255,255,.05); }
.hd-bar { display: flex; align-items: center; gap: 10px; padding: 9px 13px; background: rgba(255,255,255,.03); border-bottom: 1px solid var(--line); }
.hd-dots { display: inline-flex; gap: 6px; flex: none; }
.hd-dots i { width: 11px; height: 11px; border-radius: 50%; background: #2c2c33; }
.hd-dots i:nth-child(1) { background: #ff5f57; } .hd-dots i:nth-child(2) { background: #febc2e; } .hd-dots i:nth-child(3) { background: #28c840; }
.hd-file { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-family: var(--mono); font-size: .8rem; }
.hd-file .hd-mark { width: 16px; height: 16px; opacity: .9; }
.hd-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--yellow); font-size: .72rem; font-weight: 600; letter-spacing: .02em; }
.hd-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 8px var(--yellow); animation: hdPulse 1.6s ease-in-out infinite; }
@keyframes hdPulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.hd-screen { font-family: var(--ednotes); font-size: clamp(.98rem, .9rem + .42vw, 1.22rem); line-height: 1.7; color: var(--text);
  padding: 20px 22px; min-height: 208px; text-align: left; white-space: normal; overflow-wrap: break-word; }
.hd-screen.hd-fade { transition: opacity .5s ease; opacity: 0; }
.hd-caret { display: inline-block; width: 2px; height: 1.05em; vertical-align: -.16em; margin-left: 1.5px; background: var(--yellow); box-shadow: 0 0 6px rgba(255,243,18,.6); animation: hdCaret 1.05s steps(1) infinite; }
@keyframes hdCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.hd-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 16px; padding: 9px 16px 12px; border-top: 1px solid var(--line); background: rgba(20,20,24,.6); font-size: .73rem; color: var(--muted); }
.hd-l { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.hd-sw { width: 12px; height: 12px; border-radius: 4px; background: color-mix(in srgb, var(--c) 55%, transparent); box-shadow: inset 0 0 0 1px var(--c); }
.hd-ex { font-family: var(--mono); color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); border-radius: 4px; padding: 1px 6px; }
.hd-ex.b { font-weight: 800; box-shadow: inset 0 -2px 0 var(--c); }
.hd-ex.u { text-decoration: underline; text-decoration-color: var(--c); text-decoration-thickness: 2px; text-underline-offset: 2px; }
/* rymy w kafelku — odwzorowanie .ed-highlight .rh (paleta .rh-N jest globalna) */
.hd-screen .rh { color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); border-radius: 4px; }
.hd-screen .rh-soft { background: color-mix(in srgb, var(--c) 9%, transparent); }
.hd-screen .rh-deep { text-decoration: underline; text-decoration-color: var(--c); text-underline-offset: 2px; }
.hd-screen .rh-full { box-shadow: inset 0 -2px 0 var(--c); text-shadow: 0 0 .6px var(--c); }
/* rymy w showcase „Piszcie razem" (collab) — te same kolory co w edytorze */
.fs-collab .rh { color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); border-radius: 4px; }
.fs-collab .rh-soft { background: color-mix(in srgb, var(--c) 9%, transparent); }
.fs-collab .rh-deep { text-decoration: underline; text-decoration-color: var(--c); text-underline-offset: 2px; }
.fs-collab .rh-full { box-shadow: inset 0 -2px 0 var(--c); text-shadow: 0 0 .6px var(--c); }
.fs-collab .rh-sec { color: #a7adba; }
.fs-collab .rh-adlib { color: #9aa0ac; }
@media (max-width: 900px) { .hd-screen { min-height: 172px; } }
@media (max-width: 560px) {
  .hd-screen { font-size: .86rem; line-height: 1.5; padding: 14px 16px; min-height: 150px; } /* mniejszy/ciaśniejszy → cały 4. wers się mieści */
  .hd-cursor { transform: scale(.72); transform-origin: top left; } /* „łapka" (fałszywy kursor) mniejsza na telefonie */
  .hd-legend { gap: 6px 12px; font-size: .68rem; padding: 8px 14px 10px; }
}

/* --- interaktywne demo AI: zaznaczenie, kursor, menu, propozycje rymów, ghost --- */
.hd-sel { background: rgba(255,243,18,.22); border-radius: 3px; box-shadow: 0 0 0 1px rgba(255,243,18,.4); }
.hd-ghost { color: var(--muted); font-style: italic; opacity: .92; }
.hd-spin { display: inline-block; width: .78em; height: .78em; border: 2px solid var(--muted); border-top-color: transparent; border-radius: 50%; margin-right: 7px; vertical-align: -.08em; animation: ghspin .7s linear infinite; }
/* fałszywy kursor myszy */
.hd-cursor { position: absolute; left: 0; top: 0; width: 22px; height: 22px; z-index: 30; pointer-events: none; opacity: 0;
  transition: left .55s cubic-bezier(.45,.05,.25,1), top .55s cubic-bezier(.45,.05,.25,1), opacity .22s ease; filter: drop-shadow(0 2px 3px rgba(0,0,0,.55)); }
.hd-cursor.show { opacity: 1; }
.hd-cursor svg { display: block; }
.hd-cursor.click svg { animation: hdClick .3s ease; }
@keyframes hdClick { 0%,100% { transform: scale(1); } 38% { transform: scale(.78); } }
.hd-cursor .hd-ripple { position: absolute; left: 1px; top: 1px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--yellow); opacity: 0; }
.hd-cursor.click .hd-ripple { animation: hdRipple .45s ease-out; }
@keyframes hdRipple { 0% { opacity: .85; transform: scale(.3); } 100% { opacity: 0; transform: scale(2.6); } }
/* menu zaznaczenia — NOWY wygląd (jak edytor w skin-fresh): szklany pasek + równe segmenty, BEZ gradientu/iskier */
.hd-seltool { position: absolute; z-index: 25; display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; padding: 0; overflow: hidden; min-width: 230px; max-width: 92%;
  background: rgba(20,20,24,.5); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.1); border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12);
  opacity: 0; transform: translateY(5px) scale(.96); transform-origin: 30% 100%; transition: opacity .18s ease, transform .18s ease; }
.hd-seltool.show { opacity: 1; transform: translateY(0) scale(1); }
/* AI / notatka / wymowa = równe segmenty, hairline między nimi, bez ramek/tła (skin-fresh) */
.hd-estbtn { flex: 1 1 0; min-width: 0; margin: 0; border: none; border-radius: 0; background: transparent; color: var(--text);
  min-height: 44px; padding: 9px 4px; display: flex; align-items: center; justify-content: center; white-space: nowrap; font: inherit; font-size: .76rem; cursor: pointer; }
.hd-estbtn + .hd-estbtn { border-left: 1px solid rgba(255,255,255,.12); }
.hd-estbtn:hover, .hd-estbtn.pick { background: rgba(255,255,255,.06); }
.hd-estbtn.hd-ai { font-weight: 800; }   /* „✨ AI" lekko wyróżniony jak w edytorze (sama waga, bez gradientu) */
/* propozycje rymów — NAD segmentami, w tym samym szklanym pasku */
.hd-rhymes { flex-basis: 100%; width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,.1); }
.hd-rhymes[hidden] { display: none; }
.hd-aihead { flex-basis: 100%; font-weight: 800; font-size: .72rem; letter-spacing: .04em; background: linear-gradient(90deg,var(--yellow),#ffe08a,var(--yellow)); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 1px 2px 2px; }
.hd-rh { font-size: .7rem; color: var(--muted); display: inline-flex; align-items: center; }
.hd-rh-spin { display: inline-block; width: .72em; height: .72em; border: 2px solid var(--muted); border-top-color: transparent; border-radius: 50%; margin-right: 6px; animation: ghspin .7s linear infinite; }
.hd-rw { font: inherit; font-size: .76rem; color: var(--yellow); background: rgba(255,243,18,.08); border: 1px solid rgba(255,243,18,.25); border-radius: 999px; padding: 2px 10px; white-space: nowrap; transition: background .15s, box-shadow .15s; }
.hd-rw.pick { background: rgba(255,243,18,.32); box-shadow: 0 0 0 1px rgba(255,243,18,.55); }
/* pola edycji dema w panelu admina (zakładka Strona główna) */
.hd-cfg-in { display: block; width: 100%; box-sizing: border-box; margin: 4px 0 12px; }
.hd-cfg-ta { min-height: 58px; resize: vertical; line-height: 1.4; }
.hd-sec { font-weight: 800; color: var(--text); margin: 20px 0 8px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .9rem; }

/* ===== sekcja „możliwości": animowane showcase'y pod hero ===== */
.showcase { max-width: 1040px; margin: 56px auto 8px; padding: 0 4px; text-align: left; }
.sc-kicker { text-align: center; color: var(--muted2); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 30px; }
.fs-row { display: grid; grid-template-columns: 1fr 1.05fr; gap: 38px; align-items: center; margin-bottom: 44px; }
.fs-row.fs-rev .fs-copy { order: 2; }
.fs-copy { min-width: 0; }
.fs-h { font-size: clamp(1.45rem, 1.15rem + 1.5vw, 2.2rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; margin: 0 0 12px; }
.fs-h .hl { color: var(--yellow); }
.fs-p { color: var(--muted); font-size: 1rem; line-height: 1.55; margin: 0; max-width: 470px; }
.fs-visual { min-width: 0; }
@media (max-width: 820px) {
  .fs-row { grid-template-columns: 1fr; gap: 18px; margin-bottom: 36px; text-align: center; }
  .fs-row.fs-rev .fs-copy { order: 0; }
  .fs-p { margin-left: auto; margin-right: auto; }
}
.fs-collab, .fs-radar { border: 1px solid var(--line2); border-radius: 16px;
  background: linear-gradient(180deg, #101015, #0a0a0d); box-shadow: 0 20px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05); }
/* collab — mini-edytor z kursorami wielu osób */
.fs-collab { position: relative; overflow: hidden; font-family: var(--ednotes); font-size: clamp(.92rem, .86rem + .35vw, 1.1rem);
  line-height: 2.15; color: var(--text); padding: 22px 22px 26px; min-height: 200px; white-space: pre-wrap; word-break: break-word; transition: opacity .45s ease; }
.fs-collab.fs-fade { opacity: 0; }
.fs-caret { display: inline-block; width: 2px; height: 1.15em; vertical-align: -.22em; margin: 0 1px; border-radius: 1px; background: var(--cc); position: relative; }
.fs-caret::after { content: attr(data-name); position: absolute; left: -1px; top: -1.5em; font-family: var(--sans); font-size: .62rem; font-weight: 700;
  color: #14120a; background: var(--cc); padding: 1px 6px; border-radius: 6px 6px 6px 1px; white-space: nowrap; line-height: 1.45; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.fs-caret.parked { opacity: .9; }
.fs-caret.blink { animation: fsBlink 1.05s steps(1) infinite; }
@keyframes fsBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .25; } }
/* radar — animowany wykres 5-osiowy + pierścień wyniku */
.fs-radar { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; padding: 18px 14px; min-height: 200px; }
.fs-radar svg { width: 250px; height: 200px; max-width: 100%; flex: none; overflow: visible; }
.rdr-grid { fill: none; stroke: rgba(255,255,255,.08); }
.rdr-axis { stroke: rgba(255,255,255,.1); }
.rdr-poly { fill: rgba(255,243,18,.16); stroke: var(--yellow); stroke-width: 2; stroke-linejoin: round; opacity: 0;
  transform-box: view-box; transform-origin: 125px 96px; transform: scale(.02); transition: transform 1.05s cubic-bezier(.2,.8,.25,1), opacity .5s ease; }
.fs-radar.play .rdr-poly { transform: scale(1); opacity: 1; }
.rdr-dot { fill: var(--yellow); opacity: 0; transition: opacity .4s ease .75s; }
.fs-radar.play .rdr-dot { opacity: 1; }
.rdr-label { fill: var(--muted); font-family: var(--sans); font-size: 8.5px; font-weight: 600; }
.fs-ring-wrap { text-align: center; flex: none; }
.fs-ring { --p: 0; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; position: relative; margin: 0 auto;
  background: conic-gradient(var(--yellow) calc(var(--p) * 1%), rgba(255,255,255,.08) 0); }
.fs-ring::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #0c0c0f; }
.fs-ring b { position: relative; font-family: var(--mono); font-weight: 800; font-size: 1.65rem; color: var(--text); line-height: 1; }
.fs-ring small { position: relative; color: var(--muted); font-size: .68rem; }
.fs-ring-cap { color: var(--muted); font-size: .72rem; margin-top: 9px; }
.fs-ring-cap b { color: var(--yellow); font-family: var(--mono); }
/* chat z asystentem AI (showcase) — jak panel w edytorze */
.fs-chat { display: flex; flex-direction: column; border: 1px solid var(--line2); border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, #101015, #0a0a0d); box-shadow: 0 20px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05); min-height: 210px; }
.fs-chat-h { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.fs-chat-t { font-weight: 800; font-size: .92rem; letter-spacing: .03em; background: linear-gradient(90deg, var(--yellow), #ffe08a, var(--yellow)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fs-chat-log { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; min-height: 118px; overflow: hidden; }
.fs-msg { max-width: 86%; padding: 8px 12px; border-radius: 13px; font-size: .9rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: break-word; animation: fsMsgIn .3s cubic-bezier(.2,.8,.2,1); }
.fs-msg.user { align-self: flex-end; color: var(--text); background: linear-gradient(180deg, rgba(255,243,18,.17), rgba(255,243,18,.1)); border: 1px solid rgba(255,243,18,.28); border-bottom-right-radius: 4px; }
.fs-msg.ai { align-self: flex-start; color: var(--text); background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.09); border-bottom-left-radius: 4px; }
@keyframes fsMsgIn { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.fs-chat-log.fs-fade { transition: opacity .4s ease; opacity: 0; }
.fs-dots { display: inline-flex; gap: 4px; padding: 2px 0; }
.fs-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: chDot 1.2s ease-in-out infinite; }
.fs-dots i:nth-child(2) { animation-delay: .2s; } .fs-dots i:nth-child(3) { animation-delay: .4s; }
.fs-chat-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); }
.fs-chat-in { flex: 1; color: var(--muted2); font-size: .85rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 9px; padding: 8px 11px; }
.fs-chat-send { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: #14120a; background: var(--yellow); font-size: .9rem; }
/* strona główna dla ZALOGOWANYCH: powitanie + szukajka + przycisk + ostatnie teksty */
.home-user { max-width: 760px; margin: 0 auto; padding: 28px 16px 8px; }
.home-user[hidden] { display: none; }
.hu-head { margin-bottom: 18px; }
.hu-title { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; }
.hu-sub { color: var(--muted); font-size: .95rem; margin: 0; }
/* nick w powitaniu = przycisk z rozsuwanym menu (avatar+nick), BIAŁY, dopasowany wielkością do nagłówka */
.hu-name-wrap { position: relative; display: inline-flex; vertical-align: middle; top: -3px; } /* dostrojenie: nick na równi z „Cześć" */
.hu-name { display: inline-flex; align-items: center; gap: .3em; font: inherit; color: var(--text);
  background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.035));
  border: 1px solid rgba(255,255,255,.16); padding: .06em .5em .06em .1em; border-radius: 999px;
  cursor: pointer; line-height: 1; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 5px 16px rgba(0,0,0,.30);
  transition: background .18s, border-color .18s, box-shadow .18s, transform .15s; }
.hu-name:hover { background: linear-gradient(180deg, rgba(255,243,18,.17), rgba(255,255,255,.04));
  border-color: rgba(255,243,18,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 7px 20px rgba(255,243,18,.16);
  transform: translateY(-1px); }
.hu-name:active { transform: translateY(0); }
.hu-name[aria-expanded="true"] { background: linear-gradient(180deg, rgba(255,243,18,.17), rgba(255,255,255,.04)); border-color: rgba(255,243,18,.5); }
.hu-name .hu-name-av { width: 1.05em; height: 1.05em; font-size: .92em; flex: none; box-sizing: content-box; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(255,243,18,.4); }
.hu-name-caret { font-size: .5em; opacity: .65; margin: 0 .05em 0 .1em; transition: transform .2s, opacity .15s; }
.hu-name[aria-expanded="true"] .hu-name-caret { transform: rotate(180deg); opacity: 1; }
/* #22: czerwona KROPKA nieprzeczytanych koło nicku na home (proporcjonalna do em przycisku) */
.hu-badge { width: .5em; height: .5em; border-radius: 50%; background: #ff5252; flex: none;
  box-shadow: 0 0 0 2px rgba(0,0,0,.28), 0 0 8px rgba(255,82,82,.65); margin-left: .25em; align-self: center; }
.hu-badge[hidden] { display: none; }
.hu-usermenu { position: absolute !important; top: calc(100% + 8px); left: 0; right: auto; font-size: .95rem; font-weight: 400; letter-spacing: normal; min-width: 210px; width: max-content; max-width: min(260px, 80vw); }
.hu-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 24px; }
.hu-cta { font-size: 1rem; padding: 13px 22px; border-radius: 12px; flex: none; }
.hu-search { flex: 1; min-width: 220px; background: #121212; color: var(--text); border: 1px solid var(--line2); border-radius: 12px; padding: 13px 14px; font: inherit; }
.hu-search:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255,243,18,.14); }
.hu-search::placeholder { color: var(--muted2); }
.hu-recent-h { display: flex; align-items: baseline; justify-content: space-between; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.hu-all { color: var(--yellow); font-size: .82rem; font-weight: 600; text-decoration: none; }
.hu-all:hover { text-decoration: underline; }
.home-user .plist { max-height: none; }
/* #poprawki: lista tekstów na profilu jak na głównej (bez ramki .pcard) */
.prof-texts { margin-top: 18px; }
.prof-texts .hu-search { width: 100%; margin-bottom: 12px; }
.prof-texts .plist { max-height: none; }
.prof-count { color: var(--muted2); font-weight: 500; font-size: .9rem; }
/* #poprawki #3: zakładka Ustawienia */
.set-card { margin-bottom: 16px; }
.set-card .authinput { width: 100%; margin-bottom: 8px; }
.set-card .authsubmit { margin-top: 2px; }
.set-card .pub-switch { margin-top: 4px; }
@media (max-width: 680px) { .hu-cta { width: 100%; } }
/* podstrona Wiadomości (skrzynka jak maile) */
#view-messages { max-width: 740px; margin: 0 auto; padding: 18px 16px 40px; }
#view-messages[hidden] { display: none; }
.msg-top { margin-bottom: 14px; }
.msg-h { font-size: 1.5rem; font-weight: 800; margin: 0; }
.msg-list { display: flex; flex-direction: column; gap: 8px; }
.msg-row { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; background: linear-gradient(180deg, rgba(255,255,255,.062), rgba(255,255,255,.028)); border: 1px solid rgba(255,255,255,.085); border-radius: 12px; padding: 12px 14px; cursor: pointer; font: inherit; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 4px 14px rgba(0,0,0,.2); transition: border-color .15s, box-shadow .15s; } /* liquid glass */
.msg-row:hover { border-color: rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 6px 18px rgba(0,0,0,.26); }
.msg-row.unread { border-left: 3px solid var(--yellow); background: linear-gradient(180deg, rgba(255,243,18,.1), rgba(255,243,18,.04)); }
.msg-ic { font-size: 1.2rem; flex: none; }
.msg-ic.big { font-size: 1.8rem; }
.msg-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.msg-subj { font-weight: 700; color: var(--text); font-size: .92rem; display: flex; align-items: center; gap: 8px; }
.msg-prev { color: var(--muted); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-prev b { color: var(--muted); font-weight: 700; }
.msg-when { color: var(--muted2); font-size: .72rem; flex: none; white-space: nowrap; }
.msg-tag { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted2); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.07); border-radius: 999px; padding: 1px 7px; }
.msg-tag.new { color: #14120a; background: var(--yellow); }
.msg-tag.ok { color: var(--good); background: color-mix(in srgb, var(--good) 16%, transparent); }
.msg-back { background: none; border: none; color: var(--yellow); font: inherit; font-size: .85rem; cursor: pointer; padding: 0; margin-bottom: 14px; }
.msg-detail { background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.09); border-radius: 14px; padding: 20px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), var(--shadow-soft); backdrop-filter: blur(14px) saturate(1.25); -webkit-backdrop-filter: blur(14px) saturate(1.25); } /* liquid glass */
.msg-d-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.msg-d-subj { font-weight: 800; font-size: 1.1rem; color: var(--text); }
.msg-d-meta { color: var(--muted); font-size: .8rem; margin-top: 2px; }
.msg-body { color: var(--text); font-size: .95rem; line-height: 1.6; }
.msg-body b { color: var(--yellow); }
.msg-acts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.msg-open { font-size: .95rem; padding: 11px 20px; border-radius: 11px; }
.msg-done { color: var(--good); font-weight: 700; }

/* ===== EDYTOR: panel boczny ze statystykami ===== */
@media (min-width: 761px) { .ed-side.hidden { display: none; } } /* tylko desktop — na mobile panel steruje się klasą .open (transform), patrz niżej */
.ed-score { display: flex; align-items: center; gap: 14px; margin-bottom: 0; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.10); } /* lekka kreska oddzielająca score od radaru */
.ed-ring { --p: 0; width: 74px; height: 74px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--yellow) calc(var(--p) * 1%), var(--line) 0); filter: drop-shadow(0 0 12px rgba(255,243,18,.22)); }
.ed-ring-in { width: 58px; height: 58px; border-radius: 50%; background: var(--panel); display: grid; place-items: center; }
.ed-ring-in b { font-family: var(--mono); font-weight: 800; font-size: 1.4rem; color: var(--text); line-height: 1; }
.ed-ring-in small { color: var(--muted); font-size: .62rem; }
.ed-verdict { font-weight: 700; font-size: .95rem; color: var(--text); }
.ed-axes { margin: 6px 0 12px; display: flex; flex-direction: column; gap: 7px; }
.eax { display: grid; grid-template-columns: 92px 1fr 26px; align-items: center; gap: 8px; font-size: .78rem; }
.eax-n { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eax-n .tag { font-size: .6rem; padding: 0 3px; }
.eax-bar { height: 7px; background: var(--line); border-radius: 5px; overflow: hidden; }
.eax-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--amber), var(--yellow)); border-radius: 5px; }
.eax-v { font-family: var(--mono); font-weight: 700; text-align: right; color: var(--text); }
.ed-tips { margin-top: 12px; }
.ed-tips .tip { background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.09); border-left: 3px solid var(--amber); border-radius: 9px; padding: 7px 10px; margin-bottom: 6px; font-size: .82rem; color: var(--text); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 3px 10px rgba(0,0,0,.18); } /* liquid glass */

/* ===== EDYTOR: nakładki (historia / udostępnianie) ===== */
.ed-overlay { position: absolute; inset: 0; z-index: 120; background: rgba(0,0,0,.55); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; padding: 20px; }
@media (max-width: 760px) { .ed-overlay { padding: 10px; } .ed-ov-card { max-height: 92vh; } .ed-ov-body { padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); } }
.ed-overlay[hidden] { display: none; }
.ed-ov-card { background: rgba(22,22,26,.92); backdrop-filter: blur(18px) saturate(1.25); -webkit-backdrop-filter: blur(18px) saturate(1.25); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; width: min(760px, 100%); max-height: 86vh; display: flex; flex-direction: column; box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.05); } /* #44: szklana karta overlayów */
.ed-ov-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.ed-ov-body { padding: 16px 18px; overflow-y: auto; }
.edh-wrap { display: grid; grid-template-columns: 220px 1fr; gap: 14px; }
.edh-list { display: flex; flex-direction: column; gap: 6px; max-height: 64vh; overflow-y: auto; }
.edh-item { display: flex; align-items: center; gap: 8px; background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; cursor: pointer; text-align: left; color: var(--text); font: inherit; }
.edh-item.on { border-color: var(--yellow); }
.edh-score { font-family: var(--mono); font-weight: 800; color: var(--yellow); }
.edh-date { color: var(--muted); font-size: .72rem; margin-left: auto; flex: 0 0 auto; white-space: nowrap; align-self: flex-start; } /* nie kurczy się, nie zawija w środku, ląduje czysto po prawej (na wąsko: własna linia) */
.edh-who { font-weight: 700; font-size: .82rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; }
.edh-event { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 8px; padding: 6px 10px; font-size: .8rem; color: var(--muted); border-left: 2px solid var(--line2); margin-left: 4px; }
.edh-restore { background: none; border: 1px solid var(--line2); color: var(--yellow); font: inherit; font-size: .72rem; border-radius: 7px; padding: 2px 8px; cursor: pointer; flex: none; }
.edh-restore:hover { border-color: var(--amber); }
.edh-ev-txt { flex: 1; min-width: 0; }
.edh-ev-txt b { color: var(--text); }
.edh-fev { cursor: pointer; border-radius: 8px; transition: background-color .15s; }
.edh-fev:hover { background: rgba(255,255,255,.05); }
.edh-fev.on { background: rgba(255,243,18,.12); }
.edh-scope { font-size: .82rem; color: var(--muted); margin: 0 0 12px; }
.edh-scope b { color: var(--text); }
.vnow { margin-left: auto; font-size: .66rem; color: #14120a; background: var(--yellow); border-radius: 5px; padding: 1px 5px; font-weight: 700; }
.edh-diff-h { font-weight: 700; margin-bottom: 8px; }
.diff-plus { color: #5ad17e; } .diff-minus { color: #ff8a8a; }
.edh-diff-body { font-family: var(--mono); font-size: .82rem; max-height: 56vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 8px; margin-bottom: 12px; }
.dl { white-space: pre-wrap; padding: 1px 4px; border-radius: 3px; }
.dl-add { background: rgba(90,209,126,.13); color: #b8f0c8; }
.dl-del { background: rgba(255,138,138,.12); color: #ffc2c2; }
.dl-eq { color: var(--muted); }
@media (max-width: 620px) { .edh-wrap { grid-template-columns: 1fr; } }

/* ===== Współdzielenie / obecność ===== */
/* pasek presence „teraz też:" USUNIĘTY (2026-06-10) — div #edPresence wycięty z index.html, wszystkie odwołania w app.js mają guardy if(b) */
.share-form { display: flex; flex-direction: column; gap: 8px; }
.share-form .authinput { width: 100%; }
.share-list .collab { display: flex; align-items: center; gap: 8px; background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; margin-bottom: 6px; }
.share-list .collab-r { margin-left: auto; color: var(--muted); font-size: .78rem; }
.share-list .collab-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-list .collab-role { background: var(--panel); border: 1px solid var(--line2); color: var(--muted); font: inherit; font-size: .72rem; border-radius: 999px; padding: 2px 9px; cursor: pointer; flex: none; }
.share-list .collab-role:hover { color: var(--text); border-color: var(--amber); }
/* link do współpracy */
.share-link { margin: 14px 0; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.share-link-hint { display: block; color: var(--muted); font-size: .78rem; margin-top: 6px; }
.share-link-out { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.share-link-out .authinput { flex: 1; min-width: 160px; font-size: .8rem; }
/* QR do zaproszenia — biała kafelka (skanery chcą jasnego tła + ciszy wokół; sam SVG ma biały margines) */
.share-qr { flex-basis: 100%; display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.share-qr svg { width: 148px; height: 148px; flex: none; border-radius: 10px; box-shadow: 0 4px 18px rgba(0, 0, 0, .35); }
.share-qr-hint { color: var(--muted); font-size: .78rem; max-width: 200px; }
.pshared { margin-top: 8px; }

/* ===== EDYTOR: przełącznik projektów + ukryj statystyki (mobile) ===== */
.ed-side-close { display: none; }
.ed-proj-new { width: 100%; background: var(--yellow); color: #14120a; border: none; border-radius: 10px; padding: 11px; font: inherit; font-weight: 800; cursor: pointer; box-shadow: 0 0 16px rgba(255,243,18,.3); } /* #40 */
.ed-proj-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ed-proj { display: flex; flex-direction: column; gap: 2px; text-align: left; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; cursor: pointer; color: var(--text); font: inherit; }
.ed-proj:hover { border-color: var(--amber); }
.ed-proj.cur { border-color: var(--yellow); box-shadow: 0 0 0 1px var(--yellow) inset; }
.ed-proj-name { font-weight: 700; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-proj-meta { color: var(--muted); font-size: .76rem; }
.ed-proj-search { width: 100%; margin-top: 10px; background: #121212; color: var(--text); border: 1px solid var(--line2); border-radius: 10px; padding: 9px 12px; font: inherit; font-size: .9rem; outline: none; }
.ed-proj-search:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255,243,18,.14); }
.ed-proj-search::placeholder { color: var(--muted2); }

/* poziomy (XP) w profilu */
.plvl-badge { font-size: .62rem; font-weight: 800; background: linear-gradient(180deg, var(--yellow2), var(--yellow)); color: #14120a; border-radius: 5px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; }
.plevel { margin-top: 14px; margin-bottom: 18px; } /* odstęp paska poziomu od kafelków statystyk */
.plevel-top { display: flex; align-items: baseline; gap: 8px; font-size: .85rem; color: var(--muted); margin-bottom: 5px; flex-wrap: wrap; }
.plevel-top b { color: var(--text); font-size: .95rem; }
.plevel-xp { margin-left: auto; font-family: var(--mono); font-size: .76rem; }
/* przełącznik publiczny/prywatny obok poziomu (ładny suwak) */
.pub-switch { display: inline-flex; align-items: center; gap: 7px; margin-left: 14px; cursor: pointer; align-self: center; white-space: nowrap; user-select: none; }
.pub-switch-l { font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.pub-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.pub-slider { position: relative; width: 34px; height: 18px; background: var(--line); border-radius: 999px; transition: background .15s; flex: none; }
.pub-slider::before { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .15s; }
.pub-switch input:checked + .pub-slider { background: var(--yellow); }
.pub-switch input:checked ~ .pub-switch-l { color: var(--text); }
.pub-switch input:checked + .pub-slider::before { transform: translateX(16px); }
.pub-switch input:focus-visible + .pub-slider { box-shadow: 0 0 0 3px rgba(255,243,18,.3); }
.prof-pub-link { margin-top: 9px; font-size: .8rem; color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.prof-pub-link a { color: var(--yellow); }
.prof-pub-off { color: var(--muted2); }
.plink-copy { background: none; border: 1px solid var(--line2); color: var(--muted); border-radius: 7px; padding: 2px 9px; font: inherit; font-size: .75rem; cursor: pointer; }
.plink-copy:hover { color: var(--text); border-color: var(--muted2); }
.plevel-bar { height: 9px; background: var(--line); border-radius: 6px; overflow: hidden; }
.plevel-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--amber), var(--yellow)); border-radius: 6px; transition: width .5s ease; }

/* prywatność profilu / tekstów + publiczny profil */
.prof-priv { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.prof-pub-toggle { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--text); cursor: pointer; white-space: nowrap; }
.prof-pub-toggle input { width: 17px; height: 17px; accent-color: var(--yellow); }
.prof-priv-hint { color: var(--muted); font-size: .82rem; flex: 1 1 220px; }
.prof-priv-hint a { color: var(--yellow); }
.ppub { background: none; border: none; cursor: pointer; font-size: .95rem; padding: 2px 5px; line-height: 1; opacity: .55; filter: grayscale(1); }
.ppub.on { opacity: 1; filter: none; }
.ppub:hover { opacity: 1; }
#view-pubprofil { padding: 8px 0 40px; }
.pp-pub { flex: 1; }
.pub-back { margin-top: 14px; }

/* dzwonek + panel powiadomień */
.bell { position: relative; background: transparent; border: 1px solid var(--line2); color: var(--text); border-radius: 9px; padding: 5px 9px; font-size: 1rem; cursor: pointer; line-height: 1; }
.bell:hover { border-color: var(--amber); }
.bell-badge { position: absolute; top: -7px; right: -7px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #ff5252; color: #fff; font-size: .66rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--bg); }
.bell-badge[hidden] { display: none; }
.notif-panel { position: fixed; top: 64px; right: 18px; width: min(380px, calc(100vw - 24px)); max-height: 70vh; background: var(--panel); border: 1px solid var(--line2); border-radius: 14px; box-shadow: var(--shadow); z-index: 200; display: flex; flex-direction: column; overflow: hidden; }
.notif-panel[hidden] { display: none; }
.notif-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.notif-body { padding: 8px; overflow-y: auto; }
.notif-item { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; margin-bottom: 6px; }
.notif-item.unread { border-left: 3px solid var(--amber); }
.notif-txt { color: var(--text); font-size: .86rem; }
.notif-meta { color: var(--muted2); font-size: .7rem; margin-top: 3px; }
.notif-acts { display: flex; gap: 6px; margin-top: 8px; }
.notif-done { display: inline-block; margin-top: 6px; color: var(--muted); font-size: .76rem; }
.admin-news { width: 100%; min-height: 64px; background: #121212; color: var(--text); border: 1px solid var(--line2); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: .9rem; resize: vertical; outline: none; }
.admin-news:focus { border-color: var(--amber); }
.admin-news-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.admin-news-row .authsubmit { width: auto; margin-left: auto; padding: 9px 16px; }
/* #45: konfigurator asystenta AI w panelu admina */
.aicfg-l { display: block; font-size: .82rem; font-weight: 700; color: var(--text); margin: 12px 0 6px; }
.aicfg-l .muted { font-weight: 400; }
.aicfg-ta { min-height: 72px; }

/* ===== PANEL ADMINA ===== */
#view-admin { padding: 8px 0 40px; }
.admin-list { display: flex; flex-direction: column; gap: 8px; }
.admin-sect { margin: 14px 0 4px; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.admin-sect::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.admin-row { display: grid; grid-template-columns: minmax(170px, 1fr) auto auto; align-items: center; gap: 14px; background: linear-gradient(180deg, var(--panel), var(--bg2)); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.admin-row.is-prem { border-left: 3px solid var(--yellow); }
.admin-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.adot { width: 9px; height: 9px; border-radius: 50%; background: var(--line2); flex: none; }
.adot.on { background: #34d399; box-shadow: 0 0 8px rgba(52,211,153,.8); }
.admin-id { display: flex; flex-direction: column; min-width: 0; }
.admin-nick { font-weight: 700; color: var(--text); }
.admin-email { color: var(--muted); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-badge { font-size: .64rem; font-weight: 800; background: var(--yellow); color: #14120a; border-radius: 5px; padding: 1px 5px; }
.admin-badge.you { background: var(--line2); color: var(--text); }
.admin-exp { font-size: .68rem; font-weight: 600; color: var(--muted2); white-space: nowrap; } /* data wygaśnięcia premium */
.admin-exp-manual { color: #8a8f9a; font-style: italic; }
.admin-cells { display: flex; gap: 8px; }
.admin-cell { display: flex; flex-direction: column; align-items: center; min-width: 76px; background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: 5px 9px; }
.acv { font-family: var(--mono); font-weight: 700; font-size: .8rem; color: var(--text); white-space: nowrap; }
.acv-on { color: #34d399; }
.ack { font-size: .6rem; color: var(--muted2); text-transform: uppercase; letter-spacing: .05em; margin-top: 1px; }
.admin-acts { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 920px) {
  .admin-row { grid-template-columns: 1fr; gap: 9px; }
  .admin-cells { flex-wrap: wrap; }
  .admin-acts { justify-content: flex-start; }
}
.admin-self { color: var(--muted2); font-size: .76rem; }
.admin-del { color: #ff8a8a; border-color: rgba(255,138,138,.4); }
.admin-del:hover { border-color: #ff8a8a; }
/* panel admina — zakładki + dashboard + płatności (redesign) */
.adm-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 2px 0 18px; border-bottom: 1px solid var(--line); }
.adm-tab { background: none; border: none; border-bottom: 2px solid transparent; color: var(--muted); font: inherit; font-size: .9rem; font-weight: 600; padding: 9px 13px; cursor: pointer; border-radius: 8px 8px 0 0; white-space: nowrap; }
.adm-tab:hover { color: var(--text); background: rgba(255,255,255,.03); }
.adm-tab.on { color: var(--text); border-bottom-color: var(--yellow); }
.adm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.adm-stat { display: flex; flex-direction: column; gap: 3px; background: linear-gradient(180deg, var(--panel), var(--bg2)); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.adm-stat-ic { font-size: 1.05rem; }
.adm-stat-v { font-size: 1.5rem; font-weight: 800; color: var(--text); line-height: 1.1; }
.adm-stat-k { font-size: .76rem; color: var(--muted); }
/* #14: ładniejsze kafelki dashboardu admina */
.adm-stat { position: relative; overflow: hidden; transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease; }
.adm-stat::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--yellow), transparent); opacity: .55; }
.adm-stat:hover { transform: translateY(-2px); border-color: rgba(255,243,18,.4); box-shadow: 0 10px 26px rgba(0,0,0,.3); }
.adm-stat-ic { font-size: 1.35rem; }
/* #10/#13/#15: pasek + lista userów */
.adm-users-bar { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; }
.adm-usearch { flex: 1; min-width: 200px; }
.adm-sort { background: #121212; color: var(--text); border: 1px solid var(--line2); border-radius: 12px; padding: 13px 14px; font: inherit; cursor: pointer; }
.adm-sort:focus { outline: none; border-color: var(--amber); }
/* #18: 8 userów widocznych bez wewnętrznego scrolla; więcej przez przycisk */
.adm-more-btn { display: block; width: 100%; margin-top: 10px; }
.admin-nicklink { background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; }
.admin-nicklink:hover { color: var(--yellow); text-decoration: underline; }
.adm-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.adm-chart { background: linear-gradient(180deg, var(--panel), var(--bg2)); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; min-width: 0; }
.adm-chart-h { font-size: .82rem; font-weight: 700; color: var(--muted); margin-bottom: 10px; }
.adm-chart canvas { width: 100% !important; max-height: 180px; }
@media (max-width: 760px) { .adm-charts { grid-template-columns: 1fr; } }
.adm-filter { font-size: .82rem; color: var(--muted); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.adm-filter b { color: var(--text); }
.adm-filter-x { background: var(--line2); border: none; color: var(--text); border-radius: 6px; padding: 3px 9px; font-size: .76rem; cursor: pointer; }
.adm-filter-x:hover { background: var(--line); }
.admin-spent { cursor: pointer; transition: border-color .15s, background-color .15s; font: inherit; }
.admin-spent:hover { border-color: var(--amber); background: rgba(255,243,18,.06); }
.acv-zl { color: var(--yellow); }
.pay-list { display: flex; flex-direction: column; gap: 6px; }
.pay-row { display: grid; grid-template-columns: minmax(100px, 1fr) auto auto auto auto; align-items: center; gap: 10px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 13px; }
.pay-who { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pay-t { font-size: .66rem; font-weight: 800; border-radius: 5px; padding: 2px 7px; white-space: nowrap; }
.pay-sub { background: rgba(10,132,255,.18); color: #6cb4ff; }
.pay-top { background: rgba(255,243,18,.18); color: var(--yellow); }
.pay-ref { background: rgba(255,138,138,.18); color: #ff8a8a; }
.pay-src { font-size: .64rem; font-weight: 700; border-radius: 5px; padding: 2px 6px; white-space: nowrap; } /* źródło wpłaty (web/Apple/Google) */
.src-web { background: rgba(127,209,166,.14); color: #7fd1a6; }
.src-apple { background: rgba(255,255,255,.1); color: #e6e6ea; }
.src-google { background: rgba(52,168,83,.16); color: #6fce8a; }
.pay-amt { font-family: var(--mono); font-weight: 800; color: var(--text); white-space: nowrap; }
.pay-date { color: var(--muted); font-size: .76rem; white-space: nowrap; }
@media (max-width: 600px) { .pay-row { grid-template-columns: 1fr auto auto; } .pay-t, .pay-src { grid-row: 1; } .pay-date { grid-column: 1 / -1; text-align: left; } }

/* --- zakładka Mail (skrzynka wsparcia) --- */
.mail-list { display: flex; flex-direction: column; gap: 6px; }
.mail-row { display: grid; grid-template-columns: auto minmax(90px, .8fr) 1.4fr auto; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 13px; cursor: pointer; font: inherit; color: inherit; transition: border-color .12s, background .12s; }
.mail-row:hover { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.05); }
.mail-row.unread { border-color: rgba(255,243,18,.32); }
.mail-row.unread .mail-from, .mail-row.unread .mail-subj { font-weight: 700; color: var(--text); }
.mail-dot { width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.mail-row.unread .mail-dot { background: var(--yellow); }
.mail-from { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-subj { color: var(--muted2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-date { color: var(--muted); font-size: .76rem; white-space: nowrap; }
.mail-msg-h { border-bottom: 1px solid var(--line); padding: 10px 0 12px; margin: 10px 0 12px; }
.mail-msg-subj { font-weight: 800; font-size: 1.05rem; color: var(--text); margin-bottom: 6px; }
.mail-msg-meta { color: var(--muted2); font-size: .82rem; margin-top: 2px; }
.mail-msg-meta b { color: var(--muted); font-weight: 600; }
.mail-msg-body { white-space: pre-wrap; word-break: break-word; font-family: var(--mono); font-size: .84rem; line-height: 1.5; color: var(--text); background: rgba(0,0,0,.18); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; max-height: 60vh; overflow: auto; margin: 0; }
@media (max-width: 600px) { .mail-row { grid-template-columns: auto 1fr auto; } .mail-subj { grid-column: 1 / -1; grid-row: 2; } }
@media (max-width: 680px) {
  .admin-row { grid-template-columns: auto auto 1fr; }
  .admin-nums { grid-column: 1 / -1; text-align: left; }
  .admin-acts { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  /* ===== EDYTOR NA TELEFONIE: rząd 1 = nazwa + zapis + zamknij, rząd 2 = przewijany pasek narzędzi ===== */
  .ed-top { padding: max(8px, calc(env(safe-area-inset-top) + 4px)) 10px 0; gap: 6px; }
  .ed-logo, .ed-bpm-l, .ed-btn-l, .ed-spacer { display: none; }   /* etykiety przycisków → same ikony */
  .editor input, .editor select, .editor textarea { font-size: 16px; } /* iOS nie zoomuje przy focusie gdy >=16px */
  .ed-name { flex: 1 1 110px; min-width: 0; font-size: .9rem; padding: 8px 10px; }
  .ed-sync { font-size: .7rem; padding: 7px 8px; min-height: 36px; }
  .ed-close { font-size: 1.4rem; padding: 5px 10px; min-height: 36px; }
  /* pasek narzędzi: jeden rząd, przewijany w bok, bez widocznego scrollbara */
  /* duży padding + ujemny margines (netto jak 7px/9px/1px): overflow scrollera ucinał poświatę i cząsteczki ✨Ai */
  .ed-tools { order: 10; display: flex; flex: 1 1 100%; align-items: center; gap: 6px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 18px 12px 20px; margin: -11px -11px; scrollbar-width: none; }
  .ed-tools::-webkit-scrollbar { display: none; }
  .ed-tools .ed-btn, .ed-metro, .ed-collab { flex: none; }
  .ed-btn { padding: 8px 11px; font-size: .82rem; min-height: 38px; }
  .ed-bpm { width: 48px; min-height: 38px; padding: 6px 2px; }
  .ed-body { flex-direction: column; }
  .ed-pane { padding: 0 0 env(safe-area-inset-bottom); min-height: 0; flex: 1; } /* #43: na styk też na telefonie */
  .ed-tab { padding: 8px 11px; font-size: .8rem; }
  .ed-highlight, .ed-selhi, .ed-anno, .ed-repeat, .ed-ghost, .ed-textarea { font-size: 16px; line-height: 1.7; padding: 12px 12px 35vh; } /* WSZYSTKIE 6 warstw IDENTYCZNIE — selhi/repeat wcześniej pominięte (17px/1.65/18px) → podświetlenie zaznaczenia rozjeżdżało się „linijkę niżej, poza słowo"; 35vh dołu = scroll poniżej końca tekstu */
  /* ===== JEDEN NATYWNY SCROLLER (parytet 1:1 z gołym tekstem) — PERF FINAL =====
     Saga: scrollTop-sync (repaint/klatkę) → transform GPU (lepiej) → content-visibility (regres) → single GPU
     layer (zacięcia=parytet, ale user czuł że nakładka o WŁOS goni litery przy flingu). PRZYCZYNA: nakładkę
     przesuwał JS (rAF czyta scrollTop O KLATKĘ za kompozytorem). DOCELOWY fix: SCROLLUJE .ed-stack NATYWNIE,
     a textarea + WSZYSTKIE nakładki mają pełną wysokość treści w TYM SAMYM scrollerze → jadą RAZEM na
     kompozytorze, ZERO JS-syncu, idealny lockstep. JS robi tylko: wysokość textarea = scrollHeight (fitEdText,
     bo overflow:hidden sama się nie rośnie) + scroll .ed-stack do kursora przy pisaniu (edEnsureCaretVisible). */
  .ed-stack { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .ed-highlight, .ed-selhi, .ed-anno, .ed-repeat, .ed-ghost, .ed-cursors, .ed-textarea {
    bottom: auto; height: auto; min-height: 100%; overflow: visible; scrollbar-gutter: auto;
    transform: none; will-change: auto;   /* żaden layer nie jest już przesuwany transformem — natywny scroll kontenera; .ed-cursors TEŻ pełna wysokość, bo zdalne kursory liczone od góry treści */
  }
  .ed-textarea { overflow: hidden; }   /* pełna wysokość treści (JS fitEdText), zero WŁASNEGO scrolla — scrolluje .ed-stack */
  .ed-highlight .hl-ln { display: block; }
  .ed-highlight .rh-full { text-shadow: none; }   /* glow 0.6px ledwo widoczny na telefonie, tani do zdjęcia */
  .ed-rhlegend { display: none; }   /* legenda zabierała miejsce na tekst — pełny ekran na bary */
  /* panel statystyk = wysuwany over (domyślnie schowany) */
  .ed-side { position: fixed; top: 0; right: 0; bottom: 0; width: 88%; max-width: 360px; border-left: 1px solid rgba(255,255,255,.08); border-top: none; background: rgba(19,19,23,.78); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); transform: translateX(101%); transition: transform .22s ease; z-index: 60; box-shadow: -12px 0 34px rgba(0,0,0,.55); padding-top: calc(16px + env(safe-area-inset-top)); padding-bottom: calc(18px + env(safe-area-inset-bottom)); } /* #44: slide-over nad tekstem = prawdziwe liquid glass; #21: padding-top pod notch (panel jest fixed top:0) */
  .ed-side.open { transform: translateX(0); }
  /* #21: „ukryj panel" pod notchem/zegarem — sticky offset = safe-area, inaczej ląduje pod statusbarem i nie da się kliknąć */
  .ed-side-close { display: flex; align-items: center; justify-content: center; width: 100%; margin-bottom: 12px; background: rgba(30,30,36,.92); border: 1px solid rgba(255,255,255,.09); color: var(--text); border-radius: 10px; padding: 12px; font: inherit; font-weight: 700; cursor: pointer; position: sticky; top: env(safe-area-inset-top); z-index: 1; } /* #44 */
  /* pasek zaznaczenia: większe cele dotykowe */
  .ed-seltool { flex-wrap: wrap; max-width: calc(100vw - 12px); padding: 7px 8px; }
  .est-btn { padding: 8px 11px; font-size: .85rem; min-height: 38px; }
  .est-rw { font-size: .85rem; padding: 4px 12px; }
}
@media (max-width: 760px) {
  /* strona główna na telefonie */
  .wrap { padding: max(14px, env(safe-area-inset-top)) 14px 60px; }
  .tagline { display: none; }
  .hero { padding: 24px 6px 4px; }
  .hero-cta { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ===== PREMIUM: przycisk w naglowku + podstrona pakietow + odznaka planu ===== */
/* #46: shiny jak przycisk ✨Ai (poświata + sheen + cząsteczki), ale kolor ZOSTAJE żółty jak logo (#21) */
.prem-btn { position: relative; overflow: visible; font-size: .8rem; font-weight: 700; color: #1a1408; background: linear-gradient(135deg, var(--yellow), var(--amber)); border: 0; border-radius: 999px; padding: 6px 14px; cursor: pointer; white-space: nowrap; animation: aiGlow 2.6s ease-in-out infinite; }
.prem-btn::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 999px; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%) no-repeat; background-size: 300% 100%; animation: aiSheen 3.2s ease-in-out infinite; }
.prem-btn:hover { filter: brightness(1.08); }
#view-premium { padding: 8px 0 48px; }
.pricing { max-width: 980px; margin: 0 auto; }
.pricing-title { text-align: center; font-size: 1.7rem; margin: 18px 0 6px; }
.pricing-sub { text-align: center; color: var(--muted); font-size: .92rem; margin: 0 auto 26px; max-width: 560px; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.price-card { position: relative; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--panel), var(--bg2)); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); padding: 22px 20px 18px; }
.price-best { position: relative; border-color: rgba(255,243,18,.55); box-shadow: 0 0 24px rgba(255,243,18,.14), var(--shadow-soft); animation: bestGlow 2.8s ease-in-out infinite; }
@keyframes bestGlow { 0%,100% { box-shadow: 0 0 22px rgba(255,243,18,.13), var(--shadow-soft); } 50% { box-shadow: 0 0 40px rgba(255,243,18,.30), var(--shadow-soft); } }
.price-flag { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); font-size: .66rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #1a1408; background: linear-gradient(135deg, var(--yellow), var(--amber)); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.price-name { font-weight: 800; font-size: 1.05rem; color: var(--text); }
.price-amount { font-size: 1.9rem; font-weight: 800; color: var(--yellow); margin: 4px 0 12px; }
.price-feats { list-style: none; margin: 0 0 16px; padding: 0; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.price-feats li { color: var(--muted); font-size: .85rem; line-height: 1.35; padding-left: 18px; position: relative; }
.price-feats li::before { content: "\2713"; position: absolute; left: 0; color: #7ddf87; font-weight: 700; }
.price-cta { width: 100%; font-weight: 700; font-size: .9rem; color: var(--text); background: var(--panel2); border: 1px solid var(--line2); border-radius: 11px; padding: 10px 12px; cursor: pointer; }
.price-cta:hover { border-color: var(--amber); }
.price-best .price-cta { position: relative; overflow: visible; color: #1a1408; background: linear-gradient(135deg, var(--yellow), var(--amber)); border: 0; }
.price-best .price-cta:hover { filter: brightness(1.08); }
/* przycisk planu, który user JUŻ posiada */
.price-cta-owned, .price-best .price-cta-owned { background: rgba(127,209,166,.14) !important; color: #7fd1a6 !important; border: 1px solid rgba(127,209,166,.45) !important; cursor: default; }
.price-cta-owned:hover, .price-best .price-cta-owned:hover { filter: none !important; border-color: rgba(127,209,166,.45) !important; }
.price-cta-owned .aib-glitter { display: none; } /* posiadany plan: bez złotych iskier na zielonym przycisku */
.pricing-note { text-align: center; color: var(--muted2); font-size: .78rem; margin-top: 22px; }
.topup { max-width: 980px; margin: 30px auto 0; padding-top: 24px; border-top: 1px solid var(--line); }
.topup-title { text-align: center; font-size: 1.25rem; margin: 0 0 6px; }
.topup-sub { text-align: center; color: var(--muted); font-size: .9rem; margin: 0 auto 20px; max-width: 600px; }
.topup-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.topup-cta { display: flex; flex-direction: column; align-items: center; gap: 2px; background: linear-gradient(180deg, var(--panel), var(--bg2)); border: 1px solid var(--line2); border-radius: var(--radius); padding: 16px 12px; cursor: pointer; color: var(--text); transition: border-color .15s, transform .1s; }
.topup-cta:hover { border-color: var(--amber); transform: translateY(-2px); }
.topup-cta b { font-size: 1.3rem; font-weight: 800; color: var(--yellow); }
.topup-cta span { font-size: .8rem; color: var(--muted); }
.topup-cta small { margin-top: 6px; font-size: .9rem; font-weight: 700; color: var(--text); }
.plan-badge { font-size: .62rem; font-weight: 800; letter-spacing: .04em; color: var(--text); background: var(--line2); border-radius: 5px; padding: 1px 6px; cursor: pointer; vertical-align: middle; }
.plan-badge.prem { color: #1a1408; background: linear-gradient(135deg, var(--yellow), var(--amber)); }
@media (max-width: 760px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .topup-grid { grid-template-columns: 1fr; }
  .prem-btn { font-size: .72rem; padding: 5px 10px; }
}

/* =====================================================================
   SKIN „FRESH" — minimalistyczny ciemny motyw à la Notatki  (BETA, admin)
   ---------------------------------------------------------------------
   Wszystko pod body.skin-fresh → czysto addytywne. Zdjęcie klasy = powrót
   do klasycznego wyglądu (zero ryzyka dla pozostałych userów).
   Zostawiamy bez zmian: paletę rymów (.rh-*) i kolory wykresów Chart.js
   (były projektowane pod ciemne tło — pasują).
   Filozofia: płaskie powierzchnie, hairline 1px, dużo światła, jeden
   stonowany akcent (żółć), zero glow/gradientów/winiety/ziarna/sparkli.
   ===================================================================== */
body.skin-fresh {
  --bg:      #0d0d0f;   /* spokojny, neutralny grafit (zamiast ciepłej czerni z poświatą) */
  --bg2:     #16161a;   /* = --panel → spłaszcza wszystkie gradienty linear-gradient(panel,bg2) do jednolitego koloru */
  --panel:   #16161a;   /* karty: delikatnie podniesione nad tło */
  --panel2:  #1d1d22;
  --line:    #26262c;   /* hairline */
  --line2:   #313139;
  --text:    #f2f2f5;
  --muted:   #9d9da7;
  --muted2:  #6a6a73;
  --yellow:  #fff312;   /* akcent marki zostaje */
  --yellow2: #fff76b;
  --amber:   #d4a614;
  --radius:  14px;
  --glow:    0 0 0 0 rgba(0,0,0,0);     /* poświaty off — no-op cień (bezpieczny w listach box-shadow) */
  --glow-sm: 0 0 0 0 rgba(0,0,0,0);
  --shadow:  0 8px 30px rgba(0,0,0,.5);
  --shadow-soft: 0 1px 2px rgba(0,0,0,.35);
}

/* tło: zdejmij złote/białe światła i winietę → czysta, płaska powierzchnia */
body.skin-fresh::before,
body.skin-fresh::after { background: none; }

/* zero efekciarstwa: glitter/sparkle wyłączone — WYJĄTEK: delikatne particlesy na premium */
body.skin-fresh .aib-glitter { display: none !important; }
body.skin-fresh .prem-btn .aib-glitter { display: block !important; }
body.skin-fresh .prem-btn,
body.skin-fresh .price-best,
body.skin-fresh .price-best .price-cta,
body.skin-fresh .est-aibtn,
body.skin-fresh .ed-side-ai,
body.skin-fresh .brand .mark { animation: none !important; }
body.skin-fresh .brand .mark { filter: none; }

/* poświaty tekstu precz */
body.skin-fresh .logo,
body.skin-fresh .logo b,
body.skin-fresh #scoreNum,
body.skin-fresh .hero-title .hl,
body.skin-fresh .proj-score,
body.skin-fresh #edScore { text-shadow: none; }

/* ---- spłaszczenie „liquid glass": płaskie tło, bez blur, hairline, lekki cień ---- */
body.skin-fresh .card,
body.skin-fresh .panel,
body.skin-fresh .tile,
body.skin-fresh .tips,
body.skin-fresh .vcard,
body.skin-fresh .note,
body.skin-fresh .feat,
body.skin-fresh .usermenu,
body.skin-fresh .pcard,
body.skin-fresh .ptile,
body.skin-fresh .proj-card,
body.skin-fresh .price-card,
body.skin-fresh .topup-cta,
body.skin-fresh .authcard,
body.skin-fresh .ed-side,
body.skin-fresh .ed-ov-card,
body.skin-fresh .ed-morepop,
body.skin-fresh .notif-panel,
body.skin-fresh .adm-stat,
body.skin-fresh .msg-row {
  background: var(--panel) !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}
/* nakładki-gradienty na obrzeżach kart (::before) precz */
body.skin-fresh .card::before,
body.skin-fresh .pcard::before,
body.skin-fresh .price-card::before { display: none !important; content: none !important; }

/* nagłówek strony: czysty, z dolnym hairline (app-like) */
body.skin-fresh header.top {
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
  margin-bottom: 8px;
  box-shadow: none;
}
body.skin-fresh .logo { letter-spacing: -1px; }
/* #9: mniejszy odstęp między nagłówkiem/menu a powitaniem „Cześć…" */
body.skin-fresh .home-user { padding-top: 4px; }
/* nowe logo (błyskawica-„B", złote) w nagłówku — tylko pod skinem */
body.skin-fresh .brand .mark { content: url('logo-fresh.png'); border-radius: 0; }

/* przyciski PRIMARY: płaski, pełny żółty + ciemny tekst, bez glow/gradientu */
body.skin-fresh .go,
body.skin-fresh .hero-cta,
body.skin-fresh .authsubmit,
body.skin-fresh .prem-btn,
body.skin-fresh .price-best .price-cta {
  background: var(--yellow) !important;
  background-image: none !important;
  color: #16140a !important;
  box-shadow: none !important;
  border: none;
}
body.skin-fresh .go:hover,
body.skin-fresh .hero-cta:hover,
body.skin-fresh .authsubmit:hover,
body.skin-fresh .prem-btn:hover,
body.skin-fresh .price-best .price-cta:hover { filter: brightness(1.06); box-shadow: none !important; }

/* przyciski SECONDARY: przezroczyste + hairline, akcent dopiero na hover */
body.skin-fresh .chip,
body.skin-fresh .dl,
body.skin-fresh .price-cta,
body.skin-fresh .ed-btn,
body.skin-fresh .est-btn,
body.skin-fresh .topup-cta {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--line2);
  box-shadow: none !important;
}
body.skin-fresh .chip:hover,
body.skin-fresh .dl:hover,
body.skin-fresh .price-cta:hover,
body.skin-fresh .ed-btn:hover,
body.skin-fresh .est-btn:hover,
body.skin-fresh .topup-cta:hover { border-color: var(--yellow); box-shadow: none !important; transform: none; }

/* pola tekstowe: spójne tło inset + focus = outline zamiast żółtej poświaty */
body.skin-fresh textarea#lyrics,
body.skin-fresh .authinput,
body.skin-fresh .nick,
body.skin-fresh .hu-search,
body.skin-fresh .ed-name,
body.skin-fresh .ed-chat-in { background: var(--bg); border: 1px solid var(--line2); }
body.skin-fresh input:focus,
body.skin-fresh textarea:focus,
body.skin-fresh .authinput:focus,
body.skin-fresh .ed-textarea:focus { outline: 2px solid var(--yellow); outline-offset: 1px; box-shadow: none !important; }

/* aktywne zakładki: podkreślenie akcentem (czyściej niż wypełnienie) */
body.skin-fresh .tab.active,
body.skin-fresh .adm-tab.active {
  background: transparent;
  color: var(--text);
  border-radius: 0;
  box-shadow: inset 0 -2px 0 var(--yellow);
}

/* karty cennika: wyrównane wizualnie, „najpopularniejszy" bez glow */
/* #2: „najpopularniejszy" — żółta obramówka + delikatne particlesy wokół boxu */
body.skin-fresh .price-best { border: 2px solid var(--yellow) !important; box-shadow: var(--shadow-soft) !important; transform: none; }
body.skin-fresh .price-best .aib-glitter { display: block !important; }
body.skin-fresh .price-flag { background: var(--yellow); color: #16140a; box-shadow: none; }
body.skin-fresh .plan-badge.prem { background: var(--yellow); color: #16140a; }

/* wiadomości: nieprzeczytane = subtelny akcentowy lewy border zamiast gradientu */
body.skin-fresh .msg-row.unread { background: rgba(255,243,18,.06) !important; border-left: 2px solid var(--yellow); }

/* ===== EDYTOR — nowy wygląd: latające okrągłe ikony (liquid glass); na PC WIĘCEJ ikon ===== */
/* pole tekstu totalnie ciemne (i przy rymach, i bez) */
body.skin-fresh .editor { background: #0a0a0b; }
body.skin-fresh .ed-textarea { background: transparent; }
body.skin-fresh .ed-highlight { background: #0a0a0b !important; }
/* zero kreski pod paskiem: przezroczysta górna krawędź na 4 warstwach (szerokość 1px zostaje) */
body.skin-fresh .ed-highlight,
body.skin-fresh .ed-anno,
body.skin-fresh .ed-ghost,
body.skin-fresh .ed-textarea { border-top-color: transparent !important; }
body.skin-fresh .ed-tabs { display: none !important; } /* przełączanie tekstów: 🗂 / menu */

/* pasek = przezroczysta listwa fixed; ikony unoszą się NAD tekstem (tekst przewija się pod nie) */
body.skin-fresh .ed-top {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 13px;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 14px 8px;
  margin: 0; background: transparent !important; border: none !important;
  box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none;
  z-index: 60; pointer-events: none;
}
body.skin-fresh .ed-top > *, body.skin-fresh .ed-tools > * { pointer-events: auto; }
body.skin-fresh .ed-tools { display: contents; }
/* zawsze ukryte: nazwa (w ⋯/menu), plik-vis, metronom (w ⋯), ✕ (powrót = ‹) */
body.skin-fresh .ed-top #edName,
body.skin-fresh .ed-top #edFileVis,
body.skin-fresh .ed-top .ed-metro,
body.skin-fresh .ed-top #edClose { display: none !important; }
body.skin-fresh .ed-spacer { display: block; flex: 1; order: 0; pointer-events: none; }

/* wspólny wygląd OKRĄGŁEJ IKONY (liquid glass) — logo, narzędzia, AI, pliki, więcej */
body.skin-fresh .ed-logo,
body.skin-fresh .ed-tools .ed-btn,
body.skin-fresh #edSync,
body.skin-fresh #edSide,
body.skin-fresh #edFiles:not([hidden]),
body.skin-fresh #edMore:not([hidden]) {
  width: 42px; height: 42px; min-width: 42px; flex: none; margin: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  background-color: rgba(20,20,24,.5) !important; background-image: none !important;
  -webkit-backdrop-filter: blur(13px) saturate(1.4); backdrop-filter: blur(13px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: 0 4px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.13) !important;
  color: var(--text); font-size: 0; cursor: pointer; transition: border-color .15s, transform .1s, background .15s;
}
body.skin-fresh .ed-tools .ed-btn:hover { border-color: var(--yellow) !important; transform: translateY(-1px); box-shadow: 0 4px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.13) !important; }
body.skin-fresh .ed-tools .ed-btn:active { transform: none; }
body.skin-fresh #edFiles svg, body.skin-fresh .ed-tools .ed-btn svg { width: 20px; height: 20px; display: block; }
/* kolejność: ‹ z lewej, reszta z prawej */
body.skin-fresh .ed-logo { order: -1; }
body.skin-fresh #edLiveRhymes { order: 1; }
body.skin-fresh .ed-zoom { order: 2; display: contents; }
body.skin-fresh #edZoomBtn { order: 2; }
body.skin-fresh #edHist { order: 3; }
body.skin-fresh #edShare { order: 4; }
body.skin-fresh #edSync { order: 5; }
body.skin-fresh #edFiles { order: 6; }
body.skin-fresh #edSide { order: 7; }
body.skin-fresh #edMore { order: 8; }
/* #11: współpracownicy — pigułka z max 3 avatarami (klik → lista), przy ‹, liquid glass */
body.skin-fresh #edCollab { order: 0; }
body.skin-fresh .ed-collab-btn {
  background-color: rgba(20,20,24,.5) !important; background-image: none !important;
  -webkit-backdrop-filter: blur(13px) saturate(1.4); backdrop-filter: blur(13px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: 0 4px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.13) !important;
  border-radius: 999px; height: 42px; padding: 4px 10px 4px 9px;
}
body.skin-fresh .ed-collab-ic { display: inline-flex; align-items: center; opacity: .85; }
body.skin-fresh .ed-collab-ic svg { width: 17px; height: 17px; display: block; }
/* custom ikony w pasku zaznaczenia (notatka/wymowa/sekcja) — wyrównanie do tekstu */
.est-btn .est-ic { vertical-align: -3px; margin-right: 1px; opacity: .9; }
/* pasek zaznaczenia przyklejony nad klawiaturą: rymy „Propozycje AI" NAD przyciskami (rosną w górę), ze scrollem */
/* #8: liquid glass na całym pasku zaznaczenia (jak okrągłe przyciski) */
body.skin-fresh #edSelTool {
  flex-wrap: wrap; gap: 0; padding: 0; overflow: hidden;
  min-width: min(360px, 92vw); /* #10: segmenty mają miejsce, „wymowa" się nie ucina */
  background: rgba(20,20,24,.5) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12) !important;
}
body.skin-fresh #edSelRhymes { flex-basis: 100%; width: 100%; max-height: 14vh; overflow-y: auto; padding: 8px 10px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent; }
body.skin-fresh #edSelRhymes:not([hidden]) { border-bottom: 1px solid rgba(255,255,255,.1); }
/* #15: ładniejszy, cienki scroll w propozycjach rymów */
body.skin-fresh #edSelRhymes::-webkit-scrollbar { width: 6px; }
body.skin-fresh #edSelRhymes::-webkit-scrollbar-track { background: transparent; }
body.skin-fresh #edSelRhymes::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 999px; border: 1px solid transparent; background-clip: padding-box; }
body.skin-fresh #edSelRhymes::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.36); }
/* #7: „sekcja" usunięta; AI/notatka/wymowa = równe segmenty 33%, pełna wysokość, hairline między nimi */
body.skin-fresh #edSelTool [data-act="section"] { display: none !important; }
body.skin-fresh #edSelTool .est-btn {
  flex: 1 1 0; min-width: 0; margin: 0; border-radius: 0 !important; white-space: nowrap;
  background: transparent !important; background-image: none !important; border: none !important;
  box-shadow: none !important; min-height: 46px; padding: 10px 4px; justify-content: center; font-size: .82rem;
}
body.skin-fresh #edSelTool .est-btn + .est-btn { border-left: 1px solid rgba(255,255,255,.12) !important; }
body.skin-fresh #edSelTool .est-btn:hover { background: rgba(255,255,255,.06) !important; }
/* schowek (kopiuj/wytnij/wklej) na DRUGIM, pełnym wierszu paska — 3 równe segmenty, żeby nie ściskać notatki/wymowy.
   separator z flex-basis:100% wymusza złamanie wiersza (pasek ma już flex-wrap:wrap). */
body.skin-fresh #edSelTool .est-sep { flex-basis: 100%; width: auto; height: 0; margin: 0; background: none; }
body.skin-fresh #edSelTool .est-clip { border-top: 1px solid rgba(255,255,255,.12); } /* flex:1 1 0 dziedziczy z .est-btn */
body.skin-fresh .cpop {
  background: rgba(22,22,26,.94) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.1) !important;
  /* popup otwiera się W PRAWO od pigułki (jest po lewej) i MIEŚCI się w ekranie + scroll */
  left: 0; right: auto;
  width: min(300px, calc(100vw - 24px)); max-width: calc(100vw - 24px);
  max-height: 62vh; overflow-y: auto;
}
/* logo → okrągłe „‹" (powrót do listy tekstów) */
body.skin-fresh .ed-logo .ed-logo-mark,
body.skin-fresh .ed-logo > b,
body.skin-fresh .ed-logo .ed-logo-sub { display: none; }
body.skin-fresh .ed-logo::before { content: "‹"; color: var(--text); font-weight: 700; font-size: 1.4rem; line-height: 1; }
/* AI → „Ai" z gradientem */
body.skin-fresh #edSide {
  background-image: linear-gradient(115deg, #0a84ff, #5e5ce6, #af52de, #ff2d92, #ff453a, #ff9f0a, #ffd60a, #00c7be, #5ac8fa, #0a84ff) !important; /* #9: bez zieleni */
  background-size: 220% 220% !important; border: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; /* bez blur → aiFly realnie animuje pozycję tła; gradient i tak nieprzezroczysty */
  animation: aiFly 6s ease-in-out infinite !important; /* #9: szybciej + bez hue-rotate (nie przelatuje przez zieleń) */
  /* #14: poświata SYMETRYCZNA, dopasowana do kształtu (box-shadow podąża za border-radius — kółko/pigułka) */
  box-shadow: 0 0 16px rgba(90,120,255,.45), 0 2px 10px rgba(0,0,0,.4) !important;
}
/* kolory „latają" z różnych stron — pozycja tła wędruje po narożnikach/bokach */
@keyframes aiFly {
  0%   { background-position: 0% 50%; }
  16%  { background-position: 100% 0%; }
  33%  { background-position: 50% 100%; }
  50%  { background-position: 0% 0%; }
  66%  { background-position: 100% 100%; }
  83%  { background-position: 30% 50%; }
  100% { background-position: 0% 50%; }
}
/* pewny ruch koloru: rotacja całej palety gradientu (działa też przy backdrop-filter) */
@keyframes aiHue { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
/* user JAWNIE chce ten ruch — wymuś też przy „ogranicz ruch" w iOS */
@media (prefers-reduced-motion: reduce) {
  body.skin-fresh #edSide { animation: aiFly 6s ease-in-out infinite !important; }
}
body.skin-fresh #edSide { gap: 0 !important; } /* #18: brak etykiety → zero gap, „Ai" idealnie wyśrodkowane (gap:7px z pigułek je zsuwał) */
body.skin-fresh #edSide::before { content: "Ai"; font-size: .82rem; font-weight: 800; color: #fff; letter-spacing: 0; line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,.35); }

/* #11: PC z zapasem miejsca — ikony edytora stają się pigułkami z NAPISEM po prawej od ikony */
@media (min-width: 1100px) {
  body.skin-fresh .ed-logo,
  body.skin-fresh #edLiveRhymes,
  body.skin-fresh #edHist,
  body.skin-fresh #edShare,
  body.skin-fresh #edZoomBtn,
  body.skin-fresh #edSync,
  body.skin-fresh #edSide,
  body.skin-fresh #edFiles:not([hidden]),
  body.skin-fresh #edMore:not([hidden]) {
    width: auto !important; min-width: 0 !important; border-radius: 21px !important; gap: 7px; padding: 0 15px !important;
  }
  body.skin-fresh .ed-top .ed-btn::after,
  body.skin-fresh .ed-logo::after,
  body.skin-fresh #edSync::after { font-size: .82rem; font-weight: 600; color: var(--text); white-space: nowrap; }
  body.skin-fresh .ed-logo::after    { content: "Wróć"; }
  body.skin-fresh #edLiveRhymes::after { content: "Rymy"; }
  body.skin-fresh #edHist::after      { content: "Historia"; }
  body.skin-fresh #edShare::after     { content: "Udostępnij"; }
  body.skin-fresh #edZoomBtn::after   { content: "Rozmiar"; }
  body.skin-fresh #edSync::after      { content: "Zapisz"; }
  body.skin-fresh #edFiles::after     { content: "Pliki"; }
  body.skin-fresh #edMore::after      { content: "Więcej"; }
}
body.skin-fresh #edMore::before { content: "⋯"; font-size: 1.4rem; }
/* CLEAN ikony (SVG) na przyciskach narzędzi — przez ::before (classic-safe, bez ruszania DOM) */
body.skin-fresh #edLiveRhymes::before { content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23c9c9d2' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><circle cx='9' cy='9' r='1.3' fill='%23c9c9d2' stroke='none'/><circle cx='15' cy='9' r='1.3' fill='%23c9c9d2' stroke='none'/><circle cx='9.5' cy='14.5' r='1.3' fill='%23c9c9d2' stroke='none'/></svg>"); }
body.skin-fresh #edLiveRhymes.on { border-color: var(--yellow) !important; background: rgba(255,243,18,.18) !important; }
body.skin-fresh #edHist::before { content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23c9c9d2' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7.5V12l3 2'/></svg>"); }
body.skin-fresh #edShare::before { content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23c9c9d2' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v12'/><path d='M8 7l4-4 4 4'/><path d='M6 12v7a1 1 0 001 1h10a1 1 0 001-1v-7'/></svg>"); }
/* #edZoomBtn ZOSTAWIA oryginalne „aA" (bez ikony SVG) — patrz niżej, nie ukrywamy jego dzieci */
body.skin-fresh #edSync::before { content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23c9c9d2' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M5 5a1 1 0 011-1h10l3 3v11a1 1 0 01-1 1H6a1 1 0 01-1-1z'/><path d='M8 4v5h7'/><path d='M8 13h8v6H8z'/></svg>"); }
/* zostaje TYLKO ikona z ::before — chowamy oryginalne dzieci (emotki/etykiety/„A A"), żeby nic się nie nakładało */
body.skin-fresh #edLiveRhymes > *,
body.skin-fresh #edHist > *,
body.skin-fresh #edShare > *,
body.skin-fresh #edSync > * { display: none !important; }
/* przycisk rozmiaru: czyste „aA" (małe + duże A), wyśrodkowane, nic się nie nakłada */
body.skin-fresh #edZoomBtn .ed-za-s { font-size: .66rem; font-weight: 700; }
body.skin-fresh #edZoomBtn .ed-za-b { font-size: 1rem; font-weight: 800; }

/* tekst zaczyna się pod ikonami, ale przewija się aż pod nie (iOS); padding WEWNĄTRZ pola, 4 warstwy identycznie */
body.skin-fresh .ed-pane { padding-top: 0; }
body.skin-fresh .ed-highlight,
body.skin-fresh .ed-selhi,
body.skin-fresh .ed-anno,
body.skin-fresh .ed-repeat,
body.skin-fresh .ed-ghost,
body.skin-fresh .ed-textarea { padding-top: calc(env(safe-area-inset-top, 0px) + 60px) !important; } /* selhi/repeat DOŁĄCZONE — inaczej ich padding-top=16px vs pole safe+60 → zaznaczenie/powtórzenia rozjechane w pionie */

/* TELEFON: mniej ikon — narzędzia chowamy do „⋯"; zostają ‹ 🗂 ✨ ⋯ */
@media (max-width: 760px) {
  body.skin-fresh #edLiveRhymes,
  body.skin-fresh .ed-zoom,
  body.skin-fresh #edZoomBtn,
  body.skin-fresh #edHist,
  body.skin-fresh #edShare,
  body.skin-fresh #edSync { display: none !important; }
}
/* PC: „⋯" ZOSTAJE — mieści metronom+BPM, zmianę nazwy i „moje teksty" (reszta jest już jako ikony) */

/* maksymalnie czysto: ukryj legendę rymów na dole edytora + notkę „prototyp" */
body.skin-fresh .ed-rhlegend { display: none !important; }
body.skin-fresh .note { display: none !important; }

/* lista projektów: bez kafelków/obramówek — czyste wiersze z hairline (à la Notatki) */
body.skin-fresh .proj-card {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.skin-fresh .proj-card:hover { background: var(--panel) !important; }
/* szersza lista na stronie głównej (desktop) */
body.skin-fresh .home-user { max-width: 920px; }
/* #3: przycisk profilu w powitaniu — płaski, pasujący do nowego minimalu (bez szklanej poświaty) */
body.skin-fresh .hu-name {
  background: var(--panel) !important;
  background-image: none !important;
  border: 1px solid var(--line);
  box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.skin-fresh .hu-name:hover,
body.skin-fresh .hu-name[aria-expanded="true"] {
  background: var(--panel2) !important;
  background-image: none !important;
  border-color: var(--line2);
  box-shadow: none;
  transform: none;
}
body.skin-fresh .hu-name .hu-name-av { box-shadow: 0 0 0 1.5px var(--line2); }

/* ===== skin-fresh: poprawki mobilne ===== */
@media (max-width: 760px) {
  /* lista tekstów: pełnoekranowe wiersze (na styk z krawędziami) — bez bocznego paddingu kontenera */
  body.skin-fresh .home-user { padding-left: 0; padding-right: 0; max-width: none; }
  body.skin-fresh .plist { gap: 0; }
  body.skin-fresh .proj-card { margin: 0 -20px; padding: 15px 20px; border-radius: 0 !important; }
  /* panel asystenta AI: unosi się w powietrzu (odklejony od prawej, marginesy, zaokrąglony) */
  body.skin-fresh .ed-side {
    top: calc(env(safe-area-inset-top, 0px) + 64px);
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    width: min(360px, calc(100vw - 24px));
    max-width: none;
    border: 1px solid var(--line) !important;
    border-radius: 18px;
    box-shadow: var(--shadow) !important;
    background: var(--panel) !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    padding-top: 14px; /* #B2: box jest już pod notchem (top = safe-area+64px) — kasujemy duży padding-top (16px+safe-area) z mobile .ed-side, żeby „ukryj panel" siedział TUŻ pod górą boxa, nie „metr od góry" */
  }
  /* #B2: „ukryj panel" przykleja się do GÓRY boxa (bez offsetu safe-area — box już pod notchem) */
  body.skin-fresh .ed-side-close { top: 0; }
  /* zamknięty = CAŁKOWICIE poza ekranem (koniec wystającego paska); otwarty = na pozycji */
  body.skin-fresh .ed-side { transform: translateX(calc(100% + 24px)); }
  body.skin-fresh .ed-side.open { transform: translateX(0); }
}

/* ===== skin-fresh: desktop — panel AI jako dryfujący box (odstęp od prawej/góry/dołu, zaokrąglony) ===== */
@media (min-width: 761px) {
  /* panel AI: dryfujący box, domyślnie schowany; ✨ (klasa .open) go pokazuje. Proste display = pewne */
  body.skin-fresh .ed-side {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 64px);
    right: 16px;
    bottom: 16px;
    width: 340px;
    border: 1px solid var(--line) !important;
    border-radius: 18px;
    box-shadow: var(--shadow) !important;
    background: var(--panel) !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    z-index: 55; /* nad tekstem, pod latającymi przyciskami (60) — ✨ zostaje klikalny */
    display: none !important;
  }
  body.skin-fresh .ed-side.open { display: block !important; } /* ✨ pokazuje dryfujący box */
  /* #3: przycisk „ukryj panel" na PC — pełny styl (wcześniej był goły) */
  body.skin-fresh .ed-side-close {
    display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
    margin-bottom: 12px; padding: 9px 12px;
    background: var(--panel2); border: 1px solid var(--line); color: var(--muted);
    border-radius: 10px; font: inherit; font-weight: 600; font-size: .85rem; cursor: pointer;
    position: sticky; top: 0; z-index: 1; transition: border-color .15s, color .15s;
  }
  body.skin-fresh .ed-side-close:hover { border-color: var(--yellow); color: var(--text); }
}

/* popover menu „⋯" — biała-grafitowa karta w stylu Notatek */
.ed-morepop {
  position: fixed; min-width: 232px; max-width: 300px; padding: 6px;
  border-radius: 12px; z-index: 70; display: flex; flex-direction: column; gap: 1px;
}
.ed-morepop[hidden] { display: none !important; }
/* #8/#12: liquid glass na wysuwanym menu „⋯" i liście plików — blur MUSI mieć !important,
   bo grupa „flat-glass" wyżej ustawia backdrop-filter: none !important i bez tego wygrywała */
body.skin-fresh .ed-morepop {
  background: rgba(20,20,24,.62) !important;
  background-image: none !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;
  backdrop-filter: blur(16px) saturate(1.4) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: 0 14px 38px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.1) !important;
}
.ed-morepop .emp-row { display: flex; align-items: center; gap: 11px; width: 100%; background: transparent; border: none; color: var(--text); font: inherit; font-size: .93rem; padding: 10px 12px; border-radius: 8px; cursor: pointer; text-align: left; }
.ed-morepop button.emp-row:hover { background: var(--panel2); }
.ed-morepop .emp-ic { width: 20px; text-align: center; flex: none; }
.ed-morepop .emp-state { margin-left: auto; color: var(--muted); font-size: .8rem; }
.ed-morepop .emp-sep { height: 1px; background: var(--line); margin: 4px 8px; }
.ed-morepop .emp-metro { display: inline-flex; align-items: center; gap: 11px; background: transparent; border: none; color: var(--text); font: inherit; font-size: .93rem; cursor: pointer; padding: 0; }
.ed-morepop .emp-bpm { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; }
.ed-morepop .emp-bpmv { font-family: var(--mono); font-size: .85rem; min-width: 26px; text-align: center; }
.ed-morepop .emp-bpml { color: var(--muted2); font-size: .68rem; }
.ed-morepop .emp-step { width: 26px; height: 26px; border: 1px solid var(--line2); background: transparent; color: var(--text); border-radius: 7px; cursor: pointer; font-size: 1rem; line-height: 1; }
.ed-morepop .emp-step:hover { border-color: var(--yellow); }
.ed-morepop .emp-name { flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--line2); color: var(--text); border-radius: 8px; padding: 7px 9px; font: inherit; font-size: .92rem; outline: none; }
.ed-morepop .emp-name:focus { outline: 2px solid var(--yellow); outline-offset: 1px; }
.ed-morepop .emp-files-h { font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted2); padding: 6px 10px 4px; }
.ed-morepop .emp-row.emp-active { background: var(--panel2); }
.ed-morepop .emp-row.emp-active .emp-ic { color: var(--yellow); }
.ed-morepop .emp-delx { color: var(--muted2); padding: 0 6px; font-size: 1.05rem; line-height: 1; flex: none; }
.ed-morepop .emp-delx:hover { color: var(--bad); }
.ed-morepop .emp-row.emp-locked { opacity: .6; }
/* #13: „Teksty w projekcie" gdy nie-solo — avatar autora (lewo), tytuł skrócony, avatary obecnych (prawo) */
.ed-morepop .emp-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-morepop .emp-ic .avatar-xs { width: 20px; height: 20px; }
.ed-morepop .emp-present { display: inline-flex; align-items: center; margin-left: auto; flex: none; padding-left: 8px; }
.ed-morepop .emp-present .avatar-xs { width: 19px; height: 19px; margin-left: -5px; box-shadow: 0 0 0 1.5px var(--panel); }
.ed-morepop .emp-present-more { font-size: .72rem; color: var(--muted); margin-left: 3px; }
/* #16: mała kłódka przed nazwą prywatnego tekstu */
.ed-morepop .emp-lock { display: inline-flex; align-items: center; flex: none; color: var(--muted2); margin-right: 1px; }
.ed-morepop .emp-lock svg { width: 13px; height: 13px; }
/* custom clear icons (SVG) w popoverach — monochromatyczne, nie systemowe emotki */
.ed-morepop .emp-ic { display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.ed-morepop .emp-ic svg { display: block; }
.ed-morepop .emp-metro .emp-ic { color: var(--muted); }

/* mobil: pasek edytora pod skinem nie potrzebuje już poziomego scrolla (zostały 2 ikony) */
@media (max-width: 760px) {
  body.skin-fresh .ed-tools { overflow: visible; }
}

/* „Zapamiętaj mnie" przy logowaniu */
.authremember { display: flex; align-items: center; gap: 8px; margin: 2px 2px 6px; font-size: .9rem; color: var(--muted); cursor: pointer; user-select: none; }
.authremember input { accent-color: var(--yellow); width: 16px; height: 16px; cursor: pointer; flex: none; }
.authremember span { line-height: 1.2; }

/* =====================================================================
   SKIN „KARTKA" (eksperyment, TYLKO admin — przełącznik w Ustawieniach).
   Nakładka NA skin-fresh (body ma obie klasy) w stylu testowej strony
   /nowa.html: serif Fraunces + IBM Plex Mono, żółty jako zakreślacz,
   liniatura zeszytu, ziarno, sekcje jak tracklista. Wyłącznie selektory
   body.skin-kartka — bez klasy NIC się nie zmienia. Fonty dogrywa JS
   (applySkin) / inline-script w index.html. EDYTOR celowo nietknięty
   (fresh ma tam precyzyjną maszynerię nakładek — zero ryzyka).
   ===================================================================== */
body.skin-kartka {
  --bg:      #0a0a0d;   /* cieplejszy grafit „blatu" */
  --bg2:     #101014;
  --panel:   #141418;
  --panel2:  #1b1b21;
  --line:    #26262b;
  --line2:   #35353c;
  --text:    #ece9e0;   /* cieplejsza biel — papier, nie ekran */
  --muted:   #b4b0a7;
  --muted2:  #8b877e;
  --serif:   "Fraunces", Georgia, "Times New Roman", serif;
  --mono:    "IBM Plex Mono", ui-monospace, "Cascadia Code", "JetBrains Mono", Consolas, monospace;
  --rule:    rgba(236,233,224,.055); /* linia zeszytu */
}
/* tło: zamiast złotych świateł — jedno ciepłe światło z góry; winieta → ziarno na całości */
body.skin-kartka::before { background: radial-gradient(1100px 540px at 72% -8%, rgba(236,233,224,.05), transparent 70%); }
body.skin-kartka::after {
  z-index: 1; opacity: .05; /* nad treścią stron (wrap z-index:1, DOM-owo później), pod edytorem/modalami */
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}

/* ---- typografia: serif na nagłówkach/treści marketingowej, mono na etykietach ---- */
body.skin-kartka .hero-title,
body.skin-kartka .fs-h,
body.skin-kartka .hu-title,
body.skin-kartka .pricing-title,
body.skin-kartka .topup-title,
body.skin-kartka .msg-h,
body.skin-kartka .msg-d-subj,
body.skin-kartka .authh,
body.skin-kartka .verdict { font-family: var(--serif); font-weight: 560; letter-spacing: -.01em; }
body.skin-kartka .hero-sub,
body.skin-kartka .fs-p,
body.skin-kartka .pricing-sub,
body.skin-kartka .topup-sub,
body.skin-kartka .subverdict { font-family: var(--serif); }
/* nagłówki kart (Ustawienia/profil/cennik) jak liner notes: mono, wersaliki, światło */
body.skin-kartka .pcard-h,
body.skin-kartka .price-name { font-family: var(--mono); font-weight: 600; font-size: .74rem; text-transform: uppercase; letter-spacing: .18em; color: var(--muted); }
body.skin-kartka footer { font-family: var(--mono); font-size: .78rem; color: var(--muted); }

/* ---- żółty ZAKRESLACZ zamiast żółtego tekstu (wyróżnienia *…* w copy) ---- */
body.skin-kartka .hero-title .hl,
body.skin-kartka .fs-h .hl {
  color: #0c0c0f; text-shadow: none;
  background: linear-gradient(97deg, rgba(255,243,18,.86), var(--yellow) 20%, var(--yellow) 82%, rgba(255,243,18,.92));
  padding: .02em .16em .06em; margin: 0 -.04em;
  border-radius: .35em .6em .4em .7em / .7em .4em .75em .35em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* w hero fraza jest krótka i na końcu linii — może dostać lekki skos markera */
body.skin-kartka .hero-title .hl { display: inline-block; transform: rotate(-1.1deg); padding: .03em .14em .07em; }

/* ---- przyciski: mono-wersaliki + lekko nieregularny obrys (pociągnięte ręką) ---- */
body.skin-kartka .go,
body.skin-kartka .hero-cta,
body.skin-kartka .hu-cta,
body.skin-kartka .authsubmit,
body.skin-kartka .price-cta,
body.skin-kartka .msg-open {
  font-family: var(--mono); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: .92em;
  border-radius: 9px 14px 10px 15px / 14px 10px 15px 9px;
}
body.skin-kartka .chip,
body.skin-kartka .khint { font-family: var(--mono); }

/* ---- strona główna gościa: okna demo jak kartki na blacie ---- */
body.skin-kartka .hd-window,
body.skin-kartka .fs-collab,
body.skin-kartka .fs-radar,
body.skin-kartka .fs-chat {
  background: #131317 !important; background-image: none !important;
  border-color: rgba(236,233,224,.11);
  box-shadow: 0 42px 80px -38px rgba(0,0,0,.92), inset 0 1px 0 rgba(255,255,255,.045);
}
body.skin-kartka .hd-window { transform: rotate(.5deg); }
body.skin-kartka .fs-collab { transform: rotate(-.45deg); }
body.skin-kartka .fs-chat { transform: rotate(.4deg); }
/* liniatura zeszytu pod pisanym tekstem (linie liczone z line-height danego ekranu) */
body.skin-kartka .hd-screen {
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(1.7em - 1px), var(--rule) calc(1.7em - 1px), var(--rule) 1.7em);
  background-position: 0 20px;
}
body.skin-kartka .fs-collab {
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(2.15em - 1px), var(--rule) calc(2.15em - 1px), var(--rule) 2.15em) !important;
  background-position: 0 22px !important;
}
/* kicker i sekcje-tracklista: hairline'y po bokach + numer z kropkowaną linią nad nagłówkiem */
body.skin-kartka .sc-kicker { display: flex; align-items: center; gap: 20px; letter-spacing: .32em; font-family: var(--mono); }
body.skin-kartka .sc-kicker::before,
body.skin-kartka .sc-kicker::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
body.skin-kartka .showcase { counter-reset: kartka-trk; }
body.skin-kartka .fs-row { counter-increment: kartka-trk; }
body.skin-kartka .fs-copy::before {
  content: "0" counter(kartka-trk); display: block;
  font: 500 .78rem/1 var(--mono); letter-spacing: .3em; color: var(--muted2);
  padding-bottom: 10px; margin-bottom: 16px; border-bottom: 1px dotted rgba(236,233,224,.26);
}

/* ---- analiza: pole na tekst jak kartka w linie (linie jadą ze scrollem treści) ---- */
body.skin-kartka textarea#lyrics {
  background-color: var(--panel);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(2.05em - 1px), var(--rule) calc(2.05em - 1px), var(--rule) 2.05em);
  background-attachment: local; background-position: 0 16px;
}

/* ---- drobiazgi spójności ---- */
body.skin-kartka .price-amount { font-family: var(--mono); }
body.skin-kartka .eds-big,
body.skin-kartka .fs-ring b,
body.skin-kartka .scoren b { font-family: var(--mono); }
body.skin-kartka .hero-hint,
body.skin-kartka .pricing-note { font-family: var(--mono); font-size: .8rem; }