/* Zypherius app shell — one navigation system for every signed-in page.
   Desktop ≥1100: labelled left sidebar (collapsible to a 64px rail).
   769–1099: icon rail with tooltips. ≤768: top bar + bottom tab bar + sheets.
   All shell class names are prefixed zs- and every color is a --zs-* token so
   the shell never collides with page-level CSS. */

:root {
  --zs-side-w: 248px;
  --zs-side-rail: 64px;
  --zs-mtop-h: 52px;
  --zs-tab-h: 56px;
  --zs-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --zs-ease: cubic-bezier(.32, .72, 0, 1);

  /* dark (default) */
  --zs-bg: #07071a;
  --zs-bg-2: #0f0f26;
  --zs-bg-3: #18183a;
  --zs-bg-glass: rgba(7, 7, 26, .94);
  --zs-text: #eef0ff;
  --zs-text-2: #a2a6c6;
  --zs-text-3: #7a7ea3;
  --zs-border: rgba(255, 255, 255, .08);
  --zs-border-2: rgba(255, 255, 255, .16);
  --zs-primary: #9d8bff;
  --zs-primary-strong: #7c5cff;
  --zs-primary-soft: rgba(124, 92, 255, .16);
  --zs-on-primary: #fff;
  --zs-amber: #fbbf24;
  --zs-danger: #fb7185;
  --zs-scrim: rgba(3, 0, 20, .62);
  --zs-shadow: 0 16px 48px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
  --zs-ring: 0 0 0 2px var(--zs-bg), 0 0 0 4px var(--zs-primary);
}

html[data-zs-theme="light"] {
  --zs-bg: #fafafe;
  --zs-bg-2: #f1f0f7;
  --zs-bg-3: #e8e6f1;
  --zs-bg-glass: rgba(250, 250, 254, .94);
  --zs-text: #1a1a2e;
  --zs-text-2: #55556e;
  --zs-text-3: #71718a;
  --zs-border: #e8e5f0;
  --zs-border-2: #d6d2e3;
  --zs-primary: #6d4cef;
  --zs-primary-strong: #7c5cfc;
  --zs-primary-soft: rgba(124, 92, 252, .11);
  --zs-on-primary: #fff;
  --zs-amber: #b45309;
  --zs-danger: #e11d48;
  --zs-scrim: rgba(26, 26, 46, .42);
  --zs-shadow: 0 16px 48px rgba(26, 26, 46, .16), 0 0 0 1px rgba(26, 26, 46, .06);
}

/* ---------- shared primitives ---------- */

.zs-side, .zs-mtop, .zs-tabs, .zs-sheet, .zs-tip, .zs-skip, .zs-actions {
  font-family: var(--zs-font);
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--zs-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
}
.zs-side *, .zs-mtop *, .zs-tabs *, .zs-sheet *, .zs-tip *, .zs-actions * { box-sizing: border-box; }

.zs-side svg, .zs-mtop svg, .zs-tabs svg, .zs-sheet svg, .zs-actions svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.zs-icon-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--zs-text-2);
  cursor: pointer;
  transition: background .12s, color .12s;
  -webkit-tap-highlight-color: transparent;
}
.zs-icon-btn svg { width: 18px; height: 18px; }
.zs-icon-btn:hover { background: var(--zs-bg-2); color: var(--zs-text); }
.zs-icon-btn:active { background: var(--zs-bg-3); }
.zs-icon-btn:focus-visible { outline: none; box-shadow: var(--zs-ring); }

.zs-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #ec4899);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  letter-spacing: 0;
}
.zs-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.zs-skip {
  position: fixed;
  top: -48px;
  left: 12px;
  z-index: 1300;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--zs-primary-strong);
  color: var(--zs-on-primary);
  font-weight: 600;
  text-decoration: none;
  transition: top .15s;
}
.zs-skip:focus-visible { top: 12px; outline: none; box-shadow: var(--zs-ring); }

/* ---------- desktop sidebar ---------- */

.zs-side {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--zs-side-w);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  background: var(--zs-bg);
  border-right: 1px solid var(--zs-border);
  transition: width .18s var(--zs-ease);
  -webkit-user-select: none;
  user-select: none;
}

.zs-side-head {
  position: relative;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 14px;
  flex-shrink: 0;
}
.zs-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 4px;
  margin-left: -4px;
  border-radius: 9px;
  color: var(--zs-text);
  text-decoration: none;
}
.zs-brand:focus-visible { outline: none; box-shadow: var(--zs-ring); }
.zs-brand-mark { width: 28px; height: 28px; flex-shrink: 0; }
.zs-brand-mark svg { width: 28px; height: 28px; stroke: none; }
.zs-brand-name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.zs-collapse { margin-left: auto; width: 32px; height: 32px; }
.zs-collapse svg { width: 17px; height: 17px; }

.zs-side-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 8px 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--zs-border-2) transparent;
}
.zs-side-scroll::-webkit-scrollbar { width: 6px; }
.zs-side-scroll::-webkit-scrollbar-thumb { background: var(--zs-border-2); border-radius: 3px; }

.zs-group { padding: 3px 0; }
.zs-group + .zs-group { margin-top: 4px; }
.zs-group-title {
  padding: 8px 8px 3px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--zs-text-3);
  white-space: nowrap;
}

.zs-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 8px;
  border-radius: 8px;
  color: var(--zs-text-2);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s, color .12s;
  -webkit-tap-highlight-color: transparent;
}
.zs-item + .zs-item { margin-top: 1px; }
.zs-item svg { width: 18px; height: 18px; }
.zs-item:hover { background: var(--zs-bg-2); color: var(--zs-text); }
.zs-item:active { background: var(--zs-bg-3); }
.zs-item[aria-current="page"] { background: var(--zs-primary-soft); color: var(--zs-primary); }
.zs-item[aria-current="page"] svg { stroke-width: 2; }
.zs-item:focus-visible { outline: none; box-shadow: var(--zs-ring); }
.zs-item-label { overflow: hidden; text-overflow: ellipsis; }

.zs-side-foot {
  flex-shrink: 0;
  padding: 8px;
  border-top: 1px solid var(--zs-border);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.zs-credits {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 8px;
  border-radius: 8px;
  color: var(--zs-text-2);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: background .12s, color .12s;
}
.zs-credits svg { width: 18px; height: 18px; }
.zs-credits:hover { background: var(--zs-bg-2); color: var(--zs-text); }
.zs-credits:focus-visible { outline: none; box-shadow: var(--zs-ring); }
.zs-credits-n { color: var(--zs-text); font-weight: 600; }
.zs-credits-buy { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--zs-primary); }
.zs-credits.is-low svg, .zs-credits.is-low .zs-credits-n { color: var(--zs-amber); }

.zs-account {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 44px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .12s;
  -webkit-tap-highlight-color: transparent;
}
.zs-account:hover { background: var(--zs-bg-2); }
.zs-account[aria-expanded="true"] { background: var(--zs-bg-2); }
.zs-account:focus-visible { outline: none; box-shadow: var(--zs-ring); }
.zs-account-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.zs-account-name { font-size: 13px; font-weight: 600; color: var(--zs-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zs-account-email { font-size: 11.5px; color: var(--zs-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zs-account-chev { margin-left: auto; width: 16px; height: 16px; color: var(--zs-text-3); }

/* collapsed rail (user choice ≥1100px, forced 769–1099px) */
html[data-zs-side="collapsed"] .zs-side { width: var(--zs-side-rail); }
html[data-zs-side="collapsed"] .zs-side-head { padding: 0; justify-content: center; }
html[data-zs-side="collapsed"] .zs-brand { margin: 0; padding: 4px; }
html[data-zs-side="collapsed"] .zs-side .zs-brand-name,
html[data-zs-side="collapsed"] .zs-side .zs-group-title,
html[data-zs-side="collapsed"] .zs-side .zs-item-label,
html[data-zs-side="collapsed"] .zs-side .zs-credits-n,
html[data-zs-side="collapsed"] .zs-side .zs-credits-buy,
html[data-zs-side="collapsed"] .zs-side .zs-account-text,
html[data-zs-side="collapsed"] .zs-side .zs-account-chev { display: none; }
html[data-zs-side="collapsed"] .zs-collapse {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  background: var(--zs-bg);
  opacity: 0;
  transition: opacity .12s;
}
html[data-zs-side="collapsed"] .zs-side-head:hover .zs-collapse,
html[data-zs-side="collapsed"] .zs-collapse:focus-visible { opacity: 1; }
html[data-zs-side="collapsed"] .zs-side-head:hover .zs-brand { opacity: 0; }
html[data-zs-side="collapsed"] .zs-side-scroll { padding: 2px 12px 8px; }
html[data-zs-side="collapsed"] .zs-side .zs-group + .zs-group { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--zs-border); }
html[data-zs-side="collapsed"] .zs-side .zs-item,
html[data-zs-side="collapsed"] .zs-side .zs-credits { justify-content: center; width: 40px; padding: 0; margin-left: auto; margin-right: auto; }
html[data-zs-side="collapsed"] .zs-account { justify-content: center; padding: 0; }
html[data-zs-side="collapsed"] .zs-side-foot { padding: 8px 12px; }

.zs-tip {
  position: fixed;
  z-index: 1400;
  padding: 6px 9px;
  border-radius: 7px;
  background: var(--zs-text);
  color: var(--zs-bg);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(0, -50%) scale(.96);
  transition: opacity .12s, transform .12s;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}
.zs-tip.is-on { opacity: 1; transform: translate(0, -50%) scale(1); }

/* ---------- page container ---------- */

.zs-main {
  margin-left: var(--zs-side-w);
  min-height: 100vh;
  transition: margin-left .18s var(--zs-ease);
}
html[data-zs-side="collapsed"] .zs-main { margin-left: var(--zs-side-rail); }

/* ---------- mobile top bar ---------- */

.zs-mtop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: calc(var(--zs-mtop-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 8px 0 6px;
  display: none;
  /* side tracks never shrink below their content, so the title only takes what
     is left and stays centered whenever both sides fit an equal share */
  grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr);
  align-items: center;
  column-gap: 4px;
  background: var(--zs-bg-glass);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--zs-border);
}
.zs-mtop .zs-icon-btn { width: 40px; height: 40px; }
.zs-mtop .zs-icon-btn svg { width: 22px; height: 22px; }
.zs-mtop-brand { padding: 4px 6px; margin: 0; }
.zs-mtop-brand .zs-brand-mark, .zs-mtop-brand .zs-brand-mark svg { width: 26px; height: 26px; }
.zs-mtop-back, .zs-mtop-brand { grid-column: 1; justify-self: start; }
.zs-mtop-title {
  grid-column: 2;
  justify-self: center;
  min-width: 0;
  max-width: 100%;
  height: var(--zs-mtop-h);
  line-height: var(--zs-mtop-h);
  padding: 0 2px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.zs-mtop-right { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 2px; }
.zs-mtop-credits {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 10px 0 8px;
  border-radius: 16px;
  background: var(--zs-bg-2);
  color: var(--zs-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.zs-mtop-credits svg { width: 16px; height: 16px; color: var(--zs-text-2); }
.zs-mtop-credits.is-low, .zs-mtop-credits.is-low svg { color: var(--zs-amber); }
.zs-mtop-credits:focus-visible { outline: none; box-shadow: var(--zs-ring); }
.zs-mtop-avatar { width: 40px; height: 40px; }
.zs-mtop-avatar .zs-avatar { width: 30px; height: 30px; font-size: 12.5px; }

/* ---------- page actions ----------
   A slot for page-level controls (e.g. generation history). ZyphShell.addAction()
   appends buttons here; the shell keeps the slot inside the mobile top bar
   (icon only) and floats it top-right on desktop (icon + label). */

.zs-actions { display: flex; align-items: center; gap: 6px; }
.zs-actions:empty { display: none; }
.zs-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 11px 0 9px;
  border: 1px solid var(--zs-border);
  border-radius: 9px;
  background: var(--zs-bg-glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--zs-text);
  font: 600 12.5px/1 var(--zs-font);
  letter-spacing: -.005em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
  transition: background .12s, border-color .12s, color .12s;
  -webkit-tap-highlight-color: transparent;
}
.zs-action svg { width: 16px; height: 16px; color: var(--zs-text-2); transition: color .12s; }
.zs-action:hover { background: var(--zs-bg-2); border-color: var(--zs-border-2); }
.zs-action:hover svg { color: var(--zs-text); }
.zs-action:active { background: var(--zs-bg-3); }
.zs-action:focus-visible { outline: none; box-shadow: var(--zs-ring); }
.zs-actions-float { position: fixed; top: 8px; right: 16px; z-index: 900; }
.zs-mtop .zs-actions { gap: 0; }
.zs-mtop .zs-action {
  width: 40px;
  height: 40px;
  padding: 0;
  justify-content: center;
  border: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.zs-mtop .zs-action span { display: none; }
.zs-mtop .zs-action svg { width: 22px; height: 22px; }
.zs-mtop .zs-action:hover { background: var(--zs-bg-2); }
.zs-mtop .zs-action:active { background: var(--zs-bg-3); }

/* ---------- mobile tab bar ---------- */

.zs-tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: none;
  height: calc(var(--zs-tab-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--zs-bg-glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--zs-border);
  transition: transform .2s var(--zs-ease);
}
.zs-tab {
  flex: 1 1 0;
  min-width: 0;
  height: var(--zs-tab-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--zs-text-3);
  font: inherit;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.zs-tab svg { width: 23px; height: 23px; transition: transform .12s; }
.zs-tab:active svg { transform: scale(.9); }
.zs-tab[aria-current="page"], .zs-tab[aria-expanded="true"] { color: var(--zs-primary); }
.zs-tab[aria-current="page"] svg { stroke-width: 2.1; }
.zs-tab:focus-visible { outline: none; box-shadow: inset var(--zs-ring); border-radius: 10px; }
html[data-zs-kb="1"] .zs-tabs { transform: translateY(110%); }

/* ---------- sheets / popover ---------- */

.zs-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1190;
  background: var(--zs-scrim);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s;
  touch-action: none;
}
.zs-backdrop.is-open { opacity: 1; pointer-events: auto; }

.zs-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  max-height: min(88vh, 720px);
  max-height: min(88dvh, 720px);
  background: var(--zs-bg);
  color: var(--zs-text);
  border-radius: 20px 20px 0 0;
  box-shadow: var(--zs-shadow);
  transform: translateY(105%);
  visibility: hidden;
  transition: transform .3s var(--zs-ease), visibility 0s linear .3s;
  outline: none;
}
.zs-sheet.is-open { transform: none; visibility: visible; transition: transform .3s var(--zs-ease); }
.zs-sheet-grip {
  width: 36px;
  height: 5px;
  margin: 8px auto 0;
  border-radius: 3px;
  background: var(--zs-border-2);
  flex-shrink: 0;
}
.zs-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 6px 20px;
  flex-shrink: 0;
}
.zs-sheet-title { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.zs-sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 12px calc(16px + env(safe-area-inset-bottom));
  scrollbar-width: thin;
  scrollbar-color: var(--zs-border-2) transparent;
}
.zs-sheet-body::-webkit-scrollbar { width: 6px; }
.zs-sheet-body::-webkit-scrollbar-thumb { background: var(--zs-border-2); border-radius: 3px; }

.zs-sheet .zs-group-title { padding: 12px 8px 6px; }
.zs-tool {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 6px 8px;
  border-radius: 12px;
  color: var(--zs-text);
  text-decoration: none;
  transition: background .12s;
  -webkit-tap-highlight-color: transparent;
}
.zs-tool:hover, .zs-tool:active { background: var(--zs-bg-2); }
.zs-tool:focus-visible { outline: none; box-shadow: var(--zs-ring); }
.zs-tool[aria-current="page"] .zs-tool-name { color: var(--zs-primary); }
.zs-tool-ic {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--zs-tint-bg, var(--zs-primary-soft));
  color: var(--zs-tint-fg, var(--zs-primary));
}
.zs-tool-ic svg { width: 20px; height: 20px; }
.zs-tool-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.zs-tool-name { font-size: 15px; font-weight: 600; line-height: 1.2; }
.zs-tool-desc { font-size: 12.5px; color: var(--zs-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zs-tool-chev { margin-left: auto; width: 16px; height: 16px; color: var(--zs-text-3); }

/* tool tints (dark) */
.zs-tint-violet  { --zs-tint-bg: rgba(139, 92, 246, .18); --zs-tint-fg: #b39dff; }
.zs-tint-blue    { --zs-tint-bg: rgba(59, 130, 246, .18); --zs-tint-fg: #7fb3ff; }
.zs-tint-pink    { --zs-tint-bg: rgba(236, 72, 153, .18); --zs-tint-fg: #f78fc0; }
.zs-tint-amber   { --zs-tint-bg: rgba(245, 158, 11, .18); --zs-tint-fg: #fbbf24; }
.zs-tint-green   { --zs-tint-bg: rgba(16, 185, 129, .18); --zs-tint-fg: #4ade80; }
.zs-tint-cyan    { --zs-tint-bg: rgba(6, 182, 212, .18); --zs-tint-fg: #5ce1f5; }
.zs-tint-teal    { --zs-tint-bg: rgba(20, 184, 166, .18); --zs-tint-fg: #5eead4; }
.zs-tint-indigo  { --zs-tint-bg: rgba(99, 102, 241, .2); --zs-tint-fg: #a5b4fc; }
.zs-tint-orange  { --zs-tint-bg: rgba(249, 115, 22, .18); --zs-tint-fg: #fdba74; }
.zs-tint-rose    { --zs-tint-bg: rgba(244, 63, 94, .18); --zs-tint-fg: #fda4af; }
.zs-tint-sky     { --zs-tint-bg: rgba(14, 165, 233, .18); --zs-tint-fg: #7dd3fc; }
.zs-tint-lime    { --zs-tint-bg: rgba(132, 204, 22, .18); --zs-tint-fg: #bef264; }
.zs-tint-fuchsia { --zs-tint-bg: rgba(217, 70, 239, .18); --zs-tint-fg: #f0abfc; }
/* tool tints (light) */
html[data-zs-theme="light"] .zs-tint-violet  { --zs-tint-bg: rgba(139, 92, 246, .12); --zs-tint-fg: #6d28d9; }
html[data-zs-theme="light"] .zs-tint-blue    { --zs-tint-bg: rgba(59, 130, 246, .12); --zs-tint-fg: #1d4ed8; }
html[data-zs-theme="light"] .zs-tint-pink    { --zs-tint-bg: rgba(236, 72, 153, .12); --zs-tint-fg: #be185d; }
html[data-zs-theme="light"] .zs-tint-amber   { --zs-tint-bg: rgba(245, 158, 11, .14); --zs-tint-fg: #b45309; }
html[data-zs-theme="light"] .zs-tint-green   { --zs-tint-bg: rgba(16, 185, 129, .13); --zs-tint-fg: #047857; }
html[data-zs-theme="light"] .zs-tint-cyan    { --zs-tint-bg: rgba(6, 182, 212, .13); --zs-tint-fg: #0e7490; }
html[data-zs-theme="light"] .zs-tint-teal    { --zs-tint-bg: rgba(20, 184, 166, .13); --zs-tint-fg: #0f766e; }
html[data-zs-theme="light"] .zs-tint-indigo  { --zs-tint-bg: rgba(99, 102, 241, .13); --zs-tint-fg: #4338ca; }
html[data-zs-theme="light"] .zs-tint-orange  { --zs-tint-bg: rgba(249, 115, 22, .13); --zs-tint-fg: #c2410c; }
html[data-zs-theme="light"] .zs-tint-rose    { --zs-tint-bg: rgba(244, 63, 94, .12); --zs-tint-fg: #be123c; }
html[data-zs-theme="light"] .zs-tint-sky     { --zs-tint-bg: rgba(14, 165, 233, .13); --zs-tint-fg: #0369a1; }
html[data-zs-theme="light"] .zs-tint-lime    { --zs-tint-bg: rgba(132, 204, 22, .16); --zs-tint-fg: #4d7c0f; }
html[data-zs-theme="light"] .zs-tint-fuchsia { --zs-tint-bg: rgba(217, 70, 239, .12); --zs-tint-fg: #a21caf; }

/* account panel */
.zs-acc-head { display: flex; align-items: center; gap: 12px; padding: 6px 8px 14px; }
.zs-acc-head .zs-avatar { width: 40px; height: 40px; font-size: 15px; }
.zs-acc-who { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.zs-acc-name { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zs-acc-email { font-size: 12.5px; color: var(--zs-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zs-acc-plan {
  margin-left: auto;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--zs-primary-soft);
  color: var(--zs-primary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.zs-acc-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin: 0 0 8px;
  border: 1px solid var(--zs-border);
  border-radius: 12px;
  background: var(--zs-bg-2);
}
.zs-acc-card + .zs-acc-card { margin-top: -2px; }
.zs-acc-card-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.zs-acc-label { font-size: 12px; font-weight: 500; color: var(--zs-text-3); }
.zs-acc-num { font-size: 22px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.zs-acc-num small { font-size: 12px; font-weight: 500; color: var(--zs-text-3); letter-spacing: 0; margin-left: 4px; }
.zs-acc-card.is-low .zs-acc-num { color: var(--zs-amber); }
.zs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  margin-left: auto;
  border: 0;
  border-radius: 9px;
  background: var(--zs-primary-strong);
  color: var(--zs-on-primary);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: filter .12s, transform .12s;
  -webkit-tap-highlight-color: transparent;
}
.zs-btn:hover { filter: brightness(1.08); }
.zs-btn:active { transform: scale(.98); }
.zs-btn:focus-visible { outline: none; box-shadow: var(--zs-ring); }
.zs-btn svg { width: 16px; height: 16px; flex: none; }
.zs-acc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 46px;
  padding: 0 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--zs-text);
  font: inherit;
  font-size: 14.5px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background .12s;
  -webkit-tap-highlight-color: transparent;
}
.zs-acc-row svg { width: 19px; height: 19px; color: var(--zs-text-2); }
.zs-acc-row:hover { background: var(--zs-bg-2); }
.zs-acc-row:focus-visible { outline: none; box-shadow: var(--zs-ring); }
.zs-acc-row.is-danger, .zs-acc-row.is-danger svg { color: var(--zs-danger); }
.zs-acc-sep { height: 1px; margin: 6px 8px; background: var(--zs-border); }
.zs-switch {
  position: relative;
  margin-left: auto;
  width: 42px;
  height: 25px;
  border-radius: 13px;
  background: var(--zs-border-2);
  flex-shrink: 0;
  transition: background .18s;
}
.zs-switch::after {
  content: '';
  position: absolute;
  top: 2.5px;
  left: 2.5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: transform .18s var(--zs-ease);
}
.zs-acc-row[aria-checked="true"] .zs-switch { background: var(--zs-primary-strong); }
.zs-acc-row[aria-checked="true"] .zs-switch::after { transform: translateX(17px); }

/* ---------- responsive ---------- */

@media (max-width: 1099px) {
  .zs-collapse { display: none; }
}

@media (max-width: 768px) {
  .zs-side { display: none; }
  /* A page element wider than the screen must not widen the layout viewport
     (the fixed bars follow it): clip horizontal overflow at the main column. */
  .zs-main { margin-left: 0 !important; transition: none; overflow-x: clip; }
  body[data-zs-mode="shell"] .zs-mtop,
  body[data-zs-mode="focus"] .zs-mtop { display: grid; }
  body[data-zs-mode="shell"] .zs-tabs,
  body[data-zs-mode="page"] .zs-tabs { display: flex; }
  body[data-zs-mode="shell"] .zs-main {
    padding-top: calc(var(--zs-mtop-h) + env(safe-area-inset-top));
    padding-bottom: calc(var(--zs-tab-h) + env(safe-area-inset-bottom));
  }
  body[data-zs-mode="focus"] .zs-main { padding-top: calc(var(--zs-mtop-h) + env(safe-area-inset-top)); }
  /* full-height page roots must not add the shell bars on top of 100vh */
  body[data-zs-mode="shell"] .zs-main > .page,
  body[data-zs-mode="shell"] .zs-main > #page,
  body[data-zs-mode="shell"] .zs-main > .gallery-wrap,
  body[data-zs-mode="shell"] .zs-main > .zs-page {
    min-height: calc(100vh - var(--zs-mtop-h) - var(--zs-tab-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    min-height: calc(100dvh - var(--zs-mtop-h) - var(--zs-tab-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  body[data-zs-mode="focus"] .zs-main > .page {
    min-height: calc(100vh - var(--zs-mtop-h) - env(safe-area-inset-top));
    min-height: calc(100dvh - var(--zs-mtop-h) - env(safe-area-inset-top));
  }
}

@media (min-width: 769px) {
  /* account panel becomes a popover anchored to the sidebar footer */
  .zs-sheet--account {
    left: 12px;
    right: auto;
    bottom: 64px;
    width: 300px;
    max-height: min(80vh, 640px);
    border-radius: 14px;
    transform: translateY(8px) scale(.98);
    opacity: 0;
    transition: transform .16s var(--zs-ease), opacity .16s, visibility 0s linear .16s;
  }
  .zs-sheet--account.is-open { transform: none; opacity: 1; transition: transform .16s var(--zs-ease), opacity .16s; }
  html[data-zs-side="collapsed"] .zs-sheet--account { left: 72px; bottom: 12px; }
  .zs-sheet--account .zs-sheet-grip { display: none; }
  .zs-sheet--account .zs-sheet-head { display: none; }
  .zs-sheet--account .zs-sheet-body { padding: 12px 8px 8px; }
  .zs-backdrop.is-popover { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* the create sheet is a centered dialog if ever opened on desktop (ZyphShell.openSheet) */
  .zs-sheet--create {
    left: 50%;
    right: auto;
    bottom: auto;
    top: 50%;
    width: min(560px, calc(100vw - 32px));
    border-radius: 16px;
    transform: translate(-50%, -50%) scale(.96);
    opacity: 0;
    transition: transform .16s var(--zs-ease), opacity .16s, visibility 0s linear .16s;
  }
  .zs-sheet--create.is-open { transform: translate(-50%, -50%); opacity: 1; transition: transform .16s var(--zs-ease), opacity .16s; }
  .zs-sheet--create .zs-sheet-grip { display: none; }
}

html.zs-lock, html.zs-lock body { overflow: hidden; }
html.zs-no-anim .zs-side, html.zs-no-anim .zs-main, html.zs-no-anim .zs-tabs { transition: none !important; }

/* ---------- page adapters ---------- */

/* chat: the page keeps its own top bar + chat list; on mobile the app fills the
   space above the tab bar and the chat drawer/overlay stack above the shell. */
@media (max-width: 768px) {
  body[data-zs-page="chat"] .app {
    height: calc(100vh - var(--zs-tab-h) - env(safe-area-inset-bottom));
    height: calc(100dvh - var(--zs-tab-h) - env(safe-area-inset-bottom));
  }
  /* keyboard up: the tab bar is gone, so the chat follows the visual viewport
     (height + offset are written by app-shell.js from window.visualViewport) */
  html[data-zs-kb="1"] body[data-zs-page="chat"] .app {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--zs-vvt, 0px);
    height: var(--zs-vvh, 100dvh);
  }
  body[data-zs-page="chat"] .sidebar { z-index: 1210; bottom: 0; }
  body[data-zs-page="chat"] .sb-overlay { z-index: 1205; }
  body[data-zs-page="chat"] .sb-overlay.open { display: block; }
  body[data-zs-page="chat"] .top-bar { z-index: 900; }
  body[data-zs-page="chat"] .preview-panel { z-index: 1220; }
}
body[data-zs-page="chat"] .top-bar { z-index: 900; }

/* pages that used the old rails carried their own left offset */
body[data-zs-page="gallery"] .gallery-wrap { margin-left: 0 !important; }

/* duplicate credit chips inside page headers: the shell shows the same pool */
body[data-zs-page="audio"] .header .cred,
body[data-zs-page="story"] .header .credits-badge,
body[data-zs-page="templates"] .header .credits-badge,
body[data-zs-page="mockup"] .header .credits-badge,
body[data-zs-page="image"] .chip-credits,
body[data-zs-page="meme"] .credits-chip,
body[data-zs-page="vedit"] .credits-chip,
body[data-zs-page="vedit"] .buy-credits { display: none !important; }

@media (max-width: 768px) {
  /* page bars that repeat the shell top bar (title + credits) */
  body[data-zs-page="audio"] .header,
  body[data-zs-page="brandkit"] .header,
  body[data-zs-page="tools"] .header,
  body[data-zs-page="mockup"] .header,
  body[data-zs-page="story"] .header,
  body[data-zs-page="templates"] .header,
  body[data-zs-page="meme"] .topbar,
  body[data-zs-page="vedit"] .topbar { display: none; }
  /* sticky prompt bar sits below the fixed shell top bar */
  body[data-zs-page="image"] .prompt-section { top: calc(var(--zs-mtop-h) + env(safe-area-inset-top)); }
  /* fixed-height roots: fit the space between the shell bars */
  body[data-zs-page="logo"] .app,
  body[data-zs-page="mockup"] .layout {
    height: calc(100vh - var(--zs-mtop-h) - var(--zs-tab-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    height: calc(100dvh - var(--zs-mtop-h) - var(--zs-tab-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .zs-side, .zs-main, .zs-tabs, .zs-sheet, .zs-backdrop, .zs-item, .zs-tab svg, .zs-tip, .zs-switch, .zs-switch::after, .zs-skip, .zs-action {
    transition: none !important;
  }
}

@media print {
  .zs-side, .zs-mtop, .zs-tabs, .zs-sheet, .zs-backdrop, .zs-skip, .zs-actions { display: none !important; }
  .zs-main { margin: 0 !important; padding: 0 !important; }
}

/* ---------- page adapters: pricing / activate ---------- */
/* Both pages keep their own "Back to home" link for visitors; inside the shell the nav replaces it. */
body[data-zs-page="pricing"] .back-link,
body[data-zs-page="activate"] .back-link { display: none; }

/* activate.html centres its card with body{display:flex}; inside the shell the main column does that. */
body[data-zs-page="activate"] { display: block; padding: 0; }
body[data-zs-page="activate"] .zs-main {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  min-height: 100vh;
  min-height: 100dvh;
}

/* clip editor (bare mode): its own modal sheets/backdrops (z 48–60) must cover the desktop sidebar */
body[data-zs-page="clip"] .zs-side { z-index: 45; }

@media (max-width: 768px) {
  body[data-zs-page="activate"] .zs-main {
    padding: calc(var(--zs-mtop-h) + env(safe-area-inset-top) + 16px) 16px calc(var(--zs-tab-h) + env(safe-area-inset-bottom) + 16px);
  }
  body[data-zs-page="pricing"] .pricing-page {
    padding-top: 24px;
    min-height: calc(100dvh - var(--zs-mtop-h) - var(--zs-tab-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
}