/* === inline z index.html (linie 27-55) === */
.count-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.count-btn {
  background: linear-gradient(135deg, #1e3a5f 0%, #1a2e4a 100%) !important;
  border: 1px solid #2e6bb0 !important;
  border-radius: 10px !important;
  padding: 16px 0 !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #7eb8f7 !important;
  cursor: pointer;
  transition: all .18s ease;
  letter-spacing: 0.5px;
}
.count-btn:hover {
  background: linear-gradient(135deg, #1e4a7a 0%, #1a3860 100%) !important;
  border-color: #4a9de0 !important;
  color: #aed6ff !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(46,107,176,.4) !important;
}
.count-btn.active {
  background: linear-gradient(135deg, #1a5c35 0%, #143d24 100%) !important;
  border-color: #2ecc71 !important;
  color: #fff !important;
  box-shadow: 0 0 18px rgba(46,204,113,.6), 0 0 36px rgba(46,204,113,.25) !important;
  transform: translateY(-2px);
}

/* === inline z index.html (linie 60-178) === */
  /* ── Landing premium upgrade (Apple-style: aurora + makieta produktu + reveal) ── */
  #landing-page .lp-hero { padding: 92px 24px 76px; }
  #landing-page .lp-hero-title { font-size: clamp(34px, 6vw, 66px); letter-spacing: -1.5px; line-height: 1.05; font-weight: 800; }
  #landing-page .lp-hero-subtitle { font-size: clamp(16px, 2.2vw, 22px); }
  #landing-page .lp-hero-desc { font-size: clamp(15px, 1.8vw, 18px); }
  /* Animowana aurora w tle hero */
  #landing-page .lp-aurora { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
  #landing-page .lp-aurora-blob { position: absolute; border-radius: 50%; filter: blur(72px); opacity: .55; will-change: transform; }
  #landing-page .lp-aurora-blob.b1 { width: 520px; height: 520px; background: #00a0d2; top: -130px; left: -80px; animation: lpFloat1 16s ease-in-out infinite; }
  #landing-page .lp-aurora-blob.b2 { width: 460px; height: 460px; background: #00d084; bottom: -150px; right: -60px; animation: lpFloat2 19s ease-in-out infinite; }
  #landing-page .lp-aurora-blob.b3 { width: 380px; height: 380px; background: #6c63ff; top: 28%; left: 55%; opacity: .4; animation: lpFloat3 22s ease-in-out infinite; }
  @keyframes lpFloat1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(80px,60px) scale(1.15)} }
  @keyframes lpFloat2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-70px,-50px) scale(1.1)} }
  @keyframes lpFloat3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-60px,40px) scale(1.2)} }
  /* Grain: statyczne ziarno SVG nad blobami — usuwa banding gradientów (widoczny zwłaszcza na OLED).
     Nie animować — animowany noise to CPU killer. */
  #landing-page .lp-aurora::after { content:''; position:absolute; inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:160px 160px; opacity:.06; mix-blend-mode:overlay; pointer-events:none; }
  /* Makieta produktu — świecący ekran aplikacji */
  #landing-page .lp-mock { position: relative; max-width: 560px; margin: 54px auto 0; perspective: 1400px; }
  #landing-page .lp-mock-window { position: relative; z-index: 2; background: linear-gradient(180deg,#0f1117 0%,#0b0d12 100%); border: 1px solid rgba(0,160,210,.25); border-radius: 16px; box-shadow: 0 34px 80px -20px rgba(0,0,0,.7), 0 0 70px -12px rgba(0,160,210,.4); overflow: hidden; text-align: left; transform: rotateX(6deg); transform-origin: center top; }
  #landing-page .lp-mock-bar { display: flex; gap: 7px; padding: 12px 14px; background: rgba(255,255,255,.03); border-bottom: 1px solid rgba(255,255,255,.06); }
  #landing-page .lp-mock-bar span { width: 11px; height: 11px; border-radius: 50%; }
  #landing-page .lp-mock-bar span:nth-child(1){ background:#ff5f57 } #landing-page .lp-mock-bar span:nth-child(2){ background:#febc2e } #landing-page .lp-mock-bar span:nth-child(3){ background:#28c840 }
  #landing-page .lp-mock-screen { padding: 22px 24px 24px; }
  #landing-page .lp-mock-q { font-size: 12px; color: #00a0d2; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 10px; }
  #landing-page .lp-mock-question { font-size: 17px; font-weight: 700; color: #f1f5f9; line-height: 1.4; margin-bottom: 18px; }
  #landing-page .lp-mock-opt { padding: 11px 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; margin-bottom: 9px; font-size: 14px; color: #cbd5e1; background: rgba(255,255,255,.02); }
  #landing-page .lp-mock-opt.correct { border-color: rgba(0,208,132,.6); background: rgba(0,208,132,.12); color: #d6ffe8; font-weight: 600; }
  #landing-page .lp-mock-foot { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
  #landing-page .lp-mock-pill { font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: rgba(0,160,210,.12); color: #7fdcff; border: 1px solid rgba(0,160,210,.25); }
  /* ── Hero carousel (3 slajdy: quiz → certyfikat → Rubix) ────────────── */
  #landing-page .lp-carousel { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid rgba(0,160,210,.25); box-shadow: 0 34px 80px -20px rgba(0,0,0,.7), 0 0 70px -12px rgba(0,160,210,.4); transform: rotateX(6deg); transform-origin: center top; }
  #landing-page .lp-track { display: flex; transition: transform .75s cubic-bezier(.65,.05,.36,1); will-change: transform; }
  #landing-page .lp-slide { flex: 0 0 100%; min-width: 0; }
  #landing-page .lp-carousel .lp-mock-window { border: 0; border-radius: 0; box-shadow: none; transform: none; height: 100%; }
  #landing-page .lp-cert-screen { padding: 18px 20px 22px; display: flex; align-items: center; justify-content: center; min-height: 300px; background: #0b0d12; }
  #landing-page .lp-cert-img { width: 100%; border-radius: 8px; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 10px 30px rgba(0,0,0,.5); }
  #landing-page .lp-rubix-screen { padding: 26px 24px 32px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; min-height: 300px; background: radial-gradient(circle at 50% 35%, rgba(0,160,210,.10) 0%, transparent 60%), #0b0d12; }
  #landing-page .lp-rubix-bubble { position: relative; background: rgba(0,160,210,.14); border: 1px solid rgba(0,160,210,.4); color: #d6f4ff; font-size: 16px; font-weight: 600; line-height: 1.4; padding: 14px 18px; border-radius: 14px; max-width: 330px; text-align: center; }
  #landing-page .lp-rubix-bubble::after { content: ''; position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%) rotate(45deg); width: 16px; height: 16px; background: rgba(0,160,210,.14); border-right: 1px solid rgba(0,160,210,.4); border-bottom: 1px solid rgba(0,160,210,.4); }
  #landing-page .lp-rubix-img { width: 124px; height: 124px; object-fit: contain; animation: lpRubixBob 3s ease-in-out infinite; filter: drop-shadow(0 10px 22px rgba(0,160,210,.4)); }
  @keyframes lpRubixBob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-11px) } }
  #landing-page .lp-dots { display: flex; gap: 9px; justify-content: center; margin-top: 20px; }
  #landing-page .lp-dot { position: relative; overflow: hidden; width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: rgba(255,255,255,.22); transition: background .25s, width .25s; }
  #landing-page .lp-dot.active { background: rgba(255,255,255,.18); width: 30px; border-radius: 6px; }
  #landing-page .lp-dot-fill { position: absolute; inset: 0; border-radius: inherit; background: #00a0d2; transform: scaleX(0); transform-origin: left; }
  #landing-page .lp-dot.active .lp-dot-fill { animation: lpDotFill 4500ms linear forwards; }
  @keyframes lpDotFill { from { transform: scaleX(0) } to { transform: scaleX(1) } }
  /* Cursor-spotlight w hero */
  #landing-page .lp-spotlight { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .45s; background: radial-gradient(560px circle at var(--sx,50%) var(--sy,50%), rgba(0,160,210,.16), transparent 45%); }
  #landing-page .lp-hero:hover .lp-spotlight { opacity: 1; }
  /* Tilt 3D + glow podążający za kursorem na kartach feature */
  #landing-page .lp-features-grid:not(.lp-trust-grid) .lp-feature { position: relative; overflow: hidden; transform-style: preserve-3d; will-change: transform; cursor: pointer; }
  #landing-page .lp-features-grid:not(.lp-trust-grid) .lp-feature::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(240px circle at var(--gx,50%) var(--gy,50%), rgba(0,160,210,.20), transparent 60%); opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 0; }
  #landing-page .lp-features-grid:not(.lp-trust-grid) .lp-feature:hover::before { opacity: 1; }
  #landing-page .lp-features-grid:not(.lp-trust-grid) .lp-feature > * { position: relative; z-index: 1; }
  /* Border-glow: drugi gradient na samym obrysie karty (mask wycina pierścień 1px) —
     razem z glow wnętrza (::before) daje efekt Linear/Raycast */
  #landing-page .lp-features-grid:not(.lp-trust-grid) .lp-feature::after { content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; background:radial-gradient(280px circle at var(--gx,50%) var(--gy,50%), rgba(0,208,132,.75), rgba(0,160,210,.30) 45%, transparent 70%); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite:exclude; opacity:0; transition:opacity .3s; pointer-events:none; z-index:2; }
  #landing-page .lp-features-grid:not(.lp-trust-grid) .lp-feature:hover::after { opacity:1; }
  /* Micro-interactions: wspólny timing, reakcja na dotyk, a11y focus, animowany underline */
  #landing-page .lp-btn { transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s cubic-bezier(.4,0,.2,1), background .2s, border-color .2s, color .2s; }
  #landing-page .lp-btn:active { transform: translateY(0) scale(.97); }
  #landing-page .lp-btn:focus-visible { outline: 2px solid #00a0d2; outline-offset: 2px; }
  #landing-page .lp-verify-link { text-decoration: none; background: linear-gradient(currentColor,currentColor) 0 100% / 0% 1px no-repeat; transition: color .2s, background-size .25s cubic-bezier(.4,0,.2,1); }
  #landing-page .lp-verify-link:hover { background-size: 100% 1px; }
  @media (pointer: coarse) {
    #landing-page .lp-feature:active { transform: scale(.98); }
    #landing-page .lp-btn:active { transform: scale(.96); }
  }
  /* ── Privacy & Security: karty zamiast ściany tekstu (treść crawlowalna bez zmian) ── */
  #landing-page .lp-policy > p[data-i18n="landing.privacy.intro"] { text-align: center; max-width: 580px; margin: 0 auto 30px; color: #94a3b8; }
  #landing-page .lp-policy-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
  #landing-page .lp-policy-card { background: rgba(0,122,186,.05); border: 1px solid rgba(0,160,210,.14); border-radius: 14px; padding: 24px 26px; }
  #landing-page .lp-policy-card h3 { margin: 0 0 16px; font-size: 16.5px; letter-spacing: -.2px; }
  #landing-page .lp-policy-card.no { background: rgba(251,113,133,.04); border-color: rgba(251,113,133,.16); }
  #landing-page .lp-policy-card ul { list-style: none; padding: 0; margin: 0; }
  #landing-page .lp-policy-card li { position: relative; padding-left: 28px; margin-bottom: 11px; font-size: 14.5px; }
  #landing-page .lp-policy-card li:last-child { margin-bottom: 0; }
  #landing-page .lp-policy-card li::before { position: absolute; left: 0; top: 0; font-weight: 800; font-size: 14px; }
  #landing-page .lp-policy-card.yes li::before { content: '✓'; color: #00d084; }
  #landing-page .lp-policy-card.no li::before  { content: '✕'; color: #fb7185; }
  #landing-page .lp-policy-strip { display: flex; align-items: center; gap: 16px; margin-top: 18px; background: rgba(0,208,132,.05); border: 1px solid rgba(0,208,132,.18); border-radius: 14px; padding: 18px 22px; }
  #landing-page .lp-strip-icon { font-size: 30px; line-height: 1; }
  #landing-page .lp-policy-strip h3 { margin: 0 0 4px; font-size: 15.5px; }
  #landing-page .lp-policy-strip p { margin: 0; font-size: 14px; color: #94a3b8; }
  /* Security: checklista jako siatka kafelków z ikonami */
  #landing-page .lp-sec-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 14px; padding: 0; margin: 0 0 16px; }
  #landing-page .lp-sec-grid li { background: rgba(0,122,186,.05); border: 1px solid rgba(0,160,210,.14); border-radius: 14px; padding: 48px 18px 18px; font-size: 13.5px; line-height: 1.55; color: #b6c2cf; position: relative; margin: 0; }
  #landing-page .lp-sec-grid li::before { position: absolute; top: 15px; left: 17px; font-size: 21px; line-height: 1; }
  #landing-page .lp-sec-grid li:nth-child(1)::before { content: '🔒'; }
  #landing-page .lp-sec-grid li:nth-child(2)::before { content: '#️⃣'; }
  #landing-page .lp-sec-grid li:nth-child(3)::before { content: '🎫'; }
  #landing-page .lp-sec-grid li:nth-child(4)::before { content: '🗝️'; }
  #landing-page .lp-sec-grid li:nth-child(5)::before { content: '🇪🇺'; }
  #landing-page .lp-policy-note { text-align: center; }
  @media (max-width: 720px) {
    #landing-page .lp-policy-cols { grid-template-columns: 1fr; }
    #landing-page .lp-policy-strip { flex-direction: column; text-align: center; gap: 10px; }
  }
  /* Scroll-reveal */
  #landing-page .lp-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
  #landing-page .lp-reveal.lp-in { opacity: 1; transform: none; }
  @media (max-width: 760px) {
    #landing-page .lp-mock-window { transform: none; }
    #landing-page .lp-carousel { transform: none; }
    #landing-page .lp-mock { margin-top: 40px; }
    #landing-page .lp-rubix-img { width: 104px; height: 104px; }
  }
  @media (prefers-reduced-motion: reduce) {
    #landing-page .lp-aurora-blob { animation: none; }
    #landing-page .lp-reveal { opacity: 1; transform: none; transition: none; }
    #landing-page .lp-track { transition: none; }
    #landing-page .lp-rubix-img { animation: none; }
    #landing-page .lp-dot.active .lp-dot-fill { animation: none; transform: scaleX(1); }
    #landing-page .lp-spotlight { display: none; }
  }

/* === inline z index.html (linie 696-723) === */
      .nav-notif { position:relative; display:inline-block; }
      .notif-bell { position:relative; background:transparent; border:1px solid transparent; border-radius:8px; padding:4px 8px; font-size:18px; cursor:pointer; opacity:.7; transition:opacity .15s; }
      .notif-bell:hover { opacity:1; }
      .notif-badge { position:absolute; top:-3px; right:-3px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:#ff5f57; color:#fff; font-size:10px; font-weight:800; line-height:16px; text-align:center; box-shadow:0 0 0 2px #0f1117; }
      .notif-panel { position:absolute; top:calc(100% + 8px); left:0; z-index:650; width:300px; max-height:380px; overflow-y:auto;
        background:#151c3a; border:1px solid #232b58; border-radius:12px; box-shadow:0 14px 34px rgba(0,0,0,.55); padding:8px;
        font-family:'Inter',system-ui,sans-serif; }
      .notif-head { font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#9aa3c7; padding:6px 12px 8px; }
      .notif-item { display:flex; gap:11px; align-items:center; padding:9px 10px; border-radius:10px; cursor:pointer; transition:background .12s; }
      .notif-item:hover { background:rgba(124,131,255,.12); }
      .notif-chip { flex:none; width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:17px; }
      .notif-body { flex:1; min-width:0; }
      .notif-title { display:block; color:#e9ecf8; font-size:13px; font-weight:600; line-height:1.35; }
      .notif-go { display:block; font-size:11px; color:#9aa3c7; margin-top:2px; }
      .notif-chev { flex:none; color:#6b73a0; font-size:16px; transition:transform .12s, color .12s; }
      .notif-item:hover .notif-chev { color:#7c83ff; transform:translateX(2px); }
      .notif-empty { color:#6b73a0; text-align:center; padding:26px 12px; font-size:13px; }
      .notif-bell.has-notif { animation: bellRing 2.4s ease-in-out infinite; transform-origin:50% 4px; }
      @keyframes bellRing { 0%,88%,100%{transform:rotate(0)} 90%{transform:rotate(-13deg)} 93%{transform:rotate(11deg)} 96%{transform:rotate(-7deg)} 98%{transform:rotate(3deg)} }
      /* Jednorazowy mocny dzwon po zalogowaniu (gdy jest nowa informacja) */
      .notif-bell.ring-once { animation: bellRingOnce 1.2s ease-in-out 1; transform-origin:50% 4px; }
      @keyframes bellRingOnce { 0%{transform:rotate(0)} 12%{transform:rotate(-20deg)} 26%{transform:rotate(17deg)} 40%{transform:rotate(-13deg)} 54%{transform:rotate(9deg)} 68%{transform:rotate(-5deg)} 82%{transform:rotate(2deg)} 100%{transform:rotate(0)} }
      /* Mobile (nav drawer 260px) — panel jako fixed nad viewportem, by się nie ucinał */
      @media (max-width: 1024px) {
        .notif-panel { position: fixed; top: 60px; left: 10px; right: 10px; width: auto; max-height: calc(100vh - 76px); overflow-y: auto; z-index: 1100; box-sizing: border-box; }
      }

/* === inline z index.html (linie 816-823) === */
      #page-getting-started .gs-welcome-callout { background: linear-gradient(135deg, rgba(0,160,210,.12), rgba(0,208,132,.08)); border: 1px solid rgba(0,160,210,.35); border-radius: 14px; padding: 18px 22px; margin: 0 auto 24px; max-width: 720px; text-align: left; }
      #page-getting-started .gswc-title { font-size: 18px; font-weight: 800; margin-bottom: 8px; }
      #page-getting-started .gswc-lead { font-size: 14px; margin: 0 0 10px; line-height: 1.5; }
      #page-getting-started .gswc-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
      #page-getting-started .gswc-list li { font-size: 14px; }
      #page-getting-started .gswc-how { font-size: 13.5px; color: var(--muted); margin: 0; line-height: 1.5; }

/* === inline z index.html (linie 944-994) === */
      #page-admin-feedback .afbx-root {
        --afx-bg:#0b1020; --afx-panel:#151c3a; --afx-panel2:#1a2148; --afx-border:#232b58;
        --afx-text:#e9ecf8; --afx-dim:#9aa3c7; --afx-mute:#6b73a0; --afx-accent:#7c83ff; --afx-accent2:#6ee7f9;
        background:var(--afx-bg); color:var(--afx-text); border:1px solid var(--afx-border);
        border-radius:16px; padding:20px; font-family:'Inter',system-ui,sans-serif;
      }
      #page-admin-feedback .afbx-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
      #page-admin-feedback .afbx-title { font-size:20px; font-weight:800; margin:0; }
      #page-admin-feedback .afbx-sub { color:var(--afx-mute); font-size:12.5px; margin:3px 0 0; }
      #page-admin-feedback .afbx-refresh { background:transparent; color:var(--afx-dim); border:1px solid var(--afx-border); border-radius:8px; padding:6px 12px; cursor:pointer; font-size:14px; }
      #page-admin-feedback .afbx-refresh:hover { color:var(--afx-text); background:rgba(255,255,255,.04); }
      #page-admin-feedback .afbx-filters { display:flex; gap:8px; margin:16px 0 14px; flex-wrap:wrap; }
      #page-admin-feedback .afbx-filter { background:var(--afx-panel); color:var(--afx-dim); border:1px solid var(--afx-border); border-radius:999px; padding:6px 14px; font-size:12.5px; font-weight:600; cursor:pointer; }
      #page-admin-feedback .afbx-filter.active { background:linear-gradient(135deg,rgba(124,131,255,.28),rgba(124,131,255,.14)); color:var(--afx-text); border-color:rgba(124,131,255,.45); }
      #page-admin-feedback .afbx-chat { display:grid; grid-template-columns:264px 1fr; gap:14px; height:560px; }
      #page-admin-feedback .afbx-threads { background:linear-gradient(180deg,var(--afx-panel),var(--afx-panel2)); border:1px solid var(--afx-border); border-radius:14px; overflow-y:auto; padding:8px; }
      #page-admin-feedback .afbx-thread { display:block; width:100%; text-align:left; background:transparent; border:1px solid transparent; border-radius:10px; padding:10px 12px; margin-bottom:4px; cursor:pointer; color:var(--afx-text); font-family:inherit; }
      #page-admin-feedback .afbx-thread:hover { background:rgba(124,131,255,.08); }
      #page-admin-feedback .afbx-thread.selected { background:rgba(124,131,255,.14); border-color:rgba(124,131,255,.4); }
      #page-admin-feedback .afbx-thread-top { display:flex; align-items:center; gap:6px; }
      #page-admin-feedback .afbx-thread-icon { flex:none; }
      #page-admin-feedback .afbx-thread-email { font-size:12.5px; font-weight:700; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      #page-admin-feedback .afbx-dot { width:8px; height:8px; border-radius:50%; background:var(--afx-accent2); box-shadow:0 0 6px var(--afx-accent2); flex:none; }
      #page-admin-feedback .afbx-check { color:#6ee7a8; font-size:12px; flex:none; }
      #page-admin-feedback .afbx-thread-preview { font-size:11.5px; color:var(--afx-mute); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      #page-admin-feedback .afbx-thread-date { font-size:10px; color:var(--afx-mute); margin-top:4px; }
      #page-admin-feedback .afbx-conv { background:linear-gradient(180deg,var(--afx-panel),var(--afx-panel2)); border:1px solid var(--afx-border); border-radius:14px; display:flex; flex-direction:column; overflow:hidden; }
      #page-admin-feedback .afbx-conv-head { padding:14px 16px; border-bottom:1px solid var(--afx-border); }
      #page-admin-feedback .afbx-conv-from { font-size:13.5px; font-weight:700; }
      #page-admin-feedback .afbx-conv-meta { display:block; font-size:11px; color:var(--afx-mute); margin-top:2px; }
      #page-admin-feedback .afbx-msgs { flex:1; overflow-y:auto; padding:18px 16px; display:flex; flex-direction:column; gap:12px; }
      #page-admin-feedback .afbx-row { display:flex; }
      #page-admin-feedback .afbx-row.in { justify-content:flex-start; }
      #page-admin-feedback .afbx-row.out { justify-content:flex-end; }
      #page-admin-feedback .afbx-bubble { max-width:78%; padding:11px 14px; border-radius:14px; font-size:13.5px; line-height:1.5; white-space:pre-wrap; word-break:break-word; }
      #page-admin-feedback .afbx-bubble.in { background:var(--afx-panel2); border:1px solid var(--afx-border); border-bottom-left-radius:4px; color:var(--afx-text); }
      #page-admin-feedback .afbx-bubble.out { background:linear-gradient(135deg,var(--afx-accent),#6068d8); color:#fff; border-bottom-right-radius:4px; }
      #page-admin-feedback .afbx-msg-meta { font-size:11px; color:var(--afx-muted); margin-top:3px; padding:0 4px; }
      #page-admin-feedback .afbx-composer { display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--afx-border); align-items:flex-end; }
      #page-admin-feedback .afbx-input { flex:1; background:var(--afx-bg); color:var(--afx-text); border:1px solid var(--afx-border); border-radius:10px; padding:9px 12px; font-size:13.5px; font-family:inherit; resize:none; }
      #page-admin-feedback .afbx-input:focus { outline:2px solid var(--afx-accent); outline-offset:-1px; }
      #page-admin-feedback .afbx-send { background:linear-gradient(135deg,var(--afx-accent),#6068d8); color:#fff; border:none; border-radius:10px; width:46px; height:40px; font-size:16px; cursor:pointer; flex:none; }
      #page-admin-feedback .afbx-send:hover { filter:brightness(1.12); }
      #page-admin-feedback .afbx-empty { color:var(--afx-mute); text-align:center; padding:40px 20px; font-size:13px; margin:auto; }
      @media (max-width:760px) {
        #page-admin-feedback .afbx-chat { grid-template-columns:1fr; height:auto; }
        #page-admin-feedback .afbx-threads { max-height:200px; }
        #page-admin-feedback .afbx-conv { min-height:440px; }
      }

/* === inline z index.html (linie 1019-1069) === */
      /* Look CF — wspólny scope dla paneli admina (Zarządzanie kursami + Grupy/Udostępnienia).
         Scope = .acp-root (oba ekrany mają <div class="acp-root">), nie #page-admin-courses. */
      .acp-root {
        --acp-bg:#0b1020; --acp-panel:#151c3a; --acp-panel2:#1a2148;
        --acp-border:#232b58; --acp-text:#e9ecf8; --acp-dim:#9aa3c7; --acp-mute:#6b73a0;
        --acp-accent:#7c83ff; --acp-accent2:#6ee7f9; --acp-warn:#f5b660; --acp-bad:#ff7396; --acp-good:#6ee7a8;
        background:var(--acp-bg); color:var(--acp-text);
        border:1px solid var(--acp-border); border-radius:16px; padding:24px;
        font-family:'Inter',system-ui,-apple-system,sans-serif;
      }
      .acp-root .acp-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
      .acp-root .acp-title { font-size:22px; font-weight:800; margin:0; }
      .acp-root .acp-sub { color:var(--acp-mute); font-size:13px; margin:4px 0 0; }
      .acp-root .acp-btn-ghost { background:transparent; color:var(--acp-dim); border:1px solid var(--acp-border); border-radius:8px; padding:8px 14px; font-size:13px; cursor:pointer; transition:all .12s; }
      .acp-root .acp-btn-ghost:hover { color:var(--acp-text); background:rgba(255,255,255,.04); }
      .acp-root .acp-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:18px 0 22px; }
      .acp-root .acp-kpi { position:relative; overflow:hidden; background:linear-gradient(135deg,rgba(124,131,255,.10) 0%,rgba(110,231,249,.05) 100%); border:1px solid var(--acp-border); border-radius:14px; padding:14px 16px; }
      .acp-root .acp-kpi::before { content:''; position:absolute; top:0; left:0; width:3px; height:100%; background:linear-gradient(180deg,var(--acp-accent),var(--acp-accent2)); opacity:.7; }
      .acp-root .acp-kpi .k-label { color:var(--acp-dim); font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
      .acp-root .acp-kpi .k-value { font-size:24px; font-weight:800; margin-top:6px; font-feature-settings:'tnum'; font-family:ui-monospace,'JetBrains Mono',Menlo,monospace; }
      .acp-root .acp-panel { background:linear-gradient(180deg,var(--acp-panel),var(--acp-panel2)); border:1px solid var(--acp-border); border-radius:14px; overflow:hidden; }
      .acp-root .acp-table-wrap { overflow-x:auto; }
      .acp-root table.acp-table { width:100%; border-collapse:separate; border-spacing:0; font-size:13.5px; }
      .acp-root .acp-table th, .acp-root .acp-table td { padding:12px 14px; text-align:left; border-bottom:1px solid var(--acp-border); vertical-align:middle; }
      .acp-root .acp-table th { background:var(--acp-panel2); color:var(--acp-dim); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.06em; position:sticky; top:0; z-index:2; }
      .acp-root .acp-table th.num, .acp-root .acp-table td.num { text-align:right; font-family:ui-monospace,'JetBrains Mono',Menlo,monospace; font-feature-settings:'tnum'; }
      .acp-root .acp-table tbody tr:hover td { background:rgba(124,131,255,.07); transition:background .09s; }
      .acp-root .acp-table tbody tr:last-child td { border-bottom:none; }
      .acp-root .acp-table .c-name { color:var(--acp-text); font-weight:700; font-size:14px; }
      .acp-root .acp-table .c-desc { color:var(--acp-mute); font-size:11.5px; margin-top:3px; max-width:340px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
      .acp-root .acp-chip { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:600; border:1px solid var(--acp-border); white-space:nowrap; }
      .acp-root .acp-chip.pub { background:rgba(110,231,249,.10); color:var(--acp-accent2); border-color:rgba(110,231,249,.35); }
      .acp-root .acp-chip.priv { background:rgba(245,182,96,.10); color:var(--acp-warn); border-color:rgba(245,182,96,.35); }
      .acp-root .acp-chip.type { background:rgba(255,255,255,.04); color:var(--acp-dim); }
      .acp-root .acp-act { display:inline-flex; gap:4px; flex-wrap:wrap; }
      .acp-root .acp-ibtn { background:var(--acp-panel); color:var(--acp-dim); border:1px solid var(--acp-border); border-radius:8px; padding:5px 9px; font-size:12px; cursor:pointer; white-space:nowrap; transition:all .12s; }
      .acp-root .acp-ibtn:hover { color:var(--acp-text); border-color:var(--acp-accent); background:rgba(124,131,255,.12); }
      .acp-root .acp-ibtn.danger:hover { color:var(--acp-bad); border-color:var(--acp-bad); background:rgba(255,115,150,.10); }
      .acp-root .acp-empty { text-align:center; color:var(--acp-mute); padding:36px; }
      @keyframes acpFade { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
      .acp-root .acp-fade { animation:acpFade .36s ease-out both; }
      .acp-root .acp-link { cursor:pointer; transition:color .12s; }
      .acp-root .acp-link:hover { color:var(--acp-accent2); text-decoration:underline; }
      .acp-root .acp-ibtn.primary { background:linear-gradient(135deg,var(--acp-accent),#6068d8); color:#fff; border-color:transparent; font-weight:600; }
      .acp-root .acp-ibtn.primary:hover { filter:brightness(1.12); color:#fff; }
      .acp-root .acp-detail-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px; }
      .acp-root .acp-course-card { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; background:linear-gradient(180deg,var(--acp-panel),var(--acp-panel2)); border:1px solid var(--acp-border); border-radius:14px; padding:18px 20px; margin-bottom:18px; }
      .acp-root .acp-course-meta { min-width:0; }
      .acp-root .acp-input { width:100%; background:var(--acp-bg); color:var(--acp-text); border:1px solid var(--acp-border); border-radius:8px; padding:8px 10px; font-size:14px; font-family:inherit; margin-bottom:8px; }
      .acp-root .acp-input:focus { outline:2px solid var(--acp-accent); outline-offset:-1px; }
      .acp-root .acp-textarea { resize:vertical; line-height:1.4; }
      /* Grupy/Udostępnienia — formularz + kod (look CF, scope .acp-root) */
      .acp-root .abp-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:14px; max-width:920px; }
      .acp-root .abp-picks { max-height:240px; overflow-y:auto; display:flex; flex-direction:column; gap:4px; border:1px solid var(--acp-border); border-radius:10px; padding:8px; background:var(--acp-bg); }
      .acp-root .abp-pick { display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:8px; cursor:pointer; font-size:13px; color:var(--acp-text); }
      .acp-root .abp-pick:hover { background:rgba(124,131,255,.10); }
      .acp-root .abp-pick-name { flex:1; }
      .acp-root .abp-code { font-family:ui-monospace,'JetBrains Mono',Menlo,monospace; font-weight:700; letter-spacing:.5px; background:rgba(110,231,249,.10); border:1px solid rgba(110,231,249,.35); color:var(--acp-accent2); border-radius:7px; padding:3px 9px; cursor:pointer; white-space:nowrap; }
      .acp-root .abp-per-row td { padding-top:0!important; background:rgba(124,131,255,.05); }
      .acp-root .abp-per { display:flex; justify-content:space-between; gap:12px; font-size:11.5px; color:var(--acp-mute); padding:2px 8px; }
      .acp-root .abp-mem { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:9px 10px; border-bottom:1px solid var(--acp-border); }
      .acp-root .abp-mem:last-child { border-bottom:none; }
      .acp-root .abp-mem-who { font-size:13px; color:var(--acp-text); font-weight:600; }

/* === inline z index.html (linie 3435-3472) === */
      /* Własny scroll-kontener o ograniczonej wysokości — w tej apce window scrolluje,
         a main{overflow:auto} nie scrolluje (app ma min-height, nie height). Sticky działa
         tylko w realnie scrollowanym, bounded kontenerze (jak nagłówki tabel admina). */
      #page-bonus2 .b2-scroll { height:calc(100vh - 64px); overflow-y:auto; border-radius:12px; -webkit-overflow-scrolling:touch }
      @media (max-width:1024px){ #page-bonus2 .b2-scroll { height:calc(100vh - 88px) } }
      @media (max-width:640px){ #page-bonus2 .b2-scroll { height:calc(100vh - 72px) } }
      /* Belka przyklejona do góry scroll-kontenera — webinary wjeżdżają pod nią (frosted ~25%) */
      #page-bonus2 .b2-head { position:sticky; top:0; z-index:30; text-align:center;
        margin:0; padding:18px 32px 16px;
        background:rgba(11,16,32,.85); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
        border-bottom:1px solid rgba(0,160,210,.25) }
      #page-bonus2 .b2-count { display:inline-block; margin-top:8px; font-size:12px; font-weight:600; color:#7fdcff; background:rgba(0,160,210,.12); border:1px solid rgba(0,160,210,.3); padding:4px 12px; border-radius:999px }
      #page-bonus2 .b2-disclaimer { max-width:820px; margin:0 auto 84px; padding:10px 16px; border-left:3px solid rgba(0,160,210,.35);
        text-align:left; font-size:11px; line-height:1.5; color:#6b7794; background:rgba(255,255,255,.02); border-radius:0 6px 6px 0 }
      #page-bonus2 .b2-disclaimer:empty { display:none }
      #page-bonus2 .b2-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; padding:26px 24px 110px }
      @media (max-width:1240px){ #page-bonus2 .b2-grid{ grid-template-columns:repeat(3,1fr) } }
      @media (max-width:1024px){ #page-bonus2 .b2-grid{ grid-template-columns:repeat(2,1fr); padding:0 16px 96px } }
      @media (max-width:640px){ #page-bonus2 .b2-grid{ grid-template-columns:1fr; padding:0 12px 96px } }
      #page-bonus2 .b2-card { background:#141a30; border:1px solid #232c4a; border-radius:16px; overflow:hidden; display:flex; flex-direction:column; cursor:pointer;
        transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s, border-color .22s; will-change:transform }
      #page-bonus2 .b2-card:hover { transform:perspective(800px) translateY(-6px) scale(1.025); border-color:#00a0d2; box-shadow:0 14px 36px rgba(0,160,210,.28) }
      #page-bonus2 .b2-media { position:relative; aspect-ratio:16/9; background:#0f1428 center/cover no-repeat; display:flex; align-items:center; justify-content:center; overflow:hidden }
      #page-bonus2 .b2-thumb { position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .3s }
      #page-bonus2 .b2-card:hover .b2-thumb { transform:scale(1.06) }
      #page-bonus2 .b2-media::after { content:""; position:absolute; inset:0; background:rgba(8,12,26,.32) }
      #page-bonus2 .b2-date { position:absolute; top:10px; right:12px; z-index:2; font-size:12px; font-weight:600; color:#cdd6ee; background:rgba(0,0,0,.55); padding:3px 9px; border-radius:8px }
      #page-bonus2 .b2-play { position:relative; z-index:2; width:60px; height:60px; border-radius:50%; background:rgba(255,255,255,.14); border:2px solid rgba(255,255,255,.75); display:flex; align-items:center; justify-content:center; transition:.18s }
      #page-bonus2 .b2-card:hover .b2-play { background:#00a0d2; border-color:#00a0d2; transform:scale(1.1) }
      #page-bonus2 .b2-play svg { width:23px; height:23px; fill:#fff; margin-left:3px }
      #page-bonus2 .b2-body { padding:15px 17px; flex:1; display:flex; flex-direction:column }
      #page-bonus2 .b2-title { font-size:15.5px; font-weight:700; line-height:1.35; color:#e6ebf5; margin-bottom:7px }
      #page-bonus2 .b2-desc { font-size:13px; color:#b9c4e0; line-height:1.5; margin-bottom:11px; flex:1 }
      #page-bonus2 .b2-author { font-size:12.5px; color:#aab8d8 }
      #page-bonus2 .b2-author .nm { font-weight:600; color:#00d084 }
      @media (prefers-reduced-motion: reduce) {
        #page-bonus2 .b2-card, #page-bonus2 .b2-thumb, #page-bonus2 .b2-play { transition:none }
        #page-bonus2 .b2-card:hover { transform:none }
      }
      /* ── Półki: poziom 1 (stosy kolekcji) ── */
      #page-bonus2 .b2-head { position:sticky }
      #page-bonus2 .b2-back { position:absolute; left:24px; top:22px; z-index:31; display:inline-flex; align-items:center; gap:6px;
        font-size:13px; font-weight:600; color:#7fdcff; background:rgba(0,160,210,.12); border:1px solid rgba(0,160,210,.32);
        padding:6px 13px; border-radius:10px; cursor:pointer; transition:background .15s }
      #page-bonus2 .b2-back:hover { background:rgba(0,160,210,.22) }
      #page-bonus2 .b2-back:focus-visible { outline:2px solid #7fdcff; outline-offset:2px }
      /* mobile: przycisk powrotu w normalnym flow NAD tytułem (nie absolutnie — nachodził na zawijany tytuł) */
      @media (max-width:640px){ #page-bonus2 .b2-back { position:static; margin:0 0 10px } }
      #page-bonus2 .b2-shelf { display:grid; grid-template-columns:repeat(3,1fr); gap:26px 22px; padding:30px 24px 110px }
      @media (max-width:1024px){ #page-bonus2 .b2-shelf{ grid-template-columns:repeat(2,1fr); padding:6px 16px 96px } }
      @media (max-width:640px){ #page-bonus2 .b2-shelf{ grid-template-columns:1fr; padding:4px 12px 96px } }
      #page-bonus2 .b2-stack { position:relative; cursor:pointer; transition:transform .2s }
      #page-bonus2 .b2-stack:hover { transform:translateY(-5px) }
      #page-bonus2 .b2-stack:focus-visible { outline:2px solid #7fdcff; outline-offset:5px; border-radius:14px }
      #page-bonus2 .b2-stack-media { position:relative; aspect-ratio:16/9; margin:6px 8px 0 0 }
      #page-bonus2 .b2-stack-media::before, #page-bonus2 .b2-stack-media::after { content:""; position:absolute; inset:0;
        border-radius:14px; background:#1a2238; border:1px solid #2c375a; z-index:0 }
      #page-bonus2 .b2-stack-media::before { transform:translate(11px,11px); opacity:.5 }
      #page-bonus2 .b2-stack-media::after  { transform:translate(6px,6px); opacity:.8 }
      #page-bonus2 .b2-stack-thumb { position:absolute; inset:0; z-index:1; border-radius:14px; background:#0f1428 center/cover no-repeat;
        border:1px solid #2c375a; box-shadow:0 10px 26px rgba(0,0,0,.35); transition:border-color .2s, box-shadow .2s }
      #page-bonus2 .b2-stack:hover .b2-stack-thumb { border-color:#00a0d2; box-shadow:0 14px 34px rgba(0,160,210,.3) }
      #page-bonus2 .b2-stack-count { position:absolute; z-index:2; bottom:10px; right:10px; font-size:12px; font-weight:700; color:#fff;
        background:rgba(0,160,210,.92); padding:4px 11px; border-radius:999px; box-shadow:0 2px 8px rgba(0,0,0,.3) }
      #page-bonus2 .b2-stack-body { padding:18px 2px 0 }
      #page-bonus2 .b2-stack-title { font-size:17px; font-weight:700; line-height:1.3; color:#e6ebf5; margin-bottom:6px }
      #page-bonus2 .b2-stack-desc { font-size:13px; color:#b9c4e0; line-height:1.5 }
      @media (prefers-reduced-motion: reduce) {
        #page-bonus2 .b2-stack, #page-bonus2 .b2-stack-thumb { transition:none }
        #page-bonus2 .b2-stack:hover { transform:none }
      }
      /* ── Tryb REGAŁ: kolekcje na 3 deskach (tło bookcase.jpg) ── */
      #page-bonus2 .b2-shelf.bookcase { display:block; padding:22px 16px 80px }
      #page-bonus2 .b2-bookcase-wrap { position:relative; max-width:1760px; margin:0 auto }
      #page-bonus2 .b2-bookcase-row { display:flex; gap:24px; justify-content:center; align-items:flex-start }
      #page-bonus2 .b2-bookcase { position:relative; flex:1 1 0; min-width:0; max-width:560px;
        aspect-ratio:656/820; background:url('../img/bookcase.jpg') center/contain no-repeat;
        filter:drop-shadow(0 20px 44px rgba(0,0,0,.55)) }
      #page-bonus2 .b2-book { position:absolute; left:14.5%; right:14.5%; display:flex; align-items:flex-end; gap:13px;
        cursor:pointer; transition:transform .18s }
      /* spód kafelka = górna krawędź deski (wykryte z grafiki: 34.5% / 57.2% / 80.5%) */
      #page-bonus2 .b2-book:nth-child(1){ top:15%;   height:18.5% }
      #page-bonus2 .b2-book:nth-child(2){ top:37.7%; height:18.5% }
      #page-bonus2 .b2-book:nth-child(3){ top:61%;   height:18.5% }
      #page-bonus2 .b2-book:hover { transform:translateY(-3px) }
      #page-bonus2 .b2-book:focus-visible { outline:2px solid #7fdcff; outline-offset:4px; border-radius:8px }
      #page-bonus2 .b2-book-thumb { flex:0 0 auto; height:80%; aspect-ratio:16/9; border-radius:6px;
        background:#0f1428 center/cover no-repeat; border:1px solid #4a3320;
        box-shadow:0 7px 16px rgba(0,0,0,.6); transition:border-color .18s, box-shadow .18s }
      #page-bonus2 .b2-book:hover .b2-book-thumb { border-color:#00a0d2; box-shadow:0 9px 22px rgba(0,160,210,.5) }
      #page-bonus2 .b2-book-info { flex:1 1 auto; min-width:0; padding-bottom:7px }
      #page-bonus2 .b2-book-title { font-size:15px; font-weight:800; line-height:1.2; color:#f3e9d8;
        text-shadow:0 1px 4px rgba(0,0,0,.85) }
      #page-bonus2 .b2-book-count { margin-top:5px; display:inline-block; font-size:11.5px; font-weight:700; color:#fff;
        background:rgba(0,160,210,.92); padding:2px 10px; border-radius:999px; box-shadow:0 2px 7px rgba(0,0,0,.4) }
      @media (max-width:600px){ #page-bonus2 .b2-bookcase{ max-width:380px } #page-bonus2 .b2-book-title{ font-size:13px } }
      @media (prefers-reduced-motion: reduce) {
        #page-bonus2 .b2-book, #page-bonus2 .b2-book-thumb { transition:none }
        #page-bonus2 .b2-book:hover { transform:none }
      }
      /* warstwa kolekcji (przewijana) + strzałki + kropki stron */
      #page-bonus2 .b2-books { position:absolute; inset:0; will-change:transform, opacity }
      #page-bonus2 .b2-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:6; width:40px; height:40px;
        border:none; border-radius:50%; background:rgba(0,160,210,.92); color:#fff; font-size:24px; line-height:1; cursor:pointer;
        display:flex; align-items:center; justify-content:center; box-shadow:0 5px 16px rgba(0,0,0,.45); transition:background .15s, opacity .15s }
      #page-bonus2 .b2-nav.prev { left:-10px } #page-bonus2 .b2-nav.next { right:-10px }
      #page-bonus2 .b2-nav:hover { background:#00b4e6 }
      #page-bonus2 .b2-nav:focus-visible { outline:2px solid #7fdcff; outline-offset:2px }
      #page-bonus2 .b2-nav:disabled { opacity:.22; cursor:default }
      #page-bonus2 .b2-pagedots { position:absolute; left:0; right:0; bottom:-24px; display:flex; gap:7px; justify-content:center }
      #page-bonus2 .b2-pagedots span { width:8px; height:8px; border-radius:50%; background:#2c375a; transition:background .15s }
      #page-bonus2 .b2-pagedots span.on { background:#00a0d2 }

/* === inline z index.html (linie 3706-3733) === */
  #modal-contact .cchat-box { --cc-bg:#0b1020; --cc-panel:#151c3a; --cc-panel2:#1a2148; --cc-border:#232b58; --cc-text:#e9ecf8; --cc-dim:#9aa3c7; --cc-mute:#6b73a0; --cc-accent:#7c83ff;
    background:var(--cc-bg); color:var(--cc-text); border:1px solid var(--cc-border); border-radius:16px; padding:0; overflow:hidden; font-family:'Inter',system-ui,sans-serif; }
  #modal-contact .cchat-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:18px 20px; border-bottom:1px solid var(--cc-border); }
  #modal-contact .cchat-head h3 { margin:0; font-size:18px; font-weight:800; }
  #modal-contact .cchat-head p { margin:4px 0 0; font-size:12.5px; color:var(--cc-mute); }
  #modal-contact .cchat-close { background:transparent; border:none; color:var(--cc-dim); font-size:18px; cursor:pointer; line-height:1; }
  #modal-contact .cchat-close:hover { color:var(--cc-text); }
  #modal-contact .cchat-msgs { flex:1; min-height:180px; max-height:46vh; overflow-y:auto; padding:18px 16px; display:flex; flex-direction:column; gap:10px; }
  #modal-contact .cchat-empty { color:var(--cc-mute); text-align:center; margin:auto; font-size:13px; }
  #modal-contact .cchat-row { display:flex; }
  #modal-contact .cchat-row.out { justify-content:flex-end; }
  #modal-contact .cchat-row.in { justify-content:flex-start; }
  #modal-contact .cchat-bubble { max-width:80%; padding:10px 13px; border-radius:14px; font-size:13.5px; line-height:1.5; white-space:pre-wrap; word-break:break-word; }
  #modal-contact .cchat-bubble.out { background:linear-gradient(135deg,var(--cc-accent),#6068d8); color:#fff; border-bottom-right-radius:4px; }
  #modal-contact .cchat-bubble.in { background:var(--cc-panel2); border:1px solid var(--cc-border); color:var(--cc-text); border-bottom-left-radius:4px; }
  #modal-contact .cchat-meta { font-size:10.5px; color:var(--cc-mute); margin:3px 4px 0; }
  #modal-contact .cchat-composer { border-top:1px solid var(--cc-border); padding:12px 14px; }
  #modal-contact .cchat-types { display:flex; gap:8px; margin-bottom:8px; }
  #modal-contact .cchat-type { background:var(--cc-panel); color:var(--cc-dim); border:1px solid var(--cc-border); border-radius:999px; padding:5px 12px; font-size:12px; font-weight:600; cursor:pointer; }
  #modal-contact .cchat-type.active { background:linear-gradient(135deg,rgba(124,131,255,.28),rgba(124,131,255,.14)); color:var(--cc-text); border-color:rgba(124,131,255,.45); }
  #modal-contact .cchat-input-row { display:flex; gap:8px; align-items:flex-end; }
  #modal-contact .cchat-input { flex:1; background:var(--cc-bg); color:var(--cc-text); border:1px solid var(--cc-border); border-radius:10px; padding:9px 12px; font-size:13.5px; font-family:inherit; resize:none; }
  #modal-contact .cchat-input:focus { outline:2px solid var(--cc-accent); outline-offset:-1px; }
  #modal-contact .cchat-send { background:linear-gradient(135deg,var(--cc-accent),#6068d8); color:#fff; border:none; border-radius:10px; width:46px; height:40px; font-size:16px; cursor:pointer; flex:none; }
  #modal-contact .cchat-send:hover { filter:brightness(1.12); }
  #modal-contact .cchat-err { font-size:12px; color:#ff7396; min-height:14px; margin-top:6px; }