/* Shared tool-page shell. Reuse this file for Generator, Animator, and later tools. */
:root {
  --ink: var(--ssm-color-ink);
  --ink-2: var(--ssm-color-ink-2);
  --paper: var(--ssm-color-paper);
  --wash: var(--ssm-color-wash);
  --canvas: var(--ssm-color-canvas);
  --line: var(--ssm-color-line);
  --line-strong: var(--ssm-color-line-strong);
  --muted: var(--ssm-color-muted);
  --muted-2: var(--ssm-color-muted-2);
  --accent: var(--ssm-color-accent);
  --accent-strong: var(--ssm-color-accent-strong);
  --accent-soft: var(--ssm-color-accent-soft);
  --action: var(--ssm-color-action);
  --action-hover: var(--ssm-color-action-hover);
  --info: var(--ssm-color-info);
  --info-soft: var(--ssm-color-info-soft);
  --warning: var(--ssm-color-warning);
  --danger: var(--ssm-color-danger);
  --danger-soft: var(--ssm-color-danger-soft);
  --focus: var(--ssm-focus-color);
  --display: var(--ssm-font-display);
  --body: var(--ssm-font-body);
  --ui: var(--ssm-font-ui);
  --mono: var(--ssm-font-mono);
  --radius-xs: var(--ssm-radius-xs);
  --radius-sm: var(--ssm-radius-sm);
  --radius-md: var(--ssm-radius-md);
  --sidebar-width: 244px;
  --checker: var(--ssm-checker);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow: hidden; color: var(--ink); background: var(--paper); font: 15px/1.55 var(--body); letter-spacing: 0; }
button, input, textarea, select { font: inherit; letter-spacing: 0; }
button, label[for] { cursor: pointer; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, p, figure { margin-top: 0; }
h1, h2, h3 { font-family: var(--display); letter-spacing: 0; }
h1 { margin-bottom: 14px; font-size: 42px; line-height: 1.08; font-weight: 760; }
h2 { margin-bottom: 8px; font-size: 25px; line-height: 1.18; font-weight: 740; }
h3 { margin-bottom: 8px; font-size: 17px; line-height: 1.28; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
[hidden] { display: none !important; }

.app-shell { display: grid; width: 100%; height: 100dvh; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); overflow: hidden; }
.sidebar-resize-ready .app-shell { transition: grid-template-columns var(--ssm-duration-normal) ease; }
tool-sidebar { display: contents; }
.sidebar { position: relative; z-index: 70; display: flex; min-height: 0; flex-direction: column; padding: 20px 12px 14px; color: #eaf0ed; background: var(--ink); border-right: 1px solid #334039; }
.sidebar__header { display: flex; min-height: 34px; align-items: center; justify-content: space-between; gap: 6px; }
.brand { display: inline-flex; min-width: 0; align-items: center; gap: 8px; font: 760 14px/1 var(--display); white-space: nowrap; }
.brand__name { overflow: visible; white-space: nowrap; }
.nav-item__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand__mark { display: grid; width: 19px; height: 19px; flex: 0 0 auto; grid-template-columns: repeat(3, 5px); gap: 2px; }
.brand__mark i { background: var(--accent); }
.brand__mark i:nth-child(2), .brand__mark i:nth-child(4), .brand__mark i:nth-child(6), .brand__mark i:nth-child(8) { opacity: .26; }
.sidebar-toggle { position: relative; z-index: 2; display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; padding: 0; border: 1px solid #334039; border-radius: var(--radius-sm); color: #cbd4cf; background: transparent; }
.sidebar-toggle:hover { color: #fff; background: #202c25; }
.sidebar-toggle__icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--ssm-duration-normal) ease; }
.side-nav { min-height: 0; margin-top: 24px; overflow-y: auto; scrollbar-width: none; }
.side-nav::-webkit-scrollbar { width: 0; height: 0; }
.nav-label { margin: 0 0 6px; padding: 0 10px; color: #9eaaa3; font: 700 9px/1.2 var(--mono); text-transform: uppercase; }
.nav-label--spaced { margin-top: 18px; }
.nav-item { position: relative; display: flex; min-height: 40px; align-items: center; gap: 10px; margin-bottom: 2px; padding: 7px 10px; border: 1px solid transparent; border-radius: var(--radius-sm); color: #cbd4cf; font: 650 13px/1.25 var(--ui); }
.nav-item:hover { color: #fff; background: #202c25; }
.nav-item.is-active { color: var(--ink); background: var(--accent); }
.nav-icon { display: block; width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sidebar__footer { display: grid; gap: 10px; margin-top: auto; padding: 14px 8px 2px; border-top: 1px solid #334039; }
.sidebar-utility { display: grid; gap: 2px; }
.sidebar-utility__item { position: relative; display: flex; min-height: 36px; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--radius-sm); color: #cbd4cf; font: 650 12px/1.25 var(--ui); }
.sidebar-utility__item:hover { color: #fff; background: #202c25; }
.sidebar-utility__icon, .sidebar-account__chevron { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sidebar-signup { display: inline-flex; width: 100%; min-height: 44px; align-items: center; justify-content: center; padding: 10px 14px; border: 1px solid var(--paper); border-radius: var(--radius-sm); color: var(--ink); background: var(--paper); font: 750 13px/1.2 var(--ui); }
.sidebar-signup:hover { border-color: #eaf0ed; background: #eaf0ed; }
.sidebar-account { position: relative; display: grid; width: 100%; min-height: 44px; grid-template-columns: 32px minmax(0, 1fr) 16px; align-items: center; gap: 9px; padding: 5px 7px; border: 1px solid transparent; border-radius: var(--radius-sm); color: #eaf0ed; background: transparent; text-align: left; font: 700 12px/1.2 var(--ui); }
.sidebar-account:hover { border-color: #334039; background: #202c25; }
.sidebar-account__avatar { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid #435149; border-radius: var(--radius-sm); color: #dce5e0; background: #1b2520; }
.sidebar-account__avatar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sidebar-account__avatar [data-auth-avatar-initials] { font: 750 10px/1 var(--mono); }
.sidebar-account__chevron { width: 16px; height: 16px; color: #89968f; }

@media (min-width: 921px) {
  body.is-sidebar-collapsed { --sidebar-width: 64px; }
  .is-sidebar-collapsed .sidebar__header { justify-content: center; }
  .is-sidebar-collapsed .brand { display: none; }
  .is-sidebar-collapsed .sidebar-toggle__icon { transform: rotate(180deg); }
  .is-sidebar-collapsed .side-nav { margin-top: 24px; }
  .is-sidebar-collapsed .nav-label { height: 0; margin: 0; padding: 0; overflow: hidden; opacity: 0; }
  .is-sidebar-collapsed .nav-label--spaced { height: 1px; margin: 12px 8px 10px; border-top: 1px solid #334039; }
  .is-sidebar-collapsed .nav-item { justify-content: center; gap: 0; padding: 10px; }
  .is-sidebar-collapsed .nav-item__label { width: 0; opacity: 0; }
  .is-sidebar-collapsed .sidebar__footer { display: grid; gap: 4px; padding: 12px 0 2px; }
  .is-sidebar-collapsed .sidebar-utility__item { min-height: 40px; justify-content: center; gap: 0; padding: 10px; }
  .is-sidebar-collapsed .sidebar-utility__item > span { width: 0; overflow: hidden; opacity: 0; }
  .is-sidebar-collapsed .sidebar-signup { display: none; }
  .is-sidebar-collapsed .sidebar-account { min-height: 40px; grid-template-columns: 32px; justify-content: center; gap: 0; padding: 4px; }
  .is-sidebar-collapsed .sidebar-account > [data-auth-label],
  .is-sidebar-collapsed .sidebar-account__chevron { display: none; }

  .sidebar-toggle::after,
  .is-sidebar-collapsed .nav-item::after,
  .is-sidebar-collapsed .sidebar-utility__item::after,
  .is-sidebar-collapsed .sidebar-account::after {
    position: absolute;
    z-index: 100;
    top: 50%;
    left: calc(100% + 10px);
    padding: 7px 9px;
    border: 1px solid #435149;
    border-radius: var(--radius-xs);
    color: #fff;
    background: var(--ink);
    box-shadow: var(--ssm-shadow-menu);
    content: attr(data-tooltip);
    font: 650 11px/1.2 var(--ui);
    opacity: 0;
    pointer-events: none;
    transform: translate(-4px, -50%);
    transition: opacity var(--ssm-duration-fast) ease, transform var(--ssm-duration-fast) ease;
    white-space: nowrap;
  }
  .sidebar-toggle:hover::after,
  .sidebar-toggle:focus-visible::after,
  .is-sidebar-collapsed .nav-item:hover::after,
  .is-sidebar-collapsed .nav-item:focus-visible::after,
  .is-sidebar-collapsed .sidebar-utility__item:hover::after,
  .is-sidebar-collapsed .sidebar-utility__item:focus-visible::after,
  .is-sidebar-collapsed .sidebar-account:hover::after,
  .is-sidebar-collapsed .sidebar-account:focus-visible::after {
    opacity: 1;
    transform: translate(0, -50%);
  }
}

.content-scroll { min-width: 0; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.content-scroll::-webkit-scrollbar { width: 0; height: 0; }
.mobile-header { display: none; }
.page-content { width: min(1460px, 100%); margin-inline: auto; padding: 0 clamp(22px, 3vw, 44px) 64px; }
.page-overview { padding: 34px 0 28px; }
.eyebrow, .panel-kicker { margin: 0 0 10px; color: var(--accent-strong); font: 750 10px/1.2 var(--mono); text-transform: uppercase; }
.overview-row { display: flex; align-items: end; justify-content: space-between; gap: 40px; }
.overview-row > div:first-child { max-width: 760px; }
.overview-row p { max-width: 700px; margin: 0; color: var(--muted); font-size: 16px; }
.overview-meta { display: flex; flex-wrap: wrap; justify-content: end; gap: 8px; }
.overview-meta span { padding: 7px 9px; border: 1px solid var(--line); border-radius: var(--radius-xs); color: var(--muted); background: var(--paper); font: 700 10px/1 var(--mono); text-transform: uppercase; white-space: nowrap; }

.workspace { --panel-height: clamp(640px, calc(100dvh - 48px), 780px); display: grid; min-height: var(--panel-height); grid-template-columns: minmax(420px, .88fr) minmax(480px, 1.12fr); align-items: start; gap: 20px; padding-bottom: 56px; scroll-margin-top: 72px; }
.control-panel, .dynamic-panel { min-width: 0; height: var(--panel-height); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); }
.control-panel { overflow-y: auto; padding: 24px; scrollbar-color: var(--line-strong) transparent; scrollbar-gutter: stable; scrollbar-width: thin; }
.control-panel::-webkit-scrollbar { width: 8px; }
.control-panel::-webkit-scrollbar-track { background: transparent; }
.control-panel::-webkit-scrollbar-thumb { border: 2px solid var(--paper); border-radius: 8px; background: var(--line-strong); }
.dynamic-panel { position: sticky; top: 20px; overflow: hidden; padding: 24px; }
.panel-heading, .dynamic-heading { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.panel-heading { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.panel-heading h2, .dynamic-heading h2 { margin: 0; font-size: 23px; }
.dynamic-heading { margin-bottom: 20px; }
.status-badge { display: inline-flex; min-height: 24px; align-items: center; padding: 4px 7px; border: 1px solid #5e8b48; border-radius: var(--radius-xs); color: var(--accent-strong); background: var(--accent-soft); font: 750 9px/1 var(--mono); text-transform: uppercase; white-space: nowrap; }
.status-badge--neutral { border-color: var(--line); color: var(--muted); background: var(--wash); }

.field-group { min-width: 0; margin: 24px 0 0; padding: 0; border: 0; }
.field-label { display: block; margin-bottom: 8px; color: var(--muted); font: 700 12px/1.35 var(--ui); }
.field-label span { margin-left: 5px; color: var(--muted-2); font-weight: 500; }
.label-row { display: flex; align-items: center; justify-content: space-between; }
.field { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); background: var(--paper); font: 500 14px/1.5 var(--body); }
textarea.field { min-height: 108px; resize: vertical; }
.field:hover { border-color: var(--line-strong); }
.field:focus { border-color: var(--info); outline: 3px solid var(--focus); outline-offset: 2px; }
.field-help { margin: 7px 0 0; color: var(--muted-2); font-size: 11px; }
.text-button { padding: 2px 0; border: 0; color: var(--accent-strong); background: transparent; font-size: 12px; font-weight: 700; }
.checkerboard { background: var(--checker); }

.primary-button, .secondary-button, .icon-button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 8px; border-radius: var(--radius-sm); font: 700 14px/1.2 var(--ui); }
.primary-button { padding: 11px 18px; border: 0; color: #fff; background: var(--action); }
.primary-button:hover { background: var(--action-hover); }
.primary-button:disabled { cursor: not-allowed; opacity: .5; }
.primary-button--wide { width: 100%; }
.secondary-button { padding: 9px 14px; border: 0; color: var(--ink); background: var(--wash); }
.secondary-button:hover { background: #e6ebe8; }
.secondary-button--small { min-height: 36px; padding: 7px 11px; font-size: 12px; }
.icon-button { width: 40px; min-height: 40px; padding: 0; border: 0; background: transparent; font-size: 22px; }

.seo-content { border-top: 1px solid var(--line); }
.is-logged-in .seo-content { display: none; }
.login-dialog { width: min(430px, calc(100% - 28px)); padding: 0; border: 0; border-radius: var(--radius-md); box-shadow: 0 18px 48px rgba(17,24,32,.18); }
.login-dialog::backdrop { background: rgba(17,24,32,.54); }
.login-dialog__panel { position: relative; display: grid; gap: 14px; padding: 30px; }
.login-dialog__panel h2 { margin-bottom: 0; font-size: 30px; }
.login-dialog__panel > p:not(.eyebrow) { margin: 0 0 6px; color: var(--muted); }
.login-dialog__panel .field-label { margin-bottom: -7px; }
.login-dialog__panel > small { color: var(--muted-2); text-align: center; font-size: 10px; }
.dialog-close { position: absolute; top: 10px; right: 10px; }
.toast { position: fixed; z-index: 110; right: 22px; bottom: 22px; display: flex; min-width: 300px; align-items: center; gap: 11px; padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); box-shadow: var(--ssm-shadow-menu); }
.toast__icon { display: grid; width: 30px; height: 30px; place-items: center; color: var(--accent-strong); background: var(--accent-soft); font-weight: 800; }
.toast strong, .toast span { display: block; }
.toast strong { font-size: 12px; }
.toast div span { color: var(--muted); font-size: 10px; }

@media (max-width: 1180px) {
  .brand { font-size: 14px; }
  .workspace { grid-template-columns: minmax(300px, .96fr) minmax(320px, 1.04fr); gap: 14px; }
  .control-panel, .dynamic-panel { padding: 20px; }
}

@media (max-width: 920px) {
  .app-shell { display: block; }
  .sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: min(300px, 84vw); transform: translateX(-102%); transition: transform var(--ssm-duration-normal) ease; }
  .sidebar-toggle { display: none; }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar-scrim { position: fixed; z-index: 60; inset: 0; background: rgba(17,24,32,.5); }
  .content-scroll { width: 100%; }
  .mobile-header { position: sticky; top: 0; z-index: 50; display: grid; height: 58px; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 0 14px; color: #fff; background: var(--ink); border-bottom: 1px solid #334039; }
  .brand--mobile { justify-self: start; font-size: 14px; }
  .mobile-header .secondary-button { color: #fff; background: #202c25; }
  .page-content { padding-inline: 18px; }
  .page-overview { padding: 30px 0 24px; }
  .overview-row { align-items: start; flex-direction: column; gap: 18px; }
  .overview-meta { justify-content: start; }
  .workspace { display: block; min-height: 0; }
  .control-panel, .dynamic-panel { height: auto; overflow: visible; }
  .dynamic-panel { position: static; min-height: 0; margin-top: 18px; }
}

@media (max-width: 620px) {
  h1 { font-size: 34px; }
  h2 { font-size: 22px; }
  .page-content { padding-inline: 14px; padding-bottom: 44px; }
  .page-overview p { font-size: 14px; }
  .control-panel, .dynamic-panel { padding: 16px; }
  .panel-heading h2, .dynamic-heading h2 { font-size: 21px; }
  .login-dialog__panel { padding: 26px 20px 22px; }
  .toast { right: 14px; bottom: 14px; left: 14px; min-width: 0; }
}

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