/* Shared header and button presentation. Icons, cards and template canvases stay independent.
   Important declarations in this layer beat legacy unlayered !important page styles. */
@layer ph-interface {
:root{--ph-button-green:#10d994;--ph-button-ink:#05291c;--ph-button-line:#65d6a0;--ph-button-dark:#0b281d}
:is(.btn,.ph-btn,.ph-btn-master,.ph-join-btn,.ph-offer-cta,.ph-submit-btn,.ph-tool-btn,.cs-btn,.ph-action,.ph-smart-btn,.ph-contrast-cta,.ph-contact-cta,.ph-review-cta,.ph-pillar-action,.ph-referral-cta,.ph-preview-button,.hub-link,.hub-explore-all,.mh-button,.mh-pill,.ph-ai-cta),
:is(.ph-join-links,.ph-home-offer-actions,.ph-live-offer-actions,.ph-footer-microcta-links,.ph-live-tool-links,.ph-ag-actions,.ph-studio-actions,.hub-actions,.ph-context-actions,.ph-help-actions,.ph-reward-links) > :is(a,button),
.ph-price-card > a,.mh-card form > button,.ph-lead-form button[type=submit],.ph-placement a:not(.ph-click-target){
background:var(--ph-button-green)!important;color:var(--ph-button-ink)!important;
border:1px solid var(--ph-button-line)!important;text-shadow:none!important;
box-shadow:0 0 14px #10d99426!important;transition:box-shadow .16s ease,border-color .16s ease!important;
max-width:100%;box-sizing:border-box;white-space:normal;overflow-wrap:anywhere;line-height:1.35;
}
:is(.btn.out,.btn.secondary,.ph-btn.alt,.ph-btn-master.secondary,.ph-offer-cta.alt,.ph-tool-btn.alt,.cs-btn.cs-secondary,.ph-smart-btn-alt,.ph-login-btn),
.ph-join-links > a:last-child,.ph-footer-microcta-links > a:not(:first-child),
.ph-live-offer-actions > a:last-child,.ph-studio-actions > a:not(:first-child),.mh-logout button{
background:var(--ph-button-dark)!important;color:#f4fff8!important;border:1px solid var(--ph-button-line)!important;
text-shadow:none!important;box-shadow:0 0 12px #10d99422!important;
}
:is(.ph-service-tabs,.ph-home-tab-buttons,.ph-slider-controls,.ph-nav) button,
:is(.filter-btn,.ph-choice-button,.ph-pause,.ph-prev,.ph-next),
:is(.ph-site-language,.ph-ag-language) button{
background:var(--ph-button-dark)!important;color:#f4fff8!important;border-color:var(--ph-button-line)!important;
box-shadow:0 0 9px #10d99416!important;text-shadow:none!important;
}
:is(.ph-service-tabs,.ph-home-tab-buttons) button.active,.filter-btn.active,
:is(.ph-choice-button,.filter-btn)[aria-pressed=true],
:is(.ph-site-language,.ph-ag-language) button[aria-pressed=true]{
background:var(--ph-button-green)!important;color:var(--ph-button-ink)!important;border-color:var(--ph-button-line)!important;
}
:is(.btn,.ph-btn,.ph-btn-master,.ph-join-btn,.ph-login-btn,.ph-offer-cta,.ph-submit-btn,.ph-tool-btn,.cs-btn,.mh-button,.mh-pill):hover{
border-color:#96f5c8!important;box-shadow:0 0 18px #10d99440!important;
}
:is(.btn,.ph-btn,.ph-btn-master,.ph-join-btn,.ph-login-btn,.ph-offer-cta,.ph-submit-btn,.ph-tool-btn,.cs-btn,.mh-button,.mh-pill):focus-visible{
outline:2px solid #96f5c8!important;outline-offset:3px!important;
}
.ph-site-header :is(.ph-join-btn,.ph-login-btn)::after{animation:none!important;content:none!important}
.hub-jumps a:not(.hub-explore-all){background:var(--ph-button-dark)!important;color:#f4fff8!important;border-color:var(--ph-button-line)!important}
/* A single readable desktop row; smaller screens use the existing complete menu. */
.ph-site-header .ph-shell,.ph-site-header .ph-shell-inner{
display:flex!important;align-items:center!important;gap:12px!important;
width:min(1540px,calc(100% - 32px))!important;min-height:72px!important;
}
.ph-site-header .ph-brand{flex:none!important;max-width:none!important}
.ph-site-header .ph-main-nav{
display:flex!important;align-items:center!important;justify-content:center!important;
flex:1!important;min-width:0!important;gap:2px!important;flex-wrap:nowrap!important;margin:0!important;
}
.ph-site-header .ph-main-nav > a,.ph-site-header .ph-nav-dropdown > summary{
display:flex!important;align-items:center!important;gap:5px!important;
padding:10px 7px!important;font:700 13px/1.3 Inter,system-ui,Arial,sans-serif!important;
color:#ecf8f0!important;white-space:nowrap!important;text-decoration:none!important;
border:0!important;background:transparent!important;border-radius:8px!important;cursor:pointer!important;list-style:none!important;
}
.ph-site-header .ph-nav-dropdown{position:relative!important;display:block!important;flex:none!important}
.ph-site-header summary::-webkit-details-marker{display:none!important}
.ph-site-header summary::marker{content:''!important}
.ph-site-header .ph-main-nav > a:hover,.ph-site-header .ph-nav-dropdown > summary:hover{
background:#10d99412!important;color:#fff!important;
}
.ph-site-header .ph-nav-menu{
position:absolute!important;top:calc(100% + 6px)!important;left:0!important;
min-width:220px!important;max-width:min(320px,calc(100vw - 32px))!important;
padding:9px!important;border:1px solid #37694e!important;border-radius:12px!important;
background:#082219!important;box-shadow:0 10px 24px #0005!important;z-index:10!important;
}
.ph-site-header .ph-nav-menu a,.ph-site-header .ph-mobile-nav nav a,.ph-site-header .ph-mobile-group > summary{
color:#ecf8f0!important;font:650 14px/1.4 Inter,system-ui,Arial,sans-serif!important;
white-space:normal!important;padding:10px 12px!important;
}
.ph-site-header .ph-nav-menu a{display:block!important}
.ph-site-header .ph-shell-actions{display:flex!important;flex:none!important;gap:8px!important;margin-left:0!important}
.ph-site-header .ph-login-btn{
display:inline-flex!important;align-items:center!important;justify-content:center!important;
min-height:44px!important;padding:10px 14px!important;font-size:13px!important;font-weight:800!important;
border-radius:12px!important;white-space:nowrap!important;
}
.ph-site-header .ph-mobile-nav{display:none!important}
.ph-site-header .ph-language-row{padding-top:0!important;padding-bottom:8px!important}
@media(max-width:1599px){.ph-site-header .ph-shell-actions .ph-join-btn{display:none!important}}
@media(max-width:1279px){
.ph-site-header .ph-main-nav{display:none!important}
.ph-site-header .ph-mobile-nav{display:block!important;flex:none!important;margin-left:0!important}
.ph-site-header .ph-shell-actions{margin-left:auto!important}
.ph-site-header .ph-shell,.ph-site-header .ph-shell-inner{gap:8px!important;min-height:66px!important}
.ph-site-header .ph-mobile-nav > nav{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;left:12px!important;right:12px!important}
.ph-site-header .ph-mobile-group{min-width:0!important}
.ph-site-header .ph-mobile-group > summary{cursor:pointer!important;list-style:none!important}
.ph-site-header .ph-mobile-group > div{display:grid!important;gap:3px!important}
}
@media(max-width:480px){
.ph-site-header .ph-shell,.ph-site-header .ph-shell-inner{width:calc(100% - 20px)!important;gap:6px!important}
.ph-site-header .ph-brand{gap:6px!important;min-width:0!important;flex:1!important}
.ph-site-header .ph-brand span{font-size:clamp(13px,3.6vw,17px)!important;white-space:normal!important;line-height:1.15!important}
.ph-site-header .ph-brand img{width:32px!important;height:32px!important;flex:none!important}
.ph-site-header .ph-login-btn{padding:8px 10px!important;font-size:12px!important}
.ph-site-header .ph-shell-actions{gap:5px!important}
.ph-site-header .ph-mobile-nav > summary{padding:8px!important;min-width:40px!important;min-height:44px!important}
}
@media(max-width:350px){.ph-site-header .ph-login-btn{padding:8px!important;font-size:11px!important}.ph-site-header .ph-brand span{font-size:12px!important}}
/* Studio controls only: deliberately exclude category icons, swatches and user templates. */
body[data-view=choose] :is(button.primary,.primary,.start-building,#direct-edit),
body[data-view=details] :is(button.primary,.primary){
background:var(--ph-button-green)!important;border-color:var(--ph-button-line)!important;color:var(--ph-button-ink)!important;text-shadow:none!important;
box-shadow:0 0 12px #10d99422!important;
}
body:is([data-view=choose],[data-view=details]) .studio-account-links a{
display:inline-flex!important;align-items:center!important;justify-content:center!important;
background:var(--ph-button-dark)!important;color:#f4fff8!important;border:1px solid var(--ph-button-line)!important;
border-radius:10px!important;padding:8px 12px!important;min-height:36px!important;box-shadow:0 0 12px #10d99422!important;text-decoration:none!important;
}
body[data-view=choose] .studio-home-nav [data-home-destination=Create]{
background:var(--ph-button-green)!important;color:var(--ph-button-ink)!important;
}
body[data-view=choose] .studio-home-nav [aria-current=page]:not([data-home-destination=Create]){
background:#10d99420!important;color:#174c36!important;
}
body[data-view=choose] .library-filters button[aria-pressed=true]{
background:#10d99420!important;border-color:#65d6a0!important;color:#174c36!important;
}
body[data-view=choose] .empty-projects button{
background:var(--ph-button-green)!important;color:var(--ph-button-ink)!important;border:1px solid var(--ph-button-line)!important;box-shadow:0 0 12px #10d99422!important;
}
body[data-view=choose] :is(.library-more,.library-card .two button:not(.primary),.welcome-switch button){
background:#10d99414!important;color:#174c36!important;border:1px solid var(--ph-button-line)!important;box-shadow:0 0 9px #10d99412!important;
}
body:is([data-view=choose],[data-view=details]) #studio-help-open{
background:var(--ph-button-dark)!important;color:#f4fff8!important;border:1px solid var(--ph-button-line)!important;box-shadow:0 0 12px #10d99422!important;
}
@media(prefers-reduced-motion:reduce){
:is(.btn,.ph-btn,.ph-btn-master,.ph-join-btn,.ph-login-btn,.ph-offer-cta,.ph-submit-btn,.ph-tool-btn,.cs-btn,.mh-button,.mh-pill){transition:none!important}
}

a.ph-cta,button.send,.ph-rate-card > a{
background:var(--ph-button-green)!important;color:var(--ph-button-ink)!important;border:1px solid var(--ph-button-line)!important;box-shadow:0 0 12px #10d99422!important;text-shadow:none!important;
}
a.review-login,.map-embed > a,.ph-contact-links > a,.ph-page-root #services .grid .card a:not(.ph-click-target){
background:var(--ph-button-dark)!important;color:#f4fff8!important;border:1px solid var(--ph-button-line)!important;box-shadow:0 0 12px #10d99422!important;text-shadow:none!important;
}
}