:root {
  --sc-font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sc-font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --sc-paper: #f5f7fa;
  --sc-paper-strong: #ffffff;
  --sc-paper-deep: #eef2f6;
  --sc-paper-muted: #e5ebf1;
  --sc-ink: #18212b;
  --sc-ink-soft: #30485f;
  --sc-muted: #4a5a6a;
  --sc-muted-soft: #718196;
  --sc-line: #d5dee7;
  --sc-line-strong: #b8c4d1;
  --sc-accent: #1f3a5f;
  --sc-accent-hover: #19324f;
  --sc-accent-deep: #142941;
  --sc-accent-soft: rgba(31, 58, 95, 0.09);
  --sc-secondary: #4f6d8a;
  --sc-secondary-soft: rgba(79, 109, 138, 0.1);
  --sc-teal: #2f7c85;
  --sc-teal-soft: rgba(47, 124, 133, 0.12);
  --sc-copper: #c98b5f;
  --sc-copper-soft: rgba(201, 139, 95, 0.14);
  --sc-link: #2a5f9e;
  --sc-link-hover: #214d82;
  --sc-success: #3d8b6d;
  --sc-danger: #b85c6a;
  --sc-warning: #c98b5f;
  --sc-focus-ring: rgba(203, 230, 233, 0.92);
  --sc-dark-surface: #18293d;
  --sc-dark-elevated: #22364d;
  --sc-shadow: 0 24px 56px rgba(24, 33, 43, 0.08);
  --sc-shadow-soft: 0 14px 30px rgba(24, 33, 43, 0.06);
  --sc-radius-xl: 24px;
  --sc-radius-lg: 18px;
  --sc-radius-md: 14px;
  --sc-radius-sm: 10px;
  --sc-max: 1280px;
}

html {
  scroll-behavior: smooth;
}

body.site-shell {
  min-height: 100vh;
  color: var(--sc-ink);
  background:
    radial-gradient(900px 520px at 10% -10%, rgba(29, 95, 155, 0.1), transparent 62%),
    radial-gradient(760px 420px at 100% 100%, rgba(17, 61, 103, 0.08), transparent 58%),
    linear-gradient(180deg, #faf8f3 0%, #f6f3ec 54%, #f1ece2 100%);
  font-family: var(--sc-font-body);
}

body.site-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.28)),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 96px,
      rgba(24, 32, 44, 0.026) 96px,
      rgba(24, 32, 44, 0.026) 97px
    );
  opacity: 0.48;
}

body.app-shell {
  background: #fcfbf8;
}

body.app-shell::before {
  display: none;
}

body.site-shell,
body.site-shell button,
body.site-shell input,
body.site-shell select,
body.site-shell textarea {
  font-family: var(--sc-font-body);
}

body.site-shell h1,
body.site-shell h2,
body.site-shell h3,
body.site-shell h4,
body.site-shell h5,
body.site-shell h6,
body.site-shell .hero-title {
  color: var(--sc-ink);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.02;
  text-wrap: balance;
}

body.site-shell h1,
body.site-shell .hero-title {
  font-size: clamp(2.3rem, 4vw, 4rem);
}

body.site-shell h2 {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
}

body.site-shell h3 {
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
}

body.site-shell p,
body.site-shell li,
body.site-shell dd,
body.site-shell dt {
  font-size: 0.95rem;
  line-height: 1.58;
}

body.site-shell a {
  color: var(--sc-accent);
}

body.site-shell a:hover {
  color: var(--sc-accent-deep);
}

.page-shell {
  position: relative;
  z-index: 1;
  padding-top: 1.2rem;
  padding-bottom: 2.25rem;
}

.page-shell > * {
  opacity: 0;
  transform: translateY(16px);
  animation: sc-rise 0.55s ease forwards;
}

body.app-shell .page-shell > * {
  opacity: 1;
  transform: none;
  animation: none;
}

.page-shell > *:nth-child(2) {
  animation-delay: 0.05s;
}

.page-shell > *:nth-child(3) {
  animation-delay: 0.1s;
}

.page-shell > *:nth-child(4) {
  animation-delay: 0.15s;
}

@keyframes sc-rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  object-fit: contain;
}

.pp-kicker,
.pp-mini-label,
.eyebrow,
.footer-title,
.field-help,
.helptext,
label,
legend {
  font-family: var(--sc-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.68rem;
  font-weight: 600;
}

.pp-kicker,
.pp-mini-label,
.eyebrow,
.footer-title {
  color: var(--sc-accent-deep);
}

body.app-shell .pp-kicker,
body.app-shell .pp-mini-label,
body.app-shell .eyebrow,
body.app-shell .footer-title {
  color: #7b8595;
}

.muted,
.text-muted {
  color: var(--sc-muted) !important;
}

.site-shell .btn,
.site-shell .copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 36px;
  padding: 0.5rem 0.9rem;
  border-radius: var(--sc-radius-sm);
  border: 1px solid var(--sc-line-strong);
  background: rgba(255, 255, 255, 0.86);
  color: var(--sc-ink);
  font-size: 0.84rem;
  font-weight: 700;
  box-shadow: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.site-shell .btn.primary {
  background: var(--sc-ink);
  border-color: var(--sc-ink);
  color: #fff;
}

.site-shell .btn.danger {
  background: var(--sc-danger);
  border-color: var(--sc-danger);
  color: #fff;
}

.site-shell .btn:hover,
.site-shell .copy-btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
  background: #fff;
  border-color: rgba(24, 32, 44, 0.22);
}

.site-shell .btn.primary:hover {
  background: var(--sc-accent-deep);
  border-color: var(--sc-accent-deep);
  color: #fff;
}

.site-shell .btn.danger:hover {
  background: #973e30;
  border-color: #973e30;
}

.blog-shell {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 1.1rem 2rem;
}

.blog-intro,
.blog-article__header {
  padding: 1.2rem 0 1.4rem;
}

.blog-list {
  border-top: 1px solid var(--sc-line);
}

.blog-list-item {
  padding: 1.4rem 0 1.5rem;
  border-bottom: 1px solid var(--sc-line);
}

.blog-list-item h2,
.blog-article h1 {
  margin: 0.25rem 0 0.65rem;
}

.blog-list-item h2 a {
  color: var(--sc-ink);
  text-decoration: none;
}

.blog-list-item h2 a:hover {
  color: var(--sc-accent-deep);
}

.blog-list-item__meta,
.blog-article__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--sc-muted);
  font-size: 0.82rem;
}

.blog-list-item__dot {
  color: var(--sc-line-strong);
}

.blog-backlink {
  display: inline-flex;
  margin-bottom: 1rem;
  color: var(--sc-muted);
  text-decoration: none;
}

.blog-backlink:hover {
  color: var(--sc-accent-deep);
}

.blog-article__body {
  padding-top: 0.6rem;
}

.blog-article__body h2 {
  margin-top: 2rem;
  margin-bottom: 0.85rem;
}

.blog-article__body h3 {
  margin-top: 1.45rem;
  margin-bottom: 0.7rem;
}

.blog-article__body p,
.blog-article__body ul,
.blog-article__body ol,
.blog-article__body blockquote {
  margin-bottom: 1rem;
}

.blog-article__body ul,
.blog-article__body ol {
  padding-left: 1.25rem;
}

.blog-article__body li + li {
  margin-top: 0.4rem;
}

.blog-article__body blockquote {
  margin-left: 0;
  padding: 0.1rem 0 0.1rem 1rem;
  border-left: 3px solid var(--sc-line-strong);
  color: var(--sc-ink-soft);
}

.blog-article__body code {
  padding: 0.1rem 0.35rem;
  border-radius: 6px;
  background: rgba(24, 32, 44, 0.06);
  color: var(--sc-accent-deep);
  font-family: var(--sc-font-mono);
  font-size: 0.88em;
}

@media (max-width: 720px) {
  .blog-shell {
    padding-left: 0.95rem;
    padding-right: 0.95rem;
  }
}

.site-shell .pill,
.site-shell .pp-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.24rem 0.56rem;
  border-radius: 999px;
  background: #f0f4f8;
  color: var(--sc-accent-deep);
  font-size: 0.7rem;
  font-weight: 700;
  border: 1px solid rgba(29, 95, 155, 0.12);
}

.site-shell .pill.subtle,
.site-shell .pp-pill.subtle {
  background: rgba(24, 32, 44, 0.04);
  color: var(--sc-muted);
  border-color: rgba(24, 32, 44, 0.06);
}

.site-shell .card,
.site-shell .settings-card,
.site-shell .panel,
.site-shell .verification-card,
.site-shell .legal-copy,
.site-shell .pricing-card,
.site-shell .auth-card,
.site-shell .process-card,
.site-shell .marketing-preview-card,
.site-shell .marketing-index-item {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--sc-line);
  border-radius: var(--sc-radius-lg);
  box-shadow: none !important;
}

.site-shell input,
.site-shell select,
.site-shell textarea {
  min-height: 40px;
  border-radius: var(--sc-radius-sm);
  border: 1px solid var(--sc-line-strong);
  background: rgba(255, 255, 255, 0.88);
  color: var(--sc-ink);
}

.site-shell input:focus,
.site-shell select:focus,
.site-shell textarea:focus {
  outline: none;
  border-color: rgba(29, 95, 155, 0.42);
  box-shadow: 0 0 0 3px rgba(29, 95, 155, 0.12);
}

.site-shell .table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.site-shell .table th,
.site-shell .table td {
  border-bottom: 1px solid var(--sc-line);
  padding: 0.85rem 0.8rem;
}

.site-shell .table th {
  font-family: var(--sc-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sc-muted);
}

.site-shell .flash {
  padding: 0.8rem 0.9rem;
  border-radius: var(--sc-radius-sm);
  margin: 0 0 0.85rem;
  border: 1px solid rgba(29, 95, 155, 0.16);
  background: rgba(255, 255, 255, 0.9);
}

.site-shell .flash.success {
  border-color: rgba(43, 122, 88, 0.22);
  background: rgba(240, 248, 242, 0.94);
}

.site-shell .flash.error,
.site-shell .flash.warning,
.site-shell .flash.warn {
  border-color: rgba(176, 74, 56, 0.2);
  background: rgba(251, 242, 240, 0.96);
}

.site-shell .flash.info,
.site-shell .flash.notice,
.site-shell .control-plane-banner {
  border-color: rgba(36, 110, 163, 0.22);
  background: rgba(239, 246, 252, 0.96);
}

.control-plane-banner {
  display: grid;
  gap: 0.4rem;
}

.control-plane-banner strong {
  font-size: 0.98rem;
  color: var(--sc-ink);
}

.control-plane-banner p {
  margin: 0;
  color: var(--sc-muted);
  font-size: 0.93rem;
}

.control-plane-banner__eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sc-muted);
}

.control-plane-banner__link {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--sc-accent);
  text-decoration: none;
}

.site-shell .accordion-item,
.site-shell .accordion-button {
  background: transparent;
  border: 0;
}

.site-shell .accordion-item {
  border-radius: var(--sc-radius-md);
  border: 1px solid var(--sc-line);
  overflow: hidden;
  margin-bottom: 0.85rem;
  background: rgba(255, 255, 255, 0.74);
}

.site-shell .accordion-button {
  box-shadow: none;
  padding: 1rem 1.1rem;
  font-weight: 700;
  color: var(--sc-ink);
}

.site-shell .accordion-button:not(.collapsed) {
  color: var(--sc-ink);
  background: rgba(29, 95, 155, 0.06);
}

.site-shell .accordion-body {
  padding: 0 1.1rem 1rem;
}

.site-shell .hero,
.site-shell .home-section {
  margin: 0;
}

.site-shell .output,
.site-shell .mono.output {
  background: #f7f4ee;
  border: 1px solid rgba(24, 32, 44, 0.08);
}

.site-shell .cta-banner {
  background: var(--sc-ink);
  border-radius: var(--sc-radius-xl);
  padding: 1.7rem;
}

.site-shell .cta-banner h2,
.site-shell .cta-banner h3,
.site-shell .cta-banner .pp-kicker {
  color: #fff;
}

.site-shell .cta-banner .muted {
  color: rgba(255, 255, 255, 0.72) !important;
}

.site-shell .site-footer {
  background: transparent;
  border-top: 1px solid var(--sc-line);
}

.public-frame {
  min-height: 100vh;
}

.public-header {
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(14px);
  background: rgba(246, 243, 236, 0.82);
  border-bottom: 1px solid var(--sc-line);
}

.public-header__inner,
.public-main,
.public-footer__inner {
  width: min(calc(100% - 2rem), var(--sc-max));
  margin: 0 auto;
}

.public-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.95rem 0;
}

.public-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--sc-ink);
  text-decoration: none;
}

.public-brand__wordmark {
  display: flex;
  align-items: center;
  min-height: 28px;
}

.public-brand strong {
  display: block;
  font-size: 0.96rem;
  letter-spacing: -0.02em;
  line-height: 1;
}

.public-brand:hover {
  text-decoration: none;
  color: var(--sc-ink);
}

.public-nav {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.public-nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0.35rem 0.72rem;
  border-radius: 999px;
  color: var(--sc-muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.public-nav-link:hover,
.public-nav-link.is-active {
  color: var(--sc-ink);
  background: rgba(255, 255, 255, 0.72);
  text-decoration: none;
}

.public-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.public-main {
  padding-top: 1.35rem;
  padding-bottom: 2.75rem;
}

.pp-iconized.pp-icon-button,
.public-nav-link.pp-iconized,
.pricing-toggle-btn.pp-iconized,
.range-toggle-btn.pp-iconized,
.copy-btn.pp-iconized {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 2.45rem;
  padding-inline: 0.68rem;
}

.btn.pp-iconized,
.copy-btn.pp-iconized {
  aspect-ratio: 1 / 1;
}

.btn.pp-iconized.w-100 {
  aspect-ratio: auto;
}

.pp-iconized .bi {
  font-size: 0.95rem;
  line-height: 1;
}

.public-nav-link.pp-iconized,
.pricing-toggle-btn.pp-iconized,
.range-toggle-btn.pp-iconized {
  min-width: 2.35rem;
  padding-inline: 0.6rem;
}

.copy-btn.pp-iconized {
  min-width: 2.2rem;
  padding: 0.45rem;
}

.app-nav-icon.pp-iconized {
  display: inline-grid;
  place-items: center;
}

.app-nav-icon.pp-iconized .bi {
  font-size: 0.78rem;
}

.public-footer__inner {
  display: grid;
  gap: 1.2rem;
  padding: 1.5rem 0 2rem;
}

.public-footer__links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.public-footer__cta {
  justify-self: end;
  max-width: 260px;
}

.public-footer__meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--sc-line);
}

.marketing-shell {
  display: grid;
  gap: 1rem;
}

.marketing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 1rem;
  align-items: stretch;
}

.marketing-hero-copy,
.marketing-preview {
  min-width: 0;
}

.marketing-hero-copy {
  display: grid;
  align-content: start;
  gap: 0.9rem;
  padding: 1.35rem 0.15rem;
}

.marketing-hero-copy .hero-lead {
  max-width: 54ch;
}

.pp-actions {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.pp-form-stack {
  display: grid;
  gap: 0.9rem;
}

.marketing-index,
.signal-grid,
.pricing-rack {
  display: grid;
  gap: 0.85rem;
}

.marketing-index {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.marketing-index-item {
  display: grid;
  gap: 0.3rem;
  padding: 0.85rem 0.9rem;
}

.marketing-index-item strong {
  font-size: 0.88rem;
}

.marketing-preview {
  position: relative;
}

.marketing-preview-shell,
.marketing-preview-main {
  display: grid;
  gap: 0.8rem;
}

.marketing-preview-shell {
  height: 100%;
  padding: 1rem;
  border-radius: var(--sc-radius-xl);
  border: 1px solid var(--sc-line);
  background: rgba(255, 255, 255, 0.62);
}

.marketing-preview-nav {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.marketing-preview-nav .pp-mini-label {
  margin-right: 0.4rem;
}

.marketing-preview-nav-item {
  padding: 0.32rem 0.65rem;
  border-radius: 999px;
  background: rgba(24, 32, 44, 0.04);
  color: var(--sc-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.marketing-preview-nav-item.is-active {
  background: var(--sc-ink);
  color: #fff;
}

.marketing-preview-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--sc-line);
}

.marketing-preview-bar strong {
  display: block;
  font-size: 0.92rem;
}

.marketing-preview-grid,
.editorial-grid {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.marketing-preview-card {
  display: grid;
  gap: 0.45rem;
  padding: 0.9rem;
}

.marketing-preview-card ul,
.manifest-list,
.clean-list {
  padding-left: 1rem;
  margin: 0;
}

.marketing-preview-card li,
.manifest-list li,
.clean-list li {
  margin-bottom: 0.4rem;
}

.pp-section,
.pp-band,
.pricing-guidance {
  display: grid;
  gap: 0.9rem;
}

.pp-section-head {
  display: grid;
  gap: 0.3rem;
}

.signal-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.process-card {
  display: grid;
  gap: 0.5rem;
  padding: 1rem;
}

.process-card .bi,
.feature-icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(24, 32, 44, 0.05);
  color: var(--sc-accent-deep);
  font-size: 1rem;
}

.pricing-toggle {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  width: fit-content;
  padding: 0.25rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--sc-line);
  margin: 0 auto;
}

.pricing-toggle-btn {
  border: 0;
  background: transparent;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--sc-muted);
}

.pricing-toggle-btn.is-active {
  background: var(--sc-ink);
  color: #fff;
}

.pricing-rack {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

.pricing-card {
  display: grid;
  gap: 0.7rem;
  padding: 1.1rem;
}

.pricing-card.featured {
  border-color: rgba(17, 61, 103, 0.22);
  background: rgba(255, 255, 255, 0.95);
}

.pricing-header {
  display: grid;
  gap: 0.35rem;
}

.pricing-tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.24rem 0.55rem;
  border-radius: 999px;
  background: rgba(29, 95, 155, 0.08);
  color: var(--sc-accent-deep);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}

.pricing-tag::before,
.pricing-tag::after {
  display: none;
}

.pricing-amount {
  font-size: 2.2rem;
  line-height: 1;
  letter-spacing: -0.05em;
}

.pricing-period {
  color: var(--sc-muted);
  font-size: 0.82rem;
}

.auth-shell {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(280px, 0.75fr);
  gap: 1rem;
  align-items: stretch;
}

.auth-card,
.auth-side {
  padding: 1.1rem;
}

.auth-card form,
.auth-side {
  display: grid;
  gap: 0.9rem;
}

.auth-card form p {
  display: grid;
  gap: 0.35rem;
  margin: 0;
}

.auth-card form ul {
  margin: 0;
  padding-left: 1rem;
}

.auth-card input {
  width: 100%;
}

.verification-page {
  min-height: 60vh;
  display: grid;
  place-items: center;
}

.verification-card {
  width: min(100%, 520px);
  padding: 1.5rem;
}

.verification-form {
  display: grid;
  gap: 0.9rem;
  margin-top: 1rem;
}

.verification-field input {
  width: 100%;
  min-height: 50px;
}

.app-frame {
  display: grid;
  grid-template-columns: 78px 280px minmax(0, 1fr);
  min-height: 100vh;
}

.app-icon-rail {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  height: 100vh;
  padding: 1rem 0.85rem;
  border-right: 1px solid var(--sc-line);
  background: rgba(250, 248, 243, 0.88);
  backdrop-filter: blur(12px);
}

.app-rail-brand {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid var(--sc-line);
}

.app-rail-links,
.app-rail-footer {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.app-rail-link {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: var(--sc-muted);
  background: transparent;
  border: 1px solid transparent;
}

.app-rail-link .bi {
  font-size: 1rem;
}

.app-rail-link:hover,
.app-rail-link.is-active {
  color: var(--sc-ink);
  background: rgba(255, 255, 255, 0.84);
  border-color: var(--sc-line);
  text-decoration: none;
}

.app-sidepanel {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 1rem;
  border-right: 1px solid var(--sc-line);
  background: rgba(246, 243, 236, 0.7);
}

.app-sidepanel__header {
  display: grid;
  gap: 0.18rem;
  margin-bottom: 1rem;
}

.app-sidepanel__header strong {
  font-size: 1rem;
  letter-spacing: -0.03em;
}

.app-sidebar-context-shell {
  display: grid;
  gap: 0.85rem;
}

.app-sidebar-card {
  display: grid;
  gap: 0.8rem;
  padding: 0.95rem;
  border-radius: var(--sc-radius-lg);
  border: 1px solid var(--sc-line);
  background: rgba(255, 255, 255, 0.74);
}

.app-card-title {
  display: grid;
  gap: 0.15rem;
}

.app-card-title h2,
.app-card-title h3 {
  margin: 0;
  font-size: 1rem;
}

.app-sidebar-nav {
  display: grid;
  gap: 0.35rem;
}

.app-sidebar-link {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.72rem;
  border-radius: 12px;
  color: var(--sc-ink-soft);
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.42);
  font-size: 0.86rem;
  font-weight: 700;
}

.app-sidebar-link:hover,
.app-sidebar-link.is-active {
  text-decoration: none;
  color: var(--sc-ink);
  background: rgba(255, 255, 255, 0.92);
  border-color: var(--sc-line);
}

.app-sidebar-stat-grid {
  display: grid;
  gap: 0.65rem;
}

.app-sidebar-stat {
  display: grid;
  gap: 0.2rem;
  padding: 0.72rem;
  border-radius: 12px;
  background: rgba(24, 32, 44, 0.03);
}

.app-sidebar-stat strong {
  font-size: 0.88rem;
  line-height: 1.3;
  word-break: break-word;
}

.app-sidebar-note {
  margin: 0;
}

.app-stage {
  display: grid;
  min-width: 0;
}

.app-stage-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1.15rem;
  border-bottom: 1px solid var(--sc-line);
  background: rgba(246, 243, 236, 0.84);
  backdrop-filter: blur(14px);
}

.app-stage-copy {
  display: grid;
  gap: 0.14rem;
}

.app-stage-copy strong {
  font-size: 0.95rem;
  letter-spacing: -0.02em;
}

.app-stage-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.app-user-chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--sc-line);
  color: var(--sc-muted);
  font-size: 0.78rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.72);
}

.app-main {
  padding: 1.1rem 1.15rem 2rem;
}

.app-main .settings-hero,
.app-main .settings-card,
.app-main .card,
.app-main .panel {
  backdrop-filter: blur(8px);
}

.site-shell .settings-hero {
  display: grid;
  gap: 0.7rem;
  margin-bottom: 1rem;
}

.site-shell .settings-card,
.site-shell .card,
.site-shell .panel {
  padding: 1rem;
}

.site-shell .range-toggle {
  display: inline-flex;
  gap: 0.25rem;
  width: fit-content;
  padding: 0.25rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--sc-line);
  box-shadow: none;
}

.site-shell .range-toggle-btn {
  padding: 0.42rem 0.8rem;
  border-radius: 999px;
  color: var(--sc-muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.site-shell .range-toggle-btn.is-active {
  color: #fff;
  background: var(--sc-ink);
  border-color: var(--sc-ink);
  box-shadow: none;
}

.site-shell .grid-2,
.site-shell .grid-3,
.site-shell .settings-link-grid,
.site-shell .form-grid {
  gap: 0.85rem;
}

.site-shell .notes,
.site-shell .tray {
  display: grid;
  gap: 0.75rem;
}

.site-shell .note,
.site-shell .tray li {
  padding: 0.85rem;
  border-radius: 14px;
  border: 1px solid var(--sc-line);
  background: rgba(255, 255, 255, 0.68);
}

.site-shell .tray li {
  border-bottom: 1px solid var(--sc-line);
}

.site-shell .divider,
.site-shell hr {
  border-top: 1px solid var(--sc-line);
}

.site-shell .step-card {
  overflow: hidden;
}

.site-shell .step-image {
  height: 180px;
}

.site-shell .soft-section {
  background: rgba(255, 255, 255, 0.44);
  border: 1px solid var(--sc-line);
  border-radius: var(--sc-radius-xl);
  padding: 1.2rem;
}

.site-shell .floating-card {
  border-radius: var(--sc-radius-lg);
  box-shadow: none;
}

.site-shell .logo-row img {
  filter: grayscale(1);
  opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
  .page-shell > * {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 1180px) {
  .public-header__inner {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .public-nav,
  .public-actions {
    justify-content: flex-start;
  }

  .marketing-hero,
  .auth-shell {
    grid-template-columns: 1fr;
  }

  .app-frame {
    grid-template-columns: 78px minmax(0, 1fr);
  }

  .app-sidepanel {
    grid-column: 2;
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--sc-line);
  }

  .app-stage {
    grid-column: 2;
  }
}

@media (max-width: 920px) {
  .marketing-hero,
  .auth-shell,
  .pricing-rack,
  .signal-grid,
  .marketing-index,
  .marketing-preview-grid,
  .editorial-grid,
  .public-footer__links {
    grid-template-columns: 1fr;
  }

  .app-stage-topbar,
  .public-footer__meta {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 760px) {
  .public-header__inner,
  .public-main,
  .public-footer__inner {
    width: min(calc(100% - 1.2rem), var(--sc-max));
  }

  .app-frame {
    grid-template-columns: 1fr;
  }

  .app-icon-rail {
    position: sticky;
    z-index: 70;
    top: 0;
    height: auto;
    flex-direction: row;
    align-items: center;
    padding: 0.75rem;
    border-right: 0;
    border-bottom: 1px solid var(--sc-line);
  }

  .app-rail-links,
  .app-rail-footer {
    flex-direction: row;
  }

  .app-rail-brand {
    margin-right: auto;
  }

  .app-sidepanel,
  .app-stage {
    grid-column: 1;
  }

  .app-main {
    padding-inline: 0.75rem;
  }

  .site-shell .table {
    display: block;
    overflow-x: auto;
  }

  .site-shell .settings-link-grid,
  .site-shell .grid-2,
  .site-shell .grid-3 {
    grid-template-columns: 1fr;
  }
}

/* PropterPrompt-inspired app panel pass. */
body.app-shell {
  background: #fbfaf7;
}

body.app-shell h1,
body.app-shell h2,
body.app-shell h3,
body.app-shell h4,
body.app-shell h5,
body.app-shell h6,
body.app-shell p,
body.app-shell li,
body.app-shell dd,
body.app-shell dt {
  text-wrap: initial;
}

.app-shell .pp-section,
.app-shell .app-page-shell,
.app-shell .app-stage-stack,
.app-shell .app-stack {
  display: grid;
  gap: 1rem;
}

.app-simple-page {
  max-width: 860px;
}

.app-shell .pp-panel,
.app-shell .pp-empty-state,
.app-shell .pp-selector-card,
.app-shell .app-text-surface,
.app-shell .app-code-frame,
.app-shell .settings-card,
.app-shell .panel,
.app-shell .status-panel {
  padding: 1rem;
  border: 1px solid rgba(24, 32, 44, 0.08);
  border-radius: 1rem;
  background: #ffffff;
  box-shadow: none !important;
}

.app-scroll-panel {
  max-height: 26rem;
  overflow: auto;
  padding-right: 0.25rem;
}

.pp-check-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: start;
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(18, 24, 38, 0.08);
}

.pp-check-item:last-child {
  border-bottom: 0;
}

.pp-check-item span {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.pp-check-item strong {
  font-size: 0.92rem;
  font-weight: 800;
}

.pp-check-item small {
  color: #6e7787;
  font-size: 0.82rem;
}

.pp-inline-link {
  color: #1d5f9b;
  font-size: 0.78rem;
  font-weight: 800;
  text-decoration: none;
}

.pp-inline-link:hover {
  color: #143f67;
  text-decoration: none;
}

.app-frame {
  grid-template-columns: 68px 320px minmax(0, 1fr);
  min-height: 100vh;
}

.app-icon-rail {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  height: 100vh;
  padding: 1rem 0 0.85rem;
  border-right: 1px solid rgba(18, 24, 38, 0.08);
  background: #ffffff;
}

.app-rail-brand {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.85rem;
  background: var(--sc-accent-deep);
}

.app-rail-brand .brand-mark {
  width: 1.2rem;
  height: 1.2rem;
  filter: brightness(0) invert(1);
}

.app-rail-links,
.app-rail-footer {
  display: grid;
  gap: 0.45rem;
}

.app-rail-footer {
  margin-top: auto;
}

.app-rail-link {
  display: inline-grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.8rem;
  color: #6c7482;
  background: transparent;
  border: 0;
  transition: background 0.16s ease, color 0.16s ease;
}

.app-rail-link:hover {
  background: #f4f6f8;
  color: #172033;
}

.app-rail-link.is-active {
  background: #ebf3ff;
  color: var(--sc-accent);
}

.app-rail-link .bi {
  font-size: 1rem;
  line-height: 1;
}

.app-sidepanel {
  position: sticky;
  top: 0;
  display: grid;
  align-content: start;
  gap: 1rem;
  height: 100vh;
  overflow-y: auto;
  padding: 1.2rem 1.2rem 1.35rem;
  border-right: 1px solid rgba(18, 24, 38, 0.08);
  background: #ffffff;
}

.app-sidepanel__header {
  display: grid;
  gap: 0.14rem;
  padding: 0 0.18rem 0.18rem;
  min-width: 0;
}

.app-sidepanel__eyebrow,
.app-sidebar-context-shell .pp-kicker,
.app-sidebar-context-shell .pp-mini-label,
.app-stage-copy .pp-mini-label {
  color: #7b8595;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.app-sidepanel__header strong {
  color: #172033;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.app-sidebar-context-shell {
  display: grid;
  gap: 1rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(18, 24, 38, 0.08);
}

.app-sidebar-context-header {
  display: grid;
  gap: 0.14rem;
  padding: 0 0.18rem 0.12rem;
  min-width: 0;
}

.app-sidebar-context-header strong {
  color: #172033;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.app-sidebar-project-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.48rem;
  padding: 0.24rem 0 0.08rem;
}

.app-sidebar-inline-action {
  min-width: 1.82rem;
  min-height: 1.82rem;
  padding: 0.3rem 0.4rem;
}

.app-sidebar-inline-action .bi {
  font-size: 0.82rem;
  line-height: 1;
}

.app-sidebar-context-shell > .app-sidebar-card {
  position: relative;
  display: grid;
  gap: 0.9rem;
  padding: 0.96rem 0.96rem 1rem;
  border: 1px solid rgba(18, 24, 38, 0.09);
  border-radius: 1.05rem;
  background: linear-gradient(180deg, rgba(29, 95, 155, 0.035), rgba(29, 95, 155, 0) 56px), #fffdfa;
  margin: 0;
}

.app-sidebar-context-shell > .app-sidebar-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.52);
  pointer-events: none;
}

.app-sidebar-link {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  gap: 0.65rem;
  padding: 0.62rem 0.7rem;
  border-radius: 0.82rem;
  color: #344054;
  border: 1px solid transparent;
  background: #fbfaf7;
  font-size: 0.82rem;
  font-weight: 700;
}

.app-sidebar-link span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-sidebar-link:hover,
.app-sidebar-link.is-active {
  text-decoration: none;
  color: #172033;
  background: #ffffff;
  border-color: rgba(18, 24, 38, 0.08);
}

.app-sidebar-note {
  margin: 0;
  color: var(--sc-muted);
  font-size: 0.73rem;
  line-height: 1.42;
}

.app-card-title,
.app-page-title {
  display: grid;
  gap: 0.22rem;
}

.app-card-title h2,
.app-card-title h3,
.app-page-title h1,
.app-page-title h2 {
  margin: 0;
}

.app-shell .app-card-title h1 {
  margin: 0;
  color: #172033;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.app-card-title h2,
.app-card-title h3 {
  color: #172033;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.app-shell .app-page-title h1,
.app-shell .app-task-header .app-page-title h1 {
  color: #172033;
  font-size: clamp(1.3rem, 1.9vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.app-shell .app-page-title p,
.app-shell .app-card-title p,
.app-shell .app-record-copy p,
.app-shell p,
.app-shell li,
.app-shell dd,
.app-shell dt {
  font-size: 0.86rem;
  line-height: 1.5;
}

.app-page-header,
.app-page-headline,
.app-card-head,
.app-record-head,
.app-inline-meta,
.app-page-actions,
.app-card-actions,
.settings-actions,
.danger-actions,
.app-toolbar,
.app-toolbar-group {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.65rem;
}

.app-card-head,
.app-record-head,
.app-page-headline,
.app-toolbar {
  justify-content: space-between;
}

.app-page-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}

.app-page-title p,
.app-card-title p,
.app-record-copy p,
.page-heading p,
.muted,
.text-muted {
  color: var(--sc-muted);
}

.app-hidden-form {
  display: none;
}

.app-shell .btn,
.app-shell .copy-btn {
  min-height: 2rem;
  padding: 0.44rem 0.76rem;
  font-size: 0.78rem;
  border-radius: 0.78rem;
}

.app-shell .btn.pp-iconized,
.app-shell .copy-btn.pp-iconized,
.app-shell .app-sidebar-inline-action {
  min-width: 2.1rem;
}

.pp-form-stack,
.app-list,
.app-project-list,
.app-defaults-stack,
.app-tier-stack,
.app-callout-list,
.app-section-index,
.app-output-grid,
.app-bucket-rail,
.app-project-secondary-grid,
.app-panel-stack {
  display: grid;
  gap: 0.8rem;
}

.pp-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  padding-top: 0.12rem;
}

.app-record,
.app-project-row,
.app-defaults-row,
.app-meta-item,
.app-stat-chip,
.app-callout-item,
.app-tier-card,
.app-section-index__item,
.app-bucket-card,
.app-shell .note,
.app-shell .tray li {
  display: grid;
  gap: 0.55rem;
  padding: 0.9rem;
  border: 1px solid rgba(18, 24, 38, 0.08);
  border-radius: 0.9rem;
  background: #ffffff;
}

.app-record:hover,
.pp-card-link:hover,
.app-project-row:hover,
.app-section-index__item:hover {
  text-decoration: none;
  border-color: rgba(29, 95, 155, 0.18);
  background: #fcfdff;
  color: #172033;
}

.app-record-copy strong,
.app-project-row-main strong,
.app-bucket-card-head strong,
.app-stat-chip strong,
.app-meta-item strong,
.app-callout-item strong,
.app-tier-card__copy h3 {
  color: #172033;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.app-record-copy strong,
.app-project-row-main strong {
  font-size: 0.96rem;
}

.app-sidebar-context-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.app-project-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 0.82rem 0.9rem;
}

.app-project-row-main,
.app-tier-card__copy {
  display: grid;
  gap: 0.28rem;
}

.app-project-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-end;
  align-items: center;
}

.app-meta-grid,
.app-stat-strip {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.app-sidebar-context-shell .app-meta-grid,
.app-sidebar-context-shell .app-stat-strip {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.app-stat-chip,
.app-meta-item {
  gap: 0.16rem;
  background: #fbfaf7;
}

.app-stat-chip strong,
.app-meta-item strong {
  font-size: 0.82rem;
}

.app-defaults-row {
  gap: 0.35rem;
}

.app-defaults-row.has-errors {
  border-color: rgba(176, 74, 56, 0.24);
  background: #fff8f6;
}

.app-defaults-label {
  margin: 0;
  color: #172033;
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: none;
  font-family: var(--sc-font-body);
}

.app-defaults-help,
.app-field-error {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
}

.app-defaults-row--compact .app-defaults-help {
  display: none;
}

.app-field-error {
  color: var(--sc-danger);
}

.app-defaults-control select,
.app-defaults-control input,
.app-defaults-control textarea {
  width: 100%;
}

.app-defaults-control--stacked {
  display: grid;
  gap: 0.42rem;
  align-items: start;
}

.app-defaults-control--stacked > .btn,
.app-defaults-control--stacked > a.btn {
  width: 100%;
  justify-content: center;
}

.app-inline-subgoal-form {
  display: grid;
  gap: 0.42rem;
  width: 100%;
}

.app-inline-subgoal-form .form-field {
  display: grid;
  gap: 0.24rem;
}

.app-inline-subgoal-form .form-field--guidance,
.app-sidebar-card .form-field--guidance {
  padding-top: 0.28rem;
}

.app-inline-subgoal-form textarea {
  min-height: 4.4rem;
  resize: vertical;
}

.app-subgoal-note,
.app-stage .app-subgoal-note,
.app-sidebar-context-shell .app-subgoal-note {
  display: block;
  width: 100%;
  margin: 0;
  color: var(--sc-muted);
  font-size: 0.62rem;
  line-height: 1.34;
  letter-spacing: 0.01em;
}

.app-subgoal-actions {
  align-items: center;
  gap: 0.45rem;
}

.app-subgoal-actions .btn {
  flex: 0 0 auto;
  justify-content: center;
}

.app-sidebar-library-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  width: 100%;
  text-align: center;
}

.app-sidebar-library-link .bi {
  line-height: 1;
}

.app-shell .form-field label,
.app-shell .app-defaults-label,
.app-shell label,
.app-shell legend,
.app-shell .field-help,
.app-shell .helptext {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
}

.app-shell input,
.app-shell select,
.app-shell textarea {
  min-height: 2.18rem;
  padding: 0.5rem 0.66rem;
  font-size: 0.82rem;
  border-radius: 0.72rem;
}

.app-shell .form-field input:focus,
.app-shell .form-field select:focus,
.app-shell .form-field textarea:focus,
.app-shell .app-defaults-control input:focus,
.app-shell .app-defaults-control select:focus,
.app-shell .app-defaults-control textarea:focus,
.app-shell input:focus,
.app-shell select:focus,
.app-shell textarea:focus {
  outline: none;
  border-color: rgba(29, 95, 155, 0.34);
  box-shadow: none;
}

.app-shell textarea {
  min-height: 7rem;
}

.app-sidepanel input,
.app-sidepanel select,
.app-sidepanel textarea {
  min-height: 2rem;
  padding: 0.46rem 0.6rem;
  font-size: 0.79rem;
}

.app-sidepanel textarea {
  min-height: 5.5rem;
}

.app-shell .notes,
.app-shell .tray {
  display: grid;
  gap: 0.8rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.app-shell .note,
.app-shell .tray li {
  border-bottom: 0;
}

.app-shell .news-card,
.app-shell .tray-item {
  display: grid;
  gap: 0.6rem;
}

.app-note-composer {
  display: grid;
  gap: 0.72rem;
}

.app-note-quick-form {
  display: grid;
  grid-template-columns: minmax(0, 38rem) auto;
  align-items: end;
  gap: 0.7rem;
  max-width: 44rem;
}

.app-note-editor-shell {
  border: 1px solid rgba(29, 95, 155, 0.22);
  border-radius: 0.92rem;
  background: linear-gradient(180deg, rgba(232, 241, 252, 0.98), rgba(244, 248, 253, 1));
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.app-note-editor-shell:focus-within {
  border-color: rgba(29, 95, 155, 0.38);
  box-shadow: 0 0 0 1px rgba(29, 95, 155, 0.16);
}

.app-note-editor,
.app-note-quick-input {
  width: 100%;
  min-height: 3rem;
  padding: 0.68rem 0.8rem;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #172033;
  font-size: 0.84rem;
  line-height: 1.48;
  resize: vertical;
  border-radius: 0.82rem;
}

.app-note-editor:focus,
.app-note-quick-input:focus {
  outline: none;
}

.app-record--note {
  transition: background 0.18s ease, border-color 0.18s ease;
}

.app-record--note.is-dragging {
  opacity: 0.58;
  border-color: rgba(29, 95, 155, 0.26);
}

.app-record-head--note {
  margin-bottom: 0;
}

.app-note-select {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid rgba(18, 24, 38, 0.08);
  border-radius: 999px;
  background: #f7f8fa;
}

.app-note-select input {
  width: auto;
  min-height: auto;
  padding: 0;
  border: 0;
  box-shadow: none;
}

.app-note-inline-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.42rem;
}

.app-note-control-button,
.app-note-save-button,
.app-note-delete-button,
.app-note-quick-submit {
  min-height: 1.72rem;
  min-width: 1.72rem;
  padding: 0.22rem 0.44rem;
  font-size: 0.72rem;
  border-radius: 0.72rem;
}

.app-note-control-button:disabled,
.app-note-save-button:disabled,
.app-note-delete-button:disabled {
  opacity: 0.36;
  cursor: not-allowed;
}

[data-note-drag-handle] {
  cursor: grab;
}

[data-note-drag-handle]:active {
  cursor: grabbing;
}

.app-workspace-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.85rem;
  align-items: center;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(18, 24, 38, 0.08);
}

.app-workspace-actions-copy {
  display: grid;
  gap: 0.22rem;
}

.app-compiled-output,
.output,
.mono.output {
  min-height: 15rem;
  padding: 1rem;
  border: 1px solid rgba(18, 24, 38, 0.08);
  border-radius: 0.9rem;
  background: #f7fafc;
  white-space: pre-wrap;
  color: #172033;
}

.app-bucket-card {
  gap: 0.52rem;
}

.app-bucket-card--active {
  border-color: rgba(29, 95, 155, 0.22);
  background: #f7fbff;
}

.app-bucket-card-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
}

.app-bucket-card-link {
  min-width: 0;
  gap: 0;
  color: inherit;
}

.app-bucket-card-actions,
.app-bucket-card-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
}

.app-bucket-card-icon {
  display: inline-grid;
  place-items: center;
  width: 1.72rem;
  height: 1.72rem;
  border: 1px solid rgba(18, 24, 38, 0.08);
  border-radius: 0.56rem;
  background: #ffffff;
  color: #6f7786;
}

.app-project-secondary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.app-shell .copy-btn {
  border-radius: 999px;
}

.app-shell .output-view {
  display: grid;
  gap: 0.6rem;
}

.app-shell .output-view.is-hidden {
  display: none;
}

.output-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

.output-label {
  color: #6c7482;
  font-family: var(--sc-font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.app-code-frame {
  padding: 0.35rem;
  background: #f6f7f9;
}

.app-code-frame .pp-pre,
.app-code-frame .pp-pre-lg {
  margin: 0;
  padding: 0.9rem;
  border-radius: 0.82rem;
  background: #ffffff;
  border: 0;
  white-space: pre-wrap;
  font-family: var(--sc-font-mono);
  font-size: 0.8rem;
  line-height: 1.6;
}

.app-output-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.app-tier-card--featured {
  border-color: rgba(29, 95, 155, 0.24);
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.app-tier-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.app-section-index__item {
  color: #172033;
  font-size: 0.88rem;
  font-weight: 700;
}

.app-shell .danger-zone,
.app-shell .app-danger-card {
  border-color: rgba(176, 74, 56, 0.16);
  background: linear-gradient(180deg, rgba(176, 74, 56, 0.04), rgba(255, 255, 255, 1) 58%);
}

.app-shell .danger-form {
  display: grid;
  gap: 0.75rem;
}

.app-shell .toggle-list {
  display: grid;
  gap: 0.5rem;
}

.app-shell .toggle-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.app-stage {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  background: #fbfaf7;
}

.app-stage-topbar {
  position: sticky;
  top: 0;
  z-index: 15;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.9rem;
  padding: 0.86rem 1.25rem;
  border-bottom: 1px solid rgba(18, 24, 38, 0.08);
  background: rgba(251, 250, 247, 0.94);
  backdrop-filter: blur(12px);
}

.app-stage-copy {
  gap: 0.08rem;
}

.app-stage-copy strong {
  color: #172033;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.app-user-chip {
  min-height: 2rem;
  padding: 0.42rem 0.72rem;
  font-size: 0.76rem;
  background: #ffffff;
  max-width: min(22rem, 32vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-main {
  padding: 1.2rem 1.4rem 1.65rem;
}

.app-stage-stack {
  max-width: 1220px;
  align-content: start;
}

.app-page-header,
.app-task-header {
  gap: 0.4rem;
}

.app-task-header .app-page-title {
  gap: 0.16rem;
}

.app-stage .app-page-title h1,
.app-stage .app-task-header .app-page-title h1 {
  color: #172033;
  font-size: clamp(1.45rem, 2vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.06;
}

.app-stage .app-card-title {
  gap: 0.18rem;
}

.app-stage .app-card-title h2,
.app-stage .app-card-title h3 {
  margin: 0;
  color: #172033;
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.14;
}

.app-stage .pp-kicker,
.app-stage .pp-mini-label,
.app-stage label {
  font-size: 0.7rem;
}

.app-stage p,
.app-stage li,
.app-stage dd,
.app-stage dt {
  font-size: 0.88rem;
  line-height: 1.55;
}

.app-stage .app-record-copy strong {
  display: block;
  margin-bottom: 0.18rem;
  color: #172033;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.28;
}

.app-stage .btn,
.app-stage .app-shell .btn {
  min-height: 2.1rem;
  padding: 0.48rem 0.8rem;
  font-size: 0.8rem;
}

.app-stage .btn.pp-iconized,
.app-stage .copy-btn.pp-iconized {
  min-width: 2.1rem;
}

.app-stage .app-generate-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.52rem;
  min-width: auto;
  padding: 0.56rem 0.92rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.app-stage .app-generate-cta .bi {
  font-size: 0.82rem;
  line-height: 1;
}

.app-stage .pp-pill,
.app-stage .pill {
  padding: 0.18rem 0.48rem;
  font-size: 0.7rem;
}

.app-stage .app-record,
.app-stage .app-project-row,
.app-stage .app-meta-item,
.app-stage .app-defaults-row,
.app-stage .pp-selector-card,
.app-stage .pp-empty-state,
.app-stage .app-text-surface,
.app-stage .app-code-frame {
  border-color: rgba(18, 24, 38, 0.08);
  border-radius: 0.9rem;
  background: #ffffff;
}

.app-stage .app-note-composer {
  display: grid;
  gap: 0.72rem;
}

.app-stage .app-note-quick-form {
  display: grid;
  grid-template-columns: minmax(0, 38rem) auto;
  align-items: end;
  gap: 0.7rem;
  max-width: 44rem;
}

.app-stage .app-note-inline-form {
  display: grid;
  gap: 0.68rem;
}

.app-stage .app-note-editor-shell {
  border: 1px solid rgba(62, 122, 203, 0.22);
  border-radius: 0.92rem;
  background: linear-gradient(180deg, rgba(224, 236, 255, 0.98), rgba(236, 244, 255, 1));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.app-stage .app-note-editor,
.app-stage .app-note-quick-input {
  width: 100%;
  min-height: 3rem;
  padding: 0.72rem 0.84rem;
  border: 0;
  background: rgba(230, 239, 255, 0.78);
  box-shadow: none;
  color: #172033;
  font-size: 0.9rem;
  line-height: 1.48;
  resize: none;
  border-radius: 0.82rem;
}

.app-stage .app-note-editor:focus,
.app-stage .app-note-quick-input:focus {
  outline: none;
}

.app-stage .app-note-editor-shell:focus-within {
  border-color: rgba(29, 95, 155, 0.42);
  box-shadow: 0 0 0 1px rgba(29, 95, 155, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.app-stage .app-note-quick-input::placeholder,
.app-stage .app-note-editor::placeholder {
  color: #72809a;
}

.app-stage .app-record-head--note {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0;
}

.app-stage .app-note-inline-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.42rem;
}

.app-stage .app-note-select {
  justify-content: center;
  min-width: 1.9rem;
  min-height: 1.9rem;
  padding: 0.22rem;
}

.app-stage .app-note-control-button,
.app-stage .app-note-save-button,
.app-stage .app-note-delete-button,
.app-stage .app-note-quick-submit {
  min-height: 1.68rem;
  min-width: 1.68rem;
  padding: 0.22rem 0.42rem;
  font-size: 0.7rem;
  border-radius: 0.72rem;
}

.app-stage .app-note-save-button,
.app-stage .app-note-quick-submit {
  border-color: rgba(18, 24, 38, 0.08);
  background: #ffffff;
  color: #172033;
}

.app-stage .app-note-quick-submit,
.app-stage .app-note-quick-submit.pp-iconized {
  justify-self: start;
  align-self: end;
  width: 1.68rem;
  min-width: 1.68rem;
  max-width: 1.68rem;
}

.app-stage .app-note-save-button:hover,
.app-stage .app-note-save-button:focus,
.app-stage .app-note-quick-submit:hover,
.app-stage .app-note-quick-submit:focus {
  border-color: rgba(18, 24, 38, 0.14);
  background: #f8fafc;
  color: #172033;
}

.app-stage .app-note-control-button .bi,
.app-stage .app-note-save-button .bi,
.app-stage .app-note-delete-button .bi,
.app-stage .app-note-quick-submit .bi {
  font-size: 0.76rem;
}

.app-stage .app-note-control-button.pp-iconized,
.app-stage .app-note-save-button.pp-iconized,
.app-stage .app-note-delete-button.pp-iconized,
.app-stage .app-note-quick-submit.pp-iconized {
  min-width: 1.68rem;
  min-height: 1.68rem;
  padding: 0.2rem;
}

.app-stage .app-note-control-button.pp-iconized .bi,
.app-stage .app-note-save-button.pp-iconized .bi,
.app-stage .app-note-delete-button.pp-iconized .bi,
.app-stage .app-note-quick-submit.pp-iconized .bi {
  font-size: 0.72rem;
}

.app-account-page .app-page-actions {
  align-items: center;
}

.app-account-page .app-page-title .app-inline-meta {
  padding-top: 0.18rem;
}

.app-account-tool-list,
.app-account-danger-list {
  display: grid;
  gap: 0.82rem;
}

.app-account-tool-row,
.app-account-danger-row {
  align-items: start;
}

.app-account-tool-row .app-project-row-main,
.app-account-danger-row .app-card-title {
  min-width: 0;
}

.app-account-tool-row .toggle-item,
.app-account-danger-row .toggle-item {
  margin: 0;
}

.app-account-danger-row .app-card-head {
  align-items: start;
}

.app-account-danger-row .app-card-title {
  gap: 0.18rem;
}

.app-account-danger-row .app-card-title h3 {
  margin: 0;
  font-size: 0.94rem;
}

.app-account-danger-row p {
  margin: 0;
}

.app-stage .app-compiled-output {
  min-height: 15rem;
  white-space: pre-wrap;
  line-height: 1.6;
  color: #172033;
  background: rgba(247, 251, 255, 0.92);
}

.app-stage .app-context-preview {
  max-height: 34rem;
  overflow: auto;
  white-space: pre-wrap;
  line-height: 1.62;
}

.app-stage .app-compiled-output.is-empty {
  color: #7b8595;
}

.app-sidebar-context-shell .app-sidebar-output-body {
  min-height: 6.2rem;
  padding: 0.72rem 0.74rem;
  background: #ffffff;
  color: #172033;
  font-size: 0.74rem;
  line-height: 1.52;
}

.app-sidebar-context-shell .app-sidebar-output-body.is-empty {
  color: #7b8595;
}

.app-sidebar-context-shell .app-scroll-panel {
  max-height: 15rem;
}

.app-sidebar-context-shell .pp-check-item {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem;
  padding: 0.55rem 0;
}

.app-sidebar-context-shell .pp-inline-link {
  display: none;
}

.app-sidebar-context-shell .app-sidebar-output-body h1,
.app-sidebar-context-shell .app-sidebar-output-body h2,
.app-sidebar-context-shell .app-sidebar-output-body h3,
.app-sidebar-context-shell .app-sidebar-output-body h4 {
  margin: 0 0 0.4rem;
  color: #1d5f9b;
  font-family: var(--sc-font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.app-sidebar-context-shell .app-sidebar-output-body p,
.app-sidebar-context-shell .app-sidebar-output-body ul,
.app-sidebar-context-shell .app-sidebar-output-body ol,
.app-sidebar-context-shell .app-sidebar-output-body blockquote {
  margin: 0 0 0.52rem;
}

.app-sidebar-context-shell .app-sidebar-output-body ul,
.app-sidebar-context-shell .app-sidebar-output-body ol {
  padding-left: 1rem;
}

.app-sidebar-context-shell .app-sidebar-output-body li + li {
  margin-top: 0.2rem;
}

.app-sidebar-context-shell .app-sidebar-output-body > *:last-child {
  margin-bottom: 0;
}

.app-stage .app-project-secondary-grid {
  gap: 1rem;
}

.app-sidebar-context-shell > .app-sidebar-card {
  gap: 0.72rem;
  padding: 0.82rem 0.84rem 0.86rem;
}

.app-sidebar-context-shell > .app-sidebar-card .app-card-title h2,
.app-sidebar-context-shell > .app-sidebar-card .app-card-title h3 {
  font-size: 0.8rem;
}

.app-sidebar-context-shell .app-stat-chip,
.app-sidebar-context-shell .app-meta-item,
.app-sidebar-context-shell .app-defaults-row,
.app-sidebar-context-shell .app-callout-item {
  padding: 0.6rem 0.62rem;
}

.app-sidebar-context-shell .app-stat-chip strong,
.app-sidebar-context-shell .app-meta-item strong {
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

.app-sidebar-context-shell p,
.app-sidebar-context-shell li,
.app-sidebar-context-shell small,
.app-sidebar-context-shell label,
.app-sidebar-context-shell .app-defaults-help {
  font-size: 0.72rem;
  line-height: 1.38;
}

.app-sidebar-context-shell .form-field label {
  display: block;
  overflow-wrap: anywhere;
}

.app-sidebar-context-shell .app-inline-meta,
.app-sidebar-context-shell .pp-actions,
.app-sidebar-context-shell .app-tier-card__actions {
  gap: 0.5rem;
}

.app-sidebar-context-shell .pp-form-stack,
.app-sidebar-context-shell .form-field,
.app-sidebar-context-shell .app-defaults-row,
.app-sidebar-context-shell .app-defaults-control,
.app-sidebar-context-shell .pp-actions {
  min-width: 0;
}

.app-sidebar-context-shell .app-defaults-stack,
.app-sidebar-context-shell .app-callout-list,
.app-sidebar-context-shell .app-bucket-rail,
.app-sidebar-context-shell .app-tier-stack {
  gap: 0.55rem;
}

.app-sidebar-context-shell .app-meta-grid,
.app-sidebar-context-shell .app-stat-strip {
  gap: 0.45rem;
  grid-template-columns: minmax(0, 1fr);
}

.app-sidebar-context-shell .app-meta-item,
.app-sidebar-context-shell .app-defaults-row,
.app-sidebar-context-shell .app-bucket-card,
.app-sidebar-context-shell .app-callout-item,
.app-sidebar-context-shell .app-stat-chip,
.app-sidebar-context-shell .app-tier-card {
  border: 1px solid rgba(18, 24, 38, 0.08);
  border-radius: 0.82rem;
  background: #fbfaf7;
  padding: 0.68rem;
}

.app-sidebar-context-shell .app-defaults-row {
  gap: 0.34rem;
}

.app-sidebar-context-shell .app-defaults-label,
.app-sidebar-context-shell .app-bucket-card-head strong,
.app-sidebar-context-shell .app-meta-item strong,
.app-sidebar-context-shell .app-stat-chip strong {
  font-size: 0.78rem;
  font-weight: 700;
}

.app-orientation-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.app-orientation-trigger i {
  font-size: 0.92rem;
}

.app-orientation-modal .modal-content {
  border: 1px solid rgba(18, 24, 38, 0.08);
  border-radius: 1.35rem;
  background: #fbfaf7;
  box-shadow: 0 1.2rem 3rem rgba(17, 24, 39, 0.16);
}

.app-orientation-modal .modal-header,
.app-orientation-modal .modal-footer {
  border: 0;
  padding: 1.2rem 1.3rem 0;
}

.app-orientation-modal .modal-body {
  padding: 1rem 1.3rem 0.9rem;
}

.app-orientation-heading {
  display: grid;
  gap: 0.45rem;
}

.app-orientation-heading h2 {
  margin: 0;
  font-size: clamp(1.25rem, 2.2vw, 1.8rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.app-orientation-heading p {
  margin: 0;
  max-width: 40rem;
  color: var(--sc-muted);
}

.app-orientation-grid {
  display: grid;
  gap: 0.85rem;
}

.app-orientation-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(18, 24, 38, 0.08);
  border-radius: 1rem;
  background: #ffffff;
}

.app-orientation-step__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.85rem;
  border: 1px solid rgba(29, 95, 155, 0.14);
  background: #eef5fb;
  color: #2f6f9f;
}

.app-orientation-step h3 {
  margin: 0 0 0.24rem;
  font-size: 0.95rem;
  line-height: 1.15;
}

.app-orientation-step p {
  margin: 0;
  color: var(--sc-muted);
}

.app-panel-with-floating-help {
  position: relative;
}

.app-panel-with-floating-help > .app-card-title,
.app-panel-with-floating-help > .app-card-head,
.app-panel-with-floating-help > .app-record-head,
.app-panel-with-floating-help > .pp-kicker {
  padding-right: 1.8rem;
}

.app-panel-help-slot {
  position: absolute;
  top: 0.82rem;
  right: 0.82rem;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.app-panel-help {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(88, 101, 124, 0.78);
  line-height: 1;
  pointer-events: auto;
  transition: color 140ms ease, opacity 140ms ease;
}

.app-panel-help:hover,
.app-panel-help:focus-visible {
  background: transparent;
  color: #485a76;
  opacity: 1;
}

.app-panel-help .bi {
  display: block;
  font-size: 1rem;
  line-height: 1;
}

.app-panel-help--floating {
  position: static;
}

.app-help-popover {
  --bs-popover-max-width: 20rem;
  --bs-popover-border-color: rgba(18, 24, 38, 0.08);
  --bs-popover-border-radius: 1rem;
  --bs-popover-header-bg: #fbfaf7;
  --bs-popover-body-padding-x: 0.9rem;
  --bs-popover-body-padding-y: 0.85rem;
  --bs-popover-header-padding-x: 0.9rem;
  --bs-popover-header-padding-y: 0.75rem;
  --bs-popover-box-shadow: 0 1rem 2.5rem rgba(17, 24, 39, 0.16);
}

.app-help-popover .popover-header {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.app-help-popover .popover-body {
  font-size: 0.8rem;
  line-height: 1.45;
  color: #556176;
}

.app-help-popover .popover-body p:last-child {
  margin-bottom: 0;
}

@media (max-width: 760px) {
  .app-orientation-trigger span {
    display: none;
  }

  .app-orientation-modal .modal-header,
  .app-orientation-modal .modal-body,
  .app-orientation-modal .modal-footer {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .app-orientation-step {
    grid-template-columns: 1fr;
  }
}

.app-sidebar-context-shell .app-defaults-control select,
.app-sidebar-context-shell .app-defaults-control input,
.app-sidebar-context-shell .app-defaults-control textarea,
.app-sidebar-context-shell input,
.app-sidebar-context-shell select,
.app-sidebar-context-shell textarea {
  min-height: 2.05rem;
  padding: 0.46rem 0.58rem;
  font-size: 0.78rem;
}

.app-sidebar-context-shell .app-defaults-control--stacked {
  gap: 0.38rem;
}

.app-sidebar-context-shell .app-inline-subgoal-form {
  gap: 0.38rem;
}

.app-sidebar-context-shell .app-inline-subgoal-form textarea {
  min-height: 3.8rem;
}

.app-sidebar-context-shell .btn,
.app-sidebar-context-shell .app-shell .btn {
  min-height: 1.82rem;
  padding: 0.34rem 0.62rem;
  font-size: 0.73rem;
}

.app-sidebar-context-shell .pp-iconized,
.app-sidebar-context-shell .app-sidebar-inline-action,
.app-sidebar-context-shell .app-bucket-delete {
  min-width: 1.82rem;
  padding-inline: 0.38rem;
}

.app-sidebar-context-shell .pp-actions > .pp-iconized,
.app-sidebar-context-shell .pp-actions > .btn.pp-iconized {
  align-self: flex-start;
  flex: 0 0 auto;
}

.app-sidebar-context-shell .pp-iconized .bi,
.app-sidebar-context-shell .app-bucket-delete .bi {
  font-size: 0.8rem;
}

.app-sidebar-context-shell .app-bucket-card {
  gap: 0.52rem;
}

.app-sidebar-context-shell .app-bucket-card-row {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 0.46rem;
}

.app-sidebar-context-shell .app-bucket-card-link {
  min-width: 0;
  gap: 0;
}

.app-sidebar-context-shell .app-bucket-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  justify-content: space-between;
  width: 100%;
}

.app-sidebar-context-shell .app-bucket-card-head {
  gap: 0.08rem;
  min-width: 0;
}

.app-sidebar-context-shell .app-bucket-card-head strong,
.app-sidebar-context-shell .app-bucket-card-head p,
.app-sidebar-context-shell .app-stat-chip strong,
.app-sidebar-context-shell .app-sidebar-context-header strong {
  overflow-wrap: anywhere;
}

.app-sidebar-context-shell .app-bucket-card-head p {
  margin: 0;
}

.app-sidebar-context-shell .app-bucket-card-head strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-sidebar-context-shell .app-bucket-card-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  color: #6f7786;
}

.app-sidebar-context-shell .app-bucket-card-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  min-width: 0;
  color: #6f7786;
}

.app-sidebar-context-shell .app-bucket-card-stat strong {
  color: #4e5868;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0;
}

.app-sidebar-context-shell .app-bucket-card-stat .bi {
  font-size: 0.76rem;
  line-height: 1;
}

.app-sidebar-context-shell .app-bucket-card-icon {
  width: 1.62rem;
  height: 1.62rem;
  border-radius: 0.56rem;
}

.app-sidebar-context-shell .app-bucket-card-icon .bi {
  font-size: 0.8rem;
}

.app-sidebar-context-shell .app-bucket-card-delete-form {
  display: inline-flex;
}

.app-sidebar-context-shell .app-stat-chip--wide {
  grid-column: 1 / -1;
}

.app-sidebar-spec-list {
  display: grid;
  gap: 0.48rem;
}

.app-sidebar-spec {
  display: grid;
  grid-template-columns: 1.3rem minmax(0, 1fr);
  gap: 0.58rem;
  align-items: start;
  padding: 0.64rem 0.68rem;
  border: 1px solid rgba(18, 24, 38, 0.08);
  border-radius: 0.82rem;
  background: #fbfaf7;
  min-width: 0;
}

.app-sidebar-spec-icon {
  display: inline-grid;
  place-items: center;
  width: 1.3rem;
  height: 1.3rem;
  color: #5d6a7f;
}

.app-sidebar-spec-icon .bi {
  font-size: 0.82rem;
  line-height: 1;
}

.app-sidebar-spec-copy {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.app-sidebar-spec-copy strong {
  color: #172033;
  font-size: 0.77rem;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-sidebar-spec-copy span {
  color: var(--sc-muted);
  font-size: 0.72rem;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pp-mini-label .bi {
  margin-right: 0.28rem;
  font-size: 0.76rem;
  vertical-align: text-top;
}

.app-main .settings-hero {
  margin-bottom: 0;
}

@media (max-width: 1100px) {
  .app-frame {
    grid-template-columns: 68px 288px minmax(0, 1fr);
  }
}

@media (max-width: 920px) {
  .app-frame {
    grid-template-columns: 1fr;
  }

  .app-icon-rail {
    position: static;
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
    height: auto;
    padding: 0.75rem;
    border-right: 0;
    border-bottom: 1px solid rgba(18, 24, 38, 0.08);
  }

  .app-rail-brand {
    margin-right: auto;
  }

  .app-rail-links,
  .app-rail-footer {
    display: flex;
    flex-direction: row;
  }

  .app-sidepanel {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(18, 24, 38, 0.08);
  }

  .app-project-secondary-grid,
  .app-output-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .app-main {
    padding: 0.85rem;
  }

  .app-stage-topbar {
    flex-direction: column;
    align-items: flex-start;
    padding: 0.85rem;
  }

  .app-note-quick-form,
  .app-project-row {
    grid-template-columns: 1fr;
  }

  .app-project-row-meta {
    justify-content: flex-start;
  }

  .app-sidebar-context-shell .app-meta-grid,
  .app-sidebar-context-shell .app-stat-strip {
    grid-template-columns: 1fr 1fr;
  }
}

.app-search-panel {
  display: grid;
  gap: 1rem;
}

.app-search-panel.app-panel-with-floating-help {
  padding-right: 3rem;
}

.app-search-panel-copy {
  max-width: 42rem;
}

.app-search-form {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: minmax(22rem, 1fr) auto;
  align-items: stretch;
  width: min(100%, 52rem);
}

.app-search-input-wrap {
  min-width: 0;
}

.app-search-submit {
  padding-top: 0.92rem;
  padding-bottom: 0.74rem;
  padding-inline: 1rem;
  white-space: nowrap;
}

.app-search-input-wrap {
  position: relative;
}

.app-search-input-wrap > i {
  display: none;
}

.app-search-input {
  width: 100%;
  min-height: 3.25rem;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 1rem;
  border: 1px solid rgba(27, 43, 67, 0.12);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 248, 252, 0.98));
  padding: 0.95rem 1rem;
  color: #162033;
  font-size: 0.98rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.app-search-input:focus {
  outline: none;
  border-color: rgba(47, 111, 159, 0.35);
  box-shadow: 0 0 0 0.22rem rgba(47, 111, 159, 0.12);
}

.app-search-input::-webkit-search-decoration,
.app-search-input::-webkit-search-cancel-button,
.app-search-input::-webkit-search-results-button,
.app-search-input::-webkit-search-results-decoration {
  display: none;
}

.app-search-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 1.4rem;
}

.app-search-modal[hidden] {
  display: none;
}

.app-search-modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(22, 32, 51, 0.42);
  backdrop-filter: blur(3px);
}

.app-search-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 56rem);
  max-height: min(80vh, 52rem);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border-radius: 1.35rem;
  border: 1px solid rgba(19, 29, 45, 0.08);
  background: #ffffff;
  box-shadow: 0 1.5rem 4rem rgba(17, 24, 39, 0.18);
}

.app-search-modal__header,
.app-search-modal__footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.15rem;
  border-color: rgba(19, 29, 45, 0.08);
  background: linear-gradient(180deg, rgba(251, 250, 247, 0.96), rgba(247, 244, 238, 0.92));
}

.app-search-modal__header {
  border-bottom: 1px solid rgba(19, 29, 45, 0.08);
}

.app-search-modal__footer {
  border-top: 1px solid rgba(19, 29, 45, 0.08);
  justify-content: flex-end;
}

.app-search-modal__body {
  display: grid;
  gap: 1rem;
  min-height: 0;
  padding: 1rem 1.15rem;
}

.app-search-modal-status {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
}

.app-search-result-list {
  display: grid;
  gap: 0.85rem;
  overflow-y: auto;
  padding-right: 0.2rem;
}

body.app-search-modal-open {
  overflow: hidden;
}

.app-search-result {
  display: grid;
  gap: 0.75rem;
  padding: 1rem 1.05rem;
  border-radius: 1rem;
  border: 1px solid rgba(19, 29, 45, 0.09);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 248, 252, 0.96));
  color: inherit;
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.app-search-result:hover,
.app-search-result:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(47, 111, 159, 0.3);
  box-shadow: 0 1rem 2.4rem rgba(17, 24, 39, 0.1);
}

.app-search-result strong {
  font-size: 1rem;
  color: #162033;
}

.app-search-result p {
  margin: 0;
  color: #4f5a6b;
  line-height: 1.55;
}

.app-search-result-head {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: center;
}

.app-search-loading {
  display: inline-flex;
  gap: 0.65rem;
  align-items: center;
  color: #4f5a6b;
  font-size: 0.95rem;
}

.app-record--search-hit {
  border-color: rgba(47, 111, 159, 0.5) !important;
  box-shadow: 0 0 0 0.24rem rgba(47, 111, 159, 0.12), 0 1.2rem 2.6rem rgba(17, 24, 39, 0.08);
  animation: app-search-pulse 1.2s ease;
}

@keyframes app-search-pulse {
  0% { transform: translateY(0); }
  35% { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}

@media (max-width: 560px) {
  .app-search-form {
    grid-template-columns: 1fr;
    width: 100%;
  }
}

/* 2026 visual refresh built from the shared brand palette in color_scheme.md. */
body.site-shell {
  color: var(--sc-ink);
  background:
    radial-gradient(960px 560px at -6% -12%, rgba(31, 58, 95, 0.17), transparent 62%),
    radial-gradient(720px 440px at 100% 0%, rgba(47, 124, 133, 0.13), transparent 56%),
    radial-gradient(700px 420px at 55% 105%, rgba(201, 139, 95, 0.11), transparent 60%),
    linear-gradient(180deg, #f8fafc 0%, #f5f7fa 52%, #edf2f6 100%);
}

body.site-shell::before {
  background:
    linear-gradient(rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.24)),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 104px,
      rgba(31, 58, 95, 0.032) 104px,
      rgba(31, 58, 95, 0.032) 105px
    );
  opacity: 0.36;
}

body.app-shell {
  background: linear-gradient(180deg, #f7f9fb 0%, #eef2f6 100%);
}

body.site-shell a {
  color: var(--sc-link);
}

body.site-shell a:hover {
  color: var(--sc-link-hover);
}

.pp-kicker,
.pp-mini-label,
.eyebrow,
.footer-title {
  color: var(--sc-secondary);
}

.site-shell .btn,
.site-shell .copy-btn {
  border-color: var(--sc-line-strong);
  background: #e9eff5;
  color: #2d4561;
  box-shadow: var(--sc-shadow-soft);
}

.site-shell .btn:hover,
.site-shell .copy-btn:hover {
  background: #dce6f0;
  border-color: #94a7ba;
  color: var(--sc-accent-deep);
}

.site-shell .btn.primary {
  background: var(--sc-accent);
  border-color: var(--sc-accent);
  color: #fff;
}

.site-shell .btn.primary:hover {
  background: var(--sc-accent-hover);
  border-color: var(--sc-accent-hover);
  color: #fff;
}

.site-shell .btn.danger {
  background: var(--sc-danger);
  border-color: var(--sc-danger);
}

.site-shell .btn.danger:hover {
  background: #a64d5b;
  border-color: #a64d5b;
}

.site-shell .pill,
.site-shell .pp-pill {
  background: rgba(47, 124, 133, 0.1);
  border-color: rgba(47, 124, 133, 0.18);
  color: #1e5961;
}

.site-shell .pill.subtle,
.site-shell .pp-pill.subtle {
  background: var(--sc-paper-deep);
  border-color: rgba(184, 196, 209, 0.82);
  color: var(--sc-muted);
}

.site-shell .card,
.site-shell .settings-card,
.site-shell .panel,
.site-shell .verification-card,
.site-shell .legal-copy,
.site-shell .pricing-card,
.site-shell .auth-card,
.site-shell .process-card,
.site-shell .marketing-preview-card,
.site-shell .marketing-index-item {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(213, 222, 231, 0.92);
  box-shadow: var(--sc-shadow-soft) !important;
}

.site-shell input,
.site-shell select,
.site-shell textarea {
  border-color: var(--sc-line-strong);
  background: linear-gradient(180deg, rgba(250, 252, 255, 0.98), rgba(238, 245, 251, 0.96));
  color: var(--sc-ink);
}

.site-shell input::placeholder,
.site-shell textarea::placeholder {
  color: var(--sc-muted-soft);
}

.site-shell input:focus,
.site-shell select:focus,
.site-shell textarea:focus {
  border-color: var(--sc-teal);
  box-shadow: 0 0 0 3px var(--sc-focus-ring);
}

.site-shell .flash {
  border-color: rgba(79, 109, 138, 0.22);
  background: rgba(255, 255, 255, 0.94);
  color: var(--sc-ink-soft);
}

.site-shell .flash.success {
  border-color: #b8d9c8;
  background: #e8f4ee;
  color: #245640;
}

.site-shell .flash.error,
.site-shell .flash.warning,
.site-shell .flash.warn {
  border-color: #e7cfbc;
  background: #f8efe8;
  color: #7e5737;
}

.site-shell .output,
.site-shell .mono.output {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 247, 250, 0.96));
  border-color: rgba(184, 196, 209, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.site-shell .cta-banner {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(540px 260px at 92% 12%, rgba(201, 139, 95, 0.18), transparent 55%),
    radial-gradient(460px 220px at 0% 100%, rgba(47, 124, 133, 0.18), transparent 58%),
    linear-gradient(135deg, #18293d 0%, #1f3a5f 56%, #22364d 100%);
  box-shadow: var(--sc-shadow);
}

.site-shell .cta-banner .btn {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  box-shadow: none;
}

.site-shell .cta-banner .btn:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.24);
  color: #ffffff;
}

.site-shell .cta-banner .btn.primary {
  background: var(--sc-copper);
  border-color: var(--sc-copper);
}

.site-shell .cta-banner .btn.primary:hover {
  background: #b97d52;
  border-color: #b97d52;
}

.site-shell .site-footer {
  border-top-color: rgba(213, 222, 231, 0.9);
  background: linear-gradient(180deg, rgba(245, 247, 250, 0), rgba(229, 235, 241, 0.7));
}

.public-frame {
  width: min(calc(100% - 2rem), 1500px);
  min-height: calc(100vh - 1.5rem);
  margin: 0.75rem auto;
  border: 1px solid rgba(213, 222, 231, 0.82);
  border-radius: 0;
  overflow: clip;
  background: rgba(248, 250, 252, 0.78);
  box-shadow: 0 18px 46px rgba(24, 33, 43, 0.08);
}

.public-header__inner,
.public-main,
.public-footer__inner {
  width: min(calc(100% - 5rem), var(--sc-max));
}

.public-header {
  backdrop-filter: blur(16px);
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid rgba(213, 222, 231, 0.86);
  box-shadow: 0 14px 34px rgba(24, 33, 43, 0.05);
}

.public-header__inner {
  padding: 1.02rem 0;
}

.public-brand {
  color: var(--sc-accent-deep);
}

.public-nav {
  gap: 0.45rem;
}

.public-nav-link {
  padding: 0.42rem 0.84rem;
  border: 1px solid transparent;
  color: var(--sc-muted);
}

.public-nav-link:hover,
.public-nav-link.is-active {
  background: rgba(220, 230, 240, 0.76);
  border-color: rgba(184, 196, 209, 0.82);
  color: var(--sc-accent);
}

.public-main {
  padding-top: 1.8rem;
  padding-bottom: 3rem;
}

.public-footer__inner {
  gap: 1.4rem;
  padding: 2rem 0 2.3rem;
}

@media (max-width: 760px) {
  .public-frame {
    width: min(calc(100% - 1rem), 1500px);
    min-height: calc(100vh - 0.75rem);
    margin: 0.5rem auto;
    border-radius: 0;
  }

  .public-header__inner,
  .public-main,
  .public-footer__inner {
    width: min(calc(100% - 2rem), var(--sc-max));
  }
}

.marketing-shell {
  gap: 1.25rem;
}

.marketing-hero {
  gap: 1.25rem;
}

.marketing-hero-copy {
  gap: 1rem;
  padding: 1.75rem 0.2rem 1.15rem;
}

.marketing-hero-copy .pp-kicker {
  color: var(--sc-copper);
}

.marketing-hero-copy .hero-lead,
.marketing-hero-copy .muted {
  color: var(--sc-ink-soft) !important;
}

.marketing-preview-shell {
  position: relative;
  overflow: hidden;
  padding: 1.15rem;
  border-radius: 1.75rem;
  border: 1px solid rgba(79, 109, 138, 0.22);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(238, 242, 246, 0.96));
  box-shadow: var(--sc-shadow);
}

.marketing-preview-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(340px 160px at 100% 0%, rgba(47, 124, 133, 0.11), transparent 58%),
    radial-gradient(280px 140px at 0% 100%, rgba(31, 58, 95, 0.09), transparent 60%);
  pointer-events: none;
}

.marketing-preview-shell > * {
  position: relative;
  z-index: 1;
}

.marketing-preview-nav-item {
  background: rgba(79, 109, 138, 0.12);
  color: var(--sc-secondary);
}

.marketing-preview-nav-item.is-active {
  background: var(--sc-accent);
  color: #ffffff;
  box-shadow: 0 12px 24px rgba(31, 58, 95, 0.16);
}

.marketing-preview-bar {
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(213, 222, 231, 0.86);
}

.marketing-preview-bar strong,
.marketing-preview-card h3,
.pricing-header h3,
.process-card h3,
.auth-side h2 {
  color: var(--sc-accent-deep);
}

.marketing-preview-card,
.marketing-index-item,
.process-card,
.pricing-card,
.auth-card,
.verification-card {
  border: 1px solid rgba(184, 196, 209, 0.78);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 247, 250, 0.94));
}

.process-card,
.marketing-preview-card,
.pricing-card {
  position: relative;
}

.process-card::before,
.marketing-preview-card::before,
.pricing-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(47, 124, 133, 0.72), rgba(79, 109, 138, 0));
  pointer-events: none;
}

.pricing-card::before {
  display: none;
}

.process-card .bi,
.feature-icon {
  border: 1px solid rgba(47, 124, 133, 0.18);
  background: rgba(47, 124, 133, 0.1);
  color: var(--sc-teal);
}

.pricing-toggle {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(213, 222, 231, 0.92);
  box-shadow: var(--sc-shadow-soft);
}

.pricing-toggle-btn {
  color: var(--sc-muted);
}

.pricing-toggle-btn.is-active {
  background: var(--sc-accent);
  color: #ffffff;
}

.pricing-card.featured {
  border-color: rgba(201, 139, 95, 0.48);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 239, 232, 0.94));
  transform: translateY(-4px);
}

.pricing-tag {
  background: rgba(201, 139, 95, 0.16);
  color: #7e5737;
}

.auth-card {
  padding: 1.2rem;
}

.auth-side {
  border: 1px solid rgba(79, 109, 138, 0.28);
  background:
    radial-gradient(420px 220px at 100% 0%, rgba(201, 139, 95, 0.14), transparent 56%),
    radial-gradient(360px 220px at 0% 100%, rgba(47, 124, 133, 0.16), transparent 58%),
    linear-gradient(180deg, rgba(24, 41, 61, 0.99), rgba(31, 58, 95, 0.97));
  box-shadow: var(--sc-shadow);
}

.auth-side,
.auth-side h2,
.auth-side li {
  color: #ffffff;
}

.auth-side .pp-kicker {
  color: rgba(221, 229, 237, 0.78);
}

.auth-side .btn {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  box-shadow: none;
}

.auth-side .btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

body.app-shell .pp-kicker,
body.app-shell .pp-mini-label,
body.app-shell .eyebrow,
body.app-shell .footer-title {
  color: var(--sc-muted-soft);
}

.app-shell .btn,
.app-shell .copy-btn {
  box-shadow: none;
}

.app-shell .pp-panel,
.app-shell .pp-empty-state,
.app-shell .pp-selector-card,
.app-shell .app-text-surface,
.app-shell .app-code-frame,
.app-shell .settings-card,
.app-shell .panel,
.app-shell .status-panel {
  border: 1px solid rgba(213, 222, 231, 0.9);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(245, 247, 250, 0.95));
  box-shadow: var(--sc-shadow-soft) !important;
}

.pp-inline-link {
  color: var(--sc-link);
}

.pp-inline-link:hover {
  color: var(--sc-link-hover);
}

.app-icon-rail {
  border-right: 1px solid rgba(184, 196, 209, 0.9);
  background: linear-gradient(180deg, rgba(243, 246, 249, 0.98) 0%, rgba(230, 237, 245, 0.98) 100%);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.72);
}

.app-rail-brand {
  background: linear-gradient(135deg, var(--sc-teal) 0%, var(--sc-accent) 100%);
  box-shadow: 0 14px 28px rgba(24, 41, 61, 0.32);
}

.app-rail-link {
  border: 1px solid transparent;
  color: var(--sc-secondary);
}

.app-rail-link:hover {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(184, 196, 209, 0.9);
  color: var(--sc-accent);
}

.app-rail-link.is-active {
  background: rgba(220, 230, 240, 0.98);
  border-color: rgba(184, 196, 209, 0.92);
  color: var(--sc-accent);
  box-shadow: inset 3px 0 0 var(--sc-teal);
}

.app-sidepanel {
  background: rgba(243, 246, 249, 0.96);
  border-right: 1px solid rgba(213, 222, 231, 0.9);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.72);
}

.app-sidepanel__header strong,
.app-sidebar-context-header strong,
.app-card-title h2,
.app-card-title h3,
.app-shell .app-card-title h1,
.app-shell .app-page-title h1,
.app-shell .app-task-header .app-page-title h1,
.app-stage .app-card-title h2,
.app-stage .app-card-title h3,
.app-stage .app-page-title h1,
.app-stage .app-task-header .app-page-title h1,
.app-stage .app-stage-copy strong,
.app-record-copy strong,
.app-project-row-main strong,
.app-bucket-card-head strong,
.app-stat-chip strong,
.app-meta-item strong,
.app-callout-item strong,
.app-tier-card__copy h3,
.app-search-result strong {
  color: var(--sc-accent-deep);
}

.app-sidebar-context-shell {
  border-top: 1px solid rgba(213, 222, 231, 0.88);
}

.app-sidebar-context-shell > .app-sidebar-card {
  border: 1px solid rgba(184, 196, 209, 0.76);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(245, 247, 250, 0.95));
  box-shadow: var(--sc-shadow-soft);
}

.app-sidebar-link {
  background: rgba(255, 255, 255, 0.56);
  color: var(--sc-muted);
}

.app-sidebar-link:hover,
.app-sidebar-link.is-active {
  border-color: rgba(184, 196, 209, 0.86);
  background: #ffffff;
  color: var(--sc-accent);
  box-shadow: inset 3px 0 0 var(--sc-teal);
}

.app-record,
.app-project-row,
.app-defaults-row,
.app-meta-item,
.app-stat-chip,
.app-callout-item,
.app-tier-card,
.app-section-index__item,
.app-bucket-card,
.app-shell .note,
.app-shell .tray li,
.app-stage .app-record,
.app-stage .app-project-row,
.app-stage .app-meta-item,
.app-stage .app-defaults-row,
.app-stage .pp-selector-card,
.app-stage .pp-empty-state,
.app-stage .app-text-surface,
.app-stage .app-code-frame {
  border-color: rgba(213, 222, 231, 0.94);
  background: #ffffff;
}

.app-record:hover,
.pp-card-link:hover,
.app-project-row:hover,
.app-section-index__item:hover {
  border-color: rgba(79, 109, 138, 0.32);
  background: #fcfdff;
}

.app-stat-chip,
.app-meta-item,
.app-sidebar-context-shell .app-meta-item,
.app-sidebar-context-shell .app-defaults-row,
.app-sidebar-context-shell .app-bucket-card,
.app-sidebar-context-shell .app-callout-item,
.app-sidebar-context-shell .app-stat-chip,
.app-sidebar-context-shell .app-tier-card,
.app-sidebar-spec {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(213, 222, 231, 0.9);
}

.app-defaults-row.has-errors {
  border-color: #e8c7cd;
  background: #f8edef;
}

.app-shell input,
.app-shell select,
.app-shell textarea,
.app-sidebar-context-shell .app-defaults-control select,
.app-sidebar-context-shell .app-defaults-control input,
.app-sidebar-context-shell .app-defaults-control textarea,
.app-sidebar-context-shell input,
.app-sidebar-context-shell select,
.app-sidebar-context-shell textarea {
  border: 1px solid var(--sc-line-strong);
  background: linear-gradient(180deg, rgba(250, 252, 255, 0.99), rgba(234, 242, 248, 0.98));
  color: var(--sc-ink);
}

.app-shell input::placeholder,
.app-shell textarea::placeholder {
  color: var(--sc-muted-soft);
}

.app-shell .form-field input:focus,
.app-shell .form-field select:focus,
.app-shell .form-field textarea:focus,
.app-shell .app-defaults-control input:focus,
.app-shell .app-defaults-control select:focus,
.app-shell .app-defaults-control textarea:focus,
.app-shell input:focus,
.app-shell select:focus,
.app-shell textarea:focus {
  border-color: var(--sc-teal) !important;
  box-shadow: 0 0 0 3px var(--sc-focus-ring);
}

.app-note-editor-shell,
.app-stage .app-note-editor-shell {
  border-color: rgba(47, 124, 133, 0.24);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(231, 242, 243, 0.72));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.app-note-editor,
.app-note-quick-input,
.app-stage .app-note-editor,
.app-stage .app-note-quick-input {
  background: rgba(241, 248, 252, 0.92);
  color: var(--sc-ink);
}

.app-note-editor-shell:focus-within,
.app-stage .app-note-editor-shell:focus-within {
  border-color: rgba(47, 124, 133, 0.46);
  box-shadow: 0 0 0 4px rgba(203, 230, 233, 0.68);
}

.app-stage .app-note-quick-input::placeholder,
.app-stage .app-note-editor::placeholder {
  color: var(--sc-muted-soft);
}

.app-note-select {
  border-color: rgba(213, 222, 231, 0.94);
  background: var(--sc-paper);
}

.app-stage .app-note-save-button,
.app-stage .app-note-quick-submit {
  border-color: rgba(213, 222, 231, 0.92);
  background: #ffffff;
  color: var(--sc-accent-deep);
}

.app-stage .app-note-save-button:hover,
.app-stage .app-note-save-button:focus,
.app-stage .app-note-quick-submit:hover,
.app-stage .app-note-quick-submit:focus {
  border-color: rgba(184, 196, 209, 0.94);
  background: var(--sc-paper-deep);
  color: var(--sc-accent);
}

.app-compiled-output,
.app-stage .app-compiled-output,
.output,
.mono.output {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(245, 247, 250, 0.96));
  border-color: rgba(184, 196, 209, 0.84);
  box-shadow: inset 3px 0 0 rgba(47, 124, 133, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  color: var(--sc-ink);
}

.app-sidebar-context-shell .app-sidebar-output-body {
  border: 1px solid rgba(213, 222, 231, 0.84);
  border-radius: 0.82rem;
  background: #ffffff;
  color: var(--sc-ink);
}

.app-sidebar-context-shell .app-sidebar-output-body h1,
.app-sidebar-context-shell .app-sidebar-output-body h2,
.app-sidebar-context-shell .app-sidebar-output-body h3,
.app-sidebar-context-shell .app-sidebar-output-body h4 {
  color: var(--sc-secondary);
}

.app-bucket-card--active {
  border-color: rgba(47, 124, 133, 0.32);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(231, 242, 243, 0.92));
}

.app-bucket-card-icon {
  border-color: rgba(213, 222, 231, 0.94);
  background: #ffffff;
  color: var(--sc-secondary);
}

.app-stage {
  background: linear-gradient(180deg, rgba(247, 249, 251, 0.86), rgba(238, 242, 246, 0.8));
}

.app-stage-topbar {
  border-bottom: 1px solid rgba(213, 222, 231, 0.92);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 16px 30px rgba(24, 33, 43, 0.05);
}

.app-user-chip {
  border: 1px solid rgba(213, 222, 231, 0.92);
  background: #ffffff;
  color: var(--sc-ink-soft);
  box-shadow: none;
}

.app-orientation-modal .modal-content {
  border-color: rgba(213, 222, 231, 0.92);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(245, 247, 250, 0.95));
}

.app-orientation-step {
  border-color: rgba(213, 222, 231, 0.92);
  background: #ffffff;
}

.app-orientation-step__icon {
  border-color: rgba(47, 124, 133, 0.18);
  background: rgba(47, 124, 133, 0.1);
  color: var(--sc-teal);
}

.app-panel-help {
  color: rgba(113, 129, 150, 0.9);
}

.app-panel-help:hover,
.app-panel-help:focus-visible {
  color: var(--sc-secondary);
}

.app-help-popover {
  --bs-popover-border-color: rgba(213, 222, 231, 0.92);
  --bs-popover-header-bg: #f5f7fa;
  --bs-popover-box-shadow: 0 1rem 2.5rem rgba(24, 33, 43, 0.12);
}

.app-help-popover .popover-body {
  color: var(--sc-ink-soft);
}

.app-sidebar-spec-icon,
.app-sidebar-context-shell .app-bucket-card-stat,
.app-sidebar-context-shell .app-bucket-card-meta {
  color: var(--sc-secondary);
}

.app-search-modal__scrim {
  background: rgba(24, 41, 61, 0.36);
}

.app-search-modal__dialog {
  border: 1px solid rgba(213, 222, 231, 0.92);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(245, 247, 250, 0.97));
  box-shadow: var(--sc-shadow);
}

.app-search-result {
  border-color: rgba(213, 222, 231, 0.92);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(245, 247, 250, 0.96));
}

.app-search-result:hover,
.app-search-result:focus-visible {
  border-color: rgba(79, 109, 138, 0.34);
  box-shadow: 0 1rem 2.4rem rgba(24, 33, 43, 0.1);
}

.app-search-loading,
.app-search-result p,
.app-shell p,
.app-shell li,
.app-shell dd,
.app-shell dt,
.app-page-title p,
.app-card-title p,
.app-record-copy p,
.app-sidebar-note,
.output-label,
.app-shell .muted,
.app-shell .text-muted {
  color: var(--sc-muted-soft) !important;
}

.app-record--search-hit {
  border-color: rgba(47, 124, 133, 0.5) !important;
  box-shadow: 0 0 0 0.24rem rgba(47, 124, 133, 0.16), 0 1.2rem 2.6rem rgba(24, 33, 43, 0.08);
}

@media (max-width: 920px) {
  .app-icon-rail {
    border-bottom: 1px solid rgba(213, 222, 231, 0.92);
  }

  .app-sidepanel {
    border-bottom: 1px solid rgba(213, 222, 231, 0.92);
  }
}

@media (max-width: 1260px) {
  .app-frame {
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-areas:
      "rail rail"
      "stage side";
    min-height: 100vh;
  }

  .app-icon-rail {
    grid-area: rail;
    position: sticky;
    top: 0;
    z-index: 25;
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
    height: auto;
    padding: 0.75rem 1rem;
    border-right: 0;
    border-bottom: 1px solid rgba(213, 222, 231, 0.92);
  }

  .app-rail-brand {
    margin-right: auto;
  }

  .app-rail-links,
  .app-rail-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .app-rail-footer {
    margin-top: 0;
  }

  .app-sidepanel {
    grid-area: side;
    position: sticky;
    top: 4.35rem;
    height: calc(100vh - 4.35rem);
    border-right: 0;
    border-left: 1px solid rgba(213, 222, 231, 0.92);
  }

  .app-stage {
    grid-area: stage;
  }

  .app-stage-topbar {
    padding: 0.9rem 1rem;
  }

  .app-main {
    padding: 1rem 1.05rem 1.35rem;
  }

  .app-stage-stack {
    max-width: none;
  }

  .app-project-secondary-grid,
  .app-output-grid {
    grid-template-columns: 1fr;
  }

  .app-page-header,
  .app-task-header {
    align-items: flex-start;
  }

  .app-page-actions {
    justify-content: flex-start;
  }

  .app-note-quick-form,
  .app-stage .app-note-quick-form {
    max-width: none;
  }

  .app-stage .app-record-head--note {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .app-stage .app-note-inline-actions {
    display: inline-grid;
    grid-template-columns: repeat(5, minmax(0, 2rem));
    justify-content: flex-start;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    gap: 0.35rem;
    padding: 0.28rem;
    border: 1px solid rgba(213, 222, 231, 0.9);
    border-radius: 999px;
    background: rgba(245, 247, 250, 0.88);
  }

  .app-stage .app-note-control-button,
  .app-stage .app-note-save-button,
  .app-stage .app-note-delete-button {
    width: 2rem;
    min-width: 2rem;
    min-height: 2rem;
    padding: 0;
  }

  .app-stage .app-note-control-button.pp-iconized,
  .app-stage .app-note-save-button.pp-iconized,
  .app-stage .app-note-delete-button.pp-iconized {
    aspect-ratio: 1 / 1;
    width: 2rem;
    min-width: 2rem;
    min-height: 2rem;
    padding: 0;
  }

  .app-workspace-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 1040px) {
  .app-frame {
    grid-template-columns: 1fr;
    grid-template-areas:
      "rail"
      "stage"
      "side";
  }

  .app-icon-rail {
    position: sticky;
    top: 0;
  }

  .app-stage {
    min-width: 0;
  }

  .app-sidepanel {
    position: static;
    top: auto;
    height: auto;
    border-left: 0;
    border-top: 1px solid rgba(213, 222, 231, 0.92);
  }

  .app-sidebar-context-shell {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .app-sidebar-context-header {
    grid-column: 1 / -1;
  }

  .app-sidebar-context-shell > .app-sidebar-card {
    height: 100%;
  }

  .app-stage-topbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .app-stage-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .app-icon-rail {
    padding: 0.7rem 0.75rem;
  }

  .app-sidepanel {
    padding: 0.95rem 0.9rem 1rem;
  }

  .app-main {
    padding: 0.85rem;
  }

  .app-note-quick-form,
  .app-stage .app-note-quick-form,
  .app-project-row {
    grid-template-columns: 1fr;
  }

  .app-stage .app-note-quick-submit,
  .app-stage .app-note-quick-submit.pp-iconized {
    justify-self: start;
  }

  .app-stage .app-note-inline-actions {
    grid-template-columns: repeat(5, minmax(0, 1.92rem));
    gap: 0.3rem;
    padding: 0.24rem;
  }

  .app-stage .app-note-control-button,
  .app-stage .app-note-save-button,
  .app-stage .app-note-delete-button,
  .app-stage .app-note-control-button.pp-iconized,
  .app-stage .app-note-save-button.pp-iconized,
  .app-stage .app-note-delete-button.pp-iconized {
    width: 1.92rem;
    min-width: 1.92rem;
    min-height: 1.92rem;
  }

  .app-sidebar-context-shell {
    grid-template-columns: 1fr;
  }

  .app-sidebar-context-shell .app-meta-grid,
  .app-sidebar-context-shell .app-stat-strip {
    grid-template-columns: 1fr 1fr;
  }

  .app-page-header,
  .app-task-header,
  .app-page-headline {
    display: grid;
    width: 100%;
    gap: 0.6rem;
  }

  .app-page-actions,
  .app-stage-actions,
  .app-sidebar-project-actions {
    width: 100%;
    justify-content: flex-start;
    gap: 0.45rem;
  }

  .app-page-actions .btn,
  .app-stage-actions .btn,
  .app-sidebar-project-actions .btn,
  .app-user-chip {
    min-height: 1.95rem;
    padding: 0.36rem 0.62rem;
    font-size: 0.73rem;
    white-space: nowrap;
    flex: 0 0 auto;
  }

  .app-shell .btn.pp-iconized,
  .app-shell .copy-btn.pp-iconized {
    aspect-ratio: auto;
  }

  .app-stage-actions .btn.pp-iconized,
  .app-page-actions .btn.pp-iconized,
  .app-sidebar-project-actions .btn.pp-iconized,
  .app-sidebar-inline-action {
    min-width: 1.95rem;
    width: auto;
  }

  .app-sidebar-inline-action,
  .app-sidebar-project-actions .btn {
    min-height: 1.95rem;
    padding: 0.28rem 0.42rem;
  }

  .app-stage .app-note-control-button.pp-iconized,
  .app-stage .app-note-save-button.pp-iconized,
  .app-stage .app-note-delete-button.pp-iconized {
    aspect-ratio: 1 / 1;
  }
}

@media (max-width: 560px) {
  .app-sidebar-context-shell .app-meta-grid,
  .app-sidebar-context-shell .app-stat-strip {
    grid-template-columns: 1fr;
  }

  .app-stage-actions {
    gap: 0.45rem;
  }

  .app-user-chip {
    max-width: 100%;
  }

  .app-page-title-row {
    gap: 0.4rem;
  }

  .app-inline-meta {
    gap: 0.4rem;
  }

  .app-page-actions,
  .app-stage-actions {
    gap: 0.38rem;
  }

  .app-page-actions .btn,
  .app-stage-actions .btn,
  .app-sidebar-project-actions .btn,
  .app-user-chip {
    min-height: 1.85rem;
    padding: 0.3rem 0.54rem;
    font-size: 0.7rem;
  }
}

body.public-shell .marketing-shell--story,
body.public-shell .marketing-shell--pricing {
  gap: 1.45rem;
}

body.public-shell .marketing-hero--gallery,
body.public-shell .marketing-hero--pricing {
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr);
  gap: 1.45rem;
  align-items: center;
}

body.public-shell .marketing-support-line {
  max-width: 54ch;
  margin-bottom: 0;
}

body.public-shell .story-section__head,
body.public-shell .capture-section .pp-section-head {
  max-width: 44rem;
}

body.public-shell .public-footer__inner {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 1.4rem;
}

body.public-shell .public-footer__brand {
  max-width: 24rem;
}

body.public-shell .public-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  justify-content: flex-start;
  gap: 0.72rem 1rem;
  padding-top: 0.22rem;
}

body.public-shell .public-footer__links a {
  color: var(--sc-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body.public-shell .public-footer__links a:hover {
  color: var(--sc-accent);
  text-decoration: none;
}

body.public-shell .public-footer__meta {
  grid-column: 1 / -1;
}

body.public-shell .security-section {
  margin-top: 0.15rem;
}

body.public-shell .security-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: end;
  padding: 1.15rem 1.2rem;
  border-radius: 1.45rem;
  border: 1px solid rgba(184, 196, 209, 0.78);
  background:
    radial-gradient(260px 140px at 100% 0%, rgba(47, 124, 133, 0.12), transparent 58%),
    radial-gradient(240px 140px at 0% 100%, rgba(201, 139, 95, 0.12), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(241, 245, 249, 0.96));
  box-shadow: var(--sc-shadow-soft);
}

body.public-shell .security-panel__copy {
  display: grid;
  gap: 0.5rem;
  max-width: 56rem;
}

body.public-shell .security-panel__copy h2 {
  margin: 0;
  color: var(--sc-accent-deep);
}

body.public-shell .security-panel__copy p {
  margin: 0;
}

body.public-shell .security-panel__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

body.public-shell .story-grid,
body.public-shell .capture-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.15rem;
}

body.public-shell .story-card,
body.public-shell .capture-card {
  position: relative;
  display: grid;
  gap: 1rem;
  padding: 1.2rem;
  border-radius: 1.55rem;
  border: 1px solid rgba(184, 196, 209, 0.78);
  background:
    radial-gradient(280px 180px at 100% 0%, rgba(47, 124, 133, 0.08), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(241, 245, 249, 0.96));
  box-shadow: var(--sc-shadow-soft);
  overflow: hidden;
}

body.public-shell .story-card::before,
body.public-shell .capture-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, rgba(201, 139, 95, 0.78), rgba(47, 124, 133, 0.08));
}

body.public-shell .story-card::after,
body.public-shell .capture-card::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 1.2rem;
  pointer-events: none;
}

body.public-shell .story-card__copy,
body.public-shell .capture-card__copy,
body.public-shell .shot-shell__header,
body.public-shell .shot-chip-row,
body.public-shell .plan-proof-strip {
  position: relative;
  z-index: 1;
}

body.public-shell .story-card__copy,
body.public-shell .capture-card__copy {
  display: grid;
  gap: 0.56rem;
  align-content: start;
}

body.public-shell .story-card__copy h3,
body.public-shell .capture-card__copy h3 {
  margin: 0;
  color: var(--sc-accent-deep);
}

body.public-shell .story-card__copy p,
body.public-shell .capture-card__copy p {
  margin: 0;
}

body.public-shell .story-card__copy .pp-mini-label,
body.public-shell .capture-card__copy .pp-mini-label {
  color: var(--sc-secondary);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body.public-shell .story-card--phone {
  grid-column: span 5;
  grid-template-columns: minmax(0, 0.92fr) minmax(250px, 0.75fr);
  align-items: end;
}

body.public-shell .story-card--social {
  grid-column: span 7;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: stretch;
}

body.public-shell .story-card--wide {
  grid-column: span 7;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
}

body.public-shell .story-card--memory {
  grid-column: span 5;
}

body.public-shell .capture-card--wide {
  grid-column: span 5;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  align-items: center;
}

body.public-shell .capture-card--phone {
  grid-column: span 4;
}

body.public-shell .capture-card--utility,
body.public-shell .capture-card--watch {
  grid-column: span 3;
}

body.public-shell .capture-card--social-entry {
  grid-column: span 8;
  grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
  align-items: stretch;
}

body.public-shell .shot-shell {
  position: relative;
  display: grid;
  gap: 0.95rem;
  min-height: 100%;
  padding: 1.18rem;
  border-radius: 1.8rem;
  border: 1px solid rgba(184, 196, 209, 0.78);
  background:
    radial-gradient(380px 180px at 100% 0%, rgba(47, 124, 133, 0.14), transparent 58%),
    radial-gradient(280px 140px at 0% 100%, rgba(201, 139, 95, 0.12), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(240, 244, 248, 0.96));
  box-shadow: var(--sc-shadow);
  overflow: hidden;
}

body.public-shell .shot-shell::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 1.45rem;
  pointer-events: none;
}

body.public-shell .shot-shell__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
}

body.public-shell .shot-chip-row,
body.public-shell .plan-proof-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

body.public-shell .shot-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.68rem;
  border-radius: 999px;
  border: 1px solid rgba(79, 109, 138, 0.18);
  background: rgba(255, 255, 255, 0.72);
  color: var(--sc-accent-deep);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(24, 33, 43, 0.06);
}

body.public-shell .shot-frame {
  position: relative;
  margin: 0;
  padding: 0.88rem;
  border-radius: 1.35rem;
  border: 1px solid rgba(79, 109, 138, 0.18);
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(235, 241, 247, 0.96));
  box-shadow: 0 18px 34px rgba(24, 33, 43, 0.08);
}

body.public-shell .shot-frame::before {
  content: "";
  position: absolute;
  inset: -14px 24px 24px -14px;
  border: 1px solid rgba(201, 139, 95, 0.34);
  border-radius: 1.5rem;
  pointer-events: none;
}

body.public-shell .shot-frame::after {
  content: "";
  position: absolute;
  inset: 16px -12px auto auto;
  width: calc(100% - 44px);
  height: calc(100% - 44px);
  border: 1px solid rgba(47, 124, 133, 0.18);
  border-radius: 1.15rem;
  pointer-events: none;
}

body.public-shell .shot-frame img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.95rem;
  border: 1px solid rgba(79, 109, 138, 0.12);
  background: #ffffff;
  box-shadow: 0 12px 24px rgba(24, 33, 43, 0.08);
}

body.public-shell .shot-frame--phone,
body.public-shell .shot-frame--device,
body.public-shell .shot-frame--watch {
  max-width: 330px;
  justify-self: center;
}

body.public-shell .shot-frame--watch {
  max-width: 260px;
}

body.public-shell .abstract-frame {
  position: relative;
  min-height: 250px;
  border-radius: 1.3rem;
  border: 1px solid rgba(79, 109, 138, 0.18);
  background:
    radial-gradient(280px 180px at 12% 0%, rgba(201, 139, 95, 0.16), transparent 56%),
    radial-gradient(320px 200px at 100% 100%, rgba(47, 124, 133, 0.18), transparent 60%),
    linear-gradient(180deg, rgba(232, 238, 245, 0.88), rgba(244, 247, 250, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  overflow: hidden;
}

body.public-shell .abstract-frame::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 1.05rem;
  pointer-events: none;
}

body.public-shell .abstract-frame__surface {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.72rem;
  height: 100%;
  padding: 1rem;
}

body.public-shell .abstract-frame__surface > .bi {
  font-size: 1.15rem;
  color: var(--sc-accent);
}

body.public-shell .abstract-frame__surface strong {
  color: var(--sc-accent-deep);
  font-size: 1rem;
}

body.public-shell .abstract-frame__surface p {
  margin: 0;
}

body.public-shell .abstract-chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.28rem 0.58rem;
  border-radius: 999px;
  border: 1px solid rgba(79, 109, 138, 0.14);
  background: rgba(255, 255, 255, 0.78);
  color: var(--sc-secondary);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
}

body.public-shell .abstract-thread {
  display: grid;
  gap: 0.6rem;
  margin-top: auto;
}

body.public-shell .abstract-thread__row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.72rem 0.8rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(79, 109, 138, 0.16);
  background: rgba(255, 255, 255, 0.78);
  color: var(--sc-accent-deep);
  font-size: 0.82rem;
  font-weight: 700;
  box-shadow: 0 10px 20px rgba(24, 33, 43, 0.05);
}

body.public-shell .abstract-thread__row .bi {
  color: var(--sc-teal);
  font-size: 0.92rem;
}

body.public-shell .abstract-frame--browser .abstract-frame__surface,
body.public-shell .abstract-frame--social .abstract-frame__surface {
  align-content: start;
}

body.public-shell .abstract-frame--browser {
  min-height: 100%;
}

body.public-shell .plan-proof-strip {
  justify-content: flex-start;
}

@media (max-width: 1180px) {
  body.public-shell .marketing-hero--gallery,
  body.public-shell .marketing-hero--pricing,
  body.public-shell .story-card--phone,
  body.public-shell .story-card--social,
  body.public-shell .story-card--wide,
  body.public-shell .capture-card--wide,
  body.public-shell .capture-card--social-entry {
    grid-template-columns: 1fr;
  }

  body.public-shell .public-footer__inner {
    grid-template-columns: 1fr;
  }

  body.public-shell .security-panel {
    grid-template-columns: 1fr;
    align-items: start;
  }

  body.public-shell .security-panel__actions {
    justify-content: flex-start;
  }

  body.public-shell .story-card--phone,
  body.public-shell .story-card--social,
  body.public-shell .story-card--wide,
  body.public-shell .story-card--memory,
  body.public-shell .capture-card--wide,
  body.public-shell .capture-card--phone,
  body.public-shell .capture-card--utility,
  body.public-shell .capture-card--watch,
  body.public-shell .capture-card--social-entry {
    grid-column: span 12;
  }
}

@media (max-width: 920px) {
  body.public-shell .story-grid,
  body.public-shell .capture-grid {
    grid-template-columns: 1fr;
  }

  body.public-shell .story-card,
  body.public-shell .capture-card {
    grid-column: auto;
    padding: 1rem;
  }

  body.public-shell .story-card::after,
  body.public-shell .capture-card::after {
    inset: 12px;
  }

  body.public-shell .shot-shell {
    padding: 1rem;
    border-radius: 1.45rem;
  }

  body.public-shell .shot-frame {
    padding: 0.72rem;
  }
}

@media (max-width: 640px) {
  body.public-shell .shot-shell__header {
    align-items: flex-start;
  }

  body.public-shell .shot-chip-row,
  body.public-shell .plan-proof-strip,
  body.public-shell .public-footer__links {
    gap: 0.45rem;
  }

  body.public-shell .shot-chip,
  body.public-shell .public-footer__links a {
    font-size: 0.66rem;
  }

  body.public-shell .story-card__copy h3,
  body.public-shell .capture-card__copy h3 {
    font-size: 1.1rem;
  }

  body.public-shell .abstract-thread__row {
    font-size: 0.78rem;
  }
}