:root {
  color-scheme: light;
  --sp-ink: #18252b;
  --sp-ink-soft: #344247;
  --sp-muted: #687578;
  --sp-paper: #f3f1e9;
  --sp-surface: #fffefa;
  --sp-surface-soft: #f7f6f0;
  --sp-line: #d9ded8;
  --sp-line-strong: #c4ccc5;
  --sp-blue: #3656d8;
  --sp-blue-hover: #2947c0;
  --sp-blue-soft: #e9edff;
  --sp-lime: #d9f17f;
  --sp-orange: #f28a5c;
  --sp-success: #536c28;
  --sp-danger: #9b3927;
  --sp-nav: #17252c;
  --sp-radius-sm: 3px;
  --sp-radius: 5px;
  --sp-radius-lg: 7px;
  --sp-shadow-sm: 0 1px 2px rgb(24 37 43 / 5%);
  --ink: var(--sp-ink);
  --muted: var(--sp-muted);
  --paper: var(--sp-paper);
  --white: var(--sp-surface);
  --surface: var(--sp-surface);
  --line: var(--sp-line);
  --blue: var(--sp-blue);
  --lime: var(--sp-lime);
  --orange: var(--sp-orange);
  --nav: var(--sp-nav);
  --sp-bg: var(--sp-paper);
  --sp-panel: var(--sp-surface);
  --sp-panel-soft: var(--sp-surface-soft);
  --sp-text: var(--sp-ink);
  --sp-text-soft: var(--sp-ink-soft);
  --sp-border: var(--sp-line);
  --sp-border-strong: var(--sp-line-strong);
  --sp-accent: var(--sp-blue);
  --sp-accent-hover: var(--sp-blue-hover);
  --sp-accent-soft: var(--sp-blue-soft);
  --sp-success-soft: #edf2df;
  --sp-radius: 5px;
  --sp-radius-lg: 7px;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; background: var(--sp-paper); }
body {
  min-height: 100vh;
  margin: 0;
  background: var(--sp-paper);
  color: var(--sp-ink);
  font: 14px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { color: var(--sp-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--sp-blue) 35%, transparent); outline-offset: 2px; }

.button, .primary-button, .primary {
  border: 1px solid transparent;
  border-radius: var(--sp-radius-sm);
  background: var(--sp-blue);
  color: white;
  font-weight: 700;
  text-decoration: none;
}
.button:hover, .primary-button:hover, .primary:hover { background: var(--sp-blue-hover); color: white; text-decoration: none; }
.button.secondary { border-color: var(--sp-line-strong); background: var(--sp-surface); color: var(--sp-ink); }
.card, .sp-project-card, .project-panel, .lower-panel, .stat { border-color: var(--sp-line); background-color: var(--sp-surface); box-shadow: var(--sp-shadow-sm); }
input, select, textarea { border-color: var(--sp-line-strong); border-radius: var(--sp-radius-sm); color: var(--sp-ink); }
input:focus, select:focus, textarea:focus { border-color: var(--sp-blue); box-shadow: 0 0 0 3px rgb(54 86 216 / 12%); outline: 0; }
table th { background: var(--sp-surface-soft); color: var(--sp-muted); }
table th, table td { border-color: var(--sp-line); }
tbody tr:hover { background: var(--sp-surface-soft); }
.pill { border-color: var(--sp-line); background: #edf2df; color: var(--sp-success); }
.error, .message.error { border-color: #e9b9aa; background: #fbede8; color: var(--sp-danger); }
::selection { background: var(--sp-lime); color: var(--sp-ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* The local studio and account workspace share the same editorial language. */
body.sp-app header {
  height: 60px;
  background: var(--sp-nav);
  color: #f4f3eb;
  border: 0;
  box-shadow: 0 1px 0 rgb(255 255 255 / 7%);
}
body.sp-app header a, body.sp-app header a:hover { color: #f4f3eb; }
body.sp-app .topbar { min-height: 60px; }
body.sp-app .brand::before {
  border-radius: 4px;
  background: var(--sp-lime);
  color: var(--sp-nav);
  box-shadow: none;
}
body.sp-app .tagline { border-color: #435158; background: #26363d; color: #bdc7c2; }
body.sp-app main { max-width: 1480px; }
body.sp-app .card { border-radius: var(--sp-radius); }
body.sp-app .sp-dashboard-eyebrow { border-radius: 2px; background: #e7eadb; color: var(--sp-ink-soft); }
body.sp-app .sp-dashboard-description,
body.sp-app .sp-project-meta,
body.sp-app .sp-project-empty-search,
body.sp-app .sp-dashboard-empty p { color: var(--sp-muted); }
body.sp-app .sp-project-search { border-color: var(--sp-line-strong); border-radius: var(--sp-radius-sm); background: var(--sp-surface); color: var(--sp-ink); }
body.sp-app .sp-project-card { border-radius: var(--sp-radius); }
body.sp-app .sp-project-card-title,
body.sp-app .sp-project-id code,
body.sp-app .sp-project-meta strong { color: var(--sp-ink); }
body.sp-app .sp-project-ready { border-radius: 2px; background: #edf2df; color: var(--sp-success); }
body.sp-app .sp-project-ready::before { background: #95ad3f; }
body.sp-app .sp-project-id { border-radius: 2px; background: var(--sp-surface-soft); }
body.sp-app .sp-project-lock { color: var(--sp-success); }
body.sp-app .sp-project-lock::before { border-radius: 2px; background: #edf2df; }
body.sp-app .sp-project-empty-search { border-color: var(--sp-line-strong); border-radius: var(--sp-radius); background: var(--sp-surface-soft); }
body.sp-app .sp-dashboard-empty-icon { border-radius: 4px; background: #e7eadb; }
body.sp-app .editor-shell .structure-panel,
body.sp-app .editor-shell .panel,
body.sp-app .editor-shell .toolbar,
body.sp-app .editor-shell .sidebar { background-color: var(--sp-paper); border-color: var(--sp-line); }
body.sp-app .editor-shell .panel-heading,
body.sp-app .editor-shell .outline-item { color: var(--sp-ink-soft); }
body.sp-app .editor-shell .outline-item:hover,
body.sp-app .editor-shell button:hover { background-color: #e7eadb; color: var(--sp-ink); }


/* Main studio screens keep the palette; imported preview documents do not. */
body.sp-app .sp-project-eyebrow { border-radius: 2px; background: #edf2df; color: var(--sp-success); }
body.sp-app .sp-project-eyebrow::before { background: #95ad3f; }
body.sp-app .sp-stat { border-color: var(--sp-line); border-radius: var(--sp-radius); background: var(--sp-surface); }
body.sp-app .sp-stat-label, body.sp-app .sp-project-description,
body.sp-app .sp-pages-heading p, body.sp-app .sp-page-search-count { color: var(--sp-muted); }
body.sp-app .sp-stat-value { color: var(--sp-ink); }
body.sp-app .sp-stat-protected { color: var(--sp-success); }
body.sp-app .sp-pages-table th { background: var(--sp-surface-soft); }
body.sp-app .sp-pages-table td, body.sp-app .sp-pages-table th { border-color: var(--sp-line); }
body.sp-app .sp-pages-table tbody tr:hover { background: var(--sp-surface-soft); }

/* Editor chrome is in scope; the site rendered in its iframe is not. */
body.sp-app .editor-shell { background: var(--sp-paper) !important; }
body.sp-app .editor-shell .structure-panel,
body.sp-app .editor-shell .content-panel,
body.sp-app .editor-shell .preview-panel,
body.sp-app .editor-shell .inspector-panel { background-color: var(--sp-paper) !important; border-color: var(--sp-line) !important; }
body.sp-app .editor-shell .editor-toolbar,
body.sp-app .editor-shell .preview-toolbar,
body.sp-app .editor-shell .inspector-header { background-color: var(--sp-surface) !important; border-color: var(--sp-line) !important; }
body.sp-app .editor-shell .panel-heading,
body.sp-app .editor-shell .outline-item,
body.sp-app .editor-shell .sp-canvas-title,
body.sp-app .editor-shell .sp-outline-toggle { color: var(--sp-ink-soft) !important; }
body.sp-app .editor-shell .outline-item:hover,
body.sp-app .editor-shell .sp-outline-toggle:hover { background: #e7eadb !important; color: var(--sp-ink) !important; }
body.sp-app .editor-shell .focus-editor-button.active { background: var(--sp-nav); border-color: var(--sp-nav); }
body.sp-app .staticframelab-safety-panel { border-color: var(--sp-line); border-radius: var(--sp-radius); background: var(--sp-surface); }
body.sp-app .staticframelab-safety-badge.pass { border-color: var(--sp-line); background: #edf2df; }
body.sp-app .staticframelab-safety-badge.warning { border-color: #e7d49a; background: #fbf4de; }
body.sp-app .staticframelab-safety-badge.fail,
body.sp-app .staticframelab-safety-badge.error { border-color: #e9b9aa; background: #fbede8; }
body.sp-app .staticframelab-safety-badge.checking { border-color: #b9c5ef; background: var(--sp-blue-soft); }

/* The simple content-entry front door uses the same canvas and ink. */
body.sp-public .topbar { background: var(--sp-nav); border-color: var(--sp-nav); color: #f4f3eb; }
body.sp-public .brand { color: #f4f3eb; }
body.sp-public .subtitle { color: #bdc7c2; }
body.sp-public .version { border: 1px solid #435158; border-radius: 3px; background: #26363d; color: #bdc7c2; }
body.sp-public .editor-panel,
body.sp-public .status-panel { border-color: var(--sp-line); border-radius: var(--sp-radius); background: var(--sp-surface); }
body.sp-public h1, body.sp-public h2, body.sp-public h3 { color: var(--sp-ink); }
body.sp-public .subtitle, body.sp-public .panel-header p,
body.sp-public .status-heading p { color: var(--sp-muted); }
body.sp-public .primary-button { border-radius: 3px; background: var(--sp-blue); }
body.sp-public .primary-button:hover { background: var(--sp-blue-hover); }
body.sp-public .secondary-button { border-color: var(--sp-line-strong); border-radius: 3px; background: var(--sp-surface); color: var(--sp-ink); }

body.sp-app .sp-import-step { border-radius: 2px; background: #e7eadb; color: var(--sp-ink-soft); }
body.sp-app .sp-import-header p, body.sp-app .sp-import-help { color: var(--sp-muted); }
body.sp-app .sp-import-field label, body.sp-app .sp-import-name { color: var(--sp-ink-soft); }
body.sp-app .sp-import-name:focus,
body.sp-app .sp-import-dropzone:hover { border-color: var(--sp-blue); }
body.sp-app .sp-import-plan-item { border-color: var(--sp-line); color: var(--sp-ink-soft); }
body.sp-app .sp-import-protection { border-color: var(--sp-line); background: #edf2df; }


/* Consistent application frame: navigation rail, context bar, focused work area. */
.sp-shell { min-height: 100vh; display: grid; grid-template-columns: 238px minmax(0, 1fr); }
.sp-sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 22px 15px 17px; background: var(--sp-nav); color: #f4f3eb; }
.sp-brand { display: flex; align-items: center; gap: 10px; padding: 0 9px 25px; color: #f4f3eb; font-size: 17px; font-weight: 760; letter-spacing: -.035em; }
.sp-brand:hover { color: white; text-decoration: none; }
.sp-brand-mark { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 4px; background: var(--sp-lime); color: var(--sp-nav); }
.sp-brand-mark svg { width: 19px; height: 19px; }
.sp-sidebar-context { display: flex; align-items: center; gap: 9px; margin: 0 3px 25px; padding: 10px; border: 1px solid #435158; border-radius: 4px; }
.sp-context-mark { width: 27px; height: 27px; display: grid; place-items: center; background: #35444a; color: var(--sp-lime); font: 700 11px ui-monospace, monospace; }
.sp-sidebar-context strong, .sp-sidebar-context small, .sp-sidebar-foot strong, .sp-sidebar-foot small { display: block; }
.sp-sidebar-context strong, .sp-sidebar-foot strong { font-size: 11px; }
.sp-sidebar-context small, .sp-sidebar-foot small { color: #aab5b2; font-size: 10px; }
.sp-nav-label { padding: 0 11px 8px; color: #8f9c9c; font: 600 9px ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; }
.sp-nav { display: grid; gap: 4px; }
.sp-nav a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 3px; color: #b7c1bd; font-size: 12px; }
.sp-nav a > span { width: 15px; color: #98a6a5; font-size: 15px; text-align: center; }
.sp-nav a:hover, .sp-nav a.active { background: #2a3940; color: white; text-decoration: none; }
.sp-nav a.active::before { width: 3px; height: 16px; margin-left: -12px; margin-right: 8px; background: var(--sp-lime); content: ""; }
.sp-nav a.active > span { color: var(--sp-lime); }
.sp-sidebar-note { margin-top: auto; margin-bottom: 17px; padding: 14px 12px; border: 1px solid #39474d; background: #202f36; }
.sp-note-mark { width: 19px; height: 19px; display: grid; place-items: center; margin-bottom: 10px; background: #35444a; color: var(--sp-lime); font-size: 11px; }
.sp-sidebar-note strong { font-size: 11px; }
.sp-sidebar-note p { margin: 4px 0 0; color: #aab5b2; font-size: 10px; line-height: 1.5; }
.sp-sidebar-foot { display: flex; align-items: center; gap: 9px; padding: 15px 5px 0; border-top: 1px solid #39474d; }
.sp-foot-mark { width: 29px; height: 29px; display: grid; place-items: center; background: var(--sp-lime); color: var(--sp-nav); font-weight: 800; }
.sp-sidebar-foot > span:nth-child(2) { min-width: 0; flex: 1; }
.sp-sidebar-foot a { color: #aab5b2; }
.sp-sidebar-foot a:hover { color: white; text-decoration: none; }
.sp-app-pane { min-width: 0; }
body.sp-app header.sp-topbar { position: sticky; top: 0; z-index: 900; display: flex; align-items: center; justify-content: space-between; gap: 15px; height: 60px; min-height: 60px; padding: 0 clamp(18px, 3vw, 34px); background: var(--sp-surface); color: var(--sp-ink); border-bottom: 1px solid var(--sp-line); box-shadow: none; }
body.sp-app header.sp-topbar a { color: var(--sp-ink); }
.sp-breadcrumb { display: flex; align-items: center; gap: 9px; color: var(--sp-muted); font: 600 9px ui-monospace, monospace; letter-spacing: .13em; }
.sp-breadcrumb span { color: var(--sp-ink); }
.sp-breadcrumb i { color: #a3adaa; font-style: normal; }
.sp-topbar-right { display: flex; align-items: center; gap: 20px; }
.sp-live-indicator { display: inline-flex; align-items: center; gap: 7px; color: var(--sp-muted); font-size: 10px; }
.sp-live-indicator i { width: 6px; height: 6px; border-radius: 50%; background: #95ad3f; }
.sp-topbar-action { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--sp-line); border-radius: 3px; font-size: 11px; font-weight: 700; }
.sp-topbar-action:hover { background: var(--sp-surface-soft); text-decoration: none; }
.sp-topbar-action b { color: var(--sp-blue); font-size: 15px; }
body.sp-app-editor .sp-sidebar { display: none; }
body.sp-app-editor .sp-shell { display: block; }
body.sp-app-editor .sp-topbar-right { display: none; }
@media (max-width: 760px) {
  .sp-shell { grid-template-columns: 1fr; }
  .sp-sidebar { position: static; width: 100%; height: auto; padding: 12px 16px; }
  .sp-brand { padding: 0 0 11px; }
  .sp-sidebar-context, .sp-nav-label, .sp-sidebar-note, .sp-sidebar-foot { display: none; }
  .sp-nav { display: flex; gap: 4px; overflow-x: auto; }
  .sp-nav a { flex: 0 0 auto; padding: 8px 10px; }
  .sp-nav a.active::before { display: none; }
  body.sp-app header.sp-topbar { position: static; height: 48px; min-height: 48px; padding: 0 16px; }
  .sp-live-indicator { display: none; }
}
@media (max-width: 420px) {
  .sp-breadcrumb { font-size: 8px; }
  .sp-topbar-action { padding: 6px 8px; font-size: 10px; }
  body.sp-app main { padding-right: 14px; padding-left: 14px; }
}

/* Public marketing/legal pages share the product palette without dashboard chrome. */
.sp-public-shell { display: block; min-height: 100vh; }
body.sp-public header.sp-public-topbar { position: sticky; top: 0; z-index: 900; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; height: auto; padding: 10px clamp(18px, 5vw, 64px); background: var(--sp-nav); color: #f4f3eb; border: 0; box-shadow: 0 1px 0 rgb(255 255 255 / 7%); }
body.sp-public header.sp-public-topbar a { color: #f4f3eb; }
.sp-public-topbar .sp-brand { flex: 0 0 auto; padding: 0; }
.sp-public-brand-name { display: grid; gap: 1px; font-size: 14px; line-height: 1.2; }
.sp-public-brand-name small { color: #bdc7c2; font-size: 10px; font-weight: 550; letter-spacing: .06em; }
.sp-public-nav, .sp-public-actions { display: flex; align-items: center; gap: clamp(12px, 2vw, 24px); }
.sp-public-nav a, .sp-public-signin { color: #d9e0dc; font-size: 12px; font-weight: 650; }
.sp-public-nav a:hover, .sp-public-signin:hover { color: white; }
.sp-public-actions { gap: 14px; }
.sp-public-actions .sp-language-switch { border-color: #435158; color: #f4f3eb; }
.sp-public-actions .button { min-height: 36px; padding: 9px 12px; border-radius: 3px; background: var(--sp-lime); color: var(--sp-nav); }
.sp-public-actions .button:hover { background: #e5f7a5; color: var(--sp-nav); }
body.sp-public main { width: min(100% - 32px, 1160px); max-width: 1160px; margin: clamp(30px, 5vw, 64px) auto; padding: 0 0 24px; }
body.sp-public .sp-public-footer { display: flex; align-items: center; justify-content: space-between; gap: 22px; max-width: 1160px; margin: 0 auto; padding: 22px 0 30px; border-top: 1px solid var(--sp-line); color: var(--sp-muted); font-size: 11px; }
body.sp-public .sp-public-footer nav { display: flex; flex-wrap: wrap; gap: 10px 18px; }
body.sp-public .sp-public-footer a { color: var(--sp-ink-soft); }
@media (max-width: 760px) {
  body.sp-public header.sp-public-topbar { position: static; flex-wrap: wrap; gap: 10px 16px; padding: 12px 16px; }
  .sp-public-nav { width: 100%; flex-wrap: wrap; gap: 8px 16px; padding: 5px 0 2px; }
  .sp-public-actions { gap: 10px; margin-left: auto; }
  body.sp-public .sp-public-footer { padding: 22px 16px 30px; }
}
@media (max-width: 560px) {
  .sp-public-actions { width: 100%; justify-content: space-between; margin-left: 0; }
  .sp-public-brand-name { font-size: 13px; }
}
.sp-brand-mark img { display: block; width: 19px; height: 19px; }

.sp-skip-link { position: fixed; z-index: 1100; top: -100px; left: 16px; padding: 10px 14px; border: 2px solid var(--sp-nav); background: var(--sp-lime); color: var(--sp-nav); font-weight: 750; }
.sp-skip-link:focus { top: 12px; color: var(--sp-nav); }
body.sp-public header.sp-public-topbar .sp-public-actions a.sp-public-cta,
body.sp-public header.sp-public-topbar .sp-public-actions a.sp-public-cta:hover { color: var(--sp-nav); }