.oa-compare-shell {
      min-height: 100vh;
      display: grid;
      grid-template-rows: auto auto 1fr;
      background: var(--soft);
    }

    .oa-compare-toolbar {
      display: grid;
      grid-template-columns: repeat(2, minmax(180px, 1fr)) auto;
      gap: 10px;
      padding: 12px;
      border-bottom: 1px solid #dce3ee;
      background: white;
      align-items: end;
    }

    .oa-compare-toolbar label,
    .oa-leccionario-panel label {
      display: grid;
      gap: 5px;
      color: #164266;
      font-size: 12px;
      font-weight: 900;
    }

    .oa-compare-toolbar select,
    .oa-leccionario-panel input,
    .oa-leccionario-panel textarea {
      border: 1px solid #c7d7e8;
      border-radius: 7px;
      background: #fbfdff;
      color: var(--ink);
      padding: 9px;
      font: inherit;
      font-weight: 700;
    }

    .oa-save-alert {
      display: none;
      grid-template-columns: 1fr auto;
      gap: 10px;
      align-items: center;
      margin: 10px 12px 0;
      border: 1px solid #f8c471;
      border-left: 5px solid #f59e0b;
      border-radius: 8px;
      background: #fffbeb;
      color: #7c2d12;
      padding: 10px 12px;
      box-shadow: 0 8px 20px rgba(146, 64, 14, 0.08);
    }

    .oa-save-alert.active {
      display: grid;
    }

    .oa-save-alert strong {
      display: block;
      margin-bottom: 2px;
      color: #92400e;
      font-size: 13px;
    }

    .oa-save-alert span {
      font-size: 12px;
      line-height: 1.35;
    }

    .oa-save-alert button {
      border: 0;
      border-radius: 8px;
      background: var(--blue);
      color: white;
      padding: 9px 12px;
      font-weight: 900;
      white-space: nowrap;
      cursor: pointer;
    }

    .oa-compare-workspace {
      display: grid;
      grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
      gap: 12px;
      padding: 12px;
      overflow: auto;
    }

    .oa-compare-workspace.annual-mode {
      grid-template-columns: minmax(0, 1fr);
    }

    .oa-compare-workspace.annual-mode .oa-leccionario-panel {
      display: none;
    }

    .oa-leccionario-panel,
    .oa-month-board {
      border: 1px solid #dce3ee;
      border-radius: 10px;
      background: white;
      box-shadow: 0 10px 24px rgba(31, 41, 55, 0.06);
      padding: 14px;
    }

    .oa-leccionario-panel {
      display: grid;
      gap: 12px;
      align-content: start;
    }

    .oa-leccionario-panel h2,
    .oa-month-card h3 {
      margin: 0;
      color: var(--blue);
    }

    .oa-leccionario-panel textarea {
      min-height: 180px;
      resize: vertical;
    }

    .oa-photo-preview {
      border: 1px dashed #98b9d7;
      border-radius: 8px;
      min-height: 120px;
      display: grid;
      place-items: center;
      overflow: hidden;
      background: #f8fbff;
      color: #526579;
      font-size: 12px;
      font-weight: 800;
      text-align: center;
    }

    .oa-photo-preview img {
      width: 100%;
      max-height: 220px;
      object-fit: contain;
      display: block;
    }

    .oa-photo-preview.has-files {
      grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
      gap: 8px;
      padding: 8px;
      place-items: stretch;
    }

    .oa-photo-preview figure {
      margin: 0;
      display: grid;
      gap: 4px;
      align-content: start;
    }

    .oa-photo-preview figcaption {
      overflow: hidden;
      color: #526579;
      font-size: 11px;
      font-weight: 800;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .oa-summary {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }

    .oa-summary article {
      border: 1px solid #dce3ee;
      border-radius: 8px;
      background: #f8fafc;
      padding: 10px;
      display: grid;
      gap: 4px;
    }

    .oa-summary span {
      color: #667085;
      font-size: 11px;
      font-weight: 800;
    }

    .oa-summary strong {
      color: var(--blue);
      font-size: 20px;
    }

    .oa-month-board {
      display: grid;
      gap: 10px;
      align-content: start;
    }

    .oa-module-tabs,
    .oa-view-toggle {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .oa-module-tabs button,
    .oa-view-toggle button,
    .oa-photo-actions label {
      border: 1px solid #bfd0e2;
      border-radius: 7px;
      background: #eef5fb;
      color: var(--blue);
      padding: 9px;
      font-weight: 900;
      text-align: center;
      cursor: pointer;
    }

    .oa-module-tabs button.active,
    .oa-view-toggle button.active {
      border-color: var(--blue);
      background: var(--blue);
      color: white;
    }

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

    .oa-photo-actions input {
      position: absolute;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
    }

    .oa-coverage-table-wrap {
      overflow: auto;
      border: 1px solid #dce3ee;
      border-radius: 9px;
      background: white;
    }

    .oa-coverage-table {
      width: 100%;
      min-width: 980px;
      border-collapse: collapse;
      table-layout: fixed;
      font-size: 12px;
    }

    .oa-coverage-table th,
    .oa-coverage-table td {
      border: 1px solid #dce3ee;
      padding: 8px;
      vertical-align: top;
    }

    .oa-coverage-table th {
      position: sticky;
      top: 0;
      z-index: 1;
      background: #eef5fb;
      color: var(--blue);
      font-size: 11px;
      text-transform: uppercase;
    }

    .oa-coverage-table th:first-child,
    .oa-coverage-table td:first-child {
      position: sticky;
      left: 0;
      z-index: 2;
      width: 230px;
      background: #fbfdff;
    }

    .oa-coverage-table th:first-child {
      z-index: 3;
      background: #e6f0fb;
    }

    .oa-cell-button {
      width: 100%;
      min-height: 42px;
      border: 1px dashed #c7d7e8;
      border-radius: 7px;
      background: #f8fafc;
      color: #667085;
      font-weight: 900;
    }

    .oa-cell-button.marked {
      border-style: solid;
      border-color: #1f4e79;
      background: #eef6ff;
      color: #1f4e79;
    }

    .oa-cell-button.detected {
      border-style: solid;
      border-color: #16a34a;
      background: #ecfdf3;
      color: #166534;
    }

    .oa-cell-button.warning {
      border-style: solid;
      border-color: #dc2626;
      background: #fff1f2;
      color: #991b1b;
    }

    .oa-cell-button:hover,
    .oa-cell-button:focus-visible {
      box-shadow: 0 0 0 3px rgba(31, 78, 121, 0.16);
    }

    .oa-code-cell {
      display: grid;
      gap: 4px;
    }

    .oa-code-cell strong {
      color: var(--blue);
      font-size: 13px;
    }

    .oa-code-cell span {
      color: #526579;
      font-size: 11px;
      line-height: 1.25;
    }

    .oa-month-card {
      border: 1px solid #dce3ee;
      border-radius: 8px;
      background: #fbfdff;
      padding: 12px;
      display: grid;
      gap: 10px;
    }

    .oa-month-columns {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .oa-column {
      border: 1px solid #e5edf5;
      border-radius: 8px;
      background: white;
      padding: 10px;
      display: grid;
      gap: 7px;
    }

    .oa-column h4 {
      margin: 0;
      color: #344054;
      font-size: 13px;
    }

    .oa-item {
      border-left: 5px solid #94a3b8;
      background: #f8fafc;
      border-radius: 6px;
      padding: 8px;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 3px;
      font-size: 12px;
      cursor: grab;
    }

    .oa-item:active {
      cursor: grabbing;
    }

    .oa-item.selected {
      outline: 3px solid rgba(31, 78, 121, 0.22);
      box-shadow: 0 8px 18px rgba(31, 78, 121, 0.14);
    }

    .oa-item.done {
      border-left-color: #16a34a;
      background: #ecfdf3;
    }

    .oa-item.warning {
      border-left-color: #dc2626;
      background: #fff1f2;
    }

    .oa-item.static {
      grid-template-columns: 1fr;
      cursor: default;
    }

    .oa-item.planned {
      border-left-color: #1f4e79;
      background: #eef6ff;
    }

    .oa-item.pending {
      border-left-color: #f59e0b;
      background: #fff7ed;
    }

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

    .oa-item-text {
      display: grid;
      gap: 3px;
      min-width: 0;
    }

    .oa-move-controls {
      display: grid;
      gap: 5px;
      align-content: center;
      align-self: stretch;
      margin-left: 6px;
    }

    .oa-move-controls button {
      width: 34px;
      height: 28px;
      border: 1px solid #bdd1e8;
      border-radius: 6px;
      background: white;
      color: var(--blue);
      font-size: 15px;
      font-weight: 900;
      line-height: 1;
      padding: 0;
    }

    .oa-move-controls button.danger {
      border-color: #fecaca;
      color: #b91c1c;
    }

    .oa-move-controls button:hover,
    .oa-move-controls button:focus-visible {
      background: var(--blue);
      color: white;
      border-color: var(--blue);
    }

    .oa-move-controls button.danger:hover,
    .oa-move-controls button.danger:focus-visible {
      background: #dc2626;
      color: white;
      border-color: #dc2626;
    }

    .oa-dropzone {
      min-height: 74px;
      transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
    }

    .oa-dropzone.drag-over,
    .oa-dropzone.move-target {
      border-color: var(--blue);
      background: #eef6ff;
      box-shadow: inset 0 0 0 2px rgba(31, 78, 121, 0.16);
    }

    .oa-actions {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
      gap: 8px;
    }

    .oa-actions button {
      min-height: 40px;
    }

    .oa-ai-loading-card {
      width: min(420px, calc(100vw - 32px));
      border: 1px solid #d9e4f2;
      border-radius: 14px;
      background: white;
      padding: 22px;
      display: grid;
      gap: 14px;
      justify-items: center;
      text-align: center;
      box-shadow: 0 24px 70px rgba(15, 23, 42, 0.36);
    }

    .oa-ai-loading-card h2 {
      margin: 0;
      color: var(--blue);
      font-size: 20px;
    }

    .oa-ai-loading-card p {
      margin: 0;
      color: #526579;
      font-size: 13px;
      line-height: 1.4;
    }

    .oa-unsaved-actions {
      display: grid;
      gap: 8px;
      margin-top: 16px;
    }

    .oa-unsaved-actions button {
      border-radius: 8px;
      padding: 10px 12px;
      font-weight: 800;
    }

    .oa-unsaved-actions .secondary {
      border: 1px solid #cbd5e1;
      background: #f8fafc;
      color: #0f172a;
    }

    .oa-planner-illustration {
      width: 210px;
      height: 160px;
      position: relative;
      border-radius: 16px;
      background: linear-gradient(180deg, #eef6ff 0%, #f8fafc 100%);
      overflow: hidden;
      border: 1px solid #dce8f5;
    }

    .oa-planner-illustration::before {
      content: "";
      position: absolute;
      left: 36px;
      right: 36px;
      bottom: 18px;
      height: 42px;
      border-radius: 10px 10px 4px 4px;
      background: #1f4e79;
      box-shadow: 0 -10px 0 #305496 inset;
    }

    .oa-planner-head {
      position: absolute;
      left: 75px;
      top: 26px;
      width: 60px;
      height: 70px;
      border-radius: 48% 48% 44% 44%;
      background: #f2c9a6;
      border: 2px solid #d9a77f;
    }

    .oa-planner-head::before,
    .oa-planner-head::after {
      content: "";
      position: absolute;
      top: 25px;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #1f2937;
    }

    .oa-planner-head::before { left: 15px; }
    .oa-planner-head::after { right: 15px; }

    .oa-planner-beard {
      position: absolute;
      left: 88px;
      top: 70px;
      width: 34px;
      height: 26px;
      border-radius: 8px 8px 18px 18px;
      background: #4b5563;
    }

    .oa-planner-beard::before {
      content: "";
      position: absolute;
      left: 10px;
      top: -10px;
      width: 14px;
      height: 10px;
      border-radius: 0 0 10px 10px;
      background: #4b5563;
    }

    .oa-planner-paper {
      position: absolute;
      right: 24px;
      bottom: 26px;
      width: 58px;
      height: 70px;
      border-radius: 6px;
      background: white;
      border: 1px solid #c8d7e8;
      transform: rotate(-4deg);
      box-shadow: 0 8px 16px rgba(31, 41, 55, 0.12);
    }

    .oa-planner-paper::before {
      content: "";
      position: absolute;
      left: 9px;
      right: 9px;
      top: 15px;
      height: 34px;
      background:
        linear-gradient(#9db6d3 0 0) 0 0 / 100% 2px no-repeat,
        linear-gradient(#9db6d3 0 0) 0 11px / 82% 2px no-repeat,
        linear-gradient(#9db6d3 0 0) 0 22px / 92% 2px no-repeat;
    }

    .oa-planner-pencil {
      position: absolute;
      left: 50px;
      bottom: 42px;
      width: 62px;
      height: 8px;
      border-radius: 999px;
      background: #f59e0b;
      transform: rotate(17deg);
      transform-origin: right center;
      animation: oaPencilMove 1.2s ease-in-out infinite;
    }

    .oa-planner-pencil::after {
      content: "";
      position: absolute;
      right: -9px;
      top: 0;
      border-left: 10px solid #92400e;
      border-top: 4px solid transparent;
      border-bottom: 4px solid transparent;
    }

    @keyframes oaPencilMove {
      0%, 100% { transform: rotate(15deg) translateX(0); }
      50% { transform: rotate(20deg) translateX(8px); }
    }