.ph-page { padding: 90px 0 48px; background: #f7faff; color: #07111f; font-family: Inter, Arial, sans-serif; container-type: inline-size; }
.ph-page :is(h1, h2, h3, h4) { font-family: Inter, Arial, sans-serif; }
.ph-page *, .ph-page *::before, .ph-page *::after { box-sizing: border-box; letter-spacing: 0; }
.ph-container { width: min(1120px, calc(100% - 48px)); margin: 0 auto; }
.ph-page [hidden] { display: none !important; }
.ph-page .ph-enhanced { display: none; }
.ph-ready .ph-enhanced { display: block; }
.ph-icon { width: 20px; height: 20px; flex: 0 0 20px; vertical-align: middle; }
.ph-page a { color: #0759d6; text-decoration: none; }
.ph-page a:hover { text-decoration: underline; }
.ph-page :is(button, input, select, textarea, summary, a):focus-visible { outline: 3px solid #1378e8; outline-offset: 3px; }
.ph-page :is(h1, h2, p, pre, a, label) { overflow-wrap: anywhere; }
.ph-page button, .ph-page select, .ph-page input, .ph-page textarea { font: inherit; }
.ph-page button, .ph-page summary { cursor: pointer; }
.ph-page button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1px solid #d4e0ef; border-radius: 8px; background: #fff; color: #294262; }
.ph-page button:hover { border-color: #1677ff; background: #f0f6ff; }
.ph-page button:disabled { opacity: .6; cursor: wait; }
.ph-hero { padding: 28px 0 24px; }
.ph-hero .breadcrumbs { width: 100%; margin: 0 0 28px; font-size: 14px; }
.ph-hero h1 { margin: 0 0 16px; font-size: 54px; line-height: 1.04; max-width: 900px; font-weight: 800; }
.ph-hero > p { margin: 0 0 16px; color: #526781; font-size: 20px; line-height: 1.5; }
.ph-provider-strip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: #53627a; font-size: 14px; }
.ph-provider-strip img { display: block; width: 24px; height: 24px; object-fit: contain; }
.ph-search-label { display: flex; align-items: center; gap: 12px; border: 1px solid #cbdcf1; border-radius: 8px; background: #fff; padding: 0 18px; }
.ph-search-label:focus-within { outline: 3px solid #d2e5ff; }
.ph-search-label input { width: 100%; height: 50px; border: 0; background: transparent; min-width: 0; outline: none; }
.ph-filter-line { display: flex; align-items: flex-start; gap: 20px; padding: 16px 0; }
.ph-tasks { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.ph-tasks button { font-size: 13px; }
.ph-tasks button[aria-pressed="true"], .ph-page .ph-primary { background: #087bff; color: #fff; border-color: #087bff; }
.ph-page .ph-primary:hover { background: #0759d6; }
.ph-model-label { width: 175px; flex: 0 0 175px; font-size: 12px; color: #53627a; }
.ph-page select { display: block; min-height: 44px; max-width: 100%; width: 100%; padding: 8px 28px 8px 10px; border: 1px solid #cfdbeb; border-radius: 8px; background: #fff; color: #294262; }
.ph-collection { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 20px; background: #eeeefd; border-block: 1px solid #d9d8f8; }
.ph-collection > span { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; line-height: 1.5; }
.ph-collection .ph-icon { color: #6c5cff; }
.ph-collection button { background: transparent; border: 0; color: #0759d6; flex-shrink: 0; }
.ph-results-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; }
.ph-results-bar p { font-size: 13px; color: #53627a; }
.ph-results-bar button { background: none; border: 0; font-size: 13px; }
#ph-notice:empty { display: none; }
#ph-notice { color: #8b3e20; }
.ph-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; align-items: stretch; }
.ph-card { min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 22px; border: 1px solid #d8e5f5; border-radius: 8px; background: #fff; box-shadow: 0 6px 18px #17365c06; }
.ph-card-heading { display: flex; align-items: flex-start; gap: 14px; }
.ph-card h2 { margin: 9px 0 0; font-size: 18px; line-height: 1.3; }
.ph-task-icon { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border-radius: 8px; color: #7351db; background: #f0ebfd; }
.ph-task-icon[data-tone="learning"], .ph-task-icon[data-tone="daily"] { background: #e6f7ee; color: #15805a; }
.ph-task-icon[data-tone="research"], .ph-task-icon[data-tone="travel"] { background: #e6f5fa; color: #13748e; }
.ph-task-icon[data-tone="career"], .ph-task-icon[data-tone="decisions"] { background: #fff0f0; color: #b34857; }
.ph-tag { display: inline-block; max-width: 100%; color: #0759d6; background: #ecf4ff; border-radius: 4px; padding: 3px 8px; font-size: 11px; font-weight: 600; line-height: 1.5; }
.ph-card p { margin: 0; font-size: 14px; line-height: 1.5; color: #536781; }
.ph-preview { border-left: 2px solid #e0e8f5; padding-left: 10px; font-size: 12px !important; color: #718098 !important; }
.ph-ready .ph-preview { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ph-card-actions { display: flex; align-items: center; justify-content: space-between; margin-top: auto; gap: 8px; }
.ph-template { min-width: 0; flex: 1; }
.ph-template summary { min-height: 44px; display: flex; align-items: center; gap: 8px; color: #0759d6; font-size: 14px; font-weight: 600; list-style: none; }
.ph-template summary::-webkit-details-marker { display: none; }
.ph-fallback { padding: 12px 0; }
.ph-fallback pre { white-space: pre-wrap; font-family: inherit; font-size: 14px; }
.ph-ready .ph-fallback { display: none; }
.ph-page .ph-icon-button { display: inline-flex; padding: 10px; width: 44px; height: 44px; flex: 0 0 44px; }
.ph-page:not(.ph-ready) .ph-card .ph-icon-button { display: none; }
.ph-page .ph-more { margin: 20px auto 0; min-width: 180px; }
.ph-selected { grid-column: 1 / -1; width: 100%; min-width: 0; border: 1px solid #bcd6f9; border-radius: 8px; background: #fff; padding: 24px; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 28px; scroll-margin-top: 110px; }
.ph-selected-about { position: relative; padding-top: 6px; }
.ph-selected-about > button { float: right; margin: -8px 0 8px 8px; }
.ph-selected h2 { font-size: 23px; line-height: 1.25; margin: 16px 0 10px; }
.ph-selected p { font-size: 14px; line-height: 1.5; }
.ph-selected-about > a { display: block; width: fit-content; padding: 8px 0; font-size: 13px; }
.ph-page .ph-meta { color: #617089; font-size: 12px; line-height: 1.6; }
.ph-editor, .ph-editor label, .ph-variables label { min-width: 0; font-size: 13px; color: #4e617d; }
.ph-editor textarea { display: block; width: 100%; min-width: 0; resize: vertical; border: 1px solid #cbdaf0; border-radius: 8px; padding: 12px; background: #fff; color: #182c49; font-size: 14px; line-height: 1.5; }
.ph-variables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.ph-variables > label:only-child { grid-column: 1 / -1; }
.ph-editor-actions { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; }
.ph-launch-label { flex: 1; min-width: 140px !important; }
.ph-secondary { display: inline-flex; min-height: 44px; padding: 10px 14px; gap: 8px; align-items: center; border: 1px solid #bcd4f8; border-radius: 8px; font-size: 14px; }
.ph-secondary[aria-disabled] { color: #617089; opacity: .6; }
.ph-bridges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; margin-top: 40px; padding-block: 28px; border-top: 1px solid #d5e0ed; }
.ph-bridges > div > .ph-icon { color: #805ae2; width: 28px; height: 28px; }
.ph-bridges > div:nth-child(2) > .ph-icon { color: #14876f; }
.ph-bridges h2 { font-size: 21px; margin: 14px 0 8px; }
.ph-bridges p { color: #617089; font-size: 14px; }
.ph-bridges a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; }
.ph-bottom-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px; padding: 24px 0; font-size: 14px; }
.ph-bottom-links a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.ph-resource-controls { gap: 16px; align-items: end; padding: 20px 0; }
.ph-ready .ph-resource-controls { display: flex; flex-wrap: wrap; }
.ph-resource-controls label { flex: 1; min-width: 220px; font-size: 13px; }
.ph-resource-controls input { display: block; width: 100%; min-height: 44px; border: 1px solid #cfdbeb; border-radius: 8px; padding: 10px; }
.ph-resource-controls p { flex-basis: 100%; font-size: 13px; color: #617089; }
.ph-resource { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; padding: 28px 0; border-top: 1px solid #d1deed; }
.ph-resource h2 { margin: 12px 0; font-size: 23px; }
.ph-resource p { color: #536781; font-size: 15px; line-height: 1.5; }
.ph-resource a { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 1000px) {
  .ph-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph-hero h1 { font-size: 46px; }
  .ph-filter-line { flex-direction: column; gap: 12px; }
  .ph-model-label { flex-basis: auto; width: 100%; }
  .ph-selected { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 750px) {
  .ph-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
  .ph-selected, .ph-variables, .ph-resource, .ph-bridges { grid-template-columns: minmax(0, 1fr); }
  .ph-selected { width: 100%; }
  .ph-filter-line, .ph-collection { flex-direction: column; align-items: stretch; }
  .ph-model-label { flex-basis: auto; width: 100%; }
  .ph-collection button { align-self: start; }
}
@media (max-width: 600px) {
  .ph-page { padding-top: 90px; }
  .ph-container { width: calc(100% - 32px); }
  .ph-hero { padding-top: 20px; }
  .ph-hero .breadcrumbs { margin-bottom: 20px; }
  .ph-hero h1 { font-size: 34px; }
  .ph-hero > p { font-size: 17px; }
  .ph-grid, .ph-bridges, .ph-resource { grid-template-columns: minmax(0, 1fr); }
  .ph-collection { align-items: start; flex-direction: column; gap: 4px; padding: 16px; }
  .ph-collection > span { display: block; font-size: 14px; }
  .ph-collection > span .ph-icon { margin-right: 10px; }
  .ph-collection button { padding-left: 0; }
  .ph-tasks { gap: 6px; }
  .ph-tasks button { padding: 8px 10px; }
  .ph-card { padding: 20px; }
  .ph-results-bar { gap: 8px; }
  .ph-results-bar p { font-size: 12px; }
  .ph-results-bar button { font-size: 12px; padding-inline: 0; }
  .ph-selected { width: 100%; padding: 18px; }
  .ph-variables { grid-template-columns: minmax(0, 1fr); }
  .ph-editor-actions > * { width: 100%; }
  .ph-editor-actions .ph-launch-label { flex-basis: 100%; }
  .ph-secondary { justify-content: center; }
  .ph-bridges { gap: 24px; }
  .ph-resource { gap: 8px; }
  .ph-bottom-links { gap: 8px 24px; justify-content: start; }
}
@media (prefers-reduced-motion: reduce) { .ph-page * { scroll-behavior: auto !important; transition: none !important; } }
