/* SymPRM - wspolny blok: wsparcie (Suppi) + inne aplikacje. Zrodlo: wspolne/suite.css, kopiowane do <app>/src przez wspolne/wstaw.py */
:root{--support:#be123c; --support-ink:#ffffff; --support-wash:rgba(190,18,60,.08)}
@media all{:root:not([data-theme="light"]){--support:#fb7185; --support-ink:#2a0710; --support-wash:rgba(251,113,133,.12)}}
:root[data-theme="dark"]{--support:#fb7185; --support-ink:#2a0710; --support-wash:rgba(251,113,133,.12)}

.btn-support{display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:99px; font:inherit; font-size:13px; font-weight:700;
  color:var(--support); background:var(--support-wash); border:1px solid color-mix(in oklab, var(--support) 55%, transparent); text-decoration:none; white-space:nowrap;
  transition:background .12s ease, color .12s ease}
.btn-support:hover{background:var(--support); color:var(--support-ink)}
.btn-support:focus-visible{outline:2.5px solid var(--support); outline-offset:2px}
.btn-support svg{flex:none}
@media (max-width:480px){ .btn-support .lbl{display:none} .btn-support{padding:7px 9px} }

.suite{display:flex; flex-direction:column; gap:14px; margin-top:22px}
.suite[hidden]{display:none}
.suite-support{display:flex; align-items:center; gap:16px; padding:18px 20px; border-radius:14px; background:var(--surface);
  border:1px solid color-mix(in oklab, var(--support) 35%, var(--border)); border-left:4px solid var(--support); box-shadow:var(--shadow)}
.suite-heart{flex:none; width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--support-wash); color:var(--support)}
.suite-support-body{flex:1 1 auto; min-width:0}
.suite-support h2{font-size:17px; margin:0 0 3px; color:var(--ink)}
.suite-support p{margin:0; font-size:13.5px; color:var(--ink-2); line-height:1.5}
.suite-cta{flex:none; display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:10px; background:var(--support); color:var(--support-ink);
  font-weight:700; font-size:14.5px; text-decoration:none; white-space:nowrap; transition:filter .12s ease, transform .12s ease}
.suite-cta:hover{filter:brightness(1.08); transform:translateY(-1px)}
.suite-cta:focus-visible{outline:3px solid var(--support); outline-offset:2px}
.suite-title{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:8px 0 0}
.suite-apps{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:12px}
.suite-app{display:flex; align-items:center; gap:12px; padding:14px; border-radius:12px; background:var(--surface); border:1px solid var(--border);
  text-decoration:none; color:var(--ink); box-shadow:var(--shadow); transition:border-color .12s ease, transform .12s ease}
.suite-app:hover{border-color:var(--accent); transform:translateY(-1px)}
.suite-app:focus-visible{outline:2.5px solid var(--accent); outline-offset:2px}
.suite-app img{width:44px; height:44px; flex:none; border-radius:10px; background:#fff; padding:3px; box-shadow:0 1px 3px rgba(0,0,0,.18)}
.suite-app-body{display:flex; flex-direction:column; min-width:0; flex:1 1 auto; line-height:1.3}
.suite-app b{font-size:15px}
.suite-app small{font-size:12.5px; color:var(--muted)}
.suite-app .suite-tag{align-self:flex-start; margin-top:4px; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent)}
.suite-app .arr{flex:none; color:var(--muted)}
.suite-app:hover .arr{color:var(--accent)}
@media (max-width:560px){
  .suite-support{flex-wrap:wrap}
  .suite-support-body{flex-basis:calc(100% - 60px)}
  .suite-cta{width:100%; justify-content:center}
}
@media (prefers-reduced-motion:reduce){ .suite-app, .suite-cta, .btn-support{transition:none} }