.ppw {
  --ppw-bg: var(--bg, #14141e);
  --ppw-panel: var(--panel, #1b1d2a);
  --ppw-panel-2: var(--panel-2, #232537);
  --ppw-input: var(--input, #2d2e40);
  --ppw-line: var(--line, rgba(255,255,255,.07));
  --ppw-ink: var(--ink, #eef0f6);
  --ppw-muted: var(--muted, #8e92b2);
  --ppw-muted-2: var(--muted-2, #888ba5);
  --ppw-teal: var(--teal, #35d0c5);
  --ppw-teal-deep: var(--teal-deep, #1fa89f);
  --ppw-mint: var(--mint, #a9f3e1);
  --ppw-brand: var(--brandteal, #87D9CF);
  --ppw-font: var(--font, 'Outfit', system-ui, sans-serif);
  --ppw-radius: var(--radius, 18px);
  --ppw-radius-s: var(--radius-s, 12px);
  position: relative;
  display: block;
  min-width: 0;
  max-width: 100%;
  color: var(--ppw-ink);
  font-family: var(--ppw-font);
  font-size: 14px;
  line-height: 1.45;
}

.ppw *, .ppw *::before, .ppw *::after { box-sizing: border-box; }
.ppw h1, .ppw h2, .ppw h3, .ppw p, .ppw dl, .ppw dd { margin: 0; }
.ppw button, .ppw input { font: inherit; }
.ppw button { color: inherit; }
.ppw button, .ppw input, .ppw [tabindex] { -webkit-tap-highlight-color: transparent; }
.ppw button:focus-visible, .ppw input:focus-visible, .ppw [tabindex]:focus-visible {
  outline: 2px solid var(--ppw-teal);
  outline-offset: 2px;
}
.ppw-icon { width: 18px; height: 18px; flex: none; }
.ppw-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.ppw-head h1 { font-size: 22px; line-height: 1.2; letter-spacing: .02em; text-wrap: balance; }
.ppw-head p { margin-top: 4px; color: var(--ppw-muted); font-size: 12px; }
.ppw-nav { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.ppw-icon-button, .ppw-secondary, .ppw-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.ppw-icon-button { width: 38px; padding: 0; border: 1px solid var(--ppw-line); background: var(--ppw-panel); }
.ppw-secondary { padding: 7px 12px; border: 1px solid var(--ppw-line); background: var(--ppw-panel); }
.ppw-primary { width: 100%; padding: 9px 14px; border: 0; background: var(--ppw-mint); color: #10131c; font-weight: 700; }
.ppw-icon-button:hover, .ppw-secondary:hover { background: var(--ppw-panel-2); border-color: rgba(53,208,197,.34); }
.ppw-primary:hover { background: var(--ppw-brand); }
.ppw button:disabled { cursor: not-allowed; opacity: .52; }
.ppw-range { min-width: 176px; padding: 0 8px; text-align: center; font-size: 12px; font-weight: 600; white-space: nowrap; }
.ppw-timezone { margin-bottom: 10px; color: var(--ppw-muted); font-size: 11px; }
.ppw-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; min-width: 0; }
.ppw-layout:has(.ppw-detail) { grid-template-columns: minmax(0, 1fr) 300px; }
.ppw-calendar-pane { min-width: 0; }
.ppw-week-scroll { max-width: 100%; overflow: auto; border: 1px solid var(--ppw-line); border-radius: 14px; background: var(--ppw-panel); }
.ppw-week { min-width: 880px; padding: 10px 12px 12px; }
.ppw-week-head, .ppw-week-row { display: grid; grid-template-columns: 48px repeat(7, minmax(0, 1fr)); }
.ppw-week-head { border-bottom: 1px solid var(--ppw-line); }
.ppw-day-head { padding: 6px 4px 9px; color: var(--ppw-muted); text-align: center; font-size: 10px; }
.ppw-day-head b { display: block; color: var(--ppw-ink); font-size: 12px; font-weight: 600; }
.ppw-day-head.is-today b { color: var(--ppw-mint); }
.ppw-week-row { border-bottom: 1px dashed rgba(255,255,255,.05); }
.ppw-week-row:last-child { border-bottom: 0; }
.ppw-time-corner, .ppw-hour { display: block; }
.ppw-hour { padding: 8px 4px 0 0; color: var(--ppw-muted-2); font-size: 10px; }
.ppw-cell { display: flex; min-width: 0; min-height: 52px; padding: 3px; flex-direction: column; gap: 4px; border-left: 1px dashed rgba(255,255,255,.05); }
.ppw-card { display: block; width: 100%; min-width: 0; padding: 0; overflow: hidden; border: 1px solid var(--ppw-line); border-radius: 10px; background: var(--ppw-panel-2); text-align: left; cursor: pointer; }
.ppw-card:hover { border-color: rgba(53,208,197,.45); }
.ppw-card.is-selected { outline: 2px solid var(--ppw-teal); outline-offset: 1px; }
.ppw-card-media { position: relative; display: block; height: 58px; overflow: hidden; background: var(--ppw-input); }
.ppw-card-media > img, .ppw-card-media > [data-ppw-owner-thumb-img] { width: 100%; height: 100%; object-fit: cover; }
.ppw-media-placeholder { display: grid; width: 100%; height: 100%; place-items: center; color: var(--ppw-muted); }
.ppw-media-kind { position: absolute; right: 4px; bottom: 4px; display: grid; width: 22px; height: 22px; place-items: center; border-radius: 6px; background: rgba(20,20,30,.82); color: var(--ppw-mint); }
.ppw-media-kind .ppw-icon { width: 13px; height: 13px; }
.ppw-card-body { display: flex; min-width: 0; padding: 5px; flex-direction: column; gap: 4px; }
.ppw-card-top { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 3px; flex-wrap: wrap; }
.ppw-price { display: inline-flex; max-width: 100%; padding: 2px 5px; border-radius: 5px; background: rgba(20,20,30,.82); color: var(--ppw-mint); font-size: 9px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.ppw-status { display: inline-flex; align-items: center; width: fit-content; padding: 2px 5px; border-radius: 999px; font-size: 8px; font-weight: 600; line-height: 1.4; letter-spacing: .03em; text-transform: uppercase; }
.ppw-status.is-scheduled { background: rgba(53,208,197,.1); color: var(--ppw-teal); }
.ppw-status.is-published { background: rgba(169,243,225,.1); color: var(--ppw-mint); }
.ppw-status.is-draft { background: rgba(142,146,178,.12); color: var(--ppw-ink); }
.ppw-card-title { display: block; min-width: 0; overflow: hidden; color: var(--ppw-ink); font-size: 10px; font-weight: 600; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.ppw-card-time { color: var(--ppw-muted); font-size: 10px; }
.ppw-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 12px 16px; border: 1px solid var(--ppw-line); border-radius: var(--ppw-radius-s); background: var(--ppw-panel); color: var(--ppw-muted); }
.ppw-foot .ppw-icon { color: var(--ppw-mint); }
.ppw-foot b { color: var(--ppw-ink); }
.ppw-detail { position: sticky; top: 12px; min-width: 0; padding: 14px; border: 1px solid var(--ppw-line); border-radius: 14px; background: var(--ppw-panel); }
.ppw-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.ppw-detail-head h2 { font-size: 15px; }
.ppw-detail h3 { margin-top: 12px; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.ppw-detail-media { position: relative; display: block; height: 176px; overflow: hidden; border-radius: var(--ppw-radius-s); background: var(--ppw-input); }
.ppw-detail-media > img, .ppw-detail-media > [data-ppw-owner-thumb-img] { width: 100%; height: 100%; object-fit: cover; }
.ppw-detail-meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--ppw-muted); font-size: 11px; }
.ppw-facts { margin: 12px 0; }
.ppw-facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--ppw-line); }
.ppw-facts > div:last-child { border-bottom: 0; }
.ppw-facts dt { color: var(--ppw-muted); font-size: 11px; }
.ppw-facts dd { max-width: 65%; color: var(--ppw-ink); font-size: 12px; text-align: right; overflow-wrap: anywhere; }
.ppw-field { display: flex; margin: 12px 0 10px; flex-direction: column; gap: 6px; color: var(--ppw-muted); font-size: 11px; }
.ppw-field input { width: 100%; min-height: 42px; padding: 8px 9px; border: 1px solid var(--ppw-line); border-radius: 10px; background: var(--ppw-input); color: var(--ppw-ink); color-scheme: dark; }
.ppw-readonly { margin: 10px 0; color: var(--ppw-muted); font-size: 12px; text-wrap: pretty; }
.ppw-feedback { margin-top: 10px; padding: 9px 10px; border-radius: 10px; font-size: 12px; overflow-wrap: anywhere; }
.ppw-feedback.is-error { background: rgba(255,93,108,.1); color: #ffb3ba; }
.ppw-feedback.is-success { background: rgba(53,208,197,.1); color: var(--ppw-mint); }
.ppw-access, .ppw-error, .ppw-empty, .ppw-loading { margin-top: 12px; padding: 22px; border: 1px solid var(--ppw-line); border-radius: 14px; background: var(--ppw-panel); }
.ppw-access h2, .ppw-error h2, .ppw-empty h2 { margin-bottom: 6px; font-size: 16px; }
.ppw-access p, .ppw-error p, .ppw-empty p { max-width: 65ch; color: var(--ppw-muted); text-wrap: pretty; }
.ppw-error { display: flex; align-items: flex-start; gap: 12px; }
.ppw-error > .ppw-icon { color: #ffb3ba; }
.ppw-error .ppw-secondary { margin-top: 14px; }
.ppw-loading > span { color: var(--ppw-muted); }
.ppw-skeleton { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.ppw-skeleton i { display: block; height: 140px; border-radius: var(--ppw-radius-s); background: var(--ppw-panel-2); }
.ppw-unscheduled-slot[hidden] { display: none; }
.ppw-shell.has-unscheduled { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 12px; align-items: start; }
.ppw-shell.has-unscheduled > [data-ppw-main] { min-width: 0; }
.ppw-unscheduled-slot { min-width: 0; }

@media (max-width: 1199px) {
  .ppw-layout:has(.ppw-detail) { grid-template-columns: minmax(0, 1fr); }
  .ppw-detail { position: static; }
}

@media (max-width: 700px) {
  .ppw-head { align-items: flex-start; flex-direction: column; gap: 10px; }
  .ppw-head h1 { font-size: 18px; }
  .ppw-nav { width: 100%; justify-content: flex-start; }
  .ppw-range { min-width: 0; flex: 1 1 150px; }
  .ppw-icon-button, .ppw-secondary, .ppw-primary { min-height: 44px; }
  .ppw-icon-button { width: 44px; }
  .ppw-week { min-width: 840px; padding: 8px; }
  .ppw-week-scroll::before { content: "Swipe horizontally for all seven days"; display: block; padding: 8px 8px 0; color: var(--ppw-muted); font-size: 11px; }
  .ppw-detail { padding: 12px; }
  .ppw-detail-media { height: 210px; }
  .ppw-access, .ppw-error, .ppw-empty, .ppw-loading { padding: 16px; }
  .ppw-skeleton { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ppw-shell.has-unscheduled { grid-template-columns: minmax(0, 1fr); }
}

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