:root {
    color-scheme: dark;
    --pho-bg: #0b0b0e;
    --pho-bg-raised: #111116;
    --pho-bg-soft: #17171d;
    --pho-text: #ffffff;
    --pho-muted: #b9b9c3;
    --pho-dim: #81818e;
    --pho-line: rgba(255,255,255,.1);
    --pho-pink: #ff2c8b;
    --pho-blue: #3478f6;
    --pho-purple: #9f54ff;
    --pho-orange: #ff842a;
    --pho-green: #21c67a;
    --pho-max: 720px;
    --pho-header-h: 64px;
    --pho-footer-h: 70px;
    --pho-safe-bottom: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html { background: #050506; }
body { margin: 0; min-width: 320px; background: #050506; color: var(--pho-text); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
a { color: var(--pho-pink); text-decoration: none; }
a:hover { text-decoration: none; }
button { color: inherit; }
img { max-width: 100%; display: block; }
.pho-app { width: 100%; max-width: var(--pho-max); min-height: 100dvh; margin: 0 auto; background: var(--pho-bg); border-inline: 1px solid rgba(255,255,255,.035); box-shadow: 0 0 50px rgba(0,0,0,.45); }
.pho-main { min-height: calc(100dvh - var(--pho-header-h) - var(--pho-footer-h)); padding-bottom: calc(var(--pho-footer-h) + var(--pho-safe-bottom)); overflow: clip; }
.pho-icon { width: 24px; height: 24px; display: block; flex: 0 0 auto; }
.pho-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.pho-page-shell { padding: 18px 16px 28px; }
.pho-empty-state, .pho-error-state, .pho-loading-state, .pho-success-state { padding: 22px 16px; border-block: 1px solid var(--pho-line); background: var(--pho-bg-raised); color: var(--pho-muted); text-align: center; }
.pho-error-state { color: #ffb7c9; }
.pho-success-state { color: #a8f0cb; }
@media (max-width: 720px) { .pho-app { border-inline: 0; box-shadow: none; } }
@media (max-width: 430px) { :root { --pho-header-h: 60px; --pho-footer-h: 66px; } .pho-page-shell { padding-inline: 14px; } }
@media (max-width: 390px) { .pho-page-shell { padding-inline: 12px; } }
/* checkpoint 5 validation/result handoff */
.pho-system-state{padding:28px 18px;min-height:45vh}.pho-system-state h1{margin:0 0 10px;font-size:22px}.pho-system-state p{color:#bdbdc7;line-height:1.55}.pho-system-state a{color:#ff2a8b;font-weight:800}@media(max-width:430px){.pho-system-state{padding:22px 14px}}@media(max-width:390px){.pho-system-state{padding-left:10px;padding-right:10px}}

/* Site-wide Safari-inspired action buttons (V1.1 baseline). */
:root {
    --button-primary: #191919;
    --button-hover: #202020;
    --button-active: #111111;
    --button-feature: #C1E899;
    --button-feature-text: #17131F;
    --pho-button-bg-top: #202020;
    --pho-button-bg-bottom: #151515;
    --pho-button-border: #3a3a3c;
    --pho-button-shadow: #050505;
}

/*
 * Action controls share the same iPhone Safari bottom-bar treatment.
 * Picker fields, sheet rows/backdrops and header/menu icon controls are
 * intentionally excluded because they are navigation or form controls.
 */
:where(
    button:not(.pho-header__icon-btn):not(.pho-admin-menu-button):not(.pho-footer__item):not([class*="picker"]):not([class*="sheet"]),
    .pho-account__nav-button,
    a.pho-admin-primary,
    a.pho-public-profile__apply
) {
    background: linear-gradient(180deg, var(--pho-button-bg-top) 0%, var(--pho-button-bg-bottom) 100%) !important;
    color: #fff !important;
    border: 1px solid var(--pho-button-border) !important;
    border-radius: 999px !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.09),
        inset 0 -1px 0 rgba(0,0,0,.42),
        0 4px 0 var(--pho-button-shadow),
        0 7px 14px rgba(0,0,0,.32) !important;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform .1s ease, box-shadow .1s ease, filter .14s ease !important;
}

:where(
    button:not(.pho-header__icon-btn):not(.pho-admin-menu-button):not(.pho-footer__item):not([class*="picker"]):not([class*="sheet"]),
    .pho-account__nav-button,
    a.pho-admin-primary,
    a.pho-public-profile__apply
):hover:not(:disabled) {
    background: linear-gradient(180deg, #242424 0%, #181818 100%) !important;
    filter: brightness(1.06);
}

:where(
    button:not(.pho-header__icon-btn):not(.pho-admin-menu-button):not(.pho-footer__item):not([class*="picker"]):not([class*="sheet"]),
    .pho-account__nav-button,
    a.pho-admin-primary,
    a.pho-public-profile__apply
):active:not(:disabled) {
    background: linear-gradient(180deg, #141414 0%, #101010 100%) !important;
    transform: translateY(3px) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.055),
        inset 0 -1px 0 rgba(0,0,0,.5),
        0 1px 0 var(--pho-button-shadow),
        0 3px 7px rgba(0,0,0,.28) !important;
}

:where(
    button:not(.pho-header__icon-btn):not(.pho-admin-menu-button):not(.pho-footer__item):not([class*="picker"]):not([class*="sheet"]),
    .pho-account__nav-button,
    a.pho-admin-primary,
    a.pho-public-profile__apply
):focus-visible {
    outline: 2px solid var(--pho-pink) !important;
    outline-offset: 3px !important;
}

:where(
    button:not(.pho-header__icon-btn):not(.pho-admin-menu-button):not(.pho-footer__item):not([class*="picker"]):not([class*="sheet"])
):disabled {
    background: linear-gradient(180deg, #1b1b1c 0%, #141415 100%) !important;
    color: #77777f !important;
    border-color: #29292c !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 2px 0 #090909 !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}