.owner-panel {
  max-width:1100px;
  margin:1.5rem auto
}
.owner-panel>.eyebrow {
  color:var(--accent)
}
.owner-panel h1 {
  font-size:clamp(1.7rem,4vw,2.5rem);
  line-height:1.15;
  max-width:760px
}
.owner-progress {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:24px 0
}
.owner-progress button {
  min-height:54px;
  text-align:left;
  border:1px solid var(--line);
  white-space:normal
}
.owner-progress [aria-current=step] {
  background:var(--accent);
  color:#061522;
  font-weight:750
}
.owner-progress [data-complete=true]:not([aria-current=step]) {
  border-color:#26896e
}
.owner-panel>.card {
  padding:clamp(16px,3vw,32px)
}
.owner-panel .sffield {
  margin:16px 0
}
.owner-panel textarea {
  min-height:110px
}
.owner-actions {
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:28px;
  padding-top:16px;
  border-top:1px solid var(--line)
}
.owner-gallery {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:12px
}
.owner-gallery figure {
  margin:0;
  max-width:280px
}
.owner-gallery img,.owner-gallery video {
  width:100%;
  height:150px;
  object-fit:contain;
  border-radius:12px;
  background:#132339
}
.owner-gallery figcaption {
  font-size:.85rem;
  overflow-wrap:anywhere
}
.owner-accounts .sfcheckfield {
  padding:14px;
  border:1px solid var(--line);
  border-radius:12px
}
.owner-person {
  padding:12px 0;
  border-bottom:1px solid var(--line)
}
.owner-panel button,.owner-panel summary,.owner-panel input:not([type=checkbox]) {
  min-height:44px
}
.owner-panel button {
  white-space:normal;
  overflow-wrap:anywhere
}
.owner-panel .sfcheckfield input {
  width:24px;
  height:24px;
  flex-shrink:0
}
.owner-panel .sfcheckfield label {
  line-height:1.5
}
.owner-panel .sfplan {
  margin:24px 0
}
.owner-panel .sfcalendargrid {
  max-height:520px;
  overflow:auto
}
.owner-panel .sfrule {
  margin-top:16px
}
.owner-panel [hidden] {
  display:none!important
}
.owner-panel :focus-visible {
  outline:3px solid #65a9ff;
  outline-offset:3px
}
@media(max-width:600px) {
  .owner-progress {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px
}
.owner-progress button {
  font-size:.83rem;
  padding:10px
}
.owner-panel {
  margin:16px 0
}
.owner-actions {
  flex-direction:column-reverse
}
.owner-actions button {
  width:100%
}
.owner-panel .card {
  padding:16px
}
.owner-panel .sfcolumns {
  grid-template-columns:minmax(0,1fr)
}
.owner-panel input,.owner-panel select,.owner-panel textarea {
  max-width:100%;
  min-width:0
}
.owner-panel .sfcalendargrid {
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.owner-panel .sfweekdays {
  gap:4px
}
.owner-panel .sfweekdays label {
  min-width:34px
}
.owner-panel .sfdateadd {
  flex-wrap:wrap
}
.owner-panel .sfdateadd>* {
  max-width:100%
}

}

/* SocialFlow / Atelier — RC4 semantic design tokens, no external font requests. */
:root {
  --sf-bg:#f3f5f7;
  --sf-surface:#fff;
  --sf-ink:#172d3b;
  --sf-muted:#536979;
  --sf-border:#dbe3e9;
  --sf-accent:#087568;
  --sf-soft:#e3f3ef;
  --sf-shadow:0 6px 24px #102b3b06;
  --blue:#087568;
  --accent:#087568;
  --line:var(--sf-border);
  --muted:var(--sf-muted);
  font-family:Inter,'Segoe UI',system-ui,sans-serif;
  color:var(--sf-ink);
  background:var(--sf-bg);
  font-size:15px;
  line-height:1.6
}

:root[data-theme=dark] {
  --sf-bg:#0e1922;
  --sf-surface:#152630;
  --sf-ink:#e8f1f5;
  --sf-muted:#a4b9c4;
  --sf-border:#304650;
  --sf-accent:#75d9bb;
  --sf-soft:#203e39;
  --blue:#75d9bb;
  --accent:#75d9bb;
  --line:var(--sf-border);
  --muted:var(--sf-muted);
  color:var(--sf-ink);
  background:var(--sf-bg)
}

body {
  background:var(--sf-bg);
  color:var(--sf-ink)
}
h1,h2,h3 {
  color:var(--sf-ink);
  letter-spacing:-.035em;
  line-height:1.2
}
h1 {
  font-size:clamp(28px,3vw,42px);
  font-weight:750
}
h2 {
  font-size:24px
}
h3 {
  font-size:19px
}
.hint,small,.sfcalempty {
  color:var(--sf-muted)
}
.eyebrow {
  color:var(--sf-accent);
  font-size:10px;
  letter-spacing:.16em;
  font-weight:750
}
.top {
  max-width:1440px;
  padding:24px 32px;
  gap:12px
}
.brand {
  color:var(--sf-ink);
  letter-spacing:-1.5px
}
.brand span {
  color:var(--sf-accent)
}
.brand small {
  letter-spacing:.16em;
  font-size:9px;
  color:var(--sf-muted)
}
main {
  max-width:1440px;
  padding:8px 32px 48px
}
.card,.owner-panel>.card,.sfrule,.sfcalday,.postrow,.preview {
  background:var(--sf-surface);
  border:1px solid var(--sf-border);
  border-radius:18px;
  box-shadow:var(--sf-shadow)
}
.card {
  padding:28px;
  margin-bottom:20px
}
.owner-panel>.card {
  padding:28px
}
.owner-panel {
  max-width:100%;
  margin:24px 0
}
.owner-panel h1 {
  max-width:780px
}
.primary {
  background:var(--sf-accent);
  color:#fff;
  box-shadow:none
}
.primary:hover:not(:disabled) {
  background:#08685f;
  color:#fff
}
:root[data-theme=dark] .primary {
  color:#0e2924
}
:root[data-theme=dark] .primary:hover {
  background:#95e7cf;
  color:#0e2924
}
.secondary {
  background:var(--sf-soft);
  border:1px solid transparent;
  color:var(--sf-ink)
}
.quiet {
  color:var(--sf-muted)
}
button {
  border-radius:10px;
  font-weight:650;
  min-height:46px;
  transition:background .16s,box-shadow .16s,transform .16s
}
button:hover:not(:disabled) {
  box-shadow:0 2px 9px #102c3a10
}
button:active:not(:disabled) {
  transform:translateY(1px)
}
input,textarea,select {
  border:1px solid var(--sf-border);
  border-radius:10px;
  background:var(--sf-surface);
  color:var(--sf-ink);
  min-height:48px;
  padding:12px 14px
}
input::placeholder,textarea::placeholder {
  color:var(--sf-muted);
  opacity:.8
}
label {
  color:var(--sf-ink);
  font-weight:650;
  font-size:14px
}
input[type=checkbox] {
  accent-color:var(--sf-accent);
  min-height:24px;
  width:24px;
  height:24px
}
fieldset {
  border-color:var(--sf-border);
  border-radius:12px;
  min-width:0
}
summary {
  min-height:46px;
  cursor:pointer;
  font-weight:650;
  color:var(--sf-ink);
  padding:10px 0
}
.sffield {
  min-width:0
}
.sfcolumns>* {
  min-width:0
}
a {
  color:var(--sf-accent)
}
:focus-visible {
  outline:3px solid #418fda!important;
  outline-offset:3px
}
.sfnav {
  background:var(--sf-surface);
  border:1px solid var(--sf-border);
  box-shadow:none
}
.sfnav button {
  display:flex;
  align-items:center;
  gap:12px;
  text-align:left;
  color:var(--sf-muted);
  font-size:14px
}
.sfnav button[aria-current=page] {
  background:var(--sf-soft);
  color:var(--sf-accent)
}
.sf-icon {
  width:21px;
  height:21px;
  flex:0 0 21px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round
}
.modebar {
  background:var(--sf-surface);
  border:1px solid var(--sf-border);
  border-radius:12px;
  font-size:12px;
  padding:12px 16px;
  box-shadow:none
}
.modebar #modeHelp {
  color:var(--sf-muted)
}
.modebar button {
  font-size:12px
}
.sfhero {
  background:linear-gradient(115deg,#123c40,#1b5558);
  color:#f1fcf7;
  border:0;
  position:relative;
  overflow:hidden;
  padding:32px
}
.sfhero h2 {
  color:#fff;
  font-size:clamp(28px,3vw,40px);
  max-width:720px
}
.sfhero p {
  color:#d1e7e5;
  max-width:700px
}
.sfhero .eyebrow {
  color:#9ce4c8
}
.sfhero .secondary {
  background:#ffffff16;
  color:#fff
}
.sfhero .primary {
  background:#b5edcf;
  color:#143e35
}
.sfmetrics {
  gap:16px
}
.sfmetric {
  padding:22px;
  min-width:0
}
.sfmetric strong {
  font-size:clamp(20px,2.1vw,30px);
  letter-spacing:-.04em;
  color:var(--sf-ink)
}
.sfmetric .hint {
  font-size:12px
}
.sfaipolicy,.sfblockedwarning,.sffallbackwarning {
  border-radius:12px
}
.sfonboarding {
  gap:12px
}
.sfonboard {
  border-color:var(--sf-border);
  background:var(--sf-bg);
  color:var(--sf-ink)
}
.owner-progress {
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:6px;
  margin:24px 0
}
.owner-progress button {
  font-size:12px;
  min-height:64px;
  border:1px solid var(--sf-border);
  padding:12px;
  color:var(--sf-muted)
}
.owner-progress [aria-current=step] {
  background:var(--sf-accent);
  color:white
}
.owner-progress [data-complete=true]:not([aria-current=step]) {
  background:var(--sf-soft);
  border-color:var(--sf-border);
  color:var(--sf-ink)
}
.owner-actions {
  position:static;
  bottom:auto;
  background:var(--sf-surface);
  padding:16px 0;
  margin-bottom:0;
  z-index:2
}
.sfweekdays label {
  background:var(--sf-bg);
  border-color:var(--sf-border);
  color:var(--sf-ink)
}
.sfweekdays label:has(:checked) {
  background:var(--sf-soft);
  border-color:var(--sf-accent);
  color:var(--sf-accent)
}
.sfplanhead {
  padding:16px;
  border-radius:12px;
  background:var(--sf-soft);
  color:var(--sf-ink)
}
.sfcalendargrid {
  gap:8px
}
.sfcalday {
  padding:12px;
  min-height:120px
}
.sfcaldate {
  color:var(--sf-muted)
}
.emptyday {
  background:var(--sf-bg);
  box-shadow:none
}
.sfslot {
  border-radius:8px
}
.sfgrid {
  gap:20px
}
.sfgrid img {
  border-radius:12px
}
.empty {
  background:var(--sf-surface);
  border:1px dashed var(--sf-border);
  border-radius:16px;
  padding:40px 24px
}
.postrow {
  padding:20px
}
.badge {
  border-radius:6px;
  font-size:11px;
  font-weight:700
}
.warning,.sfissue {
  color:#7b4b0c;
  background:#fff4de;
  border:1px solid #ebcf9c;
  border-radius:10px;
  padding:12px
}
.success {
  color:#145b49;
  background:#e7f5ef;
  border:1px solid #add8c5;
  border-radius:10px;
  padding:12px
}
.sfdanger {
  background:#fbe9e9;
  color:#9c2730;
  border:1px solid #eac0c5
}
:root[data-theme=dark] .sfdanger {
  background:#49252b;
  color:#ffbfc2
}
.login {
  max-width:1000px;
  margin:40px auto 60px;
  padding:48px;
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:64px;
  position:relative;
  background:var(--sf-surface);
  overflow:hidden
}
.login>h1 {
  font-size:clamp(34px,4vw,54px);
  grid-column:1;
  grid-row:2
}
.login>.eyebrow {
  grid-column:1;
  grid-row:1
}
.login>p:not(.hint) {
  grid-column:1;
  grid-row:3;
  color:var(--sf-muted)
}
.login form {
  grid-column:2;
  grid-row:1/5;
  align-self:center
}
.login>.hint {
  grid-column:1;
  font-size:12px
}
.login form button {
  width:100%;
  margin-top:24px
}
.login:before {
  content:'';
  position:absolute;
  width:260px;
  height:260px;
  border:60px solid var(--sf-soft);
  border-radius:50%;
  bottom:-210px;
  left:20px;
  pointer-events:none
}
.sitefooter {
  color:var(--sf-muted);
  font-size:11px
}
.rc4-summary {
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:20px;
  margin:20px 0
}
.rc4-summary .card {
  margin:0
}
.rc4-next {
  font-size:26px;
  font-weight:700;
  letter-spacing:-.035em
}
.rc4-plan-item {
  padding:12px 0;
  border-top:1px solid var(--sf-border);
  display:flex;
  justify-content:space-between;
  gap:12px
}
.rc4-preview img,.rc4-preview video {
  max-height:260px;
  object-fit:contain;
  width:100%;
  border-radius:12px
}
.rc4-preview p {
  white-space:pre-wrap
}
.rc4-actions {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:20px
}
.rc4-budget {
  width:100%;
  accent-color:var(--sf-accent);
  height:12px
}
.sfnav .rc4-more {
  display:none
}
.rc4-loading {
  height:3px;
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50;
  background:linear-gradient(90deg,transparent,var(--sf-accent),transparent);
  animation:sf-load 1.2s infinite
}
.rc4-loading[hidden] {
  display:none
}
@keyframes sf-load {
  from {
  transform:translateX(-80%)
}
to {
  transform:translateX(80%)
}

}

@media(min-width:1100px) {
  #app {
  display:block
}
body:has(#app:not([hidden])) main {
  padding-left:270px
}
body:has(#app:not([hidden])) .sfnav {
  position:fixed;
  left:max(24px,calc((100vw - 1440px)/2 + 24px));
  top:104px;
  width:220px;
  bottom:28px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  padding:14px;
  gap:6px;
  border-radius:18px;
  z-index:4;
  overflow:auto
}
.sfnav:before {
  content:'TWOJA PRZESTRZEŃ';
  font-size:10px;
  letter-spacing:.16em;
  color:var(--sf-muted);
  padding:12px
}
.sfnav button {
  width:100%;
  white-space:normal
}
.sfnav button:last-child {
  margin-top:auto
}

}

@media(max-width:1099px) {
  .sfnav {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
  padding:8px;
  overflow:visible
}
.sfnav button {
  white-space:normal;
  font-size:12px
}
.owner-progress {
  grid-template-columns:repeat(3,minmax(0,1fr))
}

}

@media(max-width:600px) {
  main {
  padding:8px 16px 110px
}
.top {
  padding:20px 16px
}
.brand {
  font-size:24px
}
.top button {
  font-size:12px;
  padding:10px
}
.sfnav {
  position:fixed;
  top:auto;
  bottom:0;
  left:0;
  right:0;
  z-index:15;
  border-radius:18px 18px 0 0;
  grid-template-columns:repeat(5,minmax(0,1fr));
  padding:8px 6px max(8px,env(safe-area-inset-bottom));
  gap:0;
  box-shadow:0 -5px 30px #102b3b0d
}
.sfnav button {
  font-size:10px;
  display:flex;
  flex-direction:column;
  gap:3px;
  min-height:56px;
  justify-content:center;
  padding:6px 2px;
  text-align:center
}
.sfnav button:nth-child(n+5):not(.rc4-more) {
  display:none
}
.sfnav[data-expanded=true] {
  grid-template-columns:repeat(3,minmax(0,1fr))
}
.sfnav[data-expanded=true] button:nth-child(n+5) {
  display:flex
}
.sfnav .rc4-more {
  display:flex
}
.modebar {
  font-size:11px;
  gap:6px
}
.modebar button {
  font-size:11px;
  padding:8px
}
.modebar #modeHelp {
  flex-basis:100%
}
.card,.owner-panel>.card {
  padding:20px;
  border-radius:16px
}
.sfhero {
  padding:24px
}
.sfmetrics {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px
}
.sfmetric {
  padding:16px
}
.sfmetric strong {
  font-size:20px
}
.owner-progress {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:4px
}
.owner-progress button {
  font-size:10px;
  min-height:60px;
  padding:8px
}
.owner-actions {
  bottom:78px
}
.owner-actions button {
  width:100%
}
.sfcolumns {
  grid-template-columns:minmax(0,1fr)
}
.rc4-summary {
  grid-template-columns:minmax(0,1fr)
}
.login {
  display:block;
  padding:28px 24px;
  margin:20px 0
}
.login h1 {
  font-size:38px
}
.login form {
  margin-top:30px
}
.login>.hint {
  margin-top:24px
}
.sfcalendargrid {
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.sfgrid {
  grid-template-columns:minmax(0,1fr)
}
.sfactionsbar {
  flex-wrap:wrap
}
.sftime,.sfdateadd {
  flex-wrap:wrap
}
.sitefooter {
  padding-bottom:100px
}

}

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

}


/* Keep legacy components on the same palette. */
:root {
  --canvas:var(--sf-bg);
  --surface:var(--sf-surface);
  --surface-alt:var(--sf-soft);
  --ink:var(--sf-ink)
}

html[data-theme=dark] {
  --canvas:var(--sf-bg);
  --surface:var(--sf-surface);
  --surface-alt:var(--sf-soft);
  --ink:var(--sf-ink)
}

input:not([type=checkbox]),textarea,select {
  background:var(--sf-surface);
  color:var(--sf-ink);
  border-color:var(--sf-border)
}

.sfweekdays input:checked+span {
  background:var(--sf-accent);
  border-color:var(--sf-accent);
  color:white
}
html[data-theme=dark] .sfweekdays input:checked+span {
  color:#0e2924
}

.sfnav button[aria-current=page]:before {
  display:none
}
.rc4-actions button {
  margin:0!important
}
.rc4-next {
  color:var(--sf-ink)
}


@media(max-width:600px) {
  .sfhero h2 {
  font-size:26px;
  letter-spacing:-.8px
}
.rc4-actions {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px
}
.rc4-actions button {
  font-size:12px;
  padding:12px 8px;
  min-height:48px
}
.rc4-next {
  font-size:23px
}
.sfnav {
  margin:0
}
.sfhero {
  padding:20px!important
}

}


:root[data-theme=dark] .owner-progress [aria-current=step] {
  color:#0e2924
}

.rc4-channel {
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 0;
  border-bottom:1px solid var(--sf-border)
}
.rc4-channel strong {
  display:block
}
.rc4-channel .badge {
  margin-left:auto
}
.rc4-skip {
  position:absolute;
  top:-100px;
  left:16px;
  z-index:100;
  background:var(--sf-surface);
  padding:12px 18px;
  border-radius:8px
}
.rc4-skip:focus {
  top:8px
}

.owner-panel>.sfhero {
  background:linear-gradient(115deg,#123c40,#1b5558);
  border:0;
}
.login>* {
  position:relative;
  z-index:1;
}
.login:before {
  opacity:.45;
}
