/* Społeczność w notatniku. Kolory wyłącznie ze zmiennych motywu (--studio-*, --accent),
   więc jasny i ciemny motyw działają bez osobnych reguł. Prefiks cm- = community. */
:root{--cm-gold:#FFD23F;--cm-gold-soft:rgba(255,210,63,.12);--cm-gold-line:rgba(255,210,63,.28);--cm-red:#f87171;--cm-green:#34d399;--cm-blue:#60a5fa;--cm-purple:#a78bfa;--cm-pink:#f472b6;--cm-radius:14px}
[data-theme="light"]{--cm-gold:#966000;--cm-gold-soft:rgba(150,96,0,.08);--cm-gold-line:rgba(150,96,0,.3);--cm-red:#c0392b;--cm-green:#0f7b55;--cm-blue:#1d5fbf;--cm-purple:#6d28d9;--cm-pink:#be185d}
.cm-shell{display:flex;flex-direction:column;gap:16px;min-width:0;overflow-wrap:break-word}
.cm-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cm-top h1{font-size:22px;font-weight:700;color:var(--studio-ink);margin:0}
.cm-top .cm-top-actions{margin-left:auto;display:flex;gap:8px;align-items:center}
.cm-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--studio-line);margin:0 -4px;padding:0 4px}
.cm-tabs::-webkit-scrollbar{display:none}
.cm-tab{flex:0 0 auto;padding:10px 12px;font-size:13px;font-weight:600;color:var(--studio-muted);border-bottom:2px solid transparent;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;background:none;cursor:pointer}
.cm-tab:hover{color:var(--studio-ink)}
.cm-tab.is-active{color:var(--studio-ink);border-bottom-color:var(--cm-gold)}
.cm-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width:1280px){.cm-grid{grid-template-columns:minmax(0,1fr) 250px}.cm-grid.is-full{grid-template-columns:minmax(0,1fr)}}
.cm-aside{display:none;flex-direction:column;gap:12px}
@media (min-width:1280px){.cm-aside{display:flex;position:sticky;top:100px}}
.cm-box{background:var(--studio-surface);border:1px solid var(--studio-line);border-radius:var(--cm-radius);padding:14px}
.cm-box h3{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--studio-muted);font-weight:700;margin:0 0 10px}
.cm-space-group{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--studio-muted);font-weight:700;margin:12px 4px 4px}
.cm-space{display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px;border-radius:10px;font-size:13px;color:var(--studio-ink);text-align:left;background:none;cursor:pointer}
.cm-space:hover{background:var(--cm-gold-soft)}
.cm-space.is-active{background:var(--cm-gold-soft);font-weight:600}
.cm-space .cm-count{margin-left:auto}
.cm-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.cm-chips::-webkit-scrollbar{display:none}
@media (min-width:1024px){.cm-chips.cm-mobile-only{display:none}}
.cm-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid var(--studio-line);font-size:12px;font-weight:600;color:var(--studio-muted);background:var(--studio-surface);cursor:pointer;white-space:nowrap}
.cm-chip:hover{color:var(--studio-ink);background:var(--studio-soft)}
.cm-chip.is-active{color:var(--studio-surface);background:var(--studio-ink);border-color:var(--studio-ink)}
.cm-count[hidden]{display:none!important}
[data-theme="light"] .cm-count{color:#fff}
.cm-count{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--cm-gold);color:#0a0f14;font-size:10px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.cm-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;border-radius:10px;font-size:13px;font-weight:600;border:1px solid var(--studio-line);color:var(--studio-ink);background:var(--studio-surface);cursor:pointer;transition:background .15s,border-color .15s}
.cm-btn:hover{background:var(--studio-soft)}
.cm-btn:disabled{opacity:.5;cursor:not-allowed}
.cm-btn-primary{background:var(--studio-accent);color:var(--studio-accent-ink);border-color:transparent}
.cm-btn-primary:hover{background:var(--studio-accent);filter:brightness(1.06);border-color:transparent}
.cm-btn-danger{color:var(--cm-red);border-color:rgba(248,113,113,.35)}
.cm-btn-sm{padding:5px 10px;font-size:12px;border-radius:8px}
.cm-icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:6px 8px;border-radius:9px;font-size:12px;font-weight:600;color:var(--studio-muted);background:none;cursor:pointer;position:relative}
.cm-icon-btn:hover{color:var(--studio-ink);background:var(--studio-soft)}
.cm-icon-btn.is-on{color:var(--cm-gold)}
.cm-icon-btn svg{width:18px;height:18px}
.cm-icon-btn .cm-count{position:absolute;top:-2px;right:-4px}
.cm-input,.cm-textarea,.cm-select{width:100%;background:var(--studio-soft);border:1px solid var(--studio-line);border-radius:10px;padding:9px 12px;font-size:14px;color:var(--studio-ink);outline:none}
.cm-input:focus,.cm-textarea:focus,.cm-select:focus{border-color:var(--cm-gold-line)}
/* Fokus z klawiatury widoczny wyraźnie, nie samą zmianą koloru ramki (etap 5, WCAG 2.4.7). */
.cm-input:focus-visible,.cm-textarea:focus-visible,.cm-select:focus-visible,.cm-quick-input:focus-visible{outline:2px solid var(--cm-gold);outline-offset:1px}
/* Lista rozwijana musi wyglądać na listę: własna strzałka (tło nadpisywało systemową). CSP img-src dopuszcza data:. */
.cm-select{-webkit-appearance:none;appearance:none;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A6B1C3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:16px}
[data-theme="light"] .cm-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23586579' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
.cm-textarea{resize:vertical;min-height:90px;line-height:1.5}
.cm-label{display:block;font-size:12px;font-weight:600;color:var(--studio-muted);margin:0 0 6px}
.cm-help{font-size:12px;color:var(--studio-muted);margin-top:4px}
.cm-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cm-stack{display:flex;flex-direction:column;gap:12px}
.cm-muted{color:var(--studio-muted)}
.cm-small{font-size:12px}
.cm-link{color:var(--studio-ink);font-weight:600;cursor:pointer;background:none;display:inline-flex;align-items:center;gap:4px}
.cm-link:hover{text-decoration:underline}
.cm-divider{border-top:1px solid var(--studio-line);margin:8px 0}
.cm-empty{text-align:center;padding:36px 16px;color:var(--studio-muted);font-size:14px}
.cm-empty strong{display:block;color:var(--studio-ink);font-size:16px;margin-bottom:6px}
.cm-skeleton{height:120px;border-radius:var(--cm-radius);background:linear-gradient(90deg,var(--studio-soft),var(--studio-surface),var(--studio-soft));background-size:200% 100%;animation:cm-shimmer 1.4s infinite}
@keyframes cm-shimmer{to{background-position:-200% 0}}
/* Ludzie: awatary, podpisy, poziomy, etykiety */
.cm-avatar{flex:0 0 auto;border-radius:999px;object-fit:cover;background:#4b5563;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:800;overflow:hidden;position:relative}
.cm-avatar-xs{width:24px;height:24px;font-size:10px}
.cm-avatar-sm{width:32px;height:32px;font-size:12px}
.cm-avatar-md{width:40px;height:40px;font-size:15px}
.cm-avatar-lg{width:64px;height:64px;font-size:22px}
.cm-avatar-xl{width:96px;height:96px;font-size:32px}
.cm-online{position:absolute;right:0;bottom:0;width:28%;height:28%;min-width:8px;min-height:8px;border-radius:999px;background:var(--cm-green);border:2px solid var(--studio-surface)}
.cm-avatar-wrap{position:relative;display:inline-flex}
.cm-person{display:flex;align-items:center;gap:10px;min-width:0}
.cm-person>button,.cm-person>.cm-avatar,.cm-person>.cm-avatar-wrap{flex:0 0 auto}
.cm-rank .cm-person{flex:1;min-width:0}
.cm-person-name{font-weight:600;font-size:15px;color:var(--studio-ink);background:none;cursor:pointer;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cm-person-name:hover{text-decoration:underline}
.cm-meta{font-size:13px;color:var(--studio-muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cm-level{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:transparent;color:var(--studio-muted);border:1px solid var(--studio-line);white-space:nowrap}
.cm-tag{display:inline-flex;align-items:center;font-size:11px;font-weight:700;padding:2px 7px;border-radius:999px;border:1px solid currentColor;white-space:nowrap}
.cm-tag-gold{color:var(--cm-gold)}.cm-tag-blue{color:var(--cm-blue)}.cm-tag-green{color:var(--cm-green)}.cm-tag-red{color:var(--cm-red)}.cm-tag-purple{color:var(--cm-purple)}.cm-tag-pink{color:var(--cm-pink)}.cm-tag-gray{color:var(--studio-muted)}
.cm-role{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--studio-soft);color:var(--studio-ink);border:1px solid var(--studio-line)}
/* Wpisy */
.cm-feed{display:flex;flex-direction:column;gap:12px}
.cm-post{background:var(--studio-surface);border:1px solid var(--studio-line);border-radius:var(--cm-radius);padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.cm-post.is-pinned{border-color:var(--cm-gold-line)}
/* Ukryty przez moderację: przerywana czerwona ramka i etykieta zamiast przygaszenia (przygaszenie psuło kontrast - r2). */
.cm-post.is-hidden{border-style:dashed;border-color:var(--cm-red)}
.cm-post-head{display:flex;align-items:flex-start;gap:10px}
.cm-post-head .cm-post-menu{margin-left:auto}
.cm-post-title{font-size:19px;font-weight:700;color:var(--studio-ink);line-height:1.35;margin:0;cursor:pointer;overflow-wrap:anywhere}
.cm-post-flags{display:flex;gap:6px;flex-wrap:wrap}
.cm-flag{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:2px 8px;border-radius:999px;border:1px solid var(--studio-line);color:var(--studio-muted)}
.cm-flag-gold{color:var(--cm-gold);border-color:var(--cm-gold-line)}
.cm-flag-green{color:var(--cm-green);border-color:rgba(52,211,153,.35)}
.cm-body{font-size:16px;line-height:1.6;color:var(--studio-ink);white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}
.cm-body a{color:var(--cm-gold);text-decoration:underline}
.cm-body .cm-mention,.cm-body .cm-hashtag{color:var(--studio-ink);font-weight:600;cursor:pointer;background:none;padding:0}
.cm-body .cm-hashtag:hover{text-decoration:underline}
.cm-body.is-clamped{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.cm-images{display:grid;gap:6px;grid-template-columns:repeat(2,minmax(0,1fr));border-radius:12px;overflow:hidden}
.cm-images.is-single{grid-template-columns:minmax(0,1fr)}
.cm-images img{width:100%;height:100%;max-height:420px;object-fit:cover;cursor:zoom-in;background:var(--studio-soft)}
.cm-images.is-single img{object-fit:contain;max-height:520px}
/* Jeden obraz we wpisie, komentarzu i czacie w rozmiarze naturalnym, najwyżej na szerokość kolumny - mały plik (np. GIF
   200x150 z dysku) nie jest już rozciągany do 674 px i rozpikselowany; ramka obejmuje sam obraz (audyt brak6-8).
   Karta w kanale (.cm-media) zostaje przy polu w proporcjach pliku - rezerwuje miejsce przed wczytaniem. */
.cm-images.is-single:not(.cm-media){width:fit-content;max-width:100%}
.cm-images.is-single:not(.cm-media) img{width:auto;max-width:100%;height:auto}
.cm-comment .cm-images.is-single:not(.cm-media) img{max-height:320px}
.cm-actions{display:flex;align-items:center;gap:4px;border-top:1px solid var(--studio-line);padding-top:6px;margin-top:-4px}
.cm-lesson-ref{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--studio-ink);background:var(--studio-soft);border-radius:8px;padding:4px 10px;cursor:pointer;text-align:left}
/* Długi tytuł lekcji: ikona zostaje w pełnym rozmiarze, tekst od lewej (przycisk centrował go i ściskał ikonę - audyt brak6-7). */
.cm-lesson-ref>svg{flex:none;width:16px;height:16px}
/* Ankieta */
.cm-poll{display:flex;flex-direction:column;gap:6px;border:1px solid var(--studio-line);border-radius:12px;padding:12px}
.cm-poll-q{font-weight:700;font-size:14px;color:var(--studio-ink)}
.cm-poll-opt{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;border-radius:10px;border:1px solid var(--studio-line);font-size:13px;color:var(--studio-ink);background:none;cursor:pointer;overflow:hidden;text-align:left;width:100%}
.cm-poll-opt .cm-poll-bar{position:absolute;inset:0 auto 0 0;background:var(--cm-gold-soft);z-index:0}
.cm-poll-opt>span{position:relative;z-index:1}
.cm-poll-opt.is-mine{border-color:var(--cm-gold-line);font-weight:700}
/* Komentarze */
.cm-comments{display:flex;flex-direction:column;gap:14px}
.cm-comment{display:flex;gap:10px;min-width:0}
.cm-comment-bubble{flex:1;min-width:0}
.cm-comment-box{background:var(--studio-soft);border-radius:12px;padding:10px 12px}
.cm-comment.is-helpful .cm-comment-box{border:1px solid rgba(52,211,153,.45)}
.cm-comment-tools{display:flex;gap:10px;align-items:center;font-size:12px;color:var(--studio-muted);margin:4px 4px 0}
.cm-comment-tools button{background:none;color:var(--studio-muted);font-weight:600;cursor:pointer}
.cm-comment-tools button:hover{color:var(--studio-ink)}
.cm-comment-tools button.is-on{color:var(--cm-gold)}
.cm-replies{display:flex;flex-direction:column;gap:12px;margin-top:10px}
.cm-placeholder{font-size:13px;font-style:italic;color:var(--studio-muted)}
/* Pisanie */
.cm-composer{display:flex;flex-direction:column;gap:10px}
.cm-composer-bar{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.cm-thumbs{display:flex;gap:8px;flex-wrap:wrap}
.cm-thumb{position:relative;width:72px;height:72px;border-radius:10px;overflow:hidden;background:var(--studio-soft)}
.cm-thumb img{width:100%;height:100%;object-fit:cover}
.cm-thumb button{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:999px;background:rgba(0,0,0,.65);color:#fff;font-size:12px;line-height:1}
.cm-suggest{position:absolute;z-index:85;min-width:220px;max-width:320px;background:var(--studio-surface);border:1px solid var(--studio-line);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.35);padding:4px;max-height:260px;overflow-y:auto}
.cm-suggest button{display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px;border-radius:8px;font-size:13px;color:var(--studio-ink);text-align:left;background:none;cursor:pointer}
.cm-suggest button:hover,.cm-suggest button.is-active{background:var(--studio-soft)}
/* Baner, Zacznij tu, trendy */
.cm-banner{position:relative;display:flex;gap:14px;align-items:center;border-radius:var(--cm-radius);overflow:hidden;border:1px solid var(--cm-gold-line);background:linear-gradient(120deg,var(--cm-gold-soft),transparent 70%),var(--studio-surface);padding:16px 44px 16px 16px}
.cm-banner img{width:120px;height:72px;object-fit:cover;border-radius:10px;flex:0 0 auto}
.cm-banner h2{font-size:16px;font-weight:800;margin:0 0 4px;color:var(--studio-ink)}
.cm-banner p{font-size:13px;color:var(--studio-muted);margin:0}
.cm-banner .cm-close{position:absolute;top:8px;right:8px}
@media (max-width:640px){.cm-banner{flex-direction:column;align-items:flex-start}.cm-banner img{width:100%;height:120px}}
.cm-progress{height:8px;border-radius:999px;background:var(--studio-soft);overflow:hidden}
.cm-progress>div{height:100%;background:linear-gradient(90deg,#FFD23F,#FFA500);border-radius:999px}
.cm-step{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--studio-line);border-radius:12px}
.cm-step.is-done{border-color:rgba(52,211,153,.4)}
.cm-step-mark{flex:0 0 auto;width:28px;height:28px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--studio-line);color:var(--studio-muted);font-size:12px;font-weight:800}
.cm-step.is-done .cm-step-mark{background:var(--cm-green);border-color:var(--cm-green);color:#fff}
.cm-step .cm-btn{align-self:flex-start}
.cm-ol{list-style:decimal;padding-left:20px}
.cm-trend{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-bottom:1px solid var(--studio-line);cursor:pointer}
.cm-trend:last-child{border-bottom:0}
.cm-trend-title{font-size:13px;font-weight:600;color:var(--studio-ink);line-height:1.35}
.cm-hashtags{display:flex;flex-wrap:wrap;gap:6px}
/* Wydarzenia */
.cm-event{display:flex;gap:14px;align-items:flex-start;background:var(--studio-surface);border:1px solid var(--studio-line);border-radius:var(--cm-radius);padding:14px;cursor:pointer}
.cm-event:hover{border-color:var(--studio-muted)}
.cm-date{flex:0 0 auto;width:54px;border-radius:12px;border:1px solid var(--studio-line);text-align:center;overflow:hidden}
.cm-date b{display:block;background:var(--studio-soft);color:var(--cm-gold);font-size:10px;font-weight:800;text-transform:uppercase;padding:3px 0}
.cm-date span{display:block;font-size:20px;font-weight:800;color:var(--studio-ink);padding:4px 0}
.cm-live{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;color:#fff;background:#dc2626;border-radius:999px;padding:3px 9px;text-transform:uppercase;letter-spacing:.05em}
.cm-live::before{content:"";width:7px;height:7px;border-radius:999px;background:#fff;animation:cm-pulse 1.2s infinite}
@keyframes cm-pulse{50%{opacity:.25}}
.cm-video{position:relative;width:100%;padding-top:56.25%;border-radius:var(--cm-radius);overflow:hidden;background:#000}
.cm-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cm-cover{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--cm-radius);background:var(--studio-soft)}
.cm-countdown{display:flex;gap:10px}
.cm-countdown div{min-width:58px;text-align:center;padding:8px;border-radius:12px;background:var(--studio-soft)}
.cm-countdown strong{display:block;font-size:22px;color:var(--studio-ink)}
.cm-countdown span{font-size:10px;text-transform:uppercase;color:var(--studio-muted)}
.cm-live-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
@media (min-width:1280px){.cm-live-layout{grid-template-columns:minmax(0,1fr) 300px}}
.cm-faces{display:flex}
.cm-faces .cm-avatar{border:2px solid var(--studio-surface);margin-left:-5px}
.cm-faces .cm-avatar:first-child{margin-left:0}
/* Czat */
.cm-chat{display:flex;flex-direction:column;background:var(--studio-surface);border:1px solid var(--studio-line);border-radius:var(--cm-radius);min-height:420px;max-height:70vh}
.cm-chat-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--studio-line);font-size:13px;font-weight:700;color:var(--studio-ink)}
.cm-chat-list{flex:1;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:10px}
.cm-chat-msg{display:flex;gap:8px;align-items:flex-start}
.cm-chat-msg .cm-chat-text{font-size:15px;line-height:1.5;color:var(--studio-ink);white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}
.cm-chat-msg .cm-chat-meta{font-size:12px;color:var(--studio-muted);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.cm-chat-msg .cm-chat-tools{display:inline-flex;gap:2px;opacity:0;transition:opacity .12s}
/* Przezroczystość zamiast display:none: przycisk da się sfokusować z klawiatury i wrócić na niego po zamknięciu okna. */
.cm-chat-msg:hover .cm-chat-tools,.cm-chat-msg:focus-within .cm-chat-tools{opacity:1}
/* Na dotyku tylko menu wiadomości (polubienie i wątek są w nim) - ikonki rozbijały każdą wiadomość. */
@media (hover:none){.cm-chat-msg .cm-chat-tools{opacity:1}.cm-chat-msg .cm-tool-like,.cm-chat-msg .cm-tool-thread{display:none}
  /* ...ale licznik polubień zostaje, gdy ktoś już polubił (inaczej wynik reakcji znikał). */
  .cm-chat-msg .cm-tool-like:has(> span:not(:empty)){display:inline-flex}}
.cm-chat-pinned{padding:8px 12px;border-bottom:1px solid var(--studio-line);background:var(--cm-gold-soft);font-size:12px;color:var(--studio-ink)}
.cm-chat-form{display:flex;gap:8px;align-items:flex-end;padding:10px;border-top:1px solid var(--studio-line)}
.cm-chat-form textarea{min-height:40px;max-height:140px;resize:none;overflow-y:auto}
.cm-thread-link{font-size:12px;font-weight:700;color:var(--studio-ink);background:none;cursor:pointer;padding:0}
/* Wiadomości prywatne */
.cm-dm{display:grid;grid-template-columns:minmax(0,1fr);gap:0;background:var(--studio-surface);border:1px solid var(--studio-line);border-radius:var(--cm-radius);overflow:hidden;min-height:560px}
@media (min-width:900px){.cm-dm{grid-template-columns:300px minmax(0,1fr)}}
/* Szersza lista rozmów na dużym ekranie: przy 280 px imię z nazwiskiem i „przed chwilą” nie mieściły się (audyt wiadomosci-8). */
@media (min-width:1200px){.cm-dm{grid-template-columns:clamp(320px,36%,380px) minmax(0,1fr)}}
.cm-dm-list{border-right:1px solid var(--studio-line);overflow-y:auto;max-height:70vh}
.cm-dm.is-open .cm-dm-list{display:none}
@media (min-width:900px){.cm-dm.is-open .cm-dm-list{display:block}}
.cm-dm.is-list .cm-dm-pane{display:none}
@media (min-width:900px){.cm-dm.is-list .cm-dm-pane{display:flex}}
.cm-dm-item{display:flex;gap:10px;align-items:center;width:100%;padding:10px 12px;text-align:left;background:none;border-bottom:1px solid var(--studio-line);cursor:pointer}
.cm-dm-item:hover,.cm-dm-item.is-active{background:var(--studio-soft)}
.cm-dm-item .cm-dm-preview{font-size:12px;color:var(--studio-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-dm-item.is-unread .cm-dm-preview{color:var(--studio-ink);font-weight:700}
.cm-dm-pane{display:flex;flex-direction:column;min-width:0;max-height:70vh}
.cm-dm-msgs{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:6px}
.cm-bubble{max-width:78%;padding:8px 12px;border-radius:14px;font-size:15px;line-height:1.45;white-space:pre-wrap;word-break:break-word;background:var(--studio-soft);color:var(--studio-ink);align-self:flex-start}
.cm-bubble.is-mine{align-self:flex-end;background:var(--cm-gold-soft);border:1px solid var(--cm-gold-line)}
.cm-bubble-meta{font-size:10px;color:var(--studio-muted);margin-top:2px}
.cm-request{padding:12px;border-bottom:1px solid var(--studio-line);background:var(--cm-gold-soft);font-size:13px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* Profil */
.cm-profile-head{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
@media (max-width:640px){.cm-profile-head{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px}.cm-profile-head .cm-avatar-xl{width:64px;height:64px;font-size:22px}.cm-profile-head>.cm-profile-actions{grid-column:1/-1}.cm-profile-head h1{font-size:20px;line-height:1.25}}
.cm-profile-head h1{font-size:22px;font-weight:800;margin:0;color:var(--studio-ink)}
.cm-profile-head .cm-headline{font-size:14px;color:var(--studio-muted);margin-top:2px}
.cm-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cm-stat{text-align:center;padding:10px;border-radius:12px;background:var(--studio-soft)}
.cm-stat strong{display:block;font-size:18px;color:var(--studio-ink)}
.cm-stat span{font-size:11px;color:var(--studio-muted)}
.cm-links{display:flex;gap:6px;flex-wrap:wrap}
/* Ranking */
.cm-rank{display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid var(--studio-line)}
.cm-rank:last-child{border-bottom:0}
.cm-rank-no{width:28px;text-align:center;font-weight:800;color:var(--studio-muted)}
.cm-rank-no.is-top{color:var(--cm-gold)}
.cm-rank-pts{margin-left:auto;font-weight:800;color:var(--studio-ink);font-size:13px}
.cm-levels{display:flex;flex-direction:column;gap:6px}
.cm-level-row{display:flex;justify-content:space-between;font-size:13px;padding:6px 10px;border-radius:8px;color:var(--studio-ink)}
.cm-level-row.is-current{background:var(--cm-gold-soft);font-weight:700}
/* Dzwonek i menu */
.cm-pop{position:fixed;z-index:65;width:min(380px,calc(100vw - 24px));max-height:70vh;overflow-y:auto;background:var(--studio-surface);border:1px solid var(--studio-line);border-radius:var(--cm-radius);box-shadow:0 18px 60px rgba(0,0,0,.4)}
.cm-pop-head{display:flex;align-items:center;padding:10px 12px;border-bottom:1px solid var(--studio-line);font-weight:700;font-size:14px;color:var(--studio-ink);position:sticky;top:0;background:var(--studio-surface)}
.cm-note{display:flex;gap:10px;padding:10px 12px;border-bottom:1px solid var(--studio-line);text-align:left;width:100%;background:none;cursor:pointer;font-size:13px;color:var(--studio-ink);line-height:1.4}
.cm-note:hover{background:var(--studio-soft)}
.cm-note.is-unread{background:rgba(255,210,63,.06)}
.cm-note.is-unread::after{content:"";flex:0 0 auto;width:8px;height:8px;margin-top:6px;border-radius:999px;background:var(--cm-gold)}
.cm-menu{position:fixed;z-index:85;min-width:190px;background:var(--studio-surface);border:1px solid var(--studio-line);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.35);padding:4px}
.cm-menu button{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border-radius:8px;font-size:13px;color:var(--studio-ink);text-align:left;background:none;cursor:pointer}
.cm-menu button:hover{background:var(--studio-soft)}
.cm-menu button.is-danger{color:var(--cm-red)}
.cm-header-btn{position:relative}
.cm-header-btn .cm-count{position:absolute;top:2px;right:0}
/* Okno dialogowe */
.cm-modal{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.65);display:flex;align-items:flex-end;justify-content:center;padding:0}
@media (min-width:640px){.cm-modal{align-items:center;padding:16px}}
.cm-dialog{width:100%;max-width:560px;max-height:92vh;overflow-y:auto;background:var(--studio-surface);border:1px solid var(--studio-line);border-radius:18px 18px 0 0;padding:18px;overflow-wrap:break-word}
@media (min-width:640px){.cm-dialog{border-radius:18px}}
.cm-dialog.is-wide{max-width:760px}
.cm-dialog-head{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.cm-dialog-head h2{font-size:17px;font-weight:800;margin:0;color:var(--studio-ink)}
.cm-dialog-head .cm-close{margin-left:auto}
.cm-lightbox{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;padding:16px;cursor:zoom-out}
.cm-lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
.cm-lightbox-close{position:absolute;top:calc(12px + env(safe-area-inset-top));right:12px;width:44px;height:44px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:#111827;border:1px solid rgba(255,255,255,.45);color:#fff;cursor:pointer}
.cm-lightbox-close svg{width:20px;height:20px}
.cm-lightbox-close:focus-visible{outline:2px solid #FFD23F;outline-offset:2px}
/* Powiększany obraz jest przyciskiem (Tab, Enter): obwódka w środku, bo galerie przycinają to, co wystaje. */
.cm-zoomable{cursor:zoom-in}
.cm-zoomable:focus-visible{outline:3px solid var(--cm-gold);outline-offset:-3px}
/* Przełącznik, tabela admina */
.cm-switch{position:relative;width:40px;height:22px;border-radius:999px;background:var(--studio-soft);border:1px solid var(--studio-line);cursor:pointer;flex:0 0 auto;transition:background .15s}
.cm-switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:999px;background:var(--studio-muted);transition:transform .15s,background .15s}
.cm-switch[aria-checked="true"]{background:var(--cm-gold-soft);border-color:var(--cm-gold-line)}
.cm-switch[aria-checked="true"]::after{transform:translateX(18px);background:var(--cm-gold)}
.cm-switch:focus-visible{outline:2px solid var(--cm-gold);outline-offset:2px}
.cm-switch-label{display:block;font-size:14px;color:var(--studio-ink);cursor:pointer}
.cm-steps{margin:6px 0 0;padding-left:20px;list-style:decimal;display:flex;flex-direction:column;gap:2px}
.cm-table{width:100%;border-collapse:collapse;font-size:13px}
.cm-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--studio-muted);padding:8px;border-bottom:1px solid var(--studio-line)}
.cm-table td{padding:8px;border-bottom:1px solid var(--studio-line);color:var(--studio-ink);vertical-align:top}
.cm-scroll-x{overflow-x:auto}
.cm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
/* Czat i wiadomości na telefonie: pływające przyciski Bonifacego i mikrofonu zasłaniały „Wyślij”. */
@media (max-width:899px){body.cm-composing #vc-toggle,body.cm-composing #notatnik-chat-toggle{display:none!important}}
/* Artykuły ekspertów: karta w liście, pełny artykuł, edytor. */
.cm-article-card{gap:10px}
.cm-article-cover{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;border-radius:12px;overflow:hidden}
.cm-article-cover img{display:block;width:100%;aspect-ratio:16/7;object-fit:cover;background:var(--studio-soft)}
.cm-article-kicker{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--studio-muted)}
.cm-article-kicker svg{width:14px;height:14px}
.cm-article-lead{font-size:14px;line-height:1.6;color:var(--studio-muted);margin:0}
.cm-article{gap:14px}
.cm-article-hero{display:block;width:100%;max-height:420px;object-fit:cover;border-radius:12px;cursor:zoom-in;background:var(--studio-soft)}
.cm-article-title{font-size:clamp(22px,4vw,30px);line-height:1.25;font-weight:800;color:var(--studio-ink);margin:0;overflow-wrap:anywhere}
.cm-article-body{font-size:16px;line-height:1.75;color:var(--studio-ink);max-width:720px;word-break:break-word;overflow-wrap:anywhere}
/* Artykuł od śródtytułu bez dziury pod autorem (audyt artykuly-12); musi wygrać z .cm-article.is-reading .cm-article-body h2 (0,3,1). */
.cm-article-body>:first-child,html body.cm-area .cm-article-body>:first-child{margin-top:0}
.cm-article-body p{margin:0 0 1em}
.cm-article-body h2{font-size:21px;line-height:1.3;font-weight:800;margin:1.4em 0 .5em;color:var(--studio-ink)}
.cm-article-body h3{font-size:17px;line-height:1.35;font-weight:700;margin:1.2em 0 .4em;color:var(--studio-ink)}
.cm-article-body ul,.cm-article-body ol{margin:0 0 1em;padding-left:1.4em}
.cm-article-body ul{list-style:disc}.cm-article-body ol{list-style:decimal}
.cm-article-body li{margin:.25em 0}
.cm-article-body blockquote{margin:0 0 1em;padding:.6em 1em;border-left:3px solid var(--cm-gold);background:var(--cm-gold-soft);border-radius:0 10px 10px 0;color:var(--studio-ink)}
.cm-article-body a{color:var(--cm-gold);text-decoration:underline}
.cm-article-body strong{font-weight:700}
.cm-article-body figure{margin:1.2em 0}
.cm-article-body figure img{display:block;width:100%;max-height:520px;object-fit:contain;border-radius:12px;background:var(--studio-soft);cursor:zoom-in}
.cm-article-body figcaption{font-size:13px;color:var(--studio-muted);margin-top:6px;text-align:center}
.cm-article-body .cm-mention,.cm-article-body .cm-hashtag{color:var(--cm-gold);font-weight:600;cursor:pointer;background:none;padding:0}
/* Edytor artykułu: pływające przyciski (mikrofon, Bonifacy) schowane na czas pisania, na każdej szerokości. */
body.cm-writing #vc-toggle,body.cm-writing #notatnik-chat-toggle{display:none!important}
.cm-editor-bar{display:flex;flex-wrap:wrap;gap:6px}
.cm-editor-text{min-height:360px;font-size:15px;line-height:1.6}
.cm-editor-preview{border:1px dashed var(--studio-line);border-radius:10px;padding:14px;min-height:200px}
.cm-article-thumb{display:flex;flex-direction:column;align-items:center;gap:2px}
/* „Okładka” ma wysokość przycisku „Na okładkę” obok - „Wstaw w tekst” stoi w jednej linii pod każdą miniaturą (audyt artykuly-10). */
.cm-article-thumb-label{display:inline-flex;align-items:center;min-height:1.5em;font-size:11px;font-weight:700;color:var(--cm-gold)}

/* Przebudowa 08.10, etap 1: obszar społeczności, jedno lewe menu, dolny pasek na telefonie, tokeny obu motywów. */
body.cm-area{--studio-canvas:#0B1018;--studio-surface:#121A26;--studio-soft:#1A2535;--studio-line:#293548;--studio-ink:#F3F6FC;--studio-muted:#A6B1C3}
[data-theme="light"] body.cm-area{--studio-canvas:#F5F7FB;--studio-surface:#FFFFFF;--studio-soft:#EDF1F7;--studio-line:#D9E0EB;--studio-ink:#172033;--studio-muted:#586579}
body.cm-area #vc-toggle,body.cm-area #notatnik-chat-toggle{display:none!important}
/* Podpowiedzi aplikacji notatnika (instalacja, przypomnienia o nauce; z-index 9998) zasłaniały na telefonie dolny pasek,
   pole wiadomości i stopkę kompozytora z „Opublikuj” (etap 5). W społeczności ukryte - wracają poza nią. */
body.cm-area #install-banner,body.cm-area #push-permission-nudge{display:none!important}
@media (min-width:1024px){
  body.cm-area #sidebar{display:none}
  body.cm-area #main-app>main{margin-left:0;padding:100px 24px 48px}
  body.cm-area #content{max-width:1320px}
}
@media (max-width:1023px){
  body.cm-area #main-app>header{height:56px;padding:0 8px 0 12px;gap:8px}
  body.cm-area #main-app>header button[aria-controls="sidebar"],body.cm-area #profile-btn,body.cm-area #theme-toggle,body.cm-area #main-app>header button[onclick="logout()"],body.cm-area #cm-header .cm-dm-btn{display:none}
  body.cm-area .studio-brand{font-size:17px}
  body.cm-area .studio-brand small{display:none}
  body.cm-area .studio-brand-logo{width:30px;height:33px}
  body.cm-area #main-app>main{padding:68px 14px calc(88px + env(safe-area-inset-bottom))}
}
.cm-area-only{display:none!important}
body.cm-area .cm-area-only{display:inline-flex!important}
@media (max-width:1023px){body.cm-area .cm-wide-only{display:none!important}}
.cm-area-switch{display:none;margin-left:8px;padding:3px;border-radius:10px;background:var(--studio-soft);border:1px solid var(--studio-line)}
@media (min-width:768px){.cm-area-switch{display:flex}}
.cm-area-switch a{padding:6px 12px;border-radius:8px;font-size:13px;font-weight:600;color:var(--studio-muted);text-decoration:none;white-space:nowrap}
.cm-area-switch a:hover{color:var(--studio-ink)}
.cm-area-switch a[aria-current="page"]{background:var(--studio-surface);color:var(--studio-ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.cm-shell.cm-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
@media (min-width:1024px){.cm-shell.cm-layout{grid-template-columns:220px minmax(0,1fr)}}
/* Ta sama szerokość siatki na każdej podstronie, żeby lewe menu nie przeskakiwało (strony bez prawej kolumny też). */
@media (min-width:1280px){.cm-shell.cm-layout{grid-template-columns:220px minmax(0,1fr) 280px;max-width:1268px;margin:0 auto}.cm-shell.cm-layout.is-full{grid-template-columns:220px minmax(0,1fr)}}
.cm-center{min-width:0;display:flex;flex-direction:column;gap:14px}
.cm-page-head{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px 12px}
.cm-page-titles{flex:1 1 240px;min-width:0}
.cm-page-h1{margin:0;font-size:28px;line-height:34px;font-weight:700;letter-spacing:-.02em;color:var(--studio-ink);overflow-wrap:anywhere}
.cm-page-h1:focus{outline:none}
.cm-page-sub{margin:4px 0 0;font-size:14px;line-height:1.5;color:var(--studio-muted)}
.cm-page-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:34px}
.cm-page-actions:empty{display:none}
.cm-page-actions .cm-btn{min-height:36px}
@media (max-width:1023px){.cm-page-titles{flex-basis:140px}.cm-page-h1{font-size:22px;line-height:28px}.cm-page-head .cm-head-write{display:none}.cm-page-actions{min-height:28px}}
.cm-nav{display:none}
@media (min-width:1024px){.cm-nav{display:flex;flex-direction:column;gap:2px;position:sticky;top:100px;max-height:calc(100vh - 120px);overflow-y:auto;padding-bottom:24px;scrollbar-width:thin}}
.cm-nav-item{display:flex;align-items:center;gap:12px;width:100%;min-height:36px;padding:7px 12px;border-radius:10px;font-size:14px;font-weight:500;color:var(--studio-muted);text-decoration:none;text-align:left;background:none;cursor:pointer}
.cm-nav-item svg{width:18px;height:18px;flex:0 0 auto}
.cm-nav-item:hover{background:var(--studio-soft);color:var(--studio-ink)}
.cm-nav-item.is-active{background:var(--studio-soft);color:var(--studio-ink);font-weight:600}
.cm-nav-item.is-active svg{color:var(--cm-gold)}
.cm-nav-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-nav-group{margin:14px 12px 4px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--studio-muted)}
.cm-nav-dot{flex:0 0 auto;width:8px;height:8px;border-radius:999px;background:var(--cm-gold)}
.cm-nav-start{display:flex;flex-direction:column;gap:8px;margin:16px 0 4px;padding:12px;border-radius:12px;border:1px solid var(--studio-line);background:var(--studio-surface);font-size:13px;font-weight:600;color:var(--studio-ink);text-decoration:none}
.cm-nav-start .cm-progress{height:6px}
.cm-progress>span{display:block;height:100%;border-radius:999px;background:var(--cm-gold)}
.cm-sheet{display:flex;flex-direction:column;gap:2px}
.cm-sheet .cm-nav-item{min-height:44px}
.cm-dialog:focus{outline:none}
.cm-shell input[type="checkbox"],.cm-shell input[type="radio"],.cm-dialog input[type="checkbox"],.cm-dialog input[type="radio"]{accent-color:var(--studio-accent)}
.cm-sheet .cm-nav-group:first-child{margin-top:0}
.cm-bottom{display:none}
@media (max-width:1023px){
  body.cm-area .cm-bottom{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;align-items:stretch;height:calc(64px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--studio-surface);border-top:1px solid var(--studio-line)}
  .cm-bottom-item{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px;font-size:11px;font-weight:600;color:var(--studio-muted);text-decoration:none;background:none;cursor:pointer}
  .cm-bottom-item svg{width:22px;height:22px}
  .cm-bottom-item .cm-nav-label{flex:none}
  .cm-bottom-item.is-active{color:var(--studio-ink)}
  .cm-bottom-item.is-active svg{color:var(--cm-gold)}
  .cm-bottom-item .cm-count{position:absolute;top:6px;left:calc(50% + 6px)}
  .cm-post-title{font-size:17px}
}
.cm-page-sort{flex:0 0 auto}
.cm-select-sm{width:auto;min-height:36px;padding:6px 30px 6px 10px;font-size:13px;border-radius:9px;background-position:right 8px center}
.cm-aside .cm-rank-no{width:18px}
.cm-aside .cm-rank .cm-person-name{font-size:13px}
/* Etap 2 (08.10): karta wpisu - kto docenia, przyciski z podpisami, podgląd rozmowy, szybki komentarz. */
.cm-meta-headline{color:var(--studio-muted)}
.cm-meta-headline::after{content:" · "}
@media (max-width:640px){.cm-meta-headline{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cm-meta-headline::after{content:none}}
.cm-post-head .cm-person,.cm-article-foot .cm-person{align-items:flex-start}
.cm-comment{align-items:flex-start}
#cm-comments-box,.cm-comment{scroll-margin-top:96px}
.cm-meta-link{color:var(--studio-ink);font-weight:600;text-decoration:none}
.cm-meta-link:hover{text-decoration:underline}
.cm-post-title a{color:inherit;text-decoration:none}
.cm-post-title a:hover{text-decoration:underline}
.cm-post.is-detail .cm-post-title{font-size:24px;line-height:1.3;cursor:default}
.cm-post.is-list .cm-images img{max-height:360px}
.cm-post.is-list .cm-images.is-single img{max-height:360px}
.cm-more{align-self:flex-start;margin-top:-6px;background:none;color:var(--studio-muted);font-size:14px;font-weight:600;cursor:pointer;padding:0}
.cm-more:hover{color:var(--studio-ink);text-decoration:underline}
.cm-post-stats{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;color:var(--studio-muted);min-height:22px}
.cm-post-stats[hidden]{display:none}
.cm-stats-likes{display:inline-flex;align-items:center;gap:6px;min-width:0;padding:0;background:none;color:inherit;cursor:pointer;text-align:left}
.cm-stats-likes svg{width:15px;height:15px;flex:0 0 auto;color:var(--cm-gold)}
.cm-stats-likes span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-stats-comments{flex:0 0 auto;padding:0;background:none;color:inherit;cursor:pointer;white-space:nowrap}
.cm-stats-likes:hover span,.cm-stats-comments:hover{color:var(--studio-ink);text-decoration:underline}
.cm-act{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 8px;border-radius:10px;font-size:14px;font-weight:600;color:var(--studio-muted);background:none;cursor:pointer;transition:background .14s,color .14s}
.cm-act svg{width:18px;height:18px;flex:0 0 auto}
.cm-act:hover{background:var(--studio-soft);color:var(--studio-ink)}
.cm-act.is-on{color:var(--studio-ink)}
.cm-act.is-on svg{color:var(--cm-gold)}
.cm-preview{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--studio-line);padding-top:12px}
.cm-pv-list{display:flex;flex-direction:column;gap:10px}
.cm-pv-list:empty{display:none}
.cm-pv-all{align-self:flex-start;padding:0;background:none;color:var(--studio-muted);font-size:13px;font-weight:600;cursor:pointer}
.cm-pv-all:hover{color:var(--studio-ink);text-decoration:underline}
.cm-pv-comment{display:flex;gap:8px;align-items:flex-start}
.cm-pv-avatar{background:none;padding:0;flex:0 0 auto;cursor:pointer}
.cm-pv-bubble{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;background:var(--studio-soft);border-radius:14px;padding:8px 12px;font-size:14px;line-height:1.45;color:var(--studio-ink);word-break:break-word;white-space:pre-wrap}
.cm-pv-name{margin-right:6px;padding:0;background:none;color:var(--studio-ink);font-weight:600;cursor:pointer}
.cm-pv-name:hover{text-decoration:underline}
.cm-pv-hidden{margin-right:6px;font-size:12px;font-weight:600;color:var(--cm-red)}
.cm-pv-text .cm-mention,.cm-pv-text .cm-hashtag{color:var(--studio-ink);font-weight:600;background:none;padding:0;cursor:pointer}
.cm-pv-text a{color:var(--cm-gold);text-decoration:underline}
.cm-pv-meta{display:flex;align-items:center;gap:12px;margin:2px 0 0 12px;font-size:12px;color:var(--studio-muted)}
.cm-pv-meta button{padding:0;background:none;color:inherit;font-weight:600;cursor:pointer}
.cm-pv-meta button:hover{color:var(--studio-ink)}
.cm-pv-answer{border:1px solid rgba(52,211,153,.4);background:rgba(52,211,153,.07);border-radius:12px;padding:10px 12px;cursor:pointer}
.cm-pv-label,.cm-answer-label{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--cm-green)}
.cm-pv-label{margin-bottom:4px}
.cm-answer-label{margin:0 0 4px 2px}
.cm-pv-label svg,.cm-answer-label svg{width:14px;height:14px}
.cm-pv-answer .cm-pv-text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;line-height:1.5;color:var(--studio-ink);white-space:pre-wrap;word-break:break-word}
.cm-quick{display:flex;align-items:flex-end;gap:8px}
.cm-quick>.cm-avatar{flex:0 0 auto;margin-bottom:3px}
.cm-quick-input{flex:1;min-width:0;min-height:38px;max-height:140px;resize:none;border-radius:19px;padding:8px 14px;background:var(--studio-soft);border:1px solid var(--studio-line);color:var(--studio-ink);font-size:14px;line-height:1.45;outline:none}
.cm-quick-input:focus{border-color:var(--cm-gold-line)}
.cm-quick-send{flex:0 0 auto;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:var(--studio-accent);color:var(--studio-accent-ink);cursor:pointer;transition:background .14s,color .14s}
.cm-quick-send svg{width:16px;height:16px}
.cm-quick-send:disabled{background:var(--studio-soft);color:var(--studio-muted);cursor:default}
.cm-quick.is-sending{opacity:.65}
.cm-section-title{margin:0;font-size:17px;font-weight:700;color:var(--studio-ink);overflow-wrap:anywhere}
.cm-comment-name{font-size:14px}
.cm-comment-text{font-size:15px;line-height:1.55;margin-top:2px}
.cm-article-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cm-article-card .cm-post-title{font-size:20px}
.cm-article-card .cm-article-lead{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer;font-size:15px}
.cm-article-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cm-article-counts{font-size:13px;color:var(--studio-muted);white-space:nowrap}
a.cm-article-cover{display:block}
@media (max-width:640px){.cm-post.is-detail .cm-post-title{font-size:21px}.cm-act{gap:6px;font-size:13px}}

/* Etap 2: kompozytor - miejsce publikacji z odbiorcami, opcjonalny tytuł i lekcja, szkic, pełny ekran na telefonie. */
.cm-audience{display:flex;align-items:center;gap:6px;margin:6px 0 0;font-size:13px;color:var(--studio-muted)}
.cm-audience svg{width:15px;height:15px;flex:0 0 auto}
.cm-restored{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0;padding:8px 12px;border-radius:10px;background:var(--studio-soft);font-size:13px;color:var(--studio-ink)}
.cm-restored svg{width:15px;height:15px;color:var(--cm-green)}
.cm-restored .cm-link{margin-left:auto}
.cm-c-title{font-size:16px;font-weight:600}
.cm-c-body{min-height:160px;font-size:16px;line-height:1.55}
.cm-composer-send{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding-top:10px;border-top:1px solid var(--studio-line)}
.cm-c-status{margin-right:auto;font-size:12px;color:var(--studio-muted)}
@media (max-width:639px){
  .cm-dialog.is-full{max-width:none;height:100vh;height:100dvh;max-height:100dvh;border-radius:0;border:0;display:flex;flex-direction:column}
  .cm-dialog.is-full #cm-modal-body{flex:1;display:flex;flex-direction:column;min-height:0}
  .cm-dialog.is-full .cm-composer{flex:1}
  .cm-dialog.is-full .cm-c-body{flex:1}
  .cm-dialog.is-full .cm-composer-send{position:sticky;bottom:0;background:var(--studio-surface);padding-bottom:calc(10px + env(safe-area-inset-bottom))}
}
.cm-prompt{display:flex;flex-direction:column;gap:10px;padding:12px 14px}
.cm-prompt-row{display:flex;align-items:center;gap:10px}
.cm-prompt-input{flex:1;min-width:0;min-height:40px;padding:8px 14px;border-radius:999px;border:1px solid var(--studio-line);background:var(--studio-soft);color:var(--studio-muted);font-size:14px;text-align:left;cursor:text;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-prompt-input:hover{color:var(--studio-ink)}
.cm-prompt-input.has-draft{color:var(--studio-ink);border-color:var(--cm-gold-line)}
.cm-prompt-types{display:flex;gap:6px;flex-wrap:wrap}
.cm-prompt-types button{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:6px 12px;border-radius:10px;background:none;color:var(--studio-muted);font-size:13px;font-weight:600;cursor:pointer}
.cm-prompt-types button:hover{background:var(--studio-soft);color:var(--studio-ink)}
.cm-prompt-types svg{width:16px;height:16px}
@media (pointer:coarse){.cm-prompt-types button{min-height:40px}.cm-prompt-input{min-height:44px}}
.cm-comment-box.is-target{outline:2px solid var(--cm-gold);outline-offset:2px}
.cm-pv-open{display:inline-block;margin-top:6px;font-size:13px;font-weight:600;color:var(--studio-ink);text-decoration:underline}
.cm-warn{display:flex;align-items:flex-start;gap:8px;margin:0;padding:8px 12px;border-radius:10px;background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.3);font-size:13px;line-height:1.45;color:var(--studio-ink)}
.cm-warn svg{width:15px;height:15px;flex:0 0 auto;margin-top:2px;color:var(--cm-red)}
/* Etap 3 (08.10): profil (człowiek przed liczbami), katalog jako karty z filtrami etykiet, wyróżnione wydarzenie,
   „Zacznij tu” z jednym następnym krokiem, dzwonek z zakładkami. */
.cm-profile{display:flex;flex-direction:column;gap:14px}
.cm-profile-id{flex:1;min-width:0}
.cm-profile-id .cm-headline{margin:2px 0 0}
.cm-profile-id .cm-meta{margin:8px 0 0}
.cm-profile-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cm-online-text{color:var(--cm-green)}
.cm-callout{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:12px 14px;border-radius:12px;background:var(--cm-gold-soft);border:1px solid var(--cm-gold-line)}
.cm-callout strong{display:block;color:var(--studio-ink);font-size:15px}
.cm-callout p{margin:4px 0 0;font-size:14px;line-height:1.5;color:var(--studio-ink)}
.cm-profile-about{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.cm-profile-about .cm-body{align-self:stretch}
.cm-profile-badges{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.cm-profile-stats{display:flex;flex-wrap:wrap;gap:4px 14px;padding-top:12px;border-top:1px solid var(--studio-line);font-size:13px;color:var(--studio-muted)}
.cm-activity{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid var(--studio-line);border-radius:var(--cm-radius);background:var(--studio-surface);text-decoration:none;color:inherit}
.cm-activity:hover{border-color:var(--studio-muted)}
.cm-activity-title{font-weight:700;font-size:15px;color:var(--studio-ink)}
.cm-activity-text{font-size:14px;line-height:1.5;color:var(--studio-ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cm-member-search{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.cm-member-search .cm-input{flex:1 1 220px;min-width:0}
.cm-member-search .cm-select{width:auto}
.cm-member-tags-filter{margin-bottom:12px}
.cm-member-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
@media (min-width:640px){.cm-member-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cm-member-grid>.cm-empty,.cm-member-grid>.cm-feed{grid-column:1/-1}
.cm-member{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--studio-line);border-radius:var(--cm-radius);background:var(--studio-surface);min-width:0}
.cm-member-main{display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit;min-width:0}
.cm-member-main:hover .cm-member-name{text-decoration:underline}
.cm-member-id{display:flex;flex-direction:column;min-width:0}
.cm-member-name{font-weight:700;font-size:15px;color:var(--studio-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-member-headline{font-size:13px;line-height:1.4;color:var(--studio-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cm-member-about{margin:0;font-size:14px;line-height:1.5;color:var(--studio-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cm-member-tags{display:flex;gap:6px;flex-wrap:wrap}
.cm-member-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto}
.cm-event{text-decoration:none;color:inherit}
.cm-event-row{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.cm-event-row-title{font-weight:700;font-size:15px;color:var(--studio-ink)}
.cm-going-text{color:var(--cm-green);font-weight:700}
.cm-event-feature{padding:0;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.cm-event-feature:has(.cm-event-cover){grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
.cm-event-cover img{display:block;width:100%;height:100%;min-height:180px;max-height:320px;object-fit:cover;background:var(--studio-soft)}
.cm-event-body{display:flex;flex-direction:column;gap:10px;padding:16px;min-width:0}
.cm-event-kicker{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--studio-muted)}
.cm-event-title{margin:0;font-size:20px;line-height:1.3;font-weight:800}
.cm-event-title a{color:var(--studio-ink);text-decoration:none}
.cm-event-title a:hover{text-decoration:underline}
.cm-event-when{display:flex;align-items:center;gap:6px;margin:0;font-size:14px;color:var(--studio-ink)}
.cm-event-when svg{width:15px;height:15px;color:var(--studio-muted);flex:0 0 auto}
.cm-event-lead{margin:0;font-size:14px;line-height:1.55;color:var(--studio-ink)}
.cm-event-going{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cm-event-actions{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}
.cm-going{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--cm-green)}
.cm-going svg{width:15px;height:15px}
.cm-event-h1{font-size:24px;line-height:1.25;font-weight:800;color:var(--studio-ink);margin:0}
.cm-back{margin-bottom:10px;text-decoration:none}
.cm-kicker{margin:0;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--studio-muted)}
.cm-next-step{display:flex;flex-direction:column;gap:8px;border-color:var(--cm-gold-line)}
.cm-next-step h2{margin:0;font-size:20px;font-weight:800;color:var(--studio-ink)}
.cm-next-step p{margin:0;line-height:1.55}
.cm-next-step.is-done{border-color:rgba(52,211,153,.4)}
.cm-onboard-progress{display:flex;flex-direction:column;gap:6px;margin:14px 0 4px}
.cm-onboard-stage{margin-top:16px}
.cm-onboard-stage .cm-section-title{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.cm-checklist{list-style:none;margin:0;padding:0;border:1px solid var(--studio-line);border-radius:var(--cm-radius);background:var(--studio-surface)}
.cm-check{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--studio-line)}
.cm-check:last-child{border-bottom:0}
.cm-check-mark{flex:0 0 auto;width:22px;height:22px;border-radius:999px;border:2px solid var(--studio-line);display:inline-flex;align-items:center;justify-content:center}
.cm-check-mark svg{width:13px;height:13px}
.cm-check.is-done .cm-check-mark{background:var(--cm-green);border-color:var(--cm-green);color:#fff}
.cm-check.is-next .cm-check-mark{border-color:var(--cm-gold)}
.cm-check-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cm-check-title{font-size:15px;font-weight:600;color:var(--studio-ink)}
.cm-check.is-done .cm-check-title{color:var(--studio-muted)}
.cm-rules{margin:0 0 14px;line-height:1.6;color:var(--studio-ink);font-size:15px}
.cm-rules li+li{margin-top:6px}
.cm-pop-tabs{padding:0 12px;border-bottom:1px solid var(--studio-line)}
.cm-pop-tabs .cm-tabs{border-bottom:0}
.cm-note-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Etap 4 (08.10): rozmowy. Panel dopasowany do ekranu (C.fitHeight -> .is-fitted), lista przewija się w środku,
   stany wysyłki, „Nowe wiadomości”, na telefonie bez opisu kanału i bez dolnego paska w trakcie pisania. */
.cm-chat.is-fitted{min-height:0;max-height:none}
.cm-dm.is-fitted{min-height:0}
.cm-dm.is-fitted .cm-dm-list,.cm-dm.is-fitted .cm-dm-pane{max-height:none;min-height:0}
.cm-chat-body{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
.cm-chat-body>.cm-chat-list,.cm-chat-body>.cm-dm-msgs{flex:1;min-height:0}
.cm-chat-new{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;background:var(--studio-ink);color:var(--studio-surface);font-size:13px;font-weight:700;box-shadow:0 6px 20px rgba(0,0,0,.3);cursor:pointer;z-index:2}
.cm-chat-new svg{width:14px;height:14px;transform:rotate(-90deg)}
.cm-chat-new[hidden]{display:none}
.cm-chat-msg.is-pending .cm-chat-text,.cm-bubble.is-pending{opacity:.65}
.cm-send-state{font-size:12px;color:var(--studio-muted);display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.cm-chat-msg.is-failed .cm-send-state,.cm-bubble.is-failed .cm-send-state{color:var(--cm-red)}
.cm-chat-msg.is-failed .cm-send-state .cm-link,.cm-bubble.is-failed .cm-send-state .cm-link{color:var(--studio-ink);text-decoration:underline}
.cm-bubble.is-failed{border:1px solid rgba(248,113,113,.45)}
.cm-bubble-meta{display:flex;align-items:center;gap:6px}
.cm-bubble-menu{padding:2px 4px;margin-left:auto;position:relative}
.cm-bubble-menu svg{width:14px;height:14px}
.cm-chat-img{flex:0 0 auto;align-self:flex-end}
/* Widok rozmowy kończy się nad dolnym paskiem - odstępy pod treścią (notatnik i społeczność) tylko wydłużałyby stronę. */
body.cm-area #main-app>main:has(.cm-shell.is-chat),body.cm-area #content:has(>.cm-shell.is-chat){padding-bottom:0}
@media (max-width:1023px){
  .cm-shell.is-chat .cm-page-sub,.cm-shell.is-chat #cm-channel .cm-chat-head{display:none}
  .cm-shell.is-chat:has(.cm-dm.is-open) .cm-page-head{display:none}
  body.cm-area.cm-typing .cm-bottom{display:none}
}
/* Na końcu arkusza (wroga recenzja etapu 2): późniejsze reguły bazowe nie mogą zbić celów dotyku.
   Cele dotyku min. 44 px na ekranach dotykowych, desktop bez zmian (recenzja Codexa 08.10). Na czacie
   powiększony tylko obszar trafienia menu wiadomości, żeby rozmowa nie rozjechała się w pionie. */
@media (pointer:coarse){
  .cm-btn,.cm-select-sm,.cm-page-actions .cm-btn{min-height:44px}
  .cm-chip{min-height:40px}
  .cm-post-menu,.cm-dialog-head .cm-close,.cm-banner .cm-close{min-width:44px;min-height:44px}
  .cm-act{min-height:44px}
  .cm-quick-send{width:44px;height:44px}
  .cm-pv-meta button,.cm-stats-likes,.cm-stats-comments,.cm-pv-all,.cm-more{min-height:36px}
  .cm-comment-tools button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 6px}
  body.cm-area #main-app>header .cm-header-btn{align-items:center;justify-content:center;min-width:44px;min-height:44px}
  .cm-chat-msg .cm-icon-btn::after{content:"";position:absolute;inset:-8px -6px}
  .cm-tab,.cm-event-actions .cm-link,.cm-back,.cm-onboard-stage+p .cm-link{min-height:44px}
  .cm-chat-img{min-width:44px;min-height:44px}.cm-send-state .cm-link,.cm-chat-new{min-height:44px}
  .cm-bubble-menu::after{content:"";position:absolute;inset:-12px -10px}
}
/* ---------- kompozytor jak w Circle/Facebooku (etap 4b, prośba Jana 08.10) ---------- */
.cm-c-form{gap:0}
.cm-c-main{position:relative;display:flex;flex-direction:column;gap:10px;padding-bottom:10px;min-width:0}
/* Przewija się .cm-c-main, nie jego dzieci: tytuł, szablon pytania i karty nie ściskają się do samego paddingu (audyt tablica-2). */
.cm-c-main>*{flex-shrink:0}
.cm-c-form .cm-c-title{flex:none;width:100%;padding:6px 0 6px 10px;margin:0;border:0;border-left:3px solid transparent;border-radius:0;background:transparent;color:var(--studio-ink);font-size:22px;font-weight:800;line-height:1.3;box-sizing:border-box}
.cm-c-form .cm-c-body{width:100%;min-height:150px;padding:6px 0 6px 10px;margin:0;border:0;border-left:3px solid transparent;border-radius:0;background:transparent;color:var(--studio-ink);font-size:16px;line-height:1.6;resize:vertical;box-sizing:border-box}
.cm-c-form .cm-c-title::placeholder{color:var(--studio-muted);font-weight:700;opacity:1}
.cm-c-form .cm-c-body::placeholder{color:var(--studio-muted);opacity:1}
.cm-c-form .cm-c-title:focus,.cm-c-form .cm-c-body:focus{outline:none}
/* Fokus w polach edytora: złota kreska z lewej (jak w edytorach), bez ramki wokół całego pola. */
.cm-c-form .cm-c-title:focus-visible,.cm-c-form .cm-c-body:focus-visible{outline:2px solid transparent;border-left-color:var(--cm-gold)}
.cm-c-tools{display:flex;align-items:center;gap:2px;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--studio-line)}
.cm-c-tool{width:40px;height:40px;padding:0;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;color:var(--studio-muted);background:none;cursor:pointer}
.cm-c-tool:hover{background:var(--studio-soft);color:var(--studio-ink)}
.cm-c-tool[aria-pressed="true"]{background:var(--studio-soft);color:var(--cm-gold)}
.cm-c-tool:focus-visible{outline:2px solid var(--cm-gold);outline-offset:1px}
.cm-c-tool svg{width:20px;height:20px}
.cm-c-gif{font-size:10px;font-weight:800;letter-spacing:.05em;line-height:1;padding:3px 3px 2px;border:1.6px solid currentColor;border-radius:4px}
.cm-c-foot{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--studio-line)}
.cm-c-foot .cm-audience{margin:0;flex:1 1 180px;min-width:0}
.cm-c-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.cm-c-actions .cm-c-status{margin-right:4px}
.cm-c-where{position:relative;min-width:0;max-width:100%}
.cm-c-where-btn{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-height:36px;padding:6px 10px 6px 12px;border-radius:999px;border:1px solid var(--studio-line);background:var(--studio-soft);color:var(--studio-ink);font-size:13px;font-weight:600;cursor:pointer}
.cm-c-where-btn span:not(.cm-sr){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-c-where-btn svg{width:15px;height:15px;flex:0 0 auto}
.cm-c-where-btn.is-empty{border-color:var(--cm-gold-line);color:var(--cm-gold)}
.cm-c-where-btn:focus-visible{outline:2px solid var(--cm-gold);outline-offset:2px}
.cm-c-where-list{position:absolute;left:0;bottom:calc(100% + 6px);z-index:6;width:min(360px,calc(100vw - 40px));max-height:min(360px,55vh);overflow-y:auto;margin:0;padding:6px;border:1px solid var(--studio-line);border-radius:14px;background:var(--studio-surface);box-shadow:0 18px 60px rgba(0,0,0,.35);min-width:0}
.cm-c-where-list[hidden]{display:none}
.cm-c-where-opt{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border-radius:10px;cursor:pointer}
.cm-c-where-opt:hover{background:var(--studio-soft)}
.cm-c-where-opt input{margin:3px 0 0;flex:0 0 auto}
.cm-c-where-opt:has(input:focus-visible){outline:2px solid var(--cm-gold);outline-offset:-2px}
.cm-c-where-ic{flex:0 0 auto;color:var(--studio-muted);margin-top:1px}
.cm-c-where-ic svg{width:16px;height:16px}
.cm-c-where-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.cm-c-where-name{font-size:14px;font-weight:600;color:var(--studio-ink)}
.cm-c-where-desc{font-size:12px;line-height:1.4;color:var(--studio-muted);overflow-wrap:anywhere}
.cm-c-drop{position:absolute;inset:0;z-index:3;display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:2px dashed var(--cm-gold);border-radius:14px;background:var(--studio-surface);color:var(--studio-ink);font-weight:700;font-size:15px;pointer-events:none}
.cm-c-drop svg{width:28px;height:28px;color:var(--cm-gold)}
.cm-c-main.is-drop .cm-c-drop{display:flex}
.cm-c-cover{position:relative;aspect-ratio:3/1;border-radius:14px;overflow:hidden;background:var(--studio-soft)}
.cm-c-cover img{width:100%;height:100%;object-fit:cover;display:block}
.cm-c-cover-x,.cm-thumb button{display:inline-flex;align-items:center;justify-content:center}
.cm-c-cover-x{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff}
.cm-c-cover-x svg,.cm-thumb button svg{width:14px;height:14px}
.cm-thumb button{width:22px;height:22px}
.cm-expand{display:none}
@media (min-width:640px){.cm-dialog-head .cm-expand{margin-left:auto}.cm-dialog-head .cm-expand+.cm-close{margin-left:0}}
@media (min-width:640px){
  .cm-expand{display:inline-flex}
  .cm-dialog.is-expanded{max-width:min(1100px,calc(100vw - 32px));height:calc(100vh - 32px);height:calc(100dvh - 32px);max-height:none;display:flex;flex-direction:column}
  .cm-dialog.is-expanded #cm-modal-body{flex:1;display:flex;flex-direction:column;min-height:0}
  .cm-dialog.is-expanded .cm-c-form{flex:1;min-height:0}
  .cm-dialog.is-expanded .cm-c-main{flex:1;overflow-y:auto}
  .cm-dialog.is-expanded .cm-c-body{flex:1;min-height:240px}
  /* Zwykłe okno kompozytora: przewija się treść (.cm-c-main), pasek narzędzi i stopka z „Opublikuj” zostają w oknie (audyt watek-1). */
  .cm-dialog.is-compose{display:flex;flex-direction:column}
  .cm-dialog.is-compose>.cm-dialog-head{flex:none}
  .cm-dialog.is-compose #cm-modal-body{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
  .cm-dialog.is-compose .cm-c-form{flex:1 1 auto;min-height:0}
  .cm-dialog.is-compose .cm-c-form>:not(.cm-c-main){flex-shrink:0}
  .cm-dialog.is-compose .cm-c-main{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
}
/* Niskie okno (telefon poziomo, powiększenie 200%): stopka ma ok. 230 px, na treść nie zostałoby miejsca. Przewija się
   całe okno, a do jego dołu przykleja się sam wiersz „Anuluj / Opublikuj” (stopka bez własnego pudełka, więc wiersz
   trzyma się formularza przez całe przewijanie). Okno i wiersz są wtedy nieprzezroczyste. Dolny odstęp okna (24 px)
   przechodzi do wiersza: sticky liczy się od paddingu okna, więc z nim pod wierszem przewijał się pas przeciętej treści. */
@media (min-width:640px) and (max-height:560px){
  html body.cm-area .cm-dialog.is-compose:not(.is-expanded){display:block;padding-bottom:0;background:var(--ios-elev,var(--studio-surface));-webkit-backdrop-filter:none;backdrop-filter:none}
  .cm-dialog.is-compose:not(.is-expanded) .cm-c-main{overflow:visible}
  .cm-dialog.is-compose:not(.is-expanded) .cm-c-foot{display:contents}
  .cm-dialog.is-compose:not(.is-expanded) .cm-c-foot>*{margin-top:10px}
  html body.cm-area .cm-dialog.is-compose:not(.is-expanded) .cm-c-actions{position:sticky;bottom:0;z-index:2;justify-content:flex-end;margin:10px 0 0;padding:8px 0 24px;background:var(--ios-elev,var(--studio-surface));box-shadow:0 -.5px 0 var(--ios-sep,var(--studio-line))}
}
@media (max-width:639px){
  .cm-dialog.is-full .cm-c-form{flex:1;min-height:0}
  .cm-dialog.is-full .cm-c-main{flex:1;overflow-y:auto}
  .cm-dialog.is-full .cm-c-foot{position:sticky;bottom:0;background:var(--studio-surface);padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  .cm-c-form .cm-c-title{font-size:20px}
  .cm-c-actions{width:100%}
  .cm-c-actions .cm-c-status{flex:1;min-width:0}
}
/* Okładka wpisu w feedzie i w widoku wpisu: na całą szerokość karty, nad autorem. */
.cm-post-cover{display:block;margin:-16px -16px 0;aspect-ratio:3/1;overflow:hidden;border-radius:var(--cm-radius) var(--cm-radius) 0 0;background:var(--studio-soft);cursor:zoom-in}
.cm-post-cover img{width:100%;height:100%;object-fit:cover;display:block}
.cm-post-cover-anim{margin:-16px -16px 0;height:auto}
.cm-post-cover-anim .cm-post-cover{margin:0;width:100%}

/* ---------- emoji (etap 4b) ---------- */
.cm-emoji-pop{position:fixed;z-index:95;width:min(352px,calc(100vw - 16px));max-height:min(430px,calc(100vh - 16px));display:flex;flex-direction:column;background:var(--studio-surface);border:1px solid var(--studio-line);border-radius:16px;box-shadow:0 18px 60px rgba(0,0,0,.4);overflow:hidden}
.cm-emoji-pop.is-sheet{left:0;right:0;bottom:0;top:auto;width:auto;height:min(62vh,440px);max-height:min(62vh,440px);border-radius:18px 18px 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom)}
.cm-emoji-head{padding:10px 10px 6px}
.cm-emoji-head .cm-input{width:100%;min-height:38px;font-size:14px}
.cm-emoji-tabs{display:flex;gap:2px;padding:0 8px 6px;border-bottom:1px solid var(--studio-line)}
.cm-emoji-tab{width:36px;height:32px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;color:var(--studio-muted);background:none;cursor:pointer}
.cm-emoji-tab:hover{background:var(--studio-soft);color:var(--studio-ink)}
.cm-emoji-tab:focus-visible{outline:2px solid var(--cm-gold);outline-offset:-2px}
.cm-emoji-tab svg{width:17px;height:17px}
.cm-emoji-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:2px 8px 8px}
.cm-emoji-label{margin:8px 4px 4px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--studio-muted)}
.cm-emoji-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:2px}
.cm-emoji-cell{height:38px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-size:22px;line-height:1;background:none;cursor:pointer;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.cm-emoji-cell:hover{background:var(--studio-soft)}
.cm-emoji-cell:focus-visible{outline:2px solid var(--cm-gold);outline-offset:-2px;background:var(--studio-soft)}
.cm-emoji-none{margin:16px 8px;font-size:13px;color:var(--studio-muted)}
.cm-emoji-hint{margin:0;padding:6px 12px;font-size:11px;color:var(--studio-muted);border-top:1px solid var(--studio-line)}
.cm-emoji-btn svg{width:20px;height:20px}
@media (max-width:639px){.cm-c-tools{gap:0;justify-content:space-between}}
@media (pointer:coarse){
  .cm-emoji-hint{display:none}
  .cm-emoji-grid{grid-template-columns:repeat(auto-fill,minmax(44px,1fr))}
  .cm-emoji-cell{height:44px;font-size:25px}
  .cm-c-tool{width:44px;height:44px}
}
/* Animacje (GIF) w galerii: przycisk pauzy w rogu, ta sama siatka co zdjęcia. */
.cm-anim{position:relative;display:block;min-width:0;height:100%}
.cm-anim-btn{position:absolute;left:8px;bottom:8px;display:inline-flex;align-items:center;gap:4px;min-height:28px;padding:4px 9px;border-radius:999px;background:rgba(0,0,0,.66);color:#fff;font-size:11px;font-weight:800;letter-spacing:.05em;cursor:pointer}
.cm-anim-btn svg{width:12px;height:12px}
.cm-anim-btn:focus-visible{outline:2px solid var(--cm-gold);outline-offset:2px}
@media (pointer:coarse){.cm-anim-btn{min-height:36px;padding:6px 12px}}
/* GIF z GIPHY w treści i w podglądzie kompozytora; okno wyboru (te same ramy co emoji). */
.cm-gif{margin:0;display:inline-block;width:min(100%,360px);border-radius:12px;overflow:hidden;background:var(--studio-soft);position:relative}
.cm-gif img{display:block;width:100%;height:auto;max-height:360px;object-fit:contain}
.cm-gif figcaption{position:absolute;right:8px;bottom:8px;padding:2px 6px;border-radius:6px;background:rgba(0,0,0,.6);color:#fff;font-size:10px;font-weight:800;letter-spacing:.06em}
.cm-c-gifprev{position:relative;display:inline-block;max-width:min(100%,280px)}
.cm-c-gifprev .cm-gif{max-width:100%}
.cm-gif-pop{width:min(420px,calc(100vw - 16px))}
.cm-gif-grid{flex:1;min-height:180px;overflow-y:auto;overscroll-behavior:contain;padding:8px;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px;align-content:start}
.cm-gif-grid[aria-busy="true"]{opacity:.6}
.cm-gif-cell{display:block;padding:0;border-radius:10px;overflow:hidden;background:var(--studio-soft);cursor:pointer;aspect-ratio:4/3}
.cm-gif-cell img{width:100%;height:100%;object-fit:cover;display:block}
.cm-gif-cell:focus-visible{outline:2px solid var(--cm-gold);outline-offset:2px}
.cm-gif-none{grid-column:1/-1;margin:16px 4px;font-size:13px;color:var(--studio-muted)}
.cm-gif-by{margin:0;padding:6px 12px;font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--studio-muted);border-top:1px solid var(--studio-line);text-align:right}
/* ---------- etap 5: kontrast komunikatów i cele dotyku (wroga recenzja przed pilotażem) ---------- */
/* Komunikaty notatnika (toast) w społeczności: pełne tła, biały tekst min. 4,5:1 w obu motywach (półprzezroczyste
   tła notatnika dawały 2,1-2,7:1). Kolor z arkusza, bo toast ustawia tło w atrybucie style. */
body.cm-area #notatnik-toast[data-type="success"]{background:#15803d!important}
body.cm-area #notatnik-toast[data-type="error"]{background:#b91c1c!important}
body.cm-area #notatnik-toast[data-type="warning"]{background:#a16207!important}
body.cm-area #notatnik-toast[data-type="info"]{background:#1d4ed8!important}
/* Długi komunikat na telefonie: szerokość według treści do szerokości ekranu (było: wąska kolumna od środka ekranu),
   ikona bez ściskania do kropki. */
body.cm-area #notatnik-toast{width:max-content;max-width:calc(100vw - 32px)}
body.cm-area #notatnik-toast svg{flex:0 0 auto}
/* Cele dotyku min. 44x44 px tam, gdzie wcześniejsze reguły ich nie objęły. Obszar trafienia powiększa pseudo-element,
   wygląd zostaje; powiększenie nie wchodzi na sąsiednie cele (miniatura: tylko do środka kafelka). */
@media (pointer:coarse){
  .cm-switch::before{content:"";position:absolute;inset:-12px -3px} /* od pola wewnątrz ramki 1 px: 44x44 */
  .cm-switch-row{min-height:44px}
  .cm-thumb button{width:28px;height:28px;top:2px;right:2px}
  .cm-thumb button::after{content:"";position:absolute;top:-2px;right:-2px;bottom:-14px;left:-14px}
  .cm-c-cover-x{width:44px;height:44px;top:6px;right:6px}
  .cm-emoji-tabs{flex:0 0 auto}
  .cm-emoji-tab{flex:0 0 44px;width:44px;height:44px}
  .cm-article-thumb .cm-link,.cm-article-thumb-label{min-height:44px}
}

/* ---------- dodatki: reakcje, podgląd linku, dokumenty, wyszukiwanie ---------- */
.cm-react{display:inline-flex;align-items:stretch}
.cm-react .cm-act,.cm-creact>button{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none} /* iOS: przytrzymanie = wybór reakcji, nie zaznaczanie tekstu (Safari wymaga prefiksu) */
.cm-react-more{display:inline-flex;align-items:center;justify-content:center;min-width:28px;padding:0 4px;border-radius:8px;background:none;color:var(--studio-muted);cursor:pointer}
.cm-react-more:hover{background:var(--studio-soft);color:var(--studio-ink)}
.cm-react-more:focus-visible,.cm-react-pop button:focus-visible{outline:2px solid var(--cm-gold);outline-offset:1px}
.cm-react-emoji{font-size:17px;line-height:1}
.cm-react-top{font-size:14px;line-height:1;margin-right:-2px}
.cm-react-pop{position:fixed;z-index:96;display:flex;gap:2px;padding:6px;border-radius:999px;background:var(--studio-surface);border:1px solid var(--studio-line);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.cm-react-pop button{width:40px;height:40px;border-radius:999px;font-size:24px;line-height:1;background:none;cursor:pointer;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;transition:transform .12s}
.cm-react-pop button:hover{transform:scale(1.18)}
.cm-react-pop button[aria-checked="true"]{background:var(--cm-gold-soft)}
.cm-react-sum{display:flex;flex-wrap:wrap;gap:12px;margin:0;font-size:13px;color:var(--studio-muted)}
.cm-react-person{display:flex;align-items:center;gap:8px}
.cm-react-person .cm-person{flex:1;min-width:0}
.cm-react-of{font-size:18px;line-height:1}
.cm-creact{display:inline-flex;align-items:center}
.cm-creact .cm-react-more{min-width:24px}
.cm-creact-n{display:inline-flex;align-items:center;gap:2px}
.cm-link-card{position:relative;border:1px solid var(--studio-line);border-radius:12px;overflow:hidden;background:var(--studio-soft)}
.cm-link-card a{display:flex;flex-direction:column;color:inherit;text-decoration:none}
.cm-link-card a:hover .cm-link-title{text-decoration:underline}
.cm-link-card a:focus-visible{outline:2px solid var(--cm-gold);outline-offset:-2px}
.cm-link-img{display:block;aspect-ratio:1.91/1;background:var(--studio-line);overflow:hidden}
.cm-link-img img{width:100%;height:100%;object-fit:cover;display:block}
.cm-link-text{display:flex;flex-direction:column;gap:2px;padding:10px 12px;min-width:0;overflow-wrap:anywhere}
.cm-link-host{font-size:12px;color:var(--studio-muted)}
.cm-link-title{font-weight:700;font-size:15px;color:var(--studio-ink);line-height:1.35}
.cm-link-desc{font-size:13px;color:var(--studio-muted);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cm-link-x{position:absolute;top:6px;right:6px;background:#111827;color:#fff;border-radius:999px}
.cm-link-card.is-compact a{flex-direction:row;align-items:stretch}
.cm-link-card.is-compact .cm-link-img{flex:0 0 120px;aspect-ratio:auto;min-height:84px}
.cm-link-card.is-compact .cm-link-text{padding-right:48px}
.cm-docs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.cm-doc{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--studio-line);border-radius:10px;background:var(--studio-soft);min-width:0}
.cm-doc>svg{flex:0 0 auto;color:var(--cm-gold)}
.cm-doc-name{flex:1;min-width:0;font-size:14px;font-weight:600;color:var(--studio-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-doc-size{font-size:12px;color:var(--studio-muted);white-space:nowrap}
.cm-doc-get{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:700;color:var(--cm-gold);text-decoration:none;white-space:nowrap}
.cm-doc-get:hover{text-decoration:underline}
.cm-chat-find{margin-left:4px}
/* Lupa kanału w nagłówku strony: na telefonie nagłówek panelu czatu jest ukryty (audyt dodatków r1, M7). */
@media (min-width:1024px){.cm-chat-find-top{display:none}}
.cm-chat-search{border-bottom:1px solid var(--studio-line);padding:8px 10px;display:flex;flex-direction:column;gap:6px;max-height:50%;overflow-y:auto}
.cm-chat-search-bar,.cm-dm-search{display:flex;align-items:center;gap:6px}
.cm-chat-search-bar .cm-input,.cm-dm-search .cm-input{flex:1;min-width:0;min-height:38px;font-size:14px}
.cm-dm-search{padding:8px;border-bottom:1px solid var(--studio-line)}
.cm-hit-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.cm-hit{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;padding:8px 10px;border-radius:10px;background:none;cursor:pointer;color:var(--studio-ink)}
.cm-hit:hover,.cm-hit:focus-visible{background:var(--studio-soft)}
.cm-hit:focus-visible{outline:2px solid var(--cm-gold);outline-offset:-2px}
.cm-hit-meta{font-size:12px;color:var(--studio-muted)}
.cm-hit-text{font-size:14px;line-height:1.45;overflow-wrap:anywhere}
.cm-hit mark{background:var(--cm-gold-soft);color:inherit;font-weight:700;border-radius:3px;padding:0 1px}
.cm-bubble.is-hit{box-shadow:0 0 0 2px var(--cm-gold)}
@media (pointer:coarse){
  .cm-react-more,.cm-creact .cm-react-more{min-width:44px;min-height:44px}
  .cm-chat-find-top{min-width:44px;min-height:44px}
  .cm-react-pop button{width:46px;height:46px}
  .cm-hit{min-height:44px}
}
/* Pytanie bez nazwiska (etap 6): tarcza zamiast inicjałów, znacznik dla autora i moderacji, wybór w kompozytorze */
.cm-avatar-anon{background:linear-gradient(135deg,#1e2a44,#2b3d63);color:var(--cm-gold)}
.cm-avatar-anon svg{width:55%;height:55%}
.cm-flag-anon{display:inline-flex;align-items:center;gap:4px;color:var(--cm-blue);border-color:rgba(96,165,250,.35)}
.cm-flag-anon svg{width:11px;height:11px}
.cm-anon{display:flex;gap:10px;align-items:flex-start;margin:10px 0 0;padding:10px 12px;border:1px solid var(--studio-line);border-radius:12px;cursor:pointer}
.cm-anon input{margin-top:3px;width:18px;height:18px;accent-color:var(--cm-gold);flex:0 0 auto}
.cm-anon strong{display:flex;align-items:center;gap:6px;font-size:14px}
.cm-anon strong svg{width:15px;height:15px;color:var(--cm-gold)}
.cm-anon small{display:block;margin-top:2px;font-size:12px;line-height:1.45;color:var(--studio-muted)}
.cm-anon:has(input:checked){border-color:var(--cm-gold-line);background:var(--cm-gold-soft)}
.cm-anon:focus-within{outline:2px solid var(--cm-gold);outline-offset:2px}
/* Etap 6a: szybkie poprawki. Nagłówek z fokusem ustawionym przez widok (C.focusHeading, czytnik ekranu) bez ramki:
   wyglądała jak błąd po wejściu na wpis; elementy klikalne mają własne :focus-visible. */
.cm-shell h1[tabindex="-1"]:focus,.cm-shell h2[tabindex="-1"]:focus{outline:none}
/* Telefon: chipy przestrzeni i szybkie rodzaje wpisu w jednym przewijanym rzędzie z wygaszoną krawędzią (sygnał,
   że jest dalej); odstęp na końcu, żeby ostatni element dało się przewinąć poza wygaszenie. Niższe pole wpisu. */
@media (max-width:1023px){
  .cm-chips{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
  .cm-chips::after{content:'';flex:0 0 24px}
}
@media (max-width:639px){
  .cm-prompt{padding:10px 12px;gap:6px}
  .cm-prompt-types{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -12px;padding:0 12px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .cm-prompt-types::-webkit-scrollbar{display:none}
  .cm-prompt-types::after{content:'';flex:0 0 20px}
  .cm-prompt-types button{flex:0 0 auto;white-space:nowrap;padding:6px 10px}
}
/* Etap 6a: świętowanie - okno z gratulacjami od Jana, konfetti nad wszystkim (bez kliknięć). */
.cm-celebrate{display:flex;flex-direction:column;gap:10px;font-size:15px;line-height:1.55;color:var(--studio-ink)}
.cm-celebrate p{margin:0}
.cm-celebrate-action{padding:10px 12px;border-radius:12px;background:var(--cm-gold-soft);border:1px solid var(--cm-gold-line);font-weight:600}
.cm-celebrate-also{font-size:13px;color:var(--studio-muted)}
.cm-celebrate-sign{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px}
.cm-celebrate-sign small{display:block;font-weight:500;font-size:12px;color:var(--studio-muted)}
.cm-celebrate-mono{flex:0 0 auto;width:36px;height:36px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#0b1220;background:linear-gradient(135deg,#FFD23F,#FFA500)}
.cm-celebrate-buttons{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:4px}
.cm-confetti{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:89}
/* Etap 6a: ranking - osobisty postęp, zasady punktów u góry, podium. */
.cm-progress-card{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.cm-progress-level{font-weight:800;color:var(--studio-ink)}
.cm-week{flex:0 0 auto;margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;text-align:right}
.cm-week strong{font-size:22px;color:var(--cm-gold)}
.cm-week span{font-size:11px;font-weight:600;color:var(--studio-muted);white-space:nowrap}
.cm-week-parts{display:flex;flex-wrap:wrap;gap:6px}
.cm-week-parts span{font-size:12px;padding:4px 10px;border-radius:999px;background:var(--studio-soft);color:var(--studio-muted)}
.cm-week-parts strong{color:var(--studio-ink)}
.cm-rank-next{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 12px;border-radius:12px;border:1px solid var(--cm-gold-line);background:var(--cm-gold-soft);color:var(--studio-ink);cursor:pointer}
.cm-rank-next:hover{border-color:var(--cm-gold)}
.cm-rank-next:focus-visible{outline:2px solid var(--cm-gold);outline-offset:2px}
.cm-rank-next>span{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cm-rank-next small{font-size:12px;color:var(--studio-muted)}
.cm-rank-next svg{flex:0 0 auto;color:var(--cm-gold)}
.cm-rank-next-arrow{transform:rotate(180deg)}
.cm-earn{margin-bottom:12px}
.cm-earn h3{margin:0 0 8px}
.cm-earn-list{display:flex;flex-wrap:wrap;gap:6px}
.cm-earn-chip{display:inline-flex;align-items:baseline;gap:5px;font-size:12.5px;padding:5px 10px;border-radius:999px;border:1px solid var(--studio-line);color:var(--studio-muted)}
.cm-earn-chip strong{color:var(--cm-gold)}
.cm-earn-chip small{font-size:11px;opacity:.85}
.cm-earn-more{margin-top:10px}
.cm-earn-more summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--studio-muted)}
.cm-earn-more summary:hover{color:var(--studio-ink)}
.cm-earn-more summary:focus-visible{outline:2px solid var(--cm-gold);outline-offset:2px;border-radius:6px}
.cm-earn-more[open] summary{margin-bottom:8px}
.cm-earn-more h4{margin:12px 0 6px;font-size:13px;color:var(--studio-ink)}
.cm-earn-more p{margin:10px 0 0}
.cm-podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:8px;margin:6px 0 12px}
.cm-podium-place{grid-row:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.cm-podium-place.is-1{grid-column:2}
.cm-podium-place.is-2{grid-column:1}
.cm-podium-place.is-3{grid-column:3}
.cm-podium-who{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;max-width:100%;background:none;color:var(--studio-ink);cursor:pointer}
div.cm-podium-who{cursor:default}
.cm-podium-who:focus-visible{outline:2px solid var(--cm-gold);outline-offset:3px;border-radius:12px}
.cm-podium-name{font-weight:700;font-size:13px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-podium-pts{font-size:12px;font-weight:700;color:var(--studio-muted)}
.cm-podium-step{width:100%;display:flex;align-items:flex-start;justify-content:center;padding-top:8px;border-radius:12px 12px 4px 4px;font-size:20px;font-weight:800;background:var(--studio-soft);border:1px solid var(--studio-line);color:var(--studio-muted)}
.cm-podium-place.is-1 .cm-podium-step{height:88px;background:linear-gradient(180deg,var(--cm-gold-soft),transparent);border-color:var(--cm-gold-line);color:var(--cm-gold)}
.cm-podium-place.is-2 .cm-podium-step{height:64px}
.cm-podium-place.is-3 .cm-podium-step{height:48px}
/* Złoty pierścień 1. miejsca tylko bez ramki poziomu - ramka (złota, podwójna, aura) ma pierwszeństwo (audyt brak3-3). */
.cm-podium-place.is-1 .cm-avatar:not([class*="cm-frame-"]){box-shadow:0 0 0 3px var(--cm-gold)}
.cm-podium-place.is-me .cm-podium-name{color:var(--cm-gold)}
.cm-rank.is-me{background:var(--cm-gold-soft);border-radius:10px}
@media (max-width:480px){.cm-podium .cm-avatar-lg{width:52px;height:52px;font-size:18px}.cm-podium-place.is-1 .cm-podium-step{height:72px}.cm-podium-place.is-2 .cm-podium-step{height:54px}.cm-podium-place.is-3 .cm-podium-step{height:40px}}
/* Ranking na telefonie: nagłówek karty postępu bez łamania (wynik tygodnia obok imienia), zasady punktów w jednym
   przewijanym rzędzie z wygaszoną krawędzią - podium widać bez długiego przewijania. */
.cm-progress-card>.cm-row{flex-wrap:nowrap;align-items:flex-start}
@media (max-width:639px){
  .cm-week strong{font-size:18px}
  .cm-earn-list{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -14px;padding:0 14px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .cm-earn-list::-webkit-scrollbar{display:none}
  .cm-earn-list::after{content:'';flex:0 0 20px}
  .cm-earn-chip{flex:0 0 auto;white-space:nowrap}
}
/* Etap 6b: „Pomóż mi to napisać” w kompozytorze - przycisk pod treścią, propozycja do wstawienia albo odrzucenia. */
.cm-assist{display:flex;flex-direction:column;gap:8px;margin:2px 0 4px}
.cm-assist-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.cm-assist-btn{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:6px 12px;border-radius:999px;border:1px solid var(--cm-gold-line);background:var(--cm-gold-soft);color:var(--studio-ink);font-size:13px;font-weight:700;cursor:pointer}
.cm-assist-btn svg{width:16px;height:16px;color:var(--cm-gold)}
.cm-assist-btn:hover{border-color:var(--cm-gold)}
.cm-assist-btn:focus-visible{outline:2px solid var(--cm-gold);outline-offset:2px}
.cm-assist-btn:disabled{opacity:.7;cursor:progress}
.cm-assist-btn.is-busy svg{animation:cm-assist-spin 1.2s linear infinite}
@keyframes cm-assist-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.cm-assist-btn.is-busy svg{animation:none}}
.cm-assist-note{font-size:12px;color:var(--studio-muted)}
.cm-assist-wait{margin:0;font-size:13px;color:var(--studio-muted)}
.cm-assist-card{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:12px;border:1px solid var(--cm-gold-line);background:var(--studio-soft)}
.cm-assist-card .cm-kicker{margin:0}
.cm-assist-title{margin:0;font-weight:800;color:var(--studio-ink)}
.cm-assist-body{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.55;color:var(--studio-ink);max-height:260px;overflow-y:auto}
.cm-assist-tips-h{margin:2px 0 0;font-size:12px;font-weight:700;color:var(--studio-muted)}
.cm-assist-tips{margin:0;padding-left:18px;font-size:13px;line-height:1.5;color:var(--studio-ink)}
.cm-assist-actions{display:flex;flex-wrap:wrap;gap:8px}
.cm-assist-done{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0;font-size:13px;color:var(--studio-muted)}
.cm-assist-done svg{color:var(--cm-green)}
/* Etap 6b: okładka profilu (gotowe, w barwach marki - ciemne, bez pasteli) i „Zapytaj mnie o…”. */
.cm-cover-domyslna{background:linear-gradient(135deg,#0b1220 0%,#14213d 55%,#1b2b4f 100%)}
.cm-cover-granat{background:linear-gradient(135deg,#0b1220 0%,#1b2b4f 55%,#2f5ea8 100%)}
.cm-cover-zloto{background:linear-gradient(135deg,#0b1220 0%,#3d2a08 55%,#b8860b 100%)}
.cm-cover-zorza{background:linear-gradient(135deg,#0b1220 0%,#14365c 50%,#1f7a6c 100%)}
.cm-cover-siec{background:radial-gradient(circle at 1px 1px,rgba(255,210,63,.28) 1px,transparent 0) 0 0/18px 18px,linear-gradient(135deg,#0b1220,#1b2b4f)}
.cm-cover-zmierzch{background:linear-gradient(120deg,#0b1220 0%,#2a1f4f 55%,#7c2d12 100%)}
.cm-cover-grafit{background:linear-gradient(135deg,#111827 0%,#1f2937 55%,#374151 100%)}
.cm-profile.has-cover{padding-top:0;overflow:hidden}
.cm-profile-cover{height:112px;margin:0 -14px;border-bottom:1px solid var(--studio-line)}
.cm-profile.has-cover .cm-profile-head{margin-top:-44px}
.cm-profile.has-cover .cm-profile-head>.cm-avatar,.cm-profile.has-cover .cm-profile-head>.cm-avatar-wrap>.cm-avatar{box-shadow:0 0 0 4px var(--studio-surface)}
.cm-profile.has-cover .cm-profile-id{padding-top:50px}
.cm-profile.has-cover .cm-profile-actions{padding-top:52px}
@media (max-width:640px){.cm-profile-cover{height:84px}.cm-profile.has-cover .cm-profile-head{margin-top:-30px}.cm-profile.has-cover .cm-profile-id{padding-top:34px}.cm-profile.has-cover .cm-profile-actions{padding-top:0}}
.cm-askme{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
.cm-askme-label{font-size:12px;font-weight:700;color:var(--studio-muted);margin-right:2px}
.cm-askme-chip{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;border:1px solid var(--cm-gold-line);background:var(--cm-gold-soft);color:var(--studio-ink);font-size:12.5px;font-weight:600;text-decoration:none}
.cm-askme-chip:hover{border-color:var(--cm-gold)}
.cm-askme-chip:focus-visible{outline:2px solid var(--cm-gold);outline-offset:2px}
.cm-member-askme{margin:0;font-size:12.5px;color:var(--studio-ink)}
.cm-member-askme span{color:var(--studio-muted);font-weight:700}
.cm-covers{border:0;margin:0;padding:0;min-width:0}
.cm-covers-list{display:flex;flex-wrap:wrap;gap:8px}
.cm-cover-opt{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;font-size:12px;color:var(--studio-muted)}
.cm-cover-opt input{position:absolute;opacity:0;width:1px;height:1px}
.cm-cover-swatch{display:block;width:72px;height:40px;border-radius:10px;border:2px solid var(--studio-line)}
.cm-cover-opt input:checked+.cm-cover-swatch{border-color:var(--cm-gold);box-shadow:0 0 0 2px var(--cm-gold-soft)}
.cm-cover-opt input:checked~.cm-cover-name{color:var(--studio-ink);font-weight:700}
.cm-cover-opt input:focus-visible+.cm-cover-swatch{outline:2px solid var(--cm-gold);outline-offset:2px}
/* Etap 6b: wątek czatu w kolumnie obok kanału (od 1024 px); węższy ekran - okno jak dotąd. */
@media (min-width:1024px){
  .cm-shell.cm-layout.is-full.has-thread{grid-template-columns:220px minmax(0,1fr) 340px}
  .cm-thread-side{position:sticky;top:88px;align-self:start;display:flex;flex-direction:column;max-height:calc(100vh - 104px);background:var(--studio-surface);border:1px solid var(--studio-line);border-radius:var(--cm-radius);overflow:hidden;min-width:0}
  .cm-thread-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid var(--studio-line)}
  .cm-thread-head h2{margin:0;font-size:15px;font-weight:800;color:var(--studio-ink)}
  .cm-thread-head h2:focus{outline:none}
  /* Przewija się sama lista odpowiedzi (nowa odpowiedź przewija ją na dół), pole wysyłki zostaje na dole kolumny. */
  .cm-thread-body{flex:1;min-height:0;display:flex;flex-direction:column;padding:12px;overflow:hidden}
  .cm-thread-body>.cm-stack{flex:1;min-height:0;display:flex;flex-direction:column}
  .cm-thread-side #cm-thread-list{flex:1;min-height:80px;max-height:none!important;overflow-y:auto!important}
}
@media (min-width:1280px){.cm-shell.cm-layout.is-full.has-thread{grid-template-columns:220px minmax(0,1fr) 380px}}
@media (max-width:1023px){.cm-thread-side{display:none}}
/* Etap 6b: hashtagi w prawej kolumnie zwinięte do 6. */
.cm-hashtags.is-collapsed .cm-more-tag{display:none}
/* Etap 6b: panel rytuałów - dzień, godzina i przestrzeń w jednym rzędzie (na telefonie pod sobą). */
.cm-r-when{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
/* Etap 7: Bonifacy w społeczności - awatar z iskrą, polecone lekcje i informacja o AI pod odpowiedzią. */
.cm-avatar-bot{background:linear-gradient(135deg,#1b2b4f,#2f5ea8);color:#FFD23F}
.cm-avatar-bot svg{width:55%;height:55%}
.cm-bot-lessons{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.cm-bot-note{margin:8px 0 0;font-size:12px;color:var(--studio-muted)}
/* Etap 7: podsumowanie rozmowy (AI) nad komentarzami. */
.cm-summary{display:flex;flex-direction:column;gap:8px;border-color:var(--cm-gold-line)}
.cm-summary .cm-kicker{display:inline-flex;align-items:center;gap:6px}
.cm-summary .cm-kicker svg{width:14px;height:14px;color:var(--cm-gold)}
.cm-summary-points{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px;font-size:14px;line-height:1.5;color:var(--studio-ink)}
/* Etap 7: poranny raport w panelu admina. */
.cm-brief h4{margin:12px 0 6px;font-size:13px;color:var(--studio-ink)}
.cm-brief h4:first-child{margin-top:0}
.cm-brief-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px;font-size:14px}
/* Nastrój i zajęcie (10.10, jak na Facebooku): przy nazwisku we wpisie, w oknie wpisu i w okienku wyboru. */
.cm-mood{display:inline-flex;align-items:center;gap:5px;min-width:0;max-width:100%;font-size:13px;line-height:1.35;color:var(--studio-muted)}
.cm-mood-emoji{flex:0 0 auto;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:15px;line-height:1}
.cm-mood-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-mood-text strong{color:var(--studio-ink);font-weight:600}
.cm-c-mood{display:flex;align-items:center;gap:4px;margin:0 0 8px;min-width:0}
.cm-c-mood-pick{display:inline-flex;align-items:center;min-width:0;max-width:calc(100% - 40px);padding:6px 12px;border-radius:999px;border:1px solid var(--cm-gold-line);background:var(--cm-gold-soft);cursor:pointer}
.cm-c-mood-pick .cm-mood{font-size:14px;color:var(--studio-ink)}
.cm-c-mood-x svg{width:16px;height:16px}
.cm-mood-pop{position:fixed;z-index:95;width:min(392px,calc(100vw - 16px));max-height:min(470px,calc(100vh - 16px));display:flex;flex-direction:column;overflow:hidden;background:var(--studio-surface);border:1px solid var(--studio-line);border-radius:16px;box-shadow:0 18px 60px rgba(0,0,0,.45)}
.cm-mood-pop.is-sheet{left:0;right:0;bottom:0;top:auto;width:auto;max-height:min(72vh,540px);border-radius:18px 18px 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom)}
.cm-mood-head{display:flex;align-items:center;gap:8px;padding:6px 8px 0 10px;border-bottom:1px solid var(--studio-line)}
.cm-mood-tabs{display:flex;gap:2px;flex:1;min-width:0}
.cm-mood-tab{padding:10px 12px;font-size:14px;font-weight:700;color:var(--studio-muted);background:none;border-bottom:2px solid transparent;cursor:pointer}
.cm-mood-tab:hover{color:var(--studio-ink)}
.cm-mood-tab[aria-selected="true"]{color:var(--studio-ink);border-bottom-color:var(--cm-gold)}
.cm-mood-body{overflow-y:auto;overscroll-behavior:contain;padding:10px}
.cm-mood-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.cm-mood-opt{display:flex;align-items:center;gap:10px;min-width:0;min-height:44px;padding:8px 10px;border-radius:12px;border:1px solid transparent;background:none;color:var(--studio-ink);font-size:14px;font-weight:500;text-align:left;cursor:pointer;transition:background .15s,border-color .15s}
.cm-mood-opt:hover{background:var(--studio-soft)}
.cm-mood-opt:focus-visible{outline:2px solid var(--cm-gold);outline-offset:-2px}
.cm-mood-opt.is-on{background:var(--cm-gold-soft);border-color:var(--cm-gold-line);font-weight:700}
.cm-mood-opt .cm-mood-emoji{width:28px;font-size:22px;text-align:center}
.cm-mood-word{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-mood-what{display:flex;flex-direction:column;gap:12px;padding:4px}
.cm-mood-what-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0;font-size:15px;color:var(--studio-ink)}
.cm-mood-what-head .cm-mood-emoji{font-size:22px}
.cm-mood-what-head .cm-muted{font-size:12px;font-weight:400}
.cm-mood-what-actions{display:flex;justify-content:space-between;gap:8px}
.cm-mood-what-actions svg{width:14px;height:14px}
@media (max-width:639px){.cm-mood-text{white-space:normal}}

/* Wygląd premium (10.10, prośba Jana: „bardziej premium, z cieniami”): głębia z cieni i światła na krawędziach, złoto
   tylko jako akcent (aktywne, główne akcje), neutralne linie zamiast złotych w ciemnym motywie. Tylko wygląd - bez zmian
   układu i rozmiarów; animacje wyłączone przy prefers-reduced-motion. */
:root{
  --cm-elev-1:0 1px 2px rgba(0,0,0,.32),0 1px 1px rgba(0,0,0,.2);
  --cm-elev-2:0 1px 2px rgba(0,0,0,.28),0 12px 32px -14px rgba(0,0,0,.65);
  --cm-elev-3:0 2px 8px rgba(0,0,0,.35),0 28px 70px -18px rgba(0,0,0,.8);
  --cm-elev-hover:0 2px 6px rgba(0,0,0,.32),0 22px 44px -16px rgba(0,0,0,.75);
  --cm-rim:inset 0 1px 0 rgba(255,255,255,.065);
  --cm-hair:rgba(255,255,255,.085);
  --cm-card-bg:linear-gradient(180deg,rgba(255,255,255,.045) 0,rgba(255,255,255,.012) 160px),var(--studio-surface);
  --cm-gold-grad:linear-gradient(180deg,#FFE27D 0%,#FFD23F 48%,#F4B908 100%);
  --cm-gold-glow:0 1px 0 rgba(255,255,255,.4) inset,0 8px 22px -8px rgba(255,190,0,.6);
  --cm-glass:rgba(17,24,32,.8);
}
[data-theme="light"]{
  --cm-elev-1:0 1px 2px rgba(16,24,40,.06);
  --cm-elev-2:0 1px 2px rgba(16,24,40,.05),0 10px 28px -14px rgba(16,24,40,.16);
  --cm-elev-3:0 4px 14px rgba(16,24,40,.08),0 32px 70px -20px rgba(16,24,40,.3);
  --cm-elev-hover:0 2px 6px rgba(16,24,40,.06),0 18px 40px -16px rgba(16,24,40,.24);
  --cm-rim:inset 0 1px 0 rgba(255,255,255,.9);
  --cm-hair:rgba(20,20,31,.08);
  --cm-card-bg:#fff;
  --cm-gold-glow:0 1px 0 rgba(255,255,255,.55) inset,0 8px 20px -8px rgba(214,150,0,.55);
  --cm-glass:rgba(255,255,255,.84);
}
/* Ciemny motyw: w społeczności linie neutralne (złote ramki wszędzie gasiły akcent). Tło z delikatną poświatą złota
   i granatu - na samej czerni cienie kart znikają, na poświacie karty „wychodzą” do przodu. */
html:not([data-theme="light"]) body.cm-area{--studio-line:rgba(255,255,255,.08);background-image:radial-gradient(1100px 540px at 58% -10%,rgba(255,210,63,.075),transparent 62%),radial-gradient(900px 640px at 104% 14%,rgba(47,94,168,.13),transparent 62%),radial-gradient(760px 560px at -6% 64%,rgba(47,94,168,.08),transparent 62%);background-attachment:fixed}
[data-theme="light"] body.cm-area{background-image:radial-gradient(1100px 520px at 58% -10%,rgba(255,210,63,.11),transparent 62%),radial-gradient(900px 600px at 104% 14%,rgba(47,94,168,.05),transparent 62%);background-attachment:fixed}
/* Karty: tło z delikatnym światłem u góry, linia włosowa, cień. */
.cm-post,.cm-box,.cm-event,.cm-member,.cm-chat,.cm-dm,.cm-nav-start,.cm-thread-side,.cm-article-card{background:var(--cm-card-bg);border-color:var(--cm-hair);box-shadow:var(--cm-rim),var(--cm-elev-2)}
.cm-post.is-pinned{box-shadow:var(--cm-rim),0 0 0 1px var(--cm-gold-line),var(--cm-elev-2)}
.cm-summary,.cm-callout,.cm-banner{box-shadow:var(--cm-rim),var(--cm-elev-1)}
.cm-post,.cm-event,.cm-member,.cm-article-card{transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease}
.cm-post.is-list:hover,.cm-article-card:hover{box-shadow:var(--cm-rim),var(--cm-elev-hover)}
.cm-event:hover,.cm-member:hover{box-shadow:var(--cm-rim),var(--cm-elev-hover);transform:translateY(-2px)}
/* Pole „O co chcesz zapytać?” i karta profilu: ramka z gradientem złota i granatu (wejście do rozmowy i wizytówka osoby). */
.cm-box.cm-prompt,.cm-box.cm-profile{border:1px solid transparent;background:linear-gradient(var(--studio-surface),var(--studio-surface)) padding-box,linear-gradient(135deg,rgba(255,210,63,.55),rgba(255,210,63,.08) 38%,rgba(47,94,168,.1) 62%,rgba(47,94,168,.55)) border-box}
html:not([data-theme="light"]) .cm-box.cm-prompt,html:not([data-theme="light"]) .cm-box.cm-profile{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012) 160px) padding-box,linear-gradient(var(--studio-surface),var(--studio-surface)) padding-box,linear-gradient(135deg,rgba(255,210,63,.5),rgba(255,210,63,.07) 38%,rgba(47,94,168,.12) 62%,rgba(47,94,168,.6)) border-box}
[data-theme="light"] .cm-box.cm-prompt,[data-theme="light"] .cm-box.cm-profile{background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,rgba(214,150,0,.55),rgba(214,150,0,.08) 38%,rgba(47,94,168,.08) 62%,rgba(47,94,168,.4)) border-box}
/* Wpisy w kanale: po najechaniu delikatnie wychodzą do przodu. */
@media (hover:hover){.cm-post.is-list:hover{transform:translateY(-1px)}}
/* Przyciski: główny złoty z gradientem i poświatą, zwykłe z cieniem. */
.cm-btn{box-shadow:var(--cm-elev-1);transition:background .15s,border-color .15s,box-shadow .15s,transform .15s,filter .15s}
.cm-btn-primary,.cm-btn-primary:hover{background:var(--cm-gold-grad);color:#0a0f14;border-color:transparent;box-shadow:var(--cm-gold-glow)}
.cm-btn-primary:hover{filter:brightness(1.05) saturate(1.05);transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 12px 28px -10px rgba(255,190,0,.7)}
.cm-btn-primary:active{transform:translateY(0);filter:none}
.cm-btn:disabled,.cm-btn:disabled:hover{transform:none;filter:none;box-shadow:none}
.cm-chip{box-shadow:var(--cm-elev-1)}
.cm-chip.is-active{box-shadow:0 6px 16px -8px rgba(0,0,0,.6)}
/* Pola: lekkie wgłębienie, przy fokusie złota obwódka-poświata. */
.cm-input,.cm-textarea,.cm-select,.cm-quick-input,.cm-prompt-input{box-shadow:inset 0 1px 2px rgba(0,0,0,.22)}
[data-theme="light"] .cm-input,[data-theme="light"] .cm-textarea,[data-theme="light"] .cm-select,[data-theme="light"] .cm-quick-input,[data-theme="light"] .cm-prompt-input{background-color:#f6f5f2;box-shadow:inset 0 1px 2px rgba(16,24,40,.06)}
.cm-input:focus,.cm-textarea:focus,.cm-select:focus,.cm-quick-input:focus{box-shadow:inset 0 1px 2px rgba(0,0,0,.18),0 0 0 3px var(--cm-gold-soft)}
.cm-prompt-input:hover{border-color:var(--cm-gold-line)}
/* Awatary: cienka obwódka i cień; duże (profil) w złotym pierścieniu. */
.cm-avatar{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 2px 6px rgba(0,0,0,.35)}
[data-theme="light"] .cm-avatar{box-shadow:0 0 0 1px rgba(20,20,31,.06),0 2px 5px rgba(16,24,40,.14)}
.cm-avatar-lg,.cm-avatar-xl,.cm-profile.has-cover .cm-profile-head>.cm-avatar,.cm-profile.has-cover .cm-profile-head>.cm-avatar-wrap>.cm-avatar{box-shadow:0 0 0 4px var(--studio-surface),0 0 0 6px var(--cm-gold-line),0 16px 34px -12px rgba(0,0,0,.65)}
.cm-profile-cover{box-shadow:inset 0 -40px 50px -30px rgba(0,0,0,.35)}
/* Nawigacja: aktywna pozycja ze złotym paskiem i poświatą. */
.cm-nav-item{position:relative;transition:background .15s,color .15s}
.cm-nav-item.is-active{background:linear-gradient(90deg,var(--cm-gold-soft),rgba(255,210,63,0) 92%)}
.cm-nav-item.is-active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--cm-gold-grad);box-shadow:0 0 10px rgba(255,200,40,.55)}
[data-theme="light"] .cm-nav-item.is-active{background:linear-gradient(90deg,rgba(150,96,0,.09),rgba(150,96,0,0) 92%)}
.cm-tab.is-active{box-shadow:0 10px 14px -14px var(--cm-gold)}
/* Nagłówki pudełek w prawej kolumnie ze złotym znacznikiem. */
.cm-aside .cm-box>h3::before{content:"";display:inline-block;width:6px;height:6px;margin:0 8px 1px 0;border-radius:2px;background:var(--cm-gold);box-shadow:0 0 8px rgba(255,200,40,.5);vertical-align:middle}
/* Komentarze, dymki, statystyki: cienka linia zamiast płaskiej plamy. */
.cm-comment-box,.cm-stat{box-shadow:inset 0 0 0 1px var(--cm-hair)}
.cm-bubble{box-shadow:inset 0 0 0 1px var(--cm-hair)}
/* Okna i wyskakujące listy: mocniejszy cień, światło na krawędzi, rozmyte tło pod oknem. */
.cm-dialog,.cm-pop,.cm-menu,.cm-emoji-pop,.cm-mood-pop,.cm-react-pop{border-color:var(--cm-hair);box-shadow:var(--cm-rim),var(--cm-elev-3)}
.cm-modal{background:rgba(4,7,11,.6);-webkit-backdrop-filter:blur(6px) saturate(115%);backdrop-filter:blur(6px) saturate(115%)}
[data-theme="light"] .cm-modal{background:rgba(20,24,33,.36)}
/* Pasek dolny na telefonie: szkło z rozmyciem i złoty znacznik aktywnej pozycji. */
@media (max-width:1023px){
  body.cm-area .cm-bottom{background:var(--cm-glass);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);border-top-color:var(--cm-hair);box-shadow:0 -10px 30px -16px rgba(0,0,0,.55)}
  .cm-bottom-item.is-active::before{content:"";position:absolute;top:0;left:32%;right:32%;height:2px;border-radius:0 0 2px 2px;background:var(--cm-gold-grad);box-shadow:0 0 10px rgba(255,200,40,.6)}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body.cm-area .cm-bottom{background:var(--studio-surface)}
  .cm-modal{background:rgba(0,0,0,.7)}
}
@media (prefers-reduced-motion:reduce){
  .cm-post,.cm-event,.cm-member,.cm-article-card,.cm-btn,.cm-nav-item,.cm-mood-opt{transition:none}
  .cm-event:hover,.cm-member:hover,.cm-btn-primary:hover,.cm-post.is-list:hover{transform:none}
}
/* Etap 8a: branża i cele na profilu, partner do nauki, filtry katalogu. */
.cm-profile-facts{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.cm-fact{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.cm-fact-label{margin-right:2px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--studio-muted)}
.cm-fact-chip{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;border:1px solid var(--cm-hair);background:var(--studio-soft);color:var(--studio-ink);font-size:12.5px;font-weight:600;text-decoration:none}
.cm-fact-chip:hover{border-color:var(--cm-gold-line)}
.cm-fact-chip:focus-visible{outline:2px solid var(--cm-gold);outline-offset:2px}
.cm-buddy-callout{margin-top:12px}
.cm-buddy-callout strong{display:flex;align-items:center;gap:8px}
.cm-buddy-callout strong svg{width:16px;height:16px;color:var(--cm-gold)}
.cm-goal-picks{margin:0;padding:0;border:0}
.cm-goal-list{display:flex;flex-wrap:wrap;gap:6px}
.cm-goal-opt{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid var(--studio-line);background:var(--studio-soft);color:var(--studio-ink);font-size:13px;cursor:pointer}
.cm-goal-opt input{accent-color:var(--cm-gold)}
.cm-goal-opt:has(input:checked){border-color:var(--cm-gold-line);background:var(--cm-gold-soft);font-weight:600}
.cm-goal-opt:has(input:disabled){opacity:.55;cursor:not-allowed}
.cm-goal-opt:has(input:focus-visible){outline:2px solid var(--cm-gold);outline-offset:2px}
.cm-member-filters{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cm-member-filters .cm-select{max-width:100%}
.cm-member-industry{margin-top:2px;font-size:12px;font-weight:600;color:var(--cm-gold)}
.cm-buddy-pill{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin:0;padding:3px 10px;border-radius:999px;border:1px solid var(--cm-gold-line);background:var(--cm-gold-soft);color:var(--studio-ink);font-size:12px;font-weight:700}
.cm-buddy-pill svg{width:14px;height:14px;color:var(--cm-gold)}
.cm-buddy-panel{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}
.cm-buddy-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px}
.cm-buddy-head h2{display:flex;align-items:center;gap:8px;margin:0;font-size:16px;font-weight:800;color:var(--studio-ink)}
.cm-buddy-head h2 svg{width:18px;height:18px;color:var(--cm-gold)}
.cm-buddy-head p{max-width:60ch;margin:4px 0 0;font-size:13.5px;line-height:1.5;color:var(--studio-muted)}
.cm-buddy-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.cm-buddy-card{display:flex;flex-direction:column;gap:8px;min-width:0;padding:12px;border-radius:12px;background:var(--studio-soft);box-shadow:inset 0 0 0 1px var(--cm-hair)}
.cm-buddy-who{color:inherit;text-decoration:none}
.cm-buddy-who .min-w-0{display:flex;flex-direction:column}
.cm-buddy-headline{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12.5px;color:var(--studio-muted)}
.cm-buddy-why{margin:0;font-size:12.5px;font-weight:600;color:var(--cm-gold)}
.cm-buddy-note{margin:0;font-size:13px;line-height:1.45;color:var(--studio-ink)}
.cm-buddy-card .cm-btn{align-self:flex-start}
/* Etap 8b: odznaki odwagi na profilu - medale w barwach marki; niezdobyte (tylko u siebie) wyszarzone. */
.cm-badges{display:flex;flex-direction:column;gap:10px;margin-top:4px;scroll-margin-top:96px}
.cm-badges .cm-section-title{display:flex;align-items:center;gap:8px}
.cm-badges-count{font-size:12px;font-weight:700;color:var(--studio-muted)}
.cm-badges-next{display:flex;align-items:flex-start;gap:8px;margin:0;padding:10px 12px;border-radius:12px;border:1px solid var(--cm-gold-line);background:var(--cm-gold-soft);color:var(--studio-ink);font-size:13.5px;line-height:1.45}
.cm-badges-next svg{flex:0 0 auto;width:16px;height:16px;margin-top:2px;color:var(--cm-gold)}
.cm-medals{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;margin:0;padding:0;list-style:none}
.cm-medal{display:flex;align-items:flex-start;gap:10px;min-width:0;padding:10px;border-radius:12px;background:var(--studio-soft);box-shadow:inset 0 0 0 1px var(--cm-hair)}
.cm-medal-ico{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:40px;height:40px;border-radius:999px;background:var(--cm-gold-grad);color:#0a0f14;box-shadow:0 0 0 2px var(--studio-surface),0 0 0 3px var(--cm-gold-line),0 8px 18px -8px rgba(255,190,0,.55)}
.cm-medal-ico svg{width:20px;height:20px}
.cm-medal-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.cm-medal-name{font-size:13.5px;font-weight:800;color:var(--studio-ink)}
.cm-medal-desc{font-size:12.5px;line-height:1.4;color:var(--studio-muted)}
.cm-medal-at{font-size:11px;color:var(--studio-muted)}
.cm-medal.is-locked .cm-medal-ico{background:var(--studio-surface);color:var(--studio-muted);box-shadow:inset 0 0 0 1px var(--cm-hair)}
.cm-medal.is-locked .cm-medal-name{color:var(--studio-muted)}
/* Etap 8c: wyróżnienia poziomów (decyzja Jana 10.10: nic nie zamykają) - ramka zdjęcia od 3 złota, od 5 podwójna,
   od 7 złota aura; poziom przy nazwisku w profilu i w katalogu. W stosach twarzy („Ty, Anna i…”) bez ramek. */
.cm-avatar.cm-frame-gold{box-shadow:0 0 0 2px var(--studio-surface),0 0 0 4px #E9B824}
.cm-avatar.cm-frame-double{box-shadow:0 0 0 2px var(--studio-surface),0 0 0 4px #FFD23F,0 0 0 6px var(--studio-surface),0 0 0 7.5px rgba(233,184,36,.7)}
.cm-avatar.cm-frame-aura{box-shadow:0 0 0 2px var(--studio-surface),0 0 0 4px #FFD23F,0 0 16px 3px rgba(255,200,40,.5),0 0 0 7px rgba(47,94,168,.6)}
.cm-avatar-xs.cm-frame-gold,.cm-avatar-xs.cm-frame-double,.cm-avatar-xs.cm-frame-aura,.cm-avatar-sm.cm-frame-gold{box-shadow:0 0 0 1.5px var(--studio-surface),0 0 0 3px #E9B824}
.cm-avatar-sm.cm-frame-double{box-shadow:0 0 0 1.5px var(--studio-surface),0 0 0 3px #FFD23F,0 0 0 4.5px var(--studio-surface),0 0 0 5.5px rgba(233,184,36,.7)}
.cm-avatar-sm.cm-frame-aura{box-shadow:0 0 0 1.5px var(--studio-surface),0 0 0 3px #FFD23F,0 0 10px 2px rgba(255,200,40,.45),0 0 0 5px rgba(47,94,168,.6)}
.cm-profile.has-cover .cm-profile-head>.cm-avatar.cm-frame-gold,.cm-profile.has-cover .cm-profile-head>.cm-avatar-wrap>.cm-avatar.cm-frame-gold{box-shadow:0 0 0 4px var(--studio-surface),0 0 0 7px #E9B824,0 16px 34px -12px rgba(0,0,0,.65)}
.cm-profile.has-cover .cm-profile-head>.cm-avatar.cm-frame-double,.cm-profile.has-cover .cm-profile-head>.cm-avatar-wrap>.cm-avatar.cm-frame-double{box-shadow:0 0 0 4px var(--studio-surface),0 0 0 7px #FFD23F,0 0 0 10px var(--studio-surface),0 0 0 12px rgba(233,184,36,.7),0 16px 34px -12px rgba(0,0,0,.65)}
.cm-profile.has-cover .cm-profile-head>.cm-avatar.cm-frame-aura,.cm-profile.has-cover .cm-profile-head>.cm-avatar-wrap>.cm-avatar.cm-frame-aura{box-shadow:0 0 0 4px var(--studio-surface),0 0 0 7px #FFD23F,0 0 26px 6px rgba(255,200,40,.5),0 0 0 11px rgba(47,94,168,.6)}
.cm-faces .cm-avatar[class*="cm-frame-"]{box-shadow:none}
.cm-level-chip{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin:4px 0 0;padding:2px 10px;border-radius:999px;border:1px solid var(--cm-gold-line);background:var(--cm-gold-soft);color:var(--studio-ink);font-size:12px;font-weight:700}
.cm-level-chip svg{width:13px;height:13px;color:var(--cm-gold)}
.cm-level-double{border-color:var(--cm-gold)}
.cm-level-aura{border-color:var(--cm-gold);background:linear-gradient(90deg,rgba(255,210,63,.2),rgba(47,94,168,.2))}

/* ================= Wygląd premium, runda 2 (10.10, Jan: „dopieść graficznie, portal musi wyglądać premium”) ================
   Hierarchia tekstu (treść w 90% bieli, nagłówki w pełnej), szkło nagłówka tylko w społeczności (część „Nauka” bez
   zmian), więcej powietrza we wpisach, etykiety z wypełnieniem zamiast konturu, prawa kolumna z kafelkiem daty,
   numeracją i medalami, wyróżnione spotkanie z dużą datą, puste stany z medalionem. */
body.cm-area{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"cv11","ss01"}
html:not([data-theme="light"]) body.cm-area{--studio-ink:#E8EAF0;--studio-muted:#8E97A6}
html:not([data-theme="light"]) body.cm-area :is(.cm-page-h1,.cm-post-title,.cm-post-title a,.cm-person-name,.cm-profile-head h1,.cm-event-title a,.cm-event-h1,.cm-dialog-head h2,.cm-member-name,.cm-buddy-head h2,.cm-trend-title){color:#fff}
.cm-page-h1{letter-spacing:-.025em}
.cm-post-title{letter-spacing:-.015em}
.cm-body{line-height:1.65}
.cm-meta{color:var(--studio-muted)}
.cm-box h3,.cm-space-group,.cm-nav-group{letter-spacing:.09em}

/* Nagłówek aplikacji w społeczności: szkło z rozmyciem nad poświatą tła, neutralna linia zamiast złotej ramki. */
body.cm-area header.glass{background:rgba(10,15,22,.7);border:0;border-bottom:1px solid rgba(255,255,255,.07);box-shadow:0 12px 32px -22px rgba(0,0,0,.9);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%)}
[data-theme="light"] body.cm-area header.glass{background:rgba(255,255,255,.78);border-bottom-color:rgba(20,20,31,.08);box-shadow:0 12px 32px -24px rgba(16,24,40,.35)}
.cm-area-switch{background:rgba(255,255,255,.04);border-color:var(--cm-hair);box-shadow:inset 0 1px 2px rgba(0,0,0,.28)}
.cm-area-switch a{transition:color .15s,background .15s,box-shadow .15s}
.cm-area-switch a[aria-current="page"]{background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.04));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 4px 12px -6px rgba(0,0,0,.6),0 0 0 1px var(--cm-gold-line)}
[data-theme="light"] .cm-area-switch{background:#f2f1ec;box-shadow:inset 0 1px 2px rgba(16,24,40,.07)}
[data-theme="light"] .cm-area-switch a[aria-current="page"]{background:#fff;color:var(--studio-ink);box-shadow:0 1px 3px rgba(16,24,40,.12),0 0 0 1px var(--cm-gold-line)}

/* Wpisy: więcej powietrza i większy promień (na komputerze), lżejsze linie w środku karty. */
:root{--cm-radius:16px}
.cm-feed{gap:16px}
@media (min-width:640px){
  .cm-post{padding:20px 22px}
  .cm-post-cover,.cm-post-cover-anim{margin:-20px -22px 0}
  .cm-post-cover-anim .cm-post-cover{margin:0}
}
.cm-actions,.cm-preview{border-top-color:rgba(255,255,255,.055)}
[data-theme="light"] .cm-actions,[data-theme="light"] .cm-preview{border-top-color:rgba(20,20,31,.07)}
.cm-act{transition:background .15s,color .15s}
.cm-act:hover{background:rgba(255,255,255,.05);color:var(--studio-ink)}
[data-theme="light"] .cm-act:hover{background:rgba(20,20,31,.04)}
.cm-comment-box{background:rgba(255,255,255,.035)}
[data-theme="light"] .cm-comment-box{background:#f5f4f1}

/* Etykiety: subtelne wypełnienie w kolorze etykiety zamiast samego konturu (Ekspert, PRO, PYTANIE, bez nazwiska...). */
.cm-tag{border-color:color-mix(in srgb,currentColor 34%,transparent);background:color-mix(in srgb,currentColor 11%,transparent);letter-spacing:.01em}
.cm-flag{border-color:color-mix(in srgb,currentColor 26%,transparent);background:color-mix(in srgb,currentColor 8%,transparent);letter-spacing:.07em}
.cm-role{background:linear-gradient(180deg,rgba(255,210,63,.16),rgba(255,210,63,.07));border-color:var(--cm-gold-line);color:var(--studio-ink)}
.cm-level{background:rgba(255,255,255,.04)}

/* Prawa kolumna: wydarzenie z kafelkiem daty, „Popularne” z numeracją, ranking z medalami. */
.cm-trend-event,.cm-trend-numbered{flex-direction:row;align-items:center;gap:12px}
.cm-trend-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.cm-trend-event .cm-date{width:46px;border-color:var(--cm-gold-line);box-shadow:0 6px 14px -8px rgba(0,0,0,.6)}
.cm-trend-event .cm-date b{background:var(--cm-gold-grad);color:#0a0f14;font-size:9.5px;letter-spacing:.06em}
.cm-trend-event .cm-date span{font-size:18px;padding:3px 0}
.cm-trend-no{flex:0 0 auto;width:28px;font-size:20px;font-weight:800;letter-spacing:-.04em;line-height:1;color:transparent;-webkit-text-stroke:1px var(--cm-gold-line);text-align:left}
.cm-trend-numbered:hover .cm-trend-no{-webkit-text-stroke-color:var(--cm-gold)}
.cm-trend:hover .cm-trend-title{text-decoration:underline;text-decoration-color:var(--cm-gold-line);text-underline-offset:3px}
.cm-rank-no.is-top{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:999px;font-size:12px;color:#0a0f14}
.cm-rank-no.is-1{background:linear-gradient(180deg,#FFE27D,#F4B908);box-shadow:0 0 10px rgba(255,200,40,.45)}
.cm-rank-no.is-2{background:linear-gradient(180deg,#F1F4F8,#AEB6C2)}
.cm-rank-no.is-3{background:linear-gradient(180deg,#F2C49B,#C07A45)}
.cm-aside .cm-rank-no.is-top{width:22px}

/* Wyróżnione spotkanie bez okładki: duży blok daty w barwach marki. */
.cm-event-feature.is-plain{grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.cm-event-feature.is-plain{grid-template-columns:150px minmax(0,1fr)}}
.cm-event-bigdate{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:18px 12px;background:radial-gradient(120% 90% at 30% 0%,rgba(255,210,63,.22),transparent 60%),linear-gradient(160deg,#1b2b4f,#0f1a30);color:#fff;text-align:center;border-right:1px solid var(--cm-hair)}
.cm-bd-week,.cm-bd-month{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.cm-bd-day{font-size:46px;font-weight:800;line-height:1;letter-spacing:-.04em;background:var(--cm-gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cm-bd-time{margin-top:6px;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.08);font-size:12px;font-weight:700;color:#fff}
@media (max-width:639px){.cm-event-bigdate{flex-direction:row;justify-content:flex-start;gap:10px;padding:12px 16px;border-right:0;border-bottom:1px solid var(--cm-hair)}.cm-bd-day{font-size:30px}.cm-bd-time{margin:0 0 0 auto}}

/* Puste stany: medalion z ikoną nad tytułem (dekoracja; tekst bez zmian). */
.cm-empty strong::before{content:"";display:block;width:56px;height:56px;margin:0 auto 14px;border-radius:999px;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.5),transparent 45%),var(--cm-gold-grad);box-shadow:0 0 0 6px var(--cm-gold-soft),0 12px 28px -10px rgba(255,190,0,.55)}

/* Lewe menu: spokojniejszy rytm, ikony przygaszone (aktywna złota), kropki nowości z poświatą. */
.cm-nav-item{min-height:38px}
.cm-nav-item svg{color:var(--studio-muted);transition:color .15s}
.cm-nav-item:hover svg{color:var(--studio-ink)}
.cm-nav-item.is-active svg{color:var(--cm-gold)}
.cm-nav-dot{width:7px;height:7px;box-shadow:0 0 8px rgba(255,200,40,.55)}
@media (prefers-reduced-motion:reduce){.cm-act,.cm-area-switch a,.cm-nav-item svg{transition:none}}
/* Runda 2: lewe menu z ikonami w kafelkach (aktywna na złotym), cienkie paski przewijania, złote zaznaczenie tekstu. */
.cm-nav-item svg{box-sizing:content-box;width:16px;height:16px;padding:5px;border-radius:8px;background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.cm-nav-item:hover svg{background:rgba(255,255,255,.08)}
.cm-nav-item.is-active svg{background:var(--cm-gold-grad);color:#0a0f14;box-shadow:0 4px 12px -4px rgba(255,190,0,.55)}
[data-theme="light"] .cm-nav-item svg{background:#f1f0ec;box-shadow:inset 0 0 0 1px rgba(20,20,31,.06)}
[data-theme="light"] .cm-nav-item:hover svg{background:#e9e7e1}
[data-theme="light"] .cm-nav-item.is-active svg{background:var(--cm-gold-grad);color:#0a0f14;box-shadow:0 4px 12px -5px rgba(214,150,0,.6)}
.cm-nav-item{gap:10px}
.cm-nav-item.is-active::before{top:10px;bottom:10px}
body.cm-area{scrollbar-color:rgba(255,255,255,.16) transparent}
[data-theme="light"] body.cm-area{scrollbar-color:rgba(20,20,31,.18) transparent}
body.cm-area ::-webkit-scrollbar{width:10px;height:10px}
body.cm-area ::-webkit-scrollbar-thumb{border:3px solid transparent;border-radius:999px;background:rgba(255,255,255,.16) padding-box}
[data-theme="light"] body.cm-area ::-webkit-scrollbar-thumb{background:rgba(20,20,31,.18) padding-box}
body.cm-area ::-webkit-scrollbar-track{background:transparent}
body.cm-area ::selection{background:rgba(255,210,63,.32);color:inherit}

/* ================= iOS premium, runda 4 (11.10; Jan: „Ma być iOS premium feel”) =================
   Kierunek z HIG (Liquid Glass, iOS 26/27): szkło tylko w warstwie nawigacji, która pływa nad treścią (nagłówek, pasek
   dolny, arkusze, menu, komunikaty); treść na pełnych, płaskich powierzchniach - głębię w ciemnym daje jaśniejsza
   powierzchnia, nie cień ani świecąca krawędź. Krój systemowy (SF na urządzeniach Apple, Inter gdzie indziej), skala
   tekstu iOS bez ręcznego rozstrzelenia na Apple, kapsuły, segmenty, przełącznik 51x31, reakcja na dotyk. Paleta marki:
   czerń i granat, złoto jako jedyny akcent (wypełnienie tylko głównej akcji). Zastępuje szklane karty z rundy 3. */
html:not([data-theme="light"]) body.cm-area{
  --ios-bg:#05070F;--ios-surface:#0E1423;--ios-surface-2:#192139;--ios-elev:#131A2D;
  --ios-label:#fff;--ios-label-2:#9DA3B4;--ios-label-3:rgba(235,235,245,.32);
  --ios-sep:rgba(84,90,112,.55);--ios-fill:rgba(120,126,150,.26);--ios-fill-2:rgba(120,126,150,.16);
  --ios-tint:#FFD23F;--ios-on-tint:#171100;--ios-tint-soft:rgba(255,210,63,.16);
  --ios-glass:rgba(14,20,35,.72);--ios-glass-strong:rgba(14,20,35,.88);--ios-glass-spec:rgba(255,255,255,.3);--ios-glass-rim:rgba(255,255,255,.1);
  --ios-glass-shadow:0 8px 28px rgba(0,0,0,.45),0 1px 3px rgba(0,0,0,.35);--ios-scrim:rgba(0,0,0,.5);
  --ios-seg-thumb:rgba(255,255,255,.2);
  /* stare tokeny społeczności -> paleta iOS (większość reguł z nich korzysta) */
  --studio-canvas:var(--ios-bg);--studio-surface:var(--ios-surface);--studio-soft:var(--ios-surface-2);--studio-line:var(--ios-sep);
  --studio-ink:#fff;--studio-muted:var(--ios-label-2);
  /* Niebieski jaśniejszy niż systemowy #0A84FF: tekst etykiet na ciemnym tle musi mieć 4,5:1 (audyt axe, Fala 3.5). */
  --cm-blue:#4AA3FF;--cm-green:#30D158;--cm-red:#FF453A;--cm-pink:#FF453A;--cm-purple:#4AA3FF;
  color-scheme:dark;background-color:var(--ios-bg);background-image:none;background-attachment:scroll;
}
[data-theme="light"] body.cm-area{
  --ios-bg:#F2F2F7;--ios-surface:#fff;--ios-surface-2:#F2F2F7;--ios-elev:#fff;
  --ios-label:#0B1220;--ios-label-2:#5E6270;--ios-label-3:rgba(60,60,67,.3);
  --ios-sep:rgba(60,60,67,.22);--ios-fill:rgba(118,118,128,.16);--ios-fill-2:rgba(118,118,128,.1);
  --ios-tint:#966000;--ios-on-tint:#fff;--ios-tint-soft:rgba(150,96,0,.1);
  --ios-glass:rgba(255,255,255,.72);--ios-glass-strong:rgba(255,255,255,.9);--ios-glass-spec:rgba(255,255,255,.95);--ios-glass-rim:rgba(0,0,0,.06);
  --ios-glass-shadow:0 8px 28px rgba(0,0,0,.12),0 1px 3px rgba(0,0,0,.08);--ios-scrim:rgba(0,0,0,.32);
  --ios-seg-thumb:#fff;
  --studio-canvas:var(--ios-bg);--studio-surface:var(--ios-surface);--studio-soft:#EEEEF3;--studio-line:var(--ios-sep);
  --studio-ink:var(--ios-label);--studio-muted:var(--ios-label-2);
  /* Zielony ciemniejszy niż systemowy #248A3D: „Rozwiązane” i „Odpowiedź” na białym i zielonkawym tle 4,5:1 (axe). */
  --cm-blue:#1D5FBF;--cm-green:#1C7232;--cm-red:#D70015;--cm-pink:#D70015;--cm-purple:#1D5FBF;
  color-scheme:light;background-color:var(--ios-bg);background-image:none;background-attachment:scroll;
}
body.cm-area{
  --ios-font:-apple-system,BlinkMacSystemFont,"Inter",system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ios-trk-title:0;--ios-trk-body:0;
  --ios-ease:cubic-bezier(.32,.72,0,1);--ios-spring:cubic-bezier(.34,1.35,.64,1);
  /* premium z rund 2-3 wygaszone: bez cieni kart, poświat i gradientów złota (tokeny używane w wielu regułach) */
  --cm-radius:22px;--cm-card-bg:var(--ios-surface);--cm-hair:var(--ios-sep);--cm-rim:0 0 #0000;
  --cm-elev-1:0 0 #0000;--cm-elev-2:0 0 #0000;--cm-elev-hover:0 0 #0000;--cm-elev-3:var(--ios-glass-shadow);
  --cm-gold-grad:linear-gradient(var(--ios-tint),var(--ios-tint));--cm-gold-glow:0 0 #0000;
  font-family:var(--ios-font);font-feature-settings:normal;letter-spacing:var(--ios-trk-body);
}
/* Inter (poza urządzeniami Apple) dostaje lekkie zwężenie jak SF; SF na Apple rozstrzela się sam według rozmiaru. */
@supports not (font:-apple-system-body){body.cm-area{--ios-trk-title:-.021em;--ios-trk-body:-.006em}}
body.cm-area::before{content:none}
/* Tytuły i tekst: skala iOS (Large Title 34/41, wpis jak Title 3, treść 17 na telefonie, 16 na komputerze). */
body.cm-area .cm-page-h1{font-size:34px;line-height:41px;font-weight:700;letter-spacing:var(--ios-trk-title)}
@media (min-width:768px){body.cm-area .cm-page-h1{font-size:32px;line-height:40px}}
body.cm-area .cm-page-sub{font-size:15px;line-height:20px;color:var(--ios-label-2)}
body.cm-area .cm-post-title{font-size:20px;line-height:25px;font-weight:600;letter-spacing:var(--ios-trk-title)}
body.cm-area .cm-post.is-detail .cm-post-title{font-size:26px;line-height:32px;font-weight:700}
body.cm-area .cm-body:not(.cm-comment-text){font-size:17px;line-height:25px}
@media (min-width:768px){body.cm-area .cm-body:not(.cm-comment-text){font-size:16px;line-height:24px}}
/* Komentarze gęściej niż wpis (jak odpowiedzi w aplikacjach iOS): 16/22 na telefonie, 15/22 na komputerze. */
body.cm-area .cm-comment-text{font-size:16px;line-height:22px}
@media (min-width:768px){body.cm-area .cm-comment-text{font-size:15px;line-height:22px}}
/* Etykiety i nagłówki sekcji: zdaniowo, bez wersalików i rozstrzelenia (iOS 26). */
body.cm-area :is(.cm-flag,.cm-nav-group,.cm-space-group,.cm-box h3,.cm-kicker,.cm-article-kicker,.cm-event-kicker,.cm-emoji-label,.cm-fact-label,.cm-bd-week,.cm-bd-month,.cm-countdown span){text-transform:none;letter-spacing:0}
body.cm-area :is(.cm-box h3,.cm-nav-group,.cm-space-group){font-size:13px;line-height:18px;font-weight:600;color:var(--ios-label-2)}
body.cm-area .cm-aside .cm-box>h3::before{content:none}
body.cm-area .cm-flag{font-size:12px;line-height:16px;font-weight:600;padding:2px 9px;border:0;background:var(--ios-fill-2)}
body.cm-area .cm-flag-gold{color:var(--ios-tint);background:var(--ios-tint-soft)}

/* Treść: pełne, płaskie powierzchnie (bez ramki, cienia, połysku i krawędzi światła). */
body.cm-area :is(.cm-post,.cm-box,.cm-event,.cm-member,.cm-chat,.cm-dm,.cm-article-card,.cm-thread-side,.cm-nav-start){background:var(--ios-surface);border-color:transparent;box-shadow:none}
html:not([data-theme="light"]) body.cm-area :is(.cm-box.cm-prompt,.cm-box.cm-profile),[data-theme="light"] body.cm-area :is(.cm-box.cm-prompt,.cm-box.cm-profile){background:var(--ios-surface);border-color:transparent;box-shadow:none}
body.cm-area :is(.cm-post,.cm-box,.cm-event,.cm-member,.cm-chat,.cm-dm)::after{content:none}
body.cm-area :is(.cm-post.is-list,.cm-article-card,.cm-event,.cm-member):hover{box-shadow:none;transform:none}
/* Wnętrza kart (dymki komentarzy, statystyki, partnerzy, medale, cudze dymki): drugi poziom powierzchni. */
body.cm-area :is(.cm-comment-box,.cm-stat,.cm-buddy-card,.cm-medal,.cm-bubble:not(.is-mine)){background:var(--ios-surface-2);box-shadow:none;border-color:transparent}
/* Wyróżnienia zostają jako cienka linia akcentu: przypięty wpis, „Następny krok” (zielona po ukończeniu), podsumowanie. */
body.cm-area .cm-post.is-pinned{border-color:var(--cm-gold-line);box-shadow:none}
body.cm-area :is(.cm-box.cm-next-step,.cm-box.cm-summary){border-color:var(--cm-gold-line)}
body.cm-area .cm-box.cm-next-step.is-done{border-color:rgba(48,209,88,.45);border-color:color-mix(in srgb,var(--cm-green) 45%,transparent)}
body.cm-area .cm-post.is-hidden{border-style:dashed;border-color:var(--cm-red)}
body.cm-area .cm-comment.is-helpful .cm-comment-box{border-color:rgba(48,209,88,.5)} /* najlepsza odpowiedź */

/* Lewe menu (komputer): pływający panel na tle strony jak pasek boczny iPadOS; zaznaczenie = wypełniona kapsuła. */
@media (min-width:1024px){
  body.cm-area .cm-nav{padding:10px 8px 14px;border-radius:24px;background:var(--ios-elev);box-shadow:none}
}
body.cm-area .cm-nav-item{border-radius:12px}
body.cm-area .cm-nav-item.is-active{background:var(--ios-fill);font-weight:600}
body.cm-area .cm-nav-item.is-active::before{content:none}
body.cm-area .cm-nav-start{background:var(--ios-fill-2);border-color:transparent;box-shadow:none}
/* Ikony menu w kafelkach jak w Ustawieniach: neutralne, aktywna na złocie; bez poświat. */
html:not([data-theme="light"]) body.cm-area .cm-nav-item svg,[data-theme="light"] body.cm-area .cm-nav-item svg{background:var(--ios-fill-2);box-shadow:none}
html:not([data-theme="light"]) body.cm-area .cm-nav-item:hover svg,[data-theme="light"] body.cm-area .cm-nav-item:hover svg{background:var(--ios-fill)}
html:not([data-theme="light"]) body.cm-area .cm-nav-item.is-active svg,[data-theme="light"] body.cm-area .cm-nav-item.is-active svg{background:var(--ios-tint);color:var(--ios-on-tint);box-shadow:none}
body.cm-area .cm-nav-dot{box-shadow:none}
body.cm-area .cm-empty strong::before{background:var(--ios-fill-2);box-shadow:none}

/* Warstwa nawigacji: szkło (rozmycie tylko tu - nagłówek, pasek dolny, okna, menu). */
body.cm-area header.glass{background:var(--ios-glass);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);box-shadow:inset 0 -.5px 0 var(--ios-sep)}
body.cm-area :is(.cm-dialog,.cm-pop,.cm-menu,.cm-emoji-pop,.cm-mood-pop,.cm-react-pop){background:var(--ios-glass-strong);border-color:transparent;-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);box-shadow:inset 0 .5px 0 var(--ios-glass-spec),inset 0 0 0 .5px var(--ios-glass-rim),var(--ios-glass-shadow)}
body.cm-area :is(.cm-pop,.cm-menu,.cm-react-pop){border-radius:22px}
body.cm-area .cm-pop-head{background:transparent}
/* Pod oknem przyciemnienie, nie rozmycie (iOS: scrim). */
body.cm-area .cm-modal,[data-theme="light"] body.cm-area .cm-modal{background:var(--ios-scrim);-webkit-backdrop-filter:none;backdrop-filter:none}
@media (max-width:1023px){body.cm-area .cm-bottom{background:var(--ios-glass-strong);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);box-shadow:inset 0 .5px 0 var(--ios-sep)}}

/* Przyciski: kapsuły. Główny - płaskie złoto (jedyne wypełnienie akcentem), zwykłe - szare wypełnienie. */
body.cm-area .cm-btn{border-radius:999px;box-shadow:none;font-weight:600;transition:transform .25s var(--ios-ease),background-color .2s,opacity .2s,filter .2s}
html:not([data-theme="light"]) body.cm-area .cm-btn:not(.cm-btn-primary),[data-theme="light"] body.cm-area .cm-btn:not(.cm-btn-primary){background:var(--ios-fill);border-color:transparent;color:var(--studio-ink);box-shadow:none}
body.cm-area .cm-btn-primary,body.cm-area .cm-btn-primary:hover{background:var(--ios-tint);color:var(--ios-on-tint);border-color:transparent;box-shadow:none}
html body.cm-area .cm-btn.cm-btn-danger:not(.cm-btn-primary){color:var(--cm-red);border-color:transparent}
html body.cm-area .cm-btn:disabled{opacity:.4;box-shadow:none;transform:none;filter:none}
@media (hover:hover) and (pointer:fine){
  html:not([data-theme="light"]) body.cm-area .cm-btn:not(.cm-btn-primary):not(:disabled):hover,[data-theme="light"] body.cm-area .cm-btn:not(.cm-btn-primary):not(:disabled):hover{background:var(--ios-fill);filter:brightness(1.12)}
  body.cm-area .cm-btn-primary:not(:disabled):hover{transform:none;filter:brightness(1.06);box-shadow:none}
}
/* Chipy: kapsuły bez ramki i cienia; aktywny wypełniony. */
body.cm-area .cm-chip{border-color:transparent;box-shadow:none;font-size:14px;padding:7px 14px}
html:not([data-theme="light"]) body.cm-area .cm-chip:not(.is-active),[data-theme="light"] body.cm-area .cm-chip:not(.is-active){background:var(--ios-fill-2);color:var(--studio-ink)}
@media (hover:hover) and (pointer:fine){html:not([data-theme="light"]) body.cm-area .cm-chip:not(.is-active):hover,[data-theme="light"] body.cm-area .cm-chip:not(.is-active):hover{background:var(--ios-fill)}}
body.cm-area .cm-aside .cm-chip{font-size:13px;padding:5px 11px}
body.cm-area .cm-chip.is-active{box-shadow:none}
/* Zakładki jako segmenty (tor z wypełnieniem, wybrany segment jako jaśniejsza kapsuła). */
body.cm-area .cm-tabs{display:flex;width:max-content;max-width:100%;gap:0;margin:0 0 12px;padding:2px;border:0;border-radius:999px;background:var(--ios-fill-2)}
body.cm-area .cm-tab{padding:7px 16px;border:0;border-radius:999px;font-size:14px;font-weight:500;color:var(--studio-ink);transition:background-color .25s var(--ios-ease),box-shadow .25s}
body.cm-area .cm-tab.is-active{background:var(--ios-seg-thumb);font-weight:600;box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04)}
/* Pola: wypełnione, zaokrąglone; 17 px na dotyku (Safari nie przybliża strony przy pisaniu). */
html:not([data-theme="light"]) body.cm-area :is(.cm-input,.cm-textarea,.cm-select,.cm-quick-input,.cm-prompt-input),[data-theme="light"] body.cm-area :is(.cm-input,.cm-textarea,.cm-select,.cm-quick-input,.cm-prompt-input){background-color:var(--ios-fill-2);border-color:var(--ios-sep);border-radius:12px;box-shadow:none}
/* Kapsuły: pole pisania (przycisk) i mały wybór sortowania; szczegółowość jak reguła pól powyżej (wygrywa kolejnością). */
html body.cm-area .cm-prompt-input.cm-prompt-input,html body.cm-area .cm-select.cm-select-sm{border-radius:999px}
@media (pointer:coarse){body.cm-area :is(.cm-input,.cm-textarea,.cm-select,.cm-select-sm,.cm-quick-input){font-size:17px}}
/* Jasny motyw: podpowiedzi w polach miały szary #9ca3af z resetu Tailwinda (ok. 1,9-2,3:1 na jasnym polu). Ciemniejsza szarość
   daje ok. 5:1 i nadal odróżnia podpowiedź od wpisanego tekstu (audyt ludzie-11). */
[data-theme="light"] body.cm-area :is(.cm-input,.cm-textarea,.cm-quick-input,#cm-m-q,.cm-qs-input)::placeholder{color:#62626a;opacity:1}
html:not([data-theme="light"]) body.cm-area :is(.cm-input,.cm-textarea,.cm-select,.cm-quick-input):focus,[data-theme="light"] body.cm-area :is(.cm-input,.cm-textarea,.cm-select,.cm-quick-input):focus{border-color:var(--cm-gold-line);box-shadow:0 0 0 3px var(--cm-gold-soft)}
html body.cm-area .cm-prompt-input.cm-prompt-input:is(:hover,:focus-visible,.has-draft){border-color:var(--cm-gold-line)}
/* Przełącznik 51x31 jak w iOS: tor złoty po włączeniu, biała gałka z cieniem. */
body.cm-area .cm-switch{width:51px;height:31px;border:0;background:var(--ios-fill)}
body.cm-area .cm-switch::after{top:2px;left:2px;width:27px;height:27px;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.16);transition:transform .3s var(--ios-ease)}
body.cm-area .cm-switch[aria-checked="true"]{background:var(--ios-tint);border-color:transparent}
body.cm-area .cm-switch[aria-checked="true"]::after{transform:translateX(20px);background:#fff}
/* Gałka na jasnym złocie: cienka obwódka i mocniejszy cień, żeby jej krawędź była widoczna (stan pokazuje też położenie). */
html:not([data-theme="light"]) body.cm-area .cm-switch[aria-checked="true"]::after{box-shadow:0 0 0 .5px rgba(0,0,0,.35),0 3px 8px rgba(0,0,0,.3)}
body.cm-area input[type="checkbox"],body.cm-area input[type="radio"]{accent-color:var(--ios-tint)}

/* Dotyk: reakcja w chwili stuknięcia, bez „przyklejonego” najechania. */
body.cm-area :is(.cm-btn,.cm-chip,.cm-tab,.cm-act,.cm-bottom-item,.cm-header-btn,.cm-icon-btn,.cm-nav-item){-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
@media (hover:none){
  body.cm-area :is(.cm-btn,.cm-chip,.cm-act,.cm-header-btn,.cm-icon-btn):not(:disabled):active{transform:scale(.96)}
  body.cm-area .cm-bottom-item:active{transform:scale(.92)}
  body.cm-area :is(.cm-nav-item,.cm-check,.cm-dm-item,.cm-note,.cm-rank):active{background:var(--ios-fill-2)}
  body.cm-area :is(.cm-event,.cm-member,.cm-btn-primary,.cm-react-pop button):hover{transform:none;filter:none}
}
body.cm-area :is(.cm-chip,.cm-act,.cm-bottom-item,.cm-header-btn,.cm-icon-btn){transition:transform .25s var(--ios-ease),background-color .2s,color .2s}
/* Wejście okien i menu: arkusz od dołu na telefonie, „wyrastanie” na komputerze i dla menu (bez ruchu przy reduce). */
/* Osobne właściwości translate/scale zamiast transform: animacja nie nadpisze przesunięcia, które element ma z innej reguły. */
@keyframes cm-ios-sheet{from{translate:0 100%}}
@keyframes cm-ios-pop{from{opacity:0;scale:.9}}
@media (prefers-reduced-motion:no-preference){
  body.cm-area .cm-modal{animation:cm-ios-fade .25s linear}
  @media (max-width:639px){body.cm-area .cm-dialog{animation:cm-ios-sheet .45s var(--ios-ease)}}
  @media (min-width:640px){body.cm-area .cm-dialog{animation:cm-ios-pop .3s var(--ios-ease)}}
  body.cm-area :is(.cm-pop,.cm-menu,.cm-react-pop){animation:cm-ios-pop .22s var(--ios-ease);transform-origin:top right}
}
@keyframes cm-ios-fade{from{opacity:0}}
/* Drobne: narzędzia komentarza w jednej linii na telefonie. */
body.cm-area .cm-comment-tools button{white-space:nowrap}

/* Duży tytuł na telefonie zawsze sam w wierszu (akcje strony pod nim, nie obok - tytuł 34 px nie łamie się w pół słowa). */
@media (max-width:639px){body.cm-area .cm-page-titles{flex:1 1 100%;min-width:0}}
/* Złoto tylko pełnym wypełnieniem albo na glifie i tekście: bez półprzezroczystego złota na granacie („khaki”)
   i kremu w jasnym motywie (wskazówki, następny poziom, „Pomóż mi to napisać”, plakietki, podium, nieprzeczytane). */
body.cm-area :is(.cm-callout,.cm-rank-next,.cm-assist-btn,.cm-buddy-pill,.cm-badges-next,.cm-level-chip,.cm-role){background:var(--ios-fill-2);border-color:transparent;box-shadow:none}
@media (hover:hover) and (pointer:fine){body.cm-area :is(.cm-rank-next,.cm-assist-btn):hover{background:var(--ios-fill)}}
body.cm-area .cm-podium-place.is-1 .cm-podium-step{background:var(--ios-fill-2);border-color:transparent}
body.cm-area .cm-note.is-unread:not(:active){background:transparent}
body.cm-area .cm-rank.is-me{background:var(--ios-fill-2)}
/* Numeracja popularnych: pełne cyfry w kolorze drugorzędnym zamiast konturu (czytelność). */
body.cm-area .cm-trend-no{-webkit-text-stroke:0;color:var(--ios-label-2);font-weight:600}
/* ---------- Faza C: rama jak w iOS (telefon) ---------- */
body.cm-area .cm-act{white-space:nowrap} /* „Lubię to” w jednej linii przy marginesie 16 px */
.cm-nav-title{display:none}
body.cm-area #main-app>header{border-color:transparent} /* linia z .glass (index.html) zastąpiona cieniem 0,5 px */
body.cm-area .cm-back{display:inline-flex;align-items:center;gap:2px;min-height:44px;margin:-8px 0 2px -8px;padding:0 8px;font-size:17px;font-weight:400;color:var(--ios-tint);text-decoration:none}
body.cm-area .cm-back svg{width:24px;height:24px;stroke-width:2.2}
@media (hover:hover) and (pointer:fine){body.cm-area .cm-back:hover{text-decoration:none;opacity:.75}}
@media (max-width:1023px){
  /* Pływający pasek zakładek: szklana kapsuła nad dolną krawędzią, wybrana pozycja w „pigułce” (iOS 26). */
  body.cm-area{--cm-tabbar-top:calc(72px + env(safe-area-inset-bottom))} /* góra kapsuły: bottom 10 px + wysokość 62 px */
  body.cm-area .cm-bottom{left:16px;right:16px;bottom:calc(10px + env(safe-area-inset-bottom));max-width:440px;margin:0 auto;height:62px;padding:4px;gap:2px;border:0;border-radius:999px;
    background:var(--ios-glass-strong);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
    box-shadow:inset 0 .5px 0 var(--ios-glass-spec),inset 0 0 0 .5px var(--ios-glass-rim),var(--ios-glass-shadow)}
  body.cm-area .cm-bottom-item{min-height:0;border-radius:999px;gap:2px;font-size:10px;line-height:12px;font-weight:600;color:var(--ios-label-2)}
  body.cm-area .cm-bottom-item svg{width:24px;height:24px}
  body.cm-area .cm-bottom-item:last-child svg{rotate:90deg} /* „Więcej”: wielokropek poziomo, jak w iOS */
  body.cm-area .cm-bottom-item.is-active,body.cm-area .cm-bottom-item.is-active svg{color:var(--ios-tint)}
  body.cm-area .cm-bottom-item.is-active{background:var(--ios-fill)}
  body.cm-area .cm-bottom-item.is-active::before{content:none}
  /* Treść: margines boczny 16 (iOS). */
  body.cm-area #main-app>main{padding-left:16px;padding-right:16px}
  /* Pasek u góry: w spoczynku bez tła i linii, po przewinięciu szkło z linią (zmiana klasy z JS, bez animacji rozmycia). */
  body.cm-area #main-app>header{background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;transition:background-color .2s linear,box-shadow .2s linear}
  body.cm-area.cm-scrolled #main-app>header{background:var(--ios-glass);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);box-shadow:inset 0 -.5px 0 var(--ios-sep)}
  /* Akcje w pasku: okrągłe przyciski 44 px (cel dotyku iOS) z wypełnieniem. */
  body.cm-area #cm-header{gap:6px}
  /* Bez przycisku wiadomości: na telefonie ukryty (dubluje zakładkę „Wiadomości”) regułą o tej samej szczegółowości. */
  body.cm-area #cm-header .cm-header-btn:not(.cm-dm-btn){width:44px;height:44px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:var(--ios-fill-2);color:var(--studio-ink)}
  /* Tytuł strony w pasku, gdy duży tytuł schowa się pod pasek; marka przygasa, żeby zrobić mu miejsce. */
  body.cm-area .cm-nav-title{display:block;position:absolute;left:112px;right:112px;top:50%;translate:0 -50%;text-align:center;font-size:17px;line-height:22px;font-weight:600;color:var(--studio-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .2s linear;pointer-events:none}
  body.cm-area.cm-title-inline .cm-nav-title{opacity:1}
  body.cm-area #main-app>header .studio-brand span{transition:opacity .2s linear}
  body.cm-area.cm-title-inline #main-app>header .studio-brand span{opacity:0}
}
@media (max-width:1023px) and (prefers-reduced-motion:reduce){body.cm-area :is(#main-app>header,.cm-nav-title,#main-app>header .studio-brand span){transition:none}}
/* ---------- Faza B: ekrany treści (fragment agenta, scratchpad/ios/frag-tresc.css) ---------- */
/* ================= iOS premium, runda 4 - faza B: ekrany treści =================
   Kanał i wpis, komentarze, artykuł, profil, członkowie, wydarzenia, ranking, „Zacznij tu”, prawa kolumna.
   Telefon: szczegół wpisu i artykułu na pełną szerokość, kolekcje jako listy „inset grouped” (jeden kontener,
   wiersze >= 44 px, linie 0,5 px wcięte do tekstu, reakcja w chwili stuknięcia), na karcie w kanale najwyżej trzy
   rozmiary tekstu (17 / 15 / 13), złoto jako jedyny akcent. Bez zmian znaczników i JS (tylko selektory istniejących klas). */

/* ---------- 1. Wpis w kanale ---------- */
/* Nagłówek w dwóch liniach: imię z plakietką w jednej linii (imię skraca się wielokropkiem, plakietka zostaje),
   pod spodem drobno czas i przestrzeń; nastrój, jeśli jest, w osobnej linii. */
body.cm-area .cm-post-head{align-items:center}
body.cm-area .cm-post-head .cm-person{flex:1;min-width:0;align-items:center}
body.cm-area .cm-post-head .cm-person>.min-w-0{flex:1;min-width:0}
body.cm-area .cm-post-head .cm-person .cm-row{display:grid;grid-template-columns:minmax(0,max-content) auto;justify-content:start;align-items:center}
body.cm-area .cm-post-head .cm-person .cm-row>.cm-person-name{justify-self:start;line-height:20px}
body.cm-area .cm-post-head .cm-person .cm-row>:not(.cm-person-name):not(.cm-tag):not(.cm-role){grid-column:1/-1} /* nastrój w osobnej linii */
body.cm-area .cm-post-head .cm-meta{display:block;margin-top:1px;font-size:13px;line-height:18px;color:var(--ios-label-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){body.cm-area .cm-post.is-list .cm-post-head .cm-meta-headline{display:none}}
body.cm-area .cm-post-head .cm-post-menu{flex:none;align-self:center;margin:0 -10px 0 -4px;color:var(--ios-label-2)}
/* Flagi i plakietki: małe kapsuły zdaniowe 13 px bez obrysu; złoto tylko na tekście (bez złota 16% na granacie). */
body.cm-area .cm-post-flags{gap:6px}
body.cm-area .cm-flag{font-size:13px;line-height:18px;padding:1px 8px;font-weight:600;color:var(--ios-label-2)}
body.cm-area .cm-flag-gold{color:var(--ios-tint);background:var(--ios-fill-2)}
body.cm-area .cm-flag-green{color:var(--cm-green)}
body.cm-area .cm-flag-anon{color:var(--ios-label-2)}
body.cm-area .cm-flag-anon svg{width:12px;height:12px}
body.cm-area :is(.cm-post,.cm-comments,.cm-profile,.cm-member-grid,.cm-buddy-panel,.cm-event,.cm-event-feature,#cm-ev-info,.cm-rank,.cm-aside) :is(.cm-tag,.cm-role){border:0;font-size:13px;line-height:18px;padding:1px 7px;font-weight:600;letter-spacing:0}
body.cm-area :is(.cm-post,.cm-comments,.cm-profile,.cm-member-grid,.cm-buddy-panel,.cm-event,.cm-event-feature,#cm-ev-info,.cm-rank,.cm-aside) .cm-tag{background:color-mix(in srgb,currentColor 14%,transparent)}
/* Tytuł w kanale na telefonie jak Headline (17 semibold): obok treści 17 i drobnych 13 - trzy rozmiary na kartę. */
@media (max-width:639px){body.cm-area .cm-post.is-list .cm-post-title{font-size:17px;line-height:22px;font-weight:600}}
/* Kto docenia i ile komentarzy: drobny tekst; pod nim jeden równy rząd trzech akcji (ikona + podpis), cele 44 px. */
body.cm-area .cm-post-stats{min-height:18px;font-size:13px;line-height:18px;color:var(--ios-label-2)}
body.cm-area .cm-post-stats>button{margin-block:-9px}
body.cm-area .cm-actions{gap:4px;margin-top:-2px;padding-top:2px;border-top:.5px solid var(--ios-sep)}
body.cm-area .cm-post:has(>.cm-actions:last-child){padding-bottom:8px}
body.cm-area .cm-actions>*{flex:1 1 0;min-width:0}
body.cm-area .cm-actions>.cm-react{position:relative;display:flex;justify-content:center}
body.cm-area .cm-actions>.cm-react>.cm-act{flex:0 1 auto}
body.cm-area .cm-act{gap:5px;padding:0 4px;border-radius:12px;font-size:13px;line-height:18px;font-weight:600;color:var(--ios-label-2)}
body.cm-area .cm-act svg{width:20px;height:20px}
body.cm-area .cm-act.is-on{color:var(--ios-label)}
body.cm-area .cm-act.is-on svg{color:var(--ios-tint)}
body.cm-area .cm-react-more{color:var(--ios-label-2);border-radius:12px}
/* Na telefonie reakcję wybiera się przytrzymaniem „Lubię to” (jak w aplikacjach iOS) - strzałka zostaje dla
   czytnika ekranu i klawiatury (widoczna po fokusie), ale nie rozpycha rzędu. */
@media (hover:none) and (pointer:coarse){
  body.cm-area :is(.cm-actions,.cm-comment-tools) .cm-react-more:not(:focus-visible){position:absolute;width:1px;height:1px;min-width:0;min-height:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  body.cm-area .cm-comment-tools .cm-creact{position:relative}
}
body.cm-area .cm-preview{border-top:.5px solid var(--ios-sep)}
body.cm-area .cm-pv-answer{background:transparent}
/* Pozostałe drobne teksty karty w tych samych rozmiarach (15 treść komentarza, 13 drobne). */
body.cm-area .cm-pv-bubble,body.cm-area .cm-pv-answer .cm-pv-text{font-size:15px;line-height:20px}
body.cm-area :is(.cm-pv-meta,.cm-pv-all,.cm-pv-label,.cm-more,.cm-doc-size,.cm-link-host){font-size:13px;line-height:18px}
body.cm-area :is(.cm-doc-name){font-size:15px;line-height:20px}
/* Wnętrza wpisu: ankieta, podgląd linku, dokumenty - linie 0,5 px; lekcja jako kapsuła. */
body.cm-area :is(.cm-link-card,.cm-doc){border-width:.5px;border-color:var(--ios-sep)}
body.cm-area .cm-lesson-ref{align-self:flex-start;border-radius:999px;padding:5px 12px;font-size:13px;line-height:18px;background:var(--ios-fill-2)}
/* Ankieta: bez ramki wokół, odpowiedzi jako wypełnione wiersze 44 px (mój głos: złota linia, znacznik i pogrubienie). */
body.cm-area .cm-poll{gap:8px;padding:0;border:0}
body.cm-area .cm-poll-q{font-size:15px;line-height:20px;font-weight:600}
body.cm-area .cm-poll-opt{min-height:44px;padding:0 14px;border-radius:12px;background:var(--ios-fill-2);font-size:15px;line-height:20px}
body.cm-area .cm-poll-opt:not(.is-mine){border-color:transparent}
body.cm-area .cm-poll-opt .cm-poll-bar{background:var(--ios-fill)}
body.cm-area .cm-poll .cm-small{font-size:13px;line-height:18px}
/* Wydarzenie osadzone we wpisie: druga powierzchnia z mniejszym promieniem, kafelek daty na pierwszej. */
body.cm-area .cm-post .cm-event{gap:12px;padding:12px;border-radius:16px;background:var(--ios-surface-2)}
body.cm-area .cm-post .cm-event .cm-date{background:var(--ios-surface)}
/* Pole „O co chcesz zapytać?”: prosta kapsuła bez obrysu; rodzaje wpisu jako małe kapsuły w przewijanym rzędzie
   (36 px widoczne, 44 px pola trafienia przez pseudo-element, rząd ma zapas w pionie, żeby go nie przycinał). */
body.cm-area .cm-box.cm-prompt{padding:12px;gap:10px}
html:not([data-theme="light"]) body.cm-area .cm-prompt-input,[data-theme="light"] body.cm-area .cm-prompt-input{border-color:transparent}
body.cm-area .cm-prompt-input{padding:0 16px;font-size:16px;line-height:22px;color:var(--ios-label-2)}
body.cm-area .cm-prompt-types{gap:8px;padding-block:4px;margin-block:-4px}
body.cm-area .cm-prompt-types button{position:relative;min-height:36px;padding:0 14px;border-radius:999px;background:var(--ios-fill-2);color:var(--ios-label);font-size:15px;line-height:20px;font-weight:600;gap:6px}
body.cm-area .cm-prompt-types button::after{content:"";position:absolute;inset:-4px 0}
body.cm-area .cm-prompt-types svg{width:17px;height:17px;color:var(--ios-label-2)}

/* ---------- 2. Szczegół wpisu i artykułu, komentarze ---------- */
/* Telefon: wpis, podsumowanie i komentarze na pełną szerokość ekranu (sekcje jak w aplikacjach iOS, bez „pudełka
   w pudełku”). Wysunięcie liczone od środka ekranu, więc nie zależy od marginesu treści; tylko na dotyku (paski
   przewijania nakładane - na wąskim oknie komputera 100vw z paskiem przewijania dałoby przewijanie w bok). */
@media (max-width:639px) and (pointer:coarse){
  body.cm-area .cm-feed:has(>.cm-post.is-detail,>.cm-post.cm-article){gap:10px}
  body.cm-area .cm-feed>:is(.cm-post.is-detail,.cm-post.cm-article,#cm-summary-box,#cm-comments-box){margin-inline:calc(50% - 50vw);padding:16px max(16px,env(safe-area-inset-right)) 18px max(16px,env(safe-area-inset-left));border-radius:0}
  body.cm-area .cm-post.is-detail>:is(.cm-post-cover,.cm-post-cover-anim){margin:-16px calc(-1 * max(16px,env(safe-area-inset-right))) 0 calc(-1 * max(16px,env(safe-area-inset-left)));border-radius:0}
  body.cm-area .cm-post.cm-article>.cm-article-hero{width:auto;max-width:none;margin:-16px calc(-1 * max(16px,env(safe-area-inset-right))) 0 calc(-1 * max(16px,env(safe-area-inset-left)));border-radius:0}
}
/* Komentarze jako spokojna lista: bez dymków, imię 15, treść 16, narzędzia 13 w jednej linii; linie 0,5 px wcięte
   do tekstu (za awatarem 32 px). Najlepsza odpowiedź zostaje ramką z zieloną linią. */
body.cm-area #cm-comments-box .cm-section-title{font-size:17px;line-height:22px;font-weight:600}
body.cm-area .cm-comments{gap:0}
body.cm-area .cm-comments>.cm-comment{position:relative;padding:12px 0}
body.cm-area .cm-comments>.cm-comment:first-child{padding-top:4px}
body.cm-area .cm-comments>.cm-comment+.cm-comment::before{content:"";position:absolute;top:0;left:42px;right:0;border-top:.5px solid var(--ios-sep);pointer-events:none}
body.cm-area .cm-comments .cm-comment-bubble>.cm-comment-box{padding:0;border-radius:0;background:transparent;box-shadow:none}
body.cm-area .cm-comments .cm-comment.is-helpful>.cm-comment-bubble>.cm-comment-box{padding:10px 12px;border-radius:14px}
body.cm-area .cm-comments .cm-comment-box.is-target{outline-offset:4px;border-radius:8px}
body.cm-area .cm-comments .cm-comment-name{font-size:15px;line-height:20px;font-weight:600}
body.cm-area .cm-answer-label{margin:0 0 6px;font-size:13px;line-height:18px;font-weight:600}
body.cm-area .cm-comment-tools{flex-wrap:wrap;gap:0 2px;margin:4px 0 0 -8px;font-size:13px;line-height:18px;color:var(--ios-label-2)}
body.cm-area .cm-comment-tools>span:first-child{padding:0 6px 0 8px;font-variant-numeric:tabular-nums}
body.cm-area .cm-comment-tools button{min-height:32px;padding:0 8px;color:var(--ios-label-2);font-weight:600;border-radius:10px}
body.cm-area .cm-comment-tools button.is-on{color:var(--ios-tint)}
body.cm-area .cm-comment-tools .cm-creact .cm-react-more{min-width:28px;padding:0 4px}
@media (pointer:coarse){
  /* 44 px pola trafienia, ale rząd wizualnie niski (ujemny margines w pionie). */
  body.cm-area .cm-comment-tools button{min-height:44px;margin-block:-6px;min-width:0}
  body.cm-area .cm-comment-tools .cm-creact .cm-react-more{min-width:32px;min-height:44px}
  body.cm-area .cm-comment-tools>button[aria-label]{min-width:40px}
}
body.cm-area .cm-replies{gap:12px;margin-top:8px}
/* Artykuł: tytuł Title 1, treść do czytania 17/26, śródtytuły Title 2/3, cytat bez złotej plamy. */
body.cm-area .cm-article-kicker{font-size:13px;line-height:18px;font-weight:600;color:var(--ios-label-2)}
body.cm-area .cm-article-title{font-size:28px;line-height:34px;font-weight:700;letter-spacing:var(--ios-trk-title)}
@media (min-width:768px){body.cm-area .cm-article-title{font-size:32px;line-height:40px}}
body.cm-area .cm-article-body{font-size:17px;line-height:26px}
body.cm-area .cm-article-body h2{font-size:22px;line-height:28px;font-weight:700;margin:1.3em 0 .4em}
body.cm-area .cm-article-body h3{font-size:19px;line-height:24px;font-weight:600}
body.cm-area .cm-article-body blockquote{background:var(--ios-fill-2);border-left-color:var(--ios-tint);border-radius:0 14px 14px 0}
body.cm-area :is(.cm-article-hero,.cm-article-body figure img){border-radius:14px}
/* Karta artykułu w liście: okładka od krawędzi karty (jak karty „Dziś” w App Store), zajawka 15, liczniki 13. */
body.cm-area .cm-article-card>.cm-article-cover{width:auto;margin:-16px -16px 0;border-radius:var(--cm-radius) var(--cm-radius) 0 0}
@media (min-width:640px){body.cm-area .cm-article-card>.cm-article-cover{margin:-20px -22px 0}}
body.cm-area .cm-article-card .cm-article-lead{font-size:15px;line-height:20px;color:var(--ios-label-2)}
body.cm-area .cm-article-counts{font-size:13px;line-height:18px;color:var(--ios-label-2)}

/* ---------- 3. Profil ---------- */
/* Telefon: wizytówka jak w Kontaktach - wyśrodkowany awatar 96 na krawędzi okładki, imię jako tytuł, rząd kapsuł
   („Wiadomość” wypełniona, ⋮ jako szare kółko). Okładka płaska, bez cienia i linii. */
body.cm-area .cm-profile{padding:0 16px 16px}
body.cm-area .cm-profile-cover{margin:0 -16px;border-bottom:0;box-shadow:none}
body.cm-area .cm-profile-head .cm-headline{font-size:15px;line-height:20px;color:var(--ios-label-2)}
body.cm-area .cm-profile-id .cm-meta{font-size:13px;line-height:18px;color:var(--ios-label-2)}
body.cm-area .cm-profile-head>.cm-avatar:not([class*="cm-frame-"]),body.cm-area .cm-profile-head>.cm-avatar-wrap>.cm-avatar:not([class*="cm-frame-"]){box-shadow:0 0 0 4px var(--ios-surface)}
@media (max-width:640px){
  body.cm-area .cm-profile-head{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
  body.cm-area .cm-profile.has-cover .cm-profile-head{margin-top:-48px}
  body.cm-area .cm-profile-head .cm-avatar-xl{width:96px;height:96px;font-size:34px}
  body.cm-area .cm-profile.has-cover .cm-profile-id{padding-top:0}
  body.cm-area .cm-profile-id{width:100%}
  body.cm-area .cm-profile-head h1{font-size:28px;line-height:34px;font-weight:700;letter-spacing:var(--ios-trk-title)}
  body.cm-area .cm-profile-id :is(.cm-meta,.cm-askme,.cm-fact){justify-content:center}
  body.cm-area .cm-profile-actions{justify-content:center;padding-top:0}
}
body.cm-area .cm-profile-actions{gap:10px}
body.cm-area .cm-profile-actions .cm-btn{min-height:44px;padding:0 22px;font-size:15px;line-height:20px}
html:not([data-theme="light"]) body.cm-area .cm-profile-actions .cm-icon-btn,[data-theme="light"] body.cm-area .cm-profile-actions .cm-icon-btn{width:44px;height:44px;padding:0;border-radius:999px;background:var(--ios-fill);color:var(--ios-label)}
body.cm-area .cm-profile-actions .cm-icon-btn svg{width:20px;height:20px}
body.cm-area .cm-medal-ico{box-shadow:none}
/* Liczby w kolumnach (liczba nad podpisem), bez zmiany znaczników: każdy element to „N podpis” - duża odległość
   między słowami łamie go po liczbie, a pierwsza linia dostaje rozmiar liczby. Poziom aktywności (pierwszy element)
   i na własnym profilu „do poziomu… brakuje…” (ostatni) jako podpis pod kolumnami. */
body.cm-area .cm-profile-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 0;padding-top:14px;border-top:.5px solid var(--ios-sep);font-size:13px;line-height:18px;color:var(--ios-label-2);text-align:center}
/* Statystyki w kolumnach (liczba nad podpisem) ze znaczników: <b> = liczba, osobne klasy dla poziomu i podpowiedzi
   (app-community-people.js) - bez sztuczki word-spacing/::first-line i bez rozpoznawania własnego profilu po linku. */
body.cm-area .cm-profile-stats>.cm-stat-num{flex:1 1 0;min-width:64px;display:flex;flex-direction:column;align-items:center}
body.cm-area .cm-profile-stats>.cm-stat-num>b{font-size:20px;line-height:26px;font-weight:700;color:var(--ios-label);font-variant-numeric:tabular-nums}
body.cm-area .cm-profile-stats>.cm-stat-level{order:1;flex-basis:100%}
body.cm-area .cm-profile-stats>.cm-stat-hint{order:2;flex-basis:100%}
/* Aktywność na profilu: jedna lista grupowana, wiersz ze strzałką w prawo (przejście), linie 0,5 px. */
body.cm-area #cm-activity:has(>.cm-activity){gap:0;background:var(--ios-surface);border-radius:var(--cm-radius)}
body.cm-area #cm-activity>.cm-activity{position:relative;gap:2px;min-height:52px;padding:12px 40px 12px 16px;border:0;border-radius:0;background:transparent;transition:background-color .3s}
body.cm-area #cm-activity>.cm-activity:first-child{border-top-left-radius:var(--cm-radius);border-top-right-radius:var(--cm-radius)}
body.cm-area #cm-activity>.cm-activity:last-child{border-bottom-left-radius:var(--cm-radius);border-bottom-right-radius:var(--cm-radius)}
body.cm-area #cm-activity>.cm-activity+.cm-activity::before{content:"";position:absolute;top:0;left:16px;right:0;border-top:.5px solid var(--ios-sep);pointer-events:none}
body.cm-area #cm-activity>.cm-activity::after{content:"";position:absolute;top:50%;right:16px;width:8px;height:14px;margin-top:-7px;background:var(--ios-label-3);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M1.5 1.5 6.5 7l-5 5.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M1.5 1.5 6.5 7l-5 5.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
body.cm-area .cm-activity-title{font-size:17px;line-height:22px;font-weight:600}
body.cm-area .cm-activity-text{font-size:15px;line-height:20px;-webkit-line-clamp:2}
body.cm-area .cm-activity .cm-small{font-size:13px;line-height:18px;color:var(--ios-label-2)}

/* ---------- 4. Członkowie ---------- */
/* Wyszukiwarka jako kapsuła z lupą, obok „Szukaj” jako zwykły przycisk tekstowy (jak „Anuluj” przy polu
   wyszukiwania w iOS); pod spodem sortowanie i filtry jako kapsuły-menu, filtry w jednym przewijanym rzędzie. */
body.cm-area .cm-member-search{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;margin-bottom:14px}
/* Pole w opakowaniu z przyciskiem „×” (wyszukiwanie na bieżąco, bez „Szukaj”): pełna szerokość wiersza. */
body.cm-area .cm-member-search>.cm-search-field{position:relative;grid-column:1/-1;grid-row:1;min-width:0}
body.cm-area .cm-search-field>#cm-m-q{width:100%}
body.cm-area .cm-member-search>.cm-btn{grid-column:3;grid-row:1}
body.cm-area .cm-member-search>#cm-m-sort{grid-column:1;grid-row:2}
body.cm-area .cm-member-search>.cm-member-filters{grid-column:2/4;grid-row:2;flex-wrap:nowrap;gap:8px;min-width:0;overflow-x:auto;scrollbar-width:none;padding-block:4px;margin-block:-4px}
body.cm-area .cm-member-filters::-webkit-scrollbar{display:none}
@media (max-width:639px){
  body.cm-area .cm-member-search>.cm-member-filters{margin-right:-16px;padding-right:16px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 16px),transparent)}
  body.cm-area .cm-member-search>.cm-member-filters::after{content:"";flex:0 0 12px}
}
html:not([data-theme="light"]) body.cm-area #cm-m-q,[data-theme="light"] body.cm-area #cm-m-q{height:40px;min-height:40px;padding:0 14px 0 38px;border-color:transparent;border-radius:999px;background-color:var(--ios-fill);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239DA3B4' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:13px 50%;background-size:17px 17px}
/* Jasny motyw: index.html nadpisuje tło i obramowanie pól z !important - kapsuły muszą odpowiedzieć tym samym. */
[data-theme="light"] body.cm-area #cm-m-q{background-color:var(--ios-fill)!important;border-color:transparent!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E6270' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E")}
html:not([data-theme="light"]) body.cm-area .cm-member-search>.cm-btn:not(.cm-btn-primary),[data-theme="light"] body.cm-area .cm-member-search>.cm-btn:not(.cm-btn-primary){min-height:44px;padding:0 4px;background:transparent;color:var(--ios-tint);font-size:17px;font-weight:400}
body.cm-area .cm-member-search>.cm-btn svg{display:none}
/* Kapsuły-menu (sortowanie w kanale i u członków, branża, cel): 36 px widoczne, na dotyku 44 px przez przezroczystą
   ramkę (select nie ma pseudo-elementów); tekst 16 px na dotyku, żeby Safari nie przybliżał strony. */
html:not([data-theme="light"]) body.cm-area :is(.cm-select-sm,#cm-m-sort),[data-theme="light"] body.cm-area :is(.cm-select-sm,#cm-m-sort){width:auto;max-width:100%;height:auto;min-height:36px;padding:0 32px 0 14px;border:0 solid transparent;border-radius:999px;background-color:var(--ios-fill);background-position:right 11px center;background-size:14px;font-size:15px;line-height:20px;font-weight:600;color:var(--ios-label)}
[data-theme="light"] body.cm-area :is(.cm-select-sm,#cm-m-sort){background-color:var(--ios-fill)!important;border-color:transparent!important}
/* Szerokość według wybranej opcji, nie najdłuższej (Chromium; gdzie brak wsparcia - szerokość najdłuższej opcji). */
@supports (field-sizing:content){body.cm-area :is(.cm-select-sm,#cm-m-sort){field-sizing:content}}
@media (pointer:coarse){
  html:not([data-theme="light"]) body.cm-area :is(.cm-select-sm,#cm-m-sort),[data-theme="light"] body.cm-area :is(.cm-select-sm,#cm-m-sort){min-height:44px;border-width:4px;background-clip:padding-box;font-size:16px}
  body.cm-area :is(.cm-select-sm,#cm-m-sort):focus-visible{outline-offset:-3px}
}
body.cm-area .cm-member-filters .cm-chip{position:relative;min-height:36px;font-size:15px;line-height:20px;font-weight:600}
body.cm-area .cm-member-filters .cm-chip::after{content:"";position:absolute;inset:-4px 0}
/* Telefon: osoby jako wiersze jednej listy (awatar 48, tekst wcięty za awatar, linie 0,5 px od tekstu),
   „Napisz” jako mała szara kapsuła po prawej. Komputer: siatka kart bez zmian. */
@media (max-width:639px){
  body.cm-area .cm-member-grid:has(>.cm-member){gap:0;background:var(--ios-surface);border-radius:var(--cm-radius)}
  body.cm-area .cm-member-grid>.cm-member{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:12px;row-gap:4px;padding:12px 16px;border-radius:0;background:transparent;transition:background-color .3s}
  body.cm-area .cm-member-grid>.cm-member:first-child{border-top-left-radius:var(--cm-radius);border-top-right-radius:var(--cm-radius)}
  body.cm-area .cm-member-grid>.cm-member:last-child{border-bottom-left-radius:var(--cm-radius);border-bottom-right-radius:var(--cm-radius)}
  body.cm-area .cm-member-grid>.cm-member+.cm-member::before{content:"";position:absolute;top:0;left:76px;right:0;border-top:.5px solid var(--ios-sep);pointer-events:none}
  body.cm-area .cm-member-grid>.cm-member>*{grid-column:1/-1;margin:0 0 0 60px}
  body.cm-area .cm-member-grid>.cm-member>.cm-member-main{grid-column:1;grid-row:1;margin:0}
  body.cm-area .cm-member-grid>.cm-member>.cm-member-foot{display:contents}
  body.cm-area .cm-member-grid .cm-member-foot>.cm-btn{grid-column:2;grid-row:1;align-self:center}
  body.cm-area .cm-member-grid .cm-member-foot>span{grid-column:1/-1;margin-left:60px}
  body.cm-area .cm-member-grid .cm-member-foot>span:empty{display:none}
  body.cm-area .cm-member-grid .cm-member .cm-avatar-lg{width:48px;height:48px;font-size:18px}
  body.cm-area .cm-member-grid .cm-member-foot>.cm-btn svg{display:none}
}
body.cm-area .cm-member-name{font-size:17px;line-height:22px;font-weight:600}
body.cm-area .cm-member-headline{font-size:15px;line-height:20px;color:var(--ios-label-2)}
body.cm-area .cm-member-industry{font-size:13px;line-height:18px;color:var(--ios-label-2)}
body.cm-area .cm-member-about{font-size:15px;line-height:20px}
body.cm-area .cm-member-askme{font-size:13px;line-height:18px}
body.cm-area .cm-member-foot .cm-small{font-size:13px;line-height:18px;color:var(--ios-label-2)}
body.cm-area :is(.cm-member-foot,.cm-buddy-card) .cm-btn{position:relative;min-height:32px;padding:0 14px;font-size:15px;line-height:20px}
body.cm-area :is(.cm-member-foot,.cm-buddy-card) .cm-btn::after{content:"";position:absolute;inset:-6px -4px}
/* Partner do nauki: spokojna karta, akcent tylko na przycisku. */
body.cm-area .cm-buddy-head h2{font-size:17px;line-height:22px;font-weight:600}
body.cm-area .cm-buddy-head h2 svg{color:var(--ios-label-2)}
body.cm-area .cm-buddy-head p{font-size:15px;line-height:20px;color:var(--ios-label-2)}
body.cm-area .cm-buddy-card{border-radius:16px}
body.cm-area .cm-buddy-why{font-size:13px;line-height:18px;font-weight:600;color:var(--ios-label-2)}
body.cm-area .cm-buddy-headline{font-size:13px;line-height:18px}

/* ---------- 5. Wydarzenia ---------- */
/* Jedna data w jednym stylu: kafelek jak ikona Kalendarza (miesiąc w akcencie, dzień duży), duża data wyróżnionego
   spotkania w tym samym języku - płaska powierzchnia, bez gradientu i poświaty. */
body.cm-area :is(.cm-event,.cm-trend-event) .cm-date{width:52px;border:0;border-radius:12px;background:var(--ios-surface-2);box-shadow:none}
body.cm-area :is(.cm-event,.cm-trend-event) .cm-date b{padding:5px 0 0;background:none;color:var(--ios-tint);font-size:12px;line-height:14px;font-weight:600;letter-spacing:0;text-transform:capitalize}
body.cm-area :is(.cm-event,.cm-trend-event) .cm-date span{padding:0 0 5px;font-size:22px;line-height:26px;font-weight:700;letter-spacing:0;color:var(--ios-label)}
body.cm-area .cm-trend-event .cm-date{width:46px}
body.cm-area .cm-trend-event .cm-date span{font-size:19px;line-height:23px}
body.cm-area .cm-event-bigdate{background:var(--ios-surface-2);border-color:var(--ios-sep);border-right-width:.5px;color:var(--ios-label)}
body.cm-area .cm-bd-week{font-size:13px;line-height:18px;font-weight:600;color:var(--ios-tint)}
body.cm-area .cm-bd-month{font-size:13px;line-height:18px;font-weight:600;color:var(--ios-label-2)}
body.cm-area .cm-bd-day{background:none;color:var(--ios-label);font-weight:700;letter-spacing:0;font-variant-numeric:tabular-nums}
body.cm-area .cm-bd-time{background:var(--ios-fill);color:var(--ios-label);font-size:13px;line-height:18px;font-weight:600;font-variant-numeric:tabular-nums}
@media (max-width:639px){body.cm-area .cm-event-bigdate{border-right-width:0;border-bottom-width:.5px}}
body.cm-area .cm-event-kicker{font-size:13px;line-height:18px;font-weight:600;color:var(--ios-label-2)}
body.cm-area .cm-event-title{font-size:20px;line-height:25px;font-weight:700}
body.cm-area .cm-event-h1{font-size:28px;line-height:34px;font-weight:700;letter-spacing:var(--ios-trk-title)}
body.cm-area .cm-event-when{font-size:15px;line-height:20px;color:var(--ios-label)}
body.cm-area .cm-event-when svg{width:17px;height:17px;color:var(--ios-label-2)}
body.cm-area .cm-event-lead{font-size:15px;line-height:20px}
body.cm-area .cm-countdown strong{font-variant-numeric:tabular-nums}
/* Wiersze listy (później, nagrania): sąsiednie wiersze sklejone w jedną grupę z linią 0,5 px od tekstu. */
body.cm-area #cm-events>.cm-event{position:relative;align-items:center;gap:12px;padding:12px 16px;transition:background-color .3s}
body.cm-area #cm-events>.cm-event+.cm-event{margin-top:-12px;border-top-left-radius:0;border-top-right-radius:0}
body.cm-area #cm-events>.cm-event:has(+.cm-event){border-bottom-left-radius:0;border-bottom-right-radius:0}
body.cm-area #cm-events>.cm-event+.cm-event::before{content:"";position:absolute;top:0;left:80px;right:0;border-top:.5px solid var(--ios-sep);pointer-events:none}
body.cm-area .cm-event-row-title{font-size:17px;line-height:22px;font-weight:600}
body.cm-area .cm-event-row .cm-small{font-size:13px;line-height:18px}
/* Akcje: na karcie wyróżnionej „Zapisz się” i „Do kalendarza” równej szerokości; na szczegółach główna kapsuła
   na całą szerokość, pod nią równe kafelki (ikona nad podpisem: kalendarz, dyskusja, zarządzanie). */
body.cm-area .cm-event-actions{display:flex;flex-wrap:wrap;gap:5px 8px}
body.cm-area .cm-event-actions::before{content:"";order:1;flex:0 0 100%;height:0}
body.cm-area .cm-event-actions>:is(.cm-btn,.cm-link,.cm-going){min-height:44px;font-size:15px;line-height:20px}
body.cm-area .cm-event-actions>.cm-btn-primary{flex:1 1 100%;min-height:50px;font-size:17px}
body.cm-area .cm-event-actions>.cm-going{flex:1 1 auto}
body.cm-area .cm-event-actions>button.cm-link{flex:none;padding:0 4px}
body.cm-area .cm-event-actions>:is(.cm-btn:not(.cm-btn-primary),a.cm-link){order:2;flex:1 1 0;min-width:0;padding:0 10px;white-space:nowrap}
html:not([data-theme="light"]) body.cm-area .cm-event-actions>a.cm-link,[data-theme="light"] body.cm-area .cm-event-actions>a.cm-link{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:var(--ios-fill);color:var(--ios-label);font-weight:600;text-decoration:none}
body.cm-area #cm-ev-info .cm-event-actions>.cm-btn:not(.cm-btn-primary){flex-direction:column;gap:4px;min-height:64px;padding:10px 4px;border-radius:16px;font-size:13px;line-height:16px}
body.cm-area #cm-ev-info .cm-event-actions>.cm-btn:not(.cm-btn-primary) svg{width:22px;height:22px}
/* Wyróżnione spotkanie z dużą datą: data raz (pas daty); wiersz z datą tylko dla czytnika ekranu (pas ma aria-hidden). */
body.cm-area .cm-event-feature.is-plain .cm-event-when{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- 6. Ranking ---------- */
/* Postęp płasko (akcent bez gradientu), zasady jako wiersz z chevronem zamiast trójkąta, spokojniejsze podium,
   miejsca od 4 jako lista grupowana. */
body.cm-area :is(.cm-progress-card,.cm-onboard-progress) .cm-progress{height:6px;background:var(--ios-fill)}
body.cm-area :is(.cm-progress-card,.cm-onboard-progress) .cm-progress>div{background:var(--ios-tint)}
body.cm-area .cm-progress-level{font-size:17px;line-height:22px;font-weight:600}
body.cm-area .cm-progress-card .cm-small{font-size:13px;line-height:18px}
body.cm-area .cm-week strong{font-size:22px;line-height:26px;font-weight:700;color:var(--ios-tint);font-variant-numeric:tabular-nums}
body.cm-area .cm-week span{font-size:13px;line-height:18px;color:var(--ios-label-2)}
body.cm-area .cm-week-parts span{padding:3px 10px;font-size:13px;line-height:18px;background:var(--ios-fill-2);color:var(--ios-label-2)}
body.cm-area .cm-rank-next{min-height:52px;padding:10px 16px;border-radius:16px}
body.cm-area .cm-rank-next .cm-rank-next-arrow{color:var(--ios-label-3)}
body.cm-area .cm-earn{padding:14px 16px 0}
body.cm-area .cm-earn-chip{border:0;padding:5px 11px;font-size:13px;line-height:18px;background:var(--ios-fill-2);color:var(--ios-label-2)}
body.cm-area .cm-earn-chip strong{color:var(--ios-label)}
body.cm-area .cm-earn-more{margin:12px -16px 0;border-top:.5px solid var(--ios-sep)}
body.cm-area .cm-earn-more summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:0 16px;font-size:15px;line-height:20px;font-weight:400;color:var(--ios-label)}
body.cm-area .cm-earn-more summary::-webkit-details-marker{display:none}
body.cm-area .cm-earn-more summary::after{content:"";flex:none;width:8px;height:14px;background:var(--ios-label-3);transition:rotate .25s var(--ios-ease);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M1.5 1.5 6.5 7l-5 5.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M1.5 1.5 6.5 7l-5 5.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
body.cm-area .cm-earn-more[open] summary{margin-bottom:0}
body.cm-area .cm-earn-more[open] summary::after{rotate:90deg}
body.cm-area .cm-earn-more summary:focus-visible{outline-offset:-4px;border-radius:12px}
body.cm-area .cm-earn-more>:not(summary){margin-inline:16px}
body.cm-area .cm-earn-more>:last-child{padding-bottom:14px}
body.cm-area .cm-levels{gap:0}
body.cm-area .cm-level-row{padding:10px 0;border-radius:0;font-size:15px;line-height:20px}
body.cm-area .cm-level-row+.cm-level-row{border-top:.5px solid var(--ios-sep)}
body.cm-area .cm-level-row.is-current{background:transparent;color:var(--ios-tint);font-weight:600}
body.cm-area .cm-earn-more h4{margin:16px 16px 4px;font-size:13px;line-height:18px;font-weight:600;color:var(--ios-label-2)}
body.cm-area .cm-podium{gap:10px;margin:8px 0 14px}
body.cm-area .cm-podium-name{font-size:13px;line-height:18px;font-weight:600}
body.cm-area .cm-podium-pts{font-size:13px;line-height:18px;font-weight:400;color:var(--ios-label-2);font-variant-numeric:tabular-nums}
body.cm-area .cm-podium-step{padding-top:6px;border:0;border-radius:12px 12px 6px 6px;background:var(--ios-fill-2);font-size:17px;line-height:22px;font-weight:600;color:var(--ios-label-2)}
body.cm-area .cm-podium-place.is-1 .cm-podium-step{height:56px;color:var(--ios-label)}
body.cm-area .cm-podium-place.is-2 .cm-podium-step{height:42px}
body.cm-area .cm-podium-place.is-3 .cm-podium-step{height:32px}
body.cm-area .cm-podium-place.is-1 .cm-avatar:not([class*="cm-frame-"]){box-shadow:0 0 0 2px var(--ios-tint)}
body.cm-area .cm-box:has(>.cm-rank){padding:0}
body.cm-area .cm-box>.cm-rank{position:relative;min-height:52px;gap:12px;padding:8px 16px;border-bottom:0;transition:background-color .3s}
body.cm-area .cm-box>.cm-rank:first-child{border-top-left-radius:var(--cm-radius);border-top-right-radius:var(--cm-radius)}
body.cm-area .cm-box>.cm-rank:last-child{border-bottom-left-radius:var(--cm-radius);border-bottom-right-radius:var(--cm-radius)}
body.cm-area .cm-box>.cm-rank+.cm-rank::before{content:"";position:absolute;top:0;left:98px;right:0;border-top:.5px solid var(--ios-sep);pointer-events:none}
body.cm-area .cm-rank-no{font-size:15px;font-weight:600;color:var(--ios-label-2);font-variant-numeric:tabular-nums}
body.cm-area .cm-rank-pts{font-size:15px;font-weight:600;color:var(--ios-label);font-variant-numeric:tabular-nums}
/* Medale 1-3 płaskie, bez poświaty. */
body.cm-area .cm-rank-no.is-1{background:var(--ios-tint);color:var(--ios-on-tint);box-shadow:none}
body.cm-area .cm-rank-no.is-2{background:#AEB6C2;color:#0a0f14}
body.cm-area .cm-rank-no.is-3{background:#C07A45;color:#0a0f14}

/* ---------- 7. „Zacznij tu” ---------- */
body.cm-area .cm-next-step h2{font-size:22px;line-height:28px;font-weight:700}
body.cm-area .cm-next-step .cm-kicker{font-size:13px;line-height:18px;font-weight:600;color:var(--ios-label-2)}
body.cm-area .cm-next-step p.cm-muted:not(.cm-small){font-size:15px;line-height:20px}
body.cm-area .cm-onboard-stage .cm-section-title{font-size:20px;line-height:25px;font-weight:700;margin-bottom:8px}
body.cm-area .cm-checklist{border:0;background:var(--ios-surface);border-radius:var(--cm-radius)}
body.cm-area .cm-check{position:relative;min-height:52px;gap:12px;padding:10px 16px;border-bottom:0;transition:background-color .3s}
body.cm-area .cm-check:first-child{border-top-left-radius:var(--cm-radius);border-top-right-radius:var(--cm-radius)}
body.cm-area .cm-check:last-child{border-bottom-left-radius:var(--cm-radius);border-bottom-right-radius:var(--cm-radius)}
body.cm-area .cm-check+.cm-check::before{content:"";position:absolute;top:0;left:50px;right:0;border-top:.5px solid var(--ios-sep);pointer-events:none}
body.cm-area .cm-check-mark{border-width:1.5px;border-color:var(--ios-label-3)}
body.cm-area .cm-check.is-next .cm-check-mark{border-width:2px;border-color:var(--ios-tint)}
body.cm-area .cm-check-title{line-height:20px}
body.cm-area .cm-check-body .cm-small{font-size:13px;line-height:18px}
body.cm-area .cm-check .cm-btn{position:relative;flex:none;min-height:30px;padding:0 12px;font-size:13px;line-height:18px}
body.cm-area .cm-check .cm-btn::after{content:"";position:absolute;inset:-7px -4px}

/* ---------- 8. Prawa kolumna (komputer) ---------- */
/* Sekcje jak grupy iOS: nagłówek nad grupą, wiersze na wspólnej powierzchni z zaokrąglonymi rogami grupy,
   linie 0,5 px wcięte do tekstu, link „Cały ranking” / „Pokaż wszystkie” jako stopka pod grupą. Powierzchnia wiersza
   jako cień wewnętrzny, bo przyciski wierszy mają background:none w atrybucie style. */
@media (min-width:1280px){
  body.cm-area .cm-aside .cm-stack{gap:22px}
  body.cm-area .cm-aside .cm-box{padding:0;border-radius:0;background:transparent}
  body.cm-area .cm-aside .cm-box>h3{margin:0 0 7px;padding:0 16px}
  body.cm-area .cm-aside .cm-box>:not(h3):not(.cm-link){position:relative;margin:0;border-radius:0;box-shadow:inset 0 0 0 100vmax var(--ios-surface)}
  body.cm-area .cm-aside .cm-box>h3+:not(.cm-link){border-top-left-radius:18px;border-top-right-radius:18px}
  body.cm-area .cm-aside .cm-box>:not(h3):not(.cm-link):not(:has(~:not(.cm-link))){border-bottom-left-radius:18px;border-bottom-right-radius:18px}
  body.cm-area .cm-aside .cm-box>.cm-trend{min-height:44px;padding:10px 16px;border-bottom:0;transition:box-shadow .2s}
  body.cm-area .cm-aside .cm-box>.cm-rank{min-height:44px;padding:8px 16px;border-bottom:0}
  body.cm-area .cm-aside .cm-box>.cm-hashtags{padding:12px}
  body.cm-area .cm-aside .cm-box>.cm-lesson-ref{display:flex;width:100%;padding:12px 16px;border-radius:18px;font-size:14px;line-height:19px}
  body.cm-area .cm-aside .cm-box>:is(.cm-trend,.cm-rank)+:is(.cm-trend,.cm-rank)::before{content:"";position:absolute;top:0;left:16px;right:0;border-top:.5px solid var(--ios-sep);pointer-events:none}
  body.cm-area .cm-aside .cm-box>.cm-trend-event+.cm-trend-event::before{left:74px}
  body.cm-area .cm-aside .cm-box>.cm-trend-numbered+.cm-trend-numbered::before{left:56px}
  body.cm-area .cm-aside .cm-box>.cm-rank+.cm-rank::before{left:90px}
  body.cm-area .cm-aside .cm-box>.cm-link{margin-inline:16px;font-size:13px;line-height:18px;font-weight:600;color:var(--ios-tint)}
  body.cm-area .cm-aside .cm-trend-title{font-size:14px;line-height:19px;font-weight:600}
  body.cm-area .cm-aside .cm-trend .cm-small{font-size:12px;line-height:16px;color:var(--ios-label-2)}
  body.cm-area .cm-aside .cm-trend-no{width:28px;font-size:17px;line-height:22px}
  body.cm-area .cm-aside .cm-rank-pts{font-size:13px}
}

/* ---------- 9. Puste stany, sortowanie, akcje strony ---------- */
/* Pusty stan jak w iOS: ikona w kolorze trzeciorzędnym, tytuł Title 3, opis 15. */
body.cm-area .cm-empty{padding:40px 24px;font-size:15px;line-height:20px;color:var(--ios-label-2)}
body.cm-area .cm-empty strong{margin-bottom:6px;font-size:20px;line-height:25px;font-weight:600;color:var(--ios-label)}
body.cm-area .cm-empty strong::before{width:44px;height:44px;margin:0 auto 14px;border-radius:0;box-shadow:none;background:var(--ios-label-3);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E") center/contain no-repeat}
/* Telefon: akcje strony pod dużym tytułem w jednym rzędzie małych kapsuł (36 px widoczne, 44 px pola trafienia). */
@media (max-width:1023px){
  body.cm-area .cm-page-actions{gap:8px;min-height:0}
  body.cm-area .cm-page-actions .cm-btn{position:relative;min-height:36px;padding:0 16px;font-size:15px;line-height:20px}
  body.cm-area .cm-page-actions .cm-btn::after{content:"";position:absolute;inset:-4px 0}
}

/* ---------- 10. Najechanie tylko myszą, reakcja na dotyk, ograniczony ruch ---------- */
@media (hover:hover) and (pointer:fine){
  body.cm-area .cm-prompt-types button:hover{background:var(--ios-fill)}
  body.cm-area .cm-act:hover,body.cm-area .cm-comment-tools button:not(.is-on):hover{color:var(--ios-label)}
  body.cm-area .cm-aside .cm-box>:is(.cm-trend,.cm-lesson-ref):hover{box-shadow:inset 0 0 0 100vmax color-mix(in srgb,var(--ios-surface) 92%,var(--ios-label))}
  body.cm-area .cm-aside .cm-trend:hover .cm-trend-title{text-decoration:none}
  body.cm-area #cm-activity>.cm-activity:hover{background:var(--ios-fill-2)}
}
/* Dotyk: bez „przyklejonego” najechania po stuknięciu (reguły bazowe nie są w media query). */
@media (hover:none){
  body.cm-area .cm-act:hover,body.cm-area .cm-react-more:hover,body.cm-area .cm-comment-tools button:hover{background:transparent}
  body.cm-area .cm-act:not(.is-on):hover,body.cm-area .cm-react-more:hover,body.cm-area .cm-comment-tools button:not(.is-on):hover{color:var(--ios-label-2)}
  body.cm-area .cm-prompt-types button:hover{background:var(--ios-fill-2);color:var(--ios-label)}
  body.cm-area :is(.cm-stats-comments:hover,.cm-stats-likes:hover span){color:inherit;text-decoration:none}
  body.cm-area #cm-activity>.cm-activity:hover{border-color:transparent}
  /* Wiersz podświetla się od razu (bez przejścia), gaśnie płynnie. */
  body.cm-area :is(#cm-activity>.cm-activity,#cm-events>.cm-event):active,body.cm-area .cm-member-grid>.cm-member:has(>.cm-member-main:active){background:var(--ios-fill-2);transition:none}
  body.cm-area :is(.cm-box>.cm-rank,.cm-check):active{transition:none}
  body.cm-area .cm-prompt-types button:active{background:var(--ios-fill)}
}
@media (prefers-reduced-motion:reduce){
  body.cm-area :is(#cm-activity>.cm-activity,.cm-member-grid>.cm-member,#cm-events>.cm-event,.cm-box>.cm-rank,.cm-check,.cm-aside .cm-box>.cm-trend),body.cm-area .cm-earn-more summary::after{transition:none}
}
/* ---------- Faza B: nakładki (fragment agenta, scratchpad/ios/frag-nakladki.css) ---------- */
/* ================= iOS premium, runda 4 - nakładki (11.10) =================
   Okna i arkusze, kompozytor, arkusze „Więcej” i „Tematy”, dzwonek, menu wpisu, emoji i nastrój, pasek reakcji, toast.
   Rozwija blok „iOS premium, runda 4” (tokeny --ios-*, szkło, przyciemnienie, cm-ios-*), bez zmian w JS.
   Telefon (<640): arkusze z uchwytem 36x5 i promieniem 38. Okna częściowej wysokości i dzwonek pływają 8 px nad krawędzią,
   kompozytor (pełna wysokość) jest nieprzezroczysty z odstępem u góry, emoji i nastrój stoją przy dole jak klawiatura.
   Komputer: okna z promieniem 28, wejście „wyrastające” sprężyną.
   Szkło tylko na nakładkach; listy w arkuszach na pełnym tle (nic nie prześwituje spod spodu). */
body.cm-area{
  --nk-r-sheet:38px;--nk-r-alert:28px;--nk-r-menu:22px;--nk-r-group:22px;--nk-grab:var(--ios-label-3);
  --ios-spring-snappy:cubic-bezier(.32,.72,0,1);--ios-spring-bouncy:cubic-bezier(.34,1.35,.64,1);
  --nk-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M1.5 1.5 6.5 7l-5 5.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --nk-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14'%3E%3Cpath d='M1.8 7.4 6 11.6 14.2 2.4' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Sprężyny SwiftUI (bounce .15 / .3) z ios-spec.md; Safari 17.2+, starsze zostają przy cubic-bezier. */
@supports (transition-timing-function:linear(0,1)){body.cm-area{
  --ios-spring-snappy:linear(0,.069,.218,.388,.547,.681,.786,.864,.919,.956,.98,.994,1.002,1.005,1.006,1.006,1.005,1.004,1);
  --ios-spring-bouncy:linear(0,.066,.217,.397,.573,.725,.846,.933,.991,1.025,1.042,1.046,1.043,1.036,1.028,1.02,1.013,1.007,1.003,1,.999,.998,1)}}
/* Tło arkusza z listą i komórki sekcji (iOS: grouped). Kafelki ikon w granacie, aktywny w złocie. */
html:not([data-theme="light"]) body.cm-area{--nk-sheet-bg:var(--ios-elev);--nk-cell:var(--ios-fill-2);--nk-cell-press:var(--ios-fill);--nk-tile:#2A3F6E;--nk-tile-ink:#fff;
  --nk-search-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239DA3B4' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m20 20-4.8-4.8'/%3E%3C/svg%3E")}
[data-theme="light"] body.cm-area{--nk-sheet-bg:var(--ios-bg);--nk-cell:var(--ios-surface);--nk-cell-press:#E5E5EA;--nk-tile:#1F3768;--nk-tile-ink:#fff;
  --nk-search-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E6270' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m20 20-4.8-4.8'/%3E%3C/svg%3E")}

/* ---------- Okna: nagłówek jak pasek nawigacji, zamykanie jako kółko ---------- */
body.cm-area .cm-dialog{border:0;overscroll-behavior:contain}
body.cm-area .cm-dialog-head h2{font-size:17px;line-height:22px;font-weight:600}
body.cm-area .cm-dialog-head :is(.cm-close,.cm-expand){flex:0 0 auto;width:32px;height:32px;padding:0;border-radius:50%;background:var(--ios-fill-2);color:var(--ios-label-2)}
body.cm-area .cm-dialog-head :is(.cm-close,.cm-expand) svg{width:16px;height:16px}
@media (hover:hover) and (pointer:fine){body.cm-area .cm-dialog-head :is(.cm-close,.cm-expand):hover{background:var(--ios-fill);color:var(--studio-ink)}}
/* Dotyk: cel 44 px, widoczne kółko 34 px (tło przycięte do środka). */
@media (pointer:coarse){body.cm-area .cm-dialog-head .cm-close{width:44px;height:44px;padding:5px;background-clip:content-box;margin-right:-5px}}
@media (min-width:640px){
  body.cm-area .cm-dialog{border-radius:var(--nk-r-alert);padding:20px 24px 24px}
  body.cm-area .cm-dialog-head{min-height:36px;margin-bottom:14px}
  body.cm-area .cm-dialog-head h2{font-size:20px;line-height:25px;font-weight:700}
}
/* Telefon: arkusz. Częściowa wysokość pływa nad krawędzią (iOS 26), uchwyt nad tytułem, tytuł na środku. */
@media (max-width:639px){
  body.cm-area .cm-modal{padding:8px}
  body.cm-area .cm-dialog{max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);padding:0 16px max(16px,env(safe-area-inset-bottom));border-radius:var(--nk-r-sheet)}
  body.cm-area .cm-dialog-head{position:relative;min-height:44px;margin:0 0 8px;padding-top:14px}
  /* Uchwyt tylko na oknach, które da się przeciągnąć w dół (is-swipe: arkusz i pełna wysokość) - na innych obiecywał gest, którego nie ma (audyt brak3-9). */
  body.cm-area .cm-dialog.is-swipe>.cm-dialog-head::before{content:"";position:absolute;top:5px;left:50%;width:36px;height:5px;margin-left:-18px;border-radius:3px;background:var(--nk-grab)}
  body.cm-area .cm-dialog-head h2{flex:1 1 auto;min-width:0;padding-left:44px;text-align:center;text-wrap:balance}
  /* Pełna wysokość (kompozytor): przyklejony do dołu, nieprzezroczysty, odstęp u góry pokazuje przyciemnioną stronę. */
  body.cm-area .cm-dialog.is-full{width:calc(100% + 16px);margin:0 -8px -8px;height:calc(100vh - 28px);height:calc(100dvh - max(20px,env(safe-area-inset-top) + 10px));max-height:none;padding-bottom:0;
    border-radius:var(--nk-r-sheet) var(--nk-r-sheet) 0 0;background:var(--ios-elev);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 .5px 0 var(--ios-glass-spec)}
}
@keyframes cm-nk-sheet{from{translate:0 calc(100% + 24px)}}
@keyframes cm-nk-grow{from{opacity:0;scale:.9}}
@keyframes cm-nk-pop{from{opacity:0;scale:.86}}
@keyframes cm-nk-fade{from{opacity:0}}
@media (prefers-reduced-motion:no-preference){
  @media (max-width:639px){body.cm-area .cm-dialog{animation:cm-nk-sheet .5s var(--ios-ease)}}
  @media (min-width:640px){body.cm-area .cm-dialog{animation:cm-nk-grow .45s var(--ios-spring-snappy)}}
}

/* ---------- Kompozytor ---------- */
/* Tytuł jak Title 2, treść jak Body; bez tła i ramek pól także w jasnym (index.html wymusza tam szare pola !important).
   Fokus zostaje: złota kreska z lewej (klawiatura i pisanie). */
body.cm-area .cm-c-form .cm-c-title{font-size:22px;line-height:28px;font-weight:700}
body.cm-area .cm-c-form .cm-c-body{font-size:16px;line-height:24px}
[data-theme="light"] body.cm-area .cm-c-form :is(.cm-c-title,.cm-c-body){background-color:transparent!important;border-color:transparent!important}
[data-theme="light"] body.cm-area .cm-c-form :is(.cm-c-title,.cm-c-body):focus-visible{border-left-color:var(--cm-gold)!important}
@media (pointer:coarse){body.cm-area .cm-c-form .cm-c-body{resize:none}}
@media (max-width:639px){body.cm-area .cm-c-form .cm-c-body{font-size:17px;line-height:25px;resize:none}}
/* Nastrój we wpisie: szara kapsuła (bez półprzezroczystego złota). */
body.cm-area .cm-c-mood-pick{min-height:36px;padding:7px 14px;border:0;background:var(--ios-fill-2)}
body.cm-area .cm-c-form .cm-restored{border-radius:14px;background:var(--ios-fill-2)}
/* Narzędzia: jeden przewijany rząd okrągłych przycisków (bez łamania na 2 rzędy), linia 0,5 px nad nim. */
body.cm-area .cm-c-tools{flex-wrap:nowrap;gap:2px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:6px 0;border-top:0;box-shadow:inset 0 .5px 0 var(--ios-sep)}
body.cm-area .cm-c-tools::-webkit-scrollbar{display:none}
body.cm-area .cm-c-tool{flex:0 0 auto;border-radius:999px;background:transparent;color:var(--ios-label-2)}
@media (hover:hover) and (pointer:fine){body.cm-area .cm-c-tool:hover{background:var(--ios-fill-2);color:var(--studio-ink)}}
@media (hover:none){body.cm-area .cm-c-tool:active{background:var(--ios-fill)}}
body.cm-area .cm-c-tool[aria-pressed="true"]{background:var(--ios-fill);color:var(--ios-tint)}
@media (max-width:639px){
  body.cm-area .cm-c-tools{justify-content:flex-start;gap:4px;margin:0 -16px;padding:6px 16px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 28px),transparent)}
  body.cm-area .cm-c-tools::after{content:"";flex:0 0 12px}
  /* Przewijanie zatrzymuje się na pełnych przyciskach - bez „mpt” i pół „Więcej” na krawędziach (audyt brak6-14). */
  body.cm-area .cm-c-tools{scroll-snap-type:x mandatory;scroll-padding-inline:16px}
  body.cm-area .cm-c-tool{scroll-snap-align:start}
}
/* Stopka: to samo tło co okno (bez „płyty”), przyciski jako kapsuły iOS. */
body.cm-area .cm-c-foot{gap:10px 12px;padding-top:6px;border-top:0}
@media (max-width:639px){html body.cm-area .cm-dialog.is-full .cm-c-foot{margin:0 -16px;padding:6px 16px max(12px,env(safe-area-inset-bottom));background:transparent}}
body.cm-area .cm-c-actions .cm-btn{min-height:40px;padding:0 20px;font-size:15px}
body.cm-area .cm-c-actions .cm-c-status{font-size:13px;color:var(--ios-label-2)}
@media (pointer:coarse){body.cm-area .cm-c-actions .cm-btn{min-height:48px;padding:0 22px;font-size:17px}}
/* Wybór miejsca: kapsuła z wypełnieniem; bez wybranego miejsca - złoty tekst i cienka linia akcentu. */
body.cm-area .cm-c-where-btn{min-height:36px;padding:0 12px 0 14px;border:0;background:var(--ios-fill-2);font-size:15px;font-weight:600}
body.cm-area .cm-c-where-btn.is-empty{color:var(--ios-tint);box-shadow:inset 0 0 0 1px var(--cm-gold-line)}
@media (pointer:coarse){body.cm-area .cm-c-where-btn{min-height:44px}}
@media (hover:hover) and (pointer:fine){body.cm-area .cm-c-where-btn:hover{background:var(--ios-fill)}}
body.cm-area .cm-c-where-list{padding:6px;border:0;border-radius:var(--nk-r-menu);background:var(--ios-glass-strong);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
  box-shadow:inset 0 .5px 0 var(--ios-glass-spec),inset 0 0 0 .5px var(--ios-glass-rim),var(--ios-glass-shadow)}
body.cm-area .cm-c-where-opt{min-height:44px;padding:10px 12px;border-radius:16px;background:transparent}
body.cm-area .cm-c-where-opt:has(input:checked) .cm-c-where-name{color:var(--ios-tint)}
@media (hover:hover) and (pointer:fine){body.cm-area .cm-c-where-opt:hover{background:var(--ios-fill-2)}}
@media (hover:none){body.cm-area .cm-c-where-opt:active{background:var(--ios-fill)}}
body.cm-area .cm-c-where-name{font-size:15px}
body.cm-area .cm-c-where-desc{font-size:13px;line-height:18px;color:var(--ios-label-2)}
/* „Zapytaj bez nazwiska”: wiersz z przełącznikiem iOS 51x31 po prawej (checkbox z appearance:none; ::before = gałka,
   sprawdzone w WebKit). Stan pokazuje przełącznik - bez złotego tła wiersza. Fokus z klawiatury na samym przełączniku. */
body.cm-area .cm-anon{align-items:flex-start;gap:12px;margin:10px 0 0;padding:12px 14px 12px 16px;border:0;border-radius:20px;background:var(--ios-fill-2)}
body.cm-area .cm-anon:has(input:checked){border-color:transparent;background:var(--ios-fill-2)}
body.cm-area .cm-anon:focus-within{outline:0}
body.cm-area .cm-anon>span{flex:1 1 auto;min-width:0}
body.cm-area .cm-anon strong{font-size:16px;line-height:21px;font-weight:600}
body.cm-area .cm-anon small{margin-top:3px;font-size:13px;line-height:18px;color:var(--ios-label-2)}
html body.cm-area .cm-anon input{-webkit-appearance:none;appearance:none;position:relative;order:2;flex:0 0 auto;width:51px;height:31px;margin:-5px 0 0;border:0;border-radius:31px;
  background:var(--ios-fill);cursor:pointer;transition:background-color .25s ease}
html body.cm-area .cm-anon input::before{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;
  box-shadow:0 3px 8px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.16);transition:translate .35s var(--ios-spring-snappy)}
html body.cm-area .cm-anon input:checked{background:var(--ios-tint)}
html body.cm-area .cm-anon input:checked::before{translate:20px 0}
html:not([data-theme="light"]) body.cm-area .cm-anon input:checked::before{box-shadow:0 0 0 .5px rgba(0,0,0,.35),0 3px 8px rgba(0,0,0,.3)}
html body.cm-area .cm-anon input:focus-visible{outline:2px solid var(--cm-gold);outline-offset:2px;border-radius:31px}
[data-theme="light"] body.cm-area .cm-anon input{background-color:var(--ios-fill)!important;border-color:transparent!important}
[data-theme="light"] body.cm-area .cm-anon input:checked{background-color:var(--ios-tint)!important}

/* ---------- Arkusze „Więcej” i „Tematy”: lista jak w Ustawieniach ---------- */
/* Pełne tło (lista nie prześwituje), sekcje w zaokrąglonych kontenerach, linie 0,5 px od tekstu, kafelki ikon,
   strzałka przy przejściu, aktywna pozycja: złoty kafelek i znacznik zamiast kreski. */
body.cm-area .cm-dialog:has(.cm-sheet){background:var(--nk-sheet-bg);-webkit-backdrop-filter:none;backdrop-filter:none}
@media (max-width:639px){body.cm-area .cm-dialog:has(.cm-sheet) .cm-dialog-head{position:sticky;top:0;z-index:2;margin:0 -16px 4px;padding:14px 16px 6px;background:var(--nk-sheet-bg)}}
body.cm-area .cm-sheet{gap:0;padding-bottom:4px}
html body.cm-area .cm-sheet>.cm-nav-group{margin:24px 16px 7px}
html body.cm-area .cm-sheet>.cm-nav-group:first-child{margin-top:4px}
html body.cm-area .cm-sheet>.cm-nav-item{position:relative;min-height:48px;margin:0;padding:9px 14px 9px 16px;gap:14px;border-radius:0;background:var(--nk-cell);color:var(--studio-ink);font-size:17px;line-height:22px;font-weight:400}
html body.cm-area .cm-sheet>.cm-nav-item:is(:first-child,:not(.cm-nav-item)+*){border-top-left-radius:var(--nk-r-group);border-top-right-radius:var(--nk-r-group)}
html body.cm-area .cm-sheet>.cm-nav-item:is(:last-child,:has(+:not(.cm-nav-item))){border-bottom-left-radius:var(--nk-r-group);border-bottom-right-radius:var(--nk-r-group)}
html body.cm-area .cm-sheet>.cm-nav-item+.cm-nav-item::before{content:"";position:absolute;top:0;right:0;bottom:auto;left:60px;width:auto;height:0;border-top:.5px solid var(--ios-sep);border-radius:0;background:none;box-shadow:none}
html body.cm-area .cm-sheet>.cm-nav-item.is-active{background:var(--nk-cell);font-weight:600}
html body.cm-area .cm-sheet>.cm-nav-item:active{background:var(--nk-cell-press)}
@media (hover:hover) and (pointer:fine){html body.cm-area .cm-sheet>.cm-nav-item:hover{background:var(--nk-cell-press)}}
html body.cm-area .cm-dialog .cm-sheet>.cm-nav-item svg{width:18px;height:18px;padding:6px;border-radius:8px;background:var(--nk-tile);color:var(--nk-tile-ink);box-shadow:none}
html body.cm-area .cm-dialog .cm-sheet>.cm-nav-item.is-active svg{background:var(--ios-tint);color:var(--ios-on-tint)}
html body.cm-area .cm-sheet>a.cm-nav-item::after{content:"";flex:0 0 auto;width:8px;height:14px;margin-left:2px;background:var(--ios-label-3);-webkit-mask:var(--nk-chevron) center/contain no-repeat;mask:var(--nk-chevron) center/contain no-repeat}
html body.cm-area .cm-sheet>a.cm-nav-item.is-active::after{width:16px;background:var(--ios-tint);-webkit-mask-image:var(--nk-check);mask-image:var(--nk-check)}
html body.cm-area .cm-sheet .cm-nav-dot{width:8px;height:8px;box-shadow:none}
html body.cm-area .cm-sheet>.cm-nav-start{margin:24px 0 0;padding:14px 16px;border:0;border-radius:var(--nk-r-group);background:var(--nk-cell);font-size:15px}

/* ---------- Dzwonek: lista jak w Poczcie (kropka z lewej, pogrubienie), na telefonie arkusz z przyciemnieniem ---------- */
body.cm-area .cm-pop{border:0;overscroll-behavior:contain}
/* Przyklejony nagłówek nad przewijaną listą: szkło z rozmyciem treści pod spodem (jak scroll edge w iOS). */
body.cm-area .cm-pop-head{z-index:2;min-height:52px;padding:12px 12px 12px 16px;border-bottom:0;font-size:17px;line-height:22px;font-weight:600;
  background:var(--ios-glass-strong);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%)}
body.cm-area .cm-pop-head .cm-link{min-height:36px;padding:0 4px;color:var(--ios-tint);font-size:15px;font-weight:400}
body.cm-area .cm-pop-tabs{padding:2px 16px 10px;border-bottom:0}
body.cm-area .cm-pop-tabs .cm-tabs{width:100%;margin:0}
body.cm-area .cm-pop-tabs .cm-tab{position:relative;flex:1 1 0;justify-content:center;min-height:32px;padding:6px 12px}
body.cm-area .cm-pop-tabs .cm-tab::after{content:"";position:absolute;inset:-6px 0}
body.cm-area .cm-note{position:relative;gap:12px;padding:11px 16px 11px 30px;border-bottom:0;background:transparent;font-size:15px;line-height:20px;color:var(--ios-label-2)}
body.cm-area .cm-note+.cm-note::before{content:"";position:absolute;top:0;left:74px;right:0;border-top:.5px solid var(--ios-sep)}
body.cm-area .cm-note .cm-note-text{color:var(--studio-ink)}
body.cm-area .cm-note.is-unread .cm-note-text{font-weight:600}
body.cm-area .cm-note.is-unread::after{position:absolute;top:22px;left:11px;width:9px;height:9px;margin:0;background:var(--ios-tint)}
body.cm-area .cm-note .cm-small{font-size:13px;line-height:18px}
/* Najechanie myszą także na nieprzeczytanych (blok iOS czyści ich tło regułą .is-unread:not(:active)). */
@media (hover:hover) and (pointer:fine){body.cm-area .cm-note:hover,body.cm-area .cm-note.is-unread:not(:active):hover{background:var(--ios-fill-2)}}
body.cm-area #cm-bell-all{min-height:44px;color:var(--ios-tint);font-size:15px;font-weight:400}
@media (pointer:coarse){body.cm-area .cm-pop-head .cm-link{min-height:44px}}
@media (max-width:639px){
  /* Arkusz od dołu (8 px od krawędzi, promień 38) zamiast panelu pod dzwonkiem; JS ustawia top/right w style. */
  html body.cm-area .cm-pop{top:auto!important;right:8px!important;bottom:8px;left:8px;width:auto;max-height:min(80vh,680px);max-height:min(80dvh,680px);padding-bottom:max(8px,env(safe-area-inset-bottom));
    border-radius:var(--nk-r-sheet);background:var(--ios-elev);-webkit-backdrop-filter:none;backdrop-filter:none}
  /* Przyciemnienie pod arkuszem: warstwa body::after zamiast cienia 100vmax na panelu (cień jechałby z animacją arkusza
     jako warstwa ~2000x2300 px). Stuknięcia przechodzą dalej jak dotąd (zamyka JS na mousedown) - patrz raport. */
  body.cm-area:has(>#cm-bell-pop)::after{content:"";position:fixed;inset:0;z-index:64;background:var(--ios-scrim);pointer-events:none}
  html body.cm-area .cm-pop-head{padding-top:20px;background:var(--ios-elev);-webkit-backdrop-filter:none;backdrop-filter:none;font-size:20px;line-height:25px;font-weight:700}
  html body.cm-area .cm-pop-head::before{content:"";position:absolute;top:5px;left:50%;width:36px;height:5px;margin-left:-18px;border-radius:3px;background:var(--nk-grab)}
}

/* ---------- Menu wpisu: menu iOS (wiersze 44 px i 17 px na dotyku, ikona z prawej, grupy, czerwona akcja niszcząca) ---------- */
body.cm-area .cm-menu{min-width:220px;padding:6px;border:0}
body.cm-area .cm-menu button{position:relative;flex-direction:row-reverse;justify-content:space-between;gap:16px;min-height:36px;padding:7px 12px;border-radius:14px;
  background:transparent;color:var(--studio-ink);font-size:15px;line-height:20px}
body.cm-area .cm-menu button svg{flex:0 0 auto;width:18px;height:18px}
body.cm-area .cm-menu button.is-danger{color:var(--cm-red)}
/* Grupy: akcja niszcząca w osobnej grupie - linia przez całe menu i odstęp (kolejność pozycji bez zmian, jak w JS). */
body.cm-area .cm-menu button:is(:not(.is-danger)+.is-danger,.is-danger+:not(.is-danger)){margin-top:13px}
body.cm-area .cm-menu button:is(:not(.is-danger)+.is-danger,.is-danger+:not(.is-danger))::before{content:"";position:absolute;top:-7px;left:-6px;right:-6px;border-top:.5px solid var(--ios-sep)}
@media (pointer:coarse){
  body.cm-area .cm-menu{min-width:250px;max-width:min(300px,calc(100vw - 16px))}
  body.cm-area .cm-menu button{min-height:44px;padding:11px 16px;font-size:17px;line-height:22px}
  body.cm-area .cm-menu button svg{width:20px;height:20px}
}
@media (hover:hover) and (pointer:fine){body.cm-area .cm-menu button:hover{background:var(--ios-fill-2)}}
@media (hover:none){body.cm-area .cm-menu button:active{background:var(--ios-fill)}}

/* ---------- Emoji i nastrój ---------- */
body.cm-area :is(.cm-emoji-pop,.cm-mood-pop){border:0;border-radius:var(--nk-r-menu)}
/* Na telefonie jak klawiatura: przy dolnej krawędzi na całą szerokość (tak sprawdzają check-e4b i check-mood). */
body.cm-area :is(.cm-emoji-pop,.cm-mood-pop).is-sheet{border-radius:var(--nk-r-sheet) var(--nk-r-sheet) 0 0;padding-bottom:max(10px,env(safe-area-inset-bottom))}
body.cm-area :is(.cm-emoji-pop,.cm-mood-pop).is-sheet::before{content:"";flex:0 0 auto;align-self:center;width:36px;height:5px;margin:5px 0 3px;border-radius:3px;background:var(--nk-grab)}
/* Wyszukiwarka jako kapsuła z lupą (też w GIF-ach); fokus: złota ramka i poświata z bloku iOS. */
body.cm-area .cm-emoji-head{padding:10px 12px 8px}
html body.cm-area .cm-emoji-head .cm-input{-webkit-appearance:none;appearance:none;min-height:36px;padding:7px 14px 7px 36px;border-color:transparent;border-radius:999px;
  background-color:var(--ios-fill-2);background-image:var(--nk-search-ic);background-repeat:no-repeat;background-position:12px 50%;background-size:17px;font-size:15px}
[data-theme="light"] body.cm-area .cm-emoji-head .cm-input{background-color:rgba(118,118,128,.12)!important;border-color:transparent!important}
[data-theme="light"] body.cm-area .cm-emoji-head .cm-input:focus{border-color:var(--cm-gold-line)!important}
@media (pointer:coarse){html body.cm-area .cm-emoji-head .cm-input{min-height:40px;font-size:17px}}
body.cm-area .cm-emoji-tabs{gap:2px;padding:0 8px 6px;border-bottom:0;box-shadow:inset 0 -.5px 0 var(--ios-sep)}
body.cm-area .cm-emoji-tab{border-radius:999px;background:transparent;color:var(--ios-label-2)} /* bez „przyklejonego” :hover z bazy po stuknięciu */
body.cm-area .cm-emoji-label{margin:12px 6px 6px;font-size:13px;line-height:18px;font-weight:600;color:var(--ios-label-2)}
body.cm-area .cm-emoji-cell{border-radius:12px;background:transparent}
body.cm-area .cm-emoji-cell:focus-visible{background:var(--ios-fill-2)}
body.cm-area .cm-emoji-hint{border-top:0;box-shadow:inset 0 .5px 0 var(--ios-sep)}
@media (hover:hover) and (pointer:fine){body.cm-area :is(.cm-emoji-cell,.cm-emoji-tab):hover{background:var(--ios-fill-2)}}
@media (hover:none){body.cm-area :is(.cm-emoji-cell,.cm-emoji-tab):active{background:var(--ios-fill)}}
/* Nastrój: zakładki jako segmenty (tor z wypełnieniem, wybrany segment jako jaśniejsza kapsuła), zamykanie jako kółko. */
body.cm-area .cm-mood-head{gap:10px;padding:8px 10px 8px 12px;border-bottom:0}
body.cm-area .cm-mood-tabs{flex:1 1 auto;gap:0;padding:2px;border-radius:999px;background:var(--ios-fill-2)}
body.cm-area .cm-mood-tab{position:relative;flex:1 1 0;min-height:32px;padding:6px 12px;border:0;border-radius:999px;color:var(--studio-ink);font-size:14px;font-weight:500;text-align:center;
  transition:background-color .25s var(--ios-ease),box-shadow .25s}
body.cm-area .cm-mood-tab::after{content:"";position:absolute;inset:-6px 0}
body.cm-area .cm-mood-tab[aria-selected="true"]{background:var(--ios-seg-thumb);font-weight:600;box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04)}
body.cm-area .cm-mood-close{flex:0 0 auto;width:32px;height:32px;padding:0;border-radius:50%;background:var(--ios-fill-2);color:var(--ios-label-2)}
@media (pointer:coarse){body.cm-area .cm-mood-close{width:44px;height:44px;padding:5px;background-clip:content-box;margin:-6px -5px -6px 0}}
body.cm-area .cm-mood-opt{border-radius:14px;background:transparent}
body.cm-area .cm-mood-opt.is-on{background:var(--ios-fill);border-color:var(--cm-gold-line);font-weight:600}
@media (hover:hover) and (pointer:fine){body.cm-area .cm-mood-opt:not(.is-on):hover{background:var(--ios-fill-2)}}
@media (hover:none){body.cm-area .cm-mood-opt:active{background:var(--ios-fill)}}

/* ---------- Pasek reakcji: kapsuła, wybrana reakcja na neutralnym kółku z linią akcentu ---------- */
body.cm-area .cm-react-pop{gap:2px;border:0;border-radius:999px}
body.cm-area .cm-react-pop button[aria-checked="true"]{background:var(--ios-fill);box-shadow:inset 0 0 0 1.5px var(--cm-gold-line)}
@keyframes cm-nk-react{from{opacity:0;scale:.6}}
@keyframes cm-nk-react-item{from{opacity:0;scale:.4}}

/* ---------- Komunikat (toast): szklana kapsuła HUD, kolor tylko na ikonie ---------- */
/* Toast ustawia wygląd w atrybucie style - stąd !important. Tekst w kolorze etykiety na szkle (>= 4,5:1 w obu motywach). */
html body.cm-area #notatnik-toast[data-type]{padding:12px 20px!important;border-radius:22px!important;gap:10px!important;background:var(--ios-glass-strong)!important;color:var(--ios-label)!important;
  font-size:15px!important;line-height:20px;font-weight:600!important;-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  box-shadow:inset 0 .5px 0 var(--ios-glass-spec),inset 0 0 0 .5px var(--ios-glass-rim),var(--ios-glass-shadow)!important;transform-origin:0 50%}
html body.cm-area #notatnik-toast svg{width:20px;height:20px}
/* Przy otwartym oknie komunikat u góry ekranu, nie na przyciskach okna (Anuluj/Opublikuj, Wstecz/Pomiń/Dalej) - audyt
   watek-16, powiadomienia-8. Na telefonie pod nagłówkiem arkusza (tam w kompozytorze stoją Anuluj i Opublikuj).
   !important tylko przeciw stylowi w atrybucie z app.js (bottom:100px). */
html body.cm-area:has(#cm-modal) #notatnik-toast{top:24px!important;bottom:auto!important}
@media (max-width:639px){html body.cm-area:has(#cm-modal) #notatnik-toast{top:calc(env(safe-area-inset-top,0px) + 84px)!important}}
html body.cm-area #notatnik-toast[data-type="success"] svg{color:var(--cm-green)}
html body.cm-area #notatnik-toast[data-type="error"] svg{color:var(--cm-red)}
html body.cm-area #notatnik-toast[data-type="warning"] svg{color:var(--ios-tint)}
html body.cm-area #notatnik-toast[data-type="info"] svg{color:var(--cm-blue)}
@keyframes cm-nk-toast{from{scale:.8;translate:0 24px}}

/* ---------- Ruch: wejścia sprężyną (bez ruchu przy prefers-reduced-motion) ---------- */
@media (prefers-reduced-motion:no-preference){
  body.cm-area :is(.cm-menu,.cm-pop,.cm-emoji-pop,.cm-mood-pop,.cm-c-where-list){animation:cm-nk-pop .32s var(--ios-spring-snappy)}
  body.cm-area .cm-menu{transform-origin:top right}
  body.cm-area :is(.cm-emoji-pop,.cm-mood-pop){transform-origin:bottom left}
  body.cm-area .cm-c-where-list{transform-origin:bottom left}
  body.cm-area :is(.cm-emoji-pop,.cm-mood-pop).is-sheet{animation:cm-nk-sheet .5s var(--ios-ease)}
  @media (max-width:639px){html body.cm-area .cm-pop{animation:cm-nk-sheet .5s var(--ios-ease)}body.cm-area:has(>#cm-bell-pop)::after{animation:cm-nk-fade .3s linear}}
  /* Reakcje „wyrastają” z przycisku pod paskiem (pasek stoi 40 px w lewo od niego), emoji jedna po drugiej. */
  body.cm-area .cm-react-pop{animation:cm-nk-react .5s var(--ios-spring-bouncy);transform-origin:56px 100%}
  body.cm-area .cm-react-pop button{animation:cm-nk-react-item .45s var(--ios-spring-bouncy) both}
  body.cm-area .cm-react-pop button:nth-child(2){animation-delay:.025s}
  body.cm-area .cm-react-pop button:nth-child(3){animation-delay:.05s}
  body.cm-area .cm-react-pop button:nth-child(4){animation-delay:.075s}
  body.cm-area .cm-react-pop button:nth-child(5){animation-delay:.1s}
  body.cm-area .cm-react-pop button:nth-child(6){animation-delay:.125s}
  /* Toast: wjazd sprężyną (przesunięcie z JS dostaje krzywą sprężyny, do tego skala i dłuższy dojazd). */
  html body.cm-area #notatnik-toast{transition:opacity .25s linear,transform .55s var(--ios-spring-bouncy)!important;animation:cm-nk-toast .55s var(--ios-spring-bouncy)}
}
@media (prefers-reduced-motion:reduce){html body.cm-area .cm-anon input,html body.cm-area .cm-anon input::before,body.cm-area .cm-mood-tab{transition:none}}

/* ---------- Ograniczona przezroczystość / większy kontrast: nowe szkło też nieprzezroczyste ---------- */
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){
  html body.cm-area #notatnik-toast[data-type]{background:var(--ios-elev)!important;-webkit-backdrop-filter:none;backdrop-filter:none}
  body.cm-area :is(.cm-c-where-list,.cm-pop-head){background:var(--ios-elev);-webkit-backdrop-filter:none;backdrop-filter:none}
  body.cm-area .cm-dialog:has(.cm-sheet){background:var(--nk-sheet-bg)!important}
}
/* ---------- Faza B: czat i DM (fragment agenta, scratchpad/ios/frag-czat.css) ---------- */
/* ================= Czat i wiadomości prywatne jak Wiadomości iOS (runda 4: P1.9 + pasek odpowiedzi .cm-quick z P2.8) =================
   Telefon (do 767 px): rozmowa od krawędzi do krawędzi, bez karty; w otwartej rozmowie prywatnej bez paska zakładek i bez
   górnego paska strony (pasek rozmowy z powrotem i osobą jest jedynym paskiem, jak w Wiadomościach); dymki bez ramek - moje
   pełnym złotem, cudze drugą powierzchnią; pole pisania jako szklana kapsuła, pod którą przewija się rozmowa.
   Kanał czatu: od fazy D ma powrót „‹” i też chowa pasek zakładek (blok „Faza D” na końcu pliku). Komputer: ten sam język
   w kolumnie, karta zostaje.
   Tylko tokeny --ios-* / --cm-* z bloku „iOS premium”; --cm-chat-canvas = tło pod dymkami (alias, bez nowych kolorów). */
body.cm-area{--cm-chat-canvas:var(--ios-surface)}

/* ---------- Dymki (wiadomości prywatne) ---------- */
/* Bez ramek i cieni, promień 18, do 75% szerokości; kolejne z tej samej strony 2 px od siebie, zmiana strony 10 px. */
body.cm-area .cm-dm-msgs{gap:0}
body.cm-area .cm-bubble{position:relative;max-width:75%;padding:7px 12px 5px;border:0;border-radius:18px;box-shadow:none;background:var(--ios-surface-2);color:var(--ios-label);font-size:15px;line-height:20px}
body.cm-area .cm-bubble.is-mine{background:var(--ios-tint);color:var(--ios-on-tint)}
body.cm-area .cm-bubble+.cm-bubble{margin-top:10px}
body.cm-area :is(.cm-bubble.is-mine+.cm-bubble.is-mine,.cm-bubble:not(.is-mine)+.cm-bubble:not(.is-mine)){margin-top:2px}
body.cm-area .cm-dm-msgs>.cm-btn{margin-bottom:10px} /* „Starsze” nad pierwszym dymkiem */
/* Ostatni dymek serii: róg od strony nadawcy mniej zaokrąglony (zamiast „ogonka”). */
body.cm-area .cm-bubble.is-mine:not(:has(+.cm-bubble.is-mine)){border-bottom-right-radius:6px}
body.cm-area .cm-bubble:not(.is-mine):not(:has(+.cm-bubble:not(.is-mine))){border-bottom-left-radius:6px}
/* Linki: w cudzym dymku złote, w moim w kolorze tekstu dymku; oznaczenia i hashtagi pogrubione. */
body.cm-area .cm-bubble a{color:var(--ios-tint);text-decoration:underline;text-underline-offset:2px}
body.cm-area .cm-bubble.is-mine a{color:inherit}
body.cm-area .cm-bubble :is(.cm-mention,.cm-hashtag){padding:0;background:none;color:inherit;font-weight:600}
/* Czas i ⋮ drobno w prawym dolnym rogu dymku, w kolorze drugorzędnym (na złocie: kolor tekstu dymku, kontrast >= 4,5:1). */
body.cm-area .cm-bubble-meta{justify-content:flex-end;gap:4px;margin-top:1px;font-size:12px;line-height:16px;color:var(--ios-label-2);font-variant-numeric:tabular-nums}
body.cm-area .cm-bubble.is-mine .cm-bubble-meta{color:var(--ios-on-tint);opacity:.9}
body.cm-area .cm-bubble .cm-bubble-menu{margin:-3px -6px -3px 0;padding:3px 4px;border-radius:999px;background:none;color:inherit}
body.cm-area .cm-bubble .cm-bubble-menu svg{width:14px;height:14px}
@media (pointer:coarse){body.cm-area .cm-bubble .cm-bubble-menu::after{inset:-12px -11px}} /* obszar trafienia 44x44 */
/* Komputer: ⋮ pojawia się po najechaniu na dymek albo przy fokusie z klawiatury (przezroczystość, przycisk zostaje osiągalny Tabem). */
@media (hover:hover) and (pointer:fine){
  body.cm-area .cm-bubble .cm-bubble-menu{opacity:0}
  body.cm-area .cm-bubble:is(:hover,:focus-within) .cm-bubble-menu{opacity:1}
  body.cm-area .cm-bubble .cm-bubble-menu:hover{background:var(--ios-fill-2)}
}
/* Stany: „Wysyłanie...” przygaszone (reguła bazowa, opacity .65); nie wysłano - neutralny dymek z czerwoną obwódką i opisem
   (czerwień na złocie byłaby nieczytelna); wynik wyszukiwania - złoty obrys 2 px z odstępem w kolorze tła (widać go też na
   złotym dymku). Motyw w selektorze: wygrywa z `html body.cm-area .cm-bubble.is-hit.is-hit`. Usunięta - szary napis na środku. */
body.cm-area .cm-bubble.is-mine.is-failed{background:var(--ios-surface-2);color:var(--ios-label);box-shadow:inset 0 0 0 1.5px var(--cm-red)}
body.cm-area .cm-bubble.is-mine.is-failed .cm-bubble-meta{flex-wrap:wrap;justify-content:flex-start;color:var(--ios-label-2);opacity:1}
body.cm-area .cm-bubble.is-failed .cm-send-state{font-weight:600}
body.cm-area .cm-bubble.is-mine:not(.is-failed) .cm-send-state{color:inherit} /* „Wysyłanie...” na złocie: kolor tekstu dymku, nie szary */
/* Jasny: przygaszenie przez desaturację zamiast przezroczystości (biały na złocie .65 = 2,7:1; tu ok. 5,7:1). */
[data-theme="light"] body.cm-area .cm-bubble.is-mine.is-pending{opacity:1;filter:saturate(.45)}
html:not([data-theme="light"]) body.cm-area .cm-bubble.is-hit.is-hit,[data-theme="light"] body.cm-area .cm-bubble.is-hit.is-hit{box-shadow:0 0 0 2px var(--cm-chat-canvas),0 0 0 4px var(--ios-tint)}
body.cm-area .cm-dm-msgs .cm-bubble:has(>.cm-placeholder){align-self:center;max-width:90%;padding:2px 10px;background:none;box-shadow:none}

/* ---------- Czat (kanał, wydarzenie, wątek): wiadomość w dymku ---------- */
/* Nad dymkiem drobno imię, czas i akcje; awatar przy dole dymka (jak rozmowa grupowa w Wiadomościach). */
body.cm-area .cm-chat-list{gap:12px}
body.cm-area .cm-chat-msg{align-items:flex-end;gap:8px}
body.cm-area .cm-chat-msg>div{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
body.cm-area .cm-chat-msg>div>span:empty{display:none} /* pusty znacznik wątku nie dokłada odstępu */
body.cm-area .cm-chat-msg .cm-chat-meta{flex-wrap:nowrap;gap:6px;max-width:100%;padding:0 12px;font-size:12px;line-height:16px}
body.cm-area .cm-chat-msg .cm-chat-meta>*{flex:none}
body.cm-area .cm-chat-msg .cm-chat-meta>.cm-person-name{flex:0 1 auto;min-width:0} /* wąska kolumna: imię z wielokropkiem, akcje w tej samej linii */
body.cm-area .cm-chat-msg .cm-chat-text{width:fit-content;max-width:min(100%,640px);padding:7px 12px;border-radius:18px;background:var(--ios-surface-2);color:var(--ios-label);font-size:15px;line-height:20px}
body.cm-area .cm-chat-msg .cm-chat-text:empty{display:none} /* samo zdjęcie: bez pustego dymka nad nim */
body.cm-area .cm-chat-msg .cm-chat-text a{color:var(--ios-tint);text-decoration:underline;text-underline-offset:2px}
body.cm-area .cm-chat-msg .cm-chat-text :is(.cm-mention,.cm-hashtag){padding:0;background:none;color:inherit;font-weight:600}
body.cm-area .cm-chat-msg .cm-images{width:min(100%,320px);border-radius:14px}
body.cm-area .cm-chat-msg .cm-images.is-single{width:fit-content;max-width:min(100%,320px)}
body.cm-area .cm-chat-msg .cm-thread-link{padding:0 12px;font-size:13px;font-weight:600;color:var(--ios-tint)}
body.cm-area .cm-chat-msg.is-failed .cm-chat-text{box-shadow:inset 0 0 0 1.5px var(--cm-red)}
body.cm-area .cm-chat-msg:has(>.cm-placeholder){justify-content:center}
body.cm-area .cm-chat-list>.cm-muted:only-child{margin:auto;text-align:center} /* „Napisz pierwszą wiadomość.” */
/* ⋮ przy wiadomości: mały, w kolorze drugorzędnym, bez tła; na dotyku obszar trafienia 44 px (pseudo-element). */
body.cm-area .cm-chat-msg .cm-chat-tools{gap:0}
body.cm-area .cm-chat-msg .cm-chat-tools .cm-icon-btn{padding:2px 5px;border-radius:999px;background:none;color:var(--ios-label-2)}
body.cm-area .cm-chat-msg .cm-chat-tools svg{width:16px;height:16px}
@media (pointer:coarse){body.cm-area .cm-chat-msg .cm-chat-tools .cm-icon-btn::after{inset:-12px -9px}}
@media (hover:hover) and (pointer:fine){body.cm-area .cm-chat-msg .cm-chat-tools .cm-icon-btn:hover{background:var(--ios-fill-2);color:var(--ios-label)}}
/* Telefon: tekst rozmowy 17/22 (Body iOS), komputer 15/20. */
@media (max-width:767px){body.cm-area :is(.cm-bubble,.cm-chat-msg .cm-chat-text){font-size:17px;line-height:22px}}

/* ---------- Pole pisania (kanał, wydarzenie, rozmowa prywatna, odpowiedź w wątku) ---------- */
/* Jedna kapsuła: zdjęcie, emoji, tekst i okrągła wysyłka w środku; bez linii nad polem. Puste pole = szara wysyłka (jak iOS,
   który pokazuje strzałkę dopiero przy tekście). Wysokość w spoczynku 48 px (4 + 40 + 4) - na niej opiera się nakładka na telefonie. */
body.cm-area :is(.cm-chat .cm-chat-form,.cm-dm-pane .cm-chat-form,.cm-stack[data-root]+.cm-chat-form){position:relative;z-index:1;gap:0;margin:6px 10px 10px;padding:4px;border:0;border-radius:24px;background:var(--ios-fill-2)}
body.cm-area :is(.cm-chat .cm-chat-form,.cm-dm-pane .cm-chat-form,.cm-stack[data-root]+.cm-chat-form) .cm-icon-btn{flex:none;width:36px;height:40px;min-width:0;min-height:0;padding:0;border-radius:999px;background:none;color:var(--ios-label-2)}
body.cm-area :is(.cm-chat .cm-chat-form,.cm-dm-pane .cm-chat-form,.cm-stack[data-root]+.cm-chat-form) .cm-icon-btn svg{width:22px;height:22px}
body.cm-area :is(.cm-chat .cm-chat-form,.cm-dm-pane .cm-chat-form,.cm-stack[data-root]+.cm-chat-form) .cm-textarea{flex:1;min-width:0;min-height:38px;max-height:140px;margin:0;padding:8px;border:0;border-radius:0;background:transparent;box-shadow:none;font-size:15px;line-height:22px;resize:none}
[data-theme="light"] body.cm-area :is(.cm-chat .cm-chat-form,.cm-dm-pane .cm-chat-form,.cm-stack[data-root]+.cm-chat-form) .cm-textarea{background-color:transparent!important} /* index.html: jasne pola #f5f5f7 z !important */
body.cm-area :is(.cm-chat .cm-chat-form,.cm-dm-pane .cm-chat-form,.cm-stack[data-root]+.cm-chat-form) .cm-textarea::placeholder{color:var(--ios-label-2);opacity:1}
/* Fokus: obrys całej kapsuły zamiast pola w środku (ten sam złoty obrys 2 px co pozostałe pola). */
body.cm-area :is(.cm-chat .cm-chat-form,.cm-dm-pane .cm-chat-form,.cm-stack[data-root]+.cm-chat-form) .cm-textarea:focus{box-shadow:none}
/* Obrys fokusu na całej kapsule tylko tam, gdzie działa :has(); bez niego zostaje obrys samego pola (bazowa reguła). */
@supports selector(:has(*)){
  body.cm-area :is(.cm-chat .cm-chat-form,.cm-dm-pane .cm-chat-form,.cm-stack[data-root]+.cm-chat-form) .cm-textarea:focus-visible{outline:none}
  body.cm-area :is(.cm-chat .cm-chat-form,.cm-dm-pane .cm-chat-form,.cm-stack[data-root]+.cm-chat-form):has(.cm-textarea:focus-visible){outline:2px solid var(--cm-gold);outline-offset:1px}
}
body.cm-area :is(.cm-chat .cm-chat-form,.cm-dm-pane .cm-chat-form,.cm-stack[data-root]+.cm-chat-form) .cm-btn-primary{position:relative;flex:none;width:32px;height:32px;min-height:0;margin:4px 4px 4px 2px;padding:0;border:0;border-radius:999px;background:var(--ios-tint);color:var(--ios-on-tint)}
body.cm-area :is(.cm-chat .cm-chat-form,.cm-dm-pane .cm-chat-form,.cm-stack[data-root]+.cm-chat-form) .cm-btn-primary svg{width:16px;height:16px}
body.cm-area :is(.cm-chat .cm-chat-form,.cm-dm-pane .cm-chat-form,.cm-stack[data-root]+.cm-chat-form) .cm-btn-primary:disabled{background:var(--ios-fill);color:var(--ios-label-2);opacity:1} /* w trakcie wysyłania: szara, nie złota */
body.cm-area :is(.cm-chat .cm-chat-form,.cm-dm-pane .cm-chat-form,.cm-stack[data-root]+.cm-chat-form):has(.cm-textarea:placeholder-shown) .cm-btn-primary{background:var(--ios-fill);color:var(--ios-label-2)}
@media (pointer:coarse){
  body.cm-area :is(.cm-chat .cm-chat-form,.cm-dm-pane .cm-chat-form,.cm-stack[data-root]+.cm-chat-form) .cm-textarea{font-size:17px} /* Safari nie przybliża strony */
  body.cm-area :is(.cm-chat .cm-chat-form,.cm-dm-pane .cm-chat-form,.cm-stack[data-root]+.cm-chat-form) .cm-icon-btn{width:44px} /* cel dotyku 44x44 bez nachodzenia na sąsiada i na pole */
  body.cm-area :is(.cm-chat .cm-chat-form,.cm-dm-pane .cm-chat-form,.cm-stack[data-root]+.cm-chat-form) .cm-icon-btn::after{content:"";position:absolute;inset:-2px 0}
  body.cm-area :is(.cm-chat .cm-chat-form,.cm-dm-pane .cm-chat-form,.cm-stack[data-root]+.cm-chat-form) .cm-btn-primary::after{content:"";position:absolute;inset:-6px}
}

/* Odpowiedź w wątku (okno na telefonie, kolumna na komputerze): ta sama kapsuła 48 px, bez marginesów bocznych (faza D: formularz
   bez stylu inline, odstępy w kapsule z paddingu 4 px jak w pozostałych polach). */
body.cm-area .cm-stack[data-root]+.cm-chat-form{margin:10px 0 0}

/* ---------- Paski nad rozmową, wyszukiwanie, przypięte, „Nowe wiadomości” ---------- */
/* Bez linii 1 px (komputer: linia 0,5 px jak pasek strony); przyciski paska rozmowy jako wypełnione kółka. */
body.cm-area :is(.cm-chat>.cm-chat-head,.cm-dm-pane>.cm-chat-head){border-bottom:0;box-shadow:inset 0 -.5px 0 var(--ios-sep)}
body.cm-area .cm-chat>.cm-chat-head{padding:10px 12px 10px 14px;font-size:14px;font-weight:600}
body.cm-area .cm-dm-pane>.cm-chat-head{gap:10px;padding:8px 12px}
body.cm-area .cm-dm-pane>.cm-chat-head>.cm-icon-btn{width:36px;height:36px;padding:0;border-radius:999px;background:var(--ios-fill-2);color:var(--ios-label)}
body.cm-area .cm-dm-pane>.cm-chat-head>.cm-icon-btn svg{width:20px;height:20px}
@media (hover:hover) and (pointer:fine){body.cm-area .cm-dm-pane>.cm-chat-head>.cm-icon-btn:hover{background:var(--ios-fill)}}
body.cm-area .cm-dm .cm-online{border-color:var(--cm-chat-canvas)}
/* Szukanie: kapsuła z lupą (maska SVG w kolorze drugorzędnym), bez linii pod spodem. Podwójna klasa pola: wygrywa z regułą
   pól z bloku iOS (promień 12). */
body.cm-area :is(.cm-chat-search,.cm-dm-search){padding:8px 12px;border-bottom:0}
body.cm-area :is(.cm-chat-search-bar,.cm-dm-search){position:relative}
body.cm-area :is(.cm-chat-search-bar,.cm-dm-search)::before{content:"";position:absolute;z-index:1;top:50%;left:11px;width:16px;height:16px;margin-top:-8px;pointer-events:none;background:var(--ios-label-2);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m20 20-4.6-4.6'/%3E%3C/svg%3E") center/16px 16px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m20 20-4.6-4.6'/%3E%3C/svg%3E") center/16px 16px no-repeat}
body.cm-area .cm-dm-search::before{left:23px}
body.cm-area :is(.cm-chat-search-bar,.cm-dm-search) .cm-input.cm-input{min-height:36px;padding:6px 12px 6px 34px;border:0;border-radius:999px;background-color:var(--ios-fill-2)}
/* Przypięte i prośba o rozmowę: neutralne wypełnienie zamiast złota 12% („khaki”), złoto tylko na ikonie. */
body.cm-area .cm-chat-pinned{margin:8px 12px 0;padding:8px 12px;border:0;border-radius:14px;background:var(--ios-fill-2);color:var(--ios-label);font-size:13px;line-height:18px}
body.cm-area .cm-chat-pinned svg{display:inline-block;width:14px;height:14px;vertical-align:-2px;color:var(--ios-tint)}
body.cm-area :is(.cm-dm-pane,.cm-dm-list) .cm-request{border-bottom:0;background:var(--ios-fill-2);color:var(--ios-label)}
body.cm-area .cm-dm-pane .cm-request{margin:4px 12px 8px;padding:10px 12px;border-radius:14px}
/* „Nowe wiadomości”: pływająca kapsuła (pełna powierzchnia z cieniem - bez kolejnego rozmycia), strzałka w akcencie. */
body.cm-area .cm-chat-new{padding:8px 14px;border-radius:999px;background:var(--ios-elev);color:var(--ios-label);box-shadow:var(--ios-glass-shadow);font-size:14px;font-weight:600}
body.cm-area .cm-chat-new svg{color:var(--ios-tint)}

/* ---------- Lista rozmów ---------- */
/* Wiersze bez ramek, linia 0,5 px wcięta do tekstu (za awatarem 40 px), imię (.cm-dm-name) większe niż podgląd. Segmenty
   z odstępem od krawędzi. „Nowa wiadomość” to od fazy D okrągła ikona w nagłówku listy (.cm-dm-compose, blok „Faza D”). */
body.cm-area .cm-dm-list{border-right:0}
body.cm-area .cm-dm-list .cm-tabs{width:auto;max-width:none;margin:0 12px 8px}
body.cm-area .cm-dm-list .cm-tab{flex:1 1 0;min-width:0;justify-content:center;padding:6px 4px}
body.cm-area .cm-dm-list .cm-dm-item{position:relative;gap:12px;min-height:64px;padding:10px 16px;border-bottom:0;background:none}
body.cm-area .cm-dm-list .cm-dm-item::after{content:"";position:absolute;left:68px;right:0;bottom:0;border-bottom:.5px solid var(--ios-sep);pointer-events:none}
body.cm-area .cm-dm-list .cm-dm-item:is(:last-child,.is-active,:has(+.is-active))::after{content:none}
body.cm-area .cm-dm-list .cm-dm-item.is-active{background:var(--ios-fill-2)}
body.cm-area .cm-dm-list .cm-dm-item .cm-dm-name{font-size:15px}
body.cm-area .cm-dm-list .cm-dm-item .cm-dm-preview{margin-top:1px;font-size:13px;line-height:18px;color:var(--ios-label-2)}
body.cm-area .cm-dm-list .cm-dm-item.is-unread .cm-dm-preview{color:var(--ios-label);font-weight:600}
@media (hover:hover) and (pointer:fine){body.cm-area .cm-dm-list .cm-dm-item:not(.is-active):hover{background:var(--ios-fill-2)}}
@media (max-width:767px){
  body.cm-area .cm-dm-list .cm-dm-item .cm-dm-name{font-size:16px}
  body.cm-area .cm-dm-list .cm-dm-item .cm-dm-preview{font-size:15px;line-height:20px}
}
/* Komputer: lista jako pasek boczny - wiersze wcięte, zaznaczenie zaokrąglone. */
@media (min-width:900px){
  body.cm-area .cm-dm-list{border-right:.5px solid var(--ios-sep)}
  body.cm-area .cm-dm-list .cm-dm-item{width:calc(100% - 16px);margin:0 8px;padding:10px;border-radius:12px}
  body.cm-area .cm-dm-list .cm-dm-item::after{left:62px;right:10px}
}

/* ---------- Telefon: rozmowa na pełnym ekranie ---------- */
@media (max-width:767px){
  /* Jedno tło od krawędzi do krawędzi: jasny - białe (jak Wiadomości, cudze dymki #F2F2F7 są na nim widoczne), ciemny - tło strony. */
  [data-theme="light"] body.cm-area:has(.cm-shell.is-chat){background-color:var(--ios-surface)}
  html:not([data-theme="light"]) body.cm-area .cm-shell.is-chat{--cm-chat-canvas:var(--ios-bg)}
  /* Pełna szerokość bez 100vw (przy klasycznym pasku przewijania 100vw wystawałoby poza ekran): margines strony rozmowy
     ustawiony tu na 16 px (jak w ramie z fazy C), panel rozmowy wychodzi o tyle samo w bok. */
  body.cm-area #main-app>main:has(.cm-shell.is-chat){padding-left:16px;padding-right:16px}
  body.cm-area .cm-shell.is-chat :is(.cm-chat,.cm-dm){margin-inline:-16px;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
  body.cm-area .cm-shell.is-chat :is(.cm-chat-list,.cm-dm-msgs){padding:8px 16px 60px} /* 60 = kapsuła pisania 48 + odstęp 12 */
  /* Wyrównanie do marginesu 16 px: szukanie, przypięte, prośba o rozmowę i segmenty. */
  body.cm-area .cm-shell.is-chat :is(.cm-chat-search,.cm-dm-search){padding-inline:16px}
  body.cm-area .cm-shell.is-chat .cm-dm-search::before{left:27px}
  body.cm-area .cm-shell.is-chat :is(.cm-chat-pinned,.cm-dm-pane .cm-request){margin-inline:16px}
  body.cm-area .cm-shell.is-chat .cm-dm-list .cm-tabs{margin-inline:16px}
  /* Kanał: lupa obok dużego tytułu (bez osobnego wiersza), okrągła jak akcje w pasku. */
  body.cm-area .cm-shell.is-chat .cm-page-head{flex-wrap:nowrap;align-items:center}
  body.cm-area .cm-shell.is-chat .cm-page-titles{flex:1 1 auto}
  body.cm-area .cm-shell.is-chat .cm-chat-find-top{width:44px;height:44px;padding:0;border-radius:999px;background:var(--ios-fill-2);color:var(--ios-label)}
  /* Otwarta rozmowa prywatna: bez górnego paska strony (dublował tytuł „Wiadomości”); pasek rozmowy na górze - powrót z lewej,
     osoba na środku, opcje z prawej, bez linii. */
  body.cm-area:has(.cm-dm.is-open) #main-app>header{display:none}
  body.cm-area:has(.cm-dm.is-open) #main-app>main{padding-top:calc(env(safe-area-inset-top,0px) + 4px)}
  body.cm-area .cm-shell.is-chat .cm-dm-pane>.cm-chat-head{position:relative;justify-content:space-between;min-height:52px;padding:4px 12px;box-shadow:none}
  body.cm-area .cm-shell.is-chat .cm-dm-pane>.cm-chat-head>.cm-icon-btn{width:44px;height:44px}
  body.cm-area .cm-shell.is-chat .cm-dm-pane>.cm-chat-head>:is(.cm-person,strong){position:absolute;left:50%;top:50%;translate:-50% -50%;max-width:calc(100% - 136px)}
  /* Pole pisania: szklana kapsuła nad rozmową, która przewija się pod nią (ujemny margines = wysokość kapsuły w spoczynku,
     lista ma pod spodem zapas na kapsułę; gdy pole rośnie, lista się skraca). */
  body.cm-area .cm-shell.is-chat :is(.cm-chat,.cm-dm-pane) .cm-chat-form{margin:-48px 12px max(0px,calc(env(safe-area-inset-bottom,0px) - 12px));
    background:var(--ios-glass);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
    box-shadow:inset 0 .5px 0 var(--ios-glass-spec),inset 0 0 0 .5px var(--ios-glass-rim),var(--ios-glass-shadow)}
  /* Zapas pod listą (padding wyżej) jest zawsze, nie tylko gdy pole już stoi: w kanale formularz dochodzi po przewinięciu listy
     na koniec (app-community-live.js) - warunek :has() spóźniał się i ostatnia wiadomość zostawała pod kapsułą. */
  body.cm-area .cm-shell.is-chat .cm-chat-new{bottom:60px}
}
/* Pasek zakładek schowany w otwartej rozmowie prywatnej (powrót jest w pasku rozmowy); panel dopasuje się do dołu ekranu. */
@media (max-width:767px){body.cm-area:has(.cm-dm.is-open) .cm-bottom{display:none}} /* jak układ pełnoekranowej rozmowy (do 767 px) */
/* Telefon poziomo (szerszy niż 767 px, niski): otwarta rozmowa też bez górnego paska strony i bez paska zakładek -
   inaczej na wiadomości zostawało 70-110 px (audyt stany-11). */
@media (min-width:768px) and (max-height:500px) and (pointer:coarse){
  body.cm-area:has(.cm-dm.is-open) #main-app>header,body.cm-area:has(.cm-dm.is-open) .cm-bottom{display:none}
  body.cm-area:has(.cm-dm.is-open) #main-app>main{padding-top:calc(env(safe-area-inset-top,0px) + 4px);padding-bottom:max(4px,env(safe-area-inset-bottom,0px))}
}

/* ---------- Pasek odpowiedzi pod wpisem (.cm-quick, P2.8) ---------- */
/* Kapsuła z emoji w środku i okrągła wysyłka obok - ten sam język co pole czatu; cel dotyku wysyłki 44 px (pseudo-element). */
body.cm-area .cm-quick{gap:8px}
html:not([data-theme="light"]) body.cm-area .cm-quick .cm-quick-input,[data-theme="light"] body.cm-area .cm-quick .cm-quick-input{min-height:40px;padding:8px 46px 8px 14px;border:0;border-radius:20px;line-height:22px}
body.cm-area .cm-quick .cm-quick-emoji{flex:none;width:40px;height:40px;margin-left:-46px;padding:0;border-radius:999px;background:none;color:var(--ios-label-2)}
body.cm-area .cm-quick .cm-quick-send{position:relative;width:36px;height:36px;margin-bottom:2px;background:var(--ios-tint);color:var(--ios-on-tint)}
body.cm-area .cm-quick .cm-quick-send:disabled{background:var(--ios-fill);color:var(--ios-label-2)}
@media (pointer:coarse){body.cm-area .cm-quick .cm-quick-send::after{content:"";position:absolute;inset:-4px}}

/* ---------- Komputer: szerszy czat obok wydarzenia ---------- */
@media (min-width:1280px){body.cm-area .cm-live-layout{grid-template-columns:minmax(0,1fr) 340px}}
/* Telefon w trakcie live z transmisją: wideo przyklejone pod paskiem, zaraz pod nim zakładki Czat | Pytania, opis niżej.
   Wcześniej czat był pod opisem i przyciskami, a pisanie na czacie wypychało transmisję z ekranu (audyt live-14).
   Stos #cm-ev-stack bez własnego pudełka, więc wideo, czat i opis są elementami jednej siatki (kolejność przez order). */
@media (max-width:767px){
  body.cm-area .cm-live-layout:has(#cm-ev-media .cm-react-bar) #cm-ev-stack{display:contents}
  body.cm-area .cm-live-layout:has(#cm-ev-media .cm-react-bar) #cm-ev-media{order:-2;position:sticky;top:calc(56px + env(safe-area-inset-top,0px));z-index:6;margin:0 -16px;padding:4px 16px 8px;background:var(--studio-canvas)}
  body.cm-area .cm-live-layout:has(#cm-ev-media .cm-react-bar) #cm-ev-media .cm-react-bar{margin-top:8px}
  body.cm-area .cm-live-layout:has(#cm-ev-media .cm-react-bar) #cm-ev-side{order:-1}
}

/* ---------- Ruch i przezroczystość ---------- */
@media (prefers-reduced-motion:no-preference){
  body.cm-area .cm-bubble{transition:box-shadow .3s var(--ios-ease)} /* obrys wyniku wyszukiwania gaśnie */
  @media (hover:hover) and (pointer:fine){body.cm-area .cm-bubble .cm-bubble-menu{transition:opacity .15s linear,background-color .15s linear}}
}
/* Ograniczona przezroczystość / większy kontrast / brak backdrop-filter: kapsuła pisania nieprzezroczysta. */
@media (max-width:767px) and (prefers-reduced-transparency:reduce),(max-width:767px) and (prefers-contrast:more){
  body.cm-area .cm-shell.is-chat :is(.cm-chat,.cm-dm-pane) .cm-chat-form{background:var(--ios-elev);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  @media (max-width:767px){body.cm-area .cm-shell.is-chat :is(.cm-chat,.cm-dm-pane) .cm-chat-form{background:var(--ios-elev)}}
}
/* Ograniczona przezroczystość / większy kontrast: powierzchnie nieprzezroczyste, bez rozmycia (wygrywa ze wszystkim).
   Safari nie zgłasza „ogranicz przezroczystość”, ale zgłasza „zwiększ kontrast”. */
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){
  body.cm-area :is(header.glass,.cm-dialog,.cm-pop,.cm-menu,.cm-emoji-pop,.cm-mood-pop,.cm-react-pop,.cm-bottom){background:var(--ios-elev)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  html:not([data-theme="light"]) body.cm-area,[data-theme="light"] body.cm-area{--ios-sep:var(--ios-label-2)}
}
/* Stany, których nowe reguły nie mogą przykryć: wynik wyszukiwania w czacie. */
html body.cm-area .cm-bubble.is-hit.is-hit{box-shadow:0 0 0 2px var(--cm-gold)} /* podwójna klasa: wygrywa z regułą :is() */
/* Wyszukiwarka członków: przycisk czyszczenia jak w iOS (szare kółko z krzyżykiem), natywny ukryty. */
body.cm-area #cm-m-q{padding-right:40px}
body.cm-area #cm-m-q::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}
body.cm-area .cm-search-clear{position:absolute;right:8px;top:50%;translate:0 -50%;width:22px;height:22px;padding:0;border:0;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:var(--ios-label-3);color:var(--ios-surface);cursor:pointer}
body.cm-area .cm-search-clear[hidden]{display:none}
body.cm-area .cm-search-clear svg{width:12px;height:12px;stroke-width:3}
body.cm-area .cm-search-clear::after{content:"";position:absolute;inset:-11px}
/* Baner reklamowy na górze tablicy jako karta promocyjna (prośba Jana, wzór: Circle): zdjęcie na całą szerokość
   w proporcji kadru banera (1600x500), pod nim duży tytuł, opis i przycisk; „×” jako ciemne szkło na zdjęciu. */
body.cm-area .cm-banner{display:block;padding:0;margin-bottom:14px;border:0;border-radius:var(--cm-radius);overflow:hidden;background:var(--ios-surface);box-shadow:none}
body.cm-area .cm-banner>img{display:block;width:100%;height:auto;aspect-ratio:16/5;object-fit:cover;border-radius:0}
body.cm-area .cm-banner>div{padding:18px 20px 20px}
body.cm-area .cm-banner h2{margin:0 0 6px;font-size:28px;line-height:34px;font-weight:700;letter-spacing:var(--ios-trk-title);color:var(--ios-label);text-wrap:balance}
body.cm-area .cm-banner p{margin:0;font-size:16px;line-height:23px;color:var(--ios-label-2)}
body.cm-area .cm-banner .cm-btn{margin-top:14px}
body.cm-area .cm-banner>.cm-close{position:absolute;top:12px;right:12px;width:36px;height:36px;min-width:36px;min-height:36px;padding:0;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);color:#fff;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
body.cm-area .cm-banner>.cm-close::after{content:"";position:absolute;inset:-4px}
body.cm-area .cm-banner:not(:has(>img))>.cm-close{background:var(--ios-fill);color:var(--ios-label);-webkit-backdrop-filter:none;backdrop-filter:none}
body.cm-area .cm-banner:not(:has(>img))>div{padding-right:60px}
@media (max-width:639px){body.cm-area .cm-banner h2{font-size:22px;line-height:28px}body.cm-area .cm-banner>div{padding:14px 16px 16px}}

/* ---------- Faza D (agent 2): czat i DM ---------- */
/* Czat kanału, wydarzenia i wątku oraz wiadomości prywatne jak Wiadomości iOS: moje wiadomości po prawej w złotym dymku,
   serie (ta sama osoba w ciągu 5 min: imię przy pierwszej, awatar i „ogonek” przy ostatniej), separator z datą przy
   przerwie ponad 30 min albo zmianie dnia, menu wiadomości przytrzymaniem dymku na dotyku, powrót „‹” w kanale na
   telefonie bez paska zakładek. Klasy is-mine / is-cont / has-cont i separatory .cm-chat-sep ustawia JS
   (app-community-live.js: chatMessage, C.groupMessages, C.holdMessages; app-community-dm.js: bubble). */

/* Znaczniki bez stylów inline (wcześniej w atrybutach style w JS). */
.cm-chat-msg .cm-chat-ava{flex:none;padding:0;border:0;border-radius:999px;background:none;cursor:pointer}
.cm-chat-msg .cm-chat-main{flex:1;min-width:0}
.cm-chat-msg .cm-chat-meta .cm-person-name{font-size:13px}
.cm-dm-item .cm-dm-name{font-size:13px;color:var(--studio-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-bubble .cm-bubble-who{font-weight:700;color:var(--cm-gold)}
body.cm-area .cm-bubble .cm-bubble-who{font-weight:600;color:var(--ios-tint)}
/* Imię z plakietką w jednej linii z czasem; w wąskiej kolumnie imię skraca się wielokropkiem. */
body.cm-area .cm-chat-msg .cm-chat-meta>.cm-chat-who{display:inline-flex;flex:0 1 auto;align-items:center;gap:6px;min-width:0}
body.cm-area .cm-chat-msg .cm-chat-who>*{flex:none}
body.cm-area .cm-chat-msg .cm-chat-who>.cm-person-name{flex:0 1 auto;min-width:0}

/* ---------- Moje wiadomości na czacie: po prawej, złoty dymek jak w DM, bez awatara i imienia ---------- */
body.cm-area .cm-chat-msg{position:relative}
body.cm-area .cm-chat-msg.is-mine{justify-content:flex-end}
body.cm-area .cm-chat-msg.is-mine>.cm-chat-main{align-items:flex-end;padding-left:48px} /* lustro kolumny awatara cudzych */
body.cm-area .cm-chat-msg.is-mine .cm-chat-meta{justify-content:flex-end}
body.cm-area .cm-chat-msg.is-mine .cm-chat-text{background:var(--ios-tint);color:var(--ios-on-tint)}
body.cm-area .cm-chat-msg.is-mine .cm-chat-text a{color:inherit}
/* Nie wysłano: neutralny dymek z czerwoną obwódką (czerwień na złocie byłaby nieczytelna), jak w DM. */
body.cm-area .cm-chat-msg.is-mine.is-failed .cm-chat-text{background:var(--ios-surface-2);color:var(--ios-label)}
/* Jasny: „Wysyłanie...” przygaszone desaturacją, nie przezroczystością (biały na złocie .65 = 2,7:1). */
[data-theme="light"] body.cm-area .cm-chat-msg.is-mine.is-pending .cm-chat-text{opacity:1;filter:saturate(.45)}
/* Tylko dla czytnika ekranu: własne imię, a w serii imię i czas (przycisk profilu w serii ma tabindex -1 z JS); czas tuż pod
   separatorem z godziną (after-sep). */
body.cm-area .cm-chat-msg:is(.is-mine,.is-cont) .cm-chat-meta>.cm-chat-who,body.cm-area .cm-chat-msg:is(.is-cont,.after-sep) .cm-chat-meta>.cm-chat-time,
body.cm-area .cm-bubble.is-cont .cm-bubble-who{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- Serie na czacie ---------- */
/* W serii 2 px między dymkami (lista ma odstęp 12 px), awatar tylko przy ostatniej, „ogonek” od strony nadawcy przy ostatniej. */
body.cm-area .cm-chat-msg.is-cont{margin-top:-10px}
body.cm-area .cm-chat-msg.has-cont>.cm-chat-ava{visibility:hidden}
body.cm-area .cm-chat-msg:not(.is-mine):not(.has-cont) .cm-chat-text{border-bottom-left-radius:6px}
body.cm-area .cm-chat-msg.is-mine:not(.has-cont) .cm-chat-text{border-bottom-right-radius:6px}
/* Wiersz nad dymkiem bez imienia i czasu (w serii; moja tuż pod separatorem) znika, chyba że ma coś widocznego (edytowano,
   przypięte, stan wysyłki; na dotyku też licznik polubień). Akcje (komputer) to wtedy pływający pasek nad prawym górnym
   rogiem po najechaniu albo fokusie. Gdy wiersz zostaje, stoi pod dymkiem („edytowano”, „Wysyłanie...”, licznik polubień -
   jak podpisy pod dymkiem w Wiadomościach), żeby nie wyglądał na podpis poprzedniej wiadomości serii. */
body.cm-area .cm-chat-msg:is(.is-cont,.is-mine.after-sep) .cm-chat-meta{order:1}
/* Mysz: narzędzia przy pierwszej wiadomości serii też jako pływający pasek nad prawym górnym rogiem - niewidoczne (opacity 0)
   zajmowały ok. 80 px wiersza i imię z plakietką skracało się wielokropkiem w wąskiej kolumnie (audyt live-20). */
@media (hover:hover){
  body.cm-area .cm-chat-msg:not(.is-cont):not(.is-mine.after-sep) .cm-chat-meta>.cm-chat-tools{position:absolute;top:-12px;right:0;z-index:2;padding:2px;border-radius:999px;background:var(--ios-elev);box-shadow:var(--ios-glass-shadow)}
  body.cm-area .cm-chat-msg:is(.is-cont,.is-mine.after-sep) .cm-chat-meta:not(:has(.cm-chat-flag,.cm-send-state)){position:absolute;top:-12px;right:0;z-index:2;padding:0}
  body.cm-area .cm-chat-msg:is(.is-cont,.is-mine.after-sep) .cm-chat-meta:not(:has(.cm-chat-flag,.cm-send-state)) .cm-chat-tools{padding:2px;border-radius:999px;background:var(--ios-elev);box-shadow:var(--ios-glass-shadow)}
}
@media (hover:none){
  body.cm-area .cm-chat-msg:is(.is-cont,.is-mine.after-sep) .cm-chat-meta:not(:has(.cm-chat-flag,.cm-send-state,.cm-tool-like>span:not(:empty))){position:absolute;top:0;right:0;padding:0}
}

/* ---------- Separator czasu (czat i DM) ---------- */
body.cm-area .cm-chat-sep{align-self:center;max-width:100%;padding:0 12px;font-size:12px;line-height:16px;color:var(--ios-label-2);text-align:center;font-variant-numeric:tabular-nums}
body.cm-area .cm-chat-sep b{font-weight:600}
body.cm-area :is(.cm-chat-list,#cm-thread-list)>.cm-chat-sep{margin-top:6px}
body.cm-area .cm-dm-msgs>.cm-chat-sep{margin:14px 0 4px}
body.cm-area .cm-dm-msgs>.cm-chat-sep:first-child{margin-top:4px}

/* ---------- Serie w DM (klasy z JS zamiast sąsiedztwa: 5 min, separator, zaślepka przerywają serię) ---------- */
/* html + podwójna klasa: wygrywa z regułami sąsiedztwa z fazy B (:is(...+...), :not(:has(+...))). */
html body.cm-area .cm-dm-msgs>.cm-bubble.cm-bubble:not(.is-cont){margin-top:10px}
html body.cm-area .cm-dm-msgs>.cm-bubble.is-cont.is-cont{margin-top:2px}
html body.cm-area .cm-dm-msgs>.cm-bubble.is-mine:not(.has-cont){border-bottom-right-radius:6px}
html body.cm-area .cm-dm-msgs>.cm-bubble.is-mine.has-cont{border-bottom-right-radius:18px}
html body.cm-area .cm-dm-msgs>.cm-bubble:not(.is-mine):not(.has-cont){border-bottom-left-radius:6px}
html body.cm-area .cm-dm-msgs>.cm-bubble:not(.is-mine).has-cont{border-bottom-left-radius:18px}

/* ---------- Dotyk: menu przytrzymaniem dymku ---------- */
/* ⋮ przy wiadomości schowany wizualnie (zostaje dla czytnika ekranu i pojawia się przy fokusie z klawiatury). Dymek bez menu
   systemowego i bez zaznaczania - przytrzymanie otwiera menu wiadomości z „Kopiuj”. Przewijanie bez zmian (próg ruchu w JS). */
@media (hover:none) and (pointer:coarse){
  body.cm-area :is(.cm-chat-msg .cm-chat-more,.cm-bubble .cm-bubble-menu):not(:focus-visible){position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  body.cm-area :is(.cm-chat-msg .cm-chat-text,.cm-dm-msgs>.cm-bubble){-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
}

/* ---------- Wiadomości prywatne: nagłówek listy z ikoną „Nowa wiadomość”, powrót w pasku rozmowy ---------- */
.cm-dm-top{display:flex;align-items:center}
.cm-dm-top>.cm-dm-search{flex:1;min-width:0}
.cm-dm-compose{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin-right:8px;padding:0;border:0;border-radius:999px;background:var(--cm-gold);color:#171100;cursor:pointer}
.cm-dm-compose svg{width:18px;height:18px}
body.cm-area .cm-dm-top>.cm-dm-search.cm-dm-search{padding-right:8px} /* odstęp do ikony; wygrywa z marginesem 16 px fazy B */
body.cm-area .cm-dm-compose{margin-right:12px;background:var(--ios-tint);color:var(--ios-on-tint)}
@media (hover:hover) and (pointer:fine){body.cm-area .cm-dm-compose:hover{opacity:.85}}
@media (pointer:coarse){body.cm-area .cm-dm-compose::after{content:"";position:absolute;inset:-4px}} /* cel dotyku 44x44 */
@media (max-width:767px){body.cm-area .cm-shell.is-chat .cm-dm-compose{margin-right:16px}}
/* Powrót w pasku rozmowy tylko tam, gdzie lista rozmów jest schowana (od 900 px lista stoi obok). */
@media (min-width:900px){body.cm-area .cm-dm-pane>.cm-chat-head>.cm-dm-back{display:none}}

/* ---------- Kanał na telefonie: powrót „‹” nad tytułem, bez paska zakładek (jak otwarta rozmowa prywatna) ---------- */
body.cm-area .cm-chat-back.cm-back{display:none}
@media (max-width:767px){
  body.cm-area .cm-chat-back.cm-back{display:inline-flex}
  body.cm-area:has(#cm-channel) .cm-bottom{display:none}
}

/* ---------- Wydarzenie: godzina startu i końca w pasie dużej daty ---------- */
body.cm-area .cm-bd-time{white-space:nowrap}

/* ---------- Faza D (agent 1): kompozytor i nakładki ---------- */
/* Kompozytor na telefonie z nagłówkiem arkusza iOS („Anuluj” | tytuł | „Opublikuj”), zamykanie arkuszy przeciągnięciem
   (strefy chwytu z touch-action:none), wyjście nakładek (martwa kopia z klasą is-closing, C.exitAnim), punkt
   „wyrastania” okienek z data-place i --cm-ox, kompozytor nad klawiaturą (is-kb), uchwyt arkusza jako osobny element,
   kategorie emoji pod siatką, liczba nowych w „Tematy”, akcja niszcząca w „Więcej”, podpowiedź o przytrzymaniu. */

/* Kompozytor na telefonie: przyciski w nagłówku (te same elementy co w stopce na komputerze, JS je przenosi). */
@media (max-width:639px){
  /* Boki 1fr (nie mniej niż przycisk): tytuł na środku, a na wąskim ekranie ustępuje miejsca i skraca się wielokropkiem. */
  html body.cm-area .cm-dialog.is-compose>.cm-dialog-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:8px;min-height:52px;margin:0 0 4px;padding-top:12px}
  html body.cm-area .cm-dialog.is-compose>.cm-dialog-head h2{grid-column:2;min-width:0;padding-left:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  html body.cm-area .cm-dialog.is-compose>.cm-dialog-head :is(.cm-close,.cm-expand){display:none}
  /* „Anuluj”: zwykły przycisk tekstowy w kolorze akcentu (jedno złote wypełnienie w pasku - „Opublikuj”). */
  html body.cm-area .cm-dialog.is-compose>.cm-dialog-head .cm-btn.cm-c-cancel{grid-column:1;justify-self:start;min-width:0;min-height:44px;margin-left:-6px;padding:0 6px;border:0;border-radius:12px;
    background:transparent;color:var(--ios-tint);font-size:17px;line-height:22px;font-weight:400;box-shadow:none}
  html body.cm-area .cm-dialog.is-compose>.cm-dialog-head .cm-btn.cm-c-cancel:disabled{color:var(--ios-label-3);opacity:1}
  /* „Opublikuj”: złota kapsuła 36 px (cel 44 px przez ::after), nieaktywna - szara jak w iOS. */
  html body.cm-area .cm-dialog.is-compose>.cm-dialog-head .cm-btn.cm-c-send{grid-column:3;justify-self:end;position:relative;min-height:36px;padding:0 16px;border:0;border-radius:999px;font-size:17px;line-height:22px;font-weight:600;white-space:nowrap}
  html body.cm-area .cm-dialog.is-compose>.cm-dialog-head .cm-btn.cm-c-send::after{content:"";position:absolute;inset:-4px -2px}
  html body.cm-area .cm-dialog.is-compose>.cm-dialog-head .cm-btn.cm-c-send:disabled:not(.is-busy){background:var(--ios-fill);color:var(--ios-label-2);opacity:1}
  /* Stopka bez przycisków: wiersz statusu tylko wtedy, gdy coś mówi („Wgrywam zdjęcie...”, „Publikuję...”). */
  html body.cm-area .cm-dialog.is-compose .cm-c-actions:not(:has(.cm-btn)){width:100%;margin-left:0}
  html body.cm-area .cm-dialog.is-compose .cm-c-actions:not(:has(.cm-btn)):has(.cm-c-status:empty){display:none}
}
/* „Wysyłam”: kapsuła zostaje złota, w miejscu napisu kółko postępu (szerokość bez zmian, nazwa dla czytnika ta sama
   plus aria-busy), w obu układach. */
html body.cm-area .cm-dialog.is-compose .cm-btn.cm-btn-primary.cm-c-send.is-busy{position:relative;background:var(--ios-tint);color:transparent;opacity:1}
html body.cm-area .cm-dialog.is-compose .cm-btn.cm-btn-primary.cm-c-send.is-busy::before{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;box-sizing:border-box;
  border:2px solid var(--ios-on-tint);border-right-color:transparent;border-radius:50%}
@keyframes cm-d-spin{to{rotate:360deg}}
@media (prefers-reduced-motion:no-preference){html body.cm-area .cm-dialog.is-compose .cm-btn.cm-btn-primary.cm-c-send.is-busy::before{animation:cm-d-spin .7s linear infinite}}

/* Kompozytor nad klawiaturą (telefon): nakładka na wysokość widocznego obszaru (zmienne z JS, visualViewport). */
@media (max-width:639px){
  /* Aplikacja z ekranu głównego (cover): widoczny obszar zaczyna się od góry ekranu, więc arkusz odsuwa się o pasek stanu
     (w Safari wcięcie = 0). Pod klawiaturą iOS 26 (półprzezroczystą) kolor arkusza zamiast strony - cień bez rozmycia. */
  html body.cm-area .cm-modal.is-kb{top:var(--cm-vv-top,0px);bottom:auto;height:var(--cm-vv-h,100%);padding:calc(4px + env(safe-area-inset-top,0px)) 8px 0}
  html body.cm-area .cm-modal.is-kb>.cm-dialog.is-full{height:calc(var(--cm-vv-h,100dvh) - 4px - env(safe-area-inset-top,0px));max-height:none;margin:0 -8px;border-radius:var(--nk-r-sheet) var(--nk-r-sheet) 0 0;
    box-shadow:inset 0 .5px 0 var(--ios-glass-spec),0 360px 0 0 var(--ios-elev)}
  html body.cm-area .cm-modal.is-kb .cm-c-foot{padding-bottom:8px}
  html body.cm-area .cm-modal.is-kb .cm-c-foot :is(.cm-audience,.cm-anon small){display:none}
}

/* Strefy chwytu arkuszy (telefon): bez przewijania strony w trakcie przeciągania. */
@media (max-width:639px){
  html body.cm-area .cm-dialog.is-swipe>.cm-dialog-head,html body.cm-area .cm-pop .cm-pop-head{touch-action:none;-webkit-user-select:none;user-select:none}
}
html body.cm-area :is(.cm-emoji-pop,.cm-mood-pop).is-sheet :is(.cm-sheet-grab,.cm-emoji-head,.cm-mood-head){touch-action:none}
html body.cm-area .is-dragging{transition:none!important;-webkit-user-select:none;user-select:none}
/* Uchwyt emoji, GIF-ów i nastroju jako element (wcześniej ::before okna): pas 16 px, kreska 36x5. */
html body.cm-area .cm-sheet-grab{display:none}
html body.cm-area :is(.cm-emoji-pop,.cm-mood-pop).is-sheet::before{content:none}
html body.cm-area :is(.cm-emoji-pop,.cm-mood-pop).is-sheet>.cm-sheet-grab{display:block;position:relative;flex:0 0 auto;align-self:stretch;height:16px}
html body.cm-area :is(.cm-emoji-pop,.cm-mood-pop).is-sheet>.cm-sheet-grab::before{content:"";position:absolute;top:5px;left:50%;width:36px;height:5px;margin-left:-18px;border-radius:3px;background:var(--nk-grab)}

/* Kategorie emoji pod siatką (jak klawiatura emoji): linia nad nimi, nie pod. */
html body.cm-area .cm-emoji-pop .cm-emoji-tabs{justify-content:space-around;padding:6px 8px;box-shadow:inset 0 .5px 0 var(--ios-sep)}

/* Punkt „wyrastania” i powrotu okienek: róg przy przycisku (data-place + --cm-ox z JS). */
html body.cm-area :is(.cm-menu,.cm-react-pop,.cm-pop,.cm-emoji-pop,.cm-mood-pop,.cm-hint)[data-place="below"]{transform-origin:var(--cm-ox,50%) 0}
html body.cm-area :is(.cm-menu,.cm-react-pop,.cm-pop,.cm-emoji-pop,.cm-mood-pop,.cm-hint)[data-place="above"]{transform-origin:var(--cm-ox,50%) 100%}

/* Wyjście: martwa kopia (bez zdarzeń) odgrywa animację do 200 ms; nic w jej środku nie startuje od nowa. */
@keyframes cm-d-out{to{opacity:0;scale:.9}}
@keyframes cm-d-fade{to{opacity:0}}
@keyframes cm-d-scrim{to{background-color:transparent}}
@keyframes cm-d-sheet{to{translate:0 calc(100% + 24px)}}
@keyframes cm-d-dialog{to{opacity:0;scale:.96}}
html body.cm-area .is-closing{pointer-events:none!important}
html body.cm-area .is-closing *:not(.cm-dialog){animation:none!important;transition:none!important}
@media (prefers-reduced-motion:no-preference){
  html body.cm-area .cm-modal.is-closing{animation:cm-d-scrim .2s linear forwards!important}
  html body.cm-area .cm-modal.is-closing>.cm-dialog{animation:cm-d-dialog .2s cubic-bezier(.4,0,1,1) forwards!important}
  html body.cm-area :is(.cm-menu,.cm-react-pop,.cm-pop,.cm-emoji-pop,.cm-mood-pop,.cm-hint).is-closing{animation:cm-d-out .16s cubic-bezier(.4,0,1,1) forwards!important}
  html body.cm-area :is(.cm-emoji-pop,.cm-mood-pop).is-sheet.is-closing{animation:cm-d-sheet .2s cubic-bezier(.4,0,1,1) forwards!important}
  @media (max-width:639px){
    html body.cm-area .cm-modal.is-closing>.cm-dialog{animation-name:cm-d-sheet!important}
    html body.cm-area .cm-pop.is-closing{animation:cm-d-sheet .2s cubic-bezier(.4,0,1,1) forwards!important}
    /* Przyciemnienie pod znikającym arkuszem powiadomień gaśnie razem z nim (nowy dzwonek ma własne). */
    body.cm-area:has(>.cm-pop.is-closing):not(:has(>#cm-bell-pop))::after{content:"";position:fixed;inset:0;z-index:64;background:var(--ios-scrim);pointer-events:none;animation:cm-d-fade .2s linear forwards}
  }
}

/* „Tematy”: liczba nowych jako szara liczba przed strzałką; „Więcej”: akcja niszcząca na czerwono, bez strzałki. */
html body.cm-area .cm-sheet>.cm-nav-item .cm-nav-num{flex:0 0 auto;margin-left:auto;color:var(--ios-label-2);font-size:17px;line-height:22px;font-weight:400;font-variant-numeric:tabular-nums}
html body.cm-area .cm-sheet>.cm-nav-item.is-danger{color:var(--cm-red)}
html body.cm-area .cm-dialog .cm-sheet>.cm-nav-item.is-danger svg{background:var(--cm-red);color:#fff}
html body.cm-area .cm-sheet>.cm-nav-item.is-danger::after{content:none}

/* Podpowiedź o przytrzymaniu (dotyk, jednorazowo): szklana etykieta przy „Lubię to”. */
html body.cm-area .cm-hint{position:fixed;z-index:97;max-width:min(300px,calc(100vw - 16px));padding:9px 14px;border-radius:14px;background:var(--ios-glass-strong);
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);color:var(--ios-label);font-size:15px;line-height:20px;font-weight:600;text-align:center;
  box-shadow:inset 0 .5px 0 var(--ios-glass-spec),inset 0 0 0 .5px var(--ios-glass-rim),var(--ios-glass-shadow);pointer-events:none}
@media (prefers-reduced-motion:no-preference){html body.cm-area .cm-hint:not(.is-closing){animation:cm-nk-pop .32s var(--ios-spring-snappy)}}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){html body.cm-area .cm-hint{background:var(--ios-elev);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* ---------- Zachęta w polu wpisu: zawijana (tekst z netykietą: 2 linie na typowym telefonie, 3 przy 320 px), szkic w jednej linii z wielokropkiem ---------- */
html body.cm-area .cm-prompt-input.cm-prompt-input:not(.has-draft){border-radius:22px} /* szkic: jedna linia, kapsuła 999px bez zmian */
body.cm-area .cm-prompt-input:not(.has-draft){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;white-space:normal;text-overflow:clip;padding-block:8px} /* 1 linia: 8+22+8+ramka 2 = 40 px */
@media (pointer:coarse){body.cm-area .cm-prompt-input:not(.has-draft){padding-block:10px}} /* 44 px na dotyku */

/* ---------- Prawa kolumna: puste bloki (zdanie + jedna akcja); miejsce na baner widoczne tylko dla admina ---------- */
body.cm-area .cm-aside-empty{margin:0;padding:12px 16px;font-size:14px;line-height:19px;color:var(--ios-label-2)}
body.cm-area .cm-banner-slot{position:relative;display:flex;align-items:flex-start;gap:12px;margin:0 0 16px;padding:16px 18px;border:1.5px dashed var(--cm-gold-line);border-radius:22px;color:var(--ios-label-2)}
body.cm-area .cm-banner-slot>div{flex:1;min-width:0}
body.cm-area .cm-banner-slot strong{display:block;color:var(--studio-ink);font-size:16px;line-height:21px;font-weight:600}
body.cm-area .cm-banner-slot p{margin:4px 0 12px;font-size:14px;line-height:19px}
body.cm-area .cm-banner-slot .cm-close{flex:0 0 auto;margin:-8px -10px 0 0}

/* ---------- Bezpieczne obszary ekranu: viewport-fit=cover tylko w społeczności (syncViewportFit, app-community.js) ----------
   Pasek u góry rośnie o wcięcie u góry (wyspa, pasek stanu aplikacji z ekranu początkowego), treść, pasek i kapsuła zakładek
   omijają wycięcia z boków (telefon poziomo). Bez wcięć (Android, komputer) env() = 0 i wymiary zostają jak dotąd. */
body.cm-area #main-app>header{padding-top:env(safe-area-inset-top,0px);height:calc(4rem + env(safe-area-inset-top,0px))}
body.cm-area :is(#cm-comments-box,.cm-comment,.cm-badges){scroll-margin-top:calc(96px + env(safe-area-inset-top,0px))}
@media (min-width:1024px){
  body.cm-area #main-app>main{padding-top:calc(100px + env(safe-area-inset-top,0px))}
  body.cm-area .cm-nav{top:calc(100px + env(safe-area-inset-top,0px))}
  body.cm-area .cm-thread-side{top:calc(88px + env(safe-area-inset-top,0px))}
}
@media (min-width:1280px){body.cm-area .cm-aside{top:calc(100px + env(safe-area-inset-top,0px))}}
@media (max-width:1023px){
  body.cm-area #main-app>header{height:calc(56px + env(safe-area-inset-top,0px));padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(8px,env(safe-area-inset-right,0px))}
  body.cm-area .cm-nav-title{top:calc(50% + env(safe-area-inset-top,0px) / 2)}
  body.cm-area #main-app>main{padding-top:calc(68px + env(safe-area-inset-top,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  body.cm-area .cm-bottom{left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px))}
  /* Komunikat ma bottom:100px w atrybucie style - nad kapsułą zakładek także z wcięciem u dołu. */
  html body.cm-area #notatnik-toast{bottom:calc(100px + env(safe-area-inset-bottom,0px))!important}
}

/* ---------- panel administratora (przebudowa 12.10: pasek z grupami, pulpit, członkowie, szuflada osoby) ---------- */
.cm-shell.is-admin{--adm-gap:14px}
@media (min-width:1280px){.cm-shell.cm-layout.is-admin.is-full{grid-template-columns:232px minmax(0,1fr);max-width:1320px}}
.cm-adm-nav{gap:1px}
.cm-adm-back{display:inline-flex;align-items:center;gap:6px;margin:0 8px 12px;padding:6px 8px;border-radius:10px;font-size:13px;font-weight:600;color:var(--studio-muted);text-decoration:none}
.cm-adm-back:hover{color:var(--studio-ink);background:var(--studio-soft)}
.cm-adm-back svg{width:14px;height:14px}
.cm-adm-brand{display:flex;align-items:center;gap:10px;margin:0 8px 6px;padding:10px;border-radius:14px;background:var(--ios-fill-2)}
.cm-adm-brand-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--cm-gold-grad,var(--ios-tint));color:var(--ios-on-tint);flex:0 0 auto}
.cm-adm-brand-ic svg{width:18px;height:18px}
.cm-adm-brand strong{display:block;font-size:14px;color:var(--studio-ink)}
.cm-adm-brand small{display:block;font-size:12px;color:var(--studio-muted)}
.cm-adm-nav-item{display:flex;align-items:center;gap:10px;min-height:36px;padding:6px 10px;border-radius:10px;font-size:14px;font-weight:500;color:var(--studio-muted);text-decoration:none;transition:background .15s,color .15s}
.cm-adm-nav-item:hover{background:var(--studio-soft);color:var(--studio-ink)}
.cm-adm-nav-item.is-active{background:var(--ios-tint-soft);color:var(--studio-ink);font-weight:600}
.cm-adm-nav-item.is-active .cm-adm-ic{color:var(--ios-tint)}
.cm-adm-ic{display:grid;place-items:center;width:20px;flex:0 0 auto}
.cm-adm-ic svg{width:18px;height:18px}
.cm-adm-nav-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Pasek panelu ma 18 pozycji (ok. 950 px) - ciaśniej, a dół wygasa, gdy jest coś niżej do przewinięcia (audyt panel-26).
   Pod ostatnią pozycją 30 px pustego miejsca (strefa wygaszenia ma 28 px): po przewinięciu do końca i w pasku, który się
   nie przewija, nic nie jest przygaszone. Przeglądarki z osiami przewijania (animation-timeline) wygaszają tylko pasek,
   który da się przewinąć - przy pasku bez przewijania oś jest nieaktywna i maska znika. Przy „ogranicz ruch”
   learning-studio.css wyłącza wszystkie animacje (!important), więc tam zostaje stała maska. */
@media (min-width:1024px){
  .cm-adm-nav .cm-adm-nav-item{min-height:32px;padding:4px 10px}
  body.cm-area .cm-nav.cm-adm-nav{padding-bottom:30px}
  .cm-nav.cm-adm-nav{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 28px),transparent)}
  @supports (animation-timeline:scroll()){
    @media (prefers-reduced-motion:no-preference){
      .cm-nav.cm-adm-nav{-webkit-mask-image:none;mask-image:none;animation:cm-adm-nav-fade linear both;animation-timeline:scroll(self)}
    }
  }
}
@keyframes cm-adm-nav-fade{from,to{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 28px),transparent)}}
.cm-adm-count{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--cm-red);color:#fff;font-size:11px;font-weight:700;display:inline-grid;place-items:center;font-variant-numeric:tabular-nums}
.cm-adm-mback{display:none}
.cm-adm-count[hidden]{display:none}
@media (max-width:1023px){.cm-adm-mback{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;margin:-4px 0 -4px -6px;padding:6px;font-size:16px;font-weight:500;color:var(--ios-tint);text-decoration:none}.cm-adm-mback svg{width:18px;height:18px}}

/* karty, nagłówki sekcji, przełącznik okresu */
.cm-adm-card{background:var(--cm-card-bg,var(--studio-surface));border:1px solid var(--cm-hair,var(--studio-line));border-radius:var(--cm-radius,22px);box-shadow:var(--cm-rim,none);padding:18px;min-width:0}
.cm-adm-card-title{margin:0 0 12px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--studio-muted)}
.cm-adm-section-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin-bottom:12px}
.cm-adm-section-head h2{margin:0;font-size:17px;font-weight:700;color:var(--studio-ink);letter-spacing:-.01em}
.cm-adm-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--adm-gap,14px)}
@media (min-width:900px){.cm-adm-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.cm-center>.cm-adm-card,.cm-center .cm-adm-cols,.cm-center .cm-adm-today,.cm-center .cm-adm-kpis{margin-bottom:0}
.cm-shell.is-admin #cm-main{display:flex;flex-direction:column;gap:var(--adm-gap,14px)}
/* Karty w formularzu (Punkty i poziomy) i w kontenerze wyzwania nie są dziećmi #cm-main - ten sam odstęp także tam (audyt brak5-9). */
.cm-shell.is-admin #cm-main form:has(>.cm-adm-card),.cm-shell.is-admin #cm-adm-ch,.cm-shell.is-admin #cm-adm-ch form:has(>.cm-adm-card){display:flex;flex-direction:column;gap:var(--adm-gap,14px)}
.cm-adm-seg{display:inline-flex;padding:2px;border-radius:10px;background:var(--ios-fill-2);gap:2px}
.cm-adm-seg button{min-height:30px;padding:4px 14px;border-radius:8px;font-size:13px;font-weight:600;color:var(--studio-muted);background:none;cursor:pointer;transition:background .2s var(--ios-ease,ease),color .2s}
.cm-adm-seg button.is-active{background:var(--ios-seg-thumb);color:var(--studio-ink);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.cm-adm-seg.is-sm button{min-height:26px;padding:3px 10px;font-size:12px}
.cm-adm-foot{margin:2px 4px 0;font-size:12px;color:var(--studio-muted)}

/* „Dziś do zrobienia” */
.cm-adm-today{padding:18px;border-radius:var(--cm-radius,22px);background:linear-gradient(135deg,rgba(255,210,63,.10),rgba(10,132,255,.06) 60%,transparent),var(--studio-surface);border:1px solid var(--cm-hair,var(--studio-line))}
.cm-adm-todo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.cm-adm-todo{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:16px;background:var(--studio-surface);border:1px solid var(--studio-line);min-width:0;transition:transform .2s var(--ios-spring,ease)}
.cm-adm-todo:hover{transform:translateY(-1px)}
.cm-adm-todo-head{display:flex;align-items:center;justify-content:space-between}
.cm-adm-todo-ic{display:grid;place-items:center;width:32px;height:32px;border-radius:10px}
.cm-adm-todo-ic svg{width:17px;height:17px}
.cm-adm-todo.is-red .cm-adm-todo-ic{background:rgba(255,69,58,.14);color:var(--cm-red)}
.cm-adm-todo.is-gold .cm-adm-todo-ic{background:var(--ios-tint-soft);color:var(--ios-tint)}
.cm-adm-todo.is-blue .cm-adm-todo-ic{background:rgba(10,132,255,.14);color:var(--cm-blue)}
.cm-adm-todo.is-purple .cm-adm-todo-ic{background:rgba(191,90,242,.14);color:#BF5AF2}
.cm-adm-todo-num{font-size:26px;line-height:1;font-weight:800;color:var(--studio-ink);font-variant-numeric:tabular-nums}
.cm-adm-todo.is-done .cm-adm-todo-num{color:var(--studio-muted);opacity:.6}
.cm-adm-todo-title{font-size:14px;font-weight:700;color:var(--studio-ink)}
.cm-adm-todo-body{font-size:13px;color:var(--studio-muted);line-height:1.45;min-width:0}
.cm-adm-todo-body ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.cm-adm-todo-body li{display:flex;align-items:baseline;gap:6px;min-width:0;white-space:nowrap}
/* Tytuł z wielokropkiem (link był inline-flex - przycinany w pół słowa bez „…”), godziny oczekiwania zawsze widoczne (audyt panel-10). */
body.cm-area .cm-adm-todo-body li>a{display:block;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-adm-todo-body li>span{flex:none}
.cm-adm-todo .cm-btn{align-self:flex-start;margin-top:auto}
.cm-adm-faces{display:flex;flex-wrap:wrap;gap:4px}
.cm-adm-hot{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13px;color:var(--studio-ink)}
.cm-adm-hot svg{width:16px;height:16px;color:var(--ios-tint);flex:0 0 auto}

/* kafelki KPI */
.cm-adm-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:900px){.cm-adm-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cm-adm-kpi{position:relative;display:flex;flex-direction:column;gap:4px;padding:16px 16px 14px;border-radius:18px;background:var(--cm-card-bg,var(--studio-surface));border:1px solid var(--cm-hair,var(--studio-line));overflow:hidden;min-width:0}
.cm-adm-kpi-label{font-size:12px;font-weight:600;color:var(--studio-muted)}
.cm-adm-kpi-value{font-size:30px;line-height:1.1;font-weight:800;letter-spacing:-.02em;color:var(--studio-ink);font-variant-numeric:tabular-nums}
.cm-adm-kpi-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:var(--studio-muted);position:relative;z-index:1}
.cm-adm-kpi-sub{min-width:0}
.cm-adm-spark{position:absolute;right:0;bottom:0;width:58%;height:44px;opacity:.9;pointer-events:none}
/* Miejsce na wykres pod podpisem - linia trendu nie przechodzi przez tekst (audyt panel-9). */
.cm-adm-kpi:has(>.cm-adm-spark){padding-bottom:54px}
@media (max-width:640px){.cm-adm-kpi:has(>.cm-adm-spark){padding-bottom:44px}}
.cm-adm-spark.is-gold{color:var(--ios-tint)}.cm-adm-spark.is-blue{color:var(--cm-blue)}.cm-adm-spark.is-green{color:var(--cm-green)}.cm-adm-spark.is-purple{color:#BF5AF2}
.cm-adm-delta{display:inline-flex;align-items:center;gap:2px;padding:2px 7px;border-radius:999px;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.cm-adm-delta.is-up{background:rgba(48,209,88,.14);color:var(--cm-green)}
.cm-adm-delta.is-down{background:rgba(255,69,58,.14);color:var(--cm-red)}
.cm-adm-delta.is-flat{background:var(--ios-fill-2);color:var(--studio-muted)}
@media (max-width:640px){
  .cm-adm-today{padding:14px}
  .cm-adm-todo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .cm-adm-todo{padding:12px;gap:4px;border-radius:14px}
  /* Telefon: zostaje jedna akcja na kartę - pierwsze pytanie z listy, twarze nowych osób albo przycisk (audyt panel-11);
     same opisy bez akcji dalej schowane. */
  .cm-adm-todo-body:not(:has(ul,.cm-adm-faces)){display:none}
  .cm-adm-todo-body li+li{display:none}
  .cm-adm-todo .cm-btn{width:100%;justify-content:center}
  .cm-adm-todo-title{font-size:13px;line-height:1.3}
  .cm-adm-todo-num{font-size:22px}
  .cm-adm-section-head .cm-small{display:block;width:100%}
}
@media (max-width:640px){.cm-adm-kpi{padding:14px 12px 12px}.cm-adm-kpi-value{font-size:24px}.cm-adm-kpi-sub{display:none}.cm-adm-spark{width:50%;height:34px}}

/* wykres słupkowy */
.cm-adm-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:-2px 0 8px;font-size:12px;color:var(--studio-muted)}
.cm-adm-legend span{display:inline-flex;align-items:center;gap:6px}
.cm-adm-legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.cm-adm-legend i.is-line{height:3px;border-radius:2px;width:14px}
.cm-adm-chart-wrap{width:100%;overflow:hidden}
.cm-adm-chart{display:block;width:100%;height:auto}
.cm-adm-grid{stroke:var(--studio-line);stroke-width:1;stroke-dasharray:3 4}
.cm-adm-axis{fill:var(--studio-muted);font-size:11px;font-family:var(--ios-font,inherit)}
/* Telefon: wykres 720 jednostek ściśnięty do ok. 320 px dawał podpisy osi ok. 5-6 px. Wykres ma co najmniej 600 px
   (przewija się w poziomie), podpisy 14 jednostek - ok. 11-12 px na ekranie (audyt panel-11). */
@media (max-width:640px){.cm-adm-chart-wrap{display:flex;flex-direction:row-reverse;overflow-x:auto;overscroll-behavior-x:contain}.cm-adm-chart{flex:none;width:600px;min-width:600px}.cm-adm-axis{font-size:14px}} /* row-reverse: start przy najnowszych dniach */
.cm-adm-bar{transition:opacity .15s}
.is-gold.cm-adm-bar,.cm-adm-legend i.is-gold{fill:var(--ios-tint);background:var(--ios-tint)}
.is-blue.cm-adm-bar,.cm-adm-legend i.is-blue{fill:var(--cm-blue);background:var(--cm-blue)}
.is-purple.cm-adm-bar,.cm-adm-legend i.is-purple{fill:#BF5AF2;background:#BF5AF2}
.is-green.cm-adm-bar,.cm-adm-legend i.is-green{fill:var(--cm-green);background:var(--cm-green)}
.cm-adm-line{fill:none;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.cm-adm-line.is-green{stroke:var(--cm-green)}.cm-adm-line.is-gold{stroke:var(--ios-tint)}.cm-adm-line.is-blue{stroke:var(--cm-blue)}
.cm-adm-dot{stroke:var(--studio-surface);stroke-width:1.5}
.cm-adm-dot.is-green{fill:var(--cm-green)}.cm-adm-dot.is-gold{fill:var(--ios-tint)}.cm-adm-dot.is-blue{fill:var(--cm-blue)}
.cm-adm-hit{fill:transparent;cursor:default;outline:none}
.cm-adm-hit:hover,.cm-adm-hit:focus-visible{fill:var(--ios-fill-2)}
.cm-adm-tip{position:absolute;z-index:120;padding:8px 10px;border-radius:12px;background:var(--ios-glass-strong);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);border:1px solid var(--ios-glass-rim);box-shadow:var(--ios-glass-shadow);font-size:12px;line-height:1.5;color:var(--studio-ink);pointer-events:none;white-space:nowrap}
.cm-adm-tip b{font-variant-numeric:tabular-nums}

/* lejek, poziome słupki, pytania */
.cm-adm-funnel,.cm-adm-hbars{display:flex;flex-direction:column;gap:12px}
.cm-adm-funnel-label,.cm-adm-hbar-label{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px;color:var(--studio-ink);margin-bottom:5px}
.cm-adm-funnel-label strong{font-variant-numeric:tabular-nums}
.cm-adm-funnel-label small,.cm-adm-hbar-label small{font-size:12px;color:var(--studio-muted);font-weight:600}
.cm-adm-hbar-label span{display:inline-flex;align-items:center;gap:6px;min-width:0}
.cm-adm-hbar-label span svg{width:15px;height:15px;color:var(--studio-muted)}
.cm-adm-funnel-bar{height:8px;border-radius:999px;background:var(--ios-fill-2);overflow:hidden}
.cm-adm-funnel-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--ios-tint),#FFA500);transform-origin:left;animation:cm-adm-grow .7s var(--ios-ease,ease) both}
@keyframes cm-adm-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.cm-adm-qgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px}
.cm-adm-qgrid div{padding:12px;border-radius:14px;background:var(--ios-fill-2)}
.cm-adm-qgrid strong{display:block;font-size:22px;font-weight:800;color:var(--studio-ink);font-variant-numeric:tabular-nums}
.cm-adm-qgrid span{font-size:12px;color:var(--studio-muted)}
.cm-adm-alert,.cm-adm-ok,.cm-adm-note{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:12px;font-size:13px;line-height:1.45}
.cm-adm-alert{background:rgba(255,69,58,.1);color:var(--studio-ink)}
.cm-adm-alert svg{color:var(--cm-red);width:16px;height:16px;flex:0 0 auto;margin-top:1px}
.cm-adm-alert.is-amber{background:rgba(255,159,10,.12)}.cm-adm-alert.is-amber svg{color:#FF9F0A}
.cm-adm-ok{background:rgba(48,209,88,.1);color:var(--studio-ink)}
.cm-adm-ok svg{color:var(--cm-green);width:16px;height:16px;flex:0 0 auto;margin-top:1px}
.cm-adm-note{background:var(--ios-fill-2);color:var(--studio-ink)}
.cm-adm-note svg{width:16px;height:16px;flex:0 0 auto;color:var(--ios-tint);margin-top:1px}

/* rankingi, listy, wiersze */
.cm-adm-rank{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.cm-adm-rank li{display:flex;align-items:center;gap:10px;min-width:0}
.cm-adm-rank-n{width:20px;text-align:center;font-size:13px;font-weight:700;color:var(--studio-muted);font-variant-numeric:tabular-nums}
.cm-adm-rank li:nth-child(1) .cm-adm-rank-n{color:var(--ios-tint)}
.cm-adm-rank-who{display:flex;align-items:center;gap:10px;flex:1;min-width:0;padding:6px;border-radius:12px;background:none;text-align:left;cursor:pointer;color:inherit}
.cm-adm-rank-who:hover{background:var(--ios-fill-2)}
.cm-adm-rank-who strong{display:block;font-size:14px;color:var(--studio-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-adm-rank-who small{display:block;font-size:12px;color:var(--studio-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-adm-rank-pts{font-size:13px;font-weight:700;color:var(--cm-green);font-variant-numeric:tabular-nums;white-space:nowrap}
.cm-adm-list{display:flex;flex-direction:column}
.cm-adm-row{display:flex;align-items:center;gap:10px;padding:10px 6px;border-bottom:1px solid var(--studio-line);min-width:0;color:inherit;text-decoration:none;background:none;text-align:left;width:100%}
.cm-adm-row:last-child{border-bottom:0}
.cm-adm-row strong{color:var(--studio-ink);font-size:14px}
.cm-adm-row small{display:block;font-size:12px;line-height:1.4}
.cm-adm-row.is-link{cursor:pointer;border-radius:12px}
.cm-adm-row.is-link:hover{background:var(--ios-fill-2)}
.cm-adm-ellipsis{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-adm-clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;color:var(--studio-ink)}
.cm-adm-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;background:var(--ios-fill-2);font-size:12px;font-weight:600;color:var(--studio-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.cm-adm-pill.is-red{background:rgba(255,69,58,.14);color:var(--cm-red)}
.cm-adm-pts{min-width:58px;text-align:right;font-size:14px;font-weight:800;color:var(--cm-green);font-variant-numeric:tabular-nums}
.cm-adm-pts.is-neg{color:var(--cm-red)}
/* Historia punktów na telefonie: osoba i powód na całą szerokość, „za co · kiedy · kto” w drugim wierszu pod imieniem
   (prawa kolumna ściskała imię do 2-3 liter - audyt panel-15). !important tylko przeciw stylowi w atrybucie z JS. */
@media (max-width:639px){
  #cm-pts-rows .cm-adm-row{flex-wrap:wrap;row-gap:0}
  #cm-pts-rows .cm-adm-rank-who{flex:1 1 calc(100% - 68px)}
  #cm-pts-rows .cm-adm-row>.cm-small{flex:1 1 100%;margin:-4px 0 0 calc(68px + 6px + 32px + 10px)!important;text-align:left!important}
}
.cm-adm-red{color:var(--cm-red)}

/* mapa aktywności */
.cm-adm-heat{display:flex;flex-direction:column;gap:3px;overflow-x:auto;padding-bottom:2px}
.cm-adm-heat-row{display:grid;grid-template-columns:42px repeat(24,minmax(14px,1fr));gap:3px;align-items:center;min-width:520px}
.cm-adm-heat-day{font-size:11px;font-weight:600;color:var(--studio-muted)}
.cm-adm-heat-row i{display:block;aspect-ratio:1;border-radius:4px;background:color-mix(in srgb,var(--ios-tint) calc(var(--a,0) * 100%),var(--ios-fill-2))}
.cm-adm-heat-row.is-hours b{font-size:10px;font-weight:600;color:var(--studio-muted);text-align:left}
/* Telefon: cała doba na szerokość ekranu (wcześniej widać było godziny 0-13 i nic nie zdradzało przewijania - audyt panel-26). */
@media (max-width:640px){.cm-adm-heat-row{grid-template-columns:34px repeat(24,minmax(0,1fr));gap:2px;min-width:0}.cm-adm-heat-row i{border-radius:3px}.cm-adm-heat-day{font-size:10px;white-space:nowrap}.cm-adm-heat-row.is-hours b{font-size:9px;white-space:nowrap}}
.cm-adm-heat-best{display:flex;align-items:flex-start;gap:8px;margin:0 0 12px;font-size:13px;color:var(--studio-ink)}
.cm-adm-heat-best svg{width:16px;height:16px;color:var(--ios-tint);flex:0 0 auto;margin-top:2px}

/* członkowie: pasek narzędzi, tabela, akcje masowe */
.cm-adm-toolbar{display:flex;flex-wrap:wrap;gap:8px}
.cm-adm-search{position:relative;flex:1 1 260px;display:flex;align-items:center}
.cm-adm-search svg{position:absolute;left:12px;width:16px;height:16px;color:var(--studio-muted);pointer-events:none}
.cm-adm-search .cm-input{padding-left:36px;width:100%}
.cm-adm-toolbar .cm-select{width:auto;flex:0 1 200px}
.cm-adm-chips{margin:0}
.cm-adm-chip-n{opacity:.7;font-variant-numeric:tabular-nums}
.cm-adm-count-line{margin:0 4px 8px;font-size:12px;color:var(--studio-muted)}
.cm-adm-table-wrap{border:1px solid var(--cm-hair,var(--studio-line));border-radius:18px;overflow:auto;background:var(--studio-surface)}
.cm-adm-table{width:100%;border-collapse:collapse;font-size:13px}
.cm-adm-table th{position:sticky;top:0;z-index:1;text-align:left;padding:10px 12px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--studio-muted);background:var(--studio-surface);border-bottom:1px solid var(--studio-line);white-space:nowrap}
.cm-adm-table td{padding:10px 12px;border-bottom:1px solid var(--studio-line);color:var(--studio-ink);vertical-align:middle}
.cm-adm-table tbody tr:last-child td{border-bottom:0}
.cm-adm-tr{cursor:pointer;transition:background .12s}
.cm-adm-tr:hover{background:var(--ios-fill-2)}
.cm-adm-td-check{width:36px;padding-right:0!important}
.cm-adm-td-check input{width:16px;height:16px;accent-color:var(--ios-tint);cursor:pointer}
.cm-adm-who{display:flex;align-items:center;gap:10px;min-width:0}
/* Imię i opis w osobnych wierszach (bez tego „Piotr KamińskiBlokada pisania” - audyt panel-8). */
.cm-adm-who>span>strong,.cm-adm-who>span>small{display:block}
.cm-adm-name{display:block;max-width:240px;font-size:14px;font-weight:600;color:var(--studio-ink);background:none;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.cm-adm-name:hover{text-decoration:underline}
.cm-adm-email{display:block;max-width:240px;font-size:12px;color:var(--studio-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-adm-tier{display:inline-block;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:.03em;background:var(--ios-fill-2);color:var(--studio-muted)}
.cm-adm-tier.is-pro{background:var(--ios-tint-soft);color:var(--ios-tint)}
.cm-adm-tier.is-admin{background:rgba(10,132,255,.14);color:var(--cm-blue)}
.cm-adm-role{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700}
.cm-adm-role.is-owner{background:var(--cm-gold-grad,var(--ios-tint));color:var(--ios-on-tint)}
.cm-adm-role.is-admin{background:rgba(10,132,255,.16);color:var(--cm-blue)}
.cm-adm-role.is-moderator{background:rgba(48,209,88,.14);color:var(--cm-green)}
.cm-adm-status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--studio-muted);white-space:nowrap}
.cm-adm-status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--studio-muted);opacity:.6}
.cm-adm-status.is-green{color:var(--cm-green)}.cm-adm-status.is-green::before{background:var(--cm-green);opacity:1}
.cm-adm-status.is-blue{color:var(--cm-blue)}.cm-adm-status.is-blue::before{background:var(--cm-blue);opacity:1}
.cm-adm-status.is-amber{color:#FF9F0A}.cm-adm-status.is-amber::before{background:#FF9F0A;opacity:1}
.cm-adm-status.is-red{color:var(--cm-red)}.cm-adm-status.is-red::before{background:var(--cm-red);opacity:1}
.cm-adm-pager{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px}
.cm-adm-flip svg{transform:rotate(180deg)}
.cm-adm-bulk{position:sticky;bottom:16px;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px auto 0;width:max-content;max-width:100%;padding:8px 10px 8px 16px;border-radius:999px;background:var(--ios-glass-strong);-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);border:1px solid var(--ios-glass-rim);box-shadow:var(--ios-glass-shadow);font-size:13px;font-weight:600;color:var(--studio-ink);animation:cm-adm-up .3s var(--ios-spring,ease) both}
.cm-adm-bulk[hidden]{display:none}
@keyframes cm-adm-up{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
@media (max-width:767px){
  .cm-adm-table thead{display:none}
  .cm-adm-table,.cm-adm-table tbody{display:block}
  /* Wiersz jak komórka listy iOS: osoba i stan w pierwszej linii, reszta jako drobne metki pod spodem. */
  .cm-adm-table tr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:12px;border-bottom:1px solid var(--studio-line)}
  .cm-adm-table td{display:block;padding:0;border:0;font-size:12px}
  .cm-adm-table td:nth-child(2){flex:1 1 calc(100% - 160px);min-width:0;order:1}
  .cm-adm-table .cm-adm-td-check{order:0;flex:0 0 28px}
  .cm-adm-table td[data-label="Status"]{order:2;flex:0 0 auto;margin-left:auto}
  .cm-adm-table td[data-label]:not([data-label="Status"]){order:3;color:var(--studio-muted)}
  .cm-adm-table td[data-label="Pakiet"]{margin-left:38px}
  .cm-adm-table td[data-label="Ostatnio"]::before{content:"· "}
  .cm-adm-table.is-log tr,.cm-adm-table.cm-adm-matrix tr{display:flex;flex-direction:column;align-items:flex-start}
  .cm-adm-table.is-log td[data-label],.cm-adm-table.is-log td:nth-child(2){margin:0;order:0;flex:none}
  .cm-adm-name,.cm-adm-email{max-width:100%}
  /* Telefon: pasek na całą szerokość, jeden wiersz (bez ikon w przyciskach, ciaśniej) - wcześniej 3 wiersze i 114 px (audyt panel-24). */
  .cm-adm-bulk{bottom:calc(96px + env(safe-area-inset-bottom,0px));width:100%;flex-wrap:nowrap;justify-content:space-between;gap:6px;padding:6px 8px 6px 14px;font-size:12px}
  .cm-adm-bulk>span{flex:none;white-space:nowrap}
  .cm-adm-bulk .cm-btn{flex:none;padding:0 9px;font-size:12px;white-space:nowrap}
  .cm-adm-bulk .cm-btn svg{display:none}
}
/* Poniżej 360 px jedna linia się nie mieści (przy 320 px „Odznacz” wychodził poza ekran): licznik w pierwszym wierszu,
   trzy przyciski równo w drugim. */
@media (max-width:359px){
  .cm-adm-bulk{flex-wrap:wrap;row-gap:4px;border-radius:22px;padding:8px}
  .cm-adm-bulk>span{flex:1 0 100%;padding:2px 6px 0}
  .cm-adm-bulk .cm-btn{flex:1 1 0;min-width:0;padding:0 6px}
}
.cm-adm-matrix td:not(:first-child),.cm-adm-matrix th:not(:first-child){text-align:center}
.cm-adm-yes{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(48,209,88,.14);color:var(--cm-green)}
.cm-adm-yes svg{width:13px;height:13px}
.cm-adm-no{color:var(--studio-muted);opacity:.5}

/* szuflada karty osoby */
.cm-adm-drawer-wrap{position:fixed;inset:0;z-index:70}
.cm-adm-scrim{position:absolute;inset:0;background:var(--ios-scrim);animation:cm-adm-fade .25s ease both}
.cm-adm-drawer{position:absolute;top:0;right:0;bottom:0;width:min(560px,100vw);display:flex;flex-direction:column;background:var(--ios-bg,var(--studio-canvas));border-left:1px solid var(--studio-line);box-shadow:-24px 0 60px rgba(0,0,0,.35);outline:none;animation:cm-adm-slide .34s var(--ios-ease,ease) both}
.cm-adm-drawer-wrap.is-closing .cm-adm-drawer{animation:cm-adm-slide-out .24s ease both}
.cm-adm-drawer-wrap.is-closing .cm-adm-scrim{animation:cm-adm-fade .24s ease reverse both}
@keyframes cm-adm-slide{from{transform:translateX(100%)}to{transform:none}}
@keyframes cm-adm-slide-out{to{transform:translateX(100%)}}
@keyframes cm-adm-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.cm-adm-drawer,.cm-adm-scrim,.cm-adm-funnel-bar i,.cm-adm-bulk{animation:none}}
.cm-adm-d-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding-bottom:max(24px,env(safe-area-inset-bottom,0px))}
.cm-adm-d-head{position:relative;padding:calc(20px + env(safe-area-inset-top,0px)) 20px 16px;background:radial-gradient(120% 140% at 0 0,rgba(255,210,63,.16),transparent 60%),var(--studio-surface);border-bottom:1px solid var(--studio-line)}
.cm-adm-d-close{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:12px}
.cm-adm-d-id{display:flex;align-items:center;gap:16px;min-width:0;padding-right:36px}
.cm-adm-d-id h2{margin:0;font-size:22px;line-height:1.2;font-weight:800;color:var(--studio-ink);letter-spacing:-.01em;overflow-wrap:anywhere}
.cm-adm-d-headline{margin:2px 0 6px;font-size:13px;color:var(--studio-muted)}
.cm-adm-d-mail{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:4px 8px;margin-left:-8px;border-radius:8px;background:none;font-size:13px;color:var(--studio-ink);cursor:pointer}
.cm-adm-d-mail:hover{background:var(--ios-fill-2)}
.cm-adm-d-mail span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-adm-d-mail svg{flex:0 0 auto;color:var(--studio-muted)}
.cm-adm-d-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:12px}
.cm-adm-d-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.cm-adm-d-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--studio-line);border-bottom:1px solid var(--studio-line)}
.cm-adm-d-stats div{padding:12px 14px;background:var(--studio-surface)}
.cm-adm-d-stats strong{display:block;font-size:20px;font-weight:800;color:var(--studio-ink);font-variant-numeric:tabular-nums}
.cm-adm-d-stats span{font-size:12px;color:var(--studio-muted)}
.cm-adm-d-tabs{position:sticky;top:0;z-index:2;display:flex;gap:4px;padding:8px 12px;overflow-x:auto;background:var(--ios-glass-strong);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--studio-line);scrollbar-width:none}
/* Zakładki karty osoby na telefonie: piąta wystaje poza ekran - prawa krawędź wygasa, żeby było widać, że pasek się przewija. */
@media (max-width:639px){.cm-adm-d-tabs{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}.cm-adm-d-tabs::after{content:"";flex:0 0 20px}}
.cm-adm-d-tabs button{flex:0 0 auto;min-height:32px;padding:4px 12px;border-radius:999px;font-size:13px;font-weight:600;color:var(--studio-muted);background:none;cursor:pointer}
.cm-adm-d-tabs button.is-active{background:var(--studio-ink);color:var(--studio-surface)}
.cm-adm-dot-n{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--cm-red);color:#fff;font-size:10px;font-weight:700}
.cm-adm-d-pane{padding:16px 20px 24px}
.cm-adm-d-h{margin:18px 0 8px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--studio-muted)}
.cm-adm-d-pane>.cm-adm-d-h:first-child{margin-top:0}
.cm-adm-d-level{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:16px;background:var(--studio-surface);border:1px solid var(--studio-line)}
.cm-adm-d-activity{display:grid;grid-template-columns:repeat(30,minmax(0,1fr));gap:3px;align-items:end;height:56px;padding:8px;border-radius:14px;background:var(--studio-surface);border:1px solid var(--studio-line)}
.cm-adm-d-activity i{display:block;height:max(3px,var(--h,0%));border-radius:3px;background:var(--ios-tint)}
.cm-adm-d-activity i[style*="--h:0%"]{background:var(--ios-fill)}
.cm-adm-kvs{display:flex;flex-direction:column;border-radius:16px;background:var(--studio-surface);border:1px solid var(--studio-line);overflow:hidden}
.cm-adm-kv{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:1px solid var(--studio-line);font-size:13px}
.cm-adm-kv:last-child{border-bottom:0}
.cm-adm-kv span{color:var(--studio-muted)}
.cm-adm-kv strong{font-weight:600;color:var(--studio-ink);text-align:right}
.cm-adm-roles{display:flex;flex-direction:column;gap:8px}
.cm-adm-role-card{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:16px;border:1px solid var(--studio-line);background:var(--studio-surface);text-align:left;cursor:pointer;color:inherit;transition:border-color .15s,background .15s}
.cm-adm-role-card:hover:not(:disabled){border-color:var(--ios-tint)}
.cm-adm-role-card.is-active{border-color:var(--ios-tint);background:var(--ios-tint-soft)}
.cm-adm-role-card:disabled{opacity:.55;cursor:not-allowed}
.cm-adm-role-card strong{display:block;font-size:14px;color:var(--studio-ink)}
.cm-adm-role-card small{display:block;font-size:12px;line-height:1.45;color:var(--studio-muted);margin-top:2px}
.cm-adm-role-dot{flex:0 0 auto;width:20px;height:20px;margin-top:1px;border-radius:50%;border:2px solid var(--studio-line);transition:border .15s}
.cm-adm-role-card.is-active .cm-adm-role-dot{border:6px solid var(--ios-tint)}
.cm-adm-lock{display:inline-flex!important;align-items:center;gap:4px;color:var(--ios-tint)!important;font-weight:600}
.cm-adm-switch{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--studio-ink);cursor:pointer}
.cm-adm-switch input{position:absolute;opacity:0;width:1px;height:1px}
.cm-adm-switch-ui{flex:0 0 auto;position:relative;width:51px;height:31px;border-radius:999px;background:var(--ios-fill);transition:background .2s}
.cm-adm-switch-ui::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.15),0 3px 1px rgba(0,0,0,.06);transition:transform .25s var(--ios-spring,ease)}
.cm-adm-switch input:checked+.cm-adm-switch-ui{background:var(--cm-green)}
.cm-adm-switch input:checked+.cm-adm-switch-ui::after{transform:translateX(20px)}
.cm-adm-switch input:focus-visible+.cm-adm-switch-ui{outline:2px solid var(--ios-tint);outline-offset:2px}
.cm-adm-tagpick{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.cm-adm-tagpick input{accent-color:var(--ios-tint)}
.cm-adm-points{display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:16px;background:var(--studio-surface);border:1px solid var(--studio-line)}
@media (max-width:767px){.cm-adm-drawer{width:100vw;border-left:0}.cm-adm-d-stats{grid-template-columns:repeat(3,minmax(0,1fr))}.cm-adm-d-pane{padding:14px 16px 24px}}

/* zgłoszenia, blokady, ukryte */
.cm-adm-report,.cm-adm-sanction{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:18px;background:var(--studio-surface);border:1px solid var(--cm-hair,var(--studio-line))}
.cm-adm-report-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cm-adm-age{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--studio-muted)}
.cm-adm-age.is-red{color:var(--cm-red)}.cm-adm-age.is-amber{color:#FF9F0A}.cm-adm-age.is-green{color:var(--cm-green)}
.cm-adm-quote{margin:0;padding:10px 14px;border-left:3px solid var(--ios-tint);border-radius:4px 12px 12px 4px;background:var(--ios-fill-2);font-size:14px;line-height:1.5;color:var(--studio-ink);white-space:pre-wrap;overflow-wrap:anywhere}
.cm-adm-report-who{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12px;color:var(--studio-muted)}
.cm-adm-report-who .cm-link{display:inline-flex;align-items:center;gap:4px;font-size:12px}
.cm-adm-report-actions{display:flex;flex-wrap:wrap;gap:8px}
.cm-adm-sanction-until{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cm-adm-zero{display:flex;flex-direction:column;align-items:center;gap:6px;padding:40px 16px;text-align:center;border-radius:22px;border:1px dashed var(--studio-line);color:var(--studio-muted)}
.cm-adm-zero svg{width:30px;height:30px;padding:6px;border-radius:50%;background:rgba(48,209,88,.14);color:var(--cm-green);box-sizing:content-box}
.cm-adm-zero strong{font-size:16px;color:var(--studio-ink)}
.cm-adm-zero span{font-size:13px}

/* telefon: ekran startowy panelu jak Ustawienia iOS; moduły */
.cm-adm-ios-group{margin-bottom:22px}
.cm-adm-ios-head{margin:0 16px 6px;font-size:13px;color:var(--studio-muted);text-transform:uppercase;letter-spacing:.02em}
.cm-adm-ios-list{border-radius:var(--nk-r-group,16px);background:var(--studio-surface);overflow:hidden;border:1px solid var(--cm-hair,var(--studio-line))}
.cm-adm-ios-row{position:relative;display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 14px;color:inherit;text-decoration:none}
.cm-adm-ios-row+.cm-adm-ios-row::before{content:"";position:absolute;top:0;left:58px;right:0;height:1px;background:var(--studio-line)}
.cm-adm-ios-row.is-static+.cm-adm-ios-row.is-static::before{left:14px}
.cm-adm-ios-row:not(.is-static):active{background:var(--ios-fill-2)}
.cm-adm-ios-ic{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;color:#fff;flex:0 0 auto;background:#8E8E93}
.cm-adm-ios-ic svg{width:18px;height:18px}
.cm-adm-ios-ic.is-pulpit{background:#0A84FF}.cm-adm-ios-ic.is-czlonkowie{background:#30D158}.cm-adm-ios-ic.is-zespol{background:#FF9F0A}
.cm-adm-ios-ic.is-zgloszenia{background:#FF453A}.cm-adm-ios-ic.is-blokady{background:#FF375F}.cm-adm-ios-ic.is-ukryte{background:#8E8E93}.cm-adm-ios-ic.is-dziennik{background:#5E5CE6}
.cm-adm-ios-ic.is-przestrzenie{background:#64D2FF}.cm-adm-ios-ic.is-ogloszenia{background:#FF9F0A}.cm-adm-ios-ic.is-rytualy{background:#BF5AF2}.cm-adm-ios-ic.is-etykiety{background:#30D158}
.cm-adm-ios-ic.is-punkty{background:#FFD60A;color:#1c1c1e}.cm-adm-ios-ic.is-historia-punktow{background:#FF9F0A}.cm-adm-ios-ic.is-moduly{background:#8E8E93}
.cm-adm-ios-text{flex:1;min-width:0}
.cm-adm-ios-text strong{display:block;font-size:16px;font-weight:500;color:var(--studio-ink)}
.cm-adm-ios-text small{display:block;font-size:13px;color:var(--studio-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-adm-ios-chev{color:var(--ios-label-3);transform:rotate(180deg)}
.cm-adm-ios-chev svg{width:16px;height:16px}
.cm-adm-env{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px!important;opacity:.7;margin-top:2px}
.cm-adm-onoff{flex:0 0 auto;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;background:var(--ios-fill-2);color:var(--studio-muted)}
.cm-adm-onoff.is-on{background:rgba(48,209,88,.14);color:var(--cm-green)}
.cm-adm-cohorts td,.cm-adm-cohorts th{text-align:center;padding:6px}
.cm-adm-cohorts td:first-child,.cm-adm-cohorts th:first-child{text-align:left}
/* Kohorty: skala od tła do granatu (ciemny motyw) albo jasnego błękitu (jasny), tekst zawsze w kolorze tekstu motywu - kontrast
   co najmniej 6:1 w każdej komórce (było 3,3:1 i 4,1:1; audyt panel-19). Małe kohorty bez szarego tekstu, z cienką ramką. */
.cm-adm-cohort{--coh:#2a5ea6;display:inline-grid;place-items:center;min-width:44px;height:28px;border-radius:8px;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--studio-ink);background:color-mix(in srgb,var(--coh) calc(var(--a,0) * 100%),var(--ios-fill-2))}
[data-theme="light"] .cm-adm-cohort{--coh:#8fb4e6}
.cm-adm-cohort.is-small{font-weight:600;box-shadow:inset 0 0 0 1px var(--ios-sep,var(--studio-line))}
.cm-adm-note-form{display:flex;flex-direction:column;gap:8px}
@media (max-width:767px){.cm-adm-table.cm-adm-cohorts{display:table!important}.cm-adm-cohorts thead{display:table-header-group!important}.cm-adm-cohorts tbody{display:table-row-group!important}.cm-adm-cohorts tr{display:table-row!important}.cm-adm-cohorts td,.cm-adm-cohorts th{display:table-cell!important}}
.cm-adm-skel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.cm-adm-skel-grid .cm-skeleton{height:110px;margin:0}
/* ---------- pasek górny, panel wiadomości, okienka czatu ----------
   Prośba Jana 11.10 („wiadomości po lewej to dziwne rozwiązanie”): na komputerze (od 1024 px) pasek jak w Circle -
   szukaj, dzwonek, wiadomości, zapisane, awatar z menu konta - oraz okienka rozmów w prawym dolnym rogu (LinkedIn,
   Facebook). Telefon bez zmian: dolny pasek i arkusz „Więcej”. Poza społecznością nagłówek kursu zostaje jak był.
   Tylko tokeny --ios-* / --cm-* z bloku „iOS premium” (oba motywy). */
body.cm-area .cm-course-only{display:none!important} /* ikona wiadomości kursu (prowadzi do skrzynki) - w społeczności jest panel */
@media (min-width:1024px){
  /* Imię, profil kursu, motyw i wylogowanie są w menu konta. */
  body.cm-area #user-name,body.cm-area #profile-btn,body.cm-area #theme-toggle,body.cm-area #main-app>header button[onclick="logout()"]{display:none!important}
  body.cm-area #cm-header{gap:4px}
  body.cm-area #main-app>header>nav a{white-space:nowrap}
  body.cm-area #cm-header .cm-header-btn{width:40px;height:40px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;background:transparent;color:var(--ios-label-2)}
  body.cm-area #cm-header .cm-header-btn svg{width:22px;height:22px}
  body.cm-area #cm-header .cm-header-btn:hover{background:var(--ios-fill-2);color:var(--ios-label)}
  body.cm-area #cm-header .cm-header-btn:is(.is-active,[aria-expanded="true"]){background:var(--ios-tint-soft);color:var(--ios-tint)}
  /* Liczniki jak w iOS i Circle: czerwona kapsuła z obwódką w kolorze paska (odcina się od ikony). */
  body.cm-area #cm-header .cm-header-btn .cm-count{top:3px;right:2px;min-width:18px;height:18px;padding:0 5px;background:var(--cm-red);color:#fff;font-size:11px;font-weight:700;box-shadow:0 0 0 2px var(--ios-bg)}
  /* Awatar w zaokrąglonym kwadracie (Circle), obwódka przy otwartym menu. */
  body.cm-area #cm-header .cm-acct-btn{margin-left:6px;border-radius:12px}
  body.cm-area #cm-header .cm-acct-btn:hover{background:transparent}
  body.cm-area #cm-header .cm-acct-btn[aria-expanded="true"]{background:transparent}
  body.cm-area .cm-acct-face{display:inline-flex;border-radius:11px;transition:box-shadow .2s}
  body.cm-area .cm-acct-face .cm-avatar{width:34px;height:34px;border-radius:10px;font-size:13px;box-shadow:inset 0 0 0 .5px var(--ios-glass-rim)}
  body.cm-area .cm-acct-btn:hover .cm-acct-face{box-shadow:0 0 0 2px var(--ios-fill)}
  body.cm-area .cm-acct-btn[aria-expanded="true"] .cm-acct-face{box-shadow:0 0 0 2px var(--ios-tint)}
}

/* 1024-1279 px: linki zewnętrzne kursu (Platforma, Optimizer, Blog, Kontakt) łamały się na dwie linie obok ikon -
   w społeczności chowamy je do 1280 px (w części „Nauka” bez zmian). */
@media (min-width:1024px) and (max-width:1279px){body.cm-area #main-app>header>nav{display:none!important}}

/* Menu konta: karta „kto jest zalogowany”, pozycje z ikoną po lewej (Circle), przełącznik motywu, czerwone „Wyloguj”. */
html body.cm-area .cm-acct{width:280px;max-width:calc(100vw - 16px);padding:6px}
body.cm-area .cm-acct-card{display:flex;align-items:center;gap:12px;padding:10px 10px 12px}
body.cm-area .cm-acct-card .cm-avatar{width:44px;height:44px;border-radius:12px;font-size:16px}
body.cm-area .cm-acct-who{display:flex;flex-direction:column;min-width:0}
/* Plakietka przechodzi pod imię, gdy obok się nie mieści - imię z nazwiskiem bez ucinania (audyt powiadomienia-21). */
body.cm-area .cm-acct-name{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;min-width:0}
body.cm-area .cm-acct-name strong{min-width:0;overflow:hidden;font-size:15px;line-height:20px;font-weight:600;color:var(--ios-label);white-space:nowrap;text-overflow:ellipsis}
body.cm-area .cm-acct-name>:not(strong){flex:0 0 auto}
body.cm-area .cm-acct-sub{font-size:13px;line-height:18px;color:var(--ios-label-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.cm-area .cm-acct-sep{height:1px;margin:5px 8px;background:var(--ios-sep)}
html body.cm-area .cm-acct .cm-acct-items :is(a,button){position:relative;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;width:100%;min-height:38px;margin:0;padding:8px 10px;border-radius:12px;
  background:transparent;color:var(--ios-label);font-size:14px;line-height:20px;font-weight:500;text-align:left;text-decoration:none;cursor:pointer}
html body.cm-area .cm-acct .cm-acct-items :is(a,button)::before{content:none}
html body.cm-area .cm-acct .cm-acct-items :is(a,button) svg{flex:0 0 auto;width:18px;height:18px;color:var(--ios-label-2)}
html body.cm-area .cm-acct .cm-acct-items :is(a,button):is(:hover,:focus-visible){background:var(--ios-fill-2);outline:none}
/* Pierścień fokusu w środku elementu (globalny z learning-studio.css ma !important i 4 px na zewnątrz - wychodził poza menu). */
html body.cm-area :is(.cm-acct-items a,.cm-acct-items button,.cm-msg-row,.cm-msg-req,.cm-msg-compose,#cm-msg-all,.cm-dw-btn,.cm-dw-title):focus-visible{outline:2px solid var(--ios-tint)!important;outline-offset:-2px!important;box-shadow:none}
html body.cm-area #cm-header :is(.cm-header-btn):focus-visible{outline:2px solid var(--ios-tint)!important;outline-offset:1px!important}
html body.cm-area .cm-acct .cm-acct-items .is-danger,html body.cm-area .cm-acct .cm-acct-items .is-danger svg{color:var(--cm-red)}
html body.cm-area .cm-acct.cm-acct .cm-acct-items .is-danger.is-danger{margin-top:0} /* grupę daje separator, nie reguła menu wpisu */
html body.cm-area .cm-acct.cm-acct .cm-acct-items .is-danger.is-danger::before{content:none}
/* Przełącznik jak w iOS (zielony = tryb ciemny włączony), w miejscu - menu zostaje otwarte. */
body.cm-area .cm-acct-switch{position:relative;flex:0 0 auto;width:36px;height:22px;margin-left:auto;border-radius:999px;background:var(--ios-fill);transition:background-color .2s}
body.cm-area .cm-acct-switch::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:999px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .25s var(--ios-spring)}
body.cm-area .cm-acct-theme[aria-checked="true"] .cm-acct-switch{background:var(--cm-green)}
body.cm-area .cm-acct-theme[aria-checked="true"] .cm-acct-switch::after{transform:translateX(14px)}

/* Lista skrótów klawiszowych (okno z menu konta albo „?”). */
body.cm-area .cm-keys{display:flex;flex-direction:column;gap:2px;margin:0}
body.cm-area .cm-keys-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 2px;border-bottom:1px solid var(--ios-sep)}
body.cm-area .cm-keys-row:last-child{border-bottom:0}
body.cm-area .cm-keys dt{display:flex;align-items:center;gap:6px;flex:0 0 auto;order:2}
body.cm-area .cm-keys dd{margin:0;font-size:15px;line-height:20px;color:var(--ios-label)}
body.cm-area .cm-keys kbd{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:26px;padding:0 8px;border-radius:7px;background:var(--ios-fill-2);box-shadow:inset 0 -1px 0 var(--ios-sep),inset 0 0 0 .5px var(--ios-glass-rim);
  font:600 13px/1 var(--ios-font);color:var(--ios-label)}
body.cm-area .cm-keys-plus{font-size:12px;color:var(--ios-label-2)}

/* Panel wiadomości pod ikoną: nagłówek i stopka stoją, przewija się tylko lista. */
html body.cm-area .cm-msg-pop{display:flex;flex-direction:column;width:min(384px,calc(100vw - 24px));max-height:min(580px,calc(100vh - 88px));overflow:hidden}
body.cm-area .cm-msg-pop:focus{outline:none}
body.cm-area .cm-msg-pop>.cm-pop-head{flex:0 0 auto;position:relative}
body.cm-area .cm-msg-compose{width:36px;height:36px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:var(--ios-fill-2);color:var(--ios-label)}
body.cm-area .cm-msg-compose svg{width:18px;height:18px}
body.cm-area .cm-msg-compose:hover{background:var(--ios-fill)}
body.cm-area .cm-msg-list{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 8px 6px}
body.cm-area :is(.cm-msg-row,.cm-msg-req){display:flex;align-items:center;gap:12px;width:100%;margin:0;padding:9px 10px;border-radius:14px;background:transparent;color:var(--ios-label);text-align:left;cursor:pointer;transition:background-color .15s}
body.cm-area :is(.cm-msg-row,.cm-msg-req):hover{background:var(--ios-fill-2)}
body.cm-area .cm-msg-row .cm-avatar-md{width:44px;height:44px}
body.cm-area .cm-msg-pop .cm-online{border-color:var(--ios-surface)}
body.cm-area .cm-msg-text{display:flex;flex:1 1 auto;flex-direction:column;gap:1px;min-width:0}
body.cm-area .cm-msg-top{display:flex;align-items:baseline;gap:8px;min-width:0}
body.cm-area .cm-msg-name{flex:1 1 auto;min-width:0;overflow:hidden;font-size:15px;line-height:20px;font-weight:600;white-space:nowrap;text-overflow:ellipsis}
body.cm-area .cm-msg-time{flex:0 0 auto;font-size:12px;line-height:16px;color:var(--ios-label-2);font-variant-numeric:tabular-nums}
body.cm-area .cm-msg-prev{display:block;overflow:hidden;font-size:14px;line-height:19px;color:var(--ios-label-2);white-space:nowrap;text-overflow:ellipsis}
body.cm-area .cm-msg-row.is-unread .cm-msg-name{font-weight:700}
body.cm-area .cm-msg-row.is-unread .cm-msg-prev{color:var(--ios-label);font-weight:600}
body.cm-area .cm-msg-row.is-unread .cm-msg-time{color:var(--ios-tint);font-weight:600}
body.cm-area :is(.cm-msg-row,.cm-msg-req)>.cm-count{flex:0 0 auto;min-width:20px;height:20px;background:var(--ios-tint);color:var(--ios-on-tint);font-size:11px}
body.cm-area .cm-msg-req{margin-bottom:4px;background:var(--ios-fill-2)}
body.cm-area .cm-msg-req:hover{background:var(--ios-fill)}
body.cm-area .cm-msg-req-icon{flex:0 0 auto;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:var(--ios-tint-soft);color:var(--ios-tint)}
body.cm-area .cm-msg-req-icon svg{width:22px;height:22px}
body.cm-area .cm-msg-req strong{font-size:15px;line-height:20px;font-weight:600}
body.cm-area .cm-msg-req>svg{flex:0 0 auto;width:16px;height:16px;color:var(--ios-label-2)}
body.cm-area .cm-msg-foot{flex:0 0 auto;padding:6px 10px 8px;text-align:center;box-shadow:inset 0 .5px 0 var(--ios-sep)}
body.cm-area #cm-msg-all{min-height:40px;padding:0 12px;color:var(--ios-tint);font-size:15px;font-weight:500}
/* Pusty stan: ikona, zdanie, jedna akcja (Slack). */
body.cm-area .cm-msg-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:28px 22px 26px;text-align:center}
body.cm-area .cm-msg-empty-icon{width:56px;height:56px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:6px;border-radius:999px;background:var(--ios-tint-soft);color:var(--ios-tint)}
body.cm-area .cm-msg-empty-icon svg{width:26px;height:26px}
body.cm-area .cm-msg-empty strong{font-size:16px;line-height:21px;font-weight:600;color:var(--ios-label)}
body.cm-area .cm-msg-empty p{margin:0 0 10px;font-size:14px;line-height:19px;color:var(--ios-label-2)}
/* Szkielety wierszy zamiast „Wczytuję...” (bez skoku układu). */
body.cm-area .cm-msg-skel-row{display:flex;align-items:center;gap:12px;padding:9px 10px}
body.cm-area .cm-msg-skel-row i{flex:0 0 auto;width:44px;height:44px;border-radius:999px}
body.cm-area .cm-msg-skel-row b{flex:1;height:34px;border-radius:10px}
body.cm-area :is(.cm-msg-skel-row i,.cm-msg-skel-row b,.cm-dw-skel i){background:linear-gradient(90deg,var(--ios-fill-2),var(--ios-fill),var(--ios-fill-2));background-size:200% 100%;animation:cm-shimmer 1.4s infinite}

/* Okienka rozmów: prawy dolny róg, najwyżej 2 obok siebie (nowe po prawej), tylko komputer i poza stroną Wiadomości. */
.cm-dock{display:none}
@media (min-width:1024px){
  body.cm-area .cm-dock{position:fixed;right:24px;bottom:0;z-index:60;display:flex;align-items:flex-end;gap:12px;pointer-events:none}
}
body.cm-area .cm-dw{--dw-h:min(500px,calc(100vh - 96px));pointer-events:auto;display:flex;flex-direction:column;width:340px;height:var(--dw-h);overflow:hidden;border-radius:18px 18px 0 0;background:var(--ios-surface);
  box-shadow:0 0 0 .5px var(--ios-glass-rim),0 18px 50px rgba(0,0,0,.42),0 2px 8px rgba(0,0,0,.28);transition:height .3s var(--ios-ease)}
[data-theme="light"] body.cm-area .cm-dw{box-shadow:0 0 0 .5px rgba(0,0,0,.08),0 18px 50px rgba(16,24,40,.18),0 2px 8px rgba(16,24,40,.08)}
body.cm-area .cm-dw.is-min{height:56px}
body.cm-area .cm-dw-head{position:relative;z-index:2;display:flex;flex:0 0 auto;align-items:center;gap:2px;height:56px;padding:0 6px 0 4px;background:var(--ios-elev);box-shadow:inset 0 -.5px 0 var(--ios-sep)}
body.cm-area .cm-dw.is-min .cm-dw-head{box-shadow:none}
body.cm-area .cm-dw.has-unread .cm-dw-head{background:linear-gradient(var(--ios-tint-soft),var(--ios-tint-soft)),var(--ios-elev)}
body.cm-area .cm-dw-title{display:flex;flex:1 1 auto;align-items:center;gap:10px;min-width:0;height:46px;padding:0 8px;border-radius:14px;background:transparent;color:var(--ios-label);text-align:left;cursor:pointer;transition:background-color .15s}
body.cm-area .cm-dw-title:hover{background:var(--ios-fill-2)}
body.cm-area .cm-dw-face{display:inline-flex;flex:0 0 auto}
body.cm-area .cm-dw-head .cm-online{border-color:var(--ios-elev)}
body.cm-area .cm-dw-names{display:flex;flex:1 1 auto;flex-direction:column;min-width:0}
body.cm-area .cm-dw-name{overflow:hidden;font-size:15px;line-height:19px;font-weight:600;white-space:nowrap;text-overflow:ellipsis}
body.cm-area .cm-dw-sub{font-size:12px;line-height:15px;color:var(--cm-green)}
body.cm-area .cm-dw-sub:empty{display:none}
body.cm-area .cm-dw.has-unread .cm-dw-name{font-weight:700}
body.cm-area .cm-dw-count{flex:0 0 auto;min-width:20px;height:20px;background:var(--cm-red);color:#fff;font-size:11px}
body.cm-area .cm-dw-btn{position:relative;display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border-radius:999px;background:transparent;color:var(--ios-label-2);cursor:pointer;transition:background-color .15s,color .15s}
body.cm-area .cm-dw-btn svg{width:18px;height:18px}
body.cm-area .cm-dw-btn:hover{background:var(--ios-fill-2);color:var(--ios-label)}
body.cm-area .cm-dw.is-min .cm-dw-min{display:none}
/* Treść: ta sama rozmowa co w pełnym widoku (dymki, serie, kapsuła pisania), dopasowana do okienka. Zwinięte okienko
   chowa treść także przed Tabem i czytnikiem (visibility po zakończeniu zwijania). */
body.cm-area .cm-dw-body{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;max-height:none;background:var(--ios-surface);visibility:visible;transition:visibility 0s}
body.cm-area .cm-dw.is-min .cm-dw-body{visibility:hidden;transition:visibility 0s .3s}
body.cm-area .cm-dw .cm-dm-msgs{padding:10px 12px 8px}
body.cm-area .cm-dw .cm-bubble{max-width:82%}
body.cm-area .cm-dw .cm-request{margin:8px 10px 4px;font-size:13px;line-height:18px}
body.cm-area .cm-dw .cm-request>span{flex:1 1 100%!important} /* wąskie okienko: opis w pełnej linii, „Przyjmij” i „Odrzuć” pod nim (span ma flex:1 w atrybucie style) */
body.cm-area .cm-dw .cm-chat-form{margin:4px 8px 8px}
body.cm-area .cm-dw .cm-chat-form .cm-icon-btn{width:32px}
body.cm-area .cm-dw .cm-chat-form .cm-textarea{max-height:120px}
body.cm-area .cm-dw .cm-chat-new{bottom:8px;padding:6px 12px;font-size:12px}
body.cm-area .cm-dw-empty{display:flex;flex:1;align-items:center;justify-content:center;padding:16px}
body.cm-area .cm-dw-skel{display:flex;flex-direction:column;gap:10px;padding:18px 12px}
body.cm-area .cm-dw-skel i{display:block;width:62%;height:34px;border-radius:18px}
body.cm-area .cm-dw-skel i:nth-child(2){align-self:flex-end;width:48%}
body.cm-area .cm-dw-skel i:nth-child(3){width:70%;height:52px}
/* Ruch: okienko wjeżdża od dołu (sprężyna), znika w dół, „podskakuje”, gdy otwierasz rozmowę, która już jest w rogu. */
@keyframes cm-dw-in{from{opacity:0;translate:0 28px;scale:.98}}
@keyframes cm-dw-out{to{opacity:0;translate:0 28px;scale:.98}}
@keyframes cm-dw-ping{30%{translate:0 -8px}}
@media (prefers-reduced-motion:no-preference){
  body.cm-area .cm-dw{animation:cm-dw-in .38s var(--ios-spring-snappy,var(--ios-ease))}
  body.cm-area .cm-dw.is-ping{animation:cm-dw-ping .45s var(--ios-ease)}
  html body.cm-area .cm-dw.is-closing{animation:cm-dw-out .2s cubic-bezier(.4,0,1,1) forwards!important}
}
@media (prefers-reduced-motion:reduce){
  body.cm-area :is(.cm-dw,.cm-dw-body,.cm-acct-switch),body.cm-area .cm-acct-switch::after{transition:none}
  body.cm-area :is(.cm-msg-skel-row i,.cm-msg-skel-row b,.cm-dw-skel i){animation:none}
}
body.cm-area #powiadomienia{scroll-margin-top:calc(96px + env(safe-area-inset-top,0px))} /* „Powiadomienia” z menu konta */
/* ---------- profil członka v2 ---------- */
/* Tło 3:1 na całą szerokość, pod nim karta osoby (lewa kolumna nachodzi na tło) i zakładki. Kolumny zależą od szerokości
   samego profilu (zapytania kontenera), nie okna - działa tak samo z prawą kolumną i bez niej. */
body.cm-area .cm-pf{container-type:inline-size;position:relative;--pf-r:var(--cm-radius,22px)}
body.cm-area .cm-pf-banner{position:relative;aspect-ratio:3/1;border-radius:var(--pf-r);overflow:hidden;isolation:isolate}
body.cm-area .cm-pf-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.28));pointer-events:none}
body.cm-area .cm-pf-banner-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Domyślne tło profilu bogatsze niż płaski gradient: złota poświata i granat (te same barwy co okładka „Domyślna”). */
body.cm-area :is(.cm-pf-banner,.cm-pe-banner,.cm-pe-mini-banner,.cm-hc-banner).cm-cover-domyslna{background:radial-gradient(120% 150% at 88% -10%,rgba(255,210,63,.32) 0%,rgba(255,210,63,0) 46%),radial-gradient(90% 130% at 6% 110%,rgba(47,94,168,.6) 0%,rgba(47,94,168,0) 62%),linear-gradient(135deg,#0b1220 0%,#14213d 55%,#1b2b4f 100%)}
body.cm-area :is(.cm-pf-banner-btn,.cm-pe-glass){position:relative;z-index:2;display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 14px;border-radius:999px;border:0;cursor:pointer;
  background:rgba(8,12,22,.52);color:#fff;font-size:14px;line-height:18px;font-weight:600;-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.22);transition:background-color .2s}
body.cm-area :is(.cm-pf-banner-btn,.cm-pe-glass):hover{background:rgba(8,12,22,.68)}
body.cm-area :is(.cm-pf-banner-btn,.cm-pe-glass) svg{width:17px;height:17px}
body.cm-area .cm-pf-banner-btn{position:absolute;top:12px;right:12px}
body.cm-area .cm-pf-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;position:relative;z-index:1}
body.cm-area .cm-pf-side,body.cm-area .cm-pf-main{display:flex;flex-direction:column;gap:12px;min-width:0}
body.cm-area .cm-pf-main{margin-top:0}

/* Karta osoby */
/* Telefon: tło i karta jako jedna karta (tło u góry, zdjęcie nachodzi na tło), jak profil w iOS. */
body.cm-area .cm-pf-banner{border-radius:var(--pf-r) var(--pf-r) 0 0}
body.cm-area .cm-pf-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 18px 18px;border-radius:0 0 var(--pf-r) var(--pf-r);background:var(--ios-surface)}
body.cm-area .cm-pf-ava-wrap{margin-top:-54px;margin-bottom:10px;position:relative;z-index:2}
body.cm-area .cm-pf-card .cm-pf-ava{--s:108px}
body.cm-area .cm-pf-name{margin:0;font-size:26px;line-height:32px;font-weight:700;color:var(--ios-label);letter-spacing:var(--ios-trk-title);overflow-wrap:anywhere}
body.cm-area .cm-pf-headline{margin:4px 0 0;font-size:15px;line-height:20px;color:var(--ios-label-2);overflow-wrap:anywhere}
body.cm-area .cm-pf-headline.is-empty a{color:var(--ios-tint);font-weight:600}
body.cm-area .cm-pf-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;margin:12px 0 0;padding:0;list-style:none;font-size:13.5px;line-height:18px;color:var(--ios-label-2)}
body.cm-area .cm-pf-meta li{display:inline-flex;align-items:center;gap:6px;min-width:0}
body.cm-area .cm-pf-meta svg{width:15px;height:15px;flex:0 0 auto;opacity:.85}
body.cm-area .cm-pf-online{display:inline-flex;align-items:center;gap:6px;color:var(--cm-green);font-weight:600}
body.cm-area .cm-pf-dot{width:8px;height:8px;border-radius:50%;background:var(--cm-green);box-shadow:0 0 0 3px color-mix(in srgb,var(--cm-green) 25%,transparent)}
body.cm-area .cm-pf-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:12px}
body.cm-area .cm-pf-pill{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:0 11px;border-radius:999px;background:var(--ios-fill-2);color:var(--ios-label);font-size:13px;line-height:16px;font-weight:600;white-space:nowrap}
html:not([data-theme="light"]) body.cm-area .cm-pf-pill{background:#05070F;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.12)}
[data-theme="light"] body.cm-area .cm-pf-pill{background:#0B1220;color:#fff}
body.cm-area .cm-pf-pill svg{width:13px;height:13px}
html body.cm-area .cm-pf-pill.is-pro{color:#171100;background:linear-gradient(180deg,#FFE27D,#F4B908);box-shadow:none;letter-spacing:.03em}
body.cm-area .cm-pf-pill.is-role svg,body.cm-area .cm-pf-pill.is-expert svg{color:var(--cm-gold)}
[data-theme="light"] body.cm-area .cm-pf-pill.is-role svg,[data-theme="light"] body.cm-area .cm-pf-pill.is-expert svg{color:#FFD23F}
body.cm-area .cm-pf-tagdot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}
[data-theme="light"] body.cm-area .cm-pf-pill .cm-pf-tagdot.cm-tag-gold{color:#FFD23F}
body.cm-area .cm-pf-asks{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin-top:14px}
body.cm-area .cm-pf-label{display:inline-flex;align-items:center;gap:5px;font-size:12px;line-height:16px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ios-label-2)}
body.cm-area .cm-pf-label svg{width:13px;height:13px}
body.cm-area .cm-pf-asks>.cm-pf-label{flex-basis:100%;justify-content:center;margin-bottom:2px}
body.cm-area .cm-pf-ask{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:999px;border:1px solid var(--cm-gold-line);background:var(--cm-gold-soft);color:var(--ios-label);font-size:13.5px;font-weight:600;text-decoration:none;transition:border-color .2s}
body.cm-area .cm-pf-ask:hover{border-color:var(--cm-gold)}
body.cm-area .cm-pf-actions{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:16px}
body.cm-area .cm-pf-actions .cm-pf-main-btn{flex:1 1 auto;min-width:0;min-height:44px;padding:0 16px;font-size:15px;line-height:20px;gap:8px;white-space:nowrap}
body.cm-area .cm-pf-main-btn svg{width:18px;height:18px}
body.cm-area .cm-pf-actions>a.cm-pf-main-btn{background:var(--ios-fill);color:var(--ios-label);border-color:transparent}
body.cm-area .cm-pf-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:44px;height:44px;padding:0;border:0;border-radius:999px;background:var(--ios-fill);color:var(--ios-label);cursor:pointer;transition:background-color .2s,transform .25s var(--ios-ease)}
body.cm-area .cm-pf-icon:hover{background:var(--ios-fill-2);box-shadow:inset 0 0 0 1px var(--ios-sep)}
body.cm-area .cm-pf-icon svg{width:19px;height:19px}
@media (pointer:coarse){body.cm-area :is(.cm-pf-icon,.cm-pf-tab):active{transform:scale(.94)}}

/* Awatar z pierścieniem postępu poziomu i numerem poziomu */
body.cm-area .cm-pf-ava{--s:128px;position:relative;display:inline-grid;place-items:center;width:var(--s);height:var(--s);flex:0 0 auto;border-radius:50%;background:var(--ios-surface)}
body.cm-area .cm-pf-ava-sm{--s:68px}
body.cm-area .cm-pf-ava>.cm-avatar{width:calc(var(--s) - 16px);height:calc(var(--s) - 16px);font-size:calc(var(--s) * .3);box-shadow:none!important;border:0}
body.cm-area .cm-pf-ava-sm>.cm-avatar{width:calc(var(--s) - 10px);height:calc(var(--s) - 10px)}
body.cm-area .cm-pf-ring{position:absolute;inset:0;width:100%;height:100%;rotate:-90deg;overflow:visible}
body.cm-area .cm-pf-ring circle{fill:none;stroke-width:4.5}
body.cm-area .cm-pf-ava-sm .cm-pf-ring circle{stroke-width:5.5}
body.cm-area .cm-pf-ring-track{stroke:var(--ios-fill)}
body.cm-area .cm-pf-ring-fill{stroke:var(--cm-gold);stroke-linecap:round}
[data-theme="light"] body.cm-area .cm-pf-ring-fill{stroke:#E0A800}
body.cm-area .cm-pf-lvl{position:absolute;right:1px;bottom:1px;display:grid;place-items:center;min-width:32px;height:32px;padding:0 6px;border-radius:999px;background:linear-gradient(180deg,#FFE27D,#F4B908);color:#171100;
  font-size:15px;line-height:1;font-weight:800;font-variant-numeric:tabular-nums;box-shadow:0 0 0 3px var(--ios-surface)}
body.cm-area .cm-pf-ava-sm .cm-pf-lvl{min-width:22px;height:22px;padding:0 4px;font-size:11.5px;right:-1px;bottom:-1px;box-shadow:0 0 0 2px var(--ios-surface)}
body.cm-area .cm-pf-ava-btn{position:relative;display:inline-grid;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}
body.cm-area .cm-pf-ava-btn:focus-visible{outline:3px solid var(--cm-gold);outline-offset:4px}
body.cm-area .cm-pf-ava-cam{position:absolute;left:2px;bottom:2px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:rgba(8,12,22,.66);color:#fff;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 0 0 3px var(--ios-surface);transition:transform .25s var(--ios-ease)}
body.cm-area .cm-pf-ava-cam svg{width:16px;height:16px}
body.cm-area .cm-pf-ava-btn:hover .cm-pf-ava-cam,body.cm-area .cm-pe-ava:hover .cm-pf-ava-cam{transform:scale(1.08)}

/* Pudełka (O mnie, poziom, kontakt, ukończenie) */
body.cm-area .cm-pf-box{display:block;padding:16px 18px;border-radius:var(--pf-r);background:var(--ios-surface);color:var(--ios-label);text-decoration:none}
body.cm-area .cm-pf-h{display:flex;align-items:baseline;gap:8px;margin:0 0 10px;font-size:17px;line-height:22px;font-weight:700;color:var(--ios-label)}
body.cm-area .cm-pf-h-note{font-size:12.5px;font-weight:500;color:var(--ios-label-2)}
body.cm-area .cm-pf-muted{margin:0;font-size:15px;line-height:21px;color:var(--ios-label-2)}
body.cm-area .cm-pf-muted a{color:var(--ios-tint);font-weight:600}
body.cm-area .cm-pf-bio{font-size:16px;line-height:24px}
body.cm-area .cm-pf-facts{display:flex;flex-direction:column;gap:8px;margin-top:14px;padding-top:14px;border-top:.5px solid var(--ios-sep)}
body.cm-area .cm-pf-intro{display:inline-block;margin-top:12px;color:var(--ios-tint);font-weight:600}
body.cm-area .cm-pf-buddy{margin:0}

/* Ukończenie profilu */
body.cm-area .cm-pf-meter{display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:4px 14px;position:relative}
body.cm-area .cm-pf-meter-dial{position:relative;grid-row:1/span 2;width:52px;height:52px}
body.cm-area .cm-pf-meter-ring{display:block;width:52px;height:52px;rotate:-90deg}
body.cm-area .cm-pf-meter-ring circle{fill:none;stroke-width:5}
body.cm-area .cm-pf-meter-track{stroke:var(--ios-fill)}
body.cm-area .cm-pf-meter-fill{stroke:var(--cm-gold);stroke-linecap:round;transition:stroke-dasharray .5s var(--ios-ease)}
body.cm-area .cm-pf-meter.is-done .cm-pf-meter-fill{stroke:var(--cm-green)}
body.cm-area .cm-pf-meter-pct{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font-size:13px;line-height:18px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ios-label)}
body.cm-area .cm-pf-meter-text{display:flex;flex-direction:column;gap:2px;min-width:0}
body.cm-area .cm-pf-meter-text strong{font-size:15px;line-height:20px;color:var(--ios-label)}
body.cm-area .cm-pf-meter-text span{font-size:13.5px;line-height:18px;color:var(--ios-label-2)}
body.cm-area .cm-pf-meter>.cm-btn{grid-column:2;justify-self:start;margin-top:8px}

/* Zakładki z licznikami */
body.cm-area .cm-pf-tabs{display:flex;gap:2px;padding:0 8px;overflow-x:auto;scrollbar-width:none;border-radius:var(--pf-r);background:var(--ios-surface)}
body.cm-area .cm-pf-tabs::-webkit-scrollbar{display:none}
/* Więcej zakładek niż miejsca (telefon): miękkie wygaszenie przy prawej krawędzi podpowiada przewijanie. */
@container (max-width:559px){body.cm-area .cm-pf-tabs{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);padding-right:24px}}
body.cm-area .cm-pf-tab{position:relative;display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;min-height:50px;padding:0 12px;border:0;background:none;color:var(--ios-label-2);font-size:15px;line-height:20px;font-weight:600;cursor:pointer;white-space:nowrap;transition:color .2s}
body.cm-area .cm-pf-tab:hover{color:var(--ios-label)}
body.cm-area .cm-pf-tab.is-active{color:var(--ios-label)}
body.cm-area .cm-pf-tab.is-active::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--cm-gold)}
body.cm-area .cm-pf-tab:focus-visible{outline:2px solid var(--cm-gold);outline-offset:-4px;border-radius:12px}
body.cm-area .cm-pf-count{min-width:22px;padding:2px 7px;border-radius:999px;background:var(--ios-fill-2);color:var(--ios-label-2);font-size:12.5px;line-height:15px;font-weight:700;font-variant-numeric:tabular-nums;text-align:center}
body.cm-area .cm-pf-tab.is-active .cm-pf-count{background:var(--cm-gold-soft);color:var(--ios-label)}
body.cm-area .cm-pf-panel{display:flex;flex-direction:column;gap:12px;outline:none}
body.cm-area .cm-pf-panel:focus-visible{outline:2px solid var(--cm-gold);outline-offset:4px;border-radius:var(--pf-r)}

/* Poziom: plakietka, punkty, pasek postępu */
body.cm-area .cm-pf-level-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
body.cm-area .cm-pf-plaque{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 14px 0 10px;border-radius:999px;background:linear-gradient(180deg,#FFE27D,#F4B908);color:#171100;font-size:15px;line-height:18px;font-weight:700}
body.cm-area .cm-pf-plaque svg{width:18px;height:18px}
body.cm-area .cm-pf-plaque b{padding-right:8px;border-right:1.5px solid rgba(23,17,0,.3);font-weight:800;font-variant-numeric:tabular-nums}
body.cm-area .cm-pf-points{font-size:14px;line-height:19px;color:var(--ios-label-2)}
body.cm-area .cm-pf-points b{color:var(--ios-label);font-variant-numeric:tabular-nums}
body.cm-area .cm-pf-bar{height:8px;margin-top:14px;border-radius:999px;background:var(--ios-fill);overflow:hidden}
body.cm-area .cm-pf-bar>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#F4B908,#FFD23F)}
body.cm-area .cm-pf-level-next{margin:10px 0 0;font-size:13.5px;line-height:18px;color:var(--ios-label-2)}
body.cm-area .cm-pf-level-next b{color:var(--ios-label)}
body.cm-area .cm-pf-level-next a{color:var(--ios-tint);font-weight:600;margin-left:4px}

/* Wyróżniony wpis */
body.cm-area .cm-pf-featured{display:flex;flex-direction:column;gap:6px;position:relative;box-shadow:inset 0 0 0 1px var(--cm-gold-line);transition:box-shadow .2s,background-color .2s}
body.cm-area .cm-pf-featured:hover{box-shadow:inset 0 0 0 1px var(--cm-gold)}
body.cm-area .cm-pf-featured .cm-pf-label{color:var(--cm-gold)}
body.cm-area .cm-pf-featured-title{font-size:17px;line-height:22px;font-weight:700;color:var(--ios-label)}
body.cm-area .cm-pf-featured-text{font-size:15px;line-height:21px;color:var(--ios-label);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
body.cm-area .cm-pf-featured-meta{font-size:13px;line-height:18px;color:var(--ios-label-2)}

/* Puste miejsca z jedną akcją */
body.cm-area .cm-pf-empty-hint{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:12px}
body.cm-area .cm-pf-empty-hint strong{display:block;font-size:15px;line-height:20px;color:var(--ios-label)}
body.cm-area .cm-pf-empty-hint p{margin:2px 0 0;font-size:13.5px;line-height:18px;color:var(--ios-label-2)}
body.cm-area .cm-pf-empty-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--cm-gold-soft);color:var(--cm-gold)}
body.cm-area .cm-pf-empty-ico svg{width:20px;height:20px}
@container (max-width:420px){body.cm-area .cm-pf-empty-hint{grid-template-columns:40px minmax(0,1fr)}body.cm-area .cm-pf-empty-hint>.cm-btn{grid-column:2;justify-self:start}}
body.cm-area .cm-pf-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:32px 20px;border-radius:var(--pf-r);background:var(--ios-surface);text-align:center}
body.cm-area .cm-pf-empty .cm-pf-empty-ico{width:52px;height:52px;border-radius:50%;margin-bottom:6px}
body.cm-area .cm-pf-empty .cm-pf-empty-ico svg{width:24px;height:24px}
body.cm-area .cm-pf-empty strong{font-size:17px;line-height:22px;color:var(--ios-label)}
body.cm-area .cm-pf-empty p{margin:0;max-width:360px;font-size:14.5px;line-height:20px;color:var(--ios-label-2)}
body.cm-area .cm-pf-empty .cm-btn{margin-top:10px}

/* Kontakt i linki (lista jak w ustawieniach iOS) */
body.cm-area .cm-pf-contacts{padding-bottom:6px}
body.cm-area .cm-pf-contact-list{display:flex;flex-direction:column;margin:0 -18px}
body.cm-area .cm-pf-contact{position:relative;display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 18px;color:var(--ios-label);text-decoration:none;transition:background-color .2s}
body.cm-area .cm-pf-contact+.cm-pf-contact::before{content:"";position:absolute;top:0;left:62px;right:0;border-top:.5px solid var(--ios-sep)}
body.cm-area .cm-pf-contact:hover{background:var(--ios-fill-2)}
body.cm-area .cm-pf-contact:last-child{border-radius:0 0 var(--pf-r) var(--pf-r)}
body.cm-area .cm-pf-contact-ico{display:grid;place-items:center;flex:0 0 auto;width:32px;height:32px;border-radius:9px;background:var(--ios-fill);color:var(--ios-label)}
body.cm-area .cm-pf-contact-ico svg{width:18px;height:18px}
body.cm-area .cm-pf-contact-text{display:flex;flex-direction:column;min-width:0;flex:1}
body.cm-area .cm-pf-contact-kind{font-size:12.5px;line-height:16px;color:var(--ios-label-2)}
body.cm-area .cm-pf-contact-val{font-size:15.5px;line-height:21px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.cm-area .cm-pf-contact-note{font-size:12px;line-height:16px;color:var(--cm-gold)}
body.cm-area .cm-pf-chev{flex:0 0 auto;color:var(--ios-label-3)}
body.cm-area .cm-pf-contact.is-add{color:var(--ios-tint);font-weight:600}
body.cm-area .cm-pf-contact.is-add .cm-pf-contact-ico{background:var(--cm-gold-soft);color:var(--cm-gold)}

/* Wpisy i komentarze osoby */
body.cm-area .cm-pf-list{display:flex;flex-direction:column;border-radius:var(--pf-r);background:var(--ios-surface);overflow:hidden}
body.cm-area .cm-pf-list:empty{display:none}
body.cm-area .cm-pf-list>.cm-feed{padding:12px}
body.cm-area .cm-pf-list>.cm-pf-empty{background:none}
body.cm-area .cm-pf-item{position:relative;display:flex;flex-direction:column;gap:4px;padding:14px 18px;color:var(--ios-label);text-decoration:none;transition:background-color .2s}
body.cm-area .cm-pf-item+.cm-pf-item::before{content:"";position:absolute;top:0;left:18px;right:0;border-top:.5px solid var(--ios-sep)}
body.cm-area .cm-pf-item:hover{background:var(--ios-fill-2)}
body.cm-area .cm-pf-item-top{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:13px;line-height:18px;color:var(--ios-label-2)}
body.cm-area .cm-pf-item-where{font-weight:600;color:var(--ios-label-2);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.cm-area .cm-pf-item-where+time::before{content:"·";margin-right:10px}
body.cm-area .cm-pf-item-title{font-size:16.5px;line-height:22px;font-weight:700}
body.cm-area .cm-pf-item-text{font-size:15px;line-height:21px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
body.cm-area .cm-pf-item-counts{display:flex;gap:14px;font-size:13px;line-height:18px;color:var(--ios-label-2)}
body.cm-area .cm-pf-item-counts span{display:inline-flex;align-items:center;gap:5px}
body.cm-area .cm-pf-item-counts svg{width:14px;height:14px}
body.cm-area .cm-pf-anon{display:inline-flex;align-items:center;gap:4px;color:var(--cm-gold);font-weight:600}
body.cm-area .cm-pf-anon svg{width:13px;height:13px}
body.cm-area .cm-pf-more{display:flex;justify-content:center}
body.cm-area .cm-pf-more:empty{display:none}

/* Odznaki i historia punktów */
body.cm-area .cm-pf-panel .cm-badges{margin:0}
body.cm-area .cm-pf-panel .cm-badges-next{margin:0 0 10px}
body.cm-area .cm-pf-pts-note{font-size:13.5px;line-height:18px;margin:-4px 0 8px}
body.cm-area .cm-pf-pts{display:flex;flex-direction:column;margin:0 -18px;padding:0;list-style:none}
body.cm-area .cm-pf-pts>.cm-pf-muted{padding:8px 18px}
body.cm-area .cm-pf-pt{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:50px;padding:8px 18px}
body.cm-area .cm-pf-pt+.cm-pf-pt::before{content:"";position:absolute;top:0;left:82px;right:0;border-top:.5px solid var(--ios-sep)}
body.cm-area .cm-pf-pt-val{justify-self:start;min-width:44px;padding:3px 8px;border-radius:999px;background:var(--cm-gold-soft);color:var(--ios-label);font-size:13.5px;line-height:17px;font-weight:800;text-align:center;font-variant-numeric:tabular-nums}
body.cm-area .cm-pf-pt-val.is-neg{background:color-mix(in srgb,var(--cm-red) 14%,transparent)}
body.cm-area .cm-pf-pt-text{display:flex;flex-direction:column;min-width:0}
body.cm-area .cm-pf-pt-label{font-size:15px;line-height:20px;color:var(--ios-label)}
body.cm-area .cm-pf-pt-note{font-size:13px;line-height:18px;color:var(--ios-label-2);overflow-wrap:anywhere}
body.cm-area .cm-pf-pt-at{font-size:13px;line-height:18px;color:var(--ios-label-2);white-space:nowrap}
body.cm-area .cm-pf.is-loading .cm-pf-card{height:300px;margin-top:0;border-radius:var(--pf-r)}

/* Komputer: tło na całą szerokość, karta osoby po lewej (nachodzi na tło), zakładki po prawej */
@container (min-width:760px){
  body.cm-area .cm-pf-banner{border-radius:var(--pf-r)}
  body.cm-area .cm-pf-cols{grid-template-columns:300px minmax(0,1fr);gap:20px;margin-top:20px;align-items:start}
  body.cm-area .cm-pf-side{margin-top:-120px}
  body.cm-area .cm-pf-card .cm-pf-ava{--s:128px}
  body.cm-area .cm-pf-card{align-items:flex-start;text-align:left;margin:0 0 0 16px;padding:18px 20px 20px;border-radius:var(--pf-r);
    background:color-mix(in srgb,var(--ios-surface) 90%,transparent);-webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);
    box-shadow:0 18px 40px -22px rgba(0,0,0,.6),inset 0 0 0 .5px var(--ios-glass-rim)}
  body.cm-area .cm-pf-complete{margin-left:16px}
  body.cm-area .cm-pf-ava-wrap{margin:0 0 14px}
  body.cm-area .cm-pf-name{font-size:24px;line-height:30px}
  body.cm-area .cm-pf-meta{flex-direction:column;align-items:flex-start;gap:8px}
  body.cm-area :is(.cm-pf-pills,.cm-pf-asks){justify-content:flex-start}
  body.cm-area .cm-pf-asks>.cm-pf-label{justify-content:flex-start}
  body.cm-area .cm-pf-actions{justify-content:flex-start}
  body.cm-area .cm-pf-banner-btn{top:auto;bottom:14px;right:14px}
}
@container (min-width:960px){
  /* Szeroki ekran: tło odrobinę niższe niż 3:1 (środek kadru zostaje, ucięte po kilka procent z góry i dołu). */
  body.cm-area .cm-pf-banner{aspect-ratio:10/3}
  body.cm-area .cm-pf-cols{grid-template-columns:320px minmax(0,1fr);gap:24px}
  body.cm-area .cm-pf-card{margin-left:24px}
  body.cm-area .cm-pf-complete{margin-left:24px}
}
[data-theme="light"] body.cm-area .cm-pf-card{background:#fff}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){body.cm-area .cm-pf-card{background:var(--ios-surface)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}

/* ---------- edycja profilu v2 ---------- */
body.cm-area .cm-pe-wrap{container-type:inline-size}
body.cm-area .cm-pe{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
body.cm-area .cm-pe-form{display:flex;flex-direction:column;gap:22px;min-width:0}
body.cm-area .cm-pe-side{order:-1;min-width:0}
body.cm-area .cm-pe-sec{scroll-margin-top:calc(96px + env(safe-area-inset-top,0px))}
body.cm-area .cm-pe-h{margin:0 0 8px 4px;font-size:20px;line-height:25px;font-weight:700;color:var(--ios-label)}
body.cm-area .cm-pe-help{margin:-4px 4px 10px;font-size:13.5px;line-height:18px;color:var(--ios-label-2)}
body.cm-area .cm-pe-card{display:flex;flex-direction:column;gap:18px;padding:18px;border-radius:var(--cm-radius);background:var(--ios-surface)}
body.cm-area .cm-pe-field{display:flex;flex-direction:column;gap:6px;position:relative;min-width:0}
body.cm-area .cm-pe-label{display:block;margin:0;padding:0;font-size:14px;line-height:19px;font-weight:600;color:var(--ios-label)}
body.cm-area .cm-pe-opt{margin-left:6px;font-weight:500;color:var(--ios-label-2)}
body.cm-area .cm-pe-note{margin:0;font-size:13px;line-height:18px;color:var(--ios-label-2)}
body.cm-area .cm-pe-count{position:absolute;right:12px;bottom:10px;font-size:12px;color:var(--ios-label-2);font-variant-numeric:tabular-nums;pointer-events:none}
body.cm-area .cm-pe-field .cm-textarea{padding-bottom:28px;resize:vertical;min-height:120px}
body.cm-area .cm-pe-field .cm-select{width:100%;max-width:100%}
/* Zdjęcia */
body.cm-area .cm-pe-banner{position:relative;aspect-ratio:3/1;border-radius:16px;overflow:hidden;display:flex;align-items:flex-end;justify-content:flex-end;padding:10px}
body.cm-area .cm-pe-banner .cm-pf-banner-img{z-index:0}
body.cm-area .cm-pe-banner-actions{position:relative;z-index:1;display:flex;gap:8px}
body.cm-area .cm-pe-glass[aria-label]{width:36px;padding:0;justify-content:center}
body.cm-area .cm-pe-ava-row{display:flex;align-items:center;gap:16px;margin-top:-50px;padding-left:12px;position:relative;z-index:1}
body.cm-area .cm-pe-ava{position:relative;display:inline-grid;flex:0 0 auto;padding:0;border:0;border-radius:50%;background:var(--ios-surface);cursor:pointer;box-shadow:0 0 0 4px var(--ios-surface)}
body.cm-area .cm-pe-ava .cm-avatar{width:96px;height:96px;font-size:32px;box-shadow:none!important}
body.cm-area .cm-pe-ava:focus-visible{outline:3px solid var(--cm-gold);outline-offset:4px}
body.cm-area .cm-pe-ava-text{display:flex;flex-direction:column;gap:3px;min-width:0;padding-top:58px}
body.cm-area .cm-pe-ava-text strong{font-size:15px;line-height:20px;color:var(--ios-label)}
body.cm-area .cm-pe-ava-text>span{font-size:13px;line-height:18px;color:var(--ios-label-2)}
body.cm-area .cm-pe-ava-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
body.cm-area .cm-pe-ava-btns svg{width:16px;height:16px}
body.cm-area .cm-pe-danger{color:var(--cm-red)}
body.cm-area .cm-pe-covers{margin-top:4px}
body.cm-area .cm-pe-covers .cm-covers-list{gap:10px}
body.cm-area .cm-pe-covers .cm-cover-swatch{width:72px;height:28px;border-radius:8px}
body.cm-area .cm-pe-covers .cm-cover-domyslna{background:radial-gradient(120% 150% at 88% -10%,rgba(255,210,63,.32) 0%,rgba(255,210,63,0) 46%),radial-gradient(90% 130% at 6% 110%,rgba(47,94,168,.6) 0%,rgba(47,94,168,0) 62%),linear-gradient(135deg,#0b1220 0%,#14213d 55%,#1b2b4f 100%)}
/* „Zapytaj mnie o” jako pigułki w polu */
body.cm-area .cm-pe-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:46px;padding:6px 8px;border-radius:12px;background:var(--ios-fill-2);box-shadow:inset 0 0 0 1px transparent;cursor:text;transition:box-shadow .2s}
body.cm-area .cm-pe-tags:focus-within{box-shadow:inset 0 0 0 2px var(--cm-gold)}
body.cm-area #cm-pe-taglist{display:contents}
body.cm-area .cm-pe-tag{display:inline-flex;align-items:center;gap:2px;min-height:30px;padding:0 4px 0 12px;border-radius:999px;background:var(--cm-gold-soft);box-shadow:inset 0 0 0 1px var(--cm-gold-line);color:var(--ios-label);font-size:14px;font-weight:600}
body.cm-area .cm-pe-tag button{display:grid;place-items:center;width:26px;height:26px;border:0;border-radius:50%;background:none;color:var(--ios-label-2);cursor:pointer}
body.cm-area .cm-pe-tag button:hover{background:var(--ios-fill);color:var(--ios-label)}
body.cm-area .cm-pe-tag button svg{width:13px;height:13px}
body.cm-area .cm-pe-taginput{flex:1 1 140px;min-width:120px;min-height:32px;padding:0 6px;border:0;outline:0;background:none;color:var(--ios-label);font-size:16px}
body.cm-area .cm-pe-taginput::placeholder{color:var(--ios-label-2)}
/* Kontakt i linki */
body.cm-area .cm-pe-email{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:var(--ios-fill-2)}
body.cm-area .cm-pe-email-ico{display:grid;place-items:center;flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:var(--ios-fill);color:var(--ios-label)}
body.cm-area .cm-pe-email-ico svg{width:18px;height:18px}
body.cm-area .cm-pe-email .cm-pe-note{display:block}
body.cm-area .cm-pe-email-addr{display:block;font-size:15px;line-height:20px;font-weight:600;color:var(--ios-label);overflow:hidden;text-overflow:ellipsis}
body.cm-area .cm-pe-links{display:flex;flex-direction:column;gap:10px}
body.cm-area .cm-pe-link{display:flex;align-items:center;gap:10px}
body.cm-area .cm-pe-link-ico{display:grid;place-items:center;flex:0 0 auto;width:40px;height:40px;margin:0;border-radius:11px;background:var(--ios-fill);color:var(--ios-label);cursor:pointer}
body.cm-area .cm-pe-link-ico svg{width:19px;height:19px}
body.cm-area .cm-pe-link .cm-input{flex:1;min-width:0}
/* Pasek zapisu przyklejony do dołu */
body.cm-area .cm-pe-save{position:static;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:5;align-self:flex-end;max-width:100%;display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:10px 10px 10px 18px;border-radius:999px;
  background:var(--ios-glass-strong);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);box-shadow:inset 0 .5px 0 var(--ios-glass-spec),inset 0 0 0 .5px var(--ios-glass-rim),var(--ios-glass-shadow)}
body.cm-area .cm-pe-save .cm-btn{flex-shrink:0;min-height:44px;padding:0 20px;font-size:15px;white-space:nowrap}
/* Niezapisane zmiany: pasek przykleja się do dołu ekranu (jak w Discordzie), bez zmian stoi na końcu formularza. */
body.cm-area .cm-pe-form.is-dirty .cm-pe-save{position:sticky}
body.cm-area .cm-pe-state{margin-right:auto;font-size:13.5px;line-height:18px;font-weight:600;color:var(--cm-gold);white-space:nowrap}
body.cm-area .cm-pe-state:empty{display:none}
body.cm-area .cm-pe-save:has(.cm-pe-state:empty){padding-left:10px}
@media (max-width:1023px){body.cm-area .cm-pe-save{bottom:calc(84px + env(safe-area-inset-bottom,0px))}}
/* Telefon: przy niezapisanych zmianach zostaje stan i „Zapisz zmiany” (wyjście do profilu i tak pyta o zmiany), przyciski
   w jednej linii; na bardzo wąskim ekranie stan to złota kropka - napis zostaje dla czytnika ekranu (audyt ludzie-6, brak2-18). */
@media (max-width:639px){body.cm-area .cm-pe-form.is-dirty .cm-pe-save a.cm-btn{display:none}}
@media (max-width:359px){
  body.cm-area .cm-pe-save .cm-btn{padding:0 14px}
  body.cm-area .cm-pe-state:not(:empty){position:relative;width:10px;height:10px;margin-left:4px;overflow:hidden;color:transparent;border-radius:50%;background:var(--cm-gold)}
}
/* Podgląd na żywo */
body.cm-area .cm-pe-sticky{display:flex;flex-direction:column;gap:12px}
body.cm-area .cm-pe-side-label{margin:0 0 -4px 4px;font-size:12px;line-height:16px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ios-label-2)}
body.cm-area .cm-pe-mini{border-radius:var(--cm-radius);background:var(--ios-surface);overflow:hidden}
body.cm-area .cm-pe-mini-banner{position:relative;aspect-ratio:3/1}
body.cm-area .cm-pe-mini-body{display:flex;flex-direction:column;align-items:center;gap:3px;padding:0 16px 16px;text-align:center}
body.cm-area .cm-pe-mini-body>.cm-pf-ava{margin-top:-34px;margin-bottom:6px}
body.cm-area .cm-pe-mini-name{font-size:18px;line-height:23px;font-weight:700;color:var(--ios-label);overflow-wrap:anywhere}
body.cm-area .cm-pe-mini-headline{font-size:14px;line-height:19px;color:var(--ios-label-2);overflow-wrap:anywhere}
body.cm-area .cm-pe-mini-headline.is-empty{font-style:italic;opacity:.75}
body.cm-area .cm-pe-mini-meta{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--ios-label-2)}
body.cm-area .cm-pe-mini-meta svg{width:14px;height:14px}
body.cm-area .cm-pe-mini .cm-pf-asks{margin-top:10px}
body.cm-area #cm-pe-meter .cm-pf-meter{padding:14px 16px;border-radius:var(--cm-radius);background:var(--ios-surface)}
@container (min-width:880px){
  body.cm-area .cm-pe{grid-template-columns:minmax(0,1fr) 320px;gap:28px}
  body.cm-area .cm-pe-side{order:0;align-self:stretch}
  body.cm-area .cm-pe-sticky{position:sticky;top:calc(100px + env(safe-area-inset-top,0px))}
}
@container (max-width:879px){
  /* Telefon: zwarty podgląd - zdjęcie z pierścieniem po lewej, nazwa i nagłówek obok. */
  body.cm-area .cm-pe-mini-banner{display:none}
  body.cm-area .cm-pe-mini-body{display:grid;grid-template-columns:68px minmax(0,1fr);column-gap:14px;row-gap:2px;align-items:center;text-align:left;padding:14px 16px}
  body.cm-area .cm-pe-mini-body>.cm-pf-ava{margin:0;grid-row:1/span 2}
  body.cm-area .cm-pe-mini-body>.cm-pe-mini-name{align-self:end}
  body.cm-area .cm-pe-mini-body>.cm-pe-mini-headline{align-self:start;grid-column:2}
  body.cm-area .cm-pe-mini .cm-pf-asks,body.cm-area .cm-pe-mini-meta{display:none}
}

/* ---------- okno kadrowania zdjęcia ---------- */
body.cm-area .cm-crop-dialog{max-width:560px}
body.cm-area .cm-crop{display:flex;flex-direction:column;gap:14px}
body.cm-area .cm-crop-stage{position:relative;width:100%;overflow:hidden;border-radius:16px;background:#05070F;touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none;outline:none}
body.cm-area .cm-crop-stage:focus-visible{box-shadow:0 0 0 2px var(--cm-gold-line)}
body.cm-area .cm-crop-stage.is-dragging{cursor:grabbing}
body.cm-area .cm-crop-canvas{position:absolute;left:0;top:0;display:block}
body.cm-area .cm-crop-frame{position:absolute;box-shadow:0 0 0 9999px rgba(5,7,15,.62);border:2px solid rgba(255,255,255,.92);border-radius:12px;pointer-events:none}
body.cm-area .cm-crop.is-round .cm-crop-frame{border-radius:50%}
body.cm-area .cm-crop-frame i{position:absolute;background:rgba(255,255,255,.45);opacity:0;transition:opacity .2s}
body.cm-area .cm-crop-frame i:nth-child(1){left:33.33%;top:0;bottom:0;width:1px}
body.cm-area .cm-crop-frame i:nth-child(2){left:66.66%;top:0;bottom:0;width:1px}
body.cm-area .cm-crop-frame i:nth-child(3){top:33.33%;left:0;right:0;height:1px}
body.cm-area .cm-crop-frame i:nth-child(4){top:66.66%;left:0;right:0;height:1px}
body.cm-area .cm-crop-stage.is-dragging .cm-crop-frame i{opacity:1}
body.cm-area .cm-crop-zoom{display:flex;align-items:center;gap:10px}
body.cm-area .cm-crop-zoom .cm-pf-icon{width:40px;height:40px}
body.cm-area .cm-crop-range{flex:1;min-width:0;accent-color:var(--cm-gold);height:28px}
body.cm-area .cm-crop-hint{margin:0;font-size:13.5px;line-height:18px;color:var(--ios-label-2)}
body.cm-area .cm-crop-warn{display:flex;align-items:center;gap:8px;margin:0;font-size:13.5px;line-height:18px;color:var(--cm-gold)}
body.cm-area .cm-crop-warn svg{flex:0 0 auto}
body.cm-area .cm-crop-actions{display:flex;justify-content:flex-end;gap:10px}
body.cm-area .cm-crop-actions .cm-btn{min-height:44px;padding:0 22px;font-size:15px}

/* ---------- karta po najechaniu na osobę ---------- */
body.cm-area .cm-hc{position:fixed;z-index:70;width:320px;max-width:calc(100vw - 16px);border-radius:20px;overflow:hidden;background:var(--ios-elev);color:var(--ios-label);
  box-shadow:0 24px 48px -18px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.25),inset 0 0 0 .5px var(--ios-glass-rim)}
[data-theme="light"] body.cm-area .cm-hc{box-shadow:0 24px 48px -18px rgba(16,24,40,.35),0 2px 8px rgba(16,24,40,.1),inset 0 0 0 .5px rgba(0,0,0,.08)}
@media (prefers-reduced-motion:no-preference){body.cm-area .cm-hc{animation:cm-hc-in .18s var(--ios-ease,ease-out)}}
@keyframes cm-hc-in{from{opacity:0;transform:translateY(4px) scale(.98)}to{opacity:1;transform:none}}
body.cm-area .cm-hc.is-above{transform-origin:bottom left}
body.cm-area .cm-hc-banner{position:relative;height:84px}
body.cm-area .cm-hc-body{display:flex;flex-direction:column;align-items:flex-start;padding:0 16px 14px}
body.cm-area .cm-hc-top{display:flex;align-items:flex-end;justify-content:space-between;align-self:stretch;margin-top:-34px;margin-bottom:8px}
body.cm-area .cm-hc-top .cm-pf-ava{box-shadow:0 0 0 3px var(--ios-elev);background:var(--ios-elev)}
body.cm-area .cm-hc-top .cm-pf-lvl{box-shadow:0 0 0 2px var(--ios-elev)}
body.cm-area .cm-hc-name{font-size:18px;line-height:23px;font-weight:700;color:var(--ios-label);text-decoration:none;overflow-wrap:anywhere}
body.cm-area .cm-hc-name:hover{text-decoration:underline}
body.cm-area .cm-hc-headline{margin:2px 0 0;font-size:14px;line-height:19px;color:var(--ios-label-2);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
body.cm-area .cm-hc-meta{display:flex;flex-wrap:wrap;gap:4px 12px;margin:8px 0 0;font-size:13px;line-height:18px;color:var(--ios-label-2)}
body.cm-area .cm-hc-meta span{display:inline-flex;align-items:center;gap:5px}
body.cm-area .cm-hc-meta svg{width:14px;height:14px}
body.cm-area .cm-hc .cm-pf-pills,body.cm-area .cm-hc .cm-pf-asks{justify-content:flex-start;margin-top:10px}
body.cm-area .cm-hc .cm-pf-asks>.cm-pf-label{flex-basis:auto;margin:0 2px 0 0}
body.cm-area .cm-hc .cm-pf-pill{min-height:22px;padding:0 9px;font-size:12px}
body.cm-area .cm-hc .cm-pf-ask{min-height:24px;padding:0 10px;font-size:12.5px}
body.cm-area .cm-hc-foot{display:flex;flex-wrap:wrap;gap:6px 14px;align-self:stretch;margin-top:12px;padding-top:10px;border-top:.5px solid var(--ios-sep);font-size:12.5px;line-height:16px;font-weight:600;color:var(--ios-label-2)}
body.cm-area .cm-hc-foot span{display:inline-flex;align-items:center;gap:5px}
body.cm-area .cm-hc-foot svg{width:14px;height:14px;color:var(--cm-gold)}
/* ---------- żywa tablica i karta wpisu 2.0 ---------- */
/* Fala 1.1 i 1.2 (feat/spolecznosc-feed): pigułka „N nowych wpisów”, linia „Od Twojej ostatniej wizyty”, nowy komentarz
   wsuwany w wątek, lżejsza karta na liście (linia kontekstu, treść do 5 linii, media w stałych proporcjach, rząd rozmowy
   z awatarami, jeden komentarz) i baner live ze stanami. Cały ruch wyłączony przy prefers-reduced-motion (koniec bloku). */
body.cm-area{--cm-ease-out:cubic-bezier(.2,.8,.2,1)}

/* Karta na liście: mniej pionowego powietrza, przycięcie do 5 linii. */
body.cm-area .cm-post.is-list{gap:10px}
@media (min-width:640px){body.cm-area .cm-post.is-list{padding:18px 20px 6px}body.cm-area .cm-post.is-list>:is(.cm-post-cover,.cm-post-cover-anim){margin:-18px -20px 0}}
body.cm-area .cm-post.is-list .cm-body.is-clamped{-webkit-line-clamp:5;line-clamp:5}
/* „Pokaż więcej” na końcu piątej linii (jak w Facebooku i Threads), z wygaszeniem tekstu pod spodem - bez osobnego wiersza. */
body.cm-area .cm-post.is-list .cm-body.is-clamped+.cm-more{position:relative;z-index:1;align-self:flex-end;height:24px;min-height:0;margin-top:-34px;padding:0 0 0 52px;line-height:24px;font-weight:600;color:var(--ios-label-2);background:linear-gradient(90deg,transparent,var(--ios-surface) 44px)}
body.cm-area .cm-post.is-list .cm-body.is-clamped+.cm-more::after{content:"";position:absolute;inset:-8px -6px -8px 24px}
@media (hover:hover){body.cm-area .cm-post.is-list .cm-body.is-clamped+.cm-more:hover{color:var(--ios-label);text-decoration:none}}
body.cm-area .cm-post.is-list:focus{outline:none}
body.cm-area .cm-post.is-list:focus-visible{outline:2px solid var(--ios-tint);outline-offset:2px}
body.cm-area .cm-post.is-list .cm-actions{margin-top:0}
/* Telefon: ciaśniej w pionie (8 px między częściami, awatar 36 px), cele dotyku przycisków zostają 44 px. */
@media (max-width:639px){
  body.cm-area .cm-post.is-list{gap:8px;padding-top:12px}
  body.cm-area .cm-post.is-list .cm-post-head .cm-avatar-md{width:36px;height:36px;font-size:14px}
  body.cm-area .cm-post.is-list .cm-body:not(.cm-comment-text){line-height:24px}
  body.cm-area .cm-post.is-list .cm-body.is-clamped+.cm-more{margin-top:-32px}
}
@media (pointer:fine){body.cm-area .cm-post.is-list .cm-act{min-height:38px}}

/* Linia kontekstu nad autorem (zastępuje znaczniki „Przypięte”, „Pytanie”, „Rozwiązane” na liście). */
body.cm-area .cm-ctx{display:flex;align-items:center;gap:6px;min-width:0;margin:0 0 -4px;font-size:13px;line-height:18px;font-weight:600;color:var(--ios-label-2)}
body.cm-area .cm-ctx svg{flex:none;width:14px;height:14px}
body.cm-area .cm-ctx span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
body.cm-area .cm-ctx.is-gold{color:var(--ios-tint)}
body.cm-area .cm-ctx.is-green{color:var(--cm-green)}
body.cm-area .cm-ctx.is-blue{color:var(--cm-blue)}
body.cm-area .cm-post.is-list>.cm-post-cover+.cm-ctx,body.cm-area .cm-post.is-list>.cm-post-cover-anim+.cm-ctx{margin-top:2px}

/* Media w stałych proporcjach: miejsce zarezerwowane przed wczytaniem, najwyżej 420 px wysokości. */
body.cm-area .cm-post.is-list .cm-media{display:block;max-height:420px;border-radius:16px;overflow:hidden;background:var(--ios-surface-2)}
body.cm-area .cm-post.is-list .cm-media.is-single>img,body.cm-area .cm-post.is-list .cm-media.is-single>.cm-anim,body.cm-area .cm-post.is-list .cm-media.is-single>.cm-anim>img{display:block;width:100%;height:100%;max-height:none;object-fit:cover}
body.cm-area .cm-post.is-list .cm-media-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px}
body.cm-area .cm-media-cell{position:relative;display:block;aspect-ratio:1;overflow:hidden}
/* Komórka siatki wypełniona do końca: .cm-post.is-list .cm-images img{max-height:360px} (0,3,1) przegrywa tu z regułą kanału
   (0,4,2), inaczej pod pierwszym zdjęciem siatki 3 zostaje pusty pas (audyt tablica-3). */
body.cm-area .cm-media-cell img,body.cm-area .cm-media-cell .cm-anim,body.cm-area .cm-post.is-list .cm-media-cell img{display:block;width:100%;height:100%;max-height:none;object-fit:cover}
body.cm-area .cm-post.is-list .cm-media-grid.is-n3 .cm-media-cell:first-child{grid-row:span 2;aspect-ratio:auto}
/* Siatka 3 i 4 zdjęć: dwa rzędy kwadratów mają na komputerze ok. 680 px, a .cm-media ucina do 420 px - trzecie zdjęcie
   i „+N” na czwartym znikały pod krawędzią. Siatka ma więc kwadratowe pole (najwyżej 420 px), rzędy dzielą je po równo. */
body.cm-area .cm-post.is-list .cm-media-grid:is(.is-n3,.is-n4){aspect-ratio:1;max-height:420px;grid-template-rows:repeat(2,minmax(0,1fr))}
body.cm-area .cm-post.is-list .cm-media-grid:is(.is-n3,.is-n4) .cm-media-cell{aspect-ratio:auto;min-height:0}
body.cm-area .cm-media-more{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.48);color:#fff;font-size:24px;line-height:1;font-weight:700;pointer-events:none}

/* Rząd rozmowy: awatary ostatnich komentujących, liczba i czas; po prawej reakcje. */
body.cm-area .cm-convo-row[hidden]{display:none}
body.cm-area .cm-convo-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:24px;font-size:13px;line-height:18px;color:var(--ios-label-2)}
body.cm-area .cm-convo{display:inline-flex;align-items:center;gap:8px;min-width:0;color:inherit;text-decoration:none}
body.cm-area .cm-convo-faces{display:inline-flex;flex:none;padding-left:6px}
body.cm-area .cm-convo-faces .cm-avatar,body.cm-area .cm-newpill-faces .cm-avatar,body.cm-area .cm-lb-faces .cm-avatar{width:24px;height:24px;margin-left:-5px;font-size:9px;font-weight:700;letter-spacing:-.02em;box-shadow:0 0 0 2px var(--ios-surface)}
body.cm-area .cm-convo-faces .cm-avatar svg{width:12px;height:12px}
body.cm-area .cm-convo-text{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
body.cm-area .cm-convo-text strong{font-weight:600;color:var(--ios-label)}
body.cm-area .cm-convo-likes{display:inline-flex;flex:none;align-items:center;gap:4px;padding:0;background:none;color:inherit;cursor:pointer}
body.cm-area .cm-convo-emoji{display:inline-flex;align-items:center;margin-right:2px}
body.cm-area .cm-convo-emoji svg{width:15px;height:15px;color:var(--ios-tint)}
body.cm-area .cm-convo-n{font-weight:600;color:var(--ios-label)}
@media (hover:hover){body.cm-area .cm-convo:hover .cm-convo-text strong,body.cm-area .cm-convo-likes:hover .cm-convo-n{text-decoration:underline}}
@media (pointer:coarse){body.cm-area :is(.cm-convo,.cm-convo-likes){min-height:36px}}
@media (max-width:420px){body.cm-area .cm-convo-last{display:none}} /* na wąskim ekranie „3 komentarze · 2 godz. temu” */

/* Jeden komentarz pod kartą: dymek jak w Wiadomościach, 2 linie, cały jest linkiem do komentarza we wpisie. */
body.cm-area .cm-tc{display:flex;align-items:flex-start;gap:8px;min-width:0;color:inherit;text-decoration:none}
body.cm-area .cm-tc>.cm-avatar{margin-top:2px}
body.cm-area .cm-tc-bubble{display:flex;flex-direction:column;gap:1px;min-width:0;padding:8px 12px 9px;border-radius:6px 18px 18px 18px;background:var(--ios-surface-2);transition:background-color .2s}
body.cm-area .cm-tc-kicker{display:inline-flex;align-items:center;gap:4px;margin-bottom:2px;font-size:12px;line-height:16px;font-weight:600;color:var(--ios-tint)}
body.cm-area .cm-tc-kicker svg{width:12px;height:12px}
body.cm-area .cm-tc-kicker.is-answer{color:var(--cm-green)}
body.cm-area .cm-tc-head{display:flex;align-items:baseline;gap:6px;min-width:0}
body.cm-area .cm-tc-name{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:14px;line-height:19px;font-weight:600;color:var(--ios-label)}
body.cm-area .cm-tc-when{flex:none;font-size:12px;line-height:16px;color:var(--ios-label-2)}
body.cm-area .cm-tc-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;font-size:15px;line-height:20px;color:var(--ios-label);white-space:pre-line;overflow-wrap:anywhere}
body.cm-area .cm-tc.is-answer .cm-tc-bubble{background:color-mix(in srgb,var(--cm-green) 10%,var(--ios-surface-2));box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--cm-green) 45%,transparent)}
@media (hover:hover){body.cm-area .cm-tc:hover .cm-tc-bubble{background:var(--ios-fill)}body.cm-area .cm-tc.is-answer:hover .cm-tc-bubble{background:color-mix(in srgb,var(--cm-green) 16%,var(--ios-surface-2))}}
body.cm-area .cm-tc:focus-visible{outline:2px solid var(--ios-tint);outline-offset:3px;border-radius:18px}

/* „Od Twojej ostatniej wizyty”: cienka złota kreska z napisem między nowymi a znanymi wpisami. */
body.cm-area .cm-visit-line{display:flex;align-items:center;gap:12px;margin:-2px 4px;font-size:13px;line-height:18px;font-weight:600;color:var(--ios-tint)}
body.cm-area .cm-visit-line::before,body.cm-area .cm-visit-line::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--cm-gold-line))}
body.cm-area .cm-visit-line::after{background:linear-gradient(90deg,var(--cm-gold-line),transparent)}

/* Pigułka „N nowych wpisów”: pływa pod paskiem u góry, nie przesuwa treści. top ustawia skrypt (wysokość paska). */
.cm-newpill-wrap{position:fixed;top:76px;left:50%;z-index:55;transform:translateX(-50%);animation:cm-pill-in .34s cubic-bezier(.34,1.35,.64,1) both}
.cm-newpill-wrap.is-out{animation:cm-pill-out .2s ease-in both}
.cm-newpill{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px 0 12px;border-radius:999px;background:var(--ios-tint,#FFD23F);color:var(--ios-on-tint,#171100);font-size:14px;line-height:18px;font-weight:600;white-space:nowrap;cursor:pointer;box-shadow:0 10px 28px -6px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.25);transition:transform .2s var(--cm-ease-out,ease),filter .2s}
.cm-newpill:hover{filter:brightness(1.05)}
.cm-newpill:active{transform:scale(.96)}
.cm-newpill:focus-visible{outline:2px solid var(--ios-label,#fff);outline-offset:3px}
.cm-newpill-arrow{width:16px;height:16px;transform:rotate(90deg)}
.cm-newpill-faces{display:inline-flex;padding-left:6px}
body.cm-area .cm-newpill-faces .cm-avatar{box-shadow:0 0 0 2px var(--ios-tint)}
.cm-newpill-wrap.is-bump .cm-newpill{animation:cm-pill-bump .36s cubic-bezier(.34,1.35,.64,1)}
@keyframes cm-pill-in{from{opacity:0;transform:translate(-50%,-14px) scale(.94)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes cm-pill-out{to{opacity:0;transform:translate(-50%,-10px) scale(.96)}}
@keyframes cm-pill-bump{40%{transform:scale(1.06)}}

/* Wpisy wstawione z pigułki: krótkie wsunięcie i złota poświata, która gaśnie. */
body.cm-area .cm-post.is-fresh{animation:cm-fresh-in .36s var(--cm-ease-out) both,cm-fresh-glow 1.8s ease-out both}
@keyframes cm-fresh-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes cm-fresh-glow{0%,35%{box-shadow:0 0 0 1.5px var(--cm-gold-line),0 10px 32px -12px var(--ios-tint)}100%{box-shadow:0 0 0 0 transparent}}

/* Nowy komentarz w otwartym wątku: wsuwa się z dołu, dymek na chwilę podświetlony. */
body.cm-area .cm-comment.is-incoming{border-radius:12px;animation:cm-incoming .34s var(--cm-ease-out) both,cm-incoming-glow 2.2s ease-out}
@keyframes cm-incoming{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes cm-incoming-glow{0%,35%{background:var(--ios-tint-soft);box-shadow:0 0 0 8px var(--ios-tint-soft)}100%{background:transparent;box-shadow:0 0 0 8px transparent}}
body.cm-area .is-pulse{animation:cm-pulse .5s cubic-bezier(.34,1.35,.64,1)}
@keyframes cm-pulse{40%{transform:scale(1.06)}}

/* Baner live: ciemny w obu motywach (premium-dark), zdjęcie prowadzącego w złotym pierścieniu, stan zamiast plakatu. */
body.cm-area .cm-livebar{--lb-gold:#FFD23F;--lb-red:#FF453A;--lb-red-btn:#DC2E26;--lb-ink:#fff;--lb-muted:rgba(235,240,255,.72);--lb-bg:#0c1426;
  position:relative;isolation:isolate;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;margin:0 0 14px;padding:18px 56px 18px 18px;border-radius:var(--cm-radius);overflow:hidden;color:var(--lb-ink);
  background:radial-gradient(120% 160% at 0% 0%,rgba(255,210,63,.20),transparent 52%),radial-gradient(90% 120% at 100% 100%,rgba(47,94,168,.35),transparent 60%),linear-gradient(135deg,#111c38,var(--lb-bg) 62%);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.08)}
body.cm-area .cm-livebar.is-live,body.cm-area .cm-livebar.is-soon{background:radial-gradient(120% 160% at 0% 0%,rgba(255,69,58,.30),transparent 55%),radial-gradient(90% 120% at 100% 100%,rgba(47,94,168,.32),transparent 60%),linear-gradient(135deg,#1a1430,var(--lb-bg) 62%)}
body.cm-area .cm-lb-host{position:relative;display:block;width:70px;height:70px;padding:3px;border-radius:999px;background:conic-gradient(from 200deg,#FFD23F,#fff1b8,#c9971c,#FFD23F)}
body.cm-area .cm-livebar.is-live .cm-lb-host,body.cm-area .cm-livebar.is-soon .cm-lb-host{background:conic-gradient(from 200deg,#FF453A,#ff9f0a,#ff2d55,#FF453A)}
body.cm-area .cm-lb-host>*{display:flex;width:64px;height:64px;border-radius:999px;box-shadow:0 0 0 2.5px var(--lb-bg)}
body.cm-area .cm-lb-host .cm-avatar-lg{font-size:22px}
body.cm-area .cm-lb-photo{object-fit:cover;background:#18233f}
body.cm-area .cm-lb-logo{align-items:center;justify-content:center;background:#0e1830}
body.cm-area .cm-lb-logo img{width:40px;height:40px;object-fit:contain}
body.cm-area .cm-livebar.is-live .cm-lb-host::after{content:"";position:absolute;inset:0;border-radius:999px;box-shadow:0 0 0 0 rgba(255,69,58,.55);animation:cm-lb-ping 2s cubic-bezier(.2,.8,.2,1) infinite}
body.cm-area .cm-lb-main{min-width:0}
body.cm-area .cm-lb-kicker{display:inline-flex;align-items:center;gap:7px;margin:0 0 4px;font-size:12px;line-height:16px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--lb-gold)}
body.cm-area .cm-lb-dot{width:8px;height:8px;border-radius:999px;background:currentColor}
body.cm-area .cm-livebar.is-live .cm-lb-kicker,body.cm-area .cm-livebar.is-soon .cm-lb-kicker{padding:3px 10px 3px 8px;border-radius:999px;background:var(--lb-red-btn);color:#fff}
body.cm-area .cm-livebar.is-live .cm-lb-dot{box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:cm-lb-dot 1.4s ease-out infinite}
body.cm-area .cm-lb-title{margin:0;font-size:20px;line-height:25px;font-weight:700;letter-spacing:-.01em;color:var(--lb-ink);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;text-wrap:balance}
body.cm-area .cm-lb-title a{color:inherit;text-decoration:none}
@media (hover:hover){body.cm-area .cm-lb-title a:hover{text-decoration:underline}}
body.cm-area .cm-lb-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin:6px 0 0;font-size:13px;line-height:18px;color:var(--lb-muted)}
body.cm-area .cm-lb-going{display:inline-flex;align-items:center;gap:8px}
body.cm-area .cm-lb-faces{display:inline-flex;padding-left:6px}
body.cm-area .cm-livebar .cm-lb-faces .cm-avatar{box-shadow:0 0 0 2px var(--lb-bg)}
body.cm-area .cm-lb-cta{display:flex;flex-direction:column;align-items:center;gap:6px}
body.cm-area .cm-livebar .cm-btn{min-height:40px;padding:0 18px;border:0;border-radius:999px;font-size:15px;font-weight:600;white-space:nowrap}
body.cm-area .cm-livebar .cm-lb-rsvp{background:var(--lb-gold);color:#171100}
/* „Dołącz teraz” to .cm-btn bez .cm-btn-primary: ogólna reguła szarych kapsuł (html:not([data-theme=light]) body.cm-area
   .cm-btn:not(.cm-btn-primary), 0,4,2) i jej najechanie (0,6,2) muszą przegrać w obu motywach (audyt tablica-1).
   Tło --lb-red-btn: biały tekst 4,7:1 (systemowa czerwień #FF453A daje 3,4:1); pierścień i poświata zostają w #FF453A. */
html body.cm-area .cm-livebar .cm-btn.cm-lb-join:not(.cm-btn-primary){background:var(--lb-red-btn);border-color:transparent;color:#fff;text-decoration:none;box-shadow:0 8px 24px -8px rgba(255,69,58,.8)}
/* Najechanie przyciemnia (#C42820, biały 5,7:1) - rozjaśnienie filtrem dawało 4,1:1. */
@media (hover:hover) and (pointer:fine){html body.cm-area .cm-livebar .cm-btn.cm-lb-join:not(.cm-btn-primary):not(:disabled):hover{background:#C42820;color:#fff;filter:none}}
body.cm-area .cm-livebar .cm-btn svg{width:16px;height:16px}
body.cm-area .cm-livebar .cm-btn.is-busy{opacity:.7;pointer-events:none}
body.cm-area .cm-lb-more{font-size:13px;line-height:18px;font-weight:600;color:var(--lb-muted);text-decoration:none}
@media (hover:hover){body.cm-area .cm-lb-more:hover{color:var(--lb-ink);text-decoration:underline}}
body.cm-area .cm-lb-saved{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px;border-radius:999px;background:rgba(52,211,153,.16);color:#34d399;font-size:15px;line-height:20px;font-weight:600;white-space:nowrap}
body.cm-area .cm-lb-saved svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
body.cm-area .cm-lb-saved.is-now{animation:cm-lb-pop .42s cubic-bezier(.34,1.35,.64,1)}
body.cm-area .cm-lb-saved.is-now path{stroke-dasharray:24;stroke-dashoffset:24;animation:cm-lb-check .45s .12s var(--cm-ease-out) forwards}
body.cm-area .cm-lb-close{position:absolute;top:10px;right:10px;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--lb-muted);cursor:pointer}
body.cm-area .cm-lb-close svg{width:16px;height:16px}
body.cm-area .cm-lb-close::after{content:"";position:absolute;inset:-6px}
@media (hover:hover){body.cm-area .cm-lb-close:hover{background:rgba(255,255,255,.16);color:var(--lb-ink)}}
body.cm-area .cm-livebar :focus-visible{outline:2px solid var(--lb-gold);outline-offset:2px}
@keyframes cm-lb-ping{0%{box-shadow:0 0 0 0 rgba(255,69,58,.55)}80%,100%{box-shadow:0 0 0 12px rgba(255,69,58,0)}}
@keyframes cm-lb-dot{0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}100%{box-shadow:0 0 0 7px rgba(255,255,255,0)}}
@keyframes cm-lb-pop{0%{transform:scale(.86)}100%{transform:scale(1)}}
@keyframes cm-lb-check{to{stroke-dashoffset:0}}
@media (max-width:639px){
  body.cm-area .cm-livebar{grid-template-columns:auto minmax(0,1fr);gap:12px 14px;padding:16px 48px 16px 16px}
  body.cm-area .cm-lb-host{width:58px;height:58px}
  body.cm-area .cm-lb-host>*{width:52px;height:52px}
  body.cm-area .cm-lb-host .cm-avatar-lg{font-size:19px}
  body.cm-area .cm-lb-title{font-size:17px;line-height:22px}
  body.cm-area .cm-lb-cta{grid-column:1/-1;flex-direction:row;align-items:center;gap:14px}
  body.cm-area .cm-livebar .cm-btn,body.cm-area .cm-lb-saved{flex:1;justify-content:center;min-height:44px}
}

/* Ograniczony ruch: bez wsuwania, pulsowania, poświaty i rysowania znaku - stany zmieniają się od razu. */
@media (prefers-reduced-motion:reduce){
  .cm-newpill-wrap,.cm-newpill-wrap.is-out,.cm-newpill-wrap.is-bump .cm-newpill,
  body.cm-area .cm-post.is-fresh,body.cm-area .cm-comment.is-incoming,body.cm-area .is-pulse,
  body.cm-area .cm-livebar.is-live .cm-lb-host::after,body.cm-area .cm-livebar.is-live .cm-lb-dot,body.cm-area .cm-lb-saved.is-now,body.cm-area .cm-lb-saved.is-now path{animation:none}
  body.cm-area .cm-lb-saved.is-now path{stroke-dashoffset:0}
  .cm-newpill,body.cm-area .cm-tc-bubble{transition:none}
}

/* ---------- powiadomienia 2.0 (ikona rodzaju, sekcje dni, akcje w miejscu, zestawy w ustawieniach) ---------- */
.cm-note-wrap{position:relative}
.cm-note-av{position:relative;flex:0 0 auto;align-self:flex-start;display:inline-flex}
.cm-note-kind{position:absolute;right:-5px;bottom:-5px;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--studio-surface);color:#fff;background:#8E8E93}
.cm-note-kind svg{width:10px;height:10px;stroke-width:2.6}
.cm-note-kind.is-blue{background:var(--cm-blue)}.cm-note-kind.is-red{background:var(--cm-red)}.cm-note-kind.is-green{background:var(--cm-green)}
.cm-note-kind.is-purple{background:#BF5AF2}.cm-note-kind.is-gold{background:var(--ios-tint);color:var(--ios-on-tint)}
.cm-note-day{padding:14px 16px 4px 30px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--studio-muted)}
.cm-note-day:first-child{padding-top:8px}
.cm-note-acts{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 10px 74px;margin-top:-2px}
.cm-note-act{display:inline-flex;align-items:center;gap:5px;min-height:30px;padding:4px 12px;border-radius:999px;background:var(--ios-fill-2);font-size:12px;font-weight:600;color:var(--studio-ink);cursor:pointer;transition:background .15s}
.cm-note-act:hover{background:var(--ios-fill)}
.cm-note-act svg{width:13px;height:13px}
.cm-note-reply{display:flex;flex-direction:column;gap:8px;padding:2px 16px 12px 74px;animation:cm-adm-fade .2s ease both}
.cm-note-reply .cm-textarea{min-height:64px}
.cm-note-sent{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:0 16px 12px 74px;font-size:13px;font-weight:600;color:var(--cm-green)}
.cm-note-sent svg{width:15px;height:15px}
.cm-note-sent .cm-link{margin-left:4px}
.cm-np-presets{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
@media (min-width:768px){.cm-np-presets{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cm-np-card{display:flex;align-items:flex-start;gap:12px;padding:14px;border-radius:16px;border:1px solid var(--studio-line);background:var(--studio-surface);text-align:left;cursor:pointer;color:inherit;transition:border-color .15s,background .15s}
@media (hover:hover) and (pointer:fine){.cm-np-card:hover{border-color:var(--ios-tint)}} /* dotyk: bez „przyklejonego” najechania (audyt brak2-17) */
.cm-np-card.is-active{border-color:var(--ios-tint);background:var(--ios-tint-soft)}
.cm-np-card strong{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:15px;color:var(--studio-ink)}
.cm-np-card small{display:block;margin-top:3px;font-size:12px;line-height:1.45;color:var(--studio-muted)}
.cm-np-dot{flex:0 0 auto;width:20px;height:20px;margin-top:1px;border-radius:50%;border:2px solid var(--studio-line);transition:border .15s}
.cm-np-card.is-active .cm-np-dot{border:6px solid var(--ios-tint)}
.cm-np-rec{display:inline-block!important;margin:0!important;padding:1px 7px;border-radius:999px;background:var(--ios-tint);color:var(--ios-on-tint)!important;font-size:10px!important;font-weight:800;letter-spacing:.03em;text-transform:uppercase}
.cm-np-quiet{display:flex;flex-direction:column;gap:10px;padding:12px 14px;border-radius:16px;background:var(--ios-fill-2)}
.cm-np-details{border-top:1px solid var(--studio-line);padding-top:8px}
.cm-np-details summary{cursor:pointer;padding:6px 0;font-size:14px;font-weight:600;color:var(--ios-tint);list-style:none}
.cm-np-details summary::-webkit-details-marker{display:none}
.cm-np-details summary::before{content:"";display:inline-block;width:7px;height:7px;margin-right:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .2s;vertical-align:2px}
.cm-np-details[open] summary::before{transform:rotate(45deg)}
/* Telefon: nagłówki kolumn w jednej linii („W aplikacji”, „E-mail”), bez łamania w pół słowa (audyt powiadomienia-11). */
@media (max-width:639px){.cm-np-details .cm-table th{white-space:nowrap;letter-spacing:0;font-size:10px;padding:8px 4px}}
@media (prefers-reduced-motion:reduce){.cm-note-reply{animation:none}}

/* ---------- Start 2.0: pierwsze wejście, karta „Zacznij tu” w kolumnie, pigułka na telefonie ---------- */
.cm-fr-dialog{max-width:640px!important}
.cm-fr{display:flex;flex-direction:column;gap:14px}
.cm-fr-dots{display:flex;justify-content:center;gap:6px}
.cm-fr-dots i{width:8px;height:8px;border-radius:999px;background:var(--ios-fill);transition:width .3s var(--ios-ease,ease),background .3s}
.cm-fr-dots i.is-on{width:24px;background:var(--ios-tint)}
.cm-fr-dots i.is-done{background:var(--ios-tint);opacity:.5}
.cm-fr-hello{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:6px 8px 0}
.cm-fr-host{display:inline-flex;padding:4px;border-radius:50%;background:conic-gradient(from 200deg,var(--ios-tint),#FFA500,var(--ios-tint));box-shadow:0 12px 30px -12px rgba(255,190,0,.55);margin-bottom:6px}
.cm-fr-host .cm-avatar-xl{border:3px solid var(--studio-surface)}
.cm-fr-kicker{margin:0;font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ios-tint)}
.cm-fr-title{margin:0;font-size:26px;line-height:1.2;font-weight:800;letter-spacing:-.02em;color:var(--studio-ink);text-align:center}
.cm-fr-lead{margin:0 auto;max-width:480px;font-size:15px;line-height:1.55;color:var(--studio-muted);text-align:center}
.cm-fr-points{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.cm-fr-points li{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:16px;background:var(--ios-fill-2)}
.cm-fr-points li>span{display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto;border-radius:10px;background:var(--ios-tint-soft);color:var(--ios-tint)}
.cm-fr-points li>span svg{width:18px;height:18px}
.cm-fr-points strong{display:block;font-size:15px;color:var(--studio-ink)}
.cm-fr-points small{display:block;font-size:13px;line-height:1.45;color:var(--studio-muted)}
.cm-fr-q{margin:6px 0 0;font-size:14px;font-weight:700;color:var(--studio-ink);display:flex;align-items:baseline;gap:8px}
.cm-fr-q small{font-size:12px;font-weight:600;color:var(--studio-muted)}
.cm-fr-chips{display:flex;flex-wrap:wrap;gap:6px}
.cm-fr-chip{min-height:36px;padding:7px 14px;border-radius:999px;border:1px solid var(--studio-line);background:var(--studio-surface);font-size:13px;font-weight:600;color:var(--studio-ink);cursor:pointer;transition:background .15s,border-color .15s,transform .15s var(--ios-spring,ease)}
@media (hover:hover) and (pointer:fine){.cm-fr-chip:hover{border-color:var(--ios-tint)}} /* dotyk: bez „przyklejonego” najechania (audyt brak2-17) */
.cm-fr-chip:active{transform:scale(.96)}
.cm-fr-chip.is-on{background:var(--ios-tint);border-color:var(--ios-tint);color:var(--ios-on-tint)}
.cm-fr-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:6px;flex-wrap:wrap}
.cm-fr-spaces{display:flex;flex-direction:column;border-radius:16px;border:1px solid var(--studio-line);overflow:hidden}
.cm-fr-space{display:flex;align-items:center;gap:12px;padding:12px 14px;flex-wrap:wrap}
.cm-fr-space+.cm-fr-space{border-top:1px solid var(--studio-line)}
.cm-fr-space-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--ios-fill-2);color:var(--studio-ink)}
.cm-fr-space-ic svg{width:17px;height:17px}
.cm-fr-space strong{display:block;font-size:14px;color:var(--studio-ink)}
.cm-fr-space small{display:block;font-size:12px;color:var(--studio-muted)}
.cm-fr-follow{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--studio-muted);cursor:pointer}
.cm-fr-follow input{accent-color:var(--ios-tint);width:16px;height:16px}
.cm-fr-people{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.cm-fr-person{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:14px 10px;border-radius:18px;background:var(--ios-fill-2)}
.cm-fr-person strong{font-size:14px;color:var(--studio-ink)}
.cm-fr-person small{font-size:12px;color:var(--studio-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cm-fr-shared{font-size:11px;font-weight:700;color:var(--ios-tint)}
.cm-fr-person .cm-btn{margin-top:6px}
.cm-fr-one{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px;border-radius:18px;background:var(--ios-tint-soft)}
.cm-fr-one strong{font-size:15px;color:var(--studio-ink)}
.cm-fr-one small{font-size:13px;line-height:1.5;color:var(--studio-muted)}
.cm-start-body{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border-radius:18px;background:linear-gradient(135deg,rgba(255,210,63,.14),transparent 70%),var(--ios-surface,var(--studio-surface))}
body.cm-area .cm-aside .cm-box.cm-start-card>.cm-start-body{box-shadow:none;border-radius:18px;background:linear-gradient(135deg,rgba(255,210,63,.14),transparent 70%),var(--ios-surface)}
.cm-start-top{display:flex;justify-content:space-between}
.cm-start-next{display:flex;flex-direction:column;gap:1px;margin:0}
.cm-start-next strong{font-size:15px;color:var(--studio-ink)}
.cm-start-body .cm-btn{align-self:flex-start}
.cm-start-pill{display:none}
@media (max-width:1023px){
  .cm-start-pill{position:fixed;left:50%;bottom:calc(98px + env(safe-area-inset-bottom,0px));z-index:40;translate:-50% 0;display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;
    background:var(--ios-glass-strong);-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);border:1px solid var(--ios-glass-rim);box-shadow:var(--ios-glass-shadow);
    font-size:14px;font-weight:600;color:var(--studio-ink);text-decoration:none;white-space:nowrap;animation:cm-adm-up .4s var(--ios-spring,ease) both}
  .cm-start-pill svg{width:16px;height:16px;color:var(--ios-tint)}
  .cm-start-pill b{padding:1px 8px;border-radius:999px;background:var(--ios-tint);color:var(--ios-on-tint);font-size:12px}
}
@media (prefers-reduced-motion:reduce){.cm-start-pill{animation:none}.cm-fr-dots i{transition:none}}

/* ---------- live 2.0 ---------- */
/* Stan „NA ŻYWO”: plakietka w menu i arkuszu „Więcej”, kropka na pasku kart, pasek nad widokiem, karta na Tablicy. */
body.cm-area{--cm-live:#FF3B30;--cm-live-soft:rgba(255,59,48,.14)}
[data-theme="light"] body.cm-area{--cm-live:#E5251B;--cm-live-soft:rgba(229,37,27,.09)}
@keyframes cm-live-ping{0%{box-shadow:0 0 0 0 rgba(255,59,48,.55)}70%{box-shadow:0 0 0 7px rgba(255,59,48,0)}100%{box-shadow:0 0 0 0 rgba(255,59,48,0)}}
body.cm-area .cm-nav-live{margin-left:auto;display:inline-flex;align-items:center;flex:0 1 auto;min-width:0;overflow:hidden;padding:1px 5px;border-radius:999px;background:var(--cm-live);color:#fff;font-size:9.5px;line-height:14px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;animation:cm-live-ping 1.8s infinite}
body.cm-area .cm-nav-item:has(.cm-nav-live){gap:8px}
body.cm-area .cm-nav-item:has(.cm-nav-live) .cm-nav-label{flex:0 0 auto}
body.cm-area .cm-sheet .cm-nav-live{padding:2px 8px;font-size:11px;letter-spacing:.05em}
body.cm-area .cm-live-dot{position:absolute;top:6px;left:calc(50% + 7px);width:9px;height:9px;border-radius:999px;background:var(--cm-live);border:2px solid var(--ios-glass-strong,var(--studio-surface));animation:cm-live-ping 1.8s infinite}
body.cm-area .cm-bottom-item{position:relative}
.cm-live-badge{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;padding:3px 9px 3px 8px;border-radius:999px;background:var(--cm-live,#FF3B30);color:#fff;font-size:11px;line-height:15px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.cm-live-badge-dot{width:7px;height:7px;border-radius:999px;background:#fff;animation:cm-live-ping 1.8s infinite}
body.cm-area .cm-live-strip{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:8px 8px 8px 10px;border-radius:16px;background:linear-gradient(90deg,var(--cm-live-soft),transparent 70%),var(--ios-surface);box-shadow:inset 0 0 0 .5px var(--ios-sep)}
body.cm-area .cm-live-strip-text{display:flex;flex-direction:column;min-width:0;flex:1}
body.cm-area .cm-live-strip-text strong{font-size:14px;line-height:19px;font-weight:600;color:var(--studio-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.cm-area .cm-live-strip-text span{font-size:12.5px;line-height:16px;color:var(--ios-label-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.cm-area .cm-live-join{flex:0 0 auto}
body.cm-area .cm-live-strip .cm-live-join{min-height:32px;padding:0 14px;border-radius:999px;font-size:13px}
body.cm-area .cm-live-hero{display:grid;grid-template-columns:220px minmax(0,1fr);gap:0;margin:0 0 14px;border-radius:20px;overflow:hidden;background:var(--ios-surface);box-shadow:inset 0 0 0 .5px var(--ios-sep)}
body.cm-area .cm-live-hero-art{position:relative;display:flex;align-items:center;justify-content:center;min-height:150px;overflow:hidden;background:radial-gradient(120% 90% at 20% 10%,#3a1220 0%,#1b0f1c 45%,#0b1020 100%);text-decoration:none}
body.cm-area .cm-live-hero-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
body.cm-area .cm-live-hero-art.has-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,0) 45%)}
body.cm-area .cm-live-hero-art .cm-live-badge{position:absolute;top:12px;left:12px;z-index:1;box-shadow:0 4px 14px rgba(255,59,48,.4)}
.cm-live-eq{display:flex;align-items:flex-end;gap:5px;height:44px}
.cm-live-eq i{display:block;width:6px;height:100%;border-radius:3px;background:linear-gradient(180deg,#FF6B5E,#FF3B30);transform-origin:bottom;animation:cm-eq 1.1s ease-in-out infinite}
.cm-live-eq i:nth-child(2){animation-delay:-.35s}.cm-live-eq i:nth-child(3){animation-delay:-.7s}.cm-live-eq i:nth-child(4){animation-delay:-.2s}.cm-live-eq i:nth-child(5){animation-delay:-.55s}
@keyframes cm-eq{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
body.cm-area .cm-live-hero-body{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px 18px;min-width:0}
body.cm-area .cm-live-hero-kicker{font-size:12.5px;line-height:16px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--cm-live)}
body.cm-area .cm-live-hero-title{margin:0;font-size:20px;line-height:25px;font-weight:700;letter-spacing:-.01em;color:var(--studio-ink)}
body.cm-area .cm-live-hero-title a{color:inherit;text-decoration:none}
body.cm-area .cm-live-hero-meta{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;line-height:18px;color:var(--ios-label-2)}
body.cm-area .cm-live-hero-meta svg{width:15px;height:15px}
body.cm-area .cm-live-hero .cm-live-join{margin-top:6px;min-height:38px;padding:0 18px;border-radius:999px}
@media (max-width:639px){
  body.cm-area .cm-live-hero{grid-template-columns:100px minmax(0,1fr);border-radius:18px}
  body.cm-area .cm-live-hero-art{min-height:0}
  body.cm-area .cm-live-hero-art .cm-live-badge{top:auto;bottom:10px;left:50%;transform:translateX(-50%);gap:4px;padding:2px 6px;font-size:9px;letter-spacing:.03em;white-space:nowrap}
  body.cm-area .cm-live-hero-art .cm-live-badge-dot{width:5px;height:5px}
  body.cm-area .cm-live-eq{height:30px;gap:4px}
  body.cm-area .cm-live-eq i{width:4px}
  body.cm-area .cm-live-hero-body{padding:12px 14px;gap:4px}
  body.cm-area .cm-live-hero-title{font-size:17px;line-height:22px}
  body.cm-area .cm-live-hero .cm-live-join{min-height:36px;font-size:14px}
  body.cm-area .cm-live-strip{gap:10px;margin-bottom:12px}
  body.cm-area .cm-live-strip .cm-live-badge{padding:2px 7px;font-size:10px}
}

/* Zwięzłe odliczanie (jedna linia zamiast czterech kafelków). */
body.cm-area .cm-ev-countdown{display:flex;align-items:center;gap:12px;margin-top:10px;padding:12px 14px;border-radius:16px;background:var(--ios-surface);box-shadow:inset 0 0 0 .5px var(--ios-sep)}
body.cm-area .cm-ev-cd-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:0 0 auto;border-radius:12px;background:var(--ios-tint-soft);color:var(--ios-tint)}
body.cm-area .cm-ev-cd-icon svg{width:19px;height:19px}
body.cm-area .cm-ev-cd-text{display:flex;flex-direction:column;min-width:0}
body.cm-area .cm-ev-cd-line{font-size:15px;line-height:20px;color:var(--ios-label-2)}
body.cm-area .cm-ev-cd-line strong{color:var(--studio-ink);font-weight:700;font-variant-numeric:tabular-nums}
body.cm-area .cm-ev-cd-info{font-size:12.5px;line-height:17px;color:var(--ios-label-2)}

/* Zakładki „Czat | Pytania” i panel pytań. */
body.cm-area .cm-ev-side{display:flex;flex-direction:column;gap:8px;min-width:0}
body.cm-area .cm-ev-tabs{width:100%;max-width:none;margin:0}
body.cm-area .cm-ev-tabs .cm-tab{flex:1;justify-content:center;gap:6px;padding:7px 10px}
body.cm-area .cm-ev-tabs .cm-tab svg{width:15px;height:15px}
body.cm-area .cm-ev-tab-count{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--ios-tint);color:var(--ios-on-tint);font-size:11px;line-height:18px;font-weight:700;text-align:center}
body.cm-area .cm-ev-tab-fresh{width:7px;height:7px;border-radius:999px;background:var(--cm-live)}
body.cm-area .cm-ev-tabs~#cm-ev-chat .cm-chat-head>svg:first-child{display:none}
body.cm-area .cm-qa{display:flex;flex-direction:column;min-height:420px;max-height:70vh;border-radius:var(--cm-radius);background:var(--ios-surface);box-shadow:inset 0 0 0 .5px var(--ios-sep);overflow:hidden}
body.cm-area .cm-qa-head{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:.5px solid var(--ios-sep)}
body.cm-area .cm-qa-sort{margin:0}
body.cm-area .cm-qa-sort .cm-tab{padding:4px 12px;font-size:13px}
body.cm-area .cm-qa-total{margin-left:auto;white-space:nowrap}
body.cm-area .cm-qa-list{flex:1;min-height:0;overflow-y:auto;margin:0;padding:6px 8px 10px;list-style:none;overscroll-behavior:contain}
body.cm-area .cm-qa-item{display:flex;gap:10px;padding:10px 6px;border-radius:14px;transition:background-color .6s}
body.cm-area .cm-qa-item+.cm-qa-item{box-shadow:0 -.5px 0 var(--ios-sep)}
body.cm-area .cm-qa-item.is-new{background:var(--ios-tint-soft);transition:none}
body.cm-area .cm-qa-item.is-answered .cm-qa-text{color:var(--ios-label-2)}
body.cm-area .cm-qa-item.is-hidden{opacity:.65;box-shadow:inset 0 0 0 1px var(--cm-red)}
body.cm-area .cm-qa-vote{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;flex:0 0 auto;width:42px;min-height:48px;padding:4px 0;border:0;border-radius:12px;background:var(--ios-fill-2);color:var(--ios-label-2);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;cursor:pointer;transition:background-color .2s,color .2s,transform .2s var(--ios-spring)}
body.cm-area .cm-qa-vote svg{width:16px;height:16px}
body.cm-area .cm-qa-vote:not(:disabled):hover{background:var(--ios-fill);color:var(--studio-ink)}
body.cm-area .cm-qa-vote:not(:disabled):active{transform:scale(.92)}
body.cm-area .cm-qa-vote.is-on{background:var(--ios-tint);color:var(--ios-on-tint)}
body.cm-area .cm-qa-vote:disabled{cursor:default;opacity:.85}
body.cm-area .cm-qa-vote:focus-visible{outline:2px solid var(--cm-gold);outline-offset:2px}
body.cm-area .cm-qa-main{flex:1;min-width:0}
body.cm-area .cm-qa-meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;font-size:12.5px;line-height:16px;color:var(--ios-label-2)}
body.cm-area .cm-qa-meta .cm-avatar{width:20px;height:20px;font-size:9px}
body.cm-area .cm-qa-meta .cm-avatar svg{width:12px;height:12px}
body.cm-area .cm-qa-who{font-weight:600;color:var(--studio-ink);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.cm-area .cm-qa-meta .cm-flag{font-size:11px;line-height:15px;padding:0 7px}
body.cm-area .cm-qa-meta .cm-flag svg{width:11px;height:11px}
body.cm-area .cm-qa-done{display:inline-flex;align-items:center;gap:3px;color:var(--cm-green);font-weight:700}
body.cm-area .cm-qa-done svg{width:13px;height:13px}
body.cm-area .cm-qa-text{margin:4px 0 0;font-size:15px;line-height:21px;color:var(--studio-ink);white-space:pre-wrap;overflow-wrap:anywhere}
body.cm-area .cm-qa-tools{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:6px}
body.cm-area .cm-qa-tool{display:inline-flex;align-items:center;gap:4px;padding:2px 0;border:0;background:none;color:var(--ios-label-2);font-size:12.5px;font-weight:600;cursor:pointer}
body.cm-area .cm-qa-tool svg{width:13px;height:13px}
body.cm-area .cm-qa-tool:hover,body.cm-area .cm-qa-tool.is-on{color:var(--studio-ink)}
body.cm-area .cm-qa-tool.is-danger:hover{color:var(--cm-red)}
body.cm-area .cm-qa-sep{margin:10px 6px 2px;font-size:11.5px;line-height:16px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ios-label-2)}
body.cm-area .cm-qa-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:32px 16px;text-align:center;font-size:13.5px;line-height:19px;color:var(--ios-label-2)}
body.cm-area .cm-qa-empty strong{font-size:15px;color:var(--studio-ink)}
body.cm-area .cm-qa-empty-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:14px;background:var(--ios-tint-soft);color:var(--ios-tint)}
body.cm-area .cm-qa-empty-icon svg{width:22px;height:22px}
body.cm-area .cm-qa-form-box{border-top:.5px solid var(--ios-sep)}
body.cm-area .cm-qa-form{display:flex;flex-direction:column;gap:6px;padding:10px}
body.cm-area .cm-qa-form .cm-textarea{min-height:44px;max-height:140px;padding:10px 12px;border:0;border-radius:14px;background:var(--ios-fill-2);font-size:15px;line-height:20px;resize:none}
/* Dotyk: 17 px jak inne pola (poniżej 16 px iOS przybliża stronę przy fokusie i zostaje przybliżony) - audyt brak2-7. */
@media (pointer:coarse){body.cm-area .cm-qa-form .cm-textarea{font-size:17px;line-height:22px}}
[data-theme="light"] body.cm-area .cm-qa-form .cm-textarea{background-color:var(--ios-fill-2)!important} /* index.html: jasne pola z !important */
body.cm-area .cm-qa-form-row{display:flex;align-items:center;gap:8px}
body.cm-area .cm-qa-anon{display:flex;align-items:center;gap:8px;min-width:0}
body.cm-area .cm-qa-anon .cm-switch{width:42px;height:25px}
body.cm-area .cm-qa-anon .cm-switch::after{width:21px;height:21px}
body.cm-area .cm-qa-anon .cm-switch[aria-checked="true"]::after{transform:translateX(17px)}
body.cm-area .cm-qa-anon label{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--studio-ink);cursor:pointer;white-space:nowrap}
body.cm-area .cm-qa-anon label svg{width:14px;height:14px;color:var(--ios-label-2)}
body.cm-area .cm-qa-left{margin-left:auto;font-size:12px;color:var(--ios-label-2);font-variant-numeric:tabular-nums}
body.cm-area .cm-qa-left.is-low{color:var(--cm-red)}
body.cm-area .cm-qa-form .cm-btn-primary{margin-left:auto;min-height:34px;border-radius:999px;padding:0 14px}
body.cm-area .cm-qa-left:not(:empty)+.cm-btn-primary{margin-left:0}
body.cm-area .cm-qa-anon-help{margin:0;font-size:12px;line-height:16px;color:var(--ios-label-2)}
body.cm-area .cm-qa-closed{display:flex;align-items:center;gap:6px;margin:0;padding:12px 14px;font-size:13px;color:var(--ios-label-2)}
body.cm-area .cm-qa-closed svg{width:14px;height:14px}

/* Pływające reakcje nad transmisją (warstwa bez kliknięć) i pasek reakcji pod nią. */
body.cm-area .cm-react-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}
body.cm-area .cm-float{position:absolute;right:calc(14px + var(--x,0px));bottom:64px;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:999px;color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.35);opacity:0;animation:cm-float-up var(--dur,2.2s) cubic-bezier(.22,.8,.3,1) forwards;will-change:transform,opacity}
body.cm-area .cm-float svg{width:20px;height:20px}
body.cm-area .cm-float.is-mine{width:44px;height:44px}
@keyframes cm-float-up{
  0%{opacity:0;transform:translate(0,12px) scale(.4)}
  12%{opacity:1;transform:translate(calc(var(--drift,0px) * -.3),-18px) scale(1.08)}
  45%{transform:translate(var(--drift,0px),-110px) scale(1)}
  75%{opacity:.9}
  100%{opacity:0;transform:translate(calc(var(--drift,0px) * -.5),-230px) scale(.92)}
}
.cm-react-heart{--rx:linear-gradient(145deg,#FF6B81,#E11D48)}
.cm-react-like{--rx:linear-gradient(145deg,#5AA9FF,#1D6FE0)}
.cm-react-clap{--rx:linear-gradient(145deg,#FFE27D,#E0A100)}
.cm-react-fire{--rx:linear-gradient(145deg,#FFA45B,#F0530F)}
.cm-react-haha{--rx:linear-gradient(145deg,#FFD84D,#F2A900)}
.cm-react-wow{--rx:linear-gradient(145deg,#B794FF,#7C3AED)}
body.cm-area .cm-float,body.cm-area .cm-react-tally{background:var(--rx)}
body.cm-area .cm-float.cm-react-clap,body.cm-area .cm-float.cm-react-haha{color:#2A1B00}
body.cm-area .cm-react-tally{position:absolute;right:12px;display:inline-flex;align-items:center;gap:4px;padding:4px 9px 4px 6px;border-radius:999px;color:#fff;font-size:13px;font-weight:700;box-shadow:0 4px 12px rgba(0,0,0,.3)}
body.cm-area .cm-react-tally svg{width:16px;height:16px}
body.cm-area .cm-react-tally:nth-of-type(1){bottom:60px}body.cm-area .cm-react-tally:nth-of-type(2){bottom:92px}body.cm-area .cm-react-tally:nth-of-type(3){bottom:124px}
body.cm-area .cm-react-tally:nth-of-type(4){bottom:156px}body.cm-area .cm-react-tally:nth-of-type(5){bottom:188px}body.cm-area .cm-react-tally:nth-of-type(6){bottom:220px}
body.cm-area .cm-react-bar{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;padding:6px;border-radius:999px;background:var(--ios-surface);box-shadow:inset 0 0 0 .5px var(--ios-sep)}
body.cm-area .cm-react-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:999px;background:var(--ios-fill-2);color:var(--studio-ink);cursor:pointer;transition:transform .25s var(--ios-spring),background-color .2s}
body.cm-area .cm-react-btn svg{width:21px;height:21px}
body.cm-area .cm-react-btn:hover{background:var(--rx);color:#fff}
body.cm-area .cm-react-btn.cm-react-clap:hover,body.cm-area .cm-react-btn.cm-react-haha:hover{color:#2A1B00}
body.cm-area .cm-react-btn:active{transform:scale(.86)}
body.cm-area .cm-react-btn.cm-react-heart svg{color:#FF4D6D}
body.cm-area .cm-react-btn.cm-react-heart:hover svg{color:#fff}
body.cm-area .cm-react-btn:focus-visible{outline:2px solid var(--cm-gold);outline-offset:2px}
body.cm-area .cm-react-bar.is-paused .cm-react-btn{opacity:.4;pointer-events:none}
body.cm-area .cm-react-pause{font-size:12.5px;font-weight:600;color:var(--ios-label-2);white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:639px){
  body.cm-area .cm-react-bar{gap:4px;justify-content:space-between}
  body.cm-area .cm-react-btn{width:42px;height:42px}
  body.cm-area .cm-float{bottom:44px;width:32px;height:32px}
  body.cm-area .cm-float svg{width:17px;height:17px}
  body.cm-area .cm-float.is-mine{width:38px;height:38px}
}

/* Strona nagrania: rozdziały i „3 wnioski + jedna rzecz do zrobienia”. */
body.cm-area #cm-ev-chapters:empty,body.cm-area #cm-ev-recap:empty{display:none}
body.cm-area .cm-chapters{padding:12px 8px 8px}
body.cm-area .cm-chapters h3{margin:0 8px 6px}
body.cm-area .cm-chapters ol{margin:0;padding:0;list-style:none}
body.cm-area .cm-chapter{display:flex;align-items:center;gap:12px;width:100%;padding:8px;border:0;border-radius:10px;background:none;text-align:left;color:var(--studio-ink);font-size:14.5px;line-height:20px;cursor:pointer}
body.cm-area span.cm-chapter{cursor:default}
body.cm-area button.cm-chapter:hover{background:var(--ios-fill-2)}
body.cm-area .cm-chapter-t{flex:0 0 auto;min-width:52px;padding:2px 8px;border-radius:8px;background:var(--ios-tint-soft);color:var(--ios-tint);font-size:13px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums}
body.cm-area .cm-chapter-title{flex:1;min-width:0}
body.cm-area .cm-chapter>svg{width:14px;height:14px;color:var(--ios-label-2);opacity:0;transition:opacity .15s}
body.cm-area button.cm-chapter:hover>svg,body.cm-area .cm-chapter.is-current>svg{opacity:1}
body.cm-area .cm-chapter.is-current{background:var(--ios-tint-soft)}
body.cm-area .cm-recap{position:relative;padding:18px 18px 16px}
body.cm-area .cm-recap-kicker{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ios-tint)}
body.cm-area .cm-recap-title{margin:4px 0 12px;font-size:19px;line-height:24px;font-weight:700;color:var(--studio-ink)}
body.cm-area .cm-recap-list{margin:0;padding:0;list-style:none;counter-reset:cm-recap;display:flex;flex-direction:column;gap:10px}
body.cm-area .cm-recap-list li{position:relative;padding-left:40px;min-height:28px;font-size:15.5px;line-height:22px;color:var(--studio-ink);counter-increment:cm-recap}
body.cm-area .cm-recap-list li::before{content:counter(cm-recap);position:absolute;left:0;top:-2px;width:28px;height:28px;border-radius:999px;background:var(--ios-tint-soft);color:var(--ios-tint);font-size:14px;font-weight:800;line-height:28px;text-align:center}
body.cm-area .cm-recap-action{display:flex;gap:12px;margin-top:16px;padding:14px;border-radius:16px;background:var(--ios-tint);color:var(--ios-on-tint)}
body.cm-area .cm-recap-action-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 auto;border-radius:11px;background:rgba(0,0,0,.12)}
body.cm-area .cm-recap-action-icon svg{width:19px;height:19px}
body.cm-area .cm-recap-action-label{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;opacity:.75}
body.cm-area .cm-recap-action p{margin:2px 0 0;font-size:16px;line-height:22px;font-weight:600}
body.cm-area .cm-recap-edit{position:absolute;top:14px;right:14px}
body.cm-area .cm-recap-add{display:flex;align-items:center;gap:12px;width:100%;padding:14px;border:1px dashed var(--ios-sep);border-radius:16px;background:none;color:var(--studio-ink);text-align:left;cursor:pointer}
body.cm-area .cm-recap-add>svg{width:20px;height:20px;color:var(--ios-tint)}
body.cm-area .cm-recap-add span{display:flex;flex-direction:column;gap:2px;font-size:14px}
body.cm-area .cm-recap-add small{font-size:12.5px;color:var(--ios-label-2)}

/* Subskrypcja kalendarza (okno i ustawienia). */
body.cm-area .cm-cal-sub{display:flex;flex-direction:column;gap:14px}
body.cm-area .cm-cal-sub-hero{display:flex;align-items:center;gap:12px}
body.cm-area .cm-cal-sub-hero p{margin:0;font-size:15px;line-height:21px;color:var(--studio-ink)}
body.cm-area .cm-cal-sub-icon{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;flex:0 0 auto;border-radius:14px;background:var(--ios-tint-soft);color:var(--ios-tint)}
body.cm-area .cm-cal-sub-icon svg{width:24px;height:24px}
body.cm-area .cm-cal-sub-main{align-self:flex-start;min-height:42px;padding:0 20px;border-radius:999px}
body.cm-area .cm-cal-apps{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:var(--ios-fill-2)}
body.cm-area .cm-cal-app{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 12px;border:0;background:none;color:var(--studio-ink);text-align:left;text-decoration:none;cursor:pointer}
body.cm-area .cm-cal-app+.cm-cal-app{box-shadow:0 -.5px 0 var(--ios-sep)}
body.cm-area .cm-cal-app:hover{background:var(--ios-fill-2)}
body.cm-area .cm-cal-app-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:0 0 auto;border-radius:9px;background:var(--ios-surface);color:var(--ios-tint)}
body.cm-area .cm-cal-app-icon svg{width:17px;height:17px}
body.cm-area .cm-cal-app-text{display:flex;flex-direction:column;flex:1;min-width:0}
body.cm-area .cm-cal-app-text strong{font-size:15px;font-weight:600}
body.cm-area .cm-cal-app-text small{font-size:12.5px;color:var(--ios-label-2)}
body.cm-area .cm-cal-app>svg:last-child{width:16px;height:16px;color:var(--ios-label-2)}
body.cm-area .cm-cal-url{display:flex;gap:8px;align-items:center}
body.cm-area .cm-cal-url .cm-input{flex:1;min-width:0;font-size:13px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;text-overflow:ellipsis}
body.cm-area .cm-cal-sub-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}

/* Widok miesiąca. */
body.cm-area .cm-cal{padding:12px;border-radius:20px;background:var(--ios-surface);box-shadow:inset 0 0 0 .5px var(--ios-sep)}
body.cm-area .cm-cal-head{display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:0 4px}
body.cm-area .cm-cal-title{margin:0;font-size:19px;line-height:24px;font-weight:700;color:var(--studio-ink)}
body.cm-area .cm-cal-nav{display:flex;align-items:center;gap:4px;margin-left:auto}
body.cm-area .cm-cal-nav .cm-btn{border-radius:999px}
body.cm-area .cm-cal-week,body.cm-area .cm-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
body.cm-area .cm-cal-week span{padding:4px 0;text-align:center;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ios-label-2)}
body.cm-area .cm-cal-day{display:flex;flex-direction:column;align-items:stretch;gap:3px;min-height:92px;padding:6px;border:0;border-radius:12px;background:var(--ios-fill-2);color:var(--studio-ink);text-align:left;cursor:pointer;min-width:0;transition:background-color .15s}
body.cm-area .cm-cal-day:hover{background:var(--ios-fill)}
body.cm-area .cm-cal-day.is-out{background:none;color:var(--ios-label-3)}
body.cm-area .cm-cal-num{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;min-width:24px;height:24px;padding:0 4px;border-radius:999px;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
body.cm-area .cm-cal-day.is-today .cm-cal-num{background:var(--cm-live);color:#fff}
body.cm-area .cm-cal-day.is-selected{box-shadow:inset 0 0 0 2px var(--ios-tint)}
body.cm-area .cm-cal-chips{display:flex;flex-direction:column;gap:2px;min-width:0}
/* Nazwa wydarzenia do 3 linii (z godziną na początku) zamiast kilku liter z wielokropkiem; pełna nazwa jest w liście dnia
   pod siatką i w aria-label dnia. Widok Kalendarz bez prawej kolumny - szersza siatka (audyt live-15). */
body.cm-area .cm-cal-chip{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;padding:2px 6px;border-radius:6px;background:var(--ios-tint-soft);color:var(--studio-ink);font-size:11.5px;line-height:15px;font-weight:600;white-space:normal;overflow:hidden;overflow-wrap:anywhere;hyphens:auto}
@media (min-width:1280px){.cm-shell.cm-layout:has(.cm-cal-grid){grid-template-columns:220px minmax(0,1fr)}.cm-shell.cm-layout:has(.cm-cal-grid)>.cm-aside{display:none}}
body.cm-area .cm-cal-chip.is-live{background:var(--cm-live);color:#fff}
body.cm-area .cm-cal-chip.is-past{background:var(--ios-fill);color:var(--ios-label-2)}
body.cm-area .cm-cal-more{font-size:11px;font-weight:600;color:var(--ios-label-2);padding-left:4px}
body.cm-area .cm-cal-dots{display:none}
body.cm-area .cm-cal-day-title{margin:16px 2px 4px;text-transform:none}
body.cm-area .cm-cal-day-title::first-letter{text-transform:uppercase}
body.cm-area .cm-cal-none{margin:4px 2px}
@media (max-width:767px){
  body.cm-area .cm-cal{padding:10px 6px}
  body.cm-area .cm-cal-week,body.cm-area .cm-cal-grid{gap:2px}
  body.cm-area .cm-cal-day{align-items:center;min-height:48px;padding:4px 0;background:none}
  body.cm-area .cm-cal-num{align-self:center;min-width:30px;height:30px;font-size:15px}
  body.cm-area .cm-cal-chips{display:none}
  body.cm-area .cm-cal-dots{display:flex;gap:3px;justify-content:center;height:5px}
  body.cm-area .cm-cal-dots i{width:5px;height:5px;border-radius:999px;background:var(--ios-tint)}
  body.cm-area .cm-cal-dots i.is-live{background:var(--cm-live)}
  body.cm-area .cm-cal-day.is-selected{box-shadow:none}
  body.cm-area .cm-cal-day.is-selected .cm-cal-num{background:var(--studio-ink);color:var(--ios-bg)}
  body.cm-area .cm-cal-day.is-today.is-selected .cm-cal-num{background:var(--cm-live);color:#fff}
}

@media (prefers-reduced-motion:reduce){
  body.cm-area .cm-nav-live,.cm-live-badge-dot,body.cm-area .cm-live-dot,.cm-live-eq i{animation:none}
  .cm-live-eq i{transform:scaleY(.6)}
  body.cm-area .cm-float{display:none}
  body.cm-area .cm-qa-item,body.cm-area .cm-qa-vote,body.cm-area .cm-react-btn{transition:none}
}

/* ---------- wyszukiwarka i PWA ---------- */
/* Szybka wyszukiwarka (fala 2.1, app-community-search.js): na komputerze okno nad stroną jak paleta Cmd+K (Linear, Raycast),
   na telefonie pełnoekranowy ekran wyszukiwania jak w iOS (pole w kapsule, „Anuluj”, filtry pod spodem). Wiersze zwięzłe:
   kafelek albo awatar, tytuł z podświetleniem, jedna linia opisu. Kolory z tokenów --ios-* (oba motywy). */
html.cm-qs-open{overflow:hidden}
body.cm-area .cm-modal.cm-qs{z-index:85;align-items:flex-start;justify-content:center;padding:max(9vh,64px) 16px 16px}
body.cm-area .cm-qs-panel{display:flex;flex-direction:column;width:min(680px,100%);max-height:min(660px,calc(100vh - max(9vh,64px) - 24px));
  max-height:min(660px,calc(100dvh - max(9vh,64px) - 24px));overflow:hidden;border-radius:24px;background:var(--ios-elev);color:var(--ios-label);
  box-shadow:0 32px 80px -24px rgba(0,0,0,.75),0 2px 10px rgba(0,0,0,.3),inset 0 0 0 .5px var(--ios-glass-rim)}
[data-theme="light"] body.cm-area .cm-qs-panel{box-shadow:0 32px 80px -24px rgba(16,24,40,.38),0 2px 10px rgba(16,24,40,.1),inset 0 0 0 .5px rgba(0,0,0,.08)}
body.cm-area .cm-qs-head{display:flex;align-items:center;gap:10px;padding:10px 14px 8px 18px}
body.cm-area .cm-qs-field{position:relative;flex:1 1 auto;display:flex;align-items:center;gap:10px;min-width:0}
body.cm-area .cm-qs-ic{flex:0 0 auto;width:22px;height:22px;color:var(--ios-label-2);transition:color .2s}
body.cm-area .cm-qs-field:focus-within .cm-qs-ic{color:var(--ios-tint)}
body.cm-area .cm-qs-spin{display:none;position:absolute;left:1px;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:50%;border:2px solid var(--ios-fill);border-top-color:var(--ios-tint);animation:cm-qs-spin .7s linear infinite}
body.cm-area .cm-qs-field.is-loading .cm-qs-spin{display:block}
body.cm-area .cm-qs-field.is-loading .cm-qs-ic{visibility:hidden}
@keyframes cm-qs-spin{to{rotate:360deg}}
body.cm-area .cm-qs-input{flex:1 1 auto;min-width:0;height:48px;padding:0;border:0;outline:0;background:none;color:var(--ios-label);font:400 19px/26px var(--ios-font);letter-spacing:var(--ios-trk-body);-webkit-appearance:none;appearance:none}
body.cm-area .cm-qs-input::placeholder{color:var(--ios-label-2);opacity:.85}
/* Jasny motyw kursu nadpisuje tło każdego pola (!important w index.html) - pole wyszukiwarki ma być przezroczyste. */
[data-theme="light"] body.cm-area .cm-qs-input{background-color:transparent!important;color:var(--ios-label)!important}
body.cm-area .cm-qs-input::-webkit-search-cancel-button,body.cm-area .cm-qs-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
body.cm-area .cm-qs-clear{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--ios-label-3);color:var(--ios-elev);cursor:pointer}
body.cm-area .cm-qs-clear[hidden]{display:none}
body.cm-area .cm-qs-clear svg{width:13px;height:13px;stroke-width:3}
body.cm-area .cm-qs-cancel{display:none;flex:0 0 auto;background:none;color:var(--ios-tint);font-size:17px;line-height:22px;padding:8px 2px;cursor:pointer}
body.cm-area .cm-qs-esc{flex:0 0 auto}
body.cm-area .cm-qs kbd{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;margin-right:3px;border-radius:6px;background:var(--ios-fill-2);color:var(--ios-label-2);font:600 11px/20px var(--ios-font);box-shadow:inset 0 -1px 0 var(--ios-sep)}
body.cm-area .cm-qs-chips{display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 16px 12px 18px;border-bottom:.5px solid var(--ios-sep)}
body.cm-area .cm-qs-chips::-webkit-scrollbar{display:none}
body.cm-area .cm-qs-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 12px;border-radius:999px;background:var(--ios-fill-2);color:var(--ios-label);font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer;transition:background-color .2s,color .2s,transform .25s var(--ios-ease)}
body.cm-area .cm-qs-chip svg{width:14px;height:14px;stroke-width:2.4}
body.cm-area .cm-qs-chip:hover{background:var(--ios-fill)}
body.cm-area .cm-qs-chip.is-on{background:var(--ios-tint-soft);color:var(--ios-tint);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ios-tint) 45%,transparent)}
body.cm-area .cm-qs-chip:active{transform:scale(.96)}
body.cm-area .cm-qs-chip:focus-visible,body.cm-area .cm-qs-clear:focus-visible,body.cm-area .cm-qs-cancel:focus-visible,body.cm-area .cm-qs-glink:focus-visible{outline:2px solid var(--ios-tint);outline-offset:2px}
body.cm-area .cm-qs-chip-sep{flex:0 0 1px;width:1px;height:18px;margin:0 4px;background:var(--ios-sep)}
/* Komputer: filtry łamią się do drugiego rzędu zamiast chować się za krawędzią paska bez przewijania (audyt powiadomienia-7). */
@media (min-width:640px){body.cm-area .cm-qs-chips{flex-wrap:wrap;row-gap:8px;overflow:visible}}
body.cm-area .cm-qs-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 8px 10px;scroll-padding:8px}
body.cm-area .cm-qs-list[hidden]{display:none}
body.cm-area .cm-qs-group+.cm-qs-group{margin-top:4px}
body.cm-area .cm-qs-group.is-tail{margin-top:6px;padding-top:6px;border-top:.5px solid var(--ios-sep)}
body.cm-area .cm-qs-glabel{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 10px 5px;font-size:13px;line-height:18px;font-weight:600;color:var(--ios-label-2)}
body.cm-area .cm-qs-glink{background:none;color:var(--ios-tint);font-size:13px;font-weight:600;cursor:pointer;padding:2px 0}
body.cm-area .cm-qs-opt{display:flex;align-items:center;gap:12px;min-height:54px;padding:8px 10px;border-radius:14px;cursor:pointer;transition:background-color .12s}
body.cm-area .cm-qs-opt.is-compact{min-height:46px}
body.cm-area .cm-qs-opt.is-active{background:var(--ios-fill-2)}
[data-theme="light"] body.cm-area .cm-qs-opt.is-active{background:var(--ios-fill)}
body.cm-area .cm-qs-lead{flex:0 0 auto;display:flex}
body.cm-area .cm-qs-tile{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:var(--nk-tile);color:var(--nk-tile-ink)}
body.cm-area .cm-qs-tile svg{width:18px;height:18px}
body.cm-area .cm-qs-tile.is-plain{background:var(--ios-fill-2);color:var(--ios-label-2)}
body.cm-area .cm-qs-tile.is-gold{background:var(--ios-tint);color:var(--ios-on-tint)}
body.cm-area .cm-qs-lead .cm-avatar{width:34px;height:34px}
body.cm-area .cm-qs-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
body.cm-area .cm-qs-title{font-size:15px;line-height:20px;font-weight:600;color:var(--ios-label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.cm-area .cm-qs-sub,body.cm-area .cm-qs-excerpt{font-size:13px;line-height:18px;color:var(--ios-label-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.cm-area .cm-qs-via{font-weight:600;color:var(--ios-label)}
body.cm-area .cm-qs mark{background:var(--ios-tint-soft);color:inherit;border-radius:4px;padding:0 1px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
body.cm-area .cm-qs-title mark{color:var(--ios-label);box-shadow:inset 0 -1.5px 0 color-mix(in srgb,var(--ios-tint) 70%,transparent)}
body.cm-area .cm-qs-go{flex:0 0 auto;display:flex;color:var(--ios-label-3);opacity:0;transition:opacity .15s}
body.cm-area .cm-qs-go svg{width:16px;height:16px}
body.cm-area .cm-qs-opt.is-active .cm-qs-go{opacity:1}
body.cm-area .cm-qs-badge{display:inline-flex;align-items:center;gap:3px;margin-right:6px;font-weight:600;color:var(--ios-label-2);vertical-align:-1px}
body.cm-area .cm-qs-badge svg{width:12px;height:12px;stroke-width:2.6}
body.cm-area .cm-qs-badge.is-ok{color:var(--cm-green)}
body.cm-area .cm-qs-badge.is-live{color:var(--cm-red)}
body.cm-area .cm-qs-badge.is-live i{width:7px;height:7px;border-radius:50%;background:currentColor;margin-right:2px}
body.cm-area .cm-qs-date{display:flex;flex-direction:column;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:var(--ios-fill-2);line-height:1;overflow:hidden}
body.cm-area .cm-qs-date b{font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--cm-red)}
body.cm-area .cm-qs-date span{margin-top:1px;font-size:15px;font-weight:700;color:var(--ios-label)}
body.cm-area .cm-qs-date.is-live{box-shadow:inset 0 0 0 1.5px var(--cm-red)}
body.cm-area .cm-qs-pills{display:flex;flex-wrap:wrap;gap:8px;padding:4px 10px 8px}
body.cm-area .cm-qs-pill{display:inline-flex;align-items:center;height:32px;padding:0 13px;border-radius:999px;background:var(--ios-fill-2);color:var(--ios-label);font-size:14px;font-weight:600;cursor:pointer;transition:background-color .12s}
body.cm-area .cm-qs-pill.is-active{background:var(--ios-fill);box-shadow:inset 0 0 0 1.5px var(--ios-tint)}
body.cm-area .cm-qs-opt.is-ask{margin-top:2px}
body.cm-area .cm-qs-opt.is-ask .cm-qs-title{font-size:16px}
body.cm-area .cm-qs-opt.is-ask.is-active{background:var(--ios-tint-soft)}
body.cm-area .cm-qs-none{padding:26px 18px 10px;text-align:center}
body.cm-area .cm-qs-none-title{margin:0 0 6px;font-size:17px;line-height:22px;font-weight:600;color:var(--ios-label);overflow-wrap:anywhere}
body.cm-area .cm-qs-none-text{margin:0 auto;max-width:400px;font-size:14px;line-height:20px;color:var(--ios-label-2)}
body.cm-area .cm-qs-none-text .cm-link{color:var(--ios-tint)}
body.cm-area .cm-qs-extra:empty{display:none}
body.cm-area .cm-qs-foot{display:flex;align-items:center;gap:16px;padding:9px 18px;border-top:.5px solid var(--ios-sep);font-size:12px;line-height:16px;color:var(--ios-label-2);white-space:nowrap;overflow:hidden}
body.cm-area .cm-qs-foot-k{margin-left:auto}
@media (prefers-reduced-motion:no-preference){
  body.cm-area .cm-qs-panel{animation:cm-qs-in .22s var(--ios-ease)}
  body.cm-area .cm-modal.cm-qs.is-closing .cm-qs-panel{animation:cm-qs-out .16s cubic-bezier(.4,0,1,1) forwards}
}
@media (prefers-reduced-motion:reduce){body.cm-area .cm-qs-spin{animation-duration:1.6s}}
@keyframes cm-qs-in{from{opacity:0;scale:.97;translate:0 -6px}}
@keyframes cm-qs-out{to{opacity:0;scale:.98}}
/* Dotyk (bez klawiatury): bez podpowiedzi klawiszy. */
@media (hover:none),(pointer:coarse){body.cm-area .cm-qs-foot,body.cm-area .cm-qs-esc{display:none}}
/* Telefon: pełny ekran wyszukiwania (iOS) - pole w kapsule, „Anuluj”, wynik pod kciukiem; wysokość nad klawiaturą. */
@media (max-width:639px){
  body.cm-area .cm-modal.cm-qs{padding:0;align-items:stretch;top:var(--cm-qs-top,0px);bottom:auto;height:var(--cm-qs-h,100%);background:var(--ios-bg)}
  /* Safari w iOS 26/27 liczy obszar pod pływającym paskiem adresu i paskiem nad klawiaturą jako poza widocznym obszarem -
     tło nakładki sięga pod nie, więc spod spodu nie prześwituje strona (sprawdzone w symulatorze iOS 27). */
  body.cm-area .cm-modal.cm-qs::after{content:"";position:absolute;left:0;right:0;top:100%;height:100vh;background:var(--ios-bg);pointer-events:none}
  body.cm-area .cm-qs-panel{width:100%;height:100%;max-height:none;border-radius:0;box-shadow:none;background:var(--ios-bg);padding-top:env(safe-area-inset-top,0px)}
  body.cm-area .cm-qs-head{padding:10px 16px 10px;gap:12px}
  body.cm-area .cm-qs-field{height:40px;padding:0 10px;gap:7px;border-radius:12px;background:var(--ios-fill-2)}
  body.cm-area .cm-qs-ic{width:19px;height:19px}
  body.cm-area .cm-qs-spin{left:10px;width:18px;height:18px;margin-top:-9px}
  body.cm-area .cm-qs-input{height:40px;font-size:17px;line-height:22px}
  body.cm-area .cm-qs-cancel{display:inline-flex}
  body.cm-area .cm-qs-esc{display:none}
  /* Telefon: przewijany rząd z wygaszeniem krawędzi (widać, że jest dalej) i 4 px nad kapsułami - WebKit ścinał ich górę (brak2-16). */
  body.cm-area .cm-qs-chips{padding:4px 16px 10px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 28px),transparent)}
  body.cm-area .cm-qs-chips::after{content:"";flex:0 0 12px}
  body.cm-area .cm-qs-body{padding:2px 8px calc(16px + env(safe-area-inset-bottom,0px))}
  body.cm-area .cm-qs-opt{min-height:58px;border-radius:12px}
  body.cm-area .cm-qs-title{font-size:16px;line-height:21px}
  body.cm-area .cm-qs-sub,body.cm-area .cm-qs-excerpt{font-size:14px;line-height:19px}
  body.cm-area .cm-qs-go{display:none}
  body.cm-area .cm-qs-foot{display:none}
  @media (prefers-reduced-motion:no-preference){
    body.cm-area .cm-qs-panel{animation:cm-qs-up .32s var(--ios-ease)}
    body.cm-area .cm-modal.cm-qs.is-closing .cm-qs-panel{animation:cm-qs-down .2s cubic-bezier(.4,0,1,1) forwards}
  }
}
@keyframes cm-qs-up{from{opacity:0;translate:0 4%}}
@keyframes cm-qs-down{to{opacity:0;translate:0 4%}}

/* Arkusz „Notatnik na ekranie głównym” (fala 1.6): ikona, powód w języku kursantki, instrukcja z ilustracją
   na iPhonie albo jeden przycisk instalacji w Chrome. Ilustracja rysowana tokenami, więc działa w obu motywach. */
body.cm-area .cm-dialog.is-pwa{width:min(460px,100%)}
body.cm-area .cm-pwa{display:flex;flex-direction:column;gap:16px;padding-bottom:4px}
body.cm-area .cm-pwa-hero{display:flex;align-items:center;gap:14px}
body.cm-area .cm-pwa-icon{flex:0 0 auto;width:64px;height:64px;border-radius:15px;box-shadow:0 0 0 1px var(--ios-glass-rim),0 8px 22px -6px rgba(0,0,0,.55)}
body.cm-area .cm-pwa-lead{margin:0;font-size:16px;line-height:22px;color:var(--ios-label)}
body.cm-area .cm-pwa-why{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
body.cm-area .cm-pwa-why li{display:flex;align-items:flex-start;gap:12px;font-size:15px;line-height:20px;color:var(--ios-label)}
body.cm-area .cm-pwa-why svg{flex:0 0 auto;width:20px;height:20px;color:var(--ios-tint)}
body.cm-area .cm-pwa-art{display:block;width:100%;max-width:340px;height:auto;margin:0 auto}
body.cm-area .cm-pwa-art .a-card{fill:var(--ios-fill-2)}
body.cm-area .cm-pwa-art :is(.a-bar,.a-btn){fill:var(--ios-surface)}
body.cm-area .cm-pwa-art .a-url{font:500 13px var(--ios-font);fill:var(--ios-label-2)}
body.cm-area .cm-pwa-art .a-ring{fill:none;stroke:var(--ios-tint);stroke-width:2.5}
body.cm-area .cm-pwa-art .a-glyph{fill:none;stroke:var(--ios-tint);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
body.cm-area .cm-pwa-art .a-arrow{fill:none;stroke:var(--ios-label-2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body.cm-area .cm-pwa-art .a-dim{fill:none;stroke:var(--ios-label-3);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body.cm-area .cm-pwa-art .a-row{fill:var(--ios-surface);stroke:var(--ios-tint);stroke-width:2}
body.cm-area .cm-pwa-art .a-label{font:600 15px var(--ios-font);fill:var(--ios-label)}
body.cm-area .cm-pwa-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
body.cm-area .cm-pwa-step{display:flex;align-items:flex-start;gap:12px;font-size:15px;line-height:21px;color:var(--ios-label)}
body.cm-area .cm-pwa-num{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--ios-fill);font-size:13px;font-weight:700;color:var(--ios-label)}
body.cm-area .cm-pwa-inline{display:inline-block;width:18px;height:18px;vertical-align:-3px;fill:none;stroke:var(--ios-tint);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
body.cm-area .cm-pwa-note{display:flex;align-items:flex-start;gap:10px;margin:0;padding:12px 14px;border-radius:16px;background:var(--ios-fill-2);font-size:14px;line-height:19px;color:var(--ios-label)}
body.cm-area .cm-pwa-note svg{flex:0 0 auto;width:18px;height:18px;color:var(--ios-tint);margin-top:1px}
body.cm-area .cm-pwa-actions{display:flex;flex-direction:column;gap:8px;margin-top:2px}
body.cm-area .cm-pwa-actions .cm-btn{min-height:50px;font-size:17px}
body.cm-area .cm-pwa-actions .cm-btn svg{width:18px;height:18px}
/* ---------- kompozytor 2.0 i wątki 2.0 ---------- */
/* Blok promptu (``` w treści): wyróżniony, z „Kopiuj” i „Otwórz w Prompt Optimizerze”. Prompt czcionką treści (to tekst
   dla AI, nie kod), blok kodu (```python) czcionką o stałej szerokości. */
body.cm-area .cm-pblock{margin:10px 0;border-radius:14px;background:var(--ios-surface-2);box-shadow:inset 0 0 0 1px var(--cm-gold-line);overflow:hidden;white-space:normal;container-type:inline-size}
body.cm-area .cm-pblock-head{display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 6px 6px 12px;box-shadow:inset 0 -.5px 0 var(--ios-sep)}
body.cm-area .cm-pblock-label{display:inline-flex;flex-shrink:0;align-items:center;gap:6px;margin-right:auto;white-space:nowrap;font-size:12px;line-height:16px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ios-tint)}
body.cm-area .cm-pblock-label svg{width:16px;height:16px}
body.cm-area .cm-pblock.is-code .cm-pblock-label{color:var(--ios-label-2)}
body.cm-area .cm-pblock-acts{display:flex;align-items:center;gap:4px;min-width:0}
body.cm-area .cm-pblock-btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;background:var(--ios-fill-2);color:var(--ios-label);font-size:13px;line-height:18px;font-weight:600;white-space:nowrap;text-decoration:none;cursor:pointer;transition:background .15s,color .15s,transform .15s}
body.cm-area .cm-pblock-btn svg{width:15px;height:15px}
@media (hover:hover){body.cm-area .cm-pblock-btn:hover{background:var(--ios-fill);text-decoration:none}}
body.cm-area .cm-pblock-btn:active{transform:scale(.96)}
body.cm-area .cm-pblock-btn:focus-visible{outline:2px solid var(--ios-tint);outline-offset:2px}
body.cm-area .cm-pblock-btn.is-done{background:rgba(48,209,88,.16);color:var(--cm-green)}
body.cm-area .cm-pblock-short{display:none}
body.cm-area .cm-pblock-text code{font:inherit;background:none;padding:0;color:inherit}
body.cm-area .cm-pblock-text{margin:0;padding:12px 14px 14px;max-height:360px;overflow:auto;overscroll-behavior:contain;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;font:inherit;font-size:15px;line-height:1.6;color:var(--ios-label);tab-size:2}
body.cm-area .cm-pblock-text:focus-visible{outline:2px solid var(--ios-tint);outline-offset:-2px}
body.cm-area .cm-pblock.is-code .cm-pblock-text{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;line-height:1.55}
@media (max-width:520px){body.cm-area .cm-pblock-long{display:none}body.cm-area .cm-pblock-short{display:inline}}
@media (pointer:coarse){body.cm-area .cm-pblock-btn{height:40px;padding:0 14px}}
/* Wąski blok (odpowiedź w wątku na telefonie): najpierw sama ikona przy Optimizerze (link ma aria-label), przy bardzo
   wąskim także przy „Kopiuj” - napis zostaje dla czytnika ekranu (ukryty wizualnie, nie display:none). Audyt watek-5. */
@container (max-width:360px){body.cm-area .cm-pblock-acts .cm-pblock-btn[href]{width:32px;padding:0;justify-content:center}body.cm-area .cm-pblock-acts .cm-pblock-btn[href]>span{display:none}}
@container (max-width:260px){body.cm-area .cm-pblock-acts .cm-pblock-btn{position:relative;width:32px;padding:0;justify-content:center}
  body.cm-area .cm-pblock-btn-l{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}}
@media (pointer:coarse){@container (max-width:360px){body.cm-area .cm-pblock-acts .cm-pblock-btn[href]{width:40px}}@container (max-width:260px){body.cm-area .cm-pblock-acts .cm-pblock-btn{width:40px}}}
/* Cytat (odpowiedź cytująca zaznaczenie) i nagłówki szablonu w treści. */
body.cm-area .cm-quote{margin:6px 0;padding:6px 12px;border-left:3px solid var(--cm-gold-line);border-radius:0 10px 10px 0;background:var(--ios-fill-2);color:var(--ios-label-2);white-space:pre-wrap}
body.cm-area .cm-tpl-h{display:block;margin:12px 0 2px;font-weight:700;color:var(--ios-label)}
body.cm-area .cm-body>.cm-tpl-h:first-child{margin-top:0}

/* Pasek narzędzi kompozytora: przyciski z podpisem, „Więcej”, „Podgląd” po prawej. */
body.cm-area .cm-c-tools{align-items:center;gap:4px}
body.cm-area .cm-c-tool.has-label{width:auto;height:36px;gap:6px;padding:0 12px 0 10px;font-size:14px;line-height:18px;font-weight:600;white-space:nowrap}
body.cm-area .cm-c-tool.has-label svg{width:18px;height:18px}
body.cm-area .cm-c-tools-gap{flex:1 1 auto;min-width:4px}
body.cm-area .cm-c-tool[aria-expanded="true"]{background:var(--ios-fill);color:var(--studio-ink)}
@media (pointer:coarse){body.cm-area .cm-c-tool.has-label{height:40px;padding:0 14px 0 12px}}
@media (max-width:639px){body.cm-area .cm-c-tool.has-label{font-size:13px;padding:0 12px 0 10px}}
/* Wskazówki szablonu (jak „post guidelines” w forach Discorda) - tuż nad treścią, w barwie akcentu. */
body.cm-area .cm-c-guide{display:flex;align-items:flex-start;gap:10px;margin:2px 0 4px 13px;padding:10px 10px 10px 12px;border-radius:14px;background:var(--ios-fill-2);box-shadow:inset 3px 0 0 var(--ios-tint);color:var(--ios-label-2);font-size:14px;line-height:20px}
body.cm-area .cm-c-guide strong{color:var(--ios-label)}
body.cm-area .cm-c-guide>svg{flex:0 0 18px;width:18px;height:18px;margin-top:1px;color:var(--ios-tint)}
body.cm-area .cm-c-guide p{flex:1;min-width:0;margin:0}
body.cm-area .cm-c-guide strong{font-weight:600}
body.cm-area .cm-c-guide-off{flex:0 0 auto;align-self:center;min-height:32px;padding:0 8px;border-radius:999px;background:none;color:var(--ios-label-2);font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer}
@media (hover:hover){body.cm-area .cm-c-guide-off:hover{background:var(--ios-fill-2);color:var(--ios-label)}}
@media (max-width:639px){body.cm-area .cm-c-guide{flex-wrap:wrap;margin-left:0;font-size:14px}body.cm-area .cm-c-guide p{flex:1 1 calc(100% - 28px)}body.cm-area .cm-c-guide-off{margin:-4px 0 -4px 20px;min-height:36px}}
/* „Podobne pytania już są” pod tytułem: stałe miejsce, łagodne wejście (bez skoku przy każdym znaku). */
body.cm-area .cm-c-similar{margin:2px 0 6px 13px;padding:10px 12px 8px;border-radius:14px;background:var(--ios-fill-2)}
body.cm-area .cm-c-similar[hidden]{display:none}
body.cm-area .cm-c-similar.is-in{animation:cm-sim-in .24s var(--cm-ease-out,ease) both}
@keyframes cm-sim-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
body.cm-area .cm-sim-h{display:flex;align-items:center;gap:6px;margin:0 0 4px;font-size:13px;line-height:18px;font-weight:600;color:var(--ios-label-2)}
body.cm-area .cm-sim-h svg{width:14px;height:14px}
body.cm-area .cm-sim-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
body.cm-area .cm-sim-item{display:flex;align-items:center;gap:10px;min-height:44px;margin:0 -8px;padding:6px 8px;border-radius:10px;color:var(--ios-label);text-decoration:none}
@media (hover:hover){body.cm-area .cm-sim-item:hover{background:var(--ios-fill-2);text-decoration:none}}
body.cm-area .cm-sim-item:focus-visible{outline:2px solid var(--ios-tint);outline-offset:-2px}
body.cm-area .cm-sim-ic{flex:0 0 28px;width:28px;height:28px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:var(--ios-fill);color:var(--ios-label-2)}
body.cm-area .cm-sim-ic.is-solved{background:rgba(48,209,88,.16);color:var(--cm-green)}
body.cm-area .cm-sim-ic svg{width:15px;height:15px}
body.cm-area .cm-sim-txt{flex:1;min-width:0;display:flex;flex-direction:column}
body.cm-area .cm-sim-title{font-size:15px;line-height:20px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.cm-area .cm-sim-meta{font-size:12px;line-height:16px;color:var(--ios-label-2)}
body.cm-area .cm-sim-go{flex:0 0 14px;width:14px;height:14px;color:var(--ios-label-2)}
body.cm-area .cm-sim-note{margin:4px 0 0;font-size:12px;line-height:16px;color:var(--ios-label-2)}
@media (max-width:639px){body.cm-area .cm-c-similar{margin-left:0}}
/* Podgląd: zamiast pól wpis tak, jak zobaczą go inni; z paska zostaje tylko „Edytuj”. */
body.cm-area .cm-c-form.is-preview .cm-c-main>:not(#cm-c-preview){display:none!important}
body.cm-area .cm-c-form.is-preview .cm-c-tools>:not(#cm-c-preview-btn):not(.cm-c-tools-gap){display:none}
body.cm-area .cm-c-preview{outline:none}
body.cm-area .cm-c-pv-h{display:flex;align-items:center;gap:6px;margin:0 0 8px;font-size:13px;line-height:18px;font-weight:600;color:var(--ios-label-2)}
body.cm-area .cm-c-pv-h svg{width:15px;height:15px}
body.cm-area .cm-c-pv-card{margin:0;padding:14px 16px;border-radius:16px;background:var(--ios-surface);box-shadow:inset 0 0 0 .5px var(--ios-sep)}
body.cm-area .cm-c-pv-card .cm-post-title{margin:8px 0 4px;font-size:19px;line-height:25px}
/* Stan szkicu przy przyciskach: „Szkic zapisany” z zielonym znakiem. */
body.cm-area .cm-c-status{display:inline-flex;align-items:center;gap:5px}
body.cm-area .cm-c-status svg{width:14px;height:14px;flex:0 0 14px}
body.cm-area .cm-c-status[data-state="saved"]{color:var(--cm-green)}
/* „Zaplanuj” (admin): kapsuła w stopce i termin pod nią. */
body.cm-area .cm-c-sched{flex:1 1 100%;min-width:0}
body.cm-area .cm-c-sched-btn{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 14px 0 12px;border-radius:999px;background:var(--ios-fill-2);color:var(--ios-label-2);font-size:14px;line-height:18px;font-weight:600;cursor:pointer}
body.cm-area .cm-c-sched-btn svg{width:16px;height:16px}
body.cm-area .cm-c-sched-btn.is-on{color:var(--ios-tint);box-shadow:inset 0 0 0 1px var(--cm-gold-line)}
body.cm-area .cm-c-sched-box{margin-top:10px}
body.cm-area .cm-c-sched-box[hidden]{display:none}
body.cm-area .cm-c-sched-row{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;margin-bottom:6px}
body.cm-area .cm-c-sched-row .cm-input{width:auto;max-width:100%;min-height:40px}
body.cm-area .cm-c-sched-box p{margin:0}
@media (pointer:coarse){body.cm-area .cm-c-sched-btn{min-height:44px}}
/* Telefon z klawiaturą: pasek narzędzi na samym dole okna, tuż nad klawiaturą (stopka nad nim). */
@media (max-width:639px){
  html body.cm-area .cm-modal.is-kb .cm-c-form{display:flex;flex-direction:column}
  html body.cm-area .cm-modal.is-kb .cm-c-foot{order:2}
  html body.cm-area .cm-modal.is-kb .cm-c-tools{order:3;position:sticky;bottom:0;z-index:2;background:var(--ios-elev);padding-bottom:6px}
  html body.cm-area .cm-modal.is-kb .cm-c-sched{display:none}
}

/* Zaplanowane wpisy na Tablicy (admin). */
body.cm-area .cm-sched-bar{display:flex;align-items:center;gap:10px;width:100%;margin:0 0 12px;padding:10px 14px;border-radius:14px;background:var(--ios-surface);box-shadow:inset 0 0 0 1px var(--cm-gold-line);color:var(--ios-label);font-size:14px;line-height:20px;text-align:left;cursor:pointer}
body.cm-area .cm-sched-bar>svg{flex:0 0 18px;width:18px;height:18px;color:var(--ios-tint)}
body.cm-area .cm-sched-bar.is-failed{box-shadow:inset 0 0 0 1px rgba(255,69,58,.45)}
body.cm-area .cm-sched-bar.is-failed>svg{color:var(--cm-red)}
body.cm-area .cm-sched-bar strong{font-weight:600}
body.cm-area .cm-sched-bar-go{margin-left:auto;display:inline-flex;align-items:center;gap:2px;color:var(--ios-tint);font-weight:600;white-space:nowrap}
body.cm-area .cm-sched-bar-go svg{width:16px;height:16px}
body.cm-area .cm-sched-bar:focus-visible{outline:2px solid var(--ios-tint);outline-offset:2px}
body.cm-area .cm-sched-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
body.cm-area .cm-sched-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;padding:12px 0;box-shadow:inset 0 -.5px 0 var(--ios-sep)}
body.cm-area .cm-sched-when{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ios-tint);white-space:nowrap}
body.cm-area .cm-sched-when svg{width:15px;height:15px}
body.cm-area .cm-sched-what{display:flex;flex-direction:column;gap:2px;min-width:0}
body.cm-area .cm-sched-what strong{font-weight:600;color:var(--ios-label);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.cm-area .cm-sched-acts{grid-column:2;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px}
@media (max-width:639px){body.cm-area .cm-sched-row{grid-template-columns:minmax(0,1fr)}body.cm-area .cm-sched-acts{grid-column:1}}

/* Wątek: nagłówek z kolejnością, ramka „Rozwiązanie” pod pytaniem. */
body.cm-area .cm-thread-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
body.cm-area .cm-thread-head .cm-section-title{margin:0}
body.cm-area .cm-solution{margin:14px 0 2px;padding:12px 14px 6px;border-radius:16px;background:linear-gradient(180deg,rgba(48,209,88,.11),rgba(48,209,88,.035));box-shadow:inset 0 0 0 1px rgba(48,209,88,.38)}
[data-theme="light"] body.cm-area .cm-solution{background:linear-gradient(180deg,rgba(15,123,85,.08),rgba(15,123,85,.02));box-shadow:inset 0 0 0 1px rgba(15,123,85,.32)}
body.cm-area .cm-solution-kicker{display:flex;align-items:center;gap:6px;margin:0 0 8px;font-size:13px;line-height:18px;font-weight:700;letter-spacing:.01em;color:var(--cm-green)}
body.cm-area .cm-solution-kicker>svg{width:16px;height:16px}
body.cm-area .cm-solution-heart{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--ios-tint)}
body.cm-area .cm-solution-heart svg{width:13px;height:13px}
body.cm-area .cm-solution-who{display:flex;align-items:center;gap:8px;min-width:0;font-size:14px;line-height:20px}
body.cm-area .cm-solution-who .cm-avatar{width:24px;height:24px;font-size:9px}
body.cm-area .cm-solution-name{font-weight:600;color:var(--ios-label);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.cm-area .cm-solution-when{font-size:13px;color:var(--ios-label-2);white-space:nowrap}
body.cm-area .cm-solution-text{margin-top:6px;max-height:264px;overflow:hidden;font-size:15px;line-height:22px}
body.cm-area .cm-solution-text.is-cut{-webkit-mask-image:linear-gradient(#000 calc(100% - 56px),transparent);mask-image:linear-gradient(#000 calc(100% - 56px),transparent)}
body.cm-area .cm-solution .cm-pblock{margin:8px 0}
body.cm-area .cm-solution .cm-pblock-text{max-height:150px}
body.cm-area .cm-solution-go{display:inline-flex;align-items:center;gap:4px;min-height:40px;margin-left:-4px;padding:0 6px;border-radius:10px;background:none;color:var(--cm-green);font-size:14px;font-weight:600;cursor:pointer}
body.cm-area .cm-solution-go svg{width:16px;height:16px}
@media (hover:hover){body.cm-area .cm-solution-go:hover{background:rgba(48,209,88,.1)}}
body.cm-area .cm-solution-go:focus-visible{outline:2px solid var(--cm-green);outline-offset:1px}
/* Serce prowadzącego: złote serce na awatarze dającego i „Jan docenia” (bez punktów). */
body.cm-area .cm-heart-chip{display:inline-flex;align-items:center;gap:7px;margin-top:6px;padding:2px 10px 2px 2px;border-radius:999px;background:var(--ios-tint-soft);color:var(--ios-tint);font-size:12px;line-height:18px;font-weight:600}
body.cm-area .cm-heart-av{position:relative;display:inline-flex}
body.cm-area .cm-heart-av .cm-avatar{width:20px;height:20px;font-size:8px}
body.cm-area .cm-heart-ic{position:absolute;right:-5px;bottom:-4px;display:inline-flex;width:13px;height:13px;color:var(--ios-tint)}
body.cm-area .cm-heart-ic svg{width:13px;height:13px;filter:drop-shadow(0 0 1.5px rgba(0,0,0,.55))}
body.cm-area .cm-heart-slot:empty{display:none}
body.cm-area .cm-comment-tools .cm-heart-btn{display:inline-flex;align-items:center;justify-content:center;min-width:32px}
body.cm-area .cm-comment-tools .cm-heart-btn svg{width:16px;height:16px}
body.cm-area .cm-comment-tools .cm-heart-btn.is-on{color:var(--ios-tint)}
/* Odpowiedzi zwinięte po 2: przycisk w akcencie, strzałka obraca się po rozwinięciu. */
body.cm-area .cm-replies-toggle{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;min-height:32px;margin-left:-8px;padding:0 10px 0 8px;border-radius:999px;background:none;color:var(--ios-tint);font-size:14px;line-height:18px;font-weight:600;cursor:pointer}
body.cm-area .cm-replies-toggle svg{width:16px;height:16px;transition:transform .2s var(--cm-ease-out,ease)}
body.cm-area .cm-replies-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
@media (hover:hover){body.cm-area .cm-replies-toggle:hover{background:var(--ios-fill-2)}}
body.cm-area .cm-replies-toggle:focus-visible{outline:2px solid var(--ios-tint);outline-offset:1px}
@media (pointer:coarse){body.cm-area .cm-replies-toggle{min-height:44px}}
body.cm-area .cm-replies-more{display:flex;flex-direction:column;gap:12px}
body.cm-area .cm-replies-toggle[aria-expanded="true"]{order:1} /* po rozwinięciu „Zwiń” na końcu wątku */
/* Odpowiedzi pod najlepszą odpowiedzią bez zielonej ramki (ramka należy tylko do niej). */
body.cm-area .cm-comment.is-helpful .cm-replies .cm-comment:not(.is-helpful) .cm-comment-box{border-color:transparent}
body.cm-area .cm-replies-more[hidden]{display:none}
/* Nowe od ostatniej wizyty: złota linia przy treści i „Nowy”. */
body.cm-area .cm-comment.is-new>.cm-comment-bubble>.cm-comment-box{position:relative}
body.cm-area .cm-comment.is-new>.cm-comment-bubble>.cm-comment-box::before{content:"";position:absolute;left:-50px;top:2px;bottom:2px;width:3px;border-radius:3px;background:var(--ios-tint)}
body.cm-area .cm-new-tag{display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:999px;background:var(--ios-tint);color:var(--ios-on-tint);font-size:11px;line-height:18px;font-weight:700;letter-spacing:.03em}
body.cm-area .cm-newc-pill{top:auto;bottom:calc(92px + env(safe-area-inset-bottom))}
/* Telefon z polem komentarza: pigułka nad polem, nie na nim (audyt watek-4). Pole w spoczynku ma ok. 78 px i stoi na
   górnej krawędzi pływającego paska zakładek (--cm-tabbar-top). Gdy pole nie jest w spoczynku (pisanie, fokus, wpisany
   tekst, zdjęcie albo GIF), rośnie do ok. 160 px i więcej - pigułka by je zasłaniała, więc ją chowamy; wraca po wysłaniu
   albo wyczyszczeniu pola. */
@media (max-width:639px){
  body.cm-area:has(.cm-cdock) .cm-newc-pill{bottom:calc(var(--cm-tabbar-top,72px) + 78px + 12px)}
  body.cm-area.cm-typing .cm-newc-pill,
  body.cm-area:has(#cm-cdock :is(:focus,.cm-textarea:not(:placeholder-shown),.cm-thumbs:not(:empty),[id^="cm-cgif-"]:not(:empty))) .cm-newc-pill{display:none}
}
body.cm-area .cm-newc-arrow{width:16px;height:16px}
@media (min-width:640px){body.cm-area .cm-newc-pill{top:76px;bottom:auto}}
/* Odpowiedź pod konkretnym komentarzem. */
body.cm-area .cm-reply-form{margin-top:8px}
body.cm-area .cm-reply-to{display:flex;align-items:center;gap:6px;margin:0 0 6px;font-size:13px;line-height:18px;color:var(--ios-label-2)}
body.cm-area .cm-reply-to svg{width:14px;height:14px}
body.cm-area .cm-reply-to strong{font-weight:600;color:var(--ios-label)}
/* Pole komentarza na dole wątku; na telefonie przyklejone nad paskiem kart, w trakcie pisania do dołu ekranu,
   przy klawiaturze - tuż nad nią (JS: is-kb i --cm-dock-bottom z visualViewport). */
body.cm-area .cm-cdock{margin-top:6px;padding-top:12px;box-shadow:inset 0 .5px 0 var(--ios-sep)}
@media (max-width:639px){
  /* Dolna krawędź pola na górnej krawędzi paska zakładek (bez szczeliny, przez którą prześwitywały komentarze - brak2-15). */
  body.cm-area .cm-cdock{position:sticky;bottom:var(--cm-tabbar-top,calc(72px + env(safe-area-inset-bottom)));z-index:20;margin:6px -16px -18px;padding:8px 16px 10px;
    background:var(--ios-glass-strong);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);box-shadow:inset 0 .5px 0 var(--ios-sep)}
  body.cm-area.cm-typing .cm-cdock{bottom:0;padding-bottom:max(10px,env(safe-area-inset-bottom))}
  body.cm-area .cm-cdock.is-kb{position:fixed;left:0;right:0;bottom:var(--cm-dock-bottom,0px);z-index:60;margin:0;padding-bottom:8px}
  /* Arkusz emoji albo GIF otwarty z tego pola: pole komentarza stoi nad arkuszem, widać wstawianą treść (audyt watek-14).
     Arkusz ma stałą wysokość (emoji i GIF tak samo), pole jest przypięte tuż nad nim. Tylko gdy przycisk emoji albo GIF
     w polu ma aria-expanded="true" - arkusz otwarty z formularza odpowiedzi w wątku nie wyciąga pustego pola nad siebie. */
  body.cm-area:has(.cm-emoji-pop.is-sheet) .cm-cdock:has([aria-haspopup="dialog"][aria-expanded="true"]){position:fixed;left:0;right:0;bottom:min(62vh,440px);z-index:60;margin:0;padding-bottom:8px}
  body.cm-area .cm-cdock .cm-composer{gap:8px}
  body.cm-area .cm-cdock .cm-textarea{min-height:44px!important;max-height:38vh;padding:10px 16px;border-radius:22px;resize:none}
  body.cm-area .cm-cdock .cm-composer:has(.cm-textarea:placeholder-shown):not(:focus-within) .cm-composer-bar{display:none}
  body.cm-area .cm-cdock .cm-textarea:placeholder-shown:not(:focus){height:44px;overflow:hidden}
  /* Rząd narzędzi komentarza w jednej linii: „⋮” w prawym górnym rogu, serce prowadzącego w menu „⋮”. */
  body.cm-area .cm-comments .cm-comment-bubble{position:relative}
  body.cm-area .cm-comments .cm-comment-tools>button[aria-haspopup="menu"]:last-child{position:absolute;top:-10px;right:-10px;min-width:40px}
  body.cm-area .cm-comments .cm-comment-bubble>.cm-comment-box>.cm-row:first-child,body.cm-area .cm-comments .cm-comment-bubble>.cm-answer-label{padding-right:30px}
  body.cm-area .cm-comments .cm-comment-tools .cm-heart-slot{display:none}
}
/* „Odpowiedz cytując” przy zaznaczeniu. */
body.cm-area .cm-quote-btn{position:fixed;z-index:70;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px 0 12px;border-radius:999px;background:var(--ios-glass-strong);
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);box-shadow:inset 0 0 0 .5px var(--ios-glass-rim),var(--ios-glass-shadow);color:var(--ios-label);font-size:14px;line-height:18px;font-weight:600;cursor:pointer;animation:cm-sim-in .16s var(--cm-ease-out,ease) both}
body.cm-area .cm-quote-btn svg{width:16px;height:16px;color:var(--ios-tint)}
@media (pointer:coarse){body.cm-area .cm-quote-btn{height:44px}}
@media (prefers-reduced-motion:reduce){
  body.cm-area .cm-c-similar.is-in,body.cm-area .cm-quote-btn{animation:none}
  body.cm-area .cm-replies-toggle svg,body.cm-area .cm-pblock-btn{transition:none}
}

/* ---------- szybkość odczuwalna i puste stany (Fala 1.3 i 1.4) ---------- */
/* Szkielety w kształcie treści: niewidoczne przez pierwsze 150 ms (szybka odpowiedź nie miga), potem łagodne wejście. */
.cm-skel{display:flex;flex-direction:column;gap:12px;animation:cm-skel-in .24s ease .15s both}
@keyframes cm-skel-in{from{opacity:0}to{opacity:1}}
.cm-skel i,.cm-sk-av,.cm-sk-date,.cm-sk-cover{display:block;border-radius:6px;background:linear-gradient(90deg,var(--ios-fill-2,var(--studio-soft)) 0%,var(--ios-fill,var(--studio-surface)) 50%,var(--ios-fill-2,var(--studio-soft)) 100%);background-size:200% 100%;animation:cm-shimmer 1.4s linear infinite}
.cm-skel i{height:12px;margin-top:9px;font-style:normal}
.cm-sk-card{padding:16px;border-radius:var(--cm-radius,16px);background:var(--ios-surface,var(--studio-surface));box-shadow:var(--ios-elev,none)}
.cm-sk-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.cm-sk-av{flex:0 0 auto;width:40px;height:40px;border-radius:999px}
.cm-sk-av.is-sm{width:32px;height:32px}
.cm-sk-lines{flex:1;min-width:0}
.cm-sk-lines i:first-child{margin-top:0}
.cm-skel i.cm-sk-title{height:18px;width:72%;margin-top:14px;margin-bottom:4px}
.cm-sk-acts{display:flex;gap:18px;margin-top:16px}
.cm-sk-acts i{width:64px;height:14px;margin-top:0}
.cm-sk-cover{height:160px;border-radius:12px;margin-bottom:6px}
.cm-sk-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--ios-surface,var(--studio-surface))}
.cm-sk-row.is-comment{align-items:flex-start;background:transparent;padding:8px 0}
.cm-sk-date{flex:0 0 auto;width:48px;height:52px;border-radius:12px}
.cm-skel.is-person,.cm-skel.is-note{gap:8px}
.cm-member-grid>.cm-skel{grid-column:1/-1}
/* Pusty stan z własną ikoną i jedną akcją. */
.cm-empty.has-ico strong::before{display:none!important}
.cm-empty-ico{display:flex;align-items:center;justify-content:center;width:56px;height:56px;margin:0 auto 14px;border-radius:999px;background:var(--ios-tint-soft,var(--cm-gold-soft));color:var(--ios-tint,var(--studio-gold))}
.cm-empty-ico svg{width:26px;height:26px}
.cm-empty-text{display:block;max-width:420px;margin:0 auto}
.cm-empty-acts{display:flex;justify-content:center;margin-top:18px}
.cm-empty-act{display:inline-flex;align-items:center;gap:8px}
.cm-empty-act svg{width:16px;height:16px}
.cm-empty{animation:cm-empty-in .32s var(--ios-ease,ease) both}
@keyframes cm-empty-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:639px){
  .cm-feed>.cm-empty,#cm-main>.cm-empty,.cm-main>.cm-empty{min-height:46vh;display:flex;flex-direction:column;justify-content:center}
}
/* Przycisk „Więcej” w trakcie doczytywania (także automatycznego). */
#cm-more .cm-btn[disabled],#cm-mmore .cm-btn[disabled],#cm-art-more .cm-btn[disabled]{opacity:.6;cursor:progress}
@media (prefers-reduced-motion:reduce){
  .cm-skel{animation:none}
  .cm-skel i,.cm-sk-av,.cm-sk-date,.cm-sk-cover{animation:none}
  .cm-empty{animation:none}
}

/* ---------- panel: filtr słów (AutoMod) ---------- */
.cm-am-modes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.cm-am-mode{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:18px;background:var(--ios-surface,var(--studio-surface));box-shadow:var(--ios-elev,none)}
.cm-am-mode strong{display:block;color:var(--studio-ink);font-size:15px}
.cm-am-mode small{display:block;color:var(--studio-muted);font-size:13px;line-height:18px;margin-top:2px}
.cm-am-ic{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px}
.cm-am-ic svg{width:18px;height:18px}
.cm-am-ic.is-amber{background:var(--cm-gold-soft);color:var(--cm-gold)}
.cm-am-ic.is-red{background:rgba(248,113,113,.14);color:var(--cm-red)}
.cm-am-open{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding:12px 16px;border-radius:14px;background:var(--cm-gold-soft);color:var(--studio-ink);font-weight:600;font-size:14px;text-decoration:none}
.cm-am-open svg{width:16px;height:16px;flex:0 0 auto}
.cm-am-open span{flex:1}
.cm-am-add{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.cm-am-add .cm-input{flex:1 1 220px;min-width:0}
.cm-am-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.cm-am-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--ios-sep,var(--studio-line))}
.cm-am-row:last-child{border-bottom:0}
.cm-am-phrase{flex:1;min-width:0;overflow-wrap:anywhere;font-weight:600;color:var(--studio-ink)}
.cm-am-del svg{width:16px;height:16px}
.cm-am-res.is-red{color:var(--cm-red)}.cm-am-res.is-amber{color:var(--cm-gold)}.cm-am-res.is-green{color:var(--cm-green)}
@media (max-width:639px){
  .cm-am-modes{grid-template-columns:1fr}
  .cm-am-add .cm-btn-primary{flex:1 1 100%;justify-content:center}
}

/* ---------- przestrzeń: pasek „O przestrzeni” (Przestrzenie 2.0) ---------- */
.cm-space-about{margin-bottom:12px;padding:12px 14px;border-radius:16px;background:var(--ios-surface,var(--studio-surface));box-shadow:var(--ios-elev,none);animation:cm-empty-in .28s var(--ios-ease,ease) both}
.cm-sa-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cm-sa-faces{display:inline-flex;flex:0 0 auto}
.cm-sa-faces>*{margin-left:-2px;box-shadow:0 0 0 2px var(--ios-surface,var(--studio-surface));border-radius:999px}
.cm-sa-faces>*:first-child{margin-left:0}
.cm-sa-stats{flex:1 1 220px;min-width:0;font-size:14px;line-height:20px;color:var(--studio-muted)}
.cm-sa-stats strong{color:var(--studio-ink);font-weight:600}
.cm-sa-dot{margin:0 6px}
.cm-sa-rules-btn{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 12px;border-radius:999px;background:var(--ios-fill-2,var(--studio-soft));color:var(--studio-ink);font-size:13px;font-weight:600;cursor:pointer}
.cm-sa-rules-btn svg{width:15px;height:15px}
.cm-sa-rules-btn svg:last-child{transition:transform .2s var(--ios-ease,ease)}
.cm-sa-rules-btn.is-open svg:last-child{transform:rotate(180deg)}
.cm-sa-rules{margin-top:10px;padding-top:10px;border-top:1px solid var(--ios-sep,var(--studio-line));font-size:14px;line-height:21px;color:var(--studio-ink)}
@media (prefers-reduced-motion:reduce){.cm-space-about{animation:none}.cm-sa-rules-btn svg:last-child{transition:none}}

/* ---------- ranking: własne miejsce przyklejone u dołu (Grywalizacja 2.0) ---------- */
/* Przyklejony wiersz leży nad listą: ramka i wiersz nieprzezroczyste (złoty odcień zmieszany z tłem karty), inaczej lista
   prześwituje przez „To Ty” (audyt ludzie-1). Wiersz musi wygrać z body.cm-area .cm-rank.is-me (0,3,1, szare 16%). */
.cm-rank-me{position:sticky;bottom:12px;z-index:5;margin-top:10px;padding:2px;border-radius:16px;background:var(--ios-surface,var(--studio-surface));background:color-mix(in srgb,var(--cm-gold) 22%,var(--ios-surface,var(--studio-surface)));box-shadow:0 12px 28px -14px rgba(0,0,0,.55)}
body.cm-area .cm-rank-me .cm-rank.is-me{border-radius:14px;background:var(--ios-surface,var(--studio-surface));background:color-mix(in srgb,var(--cm-gold) 8%,var(--ios-surface,var(--studio-surface)))}
@media (max-width:639px){.cm-rank-me{bottom:calc(96px + env(safe-area-inset-bottom))}}

/* ---------- artykuł: tryb czytania (Fala 3.4) ---------- */
.cm-article.is-reading .cm-article-body{max-width:680px;font-size:18px;line-height:1.7}
.cm-article.is-reading .cm-article-body h2{font-size:24px;line-height:1.3;margin:1.6em 0 .5em;scroll-margin-top:88px}
.cm-article.is-reading .cm-article-body h3{font-size:20px;line-height:1.35;margin:1.4em 0 .4em;scroll-margin-top:88px}
.cm-article.is-reading .cm-article-body p{margin:0 0 1em}
.cm-toc{max-width:680px;margin:4px 0 6px;padding:12px 16px;border-radius:16px;background:var(--ios-fill-2,var(--studio-soft))}
.cm-toc summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;font-size:14px;font-weight:700;color:var(--studio-ink)}
.cm-toc summary::-webkit-details-marker{display:none}
.cm-toc summary svg{width:16px;height:16px}
/* Spis treści: śródtytuły bez pustego wcięcia, podtytuły wcięte bez kółek (audyt artykuly-11). */
.cm-toc ol{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:15px;line-height:1.4}
.cm-toc li.is-h3{margin-left:16px;list-style:none;font-size:14px}
.cm-toc a{color:var(--studio-ink);text-decoration:none}
.cm-toc a:hover{color:var(--cm-gold);text-decoration:underline}
.cm-read-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none}
.cm-read-progress span{display:block;height:100%;background:var(--cm-gold);transform-origin:0 50%;transform:scaleX(0);transition:transform .08s linear}
.cm-read-progress.is-done span{opacity:.6}
@media (max-width:639px){
  .cm-article.is-reading .cm-article-body{font-size:17px}
  .cm-article.is-reading .cm-article-body h2{font-size:21px}
  .cm-read-progress{top:env(safe-area-inset-top)}
}
@media (prefers-reduced-motion:reduce){.cm-read-progress span{transition:none}}

/* ---------- katalog: „Nowe w tym tygodniu” i „Wspólne z Tobą” (Katalog 2.0) ---------- */
.cm-newbies{margin-bottom:14px}
.cm-nb-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.cm-nb-head h2{margin:0;font-size:17px;font-weight:700;color:var(--studio-ink)}
.cm-nb-row{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.cm-nb-card{flex:0 0 156px;max-width:156px;min-width:0;box-sizing:border-box;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 10px;border-radius:18px;background:var(--ios-surface,var(--studio-surface));box-shadow:var(--ios-elev,none);text-align:center}
.cm-nb-card a{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;width:100%;color:inherit;text-decoration:none}
.cm-nb-card strong{font-size:14px;color:var(--studio-ink);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-nb-card small{font-size:12px;line-height:16px;color:var(--studio-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cm-nb-wave{display:inline-flex;align-items:center;gap:6px}
/* „Przywitaj się” i „Przywitano” na dole karty - jedna linia w całym rzędzie niezależnie od długości opisu (audyt ludzie-14). */
.cm-nb-card>:is(.cm-nb-wave,.cm-nb-done){margin-top:auto}
.cm-nb-wave svg,.cm-nb-done svg{width:15px;height:15px}
.cm-nb-done{display:inline-flex;align-items:center;gap:6px;min-height:32px;font-size:13px;font-weight:600;color:var(--cm-green)}
.cm-member-common{display:flex;align-items:flex-start;gap:6px;margin:0;font-size:13px;line-height:18px;color:var(--cm-gold)}
.cm-member-common svg{flex:0 0 auto;width:14px;height:14px;margin-top:2px}

/* ---------- ruch i dotyk na telefonie: „+”, chowanie paska, przeciągnij-odśwież (Fala 1.7) ---------- */
.cm-fab,.cm-ptr{display:none}
@media (max-width:639px){
  body.cm-area .cm-fab{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(98px + env(safe-area-inset-bottom,0px));z-index:44;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:999px;background:var(--cm-gold-grad,var(--cm-gold));color:#0a0f14;box-shadow:0 14px 30px -10px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.12) inset;transition:transform .28s var(--ios-ease,ease)}
  body.cm-area .cm-fab svg{width:26px;height:26px}
  body.cm-area .cm-fab:active{transform:scale(.92)}
  body.cm-area.cm-typing .cm-fab,body.cm-area:has(#cm-modal) .cm-fab{display:none}
  body.cm-area .cm-bottom{transition:transform .3s var(--ios-ease,ease)}
  body.cm-area.cm-bar-hidden .cm-bottom{transform:translateY(calc(100% + 40px))}
  body.cm-area.cm-bar-hidden .cm-fab{transform:translateY(90px)}
  /* visibility, nie opacity: animacja wejścia pigułki trzyma opacity (fill-mode) i nadpisałaby 0. */
  body.cm-area.cm-bar-hidden .cm-start-pill{visibility:hidden;pointer-events:none}
  body.cm-area .cm-ptr{position:fixed;top:calc(16px + env(safe-area-inset-top,0px));left:50%;z-index:46;display:flex;align-items:center;justify-content:center;width:38px;height:38px;margin-top:-56px;border-radius:999px;background:var(--ios-surface,var(--studio-surface));box-shadow:0 8px 20px -8px rgba(0,0,0,.55);color:var(--studio-muted);opacity:0;transform:translate(-50%,0);pointer-events:none}
  body.cm-area .cm-ptr svg{width:20px;height:20px}
  body.cm-area .cm-ptr.is-pulling{opacity:1}
  body.cm-area .cm-ptr.is-armed{color:var(--cm-gold)}
  body.cm-area .cm-ptr.is-loading{opacity:1;transform:translate(-50%,72px);color:var(--cm-gold);animation:cm-ptr-spin .7s linear infinite}
}
@keyframes cm-ptr-spin{from{rotate:0deg}to{rotate:360deg}}
@media (prefers-reduced-motion:reduce){
  body.cm-area .cm-bottom,body.cm-area .cm-fab{transition:none}
  body.cm-area .cm-ptr.is-loading{animation:none}
}

/* ---------- dostępność: kontrast drobnych podpisów (audyt axe, Fala 3.5) ---------- */
/* Podpis „max N dziennie” w „Za co są punkty”: bez przyciemnienia (opacity .85 dawało 3,9:1 w jasnym motywie). */
body.cm-area .cm-earn-chip small{opacity:1;color:var(--ios-label-2)}
/* Aktywna karta dolnego paska w jasnym motywie: złoto ciemniejsze o ton (10 px na szarym tle, 4,5:1). */
[data-theme="light"] body.cm-area .cm-bottom-item.is-active .cm-nav-label{color:#8A5800}
/* Cel dotyku min. 24 px (WCAG 2.2, 2.5.8): nazwisko w nagłówku wpisu i komentarza na ekranach dotykowych. */
@media (pointer:coarse){body.cm-area .cm-person-name{min-height:24px;display:inline-flex;align-items:center}}
.cm-earn-list:focus-visible{outline:2px solid var(--cm-gold);outline-offset:2px;border-radius:12px}

/* ---------- reakcje 2.0 ---------- */
/* Fala 1.5 (decyzja Jana 12.10, wzór: LinkedIn i Circle 09.2026): sześć reakcji jako kolorowe kółka ze znakiem (SVG z
   C.reactIcon), wybrana reakcja w kolorze rodzaju na przycisku, pasek wyboru z podpisem nad wskazaną ikoną, „pop” ikony
   po wyborze (konfetti tylko przy „Brawo”), przewijany licznik i arkusz rozbicia z zakładkami. Kolor reakcji to celowy
   wyjątek od palety marki (jak u LinkedIn): znaczenie niesie też kształt znaku i podpis. Ruch do 300 ms, przy
   prefers-reduced-motion bez ruchu. Selektory z html body.cm-area - wcześniejsze warstwy (emoji, cm-act svg) ustępują. */
[data-rx="like"]{--rx-bg:linear-gradient(155deg,#5BB0FF,#1A6FE0);--rx-fg:#fff;--rx-ink:#6CB4FF}
[data-rx="clap"]{--rx-bg:linear-gradient(155deg,#FF9A5C,#E4480F);--rx-fg:#fff;--rx-ink:#FF9B66}
[data-rx="support"]{--rx-bg:linear-gradient(155deg,#FF80B0,#D7286A);--rx-fg:#fff;--rx-ink:#FF85B3}
[data-rx="insight"]{--rx-bg:linear-gradient(155deg,#17A898,#0A6A62);--rx-fg:#FFE14D;--rx-ink:#36D2BE}
[data-rx="thanks"]{--rx-bg:linear-gradient(155deg,#AE90FF,#6B3EDD);--rx-fg:#fff;--rx-ink:#BCA4FF}
[data-rx="haha"]{--rx-bg:linear-gradient(155deg,#FFD65C,#F2A20C);--rx-fg:#3B2200;--rx-ink:#FFC93D}
/* Jasny motyw: podpisy ciemniejsze o ton (4,5:1 na białym). */
[data-theme="light"] [data-rx="like"]{--rx-ink:#1766D6}
[data-theme="light"] [data-rx="clap"]{--rx-ink:#C2410C}
[data-theme="light"] [data-rx="support"]{--rx-ink:#BE1F5C}
[data-theme="light"] [data-rx="insight"]{--rx-ink:#0A766B}
[data-theme="light"] [data-rx="thanks"]{--rx-ink:#6A3DDB}
[data-theme="light"] [data-rx="haha"]{--rx-ink:#9A5800}

/* Ikona: kółko z gradientem, delikatny połysk u góry, znak ok. 64% średnicy (przy „Haha” kółko jest twarzą). */
html body.cm-area .cm-rx[data-rx]{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:20px;height:20px;border-radius:50%;
  background:var(--rx-bg);color:var(--rx-fg);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 .5px rgba(0,0,0,.12);overflow:visible;vertical-align:middle}
html body.cm-area .cm-rx[data-rx] svg{display:block;width:64%;height:64%;margin:0;color:inherit;fill:currentColor;stroke:none;overflow:visible}
html body.cm-area .cm-rx[data-rx="haha"] svg{width:100%;height:100%}
html body.cm-area .cm-rx.cm-rx-xs{width:16px;height:16px}
html body.cm-area .cm-rx.cm-rx-sm{width:20px;height:20px}
html body.cm-area .cm-rx.cm-rx-lg{width:32px;height:32px}
html body.cm-area .cm-rx.cm-rx-xl{width:36px;height:36px;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 2px 6px rgba(0,0,0,.28)}
[data-theme="light"] body.cm-area .cm-rx.cm-rx-xl{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 6px rgba(16,24,40,.18)}

/* Stos najczęstszych reakcji przy liczniku (zachodzące kółka z obwódką w kolorze tła, pierwsze na wierzchu). */
html body.cm-area .cm-rx-stack{display:inline-flex;align-items:center;flex:none;overflow:visible}
html body.cm-area .cm-rx-stack .cm-rx{box-shadow:0 0 0 1.5px var(--ios-surface,var(--studio-surface))}
html body.cm-area .cm-rx-stack .cm-rx+.cm-rx{margin-left:-4px}
html body.cm-area .cm-rx-stack .cm-rx:nth-child(1){z-index:3}
html body.cm-area .cm-rx-stack .cm-rx:nth-child(2){z-index:2}
html body.cm-area .cm-rx-stack .cm-rx:nth-child(3){z-index:1}
html body.cm-area .cm-stats-likes .cm-rx-stack,html body.cm-area .cm-stats-likes .cm-rx{overflow:visible;flex:none}
html body.cm-area .cm-convo-emoji{margin-right:3px}

/* Przycisk z wybraną reakcją: ikona zamiast obrysu, podpis w kolorze rodzaju. */
html body.cm-area .cm-act.is-on[data-rx],html body.cm-area .cm-comment-tools .cm-creact>button.is-on[data-rx]{color:var(--rx-ink)}
html body.cm-area .cm-act>.cm-rx{margin:0 1px}
/* Licznik reakcji pod komentarzem: stos i liczba, osobny przycisk z rozbiciem (jak w LinkedIn). */
html body.cm-area .cm-comment-tools .cm-creact>.cm-creact-n{display:inline-flex;align-items:center;gap:5px;padding:0 6px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ios-label-2)}
@media (hover:hover) and (pointer:fine){html body.cm-area .cm-comment-tools .cm-creact>.cm-creact-n:hover{color:var(--ios-label)}}

/* Pasek wyboru: kapsuła z sześcioma ikonami, wskazana rośnie i pokazuje podpis nad sobą (najechanie, fokus, palec). */
html body.cm-area .cm-react-pop{gap:2px;padding:5px;border-radius:999px}
html body.cm-area .cm-react-pop button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:999px;
  background:none;box-shadow:none;font-family:var(--ios-font);font-size:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
html body.cm-area .cm-react-pop button .cm-rx{transition:transform .16s cubic-bezier(.34,1.56,.64,1)}
html body.cm-area .cm-react-pop button:is(:hover,:focus-visible,.is-hover) .cm-rx{transform:translateY(-5px) scale(1.22)}
html body.cm-area .cm-react-pop button:focus-visible{outline:none}
html body.cm-area .cm-react-pop button:focus-visible .cm-rx{outline:2px solid var(--cm-gold);outline-offset:2px}
html body.cm-area .cm-react-pop button[aria-checked="true"]{background:none;box-shadow:none}
html body.cm-area .cm-react-pop button[aria-checked="true"]::after{content:"";position:absolute;left:50%;bottom:1px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--ios-label-2)}
html body.cm-area .cm-rx-tip{position:absolute;left:50%;bottom:calc(100% + 8px);padding:3px 8px;border-radius:999px;background:rgba(10,13,22,.92);color:#fff;font-family:var(--ios-font);font-size:12px;line-height:16px;font-weight:600;
  white-space:nowrap;letter-spacing:0;pointer-events:none;opacity:0;transform:translate(-50%,4px);transition:opacity .12s linear,transform .16s ease-out}
[data-theme="light"] body.cm-area .cm-rx-tip{background:rgba(28,30,38,.94)}
html body.cm-area .cm-react-pop button:is(:hover,:focus-visible,.is-hover) .cm-rx-tip{opacity:1;transform:translate(-50%,0)}
@media (pointer:coarse){
  html body.cm-area .cm-react-pop{gap:0;padding:4px}
  html body.cm-area .cm-react-pop button{width:46px;height:48px}
  html body.cm-area .cm-react-pop .cm-rx.cm-rx-xl{width:38px;height:38px}
  html body.cm-area .cm-react-pop button.is-hover .cm-rx{transform:translateY(-10px) scale(1.3)}
  html body.cm-area .cm-rx-tip{bottom:calc(100% + 16px)} /* nad ikoną powiększoną pod palcem */
}
/* Na telefonie pasek stoi przy krawędzi ekranu: podpis skrajnej ikony wyrównany do niej od środka paska, nie ucięty. */
@media (max-width:639px){
  html body.cm-area .cm-react-pop button:first-child .cm-rx-tip{left:0;transform:translate(0,4px)}
  html body.cm-area .cm-react-pop button:last-child .cm-rx-tip{left:auto;right:0;transform:translate(0,4px)}
  html body.cm-area .cm-react-pop button:is(:first-child,:last-child):is(:hover,:focus-visible,.is-hover) .cm-rx-tip{transform:none}
}
/* Pasek dopasowany do wąskiego ekranu (6 x 46 px + odstępy mieszczą się od 300 px). */
@media (max-width:340px){html body.cm-area .cm-react-pop button{width:42px}html body.cm-area .cm-react-pop .cm-rx.cm-rx-xl{width:34px;height:34px}}

/* Przewijany licznik: stara liczba wyjeżdża, nowa wjeżdża (w górę, gdy przybyło; w dół, gdy ubyło), obie w jednej komórce. */
html body.cm-area .cm-roll{display:inline-grid;overflow:hidden;vertical-align:bottom}
html body.cm-area .cm-roll>span{grid-area:1/1}

@media (prefers-reduced-motion:no-preference){
  /* Wejście paska: krótka sprężyna z punktu przy przycisku, ikony jedna po drugiej - razem poniżej 300 ms. */
  html body.cm-area .cm-react-pop{animation:cm-rx-in .22s cubic-bezier(.34,1.4,.64,1)}
  html body.cm-area .cm-react-pop button{animation:cm-rx-item .2s cubic-bezier(.34,1.56,.64,1) both}
  html body.cm-area .cm-react-pop button:nth-child(2){animation-delay:.015s}
  html body.cm-area .cm-react-pop button:nth-child(3){animation-delay:.03s}
  html body.cm-area .cm-react-pop button:nth-child(4){animation-delay:.045s}
  html body.cm-area .cm-react-pop button:nth-child(5){animation-delay:.06s}
  html body.cm-area .cm-react-pop button:nth-child(6){animation-delay:.075s}
  /* Wybór: skok 1 -> 1,28 -> 1 (260 ms); „Brawo” dodatkowo 6 cząstek konfetti (280 ms). */
  html body.cm-area .cm-rx.is-pop{animation:cm-rx-pop .26s cubic-bezier(.34,1.56,.64,1)}
  html body.cm-area .cm-roll.is-up>.cm-roll-out{animation:cm-roll-up-out .24s cubic-bezier(.2,.8,.2,1) forwards}
  html body.cm-area .cm-roll.is-up>.cm-roll-in{animation:cm-roll-up-in .24s cubic-bezier(.2,.8,.2,1) both}
  html body.cm-area .cm-roll.is-down>.cm-roll-out{animation:cm-roll-down-out .24s cubic-bezier(.2,.8,.2,1) forwards}
  html body.cm-area .cm-roll.is-down>.cm-roll-in{animation:cm-roll-down-in .24s cubic-bezier(.2,.8,.2,1) both}
}
@keyframes cm-rx-in{from{opacity:0;transform:translateY(6px) scale(.7)}to{opacity:1;transform:none}}
@keyframes cm-rx-item{from{opacity:0;transform:translateY(6px) scale(.5)}}
@keyframes cm-rx-pop{0%{transform:scale(1)}45%{transform:scale(1.28)}100%{transform:scale(1)}}
@keyframes cm-roll-up-out{to{transform:translateY(-100%);opacity:0}}
@keyframes cm-roll-up-in{from{transform:translateY(100%);opacity:0}}
@keyframes cm-roll-down-out{to{transform:translateY(100%);opacity:0}}
@keyframes cm-roll-down-in{from{transform:translateY(-100%);opacity:0}}
html body.cm-area .cm-rx-burst{position:absolute;inset:0;pointer-events:none}
html body.cm-area .cm-rx-burst i{position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:var(--c);opacity:0;
  animation:cm-rx-burst .28s cubic-bezier(.2,.8,.2,1) forwards}
html body.cm-area .cm-rx-burst i:nth-child(1){--a:0deg;--c:#FFD23F}
html body.cm-area .cm-rx-burst i:nth-child(2){--a:60deg;--c:#FF7A45}
html body.cm-area .cm-rx-burst i:nth-child(3){--a:120deg;--c:#FF5C9A}
html body.cm-area .cm-rx-burst i:nth-child(4){--a:180deg;--c:#4AA3FF}
html body.cm-area .cm-rx-burst i:nth-child(5){--a:240deg;--c:#2FD3BE}
html body.cm-area .cm-rx-burst i:nth-child(6){--a:300deg;--c:#A98BFF}
@keyframes cm-rx-burst{0%{opacity:1;transform:rotate(var(--a)) translateY(-6px) scale(1)}100%{opacity:0;transform:rotate(var(--a)) translateY(-17px) scale(.4)}}
@media (prefers-reduced-motion:reduce){
  html body.cm-area .cm-react-pop,html body.cm-area .cm-react-pop button,html body.cm-area .cm-react-pop button .cm-rx,html body.cm-area .cm-rx-tip{animation:none;transition:none}
  html body.cm-area .cm-react-pop button:is(:hover,:focus-visible,.is-hover) .cm-rx{transform:none}
  html body.cm-area .cm-rx-burst{display:none}
}

/* Arkusz rozbicia: zakładki stoją, przewija się lista osób (plakietka reakcji w rogu awatara, cały wiersz = profil). */
html body.cm-area .cm-dialog.is-reactions{max-width:440px;display:flex;flex-direction:column;overflow:hidden;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
html body.cm-area .cm-dialog.is-reactions>.cm-dialog-head{margin-bottom:4px}
html body.cm-area .cm-dialog.is-reactions>#cm-modal-body,html body.cm-area .cm-rx-sheet{display:flex;flex-direction:column;flex:1;min-height:0}
html body.cm-area .cm-rx-tabs{display:flex;gap:2px;flex:none;margin:0 -18px;padding:0 12px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;border-bottom:.5px solid var(--ios-sep)}
html body.cm-area .cm-rx-tabs::-webkit-scrollbar{display:none}
/* Wszystkie rodzaje reakcji z liczbami to ok. 530 px zakładek: na komputerze szersze okno, na telefonie wygaszona krawędź
   (widać, że pasek jest przewijany) i miejsce za ostatnią zakładką (audyt watek-11). */
@media (min-width:640px){html body.cm-area .cm-dialog.is-reactions{max-width:560px}}
@media (max-width:639px){html body.cm-area .cm-rx-tabs{-webkit-mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 28px),transparent)}
  html body.cm-area .cm-rx-tabs::after{content:"";flex:0 0 16px}}
html body.cm-area .cm-rx-tab{display:inline-flex;align-items:center;gap:6px;flex:none;min-height:44px;padding:0 10px;border-radius:0;background:none;color:var(--ios-label-2);
  font-size:14px;line-height:18px;font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer;box-shadow:inset 0 -2px 0 transparent;transition:color .15s,box-shadow .15s}
html body.cm-area .cm-rx-tab[aria-selected="true"]{color:var(--ios-label);box-shadow:inset 0 -2px 0 var(--rx-ink,var(--ios-tint))}
html body.cm-area .cm-rx-tab[aria-selected="true"]:not([data-rx]){box-shadow:inset 0 -2px 0 var(--ios-tint)}
html body.cm-area .cm-rx-tab:focus-visible{outline:2px solid var(--cm-gold);outline-offset:-4px;border-radius:10px}
@media (hover:hover) and (pointer:fine){html body.cm-area .cm-rx-tab:not([aria-selected="true"]):hover{color:var(--ios-label)}}
html body.cm-area .cm-rx-people{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:0 -10px;padding:6px 4px 2px}
html body.cm-area .cm-rx-people[aria-busy="true"]{opacity:.55}
html body.cm-area .cm-rx-who{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:6px;border-radius:14px;background:none;color:inherit;text-align:left;cursor:pointer}
html body.cm-area div.cm-rx-who{cursor:default}
@media (hover:hover) and (pointer:fine){html body.cm-area button.cm-rx-who:hover{background:var(--ios-fill-2)}}
html body.cm-area button.cm-rx-who:active{background:var(--ios-fill)}
html body.cm-area .cm-rx-who:focus-visible{outline:2px solid var(--cm-gold);outline-offset:-2px}
html body.cm-area .cm-rx-av{position:relative;display:inline-flex;flex:none}
html body.cm-area .cm-rx-av>.cm-rx{position:absolute;right:-4px;bottom:-3px;width:18px;height:18px;box-shadow:0 0 0 2px var(--ios-elev,var(--studio-surface))}
html body.cm-area .cm-rx-who-text{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
html body.cm-area .cm-rx-who-name{display:flex;align-items:center;gap:6px;min-width:0;font-size:15px;line-height:20px;font-weight:600;color:var(--ios-label)}
html body.cm-area .cm-rx-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
html body.cm-area .cm-rx-who-meta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;line-height:18px;color:var(--ios-label-2)}
html body.cm-area .cm-rx-people .cm-empty{padding:28px 12px}
/* ---------- grywalizacja 2.0: zespół poza rankingiem, wyzwanie miesiąca ---------- */
/* Zespół oglądający ranking: jedno zdanie zamiast wiersza „To Ty” (bez kreski i 0 pkt, bez przyklejania). */
.cm-rank-staff{display:flex;align-items:center;gap:8px;margin:10px 4px 0;font-size:13px;line-height:18px;color:var(--ios-label-2,var(--studio-muted))}
.cm-rank-staff svg{flex:0 0 auto;width:16px;height:16px;color:var(--ios-tint,var(--cm-gold))}
/* Karta wyzwania: płasko jak reszta rankingu, złoto tylko jako akcent (ikona, wynik, pasek); ukończone = złota obwódka. */
.cm-ch{position:relative;display:flex;flex-direction:column;gap:0;margin-bottom:12px;padding:16px;min-width:0}
.cm-ch.is-done,body.cm-area .cm-ch.is-done{box-shadow:inset 0 0 0 1.5px var(--ios-tint,var(--cm-gold))}
.cm-ch-head{display:flex;align-items:center;gap:10px;min-width:0}
.cm-ch-ico{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--ios-tint-soft,var(--cm-gold-soft));color:var(--ios-tint,var(--cm-gold))}
.cm-ch-ico svg{width:18px;height:18px}
.cm-ch-kicker{flex:1;min-width:0;font-size:13px;line-height:18px;font-weight:600;color:var(--ios-label-2,var(--studio-muted));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-ch-days{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;background:var(--ios-fill-2,var(--studio-soft));font-size:12px;line-height:18px;font-weight:600;color:var(--ios-label,var(--studio-ink));font-variant-numeric:tabular-nums;white-space:nowrap}
.cm-ch-days svg{width:13px;height:13px;color:var(--ios-label-2,var(--studio-muted))}
/* Telefon: krótszy nagłówek („Wyzwanie · październik”), żeby obok licznika dni nie ucinał się wielokropkiem. */
.cm-ch-k-short{display:none}
@media (max-width:479px){.cm-ch-k-long{display:none}.cm-ch-k-short{display:inline}}
.cm-ch-title{margin:12px 0 0;font-size:20px;line-height:25px;font-weight:700;letter-spacing:var(--ios-trk-title,0);color:var(--ios-label,var(--studio-ink));overflow-wrap:anywhere}
.cm-ch-desc{margin:4px 0 0;font-size:15px;line-height:20px;color:var(--ios-label-2,var(--studio-muted));overflow-wrap:anywhere}
.cm-ch-goal{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:14px}
.cm-ch-score{display:flex;align-items:baseline;gap:6px;min-width:0}
.cm-ch-score strong{font-size:28px;line-height:32px;font-weight:700;color:var(--ios-tint,var(--cm-gold));font-variant-numeric:tabular-nums}
.cm-ch-score span{font-size:15px;line-height:20px;color:var(--ios-label-2,var(--studio-muted));white-space:nowrap}
.cm-ch-missing{font-size:13px;line-height:18px;color:var(--ios-label-2,var(--studio-muted));white-space:nowrap;padding-bottom:4px}
.cm-ch-done{display:inline-flex;align-items:center;gap:5px;margin-bottom:3px;padding:4px 11px 4px 9px;border-radius:999px;background:var(--ios-tint,var(--cm-gold));color:var(--ios-on-tint,#171100);font-size:13px;line-height:18px;font-weight:700;white-space:nowrap}
.cm-ch-done svg{width:14px;height:14px;stroke-width:3}
body.cm-area .cm-ch .cm-ch-bar{height:8px;margin-top:8px;background:var(--ios-fill)}
body.cm-area .cm-ch .cm-ch-bar>div{background:var(--ios-tint);transition:width .6s var(--ios-ease,ease)}
.cm-ch-win{margin:8px 0 0;font-size:13px;line-height:18px;color:var(--ios-label,var(--studio-ink))}
.cm-ch-rules{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px}
.cm-ch-rules-label{font-size:13px;line-height:18px;color:var(--ios-label-2,var(--studio-muted))}
.cm-ch-me{margin:12px 0 0;font-size:13px;line-height:18px;color:var(--ios-label-2,var(--studio-muted))}
.cm-ch-me strong{color:var(--ios-label,var(--studio-ink));font-variant-numeric:tabular-nums}
.cm-ch .cm-ch-step{margin-top:12px}
.cm-ch-list{margin-top:12px;border-top:.5px solid var(--ios-sep,var(--studio-line))}
.cm-ch-list .cm-rank{gap:10px;padding:8px 0;border-bottom:0;border-radius:0}
.cm-ch-list .cm-rank+.cm-rank{border-top:.5px solid var(--ios-sep,var(--studio-line))}
.cm-ch-list .cm-rank[hidden]{display:none}
.cm-ch-list .cm-rank.is-me{margin:0 -8px;padding-inline:8px;border-radius:12px}
/* Medale 1-3 i zwykłe numery tej samej szerokości - awatary w jednej kolumnie. */
.cm-ch .cm-rank-no{flex:0 0 24px;width:24px;min-width:24px}
.cm-ch .cm-rank-no.is-top{height:24px}
.cm-ch-tick{flex:0 0 auto;display:grid;place-items:center;width:20px;height:20px;border-radius:999px;background:var(--ios-tint-soft,var(--cm-gold-soft));color:var(--ios-tint,var(--cm-gold))}
.cm-ch-tick svg{width:12px;height:12px;stroke-width:3}
.cm-ch-list .cm-rank-pts{flex:0 0 auto;margin-left:0}
.cm-ch-list .cm-person{flex:1;min-width:0}
.cm-ch-more{align-self:flex-start;margin-top:6px;min-height:32px;color:var(--ios-tint,var(--cm-gold))}
.cm-ch-more svg{width:14px;height:14px;transition:rotate .25s var(--ios-ease,ease)}
.cm-ch-more[aria-expanded="true"] svg{rotate:180deg}
.cm-ch-note{margin:12px 0 0;font-size:13px;line-height:18px;color:var(--ios-label-2,var(--studio-muted))}
.cm-ch-prev{margin-top:14px;padding-top:12px;border-top:.5px solid var(--ios-sep,var(--studio-line))}
.cm-ch.is-past .cm-ch-prev{margin-top:0;padding-top:0;border-top:0}
.cm-ch-prev-head{display:flex;align-items:center;gap:6px;font-size:13px;line-height:18px;font-weight:600;color:var(--ios-label-2,var(--studio-muted));min-width:0}
.cm-ch-prev-head svg{flex:0 0 auto;width:15px;height:15px;color:var(--ios-tint,var(--cm-gold))}
/* Tytuł zeszłomiesięcznego wyzwania do 2 linii zamiast ucięcia po kilku słowach (audyt ludzie-16). */
.cm-ch-prev-head{align-items:flex-start}
.cm-ch-prev-head svg{margin-top:1px}
.cm-ch-prev-head span{min-width:0;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;white-space:normal}
.cm-ch-prev-list{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.cm-ch-prev-list li{display:flex;align-items:center;gap:10px;min-width:0}
.cm-ch-prev-name{flex:1;min-width:0;font-size:14px;line-height:19px;font-weight:600;color:var(--ios-label,var(--studio-ink));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-ch-prev-pts{flex:0 0 auto;font-size:13px;line-height:18px;color:var(--ios-label-2,var(--studio-muted));font-variant-numeric:tabular-nums}
@media (max-width:639px){
  .cm-ch{padding:14px}
  .cm-ch-title{font-size:19px;line-height:24px}
  .cm-ch-score strong{font-size:26px;line-height:30px}
}
@media (prefers-reduced-motion:reduce){body.cm-area .cm-ch .cm-ch-bar>div,.cm-ch-more svg{transition:none}}
/* Panel admina: sekcja „Wyzwanie miesiąca”. */
.cm-adm-ios-ic.is-wyzwanie{background:#32ADE6}
.cm-adm-ch-seg{display:flex;width:100%}
.cm-adm-ch-seg button{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:0;min-height:44px;padding:5px 8px;line-height:18px}
.cm-adm-ch-seg button small{font-size:11px;line-height:14px;font-weight:500;color:var(--studio-muted)}
.cm-adm-ch-actions{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px}
.cm-adm-ch-action{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border-radius:12px;background:var(--ios-fill-2,var(--studio-soft));font-size:14px;line-height:19px;color:var(--studio-ink);cursor:pointer;min-width:0}
.cm-adm-ch-action input{flex:0 0 auto;width:18px;height:18px;accent-color:var(--ios-tint,var(--cm-gold))}
.cm-adm-ch-action span{flex:1;min-width:0}
.cm-adm-ch-action strong{flex:0 0 auto;font-size:13px;color:var(--studio-muted);font-variant-numeric:tabular-nums}
.cm-adm-ch-action:has(input:checked){background:var(--ios-tint-soft,var(--cm-gold-soft));box-shadow:inset 0 0 0 1px var(--ios-tint,var(--cm-gold))}
.cm-adm-ch-action:has(input:checked) strong{color:var(--ios-tint,var(--cm-gold))}
.cm-adm-ch-action:has(input:focus-visible){outline:2px solid var(--ios-tint,var(--cm-gold));outline-offset:2px}
.cm-adm-ch-goal{display:flex;align-items:flex-end;flex-wrap:wrap;gap:4px 14px}
.cm-adm-ch-goal .cm-input{width:120px}
.cm-adm-ch-goal .cm-help{flex:1;min-width:180px;margin:0 0 10px}
.cm-adm-ch-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}
.cm-adm-ch-stats span{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:14px;background:var(--ios-fill-2,var(--studio-soft));font-size:12px;line-height:16px;color:var(--studio-muted);min-width:0}
.cm-adm-ch-stats strong{font-size:20px;line-height:24px;font-weight:700;color:var(--studio-ink);font-variant-numeric:tabular-nums}

/* ---------- poprawki audytu: Rdzeń ---------- */
/* brak1-1: nagłówek kursu na telefonie z ikonami społeczności - „Wyloguj” zostaje na ekranie (360-390 px): bez ikony
   wiadomości (skrzynka jest w społeczności i w dzwonku), ciaśniejsze odstępy przycisków, bez podpisu „NOTATNIK KURSANTA”. */
@media (max-width:639px){
  body:not(.cm-area) #cm-header .cm-course-only{display:none!important}
  body:not(.cm-area) #main-app>header:has(#cm-header){padding-right:8px}
  body:not(.cm-area) #main-app>header:has(#cm-header)>.ml-auto{gap:0}
  body:not(.cm-area) #main-app>header:has(#cm-header) .studio-brand small{display:none}
  body:not(.cm-area) #main-app>header:has(#cm-header) .studio-brand{white-space:nowrap}
}
/* stany-15: usunięte konto - neutralny szary awatar z sylwetką. */
.cm-avatar-deleted{background:var(--studio-soft);color:var(--studio-muted);box-shadow:inset 0 0 0 1px var(--studio-line)}
.cm-avatar-deleted svg{width:55%;height:55%}
/* brak3-11: świętowanie odznaki i poziomu - zdjęcie z ramką i ikoną odznaki u góry okna. */
.cm-celebrate-hero{position:relative;align-self:center;margin:4px 0 6px}
.cm-celebrate-medal{position:absolute;right:-6px;bottom:-4px;width:30px;height:30px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#FFD23F,#FFA500);color:#0b1220;box-shadow:0 0 0 3px var(--studio-surface)}
.cm-celebrate-medal svg{width:16px;height:16px}
/* brak2-19, powiadomienia-3: menu i dzwonek otwarte palcem albo myszą mają fokus na samym panelu - bez obwódki. */
#cm-menu:focus,#cm-bell-pop:focus{outline:none}
/* brak2-13: podgląd zdjęcia - przesuwanie i powiększanie palcami zostaje (manipulation = pan-x pan-y pinch-zoom, bez
   podwójnego stuknięcia); przy skali 1 przewijanie strony pod spodem blokuje C.lightbox, po powiększeniu jeden palec
   przesuwa obraz (wroga recenzja 13.10: samo pinch-zoom blokowało przesuwanie powiększonego zrzutu). */
.cm-lightbox{touch-action:manipulation;overscroll-behavior:contain}

/* ---------- poprawki audytu: Tablica, wątek, kompozytor ---------- */
/* Ankieta: ikona wyboru w jednej linii z odpowiedzią (tablica-4). */
.cm-poll-opt .cm-poll-label{display:inline-flex;align-items:center;gap:6px;min-width:0}
.cm-poll-opt .cm-poll-label svg{flex:none;width:16px;height:16px}
/* Karta na liście: akapity jako bloki z odstępem zamiast pustej linii - przycięcie do 5 linii bez samotnego wielokropka (tablica-15). */
.cm-body .cm-par{display:block}
.cm-body .cm-par+.cm-par{margin-top:10px}
/* Telefon: przy otwartej odpowiedzi pod komentarzem dolne pole komentarza chowa się - jedno pole pisania naraz (watek-8). */
@media (max-width:639px){body.cm-area.cm-replying .cm-cdock{display:none}}
/* Termin publikacji z przeszłości widoczny na przycisku planowania (watek-17). */
body.cm-area .cm-c-sched-btn.is-error{color:var(--cm-red);box-shadow:inset 0 0 0 1px currentColor}

/* ---------- poprawki audytu: Wydarzenia i czat ---------- */
/* Pusty czat (live-25): zaproszenie z ikoną na środku listy. */
body.cm-area .cm-chat-list>.cm-chat-empty{margin:auto 0}
/* Ukryta przez moderację, widziana przez autorkę i moderację (live-10): przygaszona treść. */
body.cm-area .cm-chat-msg.is-hidden .cm-chat-text,body.cm-area .cm-chat-msg.is-hidden .cm-images{opacity:.6}
/* Odwołane wydarzenie bez bocznej kolumny czatu (live-26). */
body.cm-area .cm-ev-side[hidden]{display:none}
@media (min-width:1280px){body.cm-area .cm-live-layout.is-solo{grid-template-columns:minmax(0,1fr)}}
/* Zapowiedź transmisji albo linku w karcie wydarzenia, pod terminem (live-26). */
body.cm-area .cm-event-when.cm-ev-note{font-size:13.5px;line-height:18px;color:var(--ios-label-2)}
body.cm-area .cm-event-when.cm-ev-note svg{width:15px;height:15px}
/* Pasek „Na żywo” przy kilku transmisjach (brak6-10): „i 1 inna transmisja” zawsze widoczne, skraca się prowadzący i czas. */
body.cm-area .cm-live-strip-text>.cm-live-strip-meta{display:flex;min-width:0}
body.cm-area .cm-live-strip-meta>span:first-child{min-width:0;flex:0 1 auto}
body.cm-area .cm-live-strip-meta>.cm-live-more-wrap{flex:none;overflow:visible}

/* ---------- poprawki audytu: Wiadomości prywatne ---------- */
/* Prośby czekające na odpowiedź nad listą rozmów: zdanie z odmianą i strzałką (wiadomosci-9). */
body.cm-area .cm-dm-list .cm-dm-hint{width:calc(100% - 24px);margin:0 12px 8px;padding:10px 12px;border:0;border-radius:14px;text-align:left;font:inherit;font-size:14px;line-height:20px;cursor:pointer;flex-wrap:nowrap}
.cm-dm-hint svg{flex:none;width:16px;height:16px}
.cm-dm-hint svg:first-child{color:var(--ios-tint,var(--cm-gold))}
.cm-dm-hint svg:last-child{color:var(--ios-label-2,var(--studio-muted))}
.cm-dm-hint-text{flex:1;min-width:0}
/* Pusta skrzynka (wiadomosci-14): na komputerze powitanie w prawym panelu, w kolumnie krótka linijka; telefon - w liście. */
.cm-dm-empty-line{display:none;margin:0;padding:12px 16px}
@media (min-width:900px){.cm-dm.is-list .cm-dm-empty-wide{display:none}.cm-dm.is-list .cm-dm-empty-line{display:block}}
.cm-dm-welcome{margin:auto;padding:24px 16px;max-width:440px}
/* Rozmowa niedostępna (stany-2): stan na środku pod nagłówkiem z „Wróć do listy”. */
.cm-dm-gone{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:24px 16px;overflow-y:auto}
/* Pasek zamiast pola pisania (brak4-7). */
.cm-dm-blocked{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin:6px 10px 10px;padding:10px 14px;border-radius:18px;background:var(--ios-fill-2,var(--studio-soft));color:var(--ios-label-2,var(--studio-muted));font-size:14px;line-height:20px}
.cm-dm-blocked>svg{flex:none;width:16px;height:16px}
.cm-dm-blocked-text{flex:1;min-width:160px}
.cm-dm-blocked .cm-btn{flex:none}
/* Wyciszona rozmowa: przekreślony dzwonek w liście i w nagłówku (wiadomosci-13). */
.cm-dm-muted{display:inline-flex;align-items:center;flex:none;color:var(--ios-label-2,var(--studio-muted))}
.cm-meta .cm-dm-muted{margin-right:3px;vertical-align:-2px}
/* Nagłówek grupy (wiadomosci-6): awatary zachodzące na siebie, nazwa i liczba osób - przycisk z listą członków. */
.cm-dm-group{display:flex;align-items:center;gap:10px;min-width:0;padding:2px 6px 2px 0;border:0;border-radius:12px;background:none;color:inherit;text-align:left;font:inherit;cursor:pointer}
.cm-dm-faces{display:flex;flex:none}
.cm-dm-faces>*{box-shadow:0 0 0 2px var(--ios-surface,var(--studio-surface));border-radius:999px}
.cm-dm-faces>*+*{margin-left:-12px}
.cm-dm-group-text{display:flex;flex-direction:column;min-width:0}
.cm-dm-group-text strong{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:15px;line-height:20px;color:var(--ios-label,var(--studio-ink))}
.cm-dm-group-text .cm-meta{font-weight:400}
@media (hover:hover) and (pointer:fine){.cm-dm-group:hover strong{text-decoration:underline;text-underline-offset:2px}}
.cm-dm-members{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
/* Nowa rozmowa grupowa (administrator, moderator). */
.cm-dm-item.cm-dm-newgroup{border-radius:10px;font-weight:600}
.cm-dm-newgroup-ico{display:inline-flex;flex:none;align-items:center;justify-content:center;width:32px;height:32px;border-radius:999px;background:var(--ios-fill-2,var(--studio-soft));color:var(--ios-tint,var(--cm-gold))}
.cm-dm-newgroup>span:nth-child(2){flex:1}
#cm-ng-results .cm-dm-item>svg:last-child,.cm-dm-newgroup>svg:last-child{flex:none;opacity:.7}
.cm-dm-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.cm-dm-chips:empty{display:none}
.cm-dm-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:3px 3px 3px 4px;border-radius:999px;background:var(--ios-fill-2,var(--studio-soft));font-size:14px;line-height:20px}
.cm-dm-chip>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cm-dm-chip .cm-avatar{width:24px;height:24px;font-size:10px}
.cm-dm-chip .cm-icon-btn{position:relative;flex:none;width:28px;height:28px;min-width:0;min-height:0;padding:0;border-radius:999px}
.cm-dm-chip .cm-icon-btn svg{width:14px;height:14px}
@media (pointer:coarse){.cm-dm-chip .cm-icon-btn::after{content:"";position:absolute;inset:-8px}}
/* Samo zdjęcie (wiadomosci-12): bez ramki i tła dymku, godzina w kapsule na zdjęciu. */
body.cm-area .cm-bubble.is-media,body.cm-area .cm-bubble.is-media.is-mine{flex-shrink:0;padding:0;background:none;box-shadow:none}
body.cm-area .cm-bubble.is-media>[id^="dmtext-"]{display:none}
body.cm-area .cm-bubble.is-media .cm-images{width:320px;max-width:100%;border-radius:inherit} /* stała szerokość: dymek = zdjęcie, godzina na zdjęciu (recenzja 13.10) */
body.cm-area .cm-bubble.is-media .cm-images img{display:block}
body.cm-area .cm-bubble.is-media .cm-bubble-meta{position:absolute;right:8px;bottom:8px;margin:0;padding:1px 4px 1px 8px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;opacity:1}
/* Nagłówek rozmowy 1:1 na telefonie (recenzja 13.10): imię, odznaka i dzwonek wyciszenia w jednym wierszu, imię
   z wielokropkiem; napis „Wyciszona” tylko na szerszym ekranie - trzecia linia wypychała imię nad pasek 52 px. */
.cm-dm-muted-inline{display:none}
@media (max-width:767px){
  body.cm-area .cm-shell.is-chat .cm-dm-pane>.cm-chat-head>.cm-person .cm-row{flex-wrap:nowrap;min-width:0}
  body.cm-area .cm-shell.is-chat .cm-dm-pane>.cm-chat-head>.cm-person .cm-row>*{flex:none}
  body.cm-area .cm-shell.is-chat .cm-dm-pane>.cm-chat-head>.cm-person .cm-row>.cm-person-name{display:block;flex:0 1 auto;min-width:0;line-height:24px}
  body.cm-area .cm-shell.is-chat .cm-dm-pane>.cm-chat-head .cm-dm-head-muted{display:none}
  body.cm-area .cm-shell.is-chat .cm-dm-pane>.cm-chat-head .cm-dm-muted-inline{display:inline-flex}
}

/* ---------- poprawki audytu: Ludzie, ranking, powitanie, ustawienia ---------- */
/* Katalog: panele nad wynikami chowane atrybutem hidden przy wyszukiwaniu (display:flex panelu go nadpisywał, ludzie-2). */
body.cm-area .cm-buddy-panel[hidden],body.cm-area .cm-newbies[hidden]{display:none}
body.cm-area .cm-member-search+.cm-member-tags-filter{margin-top:-2px}
/* Powitanie, krok 3: nazwa i powód przestrzeni nie kurczą się do słowa w linii; przełącznik obok (komputer) albo pod spodem
   (telefon, wcięty pod tekst) - powiadomienia-1. */
body.cm-area .cm-fr-space-txt{flex:1 1 180px;min-width:0}
body.cm-area .cm-fr-follow{display:block;flex:0 1 auto;margin-left:auto;font-size:inherit;color:inherit;cursor:auto}
body.cm-area .cm-fr-follow .cm-switch-row{gap:10px;min-height:0}
body.cm-area .cm-fr-follow .cm-switch-label{font-size:13px;line-height:18px;color:var(--studio-muted)}
body.cm-area .cm-fr-title[tabindex="-1"]:focus{outline:none}
@media (max-width:639px){
  body.cm-area .cm-fr-follow{flex:1 1 100%;margin-left:0;padding-left:46px}
  /* Przyciski kroku zawsze na ekranie: pasek przyklejony do dołu arkusza, w tym samym szkle (powiadomienia-2). */
  body.cm-area .cm-fr-dialog .cm-fr-actions{position:sticky;bottom:calc(-1 * max(16px, env(safe-area-inset-bottom)));z-index:2;margin:6px -16px calc(-1 * max(16px, env(safe-area-inset-bottom)));
    padding:10px 16px max(16px, env(safe-area-inset-bottom));background:var(--ios-glass-strong);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);box-shadow:0 -.5px 0 var(--studio-line)}
}
/* Ramka poziomu na profilu i karcie po najechaniu (brak3-4): od 3 złoty pierścień, od 5 druga obręcz, od 7 poświata. */
body.cm-area .cm-pf-ava:is(.is-gold,.is-double,.is-aura) .cm-pf-ring-track{stroke:rgba(233,184,36,.4)}
body.cm-area .cm-pf-ava.is-double{box-shadow:0 0 0 3px var(--ios-surface),0 0 0 4.5px rgba(233,184,36,.75)}
body.cm-area .cm-pf-ava.is-aura{box-shadow:0 0 0 3px var(--ios-surface),0 0 0 4.5px #FFD23F,0 0 26px 6px rgba(255,200,40,.45)}
body.cm-area .cm-hc-top .cm-pf-ava.is-double{box-shadow:0 0 0 3px var(--ios-elev),0 0 0 4.5px rgba(233,184,36,.75)}
body.cm-area .cm-hc-top .cm-pf-ava.is-aura{box-shadow:0 0 0 3px var(--ios-elev),0 0 0 4.5px #FFD23F,0 0 18px 4px rgba(255,200,40,.45)}
/* Profil: dlaczego nie ma „Wiadomość” (brak4-9). */
body.cm-area .cm-pf-dm-note{display:flex;align-items:flex-start;justify-content:center;gap:6px;margin:12px 0 0;font-size:14px;line-height:20px;color:var(--studio-muted)}
body.cm-area .cm-pf-dm-note>span{min-width:0}
body.cm-area .cm-pf-dm-note svg{width:16px;height:16px;flex:0 0 auto;margin-top:2px}
body.cm-area .cm-pf-dm-note.is-blocked{align-items:center}
body.cm-area .cm-pf-dm-note.is-blocked svg{margin-top:0}
body.cm-area .cm-pf-dm-note .cm-link{min-height:32px;font-weight:600}
@container (min-width:760px){body.cm-area .cm-pf-dm-note{justify-content:flex-start}}
/* Edycja profilu: błędny link (ludzie-12). */
body.cm-area .cm-pe-link .cm-input[aria-invalid="true"]{border-color:var(--cm-red,#FF453A);box-shadow:0 0 0 3px color-mix(in srgb,var(--cm-red,#FF453A) 22%,transparent)}

/* ---------- poprawki audytu: Artykuły ---------- */
/* Edytor artykułu: przywrócony szkic z wyjściem (artykuly-16), „Szkic zapisany” obok Anuluj, licznik obrazów przy
   limicie (brak6-9), ostrzeżenie limitu znaków, „Kto przeczyta” bez wyboru jako zdanie (artykuly-19), błąd linku. */
.cm-draft-note{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:0;padding:10px 12px;border-radius:12px;background:var(--cm-gold-soft);border:1px solid var(--cm-gold-line);font-size:13px;line-height:18px;color:var(--studio-ink)}
.cm-draft-note>svg{width:16px;height:16px;flex:0 0 auto;color:var(--cm-gold)}
.cm-draft-note>span{flex:1 1 220px;min-width:0}
.cm-draft-note .cm-link{flex:0 0 auto;font-weight:600}
.cm-a-imgrow{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px}
.cm-a-imgrow .cm-help{margin:0}
.cm-a-imgrow .cm-help:empty{display:none}
#cm-a-stats.is-limit{color:var(--cm-gold);font-weight:600}
#cm-a-stats[data-state="full"]{color:var(--cm-red)}
.cm-a-actions{align-items:center}
.cm-a-saved{flex:1;min-width:0;display:inline-flex;align-items:center;justify-content:flex-end;gap:4px;padding:0 6px;font-size:12px;line-height:16px;color:var(--studio-muted);text-align:right}
.cm-a-saved svg{width:14px;height:14px;flex:0 0 auto;color:var(--cm-green)}
.cm-a-saved.is-pending svg{color:var(--cm-gold)}
/* Wąski ekran: napis w dwóch liniach przylega do ikony, bez przerwy między ikoną a tekstem. */
.cm-a-saved>span{text-align:left}
.cm-a-audience{display:flex;align-items:center;gap:8px;margin:0;font-size:14px;line-height:20px;color:var(--studio-ink)}
.cm-a-audience svg{width:16px;height:16px;flex:0 0 auto;color:var(--studio-muted)}
.cm-a-link-err{margin:0;color:var(--cm-red);font-weight:600}
.cm-editor-bar .cm-btn:disabled{opacity:.45;cursor:default}
/* iPhone (brak2-2): w trakcie pisania w polu profilu dolny pasek kart jest schowany - pasek „Niezapisane zmiany” nie
   pływa nad polem, wraca na koniec formularza (zapis po schowaniu klawiatury). */
@media (max-width:1023px){
  body.cm-area.cm-typing .cm-pe-form.is-dirty .cm-pe-save{position:static}
}

/* ---------- poprawki audytu: Panel admina (klient) ---------- */
/* Karta osoby: etykiety i gotowe powody punktów zawijają się (zamiast paska z ukrytym przewijaniem). */
.cm-adm-tagwrap,.cm-adm-chipwrap{display:flex;flex-wrap:wrap;gap:6px 8px}
/* Filtr słów: podświetlenie istniejącej frazy przy próbie dodania duplikatu. */
@keyframes cm-am-flash{0%,55%{background:var(--ios-tint-soft,rgba(255,214,10,.18))}100%{background:transparent}}
.cm-am-row.is-flash{animation:cm-am-flash 2s ease;border-radius:12px}
@media (prefers-reduced-motion:reduce){.cm-am-row.is-flash{animation:none;background:var(--ios-tint-soft,rgba(255,214,10,.18))}}
/* Zgłoszenia jednej treści w jednej karcie: lista powodów; na telefonie przyciski decyzji 2x2. */
.cm-adm-report-reasons{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:13px;line-height:18px}
.cm-adm-report-reasons li{padding:8px 10px;border-radius:10px;background:var(--ios-fill-2,var(--studio-soft))}
.cm-adm-report-detail{display:-webkit-box;margin-top:2px;color:var(--studio-ink);-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cm-adm-report-more>summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--ios-tint);padding:4px 0;list-style-position:inside}
.cm-adm-report-more[open]>summary{margin-bottom:6px}
.cm-adm-report:focus{outline:none}
.cm-adm-report:focus-visible{outline:2px solid var(--ios-tint);outline-offset:2px}
@media (max-width:767px){
  .cm-adm-report{padding:14px;gap:8px}
  .cm-adm-report-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .cm-adm-report-actions .cm-btn{justify-content:center;min-width:0;white-space:normal;text-align:center}
}
/* Rytuały: plakietka tuż przy dniu i godzinie, dopiski w osobnych liniach; podpowiedź do {nowe osoby}. */
.cm-r-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px}
.cm-r-notes{display:flex;flex-direction:column;gap:2px}
.cm-r-hint{margin:6px 0 0}
.cm-r-hint[hidden]{display:none}
/* Strona „Decyzje moderacji”: pasek stanu blokady nad listą. */
.cm-adm-mine-state{margin-bottom:12px}
/* Przestrzenie: ikona i nazwa w jednej linii (komputer), lista jak w Ustawieniach iOS (telefon). */
.cm-adm-sp-name{display:inline-flex;align-items:center;gap:8px}
.cm-adm-sp-name svg{flex:none}
.cm-adm-sp-table td{vertical-align:middle}
.cm-adm-sp-table tr.is-archived,.cm-adm-sp-row.is-archived{opacity:.55}
.cm-adm-sp-list{display:none}
.cm-adm-sp-row{width:100%;border:0;background:none;font:inherit;text-align:left;cursor:pointer;color:inherit}
.cm-adm-ios-ic.is-sp{background:var(--ios-tint-soft,rgba(255,214,10,.16));color:var(--ios-tint)}
@media (max-width:767px){.cm-adm-sp-table{display:none}.cm-adm-sp-list{display:block}}
/* Okno przestrzeni: pola wyboru zawijają się na telefonie, wybór ikony z podglądem. */
.cm-adm-sp-selects{align-items:flex-end}
.cm-adm-sp-selects>div{flex:1 1 170px;min-width:0}
.cm-adm-icons{margin:0;padding:0;border:0;min-width:0}
.cm-adm-icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px}
.cm-adm-icon-opt{position:relative;display:block;cursor:pointer}
.cm-adm-icon-opt input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.cm-adm-icon-tile{display:grid;place-items:center;height:44px;border-radius:12px;background:var(--ios-fill-2,var(--studio-soft));color:var(--studio-ink)}
.cm-adm-icon-tile svg{width:20px;height:20px}
.cm-adm-icon-opt input:checked+.cm-adm-icon-tile{background:var(--ios-tint-soft);color:var(--ios-tint);box-shadow:inset 0 0 0 2px var(--ios-tint)}
.cm-adm-icon-opt input:focus-visible+.cm-adm-icon-tile{outline:2px solid var(--ios-tint);outline-offset:2px}
/* Etykiety: pole i przycisk w jednym rzędzie (kolor pod spodem na telefonie); wiersz z „Edytuj” i „Usuń”. */
.cm-adm-tagform{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cm-adm-tagform .cm-input{flex:1 1 180px;min-width:0}
.cm-adm-tagform .cm-select{flex:0 0 auto;width:auto}
@media (max-width:767px){.cm-adm-tagform{display:grid;grid-template-columns:minmax(0,1fr) auto}.cm-adm-tagform .cm-select{grid-column:1 / -1;grid-row:2;width:100%}}
.cm-adm-tagrow{justify-content:space-between;gap:8px;flex-wrap:wrap}
.cm-adm-tagrow+.cm-adm-tagrow{margin-top:8px}
.cm-adm-tagrow-acts{display:flex;gap:8px}
/* Okno banera: link i napis na przycisku jeden pod drugim na wąskim ekranie; obraz z „Usuń obraz”. */
.cm-b-linkrow{display:flex;flex-wrap:wrap;gap:10px}
.cm-b-linkrow>.is-link{flex:2 1 200px;min-width:0}
.cm-b-linkrow>.is-label{flex:1 1 140px;min-width:0}
@media (max-width:479px){.cm-b-linkrow>div{flex-basis:100%}}
#cm-b-img{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
/* Członkowie na telefonie: metki w dwóch liniach z tym samym wcięciem co pakiet - pakiet, rola, „poz. 2 · 39 pkt”,
   potem wkład i ostatnia wizyta (pseudo-element tr::after łamie linię); oba pola wyboru w jednym rzędzie. */
.cm-adm-ph-only{display:none}
@media (max-width:767px){
  .cm-adm-ph-only{display:inline}
  .cm-adm-table:not(.is-log):not(.cm-adm-matrix):not(.cm-adm-cohorts) tr::after{content:"";order:4;flex:0 0 100%;height:0;margin-top:-6px}
  .cm-adm-table td[data-label="Wkład"],.cm-adm-table td[data-label="Ostatnio"]{order:5}
  .cm-adm-table td[data-label="Wkład"]{margin-left:38px}
  .cm-adm-table td[data-label="Ostatnio"]::before{content:"· ostatnio "}
  .cm-adm-toolbar .cm-adm-search{flex-basis:100%}
  .cm-adm-toolbar .cm-select{flex:1 1 0;min-width:0}
}
/* Szkice (13.10, panel admina „Treści” -> „Szkice”): karty z rodzajem, „dlaczego teraz”, podglądem w wyglądzie wpisu
   albo komentarza, edycją w miejscu i akcjami. Na telefonie karta na całą szerokość, „Opublikuj jako ja” w osobnym rzędzie. */
.cm-adm-ios-ic.is-szkice{background:#5E5CE6}
/* Licznik szkiców to praca do zrobienia, nie alarm: kolor akcentu zamiast czerwieni zgłoszeń. */
.cm-adm-count[data-count="drafts"]{background:var(--ios-tint);color:var(--ios-on-tint,#171100)}
.cm-dr-hrow>.cm-link{flex:0 0 auto;font-size:13px;font-weight:600}
.cm-dr-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.cm-dr-n{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-left:6px;border-radius:999px;background:var(--ios-tint);color:var(--ios-on-tint,#171100);font-size:11px;font-weight:800;font-variant-numeric:tabular-nums}
.cm-dr-n[hidden]{display:none}
.cm-dr-note{margin-bottom:14px}
.cm-dr-list{display:flex;flex-direction:column;gap:14px}
.cm-dr-card{background:var(--cm-card-bg,var(--studio-surface));border:1px solid var(--cm-hair,var(--studio-line));border-radius:var(--cm-radius,22px);box-shadow:var(--cm-rim,none);padding:16px 18px;min-width:0;display:flex;flex-direction:column;gap:12px;transition:opacity .25s ease,border-color .25s ease}
.cm-dr-card.is-new{border-color:var(--ios-tint)}
.cm-dr-card.is-done{padding:12px 14px;gap:0}
.cm-dr-head{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;min-width:0}
.cm-dr-kind{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 8px;border-radius:999px;font-size:12px;font-weight:700;color:var(--studio-ink);background:var(--ios-fill-2,var(--studio-soft))}
.cm-dr-kind svg{width:14px;height:14px;color:var(--ios-tint)}
.cm-dr-kind.is-answer svg,.cm-dr-kind.is-nudge svg,.cm-dr-kind.is-welcome svg{color:var(--cm-blue)}
.cm-dr-kind.is-fail_story svg{color:#FF9F0A}
.cm-dr-kind.is-poll svg,.cm-dr-kind.is-welcome_week svg{color:var(--cm-green)}
.cm-dr-kind.is-icon{padding:0;width:32px;height:32px;justify-content:center;flex:0 0 auto}
.cm-dr-where{font-size:13px;color:var(--studio-muted);min-width:0;flex:1 1 160px;overflow-wrap:anywhere}
.cm-dr-src{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:999px;border:1px solid var(--studio-line);color:var(--studio-muted);margin-left:auto}
.cm-dr-src.is-ai{color:var(--ios-tint);border-color:color-mix(in srgb,var(--ios-tint) 40%,transparent)}
.cm-dr-why{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:13px;line-height:1.45;color:var(--studio-muted)}
.cm-dr-why svg{width:15px;height:15px;flex:0 0 auto;margin-top:2px;color:var(--ios-tint)}
.cm-dr-why strong{color:var(--studio-ink);font-weight:700}
.cm-dr-links strong{font-weight:700;overflow-wrap:anywhere}
.cm-dr-pv{border-radius:16px;background:var(--ios-fill-2,var(--studio-soft));padding:12px;min-width:0}
.cm-dr-pv[hidden]{display:none}
.cm-dr-pv-label{display:flex;align-items:center;gap:6px;margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--studio-muted)}
.cm-dr-pv-label svg{width:13px;height:13px}
.cm-dr-post{margin:0;background:var(--studio-surface);border:1px solid var(--cm-hair,var(--studio-line));border-radius:14px;padding:14px;box-shadow:none}
.cm-dr-post .cm-post-title{cursor:default;margin-top:10px}
.cm-dr-post .cm-body{margin-top:6px}
.cm-dr-post .cm-poll{margin-top:10px}
.cm-dr-comment .cm-comment-box{background:var(--studio-surface)}
.cm-dr-edit{display:flex;flex-direction:column;gap:12px;min-width:0}
.cm-dr-edit[hidden]{display:none}
.cm-dr-edit .cm-textarea{min-height:140px;font-size:15px;line-height:1.5}
.cm-dr-poll{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;border:0;min-width:0}
.cm-dr-edit-acts{justify-content:flex-end;gap:8px}
.cm-dr-sched{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:14px;background:var(--ios-fill-2,var(--studio-soft))}
.cm-dr-sched[hidden]{display:none}
.cm-dr-sched-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cm-dr-sched-row .cm-input{flex:1 1 200px;min-width:0;width:auto}
.cm-dr-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cm-dr-acts .cm-btn{display:inline-flex;align-items:center;gap:6px}
.cm-dr-acts .cm-btn svg{width:15px;height:15px}
.cm-dr-rejbtn{margin-left:auto;color:var(--studio-muted)}
.cm-dr-rejbtn:hover{color:var(--cm-red)}
.cm-dr-meta{margin:0;font-size:12px;color:var(--studio-muted)}
.cm-dr-gen{display:inline-flex;align-items:center;gap:6px}
.cm-dr-gen svg{width:15px;height:15px}
.cm-dr-gen[aria-busy="true"]{opacity:.7;cursor:progress}
.cm-dr-hrow{display:flex;align-items:center;gap:12px;padding:10px 0;min-width:0}
.cm-dr-hrow+.cm-dr-hrow{border-top:1px solid var(--cm-hair,var(--studio-line))}
.cm-dr-hrow>.min-w-0{flex:1 1 auto}
.cm-dr-hrow strong{display:block;font-size:14px;color:var(--studio-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-dr-hrow small{display:block;font-size:12px;color:var(--studio-muted);overflow-wrap:anywhere}
.cm-dr-state{flex:0 0 auto;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--ios-fill-2,var(--studio-soft));color:var(--studio-muted);white-space:nowrap}
.cm-dr-state.is-ok{color:var(--cm-green);background:color-mix(in srgb,var(--cm-green) 12%,transparent)}
.cm-dr-state.is-plan{color:var(--cm-blue);background:color-mix(in srgb,var(--cm-blue) 12%,transparent)}
@media (max-width:767px){
  .cm-dr-card{padding:14px;border-radius:18px;gap:10px}
  .cm-dr-src{margin-left:0}
  .cm-dr-where{flex-basis:100%;order:3}
  .cm-dr-pv{padding:10px;border-radius:14px}
  .cm-dr-post{padding:12px}
  .cm-dr-acts .cm-dr-pub{flex:1 1 100%;justify-content:center;min-height:44px}
  .cm-dr-acts .cm-btn:not(.cm-dr-pub){flex:1 1 auto;justify-content:center;min-height:40px}
  .cm-dr-rejbtn{margin-left:0}
  .cm-dr-hrow{flex-wrap:wrap}
  .cm-dr-hrow strong{white-space:normal}
  .cm-dr-state{order:3}
  .cm-dr-top .cm-adm-seg{flex:1 1 auto}
  .cm-dr-top .cm-adm-seg button{flex:1 1 0}
}
@media (prefers-reduced-motion:reduce){.cm-dr-card{transition:none}}