.pc-page { padding-bottom: 90px }
.pc-header { min-height: 116px; justify-content: space-between }
.pc-home-link { font-size: 15px; font-weight: 700; border: 1px solid var(--ink); border-radius: 30px; padding: 11px 18px; text-decoration: none }
.pc-main { max-width: 1000px; padding-top: 20px }
.pc-title-row { display: flex; justify-content: space-between; align-items: center }
.pc-title-row h1 { margin: 8px 0 0; font-size: 60px; line-height: 1.12; letter-spacing: -.045em }
.pc-title-row .eyebrow { margin: 0 }
.pc-lead { margin: 20px 0 30px; color: var(--muted); font-size: 18px }
.pc-refresh { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 50% }
.pc-refresh svg { width: 22px; fill: none; stroke: currentColor; stroke-width: 1.7 }
.pc-refresh:disabled { opacity: .5; cursor: wait }
.pc-notice { padding: 16px 20px; margin: 0 0 20px; border: 1px solid var(--ink); border-radius: 14px; font-size: 15px }
.pc-notice a { font-weight: 700; text-underline-offset: 4px }
.pc-hero { background: var(--mint); border-radius: 24px; padding: 28px 32px; overflow: hidden }
.pc-hero[data-state="UNKNOWN"] { background: #e3e7e5 }
.pc-hero[data-state="REVIEW"] { background: var(--yellow) }
.pc-hero-top, .pc-hero-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px }
.pc-connection { display: flex; align-items: center; gap: 8px; font-weight: 700 }
.pc-connection i { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--ink) }
.pc-eyebrow { letter-spacing: .12em }
.pc-hero-body { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 27px 0 }
.pc-hero h2 { font-size: 36px; line-height: 1.24; letter-spacing: -.04em; margin: 0 }
.pc-hero p { margin: 15px 0 0; font-size: 15px; max-width: 400px; word-break: keep-all; line-height: 1.6 }
.pc-orbit { flex: 0 0 140px; height: 140px }
.pc-orbit svg { width: 100%; height: 100%; overflow: visible }
.pc-orbit ellipse { stroke: var(--ink); stroke-width: 3; fill: none }
.pc-orbit circle { fill: var(--coral); stroke: var(--ink); stroke-width: 2 }
.pc-orbit circle:last-child { fill: var(--yellow) }
.pc-hero-bottom { border-top: 1px solid var(--line); padding-top: 16px }
.pc-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0 24px }
.pc-power-button { display: flex; align-items: center; gap: 14px; text-align: left; min-height: 98px; padding: 19px 24px; border-radius: 20px; background: var(--coral) }
.pc-power-button > svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 1.7; flex-shrink: 0 }
.pc-power-button > span:nth-child(2) { flex: 1 }
.pc-power-button b { display: block; font-size: 20px; line-height: 1.5 }
.pc-power-button small { display: block; font-size: 12px; line-height: 1.7 }
.pc-wol { background: var(--ink); color: var(--paper); cursor: help }
.pc-wol small { color: #c5d1cf }
.pc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow) }
.pc-clock-panel, .pc-timers-panel, .pc-work-panel, .pc-check-panel { padding: 28px; border: 1px solid var(--line); border-radius: 22px }
.pc-clock-panel { background: var(--yellow); border: 0; margin-bottom: 28px }
.pc-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px }
.pc-panel-heading .eyebrow { font-size: 10px; margin: 0 0 6px; letter-spacing: .11em }
.pc-panel-heading h2 { font-size: 24px; line-height: 1.3; margin: 0; letter-spacing: -.035em }
.pc-tag { border: 1px solid var(--line); border-radius: 20px; padding: 5px 11px; font-size: 12px; white-space: nowrap }
.pc-clock { text-align: center; padding: 26px 0 18px }
.pc-clock > span { display: block; font-size: 13px }
.pc-clock strong { display: block; font-size: clamp(44px, 8vw, 68px); line-height: 1.25; font-weight: 500; letter-spacing: -.045em; font-variant-numeric: tabular-nums; margin: 8px 0 }
.pc-clock i { font-style: normal; opacity: .4; padding: 0 4px }
.pc-clock p { margin: 7px 0 0; font-size: 13px; word-break: keep-all }
.pc-next-daily { border-top: 1px solid var(--line); padding-top: 16px; font-size: 14px; font-weight: 700 }
.pc-clock-note { font-size: 12px; margin: 9px 0 0; line-height: 1.7; color: var(--muted); word-break: keep-all }
.pc-details-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: start }
.pc-side-panels { display: grid; gap: 24px }
.pc-timer-list { list-style: none; padding: 0; margin: 22px 0 0 }
.pc-timer-list li { display: grid; grid-template-columns: 18px 1fr auto; gap: 13px; align-items: start; border-bottom: 1px solid var(--line); padding: 19px 0 }
.pc-timer-list li:last-child { border: 0 }
.pc-timer-node { width: 12px; height: 12px; background: var(--yellow); border: 1px solid var(--ink); border-radius: 50%; margin: 7px 0 0 2px }
.pc-timer-node[data-status="COMPLETE"] { background: var(--mint) }
.pc-timer-node[data-status="FAILED"] { background: var(--coral) }
.pc-timer-node[data-status="UNKNOWN"], .pc-timer-node[data-status="NOT_RUN"] { background: transparent }
.pc-timer-time { display: block; font-size: 12px; color: var(--muted); margin-bottom: 3px; font-variant-numeric: tabular-nums }
.pc-timer-name { display: block; font-size: 16px; line-height: 1.5; word-break: keep-all }
.pc-timer-detail { display: block; font-size: 11px; color: var(--muted); margin-top: 5px }
.pc-status-pill { font-size: 11px; padding: 4px 8px; border-radius: 16px; background: #e8edeb; white-space: nowrap; margin-top: 3px }
.pc-status-pill[data-status="COMPLETE"] { background: var(--mint) }
.pc-status-pill[data-status="FAILED"] { background: var(--coral) }
.pc-status-pill[data-status="RUNNING"], .pc-status-pill[data-status="REVIEW"] { background: var(--yellow) }
.pc-panel-foot { border-top: 1px solid var(--line); padding-top: 14px; font-size: 12px; line-height: 1.7; margin: 15px 0 0; color: var(--muted); word-break: keep-all }
.pc-work-panel { background: var(--ink); color: var(--paper); border-color: var(--ink) }
.pc-work-panel .eyebrow, .pc-work-panel .pc-panel-foot, .pc-work-panel .pc-empty { color: #c5d1cf }
.pc-work-panel .pc-panel-foot { border-color: #4c5c5e }
.pc-live-mark { color: var(--mint); font-size: 30px; font-weight: 500 }
.pc-work-list, .pc-check-list { list-style: none; margin: 20px 0 0; padding: 0; font-size: 14px; line-height: 1.6 }
.pc-work-list li { padding: 10px 0; display: flex; align-items: center; gap: 10px; overflow-wrap: anywhere }
.pc-work-list li::before { content: ''; width: 7px; height: 7px; flex-shrink: 0; background: var(--mint); border-radius: 50% }
.pc-check-list li { padding: 10px 0 10px 24px; position: relative; word-break: keep-all }
.pc-check-list li::before { content: '↗'; position: absolute; left: 0; top: 10px }
.pc-check-panel { background: #f4ede5 }
.pc-empty { font-size: 14px; color: var(--muted) }
.pc-footer { margin-top: 48px; padding-bottom: 30px }
.pc-footer a { font-size: 13px; text-underline-offset: 4px }
.pc-bottom-nav { display: none }
.pc-dialog { width: min(440px, calc(100% - 32px)); border: 1px solid var(--ink); border-radius: 22px; padding: 32px 24px; color: var(--ink); background: var(--paper) }
.pc-dialog::backdrop { background: rgb(0 19 23 / .65) }
.pc-dialog h2 { font-size: 28px; letter-spacing: -.035em; line-height: 1.3 }
.pc-dialog p, .pc-dialog li { font-size: 15px; word-break: keep-all }
.pc-dialog ul { padding-left: 22px }
.pc-dialog-close { position: absolute; top: 8px; right: 10px; width: 44px; height: 44px; font-size: 28px }
.pc-dialog-dismiss { margin-top: 16px; width: 100% }
.pc-dialog .pc-preview-note { background: var(--yellow); padding: 14px; border-radius: 12px }
.pc-page [hidden] { display: none !important }
@media (max-width: 760px) {
  .pc-header { min-height: 90px; padding: 18px 16px }
  .pc-header .wordmark { font-size: 10px; gap: 8px }
  .pc-header .wordmark svg { width: 34px; height: 34px }
  .pc-home-link { font-size: 12px; padding: 10px 13px }
  .pc-main { padding-top: 12px }
  .pc-title-row h1 { font-size: 40px }
  .pc-title-row .eyebrow { font-size: 10px }
  .pc-lead { font-size: 15px; margin: 16px 0 24px }
  .pc-hero { padding: 22px; border-radius: 20px }
  .pc-hero-body { gap: 10px; margin: 25px 0 }
  .pc-hero h2 { font-size: 28px }
  .pc-hero p { font-size: 13px; margin-top: 12px }
  .pc-orbit { flex-basis: 90px; height: 100px; margin-right: -8px }
  .pc-hero-top, .pc-hero-bottom { font-size: 10px }
  .pc-controls { gap: 10px; margin-top: 12px }
  .pc-power-button { padding: 15px; border-radius: 16px; gap: 9px; min-height: 86px }
  .pc-power-button > svg { width: 23px; height: 23px }
  .pc-power-button b { font-size: 16px }
  .pc-power-button small { font-size: 10px }
  .pc-clock-panel, .pc-timers-panel, .pc-work-panel, .pc-check-panel { padding: 22px; border-radius: 20px }
  .pc-panel-heading h2 { font-size: 22px }
  .pc-details-grid { grid-template-columns: 1fr; gap: 20px }
  .pc-side-panels { gap: 20px }
  .pc-bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; gap: 10px; padding: 9px 18px calc(9px + env(safe-area-inset-bottom)); background: var(--ink) }
  .pc-bottom-nav a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--paper); min-height: 54px; border-radius: 12px; text-decoration: none; font-size: 14px; font-weight: 700 }
  .pc-bottom-nav a[aria-current] { background: var(--mint); color: var(--ink) }
  .pc-bottom-nav svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.6; fill: none }
  .pc-footer { padding-bottom: 20px; margin-top: 32px }
}
@media (max-width: 359px) {
  .pc-hero { padding: 18px }
  .pc-orbit { flex-basis: 64px }
  .pc-hero h2 { font-size: 26px }
  .pc-power-button { padding: 12px; gap: 7px }
  .pc-power-button b { font-size: 14px }
  .pc-power-button > svg { width: 20px }
  .pc-power-button > span:last-child { display: none }
}
.pc-reboot-warning { background: var(--yellow, #ecd06f); border-radius: 14px; padding: 16px; margin: 16px 0; color: #001317; }
.pc-reboot-warning p { margin: 8px 0 0; }