/* StayPilot ONE SITE skin — shared chrome + type/palette alignment for the workspace app.
   Loads after the app bundle. Prefixed classes (spx-) avoid collisions with the app. */
:root{
  --font-sans:"DM Sans",ui-sans-serif,system-ui,sans-serif;
  --default-font-family:"DM Sans",ui-sans-serif,system-ui,sans-serif;
  --welcome-peach:#f4ab72;
}
::selection{background:#f4ab72;color:#203b39}
body{font-family:"DM Sans",ui-sans-serif,system-ui,sans-serif}
.spx-bar{position:sticky;top:0;z-index:999;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:12px 30px;background:rgba(13,20,17,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(245,241,234,.14)}
.spx-brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.spx-brand img{width:30px;height:30px;border-radius:8px;display:block}
.spx-word{font-family:"Fraunces",Georgia,serif;font-size:21px;font-weight:600;letter-spacing:.01em;color:#f5f1ea}
.spx-nav{display:flex;align-items:center;gap:26px}
.spx-nav a{color:rgba(245,241,234,.82);text-decoration:none;font-size:13.5px;font-weight:500;letter-spacing:.02em;font-family:"DM Sans",sans-serif}
.spx-nav a:hover{color:#ffffff}
.spx-nav a.spx-here{color:#f4ab72}
.spx-nav a.spx-cta{background:#f5f1ea;color:#14201c;padding:8px 16px;border-radius:999px;font-weight:600}
.spx-nav a.spx-cta:hover{color:#14201c}
@media (max-width:860px){.spx-nav a:not(.spx-cta){display:none}.spx-bar{padding:10px 18px}}