/* Shared site chrome: header + footer. Linked by every authenticated page
   (dashboard, builder, ...) so the look is identical everywhere and cannot
   drift. Edit dimensions HERE only. */

/* ── Header ── */
header { background: #FFFFFF; border-bottom: 1px solid #E5E7EB; position: sticky; top: 0; z-index: 200; flex-shrink: 0; }
header nav { display: flex; align-items: center; justify-content: space-between; height: 64px; max-width: 1200px; margin: 0 auto; padding: 0 24px; gap: 24px; }
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.nav-logo-icon { height: 15px; display: flex; align-items: center; }
.nav-logo-icon img { height: 15px; width: auto; display: block; }
.nav-logo-text { font-size: 18px; font-weight: 700; color: #0D1B2A; letter-spacing: -0.3px; }
.nav-left { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nav-plan { font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: #2563EB; background: #EFF4FF; border: 1px solid #DCE6FB; border-radius: 6px; padding: 3px 8px; line-height: 1.35; white-space: nowrap; }
.nav-plan[hidden] { display: none; }
.nav-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.nav-user { font-size: 13px; color: #6B7280; }
.nav-settings { font-size: 14px; font-weight: 600; color: #2563EB; text-decoration: none; }
.nav-settings:hover { text-decoration: underline; }
.btn-signout { font-family: inherit; font-size: 14px; font-weight: 600; color: #FFFFFF; background: #2563EB; border: none; border-radius: 8px; padding: 9px 16px; cursor: pointer; }
.btn-signout:hover { background: #1D4ED8; box-shadow: 0 2px 8px rgba(37,99,235,.35); }

/* ── Footer ── */
footer { background: #1F2937; border-top: 1px solid #374151; padding: 16px 24px; flex-shrink: 0; }
.footer-inner { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.footer-tagline { margin: 0; text-align: center; font-size: 15px; font-weight: 600; line-height: 1.6; color: #F9FAFB; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.footer-left { display: flex; align-items: center; gap: 8px; }
.footer-logo-icon { height: 14px; display: flex; align-items: center; }
.footer-logo-icon img { height: 14px; width: auto; display: block; }
.footer-copy { font-size: 13px; line-height: 1.6; color: #9CA3AF; }
.qt-inline { height: 27px; width: auto; vertical-align: middle; margin: 0 5px; display: inline-block; }
.qt-link { display: inline-flex; align-items: center; vertical-align: middle; }
.footer-links { display: flex; align-items: center; gap: 16px; flex: 1; justify-content: flex-end; flex-wrap: nowrap; height: 64px; max-width: 1200px; padding: 0 24px; box-sizing: border-box; }
.footer-links a { font-size: 13px; line-height: 1.6; color: #9CA3AF; text-decoration: none; transition: color .15s; }
.footer-links a:hover { color: #F9FAFB; }
.footer-links span { color: #4B5563; line-height: 1.6; }
@media (max-width: 768px) {
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer-links { flex-wrap: wrap; height: auto; padding: 12px 16px; }
}

/* ── App tabs (shared secondary nav; a rail of tabs under the logo row).
   Illumino-matched: the rail (.app-tabs-inner) carries the hairline, and each
   tab pulls down 1px so the active tab's 2px accent underline sits flush ON the
   line. Same tab pattern as the Illumino dashboard, so the two apps read as one
   family. Edit the metrics HERE only; every app page inherits this. ── */
.app-tabs { background: #FFFFFF; }
.app-tabs-inner { display: flex; gap: 2px; max-width: 1200px; margin: 0 auto; padding: 0 24px; overflow-x: auto; border-bottom: 1px solid #E4E8EF; scrollbar-width: none; }
.app-tabs-inner::-webkit-scrollbar { display: none; }
.app-tab { font-family: inherit; font-size: 14px; font-weight: 600; color: #5B6676; text-decoration: none; padding: 13px 16px 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; border-radius: 7px 7px 0 0; white-space: nowrap; transition: color .15s, background .15s, border-color .15s; }
.app-tab:hover:not(.active) { color: #0D1B2A; background: #F3F6FC; }
.app-tab.active { color: #2563EB; border-bottom-color: #2563EB; }