/* Sanctuary v2: one environment, an open stage and a continuous ivory sheet.
   Existing auth/API IDs are retained, not the old dashboard composition. */
:root {
  --color-text: #eceee6; --color-bg: #141d18; --color-accent: #ece9dc;
  --color-accent-100: #e9e6db; --color-accent-200: #e9e6db; --color-accent-300: #c8ccbc;
  --font-heading: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Manrope", system-ui, sans-serif;
  --night: #151e19; --panel: rgba(26,36,29,.94); --panel-2: rgba(255,255,255,.04);
  --ink-70: #c9d0c3; --ink-55: #aeb8a7; --ink-40: #9eaa98; --hair: #ffffff1e;
  --ok: #a9c29b; --warn: #e8c293; --bad: #ffb1a2;
  --radius-lg: 30px; --radius-md: 18px;
}
html { background: #141d18; }
body { background: transparent; isolation: isolate; }
body::before, .stars { display: none; }
.sanctuary-world { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: #19241c; }
.sanctuary-forest { position: absolute; inset: -2%; background: url('/assets/hero-tree-hands-v1.webp') 43% center / cover no-repeat; animation: arrive-world 1.8s cubic-bezier(.2,.75,.25,1) both; }
.sanctuary-mist { position: absolute; inset: 0; background: linear-gradient(90deg,#0a171759,#15211b05 44%,#14211988), linear-gradient(180deg,#14211966,transparent 45%,#111b16ca); }
@keyframes arrive-world { from { transform: scale(1.035); opacity: .7; } to { transform: scale(1); opacity: 1; } }
.app { display: flex; flex-direction: column; min-height: 100dvh; background: none; width: min(1500px, 100%); margin: auto; }
.side { display: flex; flex-direction: row; position: static; width: auto; height: auto; padding: 26px 40px 10px; gap: 32px; background: none; border: 0; }
.side > .brand { margin: 0; padding: 0; }
.brand .wordmark { font: 400 34px/1 var(--font-heading); letter-spacing: -.07em; }
.side nav { display: flex; margin: 0 auto; padding: 5px; border-radius: 32px; background: #17261ede; gap: 2px; }
.navlink, .mnavlink { appearance: none; font-family: var(--font-body); background: none; border: 0; cursor: pointer; }
.side .navlink { margin: 0; border: 0; padding: 12px 17px; border-radius: 26px; color: #c9d0c3; font-size: 11px; white-space: nowrap; }
.side .navlink i, .side .navlink .badge { display: none; }
.side .navlink.active { background: #e9e7dc; color: #243027; }
.side .navlink:hover:not(.active) { background: #ffffff12; color: #fff; }
.side .user { display: flex; margin: 0; padding: 0; border: 0; background: none; gap: 8px; }
.side .user .who { display: none; }
.side .user .av { background: #e9e7dc; color: #26312a; width: 36px; height: 36px; }
.side .user .out { color: #e9e7dc; }
.main { min-width: 0; overflow: visible; background: none; }
.topbar { position: static; background: none; border: 0; padding: 12px 40px; min-height: 48px; backdrop-filter: none; -webkit-backdrop-filter: none; }
.topbar .mtitle { font: 400 26px var(--font-heading); }
#screen-app[data-view="overview"] .topbar .mtitle { font: 500 11px var(--font-body); color: #d0d5c8; letter-spacing: .03em; }
.topbar .lang { border: 0; background: #16251ce0; }
.topbar .lang button { color: #d0d7c9; padding: 8px 10px; }
.topbar .lang button[aria-pressed="true"] { background: #e9e7dc; color: #243027; }
.content { max-width: none; width: 100%; padding: 12px 40px 38px; }
.overview-space { display: grid; grid-template-columns: minmax(0,1fr) 390px; gap: 50px; align-items: stretch; }
.access-stage { display: flex; flex-direction: column; justify-content: space-between; min-height: 570px; padding: 5px 0 30px; }
.space-eyebrow { font: 500 10px/1.5 var(--font-body); letter-spacing: .16em; text-transform: uppercase; margin: 0 0 20px; }
.access-stage h1 { font: 400 clamp(40px,4.7vw,76px)/.98 var(--font-heading); letter-spacing: -.05em; margin: 0; max-width: 13ch; text-shadow: 0 2px 18px #15221b40; }
.access-stage h1 em { font-weight: 400; color: #d6dcce; }
.access-pass { display: flex; align-items: center; gap: 24px; padding-top: 170px; }
.sub-days { display: flex; flex-direction: column; align-items: flex-start; text-align: left; border: 0; padding: 0; min-width: 70px; }
.sub-days .n { color: #f1eee2; font: 400 82px/.85 var(--font-heading); letter-spacing: -.07em; }
.sub-days .l { margin-top: 10px; font-size: 11px; color: #d4dacd; max-width: 100px; }
.pass-info { padding: 4px 0 4px 24px; border-left: 1px solid #e3e9dc40; }
.sub-plan { font: 400 clamp(26px,2.5vw,40px)/1.15 var(--font-heading); letter-spacing: -.02em; margin: 12px 0 8px; }
.sub-meta { color: #d1d9ca; font-size: 12px; max-width: 26ch; line-height: 1.6; }
.stpill { font-size: 10px; padding: 5px 9px; }
.control-sheet, .auth-card {
  --color-text: #29372d; --ink-70: #526052; --ink-55: #5e6a5b; --ink-40: #63705f;
  --color-accent: #344a37; --color-accent-100: #344a37; --color-accent-200: #344a37; --color-accent-300: #52614a;
  --panel: #ebece1; --panel-2: #dde0d1; --hair: #30422b26; --ok: #466541; --bad: #963b32; --warn: #795921;
  color: var(--color-text); background: #eeeee3f2;
  border-radius: 36px; box-shadow: inset 0 1px 0 #fff8, 0 20px 60px -35px #0b221f;
}
.control-sheet { padding: 30px; align-self: start; }
.sheet-intro h2 { font: 400 35px/1.1 var(--font-heading); letter-spacing: -.035em; margin: 8px 0 24px; }
.sheet-intro .space-eyebrow { color: #606e58; }
.btn { border-radius: 999px; min-height: 46px; padding: 12px 21px; font-family: var(--font-body); font-size: 12px; font-weight: 600; transition: transform .25s cubic-bezier(.2,.75,.25,1), background .25s; }
.btn:active, .device-shortcut:active { transform: scale(.98); }
.btn-primary { color: #203022; background: #eceadb; border-color: transparent; }
.control-sheet .btn-primary, .auth-card .btn-primary { color: #f2f2e7; background: #2b3c2d; border-color: transparent; }
.btn-primary:hover { background: #d4d9c6; }
.control-sheet .btn-primary:hover, .auth-card .btn-primary:hover { background: #43573c; }
.btn-secondary { background: #ffffff0b; border-color: var(--hair); color: var(--color-text); }
.btn-ghost { color: var(--color-accent); }
.usage-ledger { margin-top: 28px; }
.brow { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 11px; }
.brow b { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.track { height: 4px; margin-top: 11px; background: #32422a1a; border-radius: 4px; }
.track .fill { height: 100%; background: #53634a; border-radius: inherit; }
.text-action { padding: 13px 0 0; background: none; color: #465b3e; border: 0; font: 500 11px var(--font-body); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.device-shortcut { display: flex; width: 100%; align-items: center; gap: 14px; text-align: left; border: 0; border-block: 1px solid var(--hair); background: none; color: inherit; padding: 22px 0; margin-top: 22px; cursor: pointer; font-family: inherit; }
.shortcut-symbol { font-size: 27px; }
.device-shortcut > span:nth-child(2) { flex: 1; }
.device-shortcut b { font-size: 13px; font-weight: 600; }
.device-shortcut .muted { display: block; margin-top: 5px; font-size: 10px; }
.slots { gap: 3px; }
.connection-note { display: flex; flex-direction: column; align-items: flex-start; padding: 20px 0; gap: 9px; }
.connection-note b { font-size: 12px; font-weight: 600; }
.connection-note p { font-size: 11px; line-height: 1.55; color: var(--ink-55); margin: 0; }
.ref-disclosure { border-top: 1px solid var(--hair); font-size: 12px; padding-top: 18px; }
.ref-disclosure summary { list-style: none; display: flex; justify-content: space-between; gap: 12px; cursor: pointer; }
.ref-disclosure summary::-webkit-details-marker { display: none; }
.ref-disclosure[open] summary i { transform: rotate(45deg); }
.ref-disclosure .muted { font-size: 11px; line-height: 1.6; }
.sheet-help { display: block; color: var(--ink-55); font-size: 10px; margin-top: 22px; text-decoration: none; }
.sheet-help:hover { text-decoration: underline; }
.pane:not([data-pane="overview"]) { max-width: 760px; margin-left: auto; }
.card2 { border: 0; border-radius: 30px; background: #1b291fee; box-shadow: none; }
.card2 .cpad { padding: 24px 28px; }
.group-preview { padding: 27px 30px 25px; border-radius: var(--radius-lg); background: #e9eadff2; color: #29372d; }
.group-preview[hidden], .group-controls[hidden], .group-action-row[hidden] { display: none; }
.group-preview > h2 { margin: 0; font: 400 35px/1.1 var(--font-heading); }
.group-preview-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.group-preview-heading .space-eyebrow { margin-bottom: 7px; color: #5d6b59; }
.group-preview-heading h2 { margin: 0; font: 400 35px/1.1 var(--font-heading); }
.group-preview-demo { border: 1px solid #415d4540; border-radius: 999px; padding: 7px 11px; color: #415d45; font-size: 14px; white-space: nowrap; }
.group-preview-intro { max-width: 58ch; color: #586756; font-size: 16px; line-height: 1.55; margin: 15px 0 22px; }
.group-preview-members { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.group-preview-member { display: flex; align-items: center; min-width: 0; gap: 12px; border: 1px solid #53634a28; border-radius: var(--radius-md); padding: 13px; background: #fbfcf680; }
.group-preview-avatar { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%; background: #dbe2d3; color: #344a37; font: 400 21px var(--font-heading); }
.group-preview-member-name { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 3px; }
.group-preview-member-name b { overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.group-preview-member-name small { color: #64715e; font-size: 14px; }
.group-preview-member-count { font: 500 14px var(--font-body); white-space: nowrap; }
.group-preview-note, .group-preview-empty { color: #586756; font-size: 14px; line-height: 1.5; margin: 19px 0 0; }
.group-controls { display: grid; gap: 14px; margin-top: 21px; padding-top: 20px; border-top: 1px solid #53634a28; }
.group-controls form { display: grid; gap: 8px; }
.group-controls form[hidden] { display: none; }
.group-field { color: #425341; font-size: 13px; font-weight: 600; }
.group-action-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.group-action-row input { flex: 1 1 210px; min-width: 0; min-height: 43px; padding: 9px 12px; border: 1px solid #53634a65; border-radius: 12px; background: #fbfcf6; color: #263729; font: inherit; }
.group-action-row input:focus-visible { outline: 2px solid #415d45; outline-offset: 2px; }
.group-preview .btn-primary { background: #344a37; border-color: #344a37; color: #f5f6e9; }
.group-preview .btn-secondary, .group-preview .btn-ghost { color: #344a37; border-color: #415d4580; }
.group-preview .btn:disabled { opacity: .55; cursor: wait; }
.group-addons[hidden] { display: none; }
.group-addons-intro { margin: 0 0 17px; font-size: 14px; line-height: 1.6; }
.group-addons-unit { margin: -7px 0 17px; font-size: 12px; line-height: 1.5; }
.group-addons-status { margin: 0 0 10px; color: #c6d7b9; font-size: 14px; line-height: 1.5; }
.group-addon-row { display: flex; align-items: center; gap: 12px; padding: 15px 0; border-top: 1px solid #d2dfc538; }
.group-addon-copy { display: grid; flex: 1 1 210px; min-width: 0; gap: 5px; }
.group-addon-copy strong { font-size: 15px; font-weight: 600; }
.group-addon-price { color: #b6c2ad; font-size: 13px; }
.group-addon-count { display: flex; align-items: center; gap: 8px; color: #b6c2ad; font-size: 13px; }
.group-addon-count select { min-width: 53px; padding: 8px; border: 1px solid #d2dfc538; border-radius: 10px; background: #203124; color: #f2f2e7; font: inherit; }
.group-addon-count select:focus-visible { outline: 2px solid #c4d3b4; outline-offset: 2px; }
.group-addon-buy { min-width: 114px; justify-content: center; }
.group-addon-buy:disabled { opacity: .52; cursor: not-allowed; }
.group-invitation-card { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 14px; padding: 15px; border: 1px solid #53634a35; border-radius: var(--radius-md); background: #fbfcf680; }
.group-invitation-card > div:first-child { display: grid; gap: 5px; min-width: 0; }
.group-invitation-card b { font-size: 15px; overflow-wrap: anywhere; }
.group-invitation-card small { color: #586756; font-size: 13px; }
.group-device-set + .group-device-set { border-top: 1px solid var(--hair); padding-top: 16px; margin-top: 7px; }
.group-device-set h4 { display: flex; align-items: baseline; gap: 10px; margin: 5px 0 8px; font: 400 22px var(--font-heading); }
.group-device-set h4 span { color: var(--ink-55); font: 500 14px var(--font-body); }
.chead { padding: 22px 28px 12px; border: 0; flex-wrap: wrap; }
.chead h3 { font: 400 24px var(--font-heading); }
.chead .lead-i { display: none; }
.bp, .pm { border-radius: 20px; background: #ffffff04; border-color: #d2dfc538; }
.bp[aria-checked="true"], .pm[aria-checked="true"] { border-color: #c4d3b4; background: #bfd8aa0c; box-shadow: none; }
.hist-d { color: #b6c2ad; }
.mnav { display: none; }
.demo-ribbon { position: relative; z-index: 2; background: #eeeede; color: #35412e; padding: 8px 22px; text-align: center; font: 500 11px/1.6 var(--font-body); }
.demo-ribbon a { color: inherit; margin-left: 12px; text-underline-offset: 3px; }
.auth { display: block; background: none; position: relative; }
.auth::before, .auth-main::before { content: none; }
.auth-main { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100dvh; background: none; padding: 90px 24px 40px; }
.auth-home { position: absolute; top: 28px; left: 40px; color: #eeeee3; text-decoration: none; font: 400 30px var(--font-heading); letter-spacing: -.04em; }
.auth-card { width: 100%; max-width: 440px; padding: 36px; border: 0; backdrop-filter: none; }
.access-heading { text-align: center; }
.access-heading p { margin: 0 0 12px; font-size: 9px; text-transform: uppercase; letter-spacing: .2em; color: var(--ink-55); }
.access-heading h1 { font: 400 44px/1.1 var(--font-heading); margin: 0 0 12px; letter-spacing: -.045em; }
.access-heading > span { font-size: 12px; color: var(--ink-55); }
.tabs { border: 0; background: #d8dece; border-radius: 24px; padding: 4px; margin: 26px 0; gap: 2px; }
.tabs button { border: 0; border-radius: 20px; padding: 11px; color: #4d5c45; }
.tabs button[aria-selected="true"] { color: #29372d; background: #f7f6ec; box-shadow: 0 2px 7px #2136170b; }
.field > span { color: var(--ink-70); font-size: 12px; }
.field > .inp { display: flex; align-items: center; min-height: 52px; background: #fbfcf44d; border-radius: 17px; border-color: #4c604d33; padding: 0 16px; }
.inp > i:not(.peek) { display: none; }
.inp input { min-width: 0; line-height: 1.5; padding: 12px 0; color: #29372d; font-size: 16px; }
.inp input::placeholder { color: #7d8774; }
.inp .peek { align-self: center; color: #5b6c50; }
.inp:focus-within { border-color: #506044; box-shadow: 0 0 0 3px #637b4120; }
.auth-foot a, .auth-foot .auth-text-action { color: #425b36 !important; }
.auth-lang { right: 40px; top: 30px; background: #203321; }
.demo-entry { display: block; margin-top: 20px; padding: 12px 14px; text-align: center; border-radius: 16px; background: #dfe4d2; font-size: 11px; color: #3e5035; text-decoration: none; }
.demo-entry span { display: block; font-size: 10px; margin-top: 3px; }
.demo-entry[hidden] { display: none; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
@media (max-width: 1150px) {
  .side { padding-inline: 28px; gap: 18px; }
  .side .navlink { padding-inline: 12px; font-size: 10px; }
  .side .user .av { display: none; }
  .overview-space { gap: 24px; grid-template-columns: minmax(0,1fr) 350px; }
  .topbar { padding-inline: 28px; }
  .content { padding-inline: 28px; }
  .control-sheet { padding: 26px; }
}
@media (max-width: 900px) {
  .side { display: none; }
  .topbar { padding: 20px 22px 8px; }
  .content { padding: 20px 22px 115px; }
  .overview-space { grid-template-columns: 1fr; gap: 20px; max-width: 560px; margin: auto; }
  .access-stage { min-height: 460px; padding-top: 8px; padding-bottom: 10px; }
  .access-stage h1 { font-size: clamp(42px,9vw,65px); }
  .access-pass { padding-top: 160px; gap: 20px; }
  .sub-days .n { font-size: 76px; }
  .sub-plan { font-size: 30px; }
  .control-sheet { border-radius: 30px; padding: 28px; }
  .sanctuary-forest { background-position: 48% center; }
  .sanctuary-mist { background: linear-gradient(180deg,#15221977,#16261a11 45%,#13261da8); }
  .mnav { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); position: fixed; left: 12px; right: 12px; bottom: 12px; bottom: max(12px,env(safe-area-inset-bottom)); z-index: 30; border: 1px solid #e7f0da26; border-radius: 28px; padding: 6px; background: #1c2b22f5; backdrop-filter: blur(14px); }
  .mnavlink { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 2px; border-radius: 22px; font-size: 9px; color: #c3cfbb; }
  .mnavlink.active { color: #253728; background: #e5e8d9; }
  .mnavlink i { font-size: 19px; }
  .pane:not([data-pane="overview"]) { margin: auto; }
  .auth-home { left: 24px; }
  .auth-lang { right: 24px; }
  .toast { bottom: 100px; max-width: calc(100% - 30px); border-radius: 20px; }
  .group-preview-members { grid-template-columns: 1fr; }
  .group-preview { padding: 24px; }
  .group-addon-row { flex-wrap: wrap; }
  .group-addon-copy { flex-basis: 100%; }
  .group-addon-buy { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .sanctuary-forest, .pane.active, .skel { animation: none; }
  .btn, .device-shortcut { transition: none; }
}

.trial-invitation[hidden] { display: none; }
.btn[hidden] { display: none; }
.trial-invitation { margin: 22px 0; }
.trial-invitation h3 { font: 500 34px/1.1 var(--font-display, 'Cormorant Garamond', serif); margin: 8px 0 12px; }
.trial-invitation p { font-size: 14px; line-height: 1.6; margin: 10px 0 18px; }
.trial-invitation .trial-eyebrow { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin: 0; }
.trial-invitation .trial-used { font-size: 12px; opacity: .78; margin: 0; }
.trial-billing { background: #e8e9db; color: #263c2c; border-radius: 32px; padding: 28px 32px; margin: 0; }