/* Extracted/adapted from canonical Daiwari Front V2 wireframe. Do not edit reference HTML. */

    :root {
      --bg: #f6f4ef;
      --surface: #ffffff;
      --surface-soft: #fbfaf7;
      --surface-muted: #f1eee7;
      --ink: #15171a;
      --ink-soft: #303844;
      --muted: #6d7280;
      --muted-2: #8b919e;
      --line: #ddd8cf;
      --line-strong: #cfc7ba;

      --accent: #26324a;
      --accent-2: #33415f;
      --accent-soft: #eef1f6;

      --success: #2f6f4e;
      --success-bg: #edf7f0;
      --warning: #956411;
      --warning-bg: #fff5dc;
      --danger: #9e2f24;
      --danger-bg: #fff0ed;
      --info: #315c8c;
      --info-bg: #edf4fb;

      --radius-xl: 28px;
      --radius-lg: 20px;
      --radius-md: 14px;
      --radius-sm: 10px;

      --shadow-xs: 0 1px 2px rgba(20, 24, 31, .04);
      --shadow-sm: 0 8px 24px rgba(20, 24, 31, .06);
      --shadow-md: 0 20px 52px rgba(20, 24, 31, .10);

      --focus: 0 0 0 4px rgba(38, 50, 74, .14);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      background:
        radial-gradient(circle at top left, rgba(38, 50, 74, .08), transparent 34rem),
        linear-gradient(180deg, #faf8f3 0%, var(--bg) 38%, #f0ede6 100%);
      color: var(--ink);
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.45;
    }

    button,
    input,
    select,
    textarea {
      font: inherit;
    }

    button,
    .button {
      border: 0;
      border-radius: 999px;
      min-height: 42px;
      padding: 10px 16px;
      background: var(--accent);
      color: #fff;
      font-weight: 760;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      text-decoration: none;
      box-shadow: var(--shadow-xs);
      transition: transform .12s ease, background .16s ease, box-shadow .16s ease;
    }

    button:hover,
    .button:hover {
      background: var(--accent-2);
      box-shadow: var(--shadow-sm);
    }

    button:active,
    .button:active {
      transform: translateY(1px);
    }

    button.secondary,
    .button.secondary {
      background: #fff;
      color: var(--accent);
      border: 1px solid var(--line);
      box-shadow: none;
    }

    button.secondary:hover,
    .button.secondary:hover {
      background: var(--accent-soft);
      border-color: #cfd6e3;
      box-shadow: none;
    }

    button.ghost {
      background: transparent;
      color: var(--accent);
      border: 1px solid transparent;
      box-shadow: none;
    }

    button.danger-soft {
      background: var(--danger-bg);
      color: var(--danger);
      border: 1px solid #f2c8c1;
      box-shadow: none;
    }

    button[disabled] {
      cursor: not-allowed;
      opacity: .46;
      box-shadow: none;
    }

    input,
    select,
    textarea {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: #fff;
      color: var(--ink);
      min-height: 44px;
      padding: 10px 12px;
      outline: none;
      transition: border-color .16s ease, box-shadow .16s ease;
    }

    textarea {
      min-height: 96px;
      resize: vertical;
    }

    input:focus,
    select:focus,
    textarea:focus,
    button:focus-visible,
    .button:focus-visible,
    .clickable:focus-visible {
      outline: none;
      box-shadow: var(--focus);
      border-color: #b7c1d2;
    }

    label {
      display: grid;
      gap: 7px;
      color: var(--ink-soft);
      font-size: 13px;
      font-weight: 720;
    }

    .app {
      min-height: 100vh;
      display: grid;
      grid-template-rows: auto 1fr;
    }

    .global-shell {
      width: min(1560px, calc(100vw - 32px));
      margin: 0 auto;
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 30;
      backdrop-filter: blur(18px);
      background: rgba(246, 244, 239, .80);
      border-bottom: 1px solid rgba(221, 216, 207, .75);
    }

    .topbar-inner {
      width: min(1560px, calc(100vw - 32px));
      margin: 0 auto;
      min-height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 22px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 200px;
    }

    .brand-mark {
      width: 38px;
      height: 38px;
      border-radius: 12px;
      background: linear-gradient(135deg, #182234 0%, #354766 100%);
      display: grid;
      place-items: center;
      color: #fff;
      font-weight: 840;
      letter-spacing: -.04em;
      box-shadow: 0 12px 30px rgba(38, 50, 74, .22);
    }

    .brand strong {
      display: block;
      letter-spacing: -.03em;
      font-size: 18px;
    }

    .brand span {
      display: block;
      color: var(--muted);
      font-size: 12px;
      margin-top: -1px;
    }

    .screen-nav {
      display: flex;
      gap: 8px;
      padding: 6px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255, 255, 255, .72);
      box-shadow: var(--shadow-xs);
    }

    .screen-nav button {
      min-height: 34px;
      padding: 7px 12px;
      border-radius: 999px;
      background: transparent;
      color: var(--muted);
      box-shadow: none;
      font-size: 13px;
      font-weight: 760;
    }

    .screen-nav button.active {
      background: var(--accent);
      color: #fff;
    }

    .app-meta {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
    }

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--success);
      box-shadow: 0 0 0 4px rgba(47, 111, 78, .12);
    }

    main {
      padding: 28px 0 44px;
    }

    .screen {
      display: none;
      animation: fadeIn .22s ease;
    }

    .screen.active {
      display: block;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: none; }
    }

    .panel {
      background: rgba(255, 255, 255, .92);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-xs);
    }

    .eyebrow {
      margin: 0 0 7px;
      color: var(--muted-2);
      text-transform: uppercase;
      letter-spacing: .12em;
      font-size: 11px;
      font-weight: 840;
    }

    .h1 {
      margin: 0;
      font-size: clamp(44px, 6.5vw, 86px);
      line-height: .92;
      letter-spacing: -.075em;
      color: var(--ink);
    }

    .h2 {
      margin: 0;
      font-size: clamp(28px, 3.5vw, 44px);
      line-height: 1;
      letter-spacing: -.055em;
    }

    .h3 {
      margin: 0;
      font-size: 20px;
      line-height: 1.15;
      letter-spacing: -.035em;
    }

    .subcopy {
      color: var(--muted);
      font-size: 15px;
      margin: 14px 0 0;
      max-width: 620px;
    }

    .micro {
      color: var(--muted);
      font-size: 13px;
      margin: 0;
    }

    .badge,
    .status-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 26px;
      padding: 5px 9px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 780;
      white-space: nowrap;
      border: 1px solid transparent;
    }

    .badge.neutral,
    .status-pill.neutral {
      background: var(--surface-muted);
      color: var(--ink-soft);
      border-color: var(--line);
    }

    .badge.success,
    .status-pill.success {
      color: var(--success);
      background: var(--success-bg);
      border-color: #c7e7d0;
    }

    .badge.warning,
    .status-pill.warning {
      color: var(--warning);
      background: var(--warning-bg);
      border-color: #ecd59c;
    }

    .badge.danger,
    .status-pill.danger {
      color: var(--danger);
      background: var(--danger-bg);
      border-color: #f0beb5;
    }

    .badge.info {
      color: var(--info);
      background: var(--info-bg);
      border-color: #c9daed;
    }

    .metric-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      padding: 9px 0;
      border-bottom: 1px solid #eee9df;
      font-size: 13px;
    }

    .metric-row:last-child {
      border-bottom: 0;
    }

    .metric-row span {
      color: var(--muted);
      font-weight: 690;
    }

    .metric-row strong {
      color: var(--ink);
      text-align: right;
    }

    .divider {
      height: 1px;
      background: var(--line);
      margin: 18px 0;
    }

    /* HOME */
    .home-hero {
      min-height: calc(100vh - 148px);
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(360px, .8fr);
      gap: 28px;
      align-items: center;
    }

    .home-copy {
      padding: clamp(22px, 4vw, 54px);
    }

    .home-actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 30px;
    }

    .home-card {
      padding: 22px;
      border-radius: var(--radius-xl);
      background:
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.86)),
        radial-gradient(circle at top right, rgba(38,50,74,.10), transparent 22rem);
      box-shadow: var(--shadow-md);
    }

    .project-preview {
      border-radius: 22px;
      padding: 18px;
      background: var(--surface-soft);
      border: 1px solid var(--line);
      margin-top: 18px;
    }

    .project-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 12px;
      align-items: center;
      padding: 14px 0;
      border-bottom: 1px solid #eee9df;
    }

    .project-row:last-child {
      border-bottom: 0;
    }

    .project-row strong {
      display: block;
      letter-spacing: -.02em;
    }

    .project-row span {
      color: var(--muted);
      font-size: 13px;
    }

    .visual-book {
      aspect-ratio: 4 / 5;
      border-radius: 26px;
      background:
        linear-gradient(145deg, rgba(38, 50, 74, .92), rgba(61, 73, 104, .88)),
        var(--accent);
      position: relative;
      overflow: hidden;
      padding: 24px;
      color: #fff;
      box-shadow: 0 26px 70px rgba(38, 50, 74, .24);
    }

    .visual-book::before {
      content: "";
      position: absolute;
      inset: 24px 24px auto auto;
      width: 42%;
      aspect-ratio: 1;
      border-radius: 50%;
      background: rgba(255,255,255,.09);
      filter: blur(1px);
    }

    .visual-book-grid {
      position: absolute;
      inset: auto 24px 24px 24px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
    }

    .visual-book-grid span {
      height: 54px;
      border-radius: 9px;
      background: rgba(255,255,255,.16);
      border: 1px solid rgba(255,255,255,.12);
    }

    .visual-book-grid span:nth-child(2),
    .visual-book-grid span:nth-child(9) {
      background: rgba(245, 191, 79, .40);
    }

    .visual-book-grid span:nth-child(7) {
      background: rgba(255, 255, 255, .08);
      border-style: dashed;
    }

    /* SETUP */
    .setup-shell {
      max-width: 1120px;
      margin: 0 auto;
      display: grid;
      gap: 22px;
    }

    .setup-header {
      padding: 30px;
      border-radius: var(--radius-xl);
      background: rgba(255,255,255,.70);
      border: 1px solid var(--line);
    }

    .setup-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 340px;
      gap: 22px;
      align-items: start;
    }

    .form-stack {
      display: grid;
      gap: 16px;
    }

    .form-section {
      padding: 22px;
    }

    .form-section-header {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: start;
      margin-bottom: 16px;
    }

    .form-fields {
      display: grid;
      gap: 14px;
    }

    .form-two {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    .checkbox-line {
      display: flex;
      align-items: center;
      gap: 10px;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      padding: 12px;
      background: var(--surface-soft);
    }

    .checkbox-line input {
      width: 18px;
      height: 18px;
      min-height: 18px;
    }

    .setup-summary {
      position: sticky;
      top: 100px;
      padding: 20px;
    }

    .setup-summary .button {
      width: 100%;
      margin-top: 18px;
    }

    [data-image-import-preview],
    [data-image-import-issues],
    .image-import-groups {
      max-width: 100%;
      overflow-x: hidden;
    }

    .image-import-groups {
      display: grid;
      gap: 12px;
    }

    .image-import-group {
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 12px;
      background: var(--surface-soft);
    }

    .image-import-group h3 {
      margin: 0 0 4px;
      font-size: 0.95rem;
    }

    .image-import-group.ignored {
      border-color: rgba(245, 158, 11, 0.35);
    }

    .field-error {
      display: block;
      margin-top: 6px;
      color: var(--danger);
      font-weight: 700;
      line-height: 1.4;
    }

    .field-invalid {
      border-color: var(--danger) !important;
      box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
    }

    [data-image-import-file],
    [data-image-import-ignored],
    [data-image-import-issue] {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 8px;
      align-items: center;
      max-width: 100%;
      overflow-wrap: anywhere;
    }

    [data-image-import-file] small,
    [data-image-import-ignored] small,
    [data-image-import-issue] small {
      grid-column: 1 / -1;
      overflow-wrap: anywhere;
    }

    .image-import-thumb {
      width: 48px;
      height: 64px;
      max-width: 48px;
      max-height: 64px;
      object-fit: cover;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: var(--surface-soft);
    }


    .asset-box {
      display: grid;
      gap: 12px;
      border: 1px dashed #cfc7ba;
      background: #fffdf8;
      border-radius: var(--radius-lg);
      padding: 18px;
    }

    .asset-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    /* WORKSPACE */
    .workspace-shell {
      display: grid;
      gap: 16px;
    }

    .workspace-status {
      padding: 18px 20px;
      border-radius: var(--radius-xl);
      display: grid;
      grid-template-columns: minmax(0, 1.3fr) minmax(260px, .78fr) auto;
      gap: 18px;
      align-items: center;
      background: rgba(255,255,255,.92);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-sm);
    }

    .project-title-block h1 {
      margin: 0;
      font-size: 25px;
      letter-spacing: -.045em;
    }

    .project-title-block p {
      margin: 3px 0 0;
      color: var(--muted);
      font-size: 13px;
      font-weight: 650;
    }

    .status-block {
      border-radius: var(--radius-md);
      background: var(--warning-bg);
      border: 1px solid #ecd59c;
      padding: 12px;
      display: grid;
      gap: 6px;
    }

    .status-block strong {
      color: var(--warning);
      font-size: 14px;
    }

    .status-block p {
      margin: 0;
      font-size: 12px;
      color: #74500e;
    }

    .workspace-grid {
      display: grid;
      grid-template-columns: 288px minmax(0, 1fr) 330px;
      gap: 16px;
      align-items: start;
    }

    .left-rail,
    .right-rail {
      display: grid;
      gap: 14px;
      position: sticky;
      top: 100px;
      max-height: calc(100vh - 118px);
      overflow: auto;
      padding-right: 2px;
    }

    .rail-card {
      padding: 16px;
    }

    .rail-header {
      margin-bottom: 12px;
    }

    .rail-header h2,
    .canvas-header h2,
    .inspector-card h2,
    .export-card h2 {
      margin: 0;
      font-size: 17px;
      letter-spacing: -.035em;
    }

    .constraint-item {
      display: grid;
      gap: 8px;
      padding: 12px;
      border: 1px solid #eee9df;
      border-radius: var(--radius-md);
      background: var(--surface-soft);
      margin-bottom: 10px;
    }

    .constraint-item:last-child {
      margin-bottom: 0;
    }

    .constraint-item h3 {
      margin: 0;
      font-size: 14px;
      letter-spacing: -.02em;
    }

    .mini-action-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .mini-action-row button {
      min-height: 32px;
      padding: 7px 10px;
      font-size: 12px;
    }

    .plan-option {
      width: 100%;
      text-align: left;
      display: grid;
      gap: 10px;
      border-radius: var(--radius-lg);
      border: 1px solid var(--line);
      background: #fff;
      color: var(--ink);
      padding: 14px;
      box-shadow: none;
    }

    .plan-option + .plan-option {
      margin-top: 10px;
    }

    .plan-option.selected {
      border-color: #aeb8ca;
      background:
        linear-gradient(180deg, #fff, #f9fbff);
      box-shadow: 0 0 0 3px rgba(38, 50, 74, .07);
    }

    .plan-option-header {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      align-items: start;
    }

    .plan-option h3 {
      margin: 0;
      font-size: 15px;
      letter-spacing: -.035em;
      color: var(--ink);
    }

    .plan-option p {
      margin: 0;
      font-size: 12px;
      color: var(--muted);
      line-height: 1.38;
    }

    .plan-metrics {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 7px;
    }

    .plan-metric {
      border-radius: 11px;
      background: var(--surface-soft);
      border: 1px solid #eee9df;
      padding: 8px;
    }

    .plan-metric span {
      display: block;
      color: var(--muted);
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .plan-metric strong {
      display: block;
      margin-top: 2px;
      color: var(--ink);
      font-size: 13px;
    }

    .canvas-card {
      min-height: calc(100vh - 184px);
      padding: 18px;
      border-radius: var(--radius-xl);
      background: rgba(255,255,255,.94);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-xs);
    }

    .canvas-header {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: start;
      margin-bottom: 16px;
    }

    .view-toggle {
      display: flex;
      gap: 6px;
      border-radius: 999px;
      background: var(--surface-muted);
      border: 1px solid var(--line);
      padding: 4px;
    }

    .view-toggle button {
      min-height: 30px;
      padding: 6px 10px;
      font-size: 12px;
      color: var(--muted);
      background: transparent;
      box-shadow: none;
    }

    .view-toggle button.active {
      background: #fff;
      color: var(--accent);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-xs);
    }

    .book-overview {
      display: grid;
      gap: 8px;
      margin-bottom: 16px;
      padding: 12px;
      border-radius: var(--radius-md);
      background: var(--accent-soft);
      border: 1px solid #d5dce8;
    }

    .book-overview-header {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      align-items: center;
    }

    .book-overview-header strong {
      font-size: 13px;
      color: var(--accent);
    }

    .minimap {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 5px;
    }

    .minimap span {
      height: 8px;
      border-radius: 999px;
      background: #d7dfeb;
    }

    .minimap span.color {
      background: #cda65d;
    }

    .minimap span.warning {
      background: #d59325;
    }

    .minimap span.filler {
      background: #a8a094;
    }

    .page-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
      gap: 12px;
      align-items: start;
    }

    .canvas-view {
      display: none;
    }

    .page-grid.canvas-view.active,
    .fold-view.canvas-view.active,
    .volume-preview.canvas-view.active {
      display: grid;
    }

    .fold-view {
      gap: 12px;
    }

    .fold-card {
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: #fff;
      box-shadow: var(--shadow-xs);
      overflow: hidden;
    }

    .fold-card.selected {
      border-color: #9aa8be;
      box-shadow: 0 0 0 3px rgba(38, 50, 74, .10);
    }

    .fold-card-header {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: start;
      padding: 14px;
      background: var(--surface-soft);
      border-bottom: 1px solid #eee9df;
    }

    .fold-card-header h3 {
      margin: 0;
      font-size: 16px;
      letter-spacing: -.035em;
    }

    .fold-card-header p {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 12px;
      font-weight: 680;
    }

    .fold-body {
      padding: 14px;
      display: grid;
      gap: 12px;
    }

    .fold-structure {
      display: grid;
      grid-template-columns: repeat(8, minmax(0, 1fr));
      gap: 6px;
    }

    .fold-page {
      min-height: 46px;
      border-radius: 10px;
      background: var(--surface-muted);
      border: 1px solid #e7e1d8;
      display: grid;
      place-items: center;
      color: var(--ink-soft);
      font-size: 11px;
      font-weight: 850;
      position: relative;
    }

    .fold-page.color {
      background: #fff1d0;
      color: #7b5410;
      border-color: #ebd098;
    }

    .fold-page.filler {
      background:
        repeating-linear-gradient(135deg, #efede8 0, #efede8 7px, #e0dcd4 7px, #e0dcd4 14px);
      color: #6d665d;
      border-style: dashed;
      text-transform: uppercase;
      letter-spacing: .08em;
      font-size: 10px;
    }

    .fold-page.warning::after {
      content: "!";
      position: absolute;
      top: -6px;
      right: -6px;
      width: 19px;
      height: 19px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: var(--warning-bg);
      color: var(--warning);
      border: 1px solid #e8cb82;
      font-size: 11px;
      font-weight: 900;
    }

    .fold-meta-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    .fold-meta {
      border: 1px solid #eee9df;
      border-radius: 12px;
      padding: 9px;
      background: var(--surface-soft);
    }

    .fold-meta span {
      display: block;
      color: var(--muted);
      font-size: 10px;
      font-weight: 820;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .fold-meta strong {
      display: block;
      margin-top: 3px;
      color: var(--ink);
      font-size: 13px;
      letter-spacing: -.02em;
    }

    .fold-note {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 10px;
      align-items: start;
      border-radius: var(--radius-md);
      padding: 11px;
      background: var(--warning-bg);
      border: 1px solid #ecd59c;
      color: #61440e;
      font-size: 12px;
    }

    .fold-note strong {
      color: var(--warning);
    }

    .page-card {
      border-radius: 16px;
      border: 1px solid var(--line);
      background: #fff;
      min-height: 196px;
      overflow: hidden;
      display: grid;
      grid-template-rows: 86px 1fr;
      cursor: pointer;
      box-shadow: var(--shadow-xs);
      transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
      text-align: left;
      padding: 0;
      color: var(--ink);
    }

    .page-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-sm);
      border-color: var(--line-strong);
    }

    .page-card.selected {
      border-color: #9aa8be;
      box-shadow: 0 0 0 3px rgba(38, 50, 74, .10);
    }

    .thumb {
      background:
        linear-gradient(135deg, rgba(255,255,255,.26), transparent),
        #e7e4dc;
      display: grid;
      place-items: center;
      color: #6f716f;
      font-weight: 850;
      font-size: 18px;
      position: relative;
    }

    .thumb.color {
      background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.65), transparent 38%),
        linear-gradient(135deg, #e5bf70, #c37d5f 42%, #557ca0);
      color: #fff;
    }

    .thumb.filler {
      background:
        repeating-linear-gradient(135deg, #efede8 0, #efede8 8px, #e0dcd4 8px, #e0dcd4 16px);
      color: #6d665d;
      text-transform: uppercase;
      letter-spacing: .12em;
      font-size: 12px;
    }

    .page-alert {
      position: absolute;
      top: 8px;
      right: 8px;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: var(--warning-bg);
      color: var(--warning);
      border: 1px solid #e8cb82;
      font-size: 13px;
      font-weight: 900;
    }

    .page-body {
      padding: 11px;
      display: grid;
      gap: 7px;
    }

    .page-body strong {
      display: block;
      font-size: 14px;
      letter-spacing: -.025em;
    }

    .page-line {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      font-size: 11px;
      color: var(--muted);
      font-weight: 720;
    }

    .page-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 2px;
    }

    .tag {
      min-height: 22px;
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      padding: 3px 7px;
      font-size: 10px;
      font-weight: 850;
      background: var(--surface-muted);
      color: var(--ink-soft);
      border: 1px solid #e7e1d8;
    }

    .tag.color {
      background: #fff1d0;
      color: #7b5410;
      border-color: #ebd098;
    }

    .tag.spread {
      background: #edf4fb;
      color: #315c8c;
      border-color: #c9daed;
    }

    .tag.warning {
      background: var(--warning-bg);
      color: var(--warning);
      border-color: #ecd59c;
    }

    .inspector-card {
      padding: 16px;
    }

    .selected-plan-compact {
      padding: 16px;
      border-radius: var(--radius-lg);
      background:
        linear-gradient(180deg, #fff, #f9fbff);
      border: 1px solid #d5dce8;
    }

    .selected-plan-compact h2 {
      margin: 0 0 7px;
      font-size: 17px;
      letter-spacing: -.035em;
    }

    .inspector-section {
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid #eee9df;
    }

    .inspector-section h3 {
      margin: 0 0 9px;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .09em;
      color: var(--muted-2);
    }

    .issue-mini {
      border-radius: var(--radius-md);
      padding: 12px;
      border: 1px solid #ecd59c;
      background: var(--warning-bg);
      display: grid;
      gap: 8px;
    }

    .issue-mini strong {
      color: var(--warning);
      font-size: 13px;
    }

    .next-action {
      border-radius: var(--radius-md);
      padding: 12px;
      background: var(--accent);
      color: #fff;
      display: grid;
      gap: 8px;
    }

    .next-action p {
      color: rgba(255,255,255,.78);
      margin: 0;
      font-size: 12px;
    }



    /* WORKSPACE — PRODUCT VALUE ADDITIONS */
    .canvas-tools {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 10px;
    }

    .page-jump {
      width: min(230px, 100%);
      min-height: 34px;
      border-radius: 999px;
      font-size: 12px;
      padding: 7px 12px;
    }

    .filter-row {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      align-items: center;
    }

    .filter-chip {
      min-height: 28px;
      padding: 5px 9px;
      border-radius: 999px;
      border: 1px solid #d5dce8;
      background: #fff;
      color: var(--accent);
      font-size: 11px;
      font-weight: 820;
    }

    .minimap span.spread {
      background: #7aa0c7;
    }

    .minimap span.chapter {
      background: #798262;
    }

    .volume-preview {
      gap: 14px;
    }

    .volume-stage {
      border-radius: 24px;
      border: 1px solid #e5dfd4;
      background:
        radial-gradient(circle at 16% 0%, rgba(38,50,74,.08), transparent 22rem),
        linear-gradient(180deg, #fffdfa 0%, #f4f0e8 100%);
      padding: 18px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
      display: grid;
      gap: 14px;
    }

    .volume-stage-header {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      align-items: start;
    }

    .volume-stage-header h3 {
      margin: 0;
      font-size: 18px;
      letter-spacing: -.04em;
    }

    .spread-strip {
      display: grid;
      grid-template-columns: repeat(3, minmax(210px, 1fr));
      gap: 14px;
      overflow-x: auto;
      padding-bottom: 4px;
    }

    .book-spread {
      min-width: 210px;
      border-radius: 18px;
      background: rgba(255,255,255,.74);
      border: 1px solid #e8e2d7;
      padding: 10px;
      box-shadow: var(--shadow-xs);
      display: grid;
      gap: 8px;
      position: relative;
    }

    .book-spread.protected {
      border-color: #b9cce1;
      box-shadow: 0 0 0 3px rgba(49, 92, 140, .09);
    }

    .book-spread.at-risk {
      border-color: #e6c47f;
      box-shadow: 0 0 0 3px rgba(149, 100, 17, .10);
    }

    .book-spread-label {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 820;
      text-transform: uppercase;
      letter-spacing: .07em;
    }

    .spread-pages {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
    }

    .volume-page {
      min-height: 138px;
      border-radius: 12px;
      border: 1px solid #e2dcd0;
      background:
        linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.16)),
        #ece8df;
      display: grid;
      place-items: center;
      color: #5f6264;
      font-size: 24px;
      font-weight: 900;
      position: relative;
      overflow: hidden;
    }

    .volume-page.color {
      background:
        radial-gradient(circle at 22% 18%, rgba(255,255,255,.74), transparent 35%),
        linear-gradient(135deg, #e4bf6b, #c98162 42%, #527da1);
      color: #fff;
    }

    .volume-page.filler {
      background: repeating-linear-gradient(135deg, #efede8 0, #efede8 9px, #ded9d0 9px, #ded9d0 18px);
      color: #6f6a61;
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: .12em;
    }

    .volume-page.chapter::before {
      content: "Chapter";
      position: absolute;
      top: 8px;
      left: 8px;
      min-height: 22px;
      padding: 3px 7px;
      border-radius: 999px;
      background: #f7f3e8;
      border: 1px solid #dfd2aa;
      color: #746433;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .07em;
      text-transform: uppercase;
    }

    .spread-bracket {
      border-radius: 999px;
      border: 1px solid #b9cce1;
      background: #edf4fb;
      color: var(--info);
      padding: 5px 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 880;
    }

    .spread-bracket.warning {
      border-color: #ecd59c;
      background: var(--warning-bg);
      color: var(--warning);
    }

    .volume-note-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .volume-note {
      border-radius: var(--radius-md);
      background: rgba(255,255,255,.72);
      border: 1px solid #e8e2d7;
      padding: 11px;
      display: grid;
      gap: 5px;
      font-size: 12px;
      color: var(--muted);
    }

    .volume-note strong {
      color: var(--ink);
      font-size: 13px;
    }

    .page-card {
      position: relative;
    }

    .page-card::before {
      content: "⋮⋮";
      position: absolute;
      top: 8px;
      left: 8px;
      z-index: 3;
      width: 28px;
      min-height: 24px;
      border-radius: 999px;
      background: rgba(255,255,255,.74);
      border: 1px solid rgba(221,216,207,.72);
      color: var(--muted);
      display: grid;
      place-items: center;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: -.16em;
      opacity: 0;
      transition: opacity .16s ease;
    }

    .page-card:hover::before,
    .page-card.dragging::before {
      opacity: 1;
    }

    .page-card[data-drag-drop-state="enabled"] {
      cursor: grab;
    }

    .page-card[data-drag-drop-state="disabled"] {
      cursor: pointer;
    }

    .page-card[data-drag-drop-state="enabled"]::after {
      content: "Drag to reorder";
      display: inline-flex;
      width: max-content;
      max-width: 100%;
      margin-top: 8px;
      padding: 3px 7px;
      border-radius: 999px;
      background: #edf4fb;
      color: #325f8a;
      font-size: 10px;
      font-weight: 850;
      letter-spacing: .02em;
    }

    .page-card[data-drag-drop-state="disabled"]::after {
      content: "Filler drag disabled";
      display: inline-flex;
      width: max-content;
      max-width: 100%;
      margin-top: 8px;
      padding: 3px 7px;
      border-radius: 999px;
      background: var(--surface-muted);
      color: var(--muted);
      font-size: 10px;
      font-weight: 850;
      letter-spacing: .02em;
    }

    .page-card.dragging {
      opacity: .42;
      transform: scale(.985);
      cursor: grabbing;
    }

    .page-card.drop-before {
      box-shadow: -5px 0 0 var(--accent), var(--shadow-sm);
    }

    .page-card.drop-after {
      box-shadow: 5px 0 0 var(--accent), var(--shadow-sm);
    }

    .page-card.drop-invalid {
      box-shadow: 0 0 0 2px rgba(159,42,31,.42), var(--shadow-sm);
      cursor: not-allowed;
    }

    .plan-decision {
      display: grid;
      gap: 7px;
    }

    .decision-row {
      display: grid;
      grid-template-columns: 78px 1fr;
      gap: 8px;
      align-items: start;
      font-size: 12px;
      line-height: 1.35;
    }

    .decision-row span {
      color: var(--muted-2);
      font-weight: 850;
      text-transform: uppercase;
      letter-spacing: .06em;
      font-size: 10px;
    }

    .decision-row strong {
      color: var(--ink-soft);
      font-weight: 760;
    }

    .suggestion-card {
      border-radius: var(--radius-md);
      border: 1px solid #eee3c5;
      background: linear-gradient(180deg, #fffdf8, #fff8e7);
      padding: 12px;
      display: grid;
      gap: 8px;
      margin-top: 10px;
    }

    .suggestion-card h3 {
      margin: 0;
      font-size: 14px;
      letter-spacing: -.02em;
      color: var(--ink);
    }

    .impact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 7px;
    }

    .impact {
      border-radius: 10px;
      background: rgba(255,255,255,.74);
      border: 1px solid #efe3c3;
      padding: 8px;
    }

    .impact span {
      display: block;
      color: var(--muted);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: .07em;
      font-weight: 850;
    }

    .impact strong {
      display: block;
      margin-top: 2px;
      font-size: 12px;
      color: var(--ink);
    }

    .toc-table {
      display: grid;
      gap: 7px;
      margin-top: 10px;
    }

    .toc-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 48px 48px auto;
      gap: 8px;
      align-items: center;
      padding: 8px 0;
      border-bottom: 1px solid #eee9df;
      font-size: 12px;
    }

    .toc-row:last-child {
      border-bottom: 0;
    }

    .toc-row.header {
      color: var(--muted-2);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: .08em;
      font-weight: 850;
      padding-top: 0;
    }

    .toc-row strong {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .excel-preview {
      border-radius: var(--radius-lg);
      border: 1px solid #d8d0c0;
      background: #fff;
      overflow: hidden;
      box-shadow: var(--shadow-xs);
      margin-top: 14px;
    }

    .excel-toolbar {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      padding: 10px 12px;
      background: #f7f4ec;
      border-bottom: 1px solid #e8e0d2;
      font-size: 12px;
      color: var(--muted);
      font-weight: 780;
    }

    .excel-sheet {
      overflow: auto;
      padding: 12px;
      background:
        linear-gradient(#f7f7f7 1px, transparent 1px),
        linear-gradient(90deg, #f7f7f7 1px, transparent 1px),
        #fff;
      background-size: 26px 26px;
    }

    .excel-grid {
      border-collapse: collapse;
      font-family: Calibri, Arial, sans-serif;
      font-size: 12px;
      min-width: 620px;
      background: #fff;
    }

    .excel-grid th,
    .excel-grid td {
      border: 1px solid #222;
      padding: 5px 7px;
      min-width: 48px;
      text-align: center;
      height: 26px;
    }

    .excel-grid .fold-header {
      background: #ffff00;
      font-weight: 700;
    }

    .excel-grid .p-col {
      background: #ffcccc;
      font-weight: 700;
      width: 42px;
    }

    .excel-grid .content-col {
      min-width: 152px;
      text-align: center;
    }

    .excel-grid .gap-col {
      border: 0;
      background: transparent;
      width: 18px;
      min-width: 18px;
    }

    .excel-grid .medium-right {
      border-right-width: 3px;
    }

    .excel-grid .medium-left {
      border-left-width: 3px;
    }

    .excel-grid .medium-top {
      border-top-width: 3px;
    }

    .excel-grid .medium-bottom {
      border-bottom-width: 3px;
    }

    @media (max-width: 1260px) {
      .spread-strip {
        grid-template-columns: repeat(3, minmax(210px, 280px));
      }
      .volume-note-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 680px) {
      .toc-row {
        grid-template-columns: 1fr 42px 42px;
      }
      .toc-row > span:last-child {
        display: none;
      }
      .volume-stage {
        padding: 12px;
      }
    }



    /* WORKSPACE — EDITOR INTERNAL ITERATION */
    .status-block.ready {
      background: var(--warning-bg);
      border-color: #ecd59c;
    }

    .status-block.stale {
      background: var(--danger-bg);
      border-color: #f0beb5;
    }

    .status-block.stale strong {
      color: var(--danger);
    }

    .status-block.stale p {
      color: #743128;
    }

    .workspace-status-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
    }

    .workspace-status-actions .ghost {
      min-height: 38px;
      padding: 8px 12px;
      font-size: 12px;
    }

    .rail-summary {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .rail-summary .summary-tile {
      padding: 10px;
    }

    .recommended-plan-card {
      border-radius: var(--radius-lg);
      background: linear-gradient(180deg, #fff, #f9fbff);
      border: 1px solid #d5dce8;
      padding: 13px;
      display: grid;
      gap: 10px;
    }

    .recommendation-rationale {
      margin: 0;
      color: var(--ink-soft);
      font-size: 13px;
      line-height: 1.38;
      font-weight: 680;
    }

    .plan-comparison {
      width: 100%;
      border-collapse: collapse;
      font-size: 11px;
      overflow: hidden;
      border-radius: var(--radius-md);
    }

    .plan-comparison th,
    .plan-comparison td {
      border-bottom: 1px solid #eee9df;
      padding: 7px 6px;
      text-align: left;
      vertical-align: top;
    }

    .plan-comparison th {
      color: var(--muted-2);
      text-transform: uppercase;
      letter-spacing: .08em;
      font-size: 9px;
      font-weight: 880;
      background: var(--surface-soft);
    }

    .plan-comparison td:first-child {
      color: var(--muted);
      font-weight: 820;
      width: 78px;
    }

    .plan-comparison td:not(:first-child) {
      font-weight: 760;
      color: var(--ink-soft);
    }

    .plan-comparison tr:last-child td {
      border-bottom: 0;
    }

    .plan-a-cell {
      background: #fbfdff;
    }

    .plan-c-cell {
      color: var(--danger) !important;
    }

    .minimap-scale {
      display: flex;
      justify-content: space-between;
      color: var(--muted-2);
      font-size: 10px;
      font-weight: 820;
      letter-spacing: .04em;
    }

    .filter-chip.active {
      background: var(--accent);
      color: #fff;
      border-color: var(--accent);
    }

    .canvas-notice {
      border-radius: var(--radius-md);
      background: var(--surface-soft);
      border: 1px solid #e8e2d7;
      padding: 10px 12px;
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 10px;
      align-items: start;
      color: var(--muted);
      font-size: 12px;
      margin-bottom: 14px;
    }

    .canvas-notice.warning {
      background: var(--warning-bg);
      border-color: #ecd59c;
      color: #61440e;
    }

    .canvas-notice.danger {
      background: var(--danger-bg);
      border-color: #f0beb5;
      color: #743128;
    }

    .canvas-notice strong {
      color: var(--ink);
    }

    .volume-stage-header .micro strong {
      color: var(--ink-soft);
    }

    .spread-strip.editor-sequence {
      grid-template-columns: repeat(5, minmax(172px, 1fr));
      gap: 10px;
    }

    .book-spread {
      isolation: isolate;
    }

    .book-spread::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 38px;
      bottom: 48px;
      width: 1px;
      background: linear-gradient(180deg, transparent, rgba(38,50,74,.24), transparent);
      z-index: 2;
    }

    .book-spread.broken {
      border-color: #f0beb5;
      box-shadow: 0 0 0 3px rgba(158,47,36,.09);
    }

    .book-spread.candidate-preview {
      border-color: #e6c47f;
      box-shadow: 0 0 0 4px rgba(149,100,17,.14);
    }

    .volume-page {
      min-height: 128px;
      align-content: center;
    }

    .volume-page small {
      position: absolute;
      bottom: 8px;
      left: 8px;
      right: 8px;
      text-align: center;
      color: rgba(48,56,68,.62);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .02em;
    }

    .volume-page.color small {
      color: rgba(255,255,255,.74);
    }

    .volume-page.selected {
      border-color: #798aa7;
      box-shadow: inset 0 0 0 3px rgba(38,50,74,.18), 0 0 0 3px rgba(38,50,74,.12);
    }

    .volume-page.selected::after {
      content: "Selected";
      position: absolute;
      top: 8px;
      right: 8px;
      min-height: 22px;
      padding: 3px 7px;
      border-radius: 999px;
      background: #fff;
      border: 1px solid #ccd4e2;
      color: var(--accent);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .volume-page.candidate {
      background: repeating-linear-gradient(135deg, #fff8e7 0, #fff8e7 9px, #f0dfb7 9px, #f0dfb7 18px);
      border-color: #e6c47f;
      color: #876219;
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: .10em;
    }

    .sequence-legend {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
      color: var(--muted);
      font-size: 11px;
      font-weight: 760;
    }

    .legend-dot {
      width: 10px;
      height: 10px;
      border-radius: 3px;
      background: var(--surface-muted);
      border: 1px solid #e2dcd0;
      display: inline-block;
    }

    .legend-dot.color { background: #cda65d; border-color: #b98f43; }
    .legend-dot.filler { background: #d9d4ca; border-style: dashed; }
    .legend-dot.spread { background: #edf4fb; border-color: #b9cce1; }
    .legend-dot.selected { background: var(--accent); border-color: var(--accent); }

    .preview-hidden {
      display: none !important;
    }

    .page-card.dragging,
    .page-card[data-drag-state="dragging"] {
      opacity: .34;
      transform: rotate(-1deg) scale(.985);
    }

    .context-tabs {
      display: flex;
      gap: 6px;
      padding: 4px;
      background: var(--surface-muted);
      border: 1px solid var(--line);
      border-radius: 999px;
      margin-top: 12px;
    }

    .context-tabs button {
      min-height: 30px;
      padding: 6px 10px;
      font-size: 11px;
      background: transparent;
      color: var(--muted);
      box-shadow: none;
    }

    .context-tabs button.active {
      background: #fff;
      color: var(--accent);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-xs);
    }

    .context-pane { display: none; }
    .context-pane.active { display: block; }

    .suggestion-card.previewing {
      border-color: #e6c47f;
      box-shadow: 0 0 0 3px rgba(149,100,17,.10);
    }

    .suggestion-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .suggestion-actions button {
      min-height: 34px;
      padding: 7px 10px;
      font-size: 12px;
    }

    .impact-summary {
      border-radius: var(--radius-md);
      border: 1px solid #e8e2d7;
      background: var(--surface-soft);
      padding: 11px;
      display: grid;
      gap: 6px;
      margin-top: 12px;
    }

    .impact-summary.warning {
      background: var(--warning-bg);
      border-color: #ecd59c;
    }

    .impact-summary.danger {
      background: var(--danger-bg);
      border-color: #f0beb5;
    }

    .toc-row.affected {
      background: var(--warning-bg);
      margin: 0 -8px;
      padding-left: 8px;
      padding-right: 8px;
      border-radius: 10px;
      border-bottom: 0;
    }

    .export-hero.stale {
      background: linear-gradient(135deg, rgba(255,240,237,.86), rgba(255,255,255,.92) 48%), #fff;
      border-color: #f0beb5;
    }

    .export-disabled-note {
      border-radius: var(--radius-md);
      padding: 10px 12px;
      background: var(--danger-bg);
      border: 1px solid #f0beb5;
      color: #743128;
      font-size: 12px;
      font-weight: 720;
      margin-top: 10px;
    }

    /* EXPORT */
    .export-shell {
      max-width: 1180px;
      margin: 0 auto;
      display: grid;
      gap: 18px;
    }

    .export-hero {
      padding: 24px;
      border-radius: var(--radius-xl);
      background:
        linear-gradient(135deg, rgba(255,245,220,.78), rgba(255,255,255,.92) 48%),
        #fff;
      border: 1px solid #ead6a4;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 18px;
      align-items: center;
      box-shadow: var(--shadow-sm);
    }

    .export-hero h1 {
      margin: 0;
      font-size: 34px;
      letter-spacing: -.055em;
    }

    .export-hero p {
      margin: 7px 0 0;
      color: #73510f;
    }

    .export-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(320px, .62fr);
      gap: 18px;
      align-items: start;
    }

    .export-stack {
      display: grid;
      gap: 16px;
    }

    .export-card {
      padding: 18px;
    }

    .summary-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      margin-top: 14px;
    }

    .summary-tile {
      border-radius: var(--radius-md);
      background: var(--surface-soft);
      border: 1px solid #eee9df;
      padding: 12px;
    }

    .summary-tile span {
      display: block;
      color: var(--muted);
      font-size: 11px;
      font-weight: 820;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .summary-tile strong {
      display: block;
      margin-top: 5px;
      font-size: 18px;
      letter-spacing: -.04em;
    }

    .warning-card {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 12px;
      border-radius: var(--radius-lg);
      padding: 14px;
      background: var(--warning-bg);
      border: 1px solid #ecd59c;
      margin-top: 12px;
    }

    .warning-icon {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #fff;
      color: var(--warning);
      font-weight: 900;
      border: 1px solid #ecd59c;
    }

    .warning-card h3 {
      margin: 0;
      font-size: 15px;
      color: var(--warning);
    }

    .warning-card p {
      margin: 5px 0 0;
      font-size: 13px;
      color: #61440e;
    }

    .confirmation-box {
      border-radius: var(--radius-lg);
      padding: 16px;
      border: 1px solid var(--line);
      background: #fff;
      display: grid;
      gap: 12px;
    }

    .check-confirm {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 10px;
      align-items: start;
      font-weight: 720;
      color: var(--ink);
    }

    .check-confirm input {
      width: 20px;
      min-height: 20px;
      height: 20px;
      margin-top: 2px;
    }

    details {
      border-radius: var(--radius-md);
      border: 1px solid var(--line);
      background: var(--surface-soft);
      padding: 12px 14px;
    }

    summary {
      cursor: pointer;
      font-weight: 800;
      color: var(--accent);
    }

    .technical-list {
      margin: 12px 0 0;
      display: grid;
      gap: 8px;
    }

    .technical-list div {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      border-top: 1px solid #eee9df;
      padding-top: 8px;
      color: var(--muted);
      font-size: 12px;
    }

    .technical-list strong {
      color: var(--ink-soft);
      text-align: right;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 11px;
    }



    /* V12 — INTERNAL REVIEW REFINEMENTS */
    .button.compact,
    button.compact {
      min-height: 34px;
      padding: 7px 11px;
      font-size: 12px;
    }

    .home-copy {
      display: grid;
      align-content: center;
      gap: 0;
    }

    .home-actions {
      justify-content: flex-start;
      align-items: center;
      max-width: 560px;
    }

    .home-actions .ghost {
      padding-left: 10px;
      padding-right: 10px;
    }

    .journey-notice {
      min-height: 560px;
      border-radius: 26px;
      background:
        radial-gradient(circle at top right, rgba(255,255,255,.14), transparent 18rem),
        linear-gradient(145deg, rgba(38, 50, 74, .96), rgba(61, 73, 104, .92));
      color: #fff;
      padding: 28px;
      box-shadow: 0 26px 70px rgba(38, 50, 74, .24);
      display: grid;
      align-content: space-between;
      gap: 24px;
      overflow: hidden;
    }

    .journey-notice h2 {
      margin: 0;
      font-size: clamp(28px, 3vw, 42px);
      letter-spacing: -.055em;
      line-height: 1;
    }

    .journey-list {
      list-style: none;
      padding: 0;
      margin: 24px 0 0;
      display: grid;
      gap: 14px;
      counter-reset: journey;
    }

    .journey-list li {
      counter-increment: journey;
      display: grid;
      grid-template-columns: 34px 1fr;
      gap: 12px;
      align-items: start;
      color: rgba(255,255,255,.72);
      font-size: 14px;
    }

    .journey-list li::before {
      content: counter(journey);
      width: 30px;
      height: 30px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: rgba(255,255,255,.12);
      border: 1px solid rgba(255,255,255,.16);
      color: #fff;
      font-weight: 880;
      font-size: 12px;
    }

    .journey-list strong {
      display: block;
      color: #fff;
      margin-bottom: 2px;
      font-size: 14px;
      letter-spacing: -.01em;
    }

    .journey-footer {
      border-top: 1px solid rgba(255,255,255,.15);
      padding-top: 18px;
      color: rgba(255,255,255,.74);
      font-size: 14px;
      max-width: 560px;
    }

    .setup-shell {
      max-width: 1240px;
    }

    .form-section.compact {
      padding: 18px;
    }

    .form-section.compact .form-section-header {
      margin-bottom: 12px;
    }

    .form-section.compact .form-fields {
      gap: 12px;
    }

    .inline-token-list {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 8px;
    }

    .setup-summary-note {
      margin-top: 12px;
      padding: 11px;
      border-radius: var(--radius-md);
      background: var(--accent-soft);
      border: 1px solid #d5dce8;
      color: var(--accent);
      font-size: 12px;
      font-weight: 720;
    }

    .volume-stage-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
    }

    .right-rail .inspector-card {
      display: grid;
      gap: 0;
    }

    .context-tabs.full-width {
      margin: 14px 0 0;
      width: 100%;
      justify-content: space-between;
    }

    .context-tabs.full-width button {
      flex: 1;
    }

    .context-pane {
      padding-top: 14px;
    }

    .reader-overlay {
      position: fixed;
      inset: 0;
      z-index: 80;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 28px;
      background: rgba(18, 23, 32, .66);
      backdrop-filter: blur(10px);
    }

    .reader-overlay.open {
      display: flex;
    }

    .reader-dialog {
      width: min(1240px, calc(100vw - 40px));
      height: min(820px, calc(100vh - 40px));
      border-radius: 28px;
      background: #fbfaf7;
      border: 1px solid rgba(255,255,255,.28);
      box-shadow: 0 28px 90px rgba(0,0,0,.32);
      display: grid;
      grid-template-rows: auto 1fr auto;
      overflow: hidden;
    }

    .reader-header,
    .reader-footer {
      padding: 16px 20px;
      background: rgba(255,255,255,.88);
      border-bottom: 1px solid var(--line);
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: center;
    }

    .reader-footer {
      border-bottom: 0;
      border-top: 1px solid var(--line);
      align-items: stretch;
      overflow: hidden;
    }

    .reader-header h2 {
      margin: 0;
      font-size: 21px;
      letter-spacing: -.04em;
    }

    .reader-meta {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
      margin-top: 6px;
    }

    .reader-body {
      display: grid;
      grid-template-columns: 84px minmax(0, 1fr) 84px;
      gap: 18px;
      align-items: center;
      padding: 20px;
      background:
        radial-gradient(circle at top, rgba(38,50,74,.08), transparent 28rem),
        #f1eee7;
      min-height: 0;
    }

    .reader-nav {
      width: 58px;
      height: 58px;
      border-radius: 50%;
      justify-self: center;
      font-size: 22px;
      padding: 0;
    }

    .reader-page-shell {
      height: 100%;
      min-height: 0;
      display: grid;
      place-items: center;
    }

    .reader-page {
      width: min(520px, 100%);
      height: min(640px, 100%);
      min-height: 420px;
      border-radius: 18px;
      background:
        linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.20)),
        #e8e4dc;
      border: 1px solid #d8d0c0;
      box-shadow: 0 24px 70px rgba(38,50,74,.22);
      display: grid;
      place-items: center;
      position: relative;
      overflow: hidden;
      color: var(--ink-soft);
      text-align: center;
      padding: 32px;
    }

    .reader-page.color {
      background:
        radial-gradient(circle at 22% 18%, rgba(255,255,255,.74), transparent 35%),
        linear-gradient(135deg, #e4bf6b, #c98162 42%, #527da1);
      color: #fff;
    }

    .reader-page.filler {
      background: repeating-linear-gradient(135deg, #efede8 0, #efede8 14px, #ded9d0 14px, #ded9d0 28px);
      color: #6f6a61;
      border-style: dashed;
    }

    .reader-page.protected {
      box-shadow: inset 0 0 0 5px rgba(49,92,140,.16), 0 24px 70px rgba(38,50,74,.22);
    }

    .reader-page.selected {
      box-shadow: inset 0 0 0 5px rgba(38,50,74,.20), 0 24px 70px rgba(38,50,74,.22);
    }

    .reader-page-number {
      font-size: clamp(64px, 10vw, 132px);
      font-weight: 900;
      letter-spacing: -.08em;
      line-height: 1;
    }

    .reader-page-label {
      margin-top: 12px;
      color: inherit;
      opacity: .72;
      font-size: 14px;
      font-weight: 780;
    }

    .reader-page-badges {
      position: absolute;
      top: 16px;
      left: 16px;
      right: 16px;
      display: flex;
      gap: 7px;
      flex-wrap: wrap;
    }

    .reader-thumbs {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      min-width: 0;
      flex: 1;
      padding-bottom: 2px;
    }

    .reader-thumb {
      flex: 0 0 62px;
      min-height: 70px;
      border-radius: 12px;
      border: 1px solid #d8d0c0;
      background: #fff;
      color: var(--ink-soft);
      display: grid;
      place-items: center;
      padding: 6px;
      font-size: 11px;
      box-shadow: none;
    }

    .reader-thumb.color {
      background: #fff1d0;
      color: #7b5410;
      border-color: #ebd098;
    }

    .reader-thumb.filler {
      background: repeating-linear-gradient(135deg, #efede8 0, #efede8 6px, #ded9d0 6px, #ded9d0 12px);
      border-style: dashed;
    }

    .reader-thumb.active {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(38,50,74,.14);
    }

    .export-shell {
      max-width: 1480px;
    }

    .export-grid {
      grid-template-columns: minmax(0, 7fr) minmax(320px, 3fr);
    }

    .export-main-card {
      min-height: calc(100vh - 230px);
    }

    .excel-preview.kp-viewer {
      margin-top: 16px;
    }

    .excel-sheet.kp-scroll {
      max-height: min(560px, calc(100vh - 354px));
      overflow: auto;
      padding: 14px;
    }

    .excel-grid.kp-grid {
      min-width: 1180px;
      font-size: 11px;
    }

    .excel-grid .row-head,
    .excel-grid .col-head {
      background: #f1f1f1;
      color: #5f6264;
      font-weight: 700;
    }

    .excel-grid .sheet-title {
      background: #d9e2f3;
      font-weight: 700;
      text-align: left;
    }

    .excel-grid .sheet-section {
      background: #ffff00;
      font-weight: 700;
    }

    .excel-grid .sheet-fill {
      background: #efede8;
      font-weight: 700;
      color: #6d665d;
    }

    .excel-grid .sheet-color {
      background: #fff1d0;
      color: #7b5410;
      font-weight: 700;
    }

    .excel-grid .sheet-protected {
      background: #edf4fb;
      color: #315c8c;
      font-weight: 700;
    }

    .warning-checklist {
      display: grid;
      gap: 10px;
      margin-top: 12px;
    }

    .warning-checklist .warning-card {
      margin-top: 0;
      padding: 12px;
    }

    @media (max-width: 980px) {
      .journey-notice { min-height: auto; }
      .reader-body { grid-template-columns: 1fr; }
      .reader-nav { width: 100%; border-radius: 999px; }
      .reader-dialog { height: calc(100vh - 24px); width: calc(100vw - 24px); }
      .export-main-card { min-height: auto; }
    }


    /* RESPONSIVE */
    @media (max-width: 1260px) {
      .workspace-grid {
        grid-template-columns: 260px minmax(0, 1fr);
      }
      .right-rail {
        grid-column: 1 / -1;
        position: static;
        max-height: none;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        overflow: visible;
      }
      .left-rail {
        position: static;
        max-height: none;
      }
    }

    @media (max-width: 980px) {
      .topbar-inner {
        flex-wrap: wrap;
        padding: 12px 0;
      }
      .screen-nav {
        order: 3;
        width: 100%;
        overflow: auto;
      }
      .home-hero,
      .setup-grid,
      .workspace-status,
      .workspace-grid,
      .export-grid {
        grid-template-columns: 1fr;
      }
      .right-rail {
        grid-template-columns: 1fr;
      }
      .setup-summary {
        position: static;
      }
      .summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 680px) {
      .global-shell,
      .topbar-inner {
        width: min(100vw - 20px, 1560px);
      }
      main {
        padding-top: 14px;
      }
      .home-copy {
        padding: 22px 4px;
      }
      .home-card,
      .setup-header,
      .form-section,
      .canvas-card,
      .export-hero,
      .export-card {
        border-radius: 20px;
      }
      .form-two,
      .summary-grid {
        grid-template-columns: 1fr;
      }
      .workspace-status {
        padding: 14px;
      }
      .page-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
      }
    }


    /* V13 — EDITOR INTERNAL STABILIZATION PASS */
    html,
    body {
      max-width: 100%;
      overflow-x: hidden;
    }

    .home-hero {
      grid-template-columns: minmax(0, .95fr) minmax(420px, .9fr);
      gap: clamp(24px, 4vw, 48px);
    }

    .home-copy {
      padding: clamp(28px, 5vw, 64px) clamp(10px, 3vw, 42px);
    }

    .home-copy .subcopy {
      max-width: 680px;
      font-size: 16px;
      color: #59606e;
    }

    .home-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: fit-content;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255,255,255,.72);
      padding: 7px 11px;
      color: var(--accent);
      font-size: 12px;
      font-weight: 820;
      margin-bottom: 18px;
    }

    .home-actions {
      justify-content: flex-start;
      margin-top: 28px;
    }

    .home-actions button,
    .home-actions .button {
      min-width: 150px;
    }

    .current-sample-note {
      margin-top: 16px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 720;
    }

    .home-note-card {
      max-width: 620px;
      margin-top: 20px;
      border: 1px solid rgba(207, 199, 186, .9);
      border-radius: 20px;
      background:
        linear-gradient(135deg, rgba(255,255,255,.92), rgba(251,250,247,.82)),
        radial-gradient(circle at 92% 18%, rgba(245,191,79,.16), transparent 13rem);
      padding: 16px 18px;
      box-shadow: var(--shadow-xs);
    }

    .home-note-card strong {
      display: block;
      color: var(--accent);
      font-size: 13px;
      letter-spacing: -.01em;
      margin-bottom: 5px;
    }

    .home-note-card p {
      margin: 0;
      color: var(--ink-soft);
      font-size: 14px;
    }

    .home-intro-panel {
      min-width: 0;
      border-radius: 30px;
      background:
        radial-gradient(circle at 84% 12%, rgba(245,191,79,.22), transparent 13rem),
        radial-gradient(circle at 10% 84%, rgba(38,50,74,.10), transparent 18rem),
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(248,245,237,.92) 58%, rgba(242,237,226,.96));
      border: 1px solid rgba(207, 199, 186, .86);
      color: var(--ink);
      box-shadow: 0 24px 70px rgba(38, 50, 74, .14);
      padding: clamp(24px, 3.2vw, 38px);
      min-height: 610px;
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: 24px;
      position: relative;
      overflow: hidden;
    }

    .home-intro-panel::before {
      content: "";
      position: absolute;
      inset: 24px 24px auto auto;
      width: 36%;
      aspect-ratio: 1;
      border-radius: 50%;
      background: rgba(255,255,255,.54);
      border: 1px solid rgba(255,255,255,.72);
      pointer-events: none;
    }

    .home-intro-panel h2 {
      position: relative;
      z-index: 1;
      margin: 0;
      max-width: 620px;
      font-size: clamp(28px, 3vw, 42px);
      line-height: 1.02;
      letter-spacing: -.055em;
    }

    .home-intro-panel .subcopy {
      position: relative;
      z-index: 1;
      color: #59606e;
      max-width: 660px;
      margin-top: 14px;
    }

    .home-walkthrough {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 10px;
      align-self: center;
    }

    .path-step {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 12px;
      align-items: start;
      border: 1px solid rgba(221, 216, 207, .92);
      border-radius: 18px;
      background: rgba(255,255,255,.72);
      padding: 13px 14px;
      box-shadow: var(--shadow-xs);
    }

    .path-step .step-number {
      width: 34px;
      height: 34px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      background: var(--accent-soft);
      color: var(--accent);
      font-size: 12px;
      font-weight: 840;
      letter-spacing: -.02em;
    }

    .path-step strong {
      display: block;
      color: var(--ink);
      font-size: 14px;
      letter-spacing: -.015em;
      margin-bottom: 3px;
    }

    .path-step p {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.38;
    }

    .home-review-points {
      position: relative;
      z-index: 1;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
    }

    .home-review-points span {
      border-radius: 999px;
      border: 1px solid rgba(207, 199, 186, .9);
      background: rgba(255,255,255,.66);
      color: var(--ink-soft);
      padding: 7px 10px;
      font-size: 12px;
      font-weight: 760;
    }

    .home-intro-footer {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 18px;
      align-items: center;
      border-top: 1px solid rgba(207, 199, 186, .82);
      padding-top: 18px;
      color: var(--muted);
      font-size: 13px;
    }

    .home-intro-footer .badge {
      border-color: #d9d2c6;
      background: #fff;
      color: var(--accent);
    }

    .setup-mini-header {
      padding: 2px 0 4px;
      display: grid;
      gap: 6px;
    }

    .setup-mini-header .subcopy {
      max-width: 760px;
      margin-top: 4px;
    }

    .setup-grid > *,
    .workspace-grid > *,
    .export-grid > * {
      min-width: 0;
    }

    .workspace-grid {
      grid-template-columns: minmax(0, 1fr) minmax(360px, .52fr);
      grid-template-areas: "canvas decision";
      gap: 18px;
      align-items: start;
    }

    .canvas-card {
      grid-area: canvas;
      min-width: 0;
      overflow: hidden;
    }

    .decision-panel {
      grid-area: decision;
      display: grid;
      gap: 14px;
      position: sticky;
      top: 100px;
      max-height: calc(100vh - 118px);
      overflow: auto;
      padding-right: 2px;
      min-width: 0;
    }

    .decision-panel {
      grid-template-columns: minmax(0, 1fr);
    }

    .decision-panel > * {
      min-width: 0;
    }

    .export-main,
    .export-main-card,
    .excel-preview,
    .excel-sheet {
      max-width: 100%;
    }

    .export-stack {
      grid-template-columns: minmax(0, 1fr);
    }

    .export-stack > * {
      max-width: 100%;
      min-width: 0;
      overflow-wrap: anywhere;
    }

    .excel-preview.kp-viewer,
    .excel-sheet.kp-scroll {
      min-width: 0;
      overflow-x: auto;
      contain: inline-size;
    }

    .workspace-status {
      grid-template-columns: minmax(0, 1.35fr) minmax(300px, .72fr) auto;
    }

    .workspace-status-actions {
      justify-content: flex-end;
    }

    .plan-comparison {
      font-size: 10.5px;
    }

    .next-action-card {
      padding: 16px;
      background: linear-gradient(180deg, #fff, #f9fbff);
      border-color: #d5dce8;
    }

    .next-action-card button {
      width: 100%;
      margin-top: 12px;
    }

    .export-shell {
      max-width: 1500px;
    }

    .export-grid {
      grid-template-columns: minmax(0, 7.4fr) minmax(300px, 2.6fr);
      gap: 18px;
      align-items: start;
    }

    .export-main,
    .export-main-card,
    .excel-preview {
      min-width: 0;
      overflow: hidden;
    }

    .export-side {
      min-width: 0;
      position: relative;
    }

    .excel-sheet {
      max-width: 100%;
      overflow: auto;
    }

    .excel-preview.kp-viewer {
      min-width: 0;
      width: 100%;
    }

    .excel-sheet.kp-scroll {
      max-height: min(600px, calc(100vh - 360px));
      overflow: auto;
      padding: 14px;
    }

    .sheet-tabs {
      display: flex;
      gap: 6px;
      align-items: center;
      padding: 10px 12px 0;
      background: #f7f4ec;
      border-bottom: 0;
    }

    .sheet-tab {
      min-height: 30px;
      border-radius: 10px 10px 0 0;
      padding: 6px 12px;
      background: #ece7dc;
      border: 1px solid #d8d0c0;
      border-bottom: 0;
      color: #59606e;
      font-size: 12px;
      font-weight: 800;
      box-shadow: none;
    }

    .sheet-tab.active {
      background: #fff;
      color: var(--accent);
    }

    .excel-grid.kp-grid {
      min-width: 1380px;
      font-size: 11px;
    }

    .excel-grid.kp-grid th,
    .excel-grid.kp-grid td {
      height: 28px;
      min-width: 44px;
      padding: 4px 6px;
    }

    .excel-grid.kp-grid .content-col {
      min-width: 190px;
    }

    .excel-grid.kp-grid .gap-col {
      min-width: 18px;
      width: 18px;
      border: 0;
      background: transparent;
    }

    .excel-grid .template-note {
      background: #eeece1;
      text-align: left;
      font-weight: 700;
    }

    @media (max-width: 1260px) {
      .workspace-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
          "canvas"
          "decision";
      }
      .decision-panel {
        position: static;
        max-height: none;
        overflow: visible;
        padding-right: 0;
      }
    }

    @media (max-width: 980px) {
      .home-hero,
      .workspace-status,
      .export-grid {
        grid-template-columns: 1fr;
      }
      .home-intro-panel {
        min-height: auto;
      }
      .home-intro-footer {
        grid-template-columns: 1fr;
      }
      .workspace-shell,
      .workspace-grid,
      .workspace-grid > *,
      .decision-panel,
      .decision-panel > *,
      .workspace-status,
      .canvas-card,
      .rail-card,
      .inspector-card,
      .next-action-card,
      .export-shell,
      .export-grid,
      .export-grid > *,
      .export-stack,
      .export-stack > *,
      .export-main,
      .export-side,
      .export-hero,
      .export-hero > * {
        max-width: 100%;
        min-width: 0;
      }
      .export-grid,
      .export-main,
      .export-side {
        width: 100%;
        max-width: calc(100vw - 20px);
      }
      .export-grid,
      .export-hero {
        overflow-x: hidden;
      }
      .export-hero {
        grid-template-columns: 1fr;
      }
      .decision-panel {
        overflow-x: hidden;
      }
    }

  

    /* HOME V17 — scoped replacement; no other screens affected */
    #home {
      --paper: #f4efe6;
      --paper-2: #ebe4d8;
      --surface: rgba(255, 252, 245, .88);
      --surface-solid: #fffaf1;
      --surface-soft: #f8f2e8;
      --ink: #121722;
      --ink-soft: #2b3344;
      --muted: #71727a;
      --muted-2: #8f8b84;
      --line: rgba(112, 101, 84, .20);
      --line-strong: rgba(38, 49, 72, .20);
      --blue: #26314a;
      --blue-2: #34415e;
      --blue-soft: #edf0f6;
      --gold: #c6a35d;
      --gold-soft: #fbefd2;
      --amber: #9a681b;
      --green: #2f6d52;
      --shadow-soft: 0 18px 55px rgba(48, 42, 32, .10);
      --shadow-card: 0 10px 30px rgba(40, 35, 28, .08);
      --focus: 0 0 0 4px rgba(38, 49, 74, .16);
      --radius-xl: 30px;
      --radius-lg: 22px;
      --radius-md: 15px;
      --radius-sm: 11px;
    }

#home .dot{
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--green);
      box-shadow: 0 0 0 5px rgba(47, 109, 82, .12);
    }

    #home .home-v17{
      width: min(1160px, calc(100vw - 72px));
      margin: 0 auto;
      padding: 28px 0 34px;
    }

    #home .home-v17{
      display: grid;
      gap: 18px;
    }

    #home .hero{
      position: relative;
      overflow: hidden;
      min-height: 320px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 392px;
      gap: 34px;
      align-items: center;
      padding: 38px 42px 36px 44px;
      border-radius: var(--radius-xl);
      border: 1px solid rgba(117, 101, 72, .22);
      background:
        radial-gradient(circle at 76% 22%, rgba(198, 163, 93, .22), transparent 19rem),
        radial-gradient(circle at 24% 8%, rgba(255,255,255,.92), transparent 20rem),
        linear-gradient(135deg, rgba(255,252,244,.96) 0%, rgba(249,243,232,.88) 52%, rgba(241,234,222,.90) 100%);
      box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.78);
    }

    #home .hero::before{
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(110deg, transparent 0%, rgba(255,255,255,.62) 43%, transparent 58%),
        repeating-linear-gradient(90deg, rgba(38,49,74,.022) 0, rgba(38,49,74,.022) 1px, transparent 1px, transparent 18px);
      opacity: .38;
    }

    #home .hero-copy, #home .production-card{ position: relative; z-index: 1; }

    #home .eyebrow{
      margin: 0 0 14px;
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: #8a7651;
      text-transform: uppercase;
      letter-spacing: .14em;
      font-size: 11px;
      line-height: 1;
      font-weight: 880;
    }

    #home .eyebrow::before{
      content: "";
      width: 26px;
      height: 1px;
      background: linear-gradient(90deg, rgba(198,163,93,.88), rgba(198,163,93,.16));
    }

    #home h1{
      margin: 0;
      max-width: 610px;
      color: #111722;
      font-size: clamp(52px, 5vw, 68px);
      line-height: .95;
      letter-spacing: -.074em;
      font-weight: 830;
    }

    #home .subcopy{
      max-width: 520px;
      margin: 18px 0 0;
      color: #545862;
      font-size: 16px;
      line-height: 1.55;
      font-weight: 520;
    }

    #home .actions{
      display: flex;
      gap: 11px;
      margin-top: 26px;
      align-items: center;
    }

    #home .button{
      min-height: 43px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 10px 17px;
      border-radius: 999px;
      text-decoration: none;
      border: 1px solid transparent;
      font-size: 13px;
      font-weight: 820;
      letter-spacing: -.01em;
      transition: transform .14s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
    }

    #home .button.primary{
      color: #fff;
      background:
        linear-gradient(180deg, #35425e 0%, #202a41 100%);
      box-shadow: 0 14px 28px rgba(38, 49, 74, .18), inset 0 1px 0 rgba(255,255,255,.14);
    }

    #home .button.secondary{
      color: var(--blue);
      background: rgba(255, 253, 247, .72);
      border-color: rgba(38, 49, 74, .14);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
    }

    #home .button:hover{
      transform: translateY(-1px);
    }

    #home .button.primary:hover{
      box-shadow: 0 18px 34px rgba(38, 49, 74, .22), inset 0 1px 0 rgba(255,255,255,.16);
    }

    #home .button.secondary:hover{
      background: #fffaf1;
      border-color: rgba(198, 163, 93, .42);
    }

    #home .button:focus-visible, #home .journey-step:focus-visible{
      outline: none;
      box-shadow: var(--focus);
    }

    #home .button-mark{
      width: 18px;
      height: 18px;
      display: inline-grid;
      place-items: center;
      border-radius: 999px;
      background: rgba(255,255,255,.14);
      font-size: 13px;
      line-height: 1;
    }

    #home .secondary .button-mark{
      background: rgba(38,49,74,.08);
    }

    #home .production-card{
      min-height: 246px;
      padding: 18px;
      border-radius: 24px;
      border: 1px solid rgba(38, 49, 74, .14);
      background:
        radial-gradient(circle at 96% 0%, rgba(198,163,93,.24), transparent 12rem),
        linear-gradient(180deg, rgba(255,253,248,.88) 0%, rgba(250,244,233,.82) 100%);
      box-shadow: 0 20px 44px rgba(38, 49, 74, .10), inset 0 1px 0 rgba(255,255,255,.84);
    }

    #home .production-card-header{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 16px;
    }

    #home .production-card-title{
      display: grid;
      gap: 3px;
    }

    #home .production-card-title strong{
      color: var(--ink);
      font-size: 14px;
      letter-spacing: -.025em;
    }

    #home .production-card-title span{
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .055em;
      text-transform: uppercase;
    }

    #home .status-pill{
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 26px;
      padding: 5px 9px;
      border-radius: 999px;
      color: var(--green);
      background: rgba(237, 247, 239, .78);
      border: 1px solid rgba(47, 109, 82, .18);
      font-size: 11px;
      font-weight: 820;
      white-space: nowrap;
    }

    #home .plan-rows{
      display: grid;
      gap: 9px;
      padding: 12px;
      border-radius: 17px;
      border: 1px solid rgba(112, 101, 84, .16);
      background: rgba(255, 252, 246, .58);
    }

    #home .plan-row{
      display: grid;
      grid-template-columns: 28px 1fr;
      align-items: center;
      gap: 10px;
    }

    #home .fold-number{
      color: var(--muted-2);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .09em;
      text-transform: uppercase;
    }

    #home .page-strip{
      display: grid;
      grid-template-columns: repeat(8, minmax(0, 1fr));
      gap: 5px;
    }

    #home .page-dot{
      position: relative;
      height: 24px;
      border-radius: 8px;
      border: 1px solid rgba(38,49,74,.09);
      background: linear-gradient(180deg, #f7f1e7, #e9e2d7);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
    }

    #home .page-dot.color{
      border-color: rgba(198, 163, 93, .34);
      background: linear-gradient(135deg, #f5d88e 0%, #d9a66a 50%, #7189a9 100%);
    }

    #home .page-dot.filler{
      border-style: dashed;
      color: #6f6a60;
      background: repeating-linear-gradient(135deg, #f2ede4 0, #f2ede4 6px, #ded7ca 6px, #ded7ca 12px);
    }

    #home .page-dot.filler::after{
      content: "F";
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      color: #675e51;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .06em;
    }

    #home .page-dot.warning::after{
      content: "";
      position: absolute;
      top: -4px;
      right: -4px;
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: #d6942b;
      border: 2px solid #fff9ed;
      box-shadow: 0 4px 9px rgba(143, 94, 20, .22);
    }

    #home .promise-row{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-top: 13px;
    }

    #home .promise{
      min-height: 42px;
      display: grid;
      align-content: center;
      gap: 2px;
      padding: 8px 9px;
      border-radius: 13px;
      background: rgba(255,255,255,.55);
      border: 1px solid rgba(112,101,84,.13);
    }

    #home .promise strong{
      color: var(--ink);
      font-size: 12px;
      letter-spacing: -.025em;
    }

    #home .promise span{
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
    }

    #home .journey{
      overflow: hidden;
      padding: 26px 30px 28px;
      border-radius: 28px;
      border: 1px solid rgba(117, 101, 72, .18);
      background:
        radial-gradient(circle at 55% 0%, rgba(255,255,255,.84), transparent 18rem),
        linear-gradient(180deg, rgba(255,252,246,.90), rgba(250,245,236,.82));
      box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.80);
    }

    #home .journey-header{
      display: grid;
      grid-template-columns: minmax(0, 1fr) 410px;
      gap: 28px;
      align-items: end;
      margin-bottom: 22px;
    }

    #home .journey-kicker{
      margin: 0 0 7px;
      color: #9b845a;
      text-transform: uppercase;
      letter-spacing: .14em;
      font-size: 10px;
      font-weight: 900;
    }

    #home h2{
      margin: 0;
      color: var(--ink);
      font-size: 34px;
      line-height: .98;
      letter-spacing: -.058em;
      font-weight: 830;
    }

    #home .journey-header p:last-child{
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.5;
      font-weight: 560;
    }

    #home .journey-path{
      position: relative;
      display: grid;
      grid-template-columns: .92fr 1.18fr .92fr;
      gap: 18px;
      align-items: stretch;
    }

    #home .journey-path::before{
      content: "";
      position: absolute;
      left: 15%;
      right: 15%;
      top: 35px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(198,163,93,.55), rgba(38,49,74,.20), rgba(198,163,93,.55), transparent);
    }

    #home .journey-step{
      position: relative;
      z-index: 1;
      min-height: 176px;
      display: grid;
      align-content: start;
      gap: 12px;
      padding: 17px;
      border-radius: 20px;
      border: 1px solid rgba(38, 49, 74, .11);
      background: rgba(255,255,255,.48);
      text-decoration: none;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.68);
      transition: transform .14s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }

    #home .journey-step:hover{
      transform: translateY(-2px);
      border-color: rgba(198,163,93,.36);
      box-shadow: 0 14px 30px rgba(40,35,28,.08), inset 0 1px 0 rgba(255,255,255,.80);
    }

    #home .journey-step.core{
      background:
        radial-gradient(circle at 76% 0%, rgba(198,163,93,.24), transparent 12rem),
        linear-gradient(180deg, rgba(255,250,238,.78), rgba(248,239,220,.62));
      border-color: rgba(198,163,93,.34);
      box-shadow: 0 12px 34px rgba(121, 89, 42, .08), inset 0 1px 0 rgba(255,255,255,.82);
    }

    #home .step-top{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    #home .step-index{
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      color: var(--blue);
      background: rgba(38,49,74,.07);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .03em;
    }

    #home .core .step-index{
      color: #fff;
      background: linear-gradient(180deg, #33405c, #202a41);
      box-shadow: 0 9px 18px rgba(38,49,74,.18);
    }

    #home .step-label{
      color: #8e8981;
      text-transform: uppercase;
      letter-spacing: .12em;
      font-size: 10px;
      font-weight: 900;
      text-align: right;
    }

    #home .journey-step h3{
      margin: 2px 0 0;
      color: var(--ink);
      font-size: 21px;
      line-height: 1.06;
      letter-spacing: -.052em;
      font-weight: 830;
    }

    #home .feature-list{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 7px;
      margin-top: 1px;
    }

    #home .core .feature-list{
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #home .feature-list span{
      position: relative;
      min-height: 26px;
      display: inline-flex;
      align-items: center;
      padding: 5px 8px 5px 18px;
      border-radius: 999px;
      color: #4e5461;
      background: rgba(255,255,255,.54);
      border: 1px solid rgba(112,101,84,.11);
      font-size: 11px;
      font-weight: 740;
      white-space: nowrap;
    }

    #home .feature-list span::before{
      content: "";
      position: absolute;
      left: 8px;
      width: 4px;
      height: 4px;
      border-radius: 999px;
      background: rgba(198,163,93,.86);
    }

    #home .core .feature-list span::before{
      background: var(--blue);
    }

    

    @media (max-width: 1220px) {
      #home .topbar-inner{ width: min(1180px, calc(100vw - 40px)); }
      #home main{ width: min(1120px, calc(100vw - 44px)); }
      #home .hero{ grid-template-columns: minmax(0, 1fr) 360px; padding-left: 36px; padding-right: 36px; }
      #home h1{ font-size: 58px; }
      #home .journey-header{ grid-template-columns: minmax(0, 1fr) 360px; }
    }
  

    #home {
      color: var(--ink);
      background:
        radial-gradient(circle at 17% 14%, rgba(224, 188, 113, .18), transparent 26rem),
        radial-gradient(circle at 84% 10%, rgba(38, 49, 74, .10), transparent 24rem),
        linear-gradient(180deg, #fbf8f1 0%, var(--paper) 48%, var(--paper-2) 100%);
      border-radius: var(--radius-xl);
      padding: 28px 0 34px;
      overflow: hidden;
      position: relative;
    }

    #home::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .34;
      background-image:
        linear-gradient(rgba(255,255,255,.34) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.24) 1px, transparent 1px);
      background-size: 38px 38px;
      mask-image: radial-gradient(circle at 50% 8%, #000 0, transparent 72%);
    }

    #home .home-v17 {
      position: relative;
      z-index: 1;
      width: min(1160px, calc(100vw - 72px));
      margin: 0 auto;
      padding: 0;
    }

    @media (max-width: 1220px) {
      #home .home-v17 { width: min(1120px, calc(100vw - 44px)); }
    }


.plan-options-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.plan-option-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
  padding: 12px;
}

.plan-option-card.selected {
  border-color: var(--success);
  box-shadow: inset 0 0 0 1px rgba(22, 163, 74, 0.18);
}

.plan-option-card > div {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.plan-option-card p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  margin: 8px 0 10px;
}


/* FRONT-V2-MVP-EDIT mutation controls */
.mutation-controls {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(41, 37, 31, 0.14);
  border-radius: 14px;
  background: rgba(255, 252, 246, 0.78);
}
.mutation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mutation-stale,
.mutation-rejected {
  margin: 8px 0 0;
  font-size: 0.82rem;
  font-weight: 700;
}
.mutation-stale { color: #9a5d00; }
.mutation-rejected { color: #9f2a1f; }

/* Front V2 browser QA P0/P1 overflow hardening. Keep wide workbook content inside
   its scroll container and collapse guarded two-column surfaces on narrow viewports. */
#export .export-grid,
#export .export-grid > *,
#export .export-stack,
#export .export-stack > *,
#export .export-card,
#export .metric-row,
#export .technical-list,
#export .warning-card,
#export .export-disabled-note {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

#export .export-side {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

#export .excel-preview,
#export .excel-sheet.kp-scroll {
  min-width: 0;
  max-width: 100%;
  overflow: auto;
}

@media (max-width: 1260px) {
  #workspace .workspace-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "canvas"
      "decision" !important;
  }

  #workspace .decision-panel {
    position: static;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
}

@media (max-width: 980px) {
  #workspace .workspace-status,
  #export .export-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #export .export-shell {
    max-width: 100%;
  }
}

/* Front V2 browser QA P0/P1 mobile overflow closure. */
#workspace,
#workspace .workspace-shell,
#workspace .workspace-grid,
#workspace .canvas-card,
#workspace .decision-panel,
#workspace .decision-panel > *,
#workspace .rail-card,
#workspace .plan-options-list,
#workspace .plan-option-card,
#workspace .status-block,
#workspace .workspace-status,
#workspace .workspace-status > *,
#workspace .volume-stage,
#workspace .page-grid,
#workspace .fold-block {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}

#workspace .decision-panel {
  grid-template-columns: minmax(0, 1fr) !important;
  overflow-x: hidden;
}

#workspace .plan-option-card > div,
#workspace .metric-row,
#workspace .decision-row {
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
}

#workspace .plan-comparison {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

#workspace .spread-strip,
#workspace .editor-sequence {
  max-width: 100%;
  min-width: 0;
}

@media (max-width: 980px) {
  #workspace .decision-panel > *,
  #workspace .rail-card,
  #workspace .plan-option-card,
  #export .export-shell,
  #export .export-grid,
  #export .export-main,
  #export .export-side,
  #export .excel-preview,
  #export .excel-sheet.kp-scroll {
    width: 100% !important;
    max-width: 100% !important;
  }

  #export,
  #export .export-shell,
  #export .export-grid {
    min-width: 0;
    overflow-x: hidden;
  }
}

/* RECON-002 export readiness decision hierarchy. */
#export .export-hero.success {
  background: linear-gradient(135deg, rgba(229,248,238,.9), rgba(255,255,255,.94) 48%), #fff;
  border-color: #b9e2c8;
}

#export .export-hero.warning {
  background: linear-gradient(135deg, rgba(255,245,220,.86), rgba(255,255,255,.94) 48%), #fff;
  border-color: #ead6a4;
}

#export .export-hero.danger {
  background: linear-gradient(135deg, rgba(255,240,237,.9), rgba(255,255,255,.94) 48%), #fff;
  border-color: #f0beb5;
}

#export .export-hero-action {
  width: min(320px, 100%);
  display: grid;
  gap: 10px;
  align-content: start;
}

#export .export-hero-action [data-download-excel] {
  width: 100%;
}

#export .export-readiness-summary {
  grid-template-columns: repeat(4, minmax(120px, 1fr));
}

#export .export-next-action {
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(38,50,74,.12);
}

#export .warning-card.blocker {
  background: var(--danger-bg);
  border-color: #f0beb5;
}

#export .warning-card.blocker .warning-icon {
  color: var(--danger);
  border-color: #f0beb5;
}

#export .warning-card.blocker h3,
#export .warning-card.blocker p {
  color: #743128;
}

#export .warning-card.neutral {
  background: var(--surface-soft);
  border-color: var(--line);
}

#export .warning-card.neutral .warning-icon,
#export .warning-card.neutral h3,
#export .warning-card.neutral p {
  color: var(--muted);
}

@media (max-width: 980px) {
  #export .export-hero {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #export .export-readiness-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #export .export-hero-action {
    width: 100%;
  }
}

@media (max-width: 520px) {
  #export .export-readiness-summary {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* RECON-003 planning workspace scanability hierarchy. */
.page-card {
  align-items: stretch;
  border-width: 1px;
}
.page-card.selected {
  border: 2px solid #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18), 0 14px 28px rgba(15, 23, 42, 0.14);
}
.page-card.blocked {
  border-color: #b91c1c;
}
.page-identity {
  display: grid;
  gap: 2px;
}
.page-subtitle,
.page-source {
  color: #64748b;
  font-size: 0.78rem;
}
.page-map,
.page-source {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 6px;
}
.page-map span,
.page-source span {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 4px 6px;
  background: #f8fafc;
}
.page-selection-link {
  margin-top: 8px;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 5px 8px;
}
.fold-marker-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.tag.danger {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fecaca;
}
.tag.neutral {
  background: #f1f5f9;
  color: #475569;
  border-color: #e2e8f0;
}

/* Compact Project Setup runtime */
#setup.screen.active {
  min-height: calc(100vh - 90px);
}

.compact-setup-shell {
  max-width: 1320px;
  gap: 14px;
}

.setup-top-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px 240px;
  gap: 14px;
  align-items: center;
  padding: 16px 20px;
  border-radius: 24px;
}

.setup-top-copy .eyebrow,
.setup-top-copy .subcopy,
.setup-top-copy .h2 {
  margin-bottom: 0;
}

.setup-top-copy .subcopy {
  margin-top: 4px;
  max-width: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.setup-top-status {
  margin: 0;
  padding: 10px 12px;
}

.setup-top-status p {
  margin: 2px 0 0;
}

.setup-top-action {
  width: 100%;
}

.compact-setup-grid {
  grid-template-columns: minmax(0, 1fr) 318px;
  gap: 14px;
  align-items: stretch;
}

.setup-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 12px;
  align-content: start;
}

.setup-card {
  padding: 14px;
  border-radius: 20px;
}

.setup-card-identity,
.setup-card-constraints,
.setup-import-disclosure {
  grid-column: 1 / -1;
}

.identity-fields {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 96px;
}

.dense-fields {
  gap: 10px;
}

.setup-card .form-section-header {
  margin-bottom: 10px;
  gap: 10px;
}

.setup-card .eyebrow,
.compact-summary .eyebrow {
  margin-bottom: 2px;
}

.setup-card h2,
.compact-summary h2 {
  line-height: 1.1;
}

.setup-card label,
.setup-import-body label {
  font-size: 13px;
}

.setup-card input,
.setup-card select,
.setup-card textarea,
.setup-import-body input {
  min-height: 38px;
  padding: 9px 10px;
}

.compact-notes {
  display: block;
  margin-top: 10px;
}

.compact-notes textarea {
  min-height: 52px;
  max-height: 70px;
  resize: vertical;
}

.setup-import-disclosure {
  padding: 0;
  border-radius: 18px;
  overflow: hidden;
}

.setup-import-disclosure > summary,
.compact-import-preview > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}

.setup-import-disclosure > summary {
  padding: 12px 14px;
}

.setup-import-disclosure > summary::-webkit-details-marker,
.compact-import-preview > summary::-webkit-details-marker {
  display: none;
}

.setup-import-disclosure summary small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-weight: 650;
}

.setup-import-disclosure[open] summary .badge::before {
  content: "Expanded · ";
}

.setup-import-body {
  padding: 0 14px 14px;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.setup-import-body .micro {
  grid-column: 1 / -1;
  margin: 0;
}

.compact-summary {
  position: static;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 16px;
  border-radius: 22px;
}

.compact-summary .warning-checklist {
  gap: 8px;
  margin-top: 10px;
}

.compact-summary [data-project-input-candidate] {
  margin-top: 10px;
}

.compact-summary [data-project-input-candidate] .eyebrow,
.compact-summary [data-project-input-candidate] .micro {
  display: none;
}

.compact-summary .metric-row {
  padding: 7px 0;
  font-size: 13px;
}

.compact-summary .setup-summary-note {
  margin-top: 10px;
  padding: 10px;
}

.compact-import-summary p {
  margin: 3px 0 0;
}

.compact-import-preview {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-soft);
  overflow: hidden;
}

.compact-import-preview > summary {
  padding: 10px;
  font-size: 13px;
  font-weight: 820;
}

.compact-import-preview .image-import-groups,
.compact-import-preview .warning-checklist {
  padding: 0 10px 10px;
}

@media (min-width: 981px) and (max-height: 940px) {
  .global-shell {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .topbar {
    padding: 10px 0;
  }

  .setup-card {
    padding: 12px;
  }

  .setup-top-band {
    padding: 14px 18px;
  }

  .setup-card input,
  .setup-card select,
  .setup-card textarea,
  .setup-import-body input {
    min-height: 36px;
  }
}

@media (max-width: 980px) {
  .setup-top-band,
  .compact-setup-grid,
  .setup-main-grid,
  .identity-fields,
  .setup-import-body {
    grid-template-columns: 1fr;
  }

  .setup-card-identity,
  .setup-card-constraints,
  .setup-import-disclosure {
    grid-column: auto;
  }

  .setup-top-copy .subcopy {
    white-space: normal;
  }
}

/* Planning Workspace redesign wireframe runtime mapping. */
#workspace .workspace-shell {
  gap: 14px;
}
#workspace .workspace-status[data-testid="workspace-decision-strip"] {
  position: sticky;
  top: 74px;
  z-index: 6;
  padding: 14px 18px;
  grid-template-columns: minmax(250px, .9fr) minmax(320px, 1.1fr) minmax(285px, auto);
  gap: 14px;
  border: 1px solid #d9d1c3;
  border-left: 12px solid #25314a;
  background: rgba(255, 253, 248, .96);
  box-shadow: 0 14px 30px rgba(16, 24, 40, .10);
}
#workspace .workspace-status[data-testid="workspace-decision-strip"] .project-title-block h1 {
  font-size: 23px;
}
#workspace .workspace-status[data-testid="workspace-decision-strip"] .project-title-block p:not(.eyebrow) {
  font-size: 12px;
}
#workspace .workspace-status[data-testid="workspace-decision-strip"] .status-block {
  padding: 10px 12px;
  gap: 4px;
  border: 1px solid #e2bd62;
  background: #fff5dc;
}
#workspace .workspace-status[data-testid="workspace-decision-strip"] .status-block p:nth-of-type(n+2) {
  display: none;
}
#workspace .workspace-status-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: center;
}
#workspace .workspace-status-actions button {
  min-height: 36px;
  padding: 8px 13px;
  font-size: 12px;
}
#workspace .workspace-status-actions [data-testid="workspace-primary-select-plan"],
#workspace .workspace-primary-decision-card .mini-action-row button:first-child {
  background: #25314a;
  border-color: #25314a;
  color: #fff;
  box-shadow: 0 10px 20px rgba(37, 49, 74, .18);
}
#workspace .workspace-grid {
  display: grid;
  grid-template-columns: minmax(270px, 320px) minmax(720px, 1fr) minmax(320px, 360px);
  gap: 16px;
  align-items: start;
}
#workspace .workspace-left-rail,
#workspace .workspace-right-inspector {
  display: grid;
  gap: 12px;
  min-width: 0;
}
#workspace .workspace-left-rail {
  position: sticky;
  top: 238px;
  max-height: calc(100vh - 250px);
  overflow: auto;
  padding-right: 2px;
}
#workspace .workspace-right-inspector {
  position: sticky;
  top: 238px;
  max-height: calc(100vh - 250px);
  overflow: auto;
  padding-right: 2px;
}
#workspace .canvas-card {
  padding: 16px;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
#workspace .book-overview {
  display: grid;
  margin-bottom: 10px;
}
#workspace .canvas-tools {
  display: none;
}
#workspace .volume-note-grid {
  display: none;
}
#workspace .canvas-header {
  margin-bottom: 10px;
}
#workspace .canvas-notice {
  margin-bottom: 10px;
  padding: 8px 10px;
}
#workspace .volume-stage {
  padding: 12px;
}
#workspace .volume-stage-header {
  margin-bottom: 8px;
}
#workspace .volume-page {
  min-height: 96px;
}
#workspace .spread-strip.editor-sequence {
  grid-template-columns: repeat(5, minmax(128px, 1fr));
  gap: 8px;
}
#workspace .workspace-left-plan-options {
  border: 1px solid #b9c8db;
  background: linear-gradient(180deg, #eef3fb, #fff);
}
#workspace .workspace-left-plan-options .recommended-plan-card {
  display: none;
}
#workspace .workspace-secondary-structure {
  opacity: .95;
  max-height: none;
  overflow: visible;
  padding: 12px;
}
#workspace .workspace-secondary-structure .rail-summary {
  grid-template-columns: 1fr 1fr;
}
#workspace .workspace-secondary-structure .rail-summary .summary-tile {
  padding: 8px;
}
#workspace .workspace-left-compare {
  margin-top: 22px;
  opacity: .78;
}
#workspace .workspace-left-compare summary,
#workspace .workspace-inspector-details summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-weight: 850;
  color: var(--ink);
}
#workspace .workspace-primary-decision-card {
  padding: 14px;
  border: 1px solid #d9d1c3;
  background: #fbf8f1;
  box-shadow: var(--shadow-xs);
}
#workspace .workspace-primary-decision-card h2 {
  font-size: 18px;
  margin-bottom: 6px;
}
#workspace .workspace-primary-decision-card .impact-summary {
  margin-top: 6px;
  padding: 9px;
  gap: 4px;
}
#workspace .workspace-primary-decision-card .mini-action-row {
  margin-top: 8px;
}
#workspace .workspace-inspector-secondary {
  padding: 12px;
  display: grid;
  gap: 8px;
  background: #fff5dc;
  border-color: #e2bd62;
}
#workspace .workspace-inspector-details {
  margin-top: 22px;
  opacity: .82;
}
#workspace .workspace-inspector-details:not([open]) > :not(summary) {
  display: none;
}
#workspace .page-card .page-source.detail-only {
  display: none;
}
#workspace .page-card .page-map.compact {
  font-size: 11px;
  gap: 6px;
}
#workspace .page-card .page-identity .page-subtitle {
  display: none;
}
#workspace .page-card[data-drag-drop-state="enabled"]::after {
  content: "Move page";
}
#workspace .volume-page.selected::after {
  content: "Preview focus";
}
#workspace .workspace-editor-hint {
  margin: 0;
  color: var(--muted);
}
#workspace .mutation-stale {
  color: #8a5a00;
  background: var(--warning-bg);
  border: 1px solid #ecd59c;
  border-radius: 10px;
  padding: 8px 10px;
}
@media (max-width: 1500px) {
  #workspace .workspace-grid {
    grid-template-columns: minmax(240px, 300px) minmax(620px, 1fr) minmax(300px, 340px);
  }
  #workspace .spread-strip.editor-sequence {
    grid-template-columns: repeat(5, minmax(112px, 1fr));
  }
}
@media (max-width: 1260px) {
  #workspace .workspace-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "canvas"
      "left"
      "inspector" !important;
  }
  #workspace .workspace-left-rail,
  #workspace .workspace-right-inspector {
    position: static;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
  #workspace .workspace-left-rail { grid-area: left; }
  #workspace .canvas-card { grid-area: canvas; }
  #workspace .workspace-right-inspector { grid-area: inspector; }
}
@media (max-width: 980px) {
  #workspace .workspace-status[data-testid="workspace-decision-strip"] {
    position: static;
    grid-template-columns: minmax(0, 1fr);
    top: auto;
  }
  #workspace .workspace-status-actions {
    justify-content: stretch;
  }
  #workspace .workspace-status-actions > * {
    flex: 1 1 100%;
  }
}

/* Planning Workspace V2 UX 9.5 runtime alignment */
.workspace-ux95 .decision-strip-ux95 {
  align-items: stretch;
  gap: 18px;
}

.workspace-grid-ux95 {
  grid-template-columns: minmax(240px, 300px) minmax(520px, 1fr) minmax(260px, 320px);
}

.workspace-ux95 .status-block p {
  margin: 4px 0 0;
}

.ux95-list,
.checklist-numbered {
  margin: 12px 0 0;
  padding-left: 20px;
  color: var(--ink-soft);
}

.ux95-list li,
.checklist-numbered li {
  margin: 8px 0;
}

.checklist-numbered li span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-top: 2px;
}

.warning-focus {
  align-items: flex-start;
  border-color: #f0d48b;
  background: linear-gradient(135deg, #fff8e7 0%, #fffdf7 100%);
}

.ux95-sequence {
  display: grid;
  grid-template-columns: repeat(8, minmax(76px, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.ux95-page {
  min-height: 118px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-xs);
}

.ux95-page strong {
  font-size: 24px;
  letter-spacing: -.04em;
}

.ux95-page span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.ux95-page.chapter {
  background: var(--accent-soft);
  border-color: #cfd6e3;
}

.ux95-page.review {
  background: var(--warning-bg);
  border-color: #e7c56d;
}

.ux95-page.filler {
  background: #f7f0e4;
  border-style: dashed;
}

.ux95-page.color {
  background: #eef4fb;
  border-color: #bfd0e4;
}

.ux95-page.protected {
  box-shadow: inset 0 0 0 2px rgba(47, 111, 78, .28);
}

.protected-spread-callout,
.after-review-summary {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px 14px;
  background: var(--success-bg);
  color: var(--success);
  font-weight: 760;
}

.after-review-summary {
  background: var(--surface-soft);
  color: var(--ink-soft);
}

.right-inspector-ux95 .panel {
  position: sticky;
  top: 96px;
}

.then-use-strip {
  margin-top: 14px;
  font-weight: 760;
  color: var(--accent);
}

@media (max-width: 1100px) {
  .workspace-grid-ux95 {
    grid-template-columns: 1fr;
  }

  .ux95-sequence {
    grid-template-columns: repeat(4, minmax(72px, 1fr));
  }
}

/* Planning Workspace UX95 layout ownership: keep scoped overrides after legacy workspace rules. */

#workspace .workspace-shell.workspace-ux95 {
  padding-top: 4px;
}
#workspace .workspace-shell.workspace-ux95 .workspace-grid.workspace-grid-ux95 {
  display: grid;
  grid-template-columns: minmax(260px, 300px) minmax(620px, 1fr) minmax(300px, 340px);
  grid-template-areas: "left canvas inspector";
  gap: 16px;
  align-items: start;
}

#workspace .workspace-shell.workspace-ux95 .workspace-grid.workspace-grid-ux95 > .workspace-left-rail {
  grid-area: left;
  grid-column: 1;
}

#workspace .workspace-shell.workspace-ux95 .workspace-grid.workspace-grid-ux95 > .canvas-ux95 {
  grid-area: canvas;
  grid-column: 2;
  min-width: 0;
}

#workspace .workspace-shell.workspace-ux95 .workspace-grid.workspace-grid-ux95 > .right-inspector-ux95,
#workspace .workspace-shell.workspace-ux95 .workspace-grid.workspace-grid-ux95 > .workspace-side-panel.right-inspector-ux95 {
  grid-area: inspector;
  grid-column: 3;
}

#workspace .workspace-shell.workspace-ux95 .workspace-status[data-testid="workspace-decision-strip"] .status-block p:nth-of-type(n+2) {
  display: block;
}

#workspace .workspace-shell.workspace-ux95 .canvas-ux95 .view-toggle {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  white-space: nowrap;
}

#workspace .workspace-shell.workspace-ux95 .right-inspector-ux95 .eyebrow {
  text-transform: none;
  letter-spacing: 0;
}

#workspace .workspace-shell.workspace-ux95 [data-testid="workspace-selected-plan-summary"] {
  display: block;
  min-height: 1.2em;
}

@media (max-width: 1260px) {
  #workspace .workspace-shell.workspace-ux95 .workspace-grid.workspace-grid-ux95 {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "left"
      "canvas"
      "inspector" !important;
  }

  #workspace .workspace-shell.workspace-ux95 .workspace-grid.workspace-grid-ux95 > .workspace-left-rail,
  #workspace .workspace-shell.workspace-ux95 .workspace-grid.workspace-grid-ux95 > .canvas-ux95,
  #workspace .workspace-shell.workspace-ux95 .workspace-grid.workspace-grid-ux95 > .right-inspector-ux95,
  #workspace .workspace-shell.workspace-ux95 .workspace-grid.workspace-grid-ux95 > .workspace-side-panel.right-inspector-ux95 {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

#workspace [data-testid="workspace-root"] {
  width: 100%;
  max-width: 100%;
  display: grid;
  gap: 18px;
}
#workspace .workspace-shell.workspace-ux95[data-testid="workspace-root"] {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-flow: row;
  align-items: stretch;
}
#workspace .workspace-shell.workspace-ux95[data-testid="workspace-root"] > [data-testid="workspace-decision-strip"],
#workspace .workspace-shell.workspace-ux95[data-testid="workspace-root"] > [data-testid="workspace-import-surface"] {
  grid-area: auto !important;
  grid-column: 1 / -1 !important;
}
#workspace .workspace-shell.workspace-ux95[data-testid="workspace-root"] > [data-testid="workspace-decision-strip"] {
  position: static;
}
#workspace [data-testid="workspace-root"][data-workspace-state="IMPORTED_PAGES"] {
  min-height: calc(100vh - 144px);
}
#workspace .workspace-status[data-testid="workspace-decision-strip"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, .42fr) auto;
  gap: 16px;
  align-items: stretch;
  width: 100%;
}
#workspace .workspace-import-surface {
  width: 100%;
  min-height: 560px;
  padding: clamp(16px, 2vw, 24px);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  overflow: visible;
}
#workspace .workspace-import-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
#workspace .workspace-import-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 16px;
  overflow: visible;
  align-items: stretch;
}
#workspace .workspace-import-empty {
  grid-column: 1 / -1;
  border: 1px dashed var(--line-strong);
  border-radius: 24px;
  min-height: 360px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 34px;
  background: rgba(255,255,255,.72);
}
#workspace .workspace-import-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  padding: 12px;
  display: grid;
  grid-template-rows: auto minmax(180px, auto) auto;
  gap: 10px;
  min-width: 0;
  cursor: grab;
  box-shadow: var(--shadow-xs);
  outline-offset: 4px;
  z-index: 1;
}

#workspace .workspace-import-card:active { cursor: grabbing; }
#workspace .workspace-import-card:focus-visible {
  border-color: #9aa8be;
  box-shadow: var(--focus), var(--shadow-sm);
}
#workspace .workspace-import-card.dragging,
#workspace .workspace-import-card[data-drag-state="dragging"] {
  opacity: .46;
  transform: scale(.985);
}
#workspace .workspace-import-drag {
  justify-self: start;
  min-height: 24px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 8px;
}
#workspace .workspace-import-thumb {
  aspect-ratio: 3 / 4;
  min-height: 172px;
  border-radius: 14px;
  background: linear-gradient(145deg, #f8fafc, #e5e7eb);
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.08);
}
#workspace .workspace-import-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}
#workspace .workspace-import-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  gap: 8px;
  place-items: center;
  text-align: center;
  padding: 14px;
  color: var(--muted);
}
#workspace .workspace-import-fallback strong {
  color: var(--ink);
  font-size: 1.35rem;
  letter-spacing: .08em;
}
#workspace .workspace-import-fallback small {
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: 11px;
}

#workspace .workspace-import-generic-thumb {
  width: 100%;
  height: 100%;
  display: grid;
  gap: 10px;
  place-items: center;
  text-align: center;
  padding: 18px;
  color: #334155;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(241,245,249,.92)),
    repeating-linear-gradient(0deg, rgba(148,163,184,.14), rgba(148,163,184,.14) 1px, transparent 1px, transparent 18px);
}
#workspace .workspace-import-generic-thumb strong {
  color: #0f172a;
  font-size: 1.15rem;
  letter-spacing: .12em;
}
#workspace .workspace-import-generic-thumb span {
  font-weight: 800;
}
#workspace .workspace-import-generic-thumb small {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}
#workspace .workspace-import-meta {
  display: grid;
  gap: 6px;
  min-width: 0;
}
#workspace .workspace-import-meta strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#workspace .workspace-import-type,
#workspace .workspace-import-warning {
  overflow-wrap: anywhere;
}
#workspace .workspace-reader-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(15,23,42,.62);
  display: grid;
  place-items: center;
  padding: 24px;
}
#workspace .workspace-reader-dialog {
  width: min(1040px, 94vw);
  max-height: 94vh;
  overflow: auto;
  background: var(--surface);
  border-radius: 24px;
  padding: 22px;
  box-shadow: 0 24px 80px rgba(15,23,42,.35);
  text-align: center;
}
#workspace .workspace-reader-stage {
  min-height: min(620px, 64vh);
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #f8fafc;
  border: 1px solid var(--line);
  margin: 12px 0;
  overflow: hidden;
}
#workspace .workspace-reader-stage img {
  max-width: 100%;
  max-height: 68vh;
  object-fit: contain;
}
#workspace .workspace-reader-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
#workspace .workspace-import-surface.drag-over { outline: 3px solid var(--accent); outline-offset: 4px; }
@media (max-width: 1280px) {
  #workspace .workspace-import-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}
@media (max-width: 980px) {
  #workspace .workspace-status[data-testid="workspace-decision-strip"] { grid-template-columns: minmax(0, 1fr); }
  #workspace .workspace-import-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}
@media (max-width: 430px) {
  #workspace .workspace-import-surface { padding: 12px; }
  #workspace .workspace-import-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #workspace .workspace-import-card { grid-template-rows: auto minmax(154px, auto) auto; }
  #workspace .workspace-reader-backdrop { padding: 10px; }
}

/* In-place fold management MVP */
#workspace .workspace-fold-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
#workspace .workspace-view-toggle {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.78);
}
#workspace .workspace-view-toggle .active,
#workspace [data-workspace-select-pages]:not([disabled]) {
  border-color: rgba(37,99,235,.35);
  box-shadow: 0 0 0 3px rgba(37,99,235,.08);
}
#workspace .workspace-selection-bar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid rgba(37,99,235,.18);
  border-radius: 16px;
  background: rgba(239,246,255,.72);
}
#workspace .workspace-import-card-topline {
  display: flex;
  align-items: center;
  gap: 8px;
}
#workspace .workspace-import-select {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  display: grid;
  place-items: center;
  padding: 0;
}
#workspace .workspace-import-card.selected .workspace-import-select {
  border-color: #2563eb;
  background: #2563eb;
}
#workspace .workspace-fold-card-badge {
  margin-left: auto;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 850;
  color: #1e3a8a;
  background: rgba(219,234,254,.92);
}
#workspace .workspace-import-card.in-fold {
  box-shadow: none;
}

#workspace .workspace-import-grid.fold-view {
  align-items: start;
}
#workspace .workspace-import-grid.fold-view .workspace-fold-block.grid-view {
  padding: 8px;
  border-radius: 22px;
  border-width: 1px;
  box-shadow: 0 10px 26px rgba(15,23,42,.08);
}
#workspace .workspace-import-grid.fold-view .workspace-fold-header {
  min-height: 28px;
  margin-bottom: 8px;
}
#workspace .workspace-import-grid.fold-view .workspace-fold-header strong {
  border-radius: 999px;
  padding: 4px 9px;
  border: 1px solid rgba(37,99,235,.18);
  background: rgba(255,255,255,.78);
  color: #1e3a8a;
  font-size: 11px;
  font-weight: 850;
}
#workspace .workspace-import-grid.fold-view .workspace-fold-pages {
  grid-template-columns: repeat(var(--workspace-fold-cols, 1), minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
#workspace .workspace-import-grid.fold-view .workspace-import-card.in-fold {
  border-color: rgba(37,99,235,.20);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow-xs);
}
#workspace .workspace-import-card.drop-before::after,
#workspace .workspace-import-card.drop-after::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  height: 4px;
  border-radius: 999px;
  background: #2563eb;
  box-shadow: 0 0 0 4px rgba(37,99,235,.14);
  z-index: 3;
  pointer-events: none;
}
#workspace .workspace-import-card.drop-before::after { top: -8px; }
#workspace .workspace-import-card.drop-after::after { bottom: -8px; }
#workspace .workspace-import-card.drop-into-fold {
  outline: 2px solid rgba(37,99,235,.38);
  outline-offset: 3px;
}
#workspace .workspace-import-card.drop-to-neutral {
  outline: 2px solid rgba(15,23,42,.28);
  outline-offset: 3px;
}
#workspace .workspace-import-card.selected,
#workspace .workspace-import-card[data-selected="true"] {
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 4px rgba(37,99,235,.10), var(--shadow-xs);
}
#workspace .workspace-fold-block {
  grid-column: span var(--workspace-fold-span, 2);
  min-width: 0;
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 20px;
  padding: 12px;
  background: rgba(248,250,252,.74);
  box-shadow: var(--shadow-xs);
  overflow: visible;
}
#workspace .workspace-import-grid.section-view .workspace-fold-block {
  grid-column: 1 / -1;
}
#workspace .workspace-fold-block.fold-tone-1 { background: rgba(236,253,245,.72); border-color: rgba(22,163,74,.28); }
#workspace .workspace-fold-block.fold-tone-2 { background: rgba(255,251,235,.76); border-color: rgba(245,158,11,.42); }
#workspace .workspace-fold-block.fold-tone-3 { background: rgba(239,246,255,.76); border-color: rgba(37,99,235,.32); }
#workspace .workspace-fold-block.fold-tone-4 { background: rgba(245,243,255,.76); border-color: rgba(124,58,237,.28); }
#workspace .workspace-fold-block.fold-tone-5 { background: rgba(255,247,237,.76); border-color: rgba(249,115,22,.28); }
#workspace .workspace-fold-block.fold-tone-6 { background: rgba(236,254,255,.76); border-color: rgba(8,145,178,.28); }
#workspace .workspace-fold-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  overflow: visible;
  position: relative;
  z-index: 20;
}
#workspace .workspace-fold-header strong {
  font-size: .92rem;
  color: var(--ink);
}
#workspace .workspace-fold-spacer { flex: 1; }
#workspace .workspace-fold-pages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(156px, 1fr));
  gap: 12px;
  align-items: stretch;
}
#workspace .workspace-fold-drop-zone {
  min-height: 100%;
  border: 1px dashed rgba(245,158,11,.65);
  border-radius: 16px;
  display: grid;
  place-items: center;
  text-align: center;
  color: #92400e;
  font-weight: 750;
  font-size: 12px;
  padding: 14px;
  background: rgba(255,255,255,.42);
}
#workspace .workspace-fold-drop-zone.drop-active {
  background: rgba(254,243,199,.92);
  box-shadow: inset 0 0 0 2px rgba(245,158,11,.35);
}
#workspace .workspace-fold-warning {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border: 1px solid rgba(245,158,11,.28);
  border-radius: 999px;
  color: #b45309;
  background: rgba(254,243,199,.95);
  cursor: help;
  font: inherit;
  line-height: 1;
  padding: 0;
  z-index: 25;
}
#workspace .workspace-fold-warning:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}
#workspace .workspace-fold-tooltip {
  position: absolute;
  z-index: 120;
  left: 0;
  top: calc(100% + 8px);
  min-width: 260px;
  max-width: min(320px, calc(100vw - 48px));
  display: none;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(245,158,11,.55);
  background: #fff7ed;
  box-shadow: 0 18px 38px rgba(15,23,42,.18);
  color: #78350f;
  text-align: left;
  font-size: 12px;
  line-height: 1.35;
  white-space: normal;
  pointer-events: none;
}
#workspace .workspace-fold-tooltip strong {
  display: block;
  color: #78350f;
  font-size: 12px;
  font-weight: 900;
}
#workspace .workspace-fold-tooltip span { display: block; font-weight: 650; }
#workspace .workspace-fold-warning:hover .workspace-fold-tooltip,
#workspace .workspace-fold-warning:focus .workspace-fold-tooltip,
#workspace .workspace-fold-warning:focus-within .workspace-fold-tooltip,
#workspace .workspace-fold-warning[data-warning-open="true"] .workspace-fold-tooltip {
  display: grid;
}
@media (max-width: 980px) {
  #workspace .workspace-fold-block { grid-column: 1 / -1; }
  #workspace .workspace-selection-bar { justify-content: flex-start; }
}

#workspace .workspace-import-card.filler-card,
#workspace .workspace-import-card[data-asset-kind="filler"] {
  border-style: dashed;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}
#workspace .workspace-import-filler-thumb {
  width: 100%;
  height: 100%;
  display: grid;
  gap: 10px;
  place-items: center;
  text-align: center;
  padding: 18px;
  color: #475569;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,250,252,.96)),
    repeating-linear-gradient(45deg, rgba(148,163,184,.16), rgba(148,163,184,.16) 1px, transparent 1px, transparent 14px);
}
#workspace .workspace-import-filler-thumb strong {
  color: #0f172a;
  font-size: 1.15rem;
  letter-spacing: .16em;
}
#workspace .workspace-import-filler-thumb span {
  font-weight: 900;
}
#workspace .workspace-import-filler-thumb small {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* Planning Workspace layout contract: runtime Workspace stacks vertically. */
#workspace .workspace-shell.workspace-ux95[data-testid="workspace-root"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-flow: row;
  align-items: stretch;
  gap: 18px;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

#workspace .workspace-shell.workspace-ux95[data-testid="workspace-root"] > .workspace-status,
#workspace .workspace-shell.workspace-ux95[data-testid="workspace-root"] > .workspace-import-surface,
#workspace .workspace-shell.workspace-ux95[data-testid="workspace-root"] > .workspace-plan-authority {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

#workspace .workspace-status[data-testid="workspace-decision-strip"] {
  position: static;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(240px, .48fr) minmax(320px, auto);
  gap: 14px;
  align-items: center;
  overflow-x: hidden;
}

#workspace .workspace-status[data-testid="workspace-decision-strip"] > *,
#workspace .workspace-status[data-testid="workspace-decision-strip"] .project-title-block,
#workspace .workspace-status[data-testid="workspace-decision-strip"] .status-block,
#workspace .workspace-status[data-testid="workspace-decision-strip"] .workspace-status-actions {
  min-width: 0;
}

#workspace .workspace-status[data-testid="workspace-decision-strip"] .project-title-block h1 {
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

#workspace .workspace-status[data-testid="workspace-decision-strip"] .project-title-block p,
#workspace .workspace-status[data-testid="workspace-decision-strip"] .status-block p,
#workspace .workspace-status[data-testid="workspace-decision-strip"] .status-block strong {
  overflow-wrap: normal;
  word-break: normal;
}

#workspace .workspace-status-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  max-width: 100%;
}

#workspace .workspace-status-actions button {
  flex: 0 1 auto;
  white-space: nowrap;
}

#workspace .workspace-plan-authority {
  position: static;
  align-self: stretch;
  justify-self: stretch;
  display: grid;
  gap: 16px;
}

#workspace .workspace-plan-authority-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  min-width: 0;
}

#workspace .workspace-plan-authority-header > div:first-child {
  min-width: min(100%, 280px);
  flex: 1 1 360px;
}

#workspace .workspace-plan-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

#workspace .workspace-plan-actions button {
  white-space: nowrap;
}

@media (max-width: 1120px) {
  #workspace .workspace-status[data-testid="workspace-decision-strip"] {
    grid-template-columns: minmax(0, 1fr) minmax(220px, .55fr);
  }

  #workspace .workspace-status-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  #workspace .workspace-status[data-testid="workspace-decision-strip"] {
    grid-template-columns: minmax(0, 1fr);
  }

  #workspace .workspace-status-actions,
  #workspace .workspace-plan-actions {
    justify-content: stretch;
  }

  #workspace .workspace-status-actions button,
  #workspace .workspace-plan-actions button {
    flex: 1 1 100%;
  }
}

/* Final Daiwari review: one factual reading path from recap to handoff. */
#export .export-shell {
  width: min(1180px, calc(100% - 32px));
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 0 48px;
  display: grid;
  gap: 16px;
}

#export .export-final-header,
#export .export-final-card,
#export .export-technical-details,
#export .export-action-bar {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 12px 32px rgba(31, 28, 23, 0.06);
}

#export .export-final-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 18px;
  padding: 22px;
  border-top: 4px solid var(--success);
}

#export .export-final-header.warning { border-top-color: var(--warning); }
#export .export-final-header.danger { border-top-color: var(--danger); }

#export .export-back-button {
  margin-top: 2px;
  white-space: nowrap;
}

#export .export-final-title h1 {
  margin: 3px 0 6px;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

#export .export-final-title > p:last-child,
#export .export-final-status small,
#export .export-section-heading p,
#export .export-action-bar p {
  color: var(--muted);
}

#export .export-final-status {
  width: min(250px, 100%);
  display: grid;
  justify-items: end;
  gap: 8px;
  text-align: right;
}

#export .export-final-card {
  padding: 22px;
}

#export .export-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

#export .export-section-heading h2,
#export .export-section-heading h3,
#export .export-action-bar h2 {
  margin: 3px 0 0;
}

#export .export-section-heading p:not(.eyebrow) {
  margin: 6px 0 0;
  font-size: 13px;
}

#export .export-plan-tag {
  max-width: 300px;
  padding: 7px 10px;
  border: 1px solid #cbd4e2;
  border-radius: 999px;
  background: #f5f7fb;
  color: #34435b;
  font-size: 12px;
  font-weight: 750;
  text-align: center;
}

#export .export-recap-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

#export .export-recap-grid > div {
  min-height: 90px;
  padding: 14px;
  display: grid;
  align-content: space-between;
  border-radius: 14px;
  background: #f7f5ef;
  border: 1px solid #e6e0d5;
}

#export .export-recap-grid span,
#export .export-recap-meta small,
#export .export-fold-range span,
#export .export-fold-contents > span,
#export .export-fold-filler span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

#export .export-recap-grid strong {
  font-size: 26px;
  line-height: 1;
}

#export .export-recap-meta {
  margin-top: 12px;
  padding-top: 14px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  border-top: 1px solid var(--line);
}

#export .export-recap-meta > span {
  min-width: 0;
  display: grid;
  gap: 4px;
}

#export .export-recap-meta strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#export .export-schedule-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
}

#export .export-schedule-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

#export .legend-swatch {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: #d6d2ca;
}

#export .legend-swatch.color { background: #dd6b4d; }
#export .legend-swatch.filler { background: #e9c85b; }

#export .export-fold-list {
  display: grid;
  gap: 8px;
}

#export .export-fold-row {
  display: grid;
  grid-template-columns: minmax(132px, 0.8fr) auto minmax(112px, 0.65fr) minmax(260px, 2fr) minmax(64px, 0.45fr);
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid #e2ded6;
  border-left: 4px solid #9ba3af;
  border-radius: 13px;
  background: #fbfaf7;
}

#export .export-fold-row[data-fold-mode="4C"] {
  border-left-color: #dd6b4d;
  background: #fff8f5;
}

#export .export-fold-identity {
  display: flex;
  align-items: center;
  gap: 10px;
}

#export .export-fold-identity > div,
#export .export-fold-range,
#export .export-fold-contents,
#export .export-fold-filler {
  min-width: 0;
  display: grid;
  gap: 3px;
}

#export .export-fold-identity small {
  color: var(--muted);
}

#export .export-fold-number {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 10px;
  background: #ebe8e1;
  font-weight: 800;
}

#export .export-mode-chip {
  min-width: 42px;
  padding: 5px 8px;
  border-radius: 999px;
  background: #e9e7e2;
  color: #4d545d;
  font-size: 11px;
  font-weight: 850;
  text-align: center;
}

#export [data-fold-mode="4C"] .export-mode-chip {
  background: #f8d7cc;
  color: #8e3d27;
}

#export .export-fold-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

#export .export-fold-labels span {
  max-width: 100%;
  padding: 3px 7px;
  overflow: hidden;
  border: 1px solid #ddd8cd;
  border-radius: 7px;
  background: white;
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#export .export-fold-no-labels {
  margin: 0;
  color: #97928a;
  font-size: 12px;
}

#export .export-fold-filler {
  justify-items: end;
  text-align: right;
}

#export .export-fold-filler strong { font-size: 18px; }
#export .export-fold-filler.has-fillers strong { color: #936c00; }

#export .export-check-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

#export .export-check-columns > section {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #faf9f6;
}

#export .export-check-columns .export-section-heading { margin-bottom: 12px; }

#export .export-clear-check {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px;
  border: 1px solid #c9e5d3;
  border-radius: 14px;
  background: #eef9f2;
}

#export .export-clear-check > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #caecd7;
  color: #176437;
  font-weight: 900;
}

#export .export-clear-check p { margin: 3px 0 0; color: #4e6757; }

#export .export-acknowledgement {
  margin-top: 12px;
  padding: 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-radius: 12px;
  background: #fff3d7;
}

#export .export-acknowledgement span { display: grid; gap: 3px; }
#export .export-acknowledgement small { color: #7a621f; }

#export .export-technical-details {
  overflow: hidden;
}

#export .export-technical-details > summary {
  padding: 16px 20px;
  cursor: pointer;
  font-weight: 750;
}

#export .export-technical-body {
  padding: 0 20px 20px;
  border-top: 1px solid var(--line);
}

#export .export-action-bar {
  position: sticky;
  bottom: 12px;
  z-index: 4;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-color: #c6d4ea;
  box-shadow: 0 18px 45px rgba(32, 48, 73, 0.16);
}

#export .export-action-bar > div { min-width: 0; }
#export .export-action-bar h2 { overflow-wrap: anywhere; }
#export .export-action-bar p { margin: 5px 0 0; font-size: 12px; }
#export .export-action-bar button { min-width: 250px; }
#export .export-result-copy:empty { display: none; }

#export .export-final-empty {
  padding: 32px;
  display: grid;
  gap: 5px;
  justify-items: center;
  border: 1px dashed var(--line);
  border-radius: 14px;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 980px) {
  #export .export-recap-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #export .export-recap-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #export .export-fold-row { grid-template-columns: minmax(132px, 1fr) auto minmax(112px, 0.8fr) minmax(180px, 1.5fr); }
  #export .export-fold-filler { grid-column: 4; justify-items: start; text-align: left; }
}

@media (max-width: 720px) {
  #export .export-shell { width: min(100% - 20px, 1180px); padding-top: 14px; }
  #export .export-final-header { grid-template-columns: minmax(0, 1fr); }
  #export .export-final-status { width: 100%; justify-items: start; text-align: left; }
  #export .export-section-heading { display: grid; }
  #export .export-plan-tag { max-width: 100%; justify-self: start; }
  #export .export-recap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #export .export-recap-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #export .export-fold-row { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  #export .export-fold-range,
  #export .export-fold-contents,
  #export .export-fold-filler { grid-column: 1 / -1; justify-items: start; text-align: left; }
  #export .export-check-columns { grid-template-columns: minmax(0, 1fr); }
  #export .export-action-bar { position: static; display: grid; }
  #export .export-action-bar button { width: 100%; min-width: 0; }
}

/* Manual Build: a web-native production sheet */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#home .home-workflow-choices {
  display: grid;
  gap: 9px;
  width: min(100%, 540px);
  margin-top: 24px;
}

#home .home-workflow-choice {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 70px;
  padding: 12px 15px;
  border: 1px solid rgba(38, 49, 74, .14);
  border-radius: 16px;
  color: #182033;
  background: rgba(255, 255, 255, .66);
  text-decoration: none;
  box-shadow: 0 1px 1px rgba(24, 32, 51, .03);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

#home .home-workflow-choice:hover,
#home .home-workflow-choice:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(38, 49, 74, .34);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 10px 26px rgba(24, 32, 51, .09);
  outline: none;
}

#home .home-workflow-choice.featured {
  color: #fff;
  background: linear-gradient(135deg, #202a41 0%, #33466a 100%);
  border-color: transparent;
  box-shadow: 0 14px 28px rgba(38, 49, 74, .18);
}

#home .home-workflow-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #34415c;
  background: #eef1f6;
  font-size: 11px;
  font-weight: 850;
}

#home .featured .home-workflow-icon {
  color: #fff;
  background: rgba(255, 255, 255, .12);
}

#home .home-workflow-choice strong,
#home .home-workflow-choice small {
  display: block;
}

#home .home-workflow-choice strong {
  font-size: 14px;
  letter-spacing: -.01em;
}

#home .home-workflow-choice small {
  margin-top: 2px;
  color: #6b7180;
  font-size: 12px;
}

#home .featured small {
  color: rgba(255, 255, 255, .70);
}

#home .home-workflow-arrow {
  font-size: 18px;
}

#home .home-workflow-choices > button[disabled] {
  justify-self: start;
  min-height: 28px;
  padding: 3px 2px;
  color: #777b83;
  border: 0;
  background: transparent;
  font-size: 11px;
  box-shadow: none;
}

#manual.screen.active {
  display: block;
}

/* Manual Build · Proposal B compact production table */
#manual .manual-build-shell {
  --manual-navy: #18243d;
  --manual-blue: #315f9f;
  --manual-blue-soft: #edf5ff;
  --manual-green: #2d7547;
  --manual-green-soft: #edf7ef;
  --manual-amber: #a76b00;
  --manual-amber-soft: #fff7e5;
  --manual-red: #b43d36;
  --manual-red-soft: #fff1ef;
  min-height: calc(100vh - 132px);
  padding-bottom: 32px;
}

#manual .manual-project-bar {
  position: sticky;
  top: 76px;
  z-index: 32;
  min-height: 56px;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto auto auto auto auto auto;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid #cfd7e2;
  border-radius: 12px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 5px 18px rgba(24, 36, 61, .07);
  backdrop-filter: blur(14px);
}

#manual .manual-project-identity {
  min-width: 0;
}

#manual .manual-project-identity input {
  width: 100%;
  min-height: 32px;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--manual-navy);
  background: transparent;
  font-size: 14px;
  font-weight: 820;
  letter-spacing: -.015em;
}

#manual .manual-project-identity input:hover,
#manual .manual-project-identity input:focus {
  border-color: #b8c7da;
  background: #f8fbff;
  box-shadow: 0 0 0 2px rgba(49, 95, 159, .12);
}

#manual .manual-toolbar-select {
  position: relative;
  min-width: 64px;
}

#manual .manual-toolbar-select > span {
  position: absolute;
  top: 3px;
  left: 8px;
  z-index: 1;
  color: #788396;
  font-size: 9px;
  font-weight: 760;
  letter-spacing: .08em;
  text-transform: uppercase;
  pointer-events: none;
}

#manual .manual-toolbar-select select {
  min-width: 70px;
  min-height: 38px;
  padding: 13px 24px 3px 8px;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  color: #33405a;
  background-color: #fff;
  font-size: 12px;
  font-weight: 800;
}

#manual .manual-metric-chip,
#manual .manual-toolbar-issues,
#manual .manual-project-status {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
  border: 1px solid #dfe4eb;
  border-radius: 8px;
  color: #596477;
  background: #fff;
  font-size: 11px;
  white-space: nowrap;
}

#manual .manual-metric-chip strong {
  color: #2d3850;
  font-size: 12px;
}

#manual .manual-toolbar-issues {
  min-width: auto;
  box-shadow: none;
  font-weight: 760;
}

#manual .manual-toolbar-issues[data-state="blocked"] {
  color: var(--manual-red);
  border-color: #efc9c5;
  background: var(--manual-red-soft);
}

#manual .manual-toolbar-issues[data-state="warning"] {
  color: var(--manual-amber);
  border-color: #ecd9aa;
  background: var(--manual-amber-soft);
}

#manual .manual-toolbar-issues[data-state="incomplete"] {
  color: var(--manual-blue);
  border-color: #c7d9ef;
  background: var(--manual-blue-soft);
}

#manual .manual-project-status {
  min-width: 190px;
  max-width: 280px;
  border-color: transparent;
  background: transparent;
  white-space: normal;
}

#manual .manual-project-status strong {
  display: -webkit-box;
  overflow: hidden;
  color: #48546a;
  font-size: 11px;
  line-height: 1.2;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#manual .manual-status-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

#manual .manual-status-copy small {
  overflow: hidden;
  color: #7b8595;
  font-size: 9px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#manual .manual-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8c95a3;
  box-shadow: 0 0 0 3px #eff1f4;
}

#manual .manual-project-status[data-state="ready"] .manual-status-dot { background: var(--manual-green); box-shadow: 0 0 0 3px var(--manual-green-soft); }
#manual .manual-project-status[data-state="warning"] .manual-status-dot { background: var(--manual-amber); box-shadow: 0 0 0 3px var(--manual-amber-soft); }
#manual .manual-project-status[data-state="blocked"] .manual-status-dot { background: var(--manual-red); box-shadow: 0 0 0 3px var(--manual-red-soft); }
#manual .manual-project-status[data-state="incomplete"] .manual-status-dot { background: var(--manual-blue); box-shadow: 0 0 0 3px var(--manual-blue-soft); }

#manual .manual-project-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

#manual .manual-export-action {
  display: grid;
  gap: 2px;
  justify-items: end;
}

#manual .manual-export-action > small {
  max-width: 190px;
  color: var(--manual-red);
  font-size: 9px;
  font-weight: 720;
  line-height: 1.2;
  text-align: right;
}

#manual .manual-icon-button,
#manual .manual-project-menu > summary,
#manual .manual-add-menu > summary,
#manual .manual-fold-menu > summary {
  width: 32px;
  min-height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #dce2ea;
  border-radius: 8px;
  color: #526076;
  background: #fff;
  box-shadow: none;
  font-size: 13px;
  font-weight: 780;
  cursor: pointer;
  list-style: none;
}

#manual .manual-icon-button:hover,
#manual .manual-project-menu > summary:hover,
#manual .manual-add-menu > summary:hover,
#manual .manual-fold-menu > summary:hover {
  color: var(--manual-navy);
  border-color: #b9c6d7;
  background: #f5f8fb;
  box-shadow: none;
}

#manual .manual-icon-button:disabled {
  opacity: .35;
}

#manual details > summary::-webkit-details-marker {
  display: none;
}

#manual .manual-prepare-export {
  min-height: 38px;
  padding: 7px 14px;
  border-radius: 8px;
  color: #fff;
  background: #1d3154;
  font-size: 12px;
  font-weight: 800;
  box-shadow: none;
  white-space: nowrap;
}

#manual .manual-prepare-export:hover:not(:disabled):not([aria-disabled="true"]) {
  background: #284772;
  box-shadow: none;
}

#manual .manual-prepare-export[aria-disabled="true"] {
  color: #f5f7fa;
  background: #7b8799;
  cursor: pointer;
  opacity: .72;
}

#manual .manual-production-surface {
  min-width: 0;
  margin-top: 10px;
  transition: margin-right .16s ease;
}

#manual [data-testid="manual-build-root"][data-editor-open="true"] .manual-production-surface {
  margin-right: 324px;
}

#manual .manual-card-legend {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 5px;
  padding: 3px 9px;
  border: 1px solid #d9e0e9;
  border-radius: 7px;
  background: rgba(255, 255, 255, .84);
  color: #667286;
  font-size: 9px;
}

#manual .manual-card-legend > strong {
  flex: 0 0 auto;
  color: #34435b;
  font-size: 9px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

#manual .manual-legend-quick {
  min-width: 0;
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 9px;
}

#manual .manual-legend-quick > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

#manual .manual-legend-quick i {
  min-width: 18px;
  height: 15px;
  display: inline-grid;
  place-items: center;
  padding: 0 3px;
  border: 1px solid #d5dce5;
  border-radius: 4px;
  color: #4d5a70;
  background: #f7f9fb;
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
}

#manual .manual-legend-quick i[data-card-type="chapter"] { color: #6644a0; border-color: #cfc1e7; background: #f6f1fd; }
#manual .manual-legend-quick i[data-card-type="contents"] { color: #976100; border-color: #e8c985; background: #fff8e8; }
#manual .manual-legend-quick i[data-card-type="spread"] { color: #245d99; border-color: #9fc2eb; background: #eaf4ff; }
#manual .manual-legend-quick i[data-card-type="filler"] { color: var(--manual-green); border-color: #b8d7bf; background: #edf7ef; }

#manual .manual-legend-quick i[data-color-mode] {
  width: 22px;
  min-width: 22px;
  padding: 0;
  border: 0;
}

#manual .manual-legend-quick i[data-color-mode="1C"] { background: #586579; }
#manual .manual-legend-quick i[data-color-mode="2C"] { background: linear-gradient(90deg, #173a63 0 50%, #f08a24 50%); }
#manual .manual-legend-quick i[data-color-mode="4C"] { background: linear-gradient(90deg, #2b82c9, #cf4c8a, #e1b53b, #4d9b69); }

#manual .manual-legend-quick i.manual-legend-slot {
  width: 18px;
  min-width: 18px;
  height: 14px;
  padding: 0;
  border-radius: 3px;
}

#manual .manual-legend-slot--open { border: 1px dashed #bfc8d5; background: #fff; }
#manual .manual-legend-slot--closed { border: 1px solid #d1d7df; background: #e2e6eb; }

#manual .manual-table-frame {
  position: relative;
  border: 1px solid #ccd5e1;
  border-radius: 10px;
  background: #fff;
}

#manual .manual-fold-table {
  width: 100%;
  border-spacing: 0;
  border-collapse: separate;
  table-layout: fixed;
  color: #39445a;
}

#manual .manual-col-fold { width: 72px; }
#manual .manual-col-capacity { width: 64px; }
#manual .manual-col-mode { width: 54px; }
#manual .manual-col-occupancy { width: 76px; }
#manual .manual-col-issues { width: 52px; }
#manual .manual-col-actions { width: 58px; }

#manual .manual-fold-table thead th {
  height: 42px;
  padding: 5px 7px;
  border-right: 1px solid #e1e6ed;
  border-bottom: 1px solid #ccd5e1;
  color: #2c3b58;
  background: #f7f9fc;
  font-size: 10px;
  font-weight: 840;
  letter-spacing: .045em;
  text-align: left;
  text-transform: uppercase;
  vertical-align: middle;
}

#manual .manual-fold-table thead th:last-child,
#manual .manual-fold-table tbody tr > *:last-child {
  border-right: 0;
}

#manual .manual-fold-table tbody tr > th,
#manual .manual-fold-table tbody tr > td {
  height: 84px;
  padding: 6px;
  border-right: 1px solid #e4e8ee;
  border-bottom: 1px solid #d8dee7;
  background: #fff;
  vertical-align: middle;
}

#manual .manual-fold-table tbody tr:last-child > th,
#manual .manual-fold-table tbody tr:last-child > td {
  border-bottom: 0;
}

#manual .manual-fold-table tbody tr[data-composition-state="incomplete"] > th:first-child {
  box-shadow: inset 3px 0 0 var(--manual-blue);
  background: #f8fbff;
}

#manual .manual-fold-table tbody tr[data-composition-state="invalid"] > th:first-child {
  box-shadow: inset 3px 0 0 var(--manual-red);
  background: #fff8f7;
}

#manual .manual-fold-table tbody tr:focus {
  outline: 2px solid #3f73bd;
  outline-offset: -2px;
}

#manual .manual-fold-cell {
  padding: 6px !important;
  text-align: center;
}

#manual .manual-fold-cell strong,
#manual .manual-fold-cell small {
  display: block;
}

#manual .manual-fold-cell strong {
  color: #1b3f70;
  font-size: 19px;
  line-height: 1;
  letter-spacing: -.035em;
}

#manual .manual-fold-cell small {
  margin-top: 5px;
  color: #7b8698;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}

#manual .manual-capacity-cell,
#manual .manual-mode-cell,
#manual .manual-occupancy-cell,
#manual .manual-row-issues-cell,
#manual .manual-row-actions-cell {
  text-align: center;
}

#manual .manual-capacity-cell select,
#manual .manual-mode-cell select {
  width: 100%;
  min-height: 30px;
  padding: 4px 20px 4px 7px;
  border: 1px solid #d7dde7;
  border-radius: 7px;
  color: #33405a;
  background-color: #fff;
  font-size: 12px;
  font-weight: 800;
}

#manual .manual-mode-cell select {
  color: #35466a;
  background: #f8f9fc;
}

#manual .manual-positions-heading {
  padding: 3px 6px !important;
  text-align: center !important;
}

#manual .manual-positions-heading > span:first-child {
  display: block;
  margin-bottom: 3px;
}

#manual .manual-positions-heading small {
  color: #798497;
  font-size: 9px;
  font-weight: 680;
  text-transform: none;
}

#manual .manual-position-ruler {
  min-width: 672px;
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  gap: 4px;
  overflow: hidden;
  color: #8590a2;
  font-size: 9px;
  font-weight: 720;
  letter-spacing: 0;
}

#manual .manual-positions-cell {
  min-width: 0;
  padding: 5px 6px !important;
  overflow: hidden;
}

#manual .manual-position-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-color: #b9c4d3 transparent;
  scrollbar-width: thin;
}

#manual .manual-position-grid {
  width: 100%;
  min-width: var(--manual-position-min-width, 732px);
  display: grid;
  grid-template-columns: repeat(var(--manual-position-columns, 16), minmax(38px, 1fr));
  grid-auto-flow: row dense;
  gap: 4px;
  padding: 1px;
  transition: background .12s ease, box-shadow .12s ease;
}

#manual .manual-position-grid.drop-active {
  border-radius: 7px;
  background: var(--manual-blue-soft);
  box-shadow: inset 0 0 0 2px rgba(49, 95, 159, .25);
}

#manual .manual-block,
#manual .manual-position-slot {
  min-width: 0;
  min-height: 60px;
  height: 60px;
  border-radius: 7px;
}

#manual .manual-block {
  position: relative;
  grid-column: span var(--manual-block-span, 1);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: center;
  gap: 2px;
  padding: 5px 4px 4px;
  border: 1px solid #dce2e9;
  color: #303b50;
  background: #fff;
  box-shadow: none;
  text-align: center;
  cursor: grab;
}

#manual .manual-block:hover {
  z-index: 2;
  transform: none;
  color: #1f2d45;
  border-color: #9fb0c7;
  background: #fff;
  box-shadow: 0 3px 9px rgba(35, 49, 74, .10);
}

#manual .manual-block.selected {
  z-index: 3;
  border-color: #4678c2;
  box-shadow: 0 0 0 2px rgba(70, 120, 194, .22);
}

#manual .manual-block[data-manual-block-type="chapter"] {
  border-color: #cfc1e7;
  background: linear-gradient(180deg, #fff 0%, #f6f1fd 100%);
}

#manual .manual-block[data-manual-block-type="chapter"] .manual-block-code { color: #6644a0; }

#manual .manual-block[data-manual-block-type="toc"] {
  border-color: #e8c985;
  background: linear-gradient(180deg, #fff 0%, #fff8e8 100%);
}

#manual .manual-block[data-manual-block-type="toc"] .manual-block-code { color: #a76b00; }

#manual .manual-block[data-manual-block-type="spread"] {
  border-color: #9fc2eb;
  background: linear-gradient(180deg, #f8fbff 0%, #eaf4ff 100%);
}

#manual .manual-block[data-manual-block-type="spread"] .manual-block-code { color: #245d99; }

#manual .manual-block[data-manual-block-type="filler"] {
  border-color: #b8d7bf;
  background: repeating-linear-gradient(135deg, #f4fbf5 0 8px, #eaf6ec 8px 9px);
}

#manual .manual-block[data-manual-block-type="filler"] .manual-block-code { color: var(--manual-green); }

#manual .manual-block.dragging {
  opacity: .36;
  cursor: grabbing;
}

#manual .manual-block.drop-before::before,
#manual .manual-block.drop-after::after {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: 3px;
  border-radius: 3px;
  background: var(--manual-blue);
}

#manual .manual-block.drop-before::before { left: -4px; }
#manual .manual-block.drop-after::after { right: -4px; }

#manual .manual-block-color-bar {
  position: absolute;
  top: 0;
  right: 5px;
  left: 5px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: #586579;
}

#manual .manual-block-color-bar[data-color-mode="2C"] {
  background: linear-gradient(90deg, #173a63 0 50%, #f08a24 50%);
}

#manual .manual-block-color-bar[data-color-mode="4C"] {
  background: linear-gradient(90deg, #2b82c9, #cf4c8a, #e1b53b, #4d9b69);
}

#manual .manual-block-topline,
#manual .manual-block-meta,
#manual .manual-block-badges {
  min-width: 0;
  display: flex;
  align-items: center;
}

#manual .manual-block-topline {
  justify-content: space-between;
  gap: 3px;
  padding-top: 1px;
}

#manual .manual-block-badges { gap: 2px; }

#manual .manual-block-code {
  overflow: hidden;
  color: #303a4d;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#manual .manual-block-color-mode,
#manual .manual-block-span-label {
  flex: 0 0 auto;
  min-width: 16px;
  padding: 1px 2px;
  border: 1px solid #d5dbe4;
  border-radius: 3px;
  color: #4f5b6e;
  background: rgba(255, 255, 255, .76);
  font-size: 8px;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
}

#manual .manual-block-color-mode[data-color-mode="2C"] { color: #173a63; border-color: #f08a24; background: #fff7ed; }
#manual .manual-block-color-mode[data-color-mode="4C"] { color: #28628e; border-color: #a9c8de; }

#manual .manual-block-label {
  min-height: 15px;
  align-self: center;
  display: -webkit-box;
  overflow: hidden;
  color: #354158;
  font-size: 10px;
  font-weight: 780;
  line-height: 1.05;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#manual .manual-block-meta {
  justify-content: center;
  gap: 2px;
  color: #6f798a;
  font-size: 9px;
  font-weight: 720;
  line-height: 1;
  white-space: nowrap;
}

#manual .manual-block-editorial {
  color: #243149;
  font-size: 9px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

#manual .manual-block-fold-local {
  color: #6f798a;
  font-size: 9px;
  font-weight: 720;
  line-height: 1;
  white-space: nowrap;
}

#manual .manual-position-slot {
  display: block;
}

#manual .manual-position-slot--open {
  border: 1px dashed #ccd4df;
  background: repeating-linear-gradient(135deg, #fff 0 7px, #f5f7fa 7px 8px);
}

#manual .manual-position-slot--inactive {
  border: 1px solid #d2d8e0;
  background: repeating-linear-gradient(135deg, #e8ebef 0 7px, #e0e4e9 7px 8px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24);
}

#manual .manual-occupancy {
  display: inline-grid;
  gap: 2px;
}

#manual .manual-occupancy strong {
  color: #5f6b7d;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#manual .manual-occupancy small {
  color: #7d8797;
  font-size: 9px;
  font-weight: 680;
  line-height: 1.15;
}

#manual .manual-occupancy[data-state="empty"] strong { color: #707c8e; }
#manual .manual-occupancy[data-state="incomplete"] strong { color: var(--manual-blue); }
#manual .manual-occupancy[data-state="ready"] strong { color: var(--manual-green); }
#manual .manual-occupancy[data-state="invalid"] strong { color: var(--manual-red); }

#manual .manual-row-issues-cell > .manual-issue-light {
  margin: 0 auto;
}

#manual .manual-row-issues-cell > button {
  width: 24px;
  min-height: 24px;
  display: grid;
  place-items: center;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}

#manual .manual-issue-light {
  width: 10px;
  height: 10px;
  display: block;
  border-radius: 50%;
  background: var(--manual-green);
  box-shadow: 0 0 0 3px var(--manual-green-soft);
}

#manual .manual-row-issues-cell > button[data-state="warning"] .manual-issue-light { background: var(--manual-amber); box-shadow: 0 0 0 3px var(--manual-amber-soft); }
#manual .manual-row-issues-cell > button[data-state="blocker"] .manual-issue-light { background: var(--manual-red); box-shadow: 0 0 0 3px var(--manual-red-soft); }
#manual .manual-row-issues-cell > button[data-state="incomplete"] .manual-issue-light { background: var(--manual-blue); box-shadow: 0 0 0 3px var(--manual-blue-soft); }

#manual .manual-inline-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

#manual .manual-add-menu,
#manual .manual-fold-menu,
#manual .manual-project-menu {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

#manual .manual-popover {
  position: absolute;
  z-index: 80;
  top: calc(100% + 6px);
  right: 0;
  width: 174px;
  display: grid;
  gap: 2px;
  padding: 6px;
  border: 1px solid #d4dbe5;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(24, 36, 61, .17);
  text-align: left;
}

#manual .manual-add-popover {
  top: 0;
  right: calc(100% + 6px);
  left: auto;
}

#manual .manual-fold-popover {
  top: 0;
  right: calc(100% + 6px);
}

#manual .manual-popover > strong {
  padding: 5px 7px;
  color: #8790a0;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#manual .manual-popover button {
  width: 100%;
  min-height: 30px;
  justify-content: flex-start;
  padding: 6px 8px;
  border: 0;
  border-radius: 6px;
  color: #445168;
  background: transparent;
  box-shadow: none;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
}

#manual .manual-popover button:hover:not(:disabled) {
  color: #233552;
  background: #f2f5f9;
  box-shadow: none;
}

#manual .manual-popover button.danger {
  color: var(--manual-red);
}

#manual .manual-menu-separator {
  height: 1px;
  margin: 4px 3px;
  background: #e7eaf0;
}

#manual .manual-add-next-fold {
  width: 100%;
  min-height: 34px;
  margin: 7px 0;
  border: 1px dashed #bdcadb;
  border-radius: 8px;
  color: #48668e;
  background: rgba(255, 255, 255, .72);
  box-shadow: none;
  font-size: 12px;
  font-weight: 760;
}

#manual .manual-add-next-fold:hover {
  color: var(--manual-blue);
  border-color: #7e9bc3;
  background: var(--manual-blue-soft);
  box-shadow: none;
}

#manual .manual-table-empty td {
  height: 132px !important;
}

#manual .manual-table-empty td > div {
  display: grid;
  place-items: center;
  gap: 5px;
  color: #748094;
  text-align: center;
}

#manual .manual-table-empty strong {
  color: #2c3950;
  font-size: 14px;
}

#manual .manual-table-empty span {
  font-size: 11px;
}

#manual .manual-table-empty button {
  min-height: 32px;
  margin-top: 4px;
  padding: 6px 12px;
  border-radius: 7px;
  font-size: 12px;
}

#manual .manual-contents-panel {
  overflow: hidden;
  margin-top: 7px;
  border: 1px solid #d6ddea;
  border-radius: 9px;
  background: #fff;
}

#manual .manual-contents-toggle {
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 0;
  border-radius: 0;
  color: #445067;
  background: #fbfcfe;
  box-shadow: none;
  text-align: left;
}

#manual .manual-contents-toggle:hover { background: #f5f8fc; box-shadow: none; }

#manual .manual-contents-mark {
  width: 28px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid #e4c77e;
  border-radius: 5px;
  color: #956000;
  background: #fff7e3;
  font-size: 9px;
  font-weight: 900;
}

#manual .manual-contents-toggle strong,
#manual .manual-contents-toggle small { display: block; }
#manual .manual-contents-toggle strong { color: #35435a; font-size: 11px; }
#manual .manual-contents-toggle small { margin-top: 1px; color: #7a8597; font-size: 10px; }

#manual .manual-contents-chevron {
  color: #5e6a7e;
  font-size: 15px;
  transform: rotate(180deg);
}

#manual .manual-contents-toggle[aria-expanded="false"] .manual-contents-chevron { transform: rotate(0); }

#manual .manual-contents-body {
  padding: 8px 10px 10px;
  border-top: 1px solid #e4e8ef;
}

#manual .manual-contents-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#manual .manual-contents-list button {
  width: 100%;
  min-height: 34px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  border: 1px solid #e2d9f0;
  border-radius: 7px;
  color: #4e5a6e;
  background: #fbf9fe;
  box-shadow: none;
  text-align: left;
}

#manual .manual-contents-list button:hover {
  border-color: #cbb9e4;
  background: #f6f1fd;
  box-shadow: none;
}

#manual .manual-contents-list span {
  color: #7553a7;
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}

#manual .manual-contents-list strong {
  overflow: hidden;
  color: #364257;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#manual .manual-contents-list small {
  color: #768195;
  font-size: 10px;
  white-space: nowrap;
}

#manual .manual-contents-empty {
  margin: 0;
  color: #7b8697;
  font-size: 10px;
}

#manual .manual-issues-panel {
  overflow: hidden;
  margin-top: 7px;
  border: 1px solid #d4dce7;
  border-radius: 9px;
  background: #fff;
}

#manual .manual-issues-panel:focus {
  outline: 2px solid #3f73bd;
  outline-offset: 2px;
}

#manual .manual-issues-toggle {
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 0;
  border-radius: 0;
  color: #445067;
  background: #fbfcfd;
  box-shadow: none;
  text-align: left;
}

#manual .manual-issues-toggle:hover {
  background: #f6f8fb;
  box-shadow: none;
}

#manual .manual-issues-summary-icon {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: #fff;
  background: #718096;
  font-size: 10px;
  font-weight: 900;
}

#manual .manual-issues-panel[data-state="ready"] .manual-issues-summary-icon { background: var(--manual-green); }
#manual .manual-issues-panel[data-state="warning"] .manual-issues-summary-icon { background: var(--manual-amber); }
#manual .manual-issues-panel[data-state="blocker"] .manual-issues-summary-icon { background: var(--manual-red); }
#manual .manual-issues-panel[data-state="incomplete"] .manual-issues-summary-icon { background: var(--manual-blue); }

#manual .manual-issues-toggle strong,
#manual .manual-issues-toggle small {
  display: block;
}

#manual .manual-issues-toggle strong {
  color: #39465b;
  font-size: 11px;
}

#manual .manual-issues-toggle small {
  margin-top: 1px;
  color: #7d8798;
  font-size: 10px;
}

#manual .manual-issues-chevron {
  color: #5e6a7e;
  font-size: 15px;
  transform: rotate(180deg);
}

#manual .manual-issues-toggle[aria-expanded="false"] .manual-issues-chevron {
  transform: rotate(0);
}

#manual .manual-issues-body {
  display: grid;
  gap: 8px;
  padding: 8px 12px 10px;
  border-top: 1px solid #e4e8ef;
}

#manual .manual-issue-group {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 8px;
  align-items: start;
}

#manual .manual-issue-group h3 {
  margin: 7px 0 0;
  color: #3a4961;
  font-size: 11px;
}

#manual .manual-issue-group ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#manual .manual-issue-group li {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 5px 7px;
  border: 1px solid #e0e5ec;
  border-radius: 7px;
  background: #fbfcfd;
}

#manual .manual-issue-group li[data-severity="warning"] {
  border-color: #ecd9aa;
  background: var(--manual-amber-soft);
}

#manual .manual-issue-group li[data-severity="incomplete"] {
  border-color: #c7d9ef;
  background: var(--manual-blue-soft);
}

#manual .manual-issue-group li[data-severity="blocker"] {
  border-color: #efc9c5;
  background: var(--manual-red-soft);
}

#manual .manual-issue-severity {
  color: #657085;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}

#manual li[data-severity="warning"] .manual-issue-severity { color: var(--manual-amber); }
#manual li[data-severity="blocker"] .manual-issue-severity { color: var(--manual-red); }
#manual li[data-severity="incomplete"] .manual-issue-severity { color: var(--manual-blue); }

#manual .manual-issue-group li p {
  margin: 0;
  color: #4f5a6d;
  font-size: 11px;
  line-height: 1.35;
}

#manual .manual-issue-group li p small {
  display: block;
  margin-top: 1px;
  color: #7a8494;
  font-size: 10px;
}

#manual .manual-issue-group li button {
  min-height: 25px;
  padding: 4px 7px;
  font-size: 10px;
}

#manual .manual-issues-ready {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--manual-green);
}

#manual .manual-issues-ready > span {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--manual-green);
  font-size: 10px;
}

#manual .manual-issues-ready p { margin: 0; }
#manual .manual-issues-ready strong,
#manual .manual-issues-ready small { display: block; }
#manual .manual-issues-ready strong { font-size: 11px; }
#manual .manual-issues-ready small { color: #788395; font-size: 10px; }

#manual .manual-block-editor {
  position: fixed;
  z-index: 70;
  top: 210px;
  right: max(16px, calc((100vw - 1560px) / 2));
  width: min(304px, calc(100vw - 32px));
  max-height: calc(100vh - 230px);
  overflow: auto;
  box-sizing: border-box;
  padding: 14px;
  border: 1px solid #cbd5e2;
  border-radius: 12px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 18px 44px rgba(24, 36, 61, .22);
  backdrop-filter: blur(18px);
}

#manual .manual-editor-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e3e7ed;
}

#manual .manual-editor-heading .eyebrow {
  margin: 0 0 2px;
  color: #818b9b;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

#manual .manual-editor-heading h2 {
  margin: 0;
  color: var(--manual-navy);
  font-size: 16px;
}

#manual .manual-editor-preview {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 8px;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #dbe2ea;
  border-radius: 9px;
  background: #f8fafc;
}

#manual .manual-editor-preview > span {
  grid-row: 1 / 3;
  align-self: center;
  padding: 5px;
  border-radius: 6px;
  color: #315f9f;
  background: var(--manual-blue-soft);
  font-size: 9px;
  font-weight: 900;
}

#manual .manual-editor-preview strong {
  color: #324057;
  font-size: 12px;
}

#manual .manual-editor-preview small {
  color: #778294;
  font-size: 10px;
}

#manual .manual-field {
  display: grid;
  gap: 4px;
  margin-top: 9px;
  color: #697488;
  font-size: 11px;
  font-weight: 760;
}

#manual .manual-field input,
#manual .manual-field select,
#manual .manual-field textarea {
  width: 100%;
  min-height: 34px;
  padding: 7px 8px;
  border: 1px solid #d5dce6;
  border-radius: 8px;
  color: #334057;
  background: #fff;
  font-size: 13px;
  font-weight: 560;
}

#manual .manual-editor-facts,
#manual .manual-editor-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 9px;
}

#manual .manual-editor-facts span {
  display: grid;
  gap: 2px;
  padding: 7px;
  border-radius: 7px;
  color: #7b8595;
  background: #f3f5f7;
  font-size: 10px;
}

#manual .manual-editor-facts strong {
  color: #40506a;
  font-size: 12px;
}

#manual .manual-editor-actions button {
  min-height: 30px;
  padding: 5px 7px;
  font-size: 12px;
}

#manual .manual-delete-block {
  width: 100%;
  min-height: 31px;
  margin-top: 7px;
  border-radius: 8px;
  font-size: 12px;
}

@media (max-width: 1160px) {
  #manual [data-testid="manual-build-root"][data-editor-open="true"] .manual-production-surface {
    margin-right: 0;
  }

  #manual .manual-block-editor {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    max-height: none;
    margin: 7px 0;
    box-shadow: 0 5px 16px rgba(24, 36, 61, .10);
    backdrop-filter: none;
  }
}

#manual :where(button, summary, input, select, textarea):focus-visible {
  outline: 2px solid #2f67b0;
  outline-offset: 2px;
}

@media (max-width: 1240px) {
  #manual .manual-project-bar {
    position: static;
    grid-template-columns: minmax(220px, 1fr) auto auto auto auto auto;
  }

  #manual .manual-project-status {
    grid-column: 1 / 5;
    grid-row: 2;
    max-width: none;
  }

  #manual .manual-project-actions {
    grid-column: 5 / 7;
    grid-row: 2;
  }

  #manual .manual-position-ruler {
    min-width: 672px;
  }
}

@media (max-width: 980px) {
  #manual .manual-project-bar {
    grid-template-columns: minmax(200px, 1fr) auto auto auto;
  }

  #manual .manual-metric-chip,
  #manual .manual-toolbar-issues {
    grid-row: 2;
  }

  #manual .manual-project-actions {
    grid-column: 4;
    grid-row: 1 / 3;
  }

  #manual .manual-project-status {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  #manual .manual-col-fold { width: 68px; }
  #manual .manual-col-capacity { width: 62px; }
  #manual .manual-col-mode { width: 52px; }
  #manual .manual-col-occupancy { width: 72px; }
  #manual .manual-col-issues { width: 48px; }
  #manual .manual-col-actions { width: 54px; }

  #manual .manual-positions-heading > span:first-child {
    margin-bottom: 0;
  }

  #manual .manual-position-ruler {
    display: none;
  }
}

@media (max-width: 720px) {
  #manual .manual-build-shell {
    padding-bottom: 18px;
  }

  #manual .manual-project-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    border-radius: 10px;
  }

  #manual .manual-project-identity {
    grid-column: 1 / -1;
  }

  #manual .manual-toolbar-select {
    grid-row: 2;
  }

  #manual .manual-toolbar-select select {
    width: 100%;
  }

  #manual .manual-metric-chip {
    grid-row: 3;
  }

  #manual .manual-metric-chip:first-of-type {
    grid-column: 1;
  }

  #manual .manual-metric-chip + .manual-metric-chip {
    grid-column: 2;
  }

  #manual .manual-toolbar-issues {
    grid-column: 1 / -1;
    grid-row: 4;
  }

  #manual .manual-project-actions {
    grid-column: 1 / -1;
    grid-row: 6;
    display: grid;
    grid-template-columns: repeat(3, 32px) minmax(0, 1fr);
  }

  #manual .manual-project-status {
    grid-column: 1 / -1;
    grid-row: 5;
  }

  #manual .manual-export-action {
    grid-column: 4;
    justify-items: stretch;
  }

  #manual .manual-export-action > small {
    max-width: none;
    text-align: left;
  }

  #manual .manual-prepare-export {
    width: 100%;
  }

  #manual .manual-table-frame {
    border: 0;
    background: transparent;
  }

  #manual .manual-fold-table,
  #manual .manual-fold-table tbody {
    display: block;
  }

  #manual .manual-fold-table colgroup,
  #manual .manual-fold-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  #manual .manual-fold-table tbody tr[data-manual-fold-row] {
    display: grid;
    grid-template-columns: minmax(78px, .8fr) minmax(82px, 1fr) minmax(68px, .8fr) auto;
    grid-template-areas:
      "fold capacity mode actions"
      "positions positions positions positions"
      "occupancy issues issues issues";
    margin-bottom: 8px;
    border: 1px solid #ccd5e1;
    border-radius: 10px;
    background: #fff;
  }

  #manual .manual-fold-table tbody tr[data-manual-fold-row] > th,
  #manual .manual-fold-table tbody tr[data-manual-fold-row] > td {
    display: block;
    height: auto;
    min-height: 44px;
    border-right: 1px solid #e4e8ee;
    border-bottom: 1px solid #e0e5ec;
  }

  #manual .manual-fold-cell { grid-area: fold; }
  #manual .manual-capacity-cell { grid-area: capacity; }
  #manual .manual-mode-cell { grid-area: mode; }
  #manual .manual-positions-cell { grid-area: positions; min-height: 72px !important; }
  #manual .manual-occupancy-cell { grid-area: occupancy; }
  #manual .manual-row-issues-cell { grid-area: issues; text-align: center; }
  #manual .manual-row-actions-cell { grid-area: actions; border-right: 0 !important; }

  #manual .manual-fold-cell strong { font-size: 16px; }
  #manual .manual-position-scroll { max-width: calc(100vw - 34px); }
  #manual .manual-row-issues-cell > button { margin: 0 auto; }
  #manual .manual-occupancy-cell,
  #manual .manual-row-issues-cell { border-bottom: 0 !important; }

  #manual .manual-table-empty {
    display: block;
  }

  #manual .manual-table-empty td {
    width: 100%;
    display: block;
    border: 1px solid #ccd5e1 !important;
    border-radius: 10px;
  }

  #manual .manual-issue-group {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  #manual .manual-issue-group h3 {
    margin: 0;
  }

  #manual .manual-issue-group li {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  #manual .manual-issue-group li button {
    grid-column: 2;
    justify-self: start;
  }

  #manual .manual-legend-quick {
    gap: 5px 7px;
  }

  #manual .manual-contents-list {
    grid-template-columns: 1fr;
  }

  #manual .manual-block-editor {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    max-height: none;
    border-radius: 12px;
  }
}

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

/* Planning Workspace runtime layout contract */
#workspace .workspace-runtime {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-flow: row;
  gap: clamp(14px, 1.6vw, 20px);
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

#workspace .workspace-runtime > .workspace-runtime-strip,
#workspace .workspace-runtime > .workspace-runtime-surface,
#workspace .workspace-runtime > .workspace-runtime-generation {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#workspace .workspace-runtime-strip {
  position: static;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(220px, .46fr) minmax(260px, auto);
  gap: 14px;
  align-items: center;
  overflow-x: clip;
}

#workspace .workspace-runtime-strip > *,
#workspace .workspace-runtime-strip .project-title-block,
#workspace .workspace-runtime-strip .status-block,
#workspace .workspace-runtime-actions {
  min-width: 0;
}

#workspace .workspace-runtime-strip .project-title-block h1 {
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

#workspace .workspace-runtime-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  max-width: 100%;
}

#workspace .workspace-runtime-actions button {
  flex: 0 1 auto;
  white-space: nowrap;
}

#workspace .workspace-runtime-surface {
  grid-area: auto;
  min-height: clamp(420px, 58vh, 620px);
  overflow: visible;
}

#workspace .workspace-runtime-generation {
  grid-area: auto;
  position: static;
  align-self: stretch;
  justify-self: stretch;
  display: grid;
  gap: 16px;
}

@media (max-width: 1120px) {
  #workspace .workspace-runtime-strip {
    grid-template-columns: minmax(0, 1fr) minmax(220px, .55fr);
  }

  #workspace .workspace-runtime-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  #workspace .workspace-runtime {
    gap: 12px;
  }

  #workspace .workspace-runtime-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  #workspace .workspace-runtime-actions,
  #workspace .workspace-plan-actions {
    justify-content: stretch;
  }

  #workspace .workspace-runtime-actions button,
  #workspace .workspace-plan-actions button {
    flex: 1 1 100%;
  }

  #workspace .workspace-runtime-surface {
    min-height: clamp(320px, 52vh, 520px);
  }
}