:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #14110c;
  color: #fff8e8;
  --panel: rgba(34, 29, 21, 0.94);
  --panel-soft: rgba(255, 248, 232, 0.06);
  --line: rgba(255, 248, 232, 0.14);
  --gold: #deb966;
  --gold-dark: #7e622b;
  --muted: #b9ad99;
  --success: #75bd8b;
  --danger: #ef8f8f;
}

* { box-sizing: border-box; }
html, body, #root { min-height: 100%; margin: 0; }
body { background: radial-gradient(circle at 15% 0%, #2b251b 0, #14110c 42%, #0d0b08 100%); color: #fff8e8; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button, a.button { -webkit-tap-highlight-color: transparent; }

.primaryButton, .secondaryButton, .dangerButton, .textButton {
  appearance: none;
  border-radius: 999px;
  min-height: 44px;
  padding: 0.72rem 1.1rem;
  font-weight: 750;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  cursor: pointer;
  transition: transform .16s ease, opacity .16s ease, border-color .16s ease;
}
.primaryButton { border: 1px solid #f0cd7b; background: linear-gradient(180deg, #efd27f, #c79e4e); color: #1a140b; }
.secondaryButton { border: 1px solid var(--line); background: rgba(255,255,255,.055); color: #fff8e8; }
.dangerButton { border: 1px solid rgba(239,143,143,.55); background: rgba(156,57,57,.25); color: #ffdada; }
.textButton { border: 0; background: transparent; color: #e4c579; min-height: 40px; }
.primaryButton:hover, .secondaryButton:hover, .dangerButton:hover { transform: translateY(-1px); }
button:disabled { opacity: .5; cursor: wait; transform: none !important; }
.wideButton { width: 100%; }

.connectedBrand { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; }
.connectedBrand img { width: 42px; height: 42px; object-fit: contain; }
.connectedBrand span { display: grid; line-height: 1.05; }
.connectedBrand strong { letter-spacing: .025em; font-size: 1rem; }
.connectedBrand small { color: var(--muted); margin-top: .2rem; font-size: .76rem; }
.eyebrow { color: #dabb72; text-transform: uppercase; letter-spacing: .16em; font-weight: 800; font-size: .72rem; }
.smallMuted { color: var(--muted); font-size: .84rem; }

.authPage, .connectedLoadingPage { min-height: 100vh; display: grid; place-items: center; padding: 1.25rem; }
.authCard, .connectedLoadingCard {
  width: min(100%, 540px);
  padding: clamp(1.3rem, 4vw, 2.2rem);
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 24px;
  box-shadow: 0 24px 90px rgba(0,0,0,.38);
}
.wideAuthCard { width: min(100%, 720px); }
.authCard h1, .connectedLoadingCard h1 { font-size: clamp(1.65rem, 5vw, 2.6rem); line-height: 1.05; margin: 1rem 0 .75rem; }
.authCard p, .connectedLoadingCard p { color: #c9bdab; line-height: 1.6; }
.stackForm { display: grid; gap: 1rem; margin-top: 1.3rem; }
.stackForm label, .cloudImportForm label { display: grid; gap: .45rem; color: #d9cdbb; font-weight: 650; font-size: .88rem; }
.stackForm input, .cloudImportForm input, .cloudImportForm select, .dashboardFilters input, .dashboardFilters select, .copyField input {
  width: 100%; min-height: 48px; border-radius: 13px; border: 1px solid var(--line); background: rgba(0,0,0,.23); color: #fff8e8; padding: .75rem .9rem; outline: none;
}
.stackForm input:focus, .cloudImportForm input:focus, .cloudImportForm select:focus, .dashboardFilters input:focus, .dashboardFilters select:focus { border-color: rgba(222,185,102,.75); box-shadow: 0 0 0 3px rgba(222,185,102,.12); }
.notice { border-radius: 14px; padding: .85rem 1rem; display: grid; gap: .22rem; line-height: 1.45; }
.notice.error { border: 1px solid rgba(239,143,143,.4); background: rgba(135,46,46,.18); color: #ffd8d8; }
.notice.success { border: 1px solid rgba(117,189,139,.42); background: rgba(35,111,63,.18); color: #dcffe6; }
.setupSteps { color: #d6c9b5; line-height: 1.8; padding-left: 1.25rem; }
pre { white-space: pre-wrap; word-break: break-word; color: #dbcfbe; }

.connectedStudioShell { min-height: 100vh; }
.connectedStudioHeader { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem clamp(1rem, 4vw, 3rem); border-bottom: 1px solid var(--line); background: rgba(20,17,12,.88); backdrop-filter: blur(18px); }
.studioAccount { display: flex; align-items: center; gap: .75rem; color: var(--muted); font-size: .84rem; }
.connectedHero, .connectedPanel, .connectedExperienceSection { width: min(1180px, calc(100% - 2rem)); margin-inline: auto; }
.connectedHero { display: grid; grid-template-columns: 1.35fr .8fr; gap: 2rem; align-items: center; padding: clamp(2.3rem, 7vw, 5rem) 0 2rem; }
.connectedHero h1 { font-size: clamp(2.25rem, 6vw, 4.7rem); line-height: .98; max-width: 13ch; margin: .75rem 0 1rem; }
.connectedHero p { color: #c8bcaa; line-height: 1.65; font-size: 1.05rem; max-width: 65ch; }
.platformSummary { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: rgba(255,255,255,.035); }
.platformSummary div { min-height: 120px; display: grid; place-content: center; text-align: center; padding: 1rem; border-right: 1px solid var(--line); }
.platformSummary div:last-child { border-right: 0; }
.platformSummary strong { font-size: 2rem; color: #f0cd7b; }
.platformSummary span { color: var(--muted); font-size: .78rem; margin-top: .4rem; }

.studioPanel, .connectedPanel { border: 1px solid var(--line); border-radius: 24px; background: rgba(34,29,21,.8); padding: clamp(1rem, 4vw, 2rem); box-shadow: 0 18px 70px rgba(0,0,0,.18); }
.sectionTitle { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.sectionTitle h2 { margin: .35rem 0 0; font-size: clamp(1.55rem, 4vw, 2.4rem); }
.sectionTitle p { color: var(--muted); max-width: 52ch; margin: 0; line-height: 1.5; }
.uploadZone { position: relative; min-height: 130px; border: 1px dashed rgba(222,185,102,.45); background: rgba(222,185,102,.045); border-radius: 18px; display: grid; place-content: center; text-align: center; gap: .35rem; padding: 1rem; }
.uploadZone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.uploadZone strong { color: #efd27f; }
.uploadZone span { color: var(--muted); font-size: .84rem; }
.loadingInline { padding: 1rem; text-align: center; color: var(--muted); }
.connectedImportReview { margin: 1rem 0; }
.reviewStatus { display: flex; gap: .8rem; align-items: center; padding: .9rem 1rem; border-radius: 14px; background: rgba(49,115,68,.15); border: 1px solid rgba(117,189,139,.3); }
.reviewStatus > span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(117,189,139,.18); color: #9ee1af; }
.reviewStatus div { display: grid; gap: .18rem; }
.reviewStatus small { color: var(--muted); }
.importFacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-top: .8rem; }
.importFacts div { display: grid; gap: .35rem; padding: .85rem; background: #211c15; }
.importFacts span { color: var(--muted); font-size: .75rem; }
.importFacts strong { font-size: .92rem; }
.optimizationNote { color: #cdbf9d; border-left: 3px solid #d0a950; padding-left: .85rem; line-height: 1.5; }
.cloudImportForm { display: grid; gap: 1rem; }
.formGrid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .9rem; }
.formGrid.threeColumns { grid-template-columns: repeat(3, minmax(0,1fr)); }
.spanTwo { grid-column: span 2; }

.connectedExperienceSection { padding: 3rem 0 5rem; }
.dashboardFilters { display: flex; gap: .65rem; min-width: min(100%, 430px); }
.dashboardFilters input { flex: 1; }
.dashboardFilters select { width: auto; }
.cloudCompanionGrid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; }
.cloudCompanionCard { display: flex; flex-direction: column; min-height: 310px; border: 1px solid var(--line); background: rgba(34,29,21,.74); border-radius: 19px; padding: 1.1rem; box-shadow: 0 15px 45px rgba(0,0,0,.16); }
.cardTopline { display: flex; justify-content: space-between; gap: .75rem; align-items: center; color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; }
.statusPill { display: inline-flex; align-items: center; border-radius: 999px; padding: .25rem .55rem; border: 1px solid var(--line); }
.status-published { color: #abefbc; border-color: rgba(117,189,139,.38); background: rgba(46,130,69,.15); }
.status-draft { color: #f1d68f; border-color: rgba(222,185,102,.38); background: rgba(143,104,32,.13); }
.status-archived { color: #b8afa1; }
.cloudCompanionCard h3 { font-size: 1.3rem; margin: 1rem 0 .35rem; }
.cloudCompanionCard > p { color: var(--muted); margin: 0 0 1rem; }
.customerLine { display: grid; gap: .2rem; padding: .75rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.customerLine span { color: var(--muted); font-size: .8rem; }
.cardMetrics { display: flex; justify-content: space-between; gap: .75rem; color: var(--muted); font-size: .76rem; padding: .75rem 0; }
.cardActions { display: flex; flex-wrap: wrap; gap: .55rem; }
.compactActions .primaryButton, .compactActions .secondaryButton { min-height: 38px; padding: .5rem .78rem; font-size: .78rem; flex: 1; }
.cardAdminActions { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; margin-top: auto; padding-top: .75rem; }
.cardAdminActions .primaryButton, .cardAdminActions .secondaryButton { min-height: 38px; font-size: .78rem; padding: .5rem .78rem; }
.emptyCloudState { grid-column: 1/-1; min-height: 220px; border: 1px dashed var(--line); border-radius: 18px; display: grid; place-content: center; text-align: center; gap: .4rem; color: var(--muted); }
.emptyCloudState strong { color: #fff8e8; font-size: 1.15rem; }
.studioFooter { text-align: center; color: var(--muted); font-size: .75rem; padding: 1.5rem; border-top: 1px solid var(--line); }

.modalBackdrop { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 1rem; background: rgba(5,4,3,.72); backdrop-filter: blur(12px); }
.modalCard { position: relative; width: min(100%, 590px); max-height: min(88vh, 760px); overflow: auto; border: 1px solid var(--line); border-radius: 22px; background: #211c15; padding: clamp(1.1rem, 4vw, 1.8rem); box-shadow: 0 30px 110px rgba(0,0,0,.55); }
.modalCard h2 { margin: .55rem 0 .8rem; font-size: clamp(1.55rem, 5vw, 2.2rem); }
.modalCard p { color: var(--muted); line-height: 1.55; }
.iconButton.closeButton { position: absolute; top: .7rem; right: .7rem; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); color: #fff8e8; background: rgba(255,255,255,.05); font-size: 1.3rem; cursor: pointer; }
.resultCode { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 14px; margin: .65rem 0; }
.resultCode span { color: var(--muted); font-size: .8rem; }
.resultCode strong { letter-spacing: .12em; color: #efd27f; }
.resultCode.claim strong { color: #9ee1af; }
.copyField { display: grid; grid-template-columns: 1fr auto; gap: .45rem; margin: .7rem 0; }
.copyField span { grid-column: 1/-1; color: var(--muted); font-size: .76rem; }
.copyField button { border: 1px solid var(--line); border-radius: 12px; color: #fff8e8; background: rgba(255,255,255,.06); padding: 0 .8rem; }
.modalActions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .65rem; margin-top: 1.1rem; }

.connectedLoadingCard { text-align: center; }
.connectedLoadingCard > img { width: 58px; height: 58px; }
.loadingSpinner { width: 34px; height: 34px; border: 3px solid rgba(255,255,255,.13); border-top-color: #e5be67; border-radius: 50%; margin: 1.2rem auto; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.cloudSyncIndicator { position: fixed; z-index: 5000; left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: .45rem; min-height: 34px; padding: .45rem .7rem; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(16,14,10,.78); backdrop-filter: blur(14px); box-shadow: 0 10px 35px rgba(0,0,0,.25); pointer-events: none; font-size: .7rem; color: #d8ccb8; }
.syncDot { width: 7px; height: 7px; border-radius: 50%; background: #75bd8b; box-shadow: 0 0 0 4px rgba(117,189,139,.12); }
.cloudSyncIndicator[data-state="syncing"] .syncDot { background: #e2bd62; animation: pulse 1s ease-in-out infinite; }
.cloudSyncIndicator[data-state="error"] .syncDot { background: #ef8f8f; }
@keyframes pulse { 50% { opacity: .35; } }
.connectedAccountDock { position: fixed; z-index: 4999; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: .55rem; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(16,14,10,.78); backdrop-filter: blur(14px); padding: .42rem .65rem; font-size: .67rem; color: #cfc2ae; }
.connectedAccountDock span { color: #a99d8b; }
.connectedAccountDock button { border: 0; background: transparent; color: #e7c36f; font-weight: 700; padding: .2rem; cursor: pointer; }
.connectedOwnerBackdrop { align-items: end; }
.connectedOwnerCard { margin-bottom: max(0px, env(safe-area-inset-bottom)); }

@media (max-width: 950px) {
  .connectedHero { grid-template-columns: 1fr; }
  .platformSummary { max-width: 620px; }
  .cloudCompanionGrid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .formGrid.threeColumns { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 680px) {
  .connectedStudioHeader { align-items: center; }
  .studioAccount span { display: none; }
  .connectedHero, .connectedPanel, .connectedExperienceSection { width: min(100% - 1rem, 1180px); }
  .connectedHero { padding-top: 2.2rem; }
  .connectedHero h1 { font-size: clamp(2.15rem, 12vw, 3.5rem); }
  .platformSummary { grid-template-columns: repeat(3, 1fr); }
  .platformSummary div { min-height: 92px; padding: .65rem .25rem; }
  .platformSummary strong { font-size: 1.45rem; }
  .platformSummary span { font-size: .64rem; }
  .sectionTitle { align-items: stretch; flex-direction: column; }
  .dashboardFilters { width: 100%; min-width: 0; flex-direction: column; }
  .dashboardFilters select { width: 100%; }
  .cloudCompanionGrid { grid-template-columns: 1fr; }
  .formGrid, .formGrid.threeColumns { grid-template-columns: 1fr; }
  .spanTwo { grid-column: auto; }
  .importFacts { grid-template-columns: repeat(2, 1fr); }
  .cardMetrics { flex-direction: column; gap: .25rem; }
  .connectedAccountDock { display: none; }
  .cloudSyncIndicator { left: 50%; transform: translateX(-50%); bottom: max(8px, env(safe-area-inset-bottom)); }
  .connectedOwnerBackdrop { padding: 0; }
  .connectedOwnerCard { width: 100%; max-height: 88dvh; border-radius: 22px 22px 0 0; border-bottom: 0; }
  .copyField { grid-template-columns: 1fr; }
  .copyField button { min-height: 42px; }
}

/* v0.6.1 route and manual-coordinate builder */
.builderSubsection {
  display: grid;
  gap: 1rem;
  padding: clamp(1rem, 3vw, 1.35rem);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(10, 8, 6, .18);
}
.builderSubsection[hidden] { display: none !important; }
.subsectionHeading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.subsectionHeading h3 { margin: .28rem 0 0; font-size: 1.25rem; }
.subsectionHeading p { margin: 0; max-width: 62ch; color: var(--muted); line-height: 1.5; font-size: .85rem; }
.routeUploadZone {
  position: relative;
  min-height: 92px;
  border: 1px dashed rgba(222,185,102,.42);
  border-radius: 15px;
  background: rgba(222,185,102,.035);
  display: grid !important;
  place-content: center;
  text-align: center;
  gap: .25rem !important;
  cursor: pointer;
}
.routeUploadZone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.routeUploadZone strong { color: #efd27f; }
.routeUploadZone span { color: var(--muted); font-size: .78rem; }
.routeEmptyNote { color: var(--muted); border-left: 3px solid rgba(222,185,102,.45); padding: .7rem .85rem; font-size: .84rem; }
.routeImportReview { display: grid; gap: .75rem; }
.routeFacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--line); border-radius: 13px; background: var(--line); overflow: hidden; }
.routeFacts > div { display: grid; gap: .25rem; padding: .75rem; background: #211c15; }
.routeFacts span { color: var(--muted); font-size: .72rem; }
.routeFacts strong { font-size: .88rem; }
.manualMarkerList { display: grid; gap: .65rem; }
.manualMarkerRow {
  display: grid;
  grid-template-columns: minmax(105px,.55fr) minmax(150px,1fr) minmax(240px,1.35fr) 42px;
  gap: .65rem;
  align-items: end;
  padding: .75rem;
  border: 1px solid rgba(255,255,255,.095);
  border-radius: 14px;
  background: rgba(255,255,255,.025);
}
.manualMarkerRow label { min-width: 0; }
.manualMarkerRow select,
.cloudImportForm textarea {
  width: 100%; min-height: 48px; border-radius: 13px; border: 1px solid var(--line); background: rgba(0,0,0,.23); color: #fff8e8; padding: .75rem .9rem; outline: none;
}
.removeMarkerButton {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(239,143,143,.28);
  background: rgba(135,46,46,.12);
  color: #ffd0d0;
  font-size: 1.25rem;
  cursor: pointer;
}
.addMarkerRowButton { justify-self: start; }
.fieldHelp { margin: -.25rem 0 0; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.fieldHelp code { color: #efd27f; }

@media (max-width: 760px) {
  .subsectionHeading { align-items: stretch; flex-direction: column; }
  .manualMarkerRow { grid-template-columns: 1fr 1fr 42px; }
  .markerCoordinateField { grid-column: 1 / span 2; }
  .removeMarkerButton { grid-column: 3; grid-row: 1; align-self: end; }
  .routeFacts { grid-template-columns: 1fr; }
}

@media (max-width: 470px) {
  .manualMarkerRow { grid-template-columns: 1fr 42px; }
  .manualMarkerRow label { grid-column: 1; }
  .markerCoordinateField { grid-column: 1; }
  .removeMarkerButton { grid-column: 2; grid-row: 1; }
}

/* v0.6.3 map runtime repair */
.notice.warning.archiveWarning {
  display: grid;
  gap: 0.35rem;
  border-color: rgba(222, 185, 102, 0.55);
  background: rgba(82, 60, 24, 0.45);
  color: #fff2cc;
}
.notice.warning.archiveWarning strong { color: #ffe299; }
.notice.warning.archiveWarning small { color: rgba(255, 242, 204, 0.78); }

/* v0.6.5 production-view and UI consolidation */
.connectedHero {
  grid-template-columns: minmax(0,1fr) auto;
  gap: 1.5rem;
  padding: 1.6rem 0 1.25rem;
}
.connectedHeroCopy { min-width: 0; }
.connectedHero h1 {
  max-width: none;
  margin: .32rem 0 .35rem;
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1;
}
.connectedHero p {
  margin: 0;
  max-width: 60ch;
  font-size: .93rem;
  line-height: 1.5;
}
.platformSummary { min-width: min(430px, 42vw); border-radius: 17px; }
.platformSummary div { min-height: 86px; padding: .65rem .9rem; }
.platformSummary strong { font-size: 1.45rem; }
.platformSummary span { font-size: .69rem; }

.connectedViewerBody .connectedAccountDock { display: none !important; }
.cloudSyncIndicator[hidden] { display: none !important; }
.connectedViewerBody .cloudSyncIndicator {
  left: 50%;
  bottom: calc(82px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  animation: connectedToastIn .2s ease both;
}
@keyframes connectedToastIn { from { opacity: 0; transform: translate(-50%, 8px); } }

/* The embedded prototype controls are replaced by one clean access control. */
.connectedViewerBody .companionHeaderActions > .ownerBadge,
.connectedViewerBody .companionHeaderActions > .previewHomeButton,
.connectedViewerBody .companionHeaderActions > .ownerEntryButton,
.connectedViewerBody .companionHeaderActions > .glassButton:not(.helpButton):not(.connectedViewerMenuButton) {
  display: none !important;
}
.connectedViewerMenuButton {
  min-width: 0;
  white-space: nowrap;
}
.connectedViewerMenuButton.active { border-color: rgba(238,204,122,.55); color: #f0d184; }
.connectedViewerMenu {
  position: fixed;
  z-index: 6200;
  top: calc(70px + env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: min(290px, calc(100vw - 24px));
  display: grid;
  padding: 8px;
  border: 1px solid rgba(255,248,232,.16);
  border-radius: 17px;
  background: rgba(20,17,12,.96);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  box-shadow: 0 22px 70px rgba(0,0,0,.48);
}
.connectedViewerMenu[hidden] { display: none; }
.connectedViewerMenuIdentity { display: grid; gap: 2px; padding: 9px 10px 10px; border-bottom: 1px solid rgba(255,248,232,.11); margin-bottom: 4px; }
.connectedViewerMenuIdentity span { color: #a99d8b; font-size: .67rem; }
.connectedViewerMenuIdentity strong { overflow: hidden; text-overflow: ellipsis; font-size: .77rem; }
.connectedViewerMenu a,
.connectedViewerMenu button {
  appearance: none;
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  border: 0;
  border-radius: 11px;
  padding: 0 11px;
  background: transparent;
  color: #f7edd9;
  text-decoration: none;
  text-align: left;
  font: inherit;
  font-size: .78rem;
  font-weight: 720;
  cursor: pointer;
}
.connectedViewerMenu a:hover,
.connectedViewerMenu button:hover { background: rgba(255,248,232,.07); }

/* Diagnostics are an owner troubleshooting tool, never customer-facing. */
.connectedViewerBody .ownerMapDiagnostics { display: none !important; }
.connectedViewerBody.connectedOwnerMode.connectedDebugMode .ownerMapDiagnostics { display: block !important; }

/* Explore is the map's default state, not another tab. */
.connectedViewerBody .companionNav > button:first-child { display: none !important; }
.connectedViewerBody .companionNav { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
.connectedViewerBody .companionNav.routeNavFive { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }

/* Never stack content sheets on top of each other. */
.connectedViewerBody .companionShell:has(.memorySheet) .featureDrawer,
.connectedViewerBody .companionShell:has(.memorySheet) .layerPanel,
.connectedViewerBody .companionShell:has(.memorySheet) .addMemoryButton,
.connectedViewerBody .companionShell:has(.memorySheet) .mapToolDock { display: none !important; }
.connectedViewerBody .memorySheet > img,
.connectedViewerBody .galleryGrid img { cursor: zoom-in; }

.connectedPhotoLightbox {
  position: fixed;
  z-index: 10050;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background: rgba(4,3,2,.94);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.connectedPhotoLightbox[hidden] { display: none; }
.connectedPhotoLightbox img {
  max-width: min(96vw, 1500px);
  max-height: 92dvh;
  object-fit: contain;
  border-radius: 13px;
  box-shadow: 0 28px 110px rgba(0,0,0,.62);
  touch-action: pinch-zoom;
}
.connectedPhotoLightboxClose {
  position: fixed;
  z-index: 2;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 50%;
  color: #fff;
  background: rgba(18,15,10,.76);
  font-size: 1.6rem;
  cursor: pointer;
}
.connectedPhotoOpen { overflow: hidden; }

@media (max-width: 950px) {
  .connectedHero { grid-template-columns: 1fr; gap: .8rem; }
  .platformSummary { min-width: 0; width: min(100%, 620px); max-width: none; }
}

@media (max-width: 760px) {
  .connectedHero { padding: 1.15rem 0 .9rem; }
  .connectedHero h1 { font-size: clamp(1.8rem, 9vw, 2.6rem); }
  .connectedHero p { font-size: .82rem; }
  .platformSummary div { min-height: 72px; }
  .connectedViewerMenu { top: calc(62px + env(safe-area-inset-top)); }
  .connectedViewerMenuButton { padding: .62rem .72rem; font-size: .66rem; }
  .connectedViewerBody .companionHeader { padding-inline: 9px; }
  .connectedViewerBody .companionHeaderActions { gap: 6px; }
  .connectedViewerBody .identityCard {
    top: calc(62px + env(safe-area-inset-top));
    left: 10px;
    width: min(360px, calc(100vw - 20px));
    padding: 9px 12px 10px;
    border-radius: 17px;
  }
  .connectedViewerBody .identityCard .eyebrow { font-size: .55rem; letter-spacing: .13em; }
  .connectedViewerBody .identityCard h1 { margin-top: 3px; font-size: 1.08rem; line-height: 1.08; }
  .connectedViewerBody .identityCard p { margin-top: 3px; font-size: .68rem; }
  .connectedViewerBody .exploreHint { bottom: calc(82px + env(safe-area-inset-bottom)); }
  .connectedViewerBody .cloudSyncIndicator { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .connectedViewerBody .companionNav button { padding-inline: 5px; }
}


/* v0.6.6 cloud-save, domain, and multi-photo additions */
.domainSetupBanner,
.domainPending {
  border: 1px solid rgba(239, 193, 91, .38);
  background: rgba(239, 193, 91, .09);
  border-radius: 18px;
  padding: 14px 16px;
  display: flex;
  gap: 8px;
  flex-direction: column;
  margin: 0 auto 18px;
  max-width: 1180px;
}
.domainSetupBanner strong,
.domainPending strong { color: #f0cb75; }
.domainSetupBanner span,
.domainPending span { color: rgba(255,255,255,.78); line-height: 1.45; }
.cloudSyncIndicator[data-state="syncing"] { display: flex !important; }
.cloudSyncIndicator[data-state="saved"] { display: flex !important; }
.cloudSyncIndicator[data-state="error"] { display: flex !important; background: rgba(83, 24, 24, .94); border-color: rgba(255, 120, 120, .5); }

.memoryImageGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.memoryImageGrid .memoryImageWrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.memoryImageGrid .memoryImagePreview {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
}
.memoryImageGrid .secondaryButton { min-height: 36px; padding: 7px 10px; }
.memoryPhotoGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  width: 100%;
  max-height: min(42vh, 420px);
  overflow: hidden;
  background: #111;
}
.memoryPhotoGrid img {
  width: 100%;
  height: 100%;
  min-height: 120px;
  max-height: 220px;
  object-fit: cover;
  cursor: zoom-in;
}
.memoryPhotoGrid img:only-child { grid-column: 1 / -1; max-height: 420px; }
.galleryGrid button { position: relative; }
.galleryPhotoCount {
  position: absolute;
  top: 8px;
  right: 8px;
  border-radius: 999px;
  padding: 4px 7px;
  background: rgba(12, 14, 13, .82);
  color: white;
  font-size: 12px;
  font-weight: 800;
}
.connectedPhotoLightbox figure {
  width: min(92vw, 1180px);
  height: min(86vh, 900px);
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.connectedPhotoLightbox figure img {
  width: 100%;
  height: calc(100% - 34px);
  object-fit: contain;
}
.connectedPhotoLightbox figcaption {
  min-height: 24px;
  color: white;
  font-weight: 800;
  letter-spacing: .04em;
}
.connectedPhotoLightboxNav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  background: rgba(18,18,16,.72);
  color: white;
  font-size: 36px;
  line-height: 1;
}
.connectedPhotoLightboxPrev { left: max(12px, env(safe-area-inset-left)); }
.connectedPhotoLightboxNext { right: max(12px, env(safe-area-inset-right)); }
@media (max-width: 640px) {
  .memoryImageGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .memoryPhotoGrid { max-height: 34vh; }
  .memoryPhotoGrid img { min-height: 92px; max-height: 160px; }
  .connectedPhotoLightboxNav { width: 40px; height: 40px; font-size: 30px; opacity: .86; }
  .connectedPhotoLightbox figure { width: 100vw; height: 86vh; }
}

.galleryMemoryPhotoSet { width: 100%; height: 100%; }
.galleryMemoryPhotoSet > img:first-child { width: 100%; height: 100%; object-fit: cover; }
.galleryHiddenPhoto { display: none !important; }


/* v0.6.7 Studio password authentication */
.passwordField { position: relative; }
.passwordField input { padding-right: 4.7rem !important; }
.passwordToggle {
  position: absolute; right: .45rem; top: 50%; transform: translateY(-50%);
  min-height: 36px; padding: .35rem .65rem; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255,255,255,.06); color: #f3dfab;
  font-size: .75rem; font-weight: 800; cursor: pointer;
}
.passwordToggle:hover { border-color: rgba(222,185,102,.55); }
.authRecoveryActions { display: grid; gap: .65rem; margin-top: 1rem; }
.authRecoveryActions .secondaryButton { width: 100%; }
.passwordHint { margin: -.35rem 0 0 !important; font-size: .8rem; color: var(--muted) !important; }
.authCancelButton { width: 100%; margin-top: .65rem; }
.accountPasswordCard { width: min(100%, 520px); }
.accountPasswordCard > p { color: var(--muted); line-height: 1.5; }

@media (max-width: 720px) {
  .studioAccount { gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
  .studioAccount > span { width: 100%; text-align: right; font-size: .72rem; }
  .studioAccount .secondaryButton { min-height: 38px; padding: .55rem .75rem; font-size: .78rem; }
}