.export-target-overlay .target-rect.inactive {
      opacity: .42;
    }

    .export-target-overlay .target-label {
      fill: rgba(255, 255, 255, .9);
      stroke: rgba(15, 23, 42, .9);
      stroke-width: 3;
      paint-order: stroke;
      font: 11px Inter, system-ui, sans-serif;
      letter-spacing: 0;
      user-select: none;
    }

    .transform-overlay {
      position: absolute;
      inset: 0;
      display: none;
      width: 100%;
      height: 100%;
      overflow: visible;
      pointer-events: none;
      z-index: 3;
    }

    .transform-overlay .transform-frame {
      fill: rgba(34, 166, 153, .07);
      stroke: #22a699;
      stroke-width: 1.5;
      stroke-dasharray: 6 4;
      vector-effect: non-scaling-stroke;
    }

    .transform-overlay .transform-rotate-line {
      stroke: #f7b32b;
      stroke-width: 1.25;
      stroke-dasharray: 4 4;
      vector-effect: non-scaling-stroke;
    }

    .transform-overlay .transform-handle {
      fill: #f7b32b;
      stroke: #111;
      stroke-width: 1;
      vector-effect: non-scaling-stroke;
    }

    .transform-overlay .transform-rotate-handle {
      fill: #22a699;
    }

    .selection-box {
      position: absolute;
      display: none;
      border: 1px solid #f7b32b;
      background: rgba(247, 179, 43, .14);
      box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
      pointer-events: none;
    }

    .selection-box.quick-mask {
      border-color: rgba(255, 80, 80, .95);
      background: rgba(255, 35, 35, .22);
    }

    .retouch-brush-overlay {
      position: absolute;
      display: none;
      width: 28px;
      height: 28px;
      border: 1px solid rgba(255, 255, 255, .92);
      border-radius: 50%;
      box-shadow: 0 0 0 1px rgba(0, 0, 0, .72), 0 0 16px rgba(34, 166, 153, .28);
      transform: translate(-50%, -50%);
      pointer-events: none;
      z-index: 2;
    }

    .retouch-brush-overlay.clone-destination {
      border-color: rgba(247, 179, 43, .96);
      color: rgba(247, 179, 43, .96);
      box-shadow: 0 0 0 1px rgba(0, 0, 0, .72), 0 0 16px rgba(247, 179, 43, .28);
    }

    .retouch-brush-overlay.clone-destination::before,
    .retouch-brush-overlay.clone-destination::after,
    .clone-source-overlay::before,
    .clone-source-overlay::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      background: currentColor;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }

    .retouch-brush-overlay.clone-destination::before,
    .clone-source-overlay::before {
      width: 1px;
      height: calc(100% + 8px);
    }

    .retouch-brush-overlay.clone-destination::after,
    .clone-source-overlay::after {
      width: calc(100% + 8px);
      height: 1px;
    }

    .clone-source-overlay {
      position: absolute;
      display: none;
      width: 18px;
      height: 18px;
      border: 1px solid rgba(34, 166, 153, .96);
      border-radius: 50%;
      color: rgba(34, 166, 153, .96);
      box-shadow: 0 0 0 1px rgba(0, 0, 0, .72), 0 0 16px rgba(34, 166, 153, .32);
      transform: translate(-50%, -50%);
      pointer-events: none;
      z-index: 2;
    }

    .app.screen-focus {
      grid-template-columns: 46px minmax(360px, 1fr) 0;
    }

    .app.screen-focus .rightbar {
      display: none;
    }

    .empty-state {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      padding: 24px;
      pointer-events: none;
    }

    .empty-inner {
      width: min(560px, 92vw);
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 12px;
      background: rgba(30, 30, 30, .96);
      padding: 28px;
      box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
      text-align: center;
      pointer-events: auto;
    }

    .empty-badge {
      display: inline-block;
      margin-bottom: 12px;
      padding: 4px 12px;
      border-radius: 99px;
      background: rgba(49, 130, 206, .2);
      color: #63b3ed;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .5px;
      text-transform: uppercase;
    }

    .empty-inner h1 {
      margin: 0 0 10px;
      font-size: 26px;
      font-weight: 700;
      color: #f7fafc;
    }

    .empty-inner p {
      margin: 0 0 20px;
      color: #a0aec0;
      line-height: 1.6;
      font-size: 13px;
    }

    .empty-dropzone {
      border: 2px dashed rgba(255, 255, 255, .18);
      border-radius: 10px;
      padding: 24px 16px;
      background: rgba(255, 255, 255, .02);
      margin-bottom: 20px;
      transition: all .2s ease;
    }

    .empty-dropzone:hover {
      border-color: #3182ce;
      background: rgba(49, 130, 206, .05);
    }

    .empty-drop-icon {
      font-size: 32px;
      margin-bottom: 8px;
    }

    .empty-drop-text {
      color: #cbd5e0;
      font-size: 13px;
      margin-bottom: 16px;
    }

    .empty-cta-group {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
    }

    .cta-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 9px 18px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      border: 1px solid transparent;
      transition: all .15s ease;
    }

    .cta-btn.primary {
      background: linear-gradient(180deg, #6B76E5 0%, #5E6AD2 100%);
      color: #ffffff;
      border-color: rgba(255, 255, 255, 0.16);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), var(--shadow-pill);
    }

    .cta-btn.primary:hover {
      background: linear-gradient(180deg, #7883EE 0%, #6B76E5 100%);
    }

    .cta-btn.secondary {
      background: rgba(255, 255, 255, 0.05);
      color: var(--ink);
      border-color: var(--line-2);
    }

    .cta-btn.secondary:hover {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.25);
    }

    .cta-btn.accent {
      background: rgba(242, 201, 76, 0.15);
      color: #F5D77A;
      border-color: rgba(242, 201, 76, 0.3);
    }

    .cta-btn.accent:hover {
      background: rgba(246, 173, 85, .25);
    }

    .empty-tips {
      display: flex;
      justify-content: center;
      gap: 16px;
      font-size: 11px;
      color: #718096;
    }

    .empty-tips kbd {
      background: #2d3748;
      color: #e2e8f0;
      padding: 2px 5px;
      border-radius: 3px;
      font-size: 10px;
      margin-right: 4px;
    }

    .tutorial-highlight {
      position: fixed;
      z-index: 40;
      display: none;
      border: 2px solid #f7b32b;
      border-radius: 6px;
      box-shadow: 0 0 0 3px rgba(247, 179, 43, .22), 0 0 0 9999px rgba(0, 0, 0, .08);
      pointer-events: none;
    }

    .tutorial-coach {
      position: absolute;
      left: 14px;
      top: 48px;
      z-index: 41;
      display: none;
      width: 286px;
      max-width: calc(100% - 28px);
      border: 1px solid #57524a;
      border-radius: 6px;
      background: rgba(42, 42, 42, .97);
      box-shadow: 0 16px 36px rgba(0, 0, 0, .38);
      overflow: hidden;
    }

    .tutorial-coach.active { display: block; }

    .tutorial-head,
    .tutorial-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 9px;
    }

    .tutorial-head {
      border-bottom: 1px solid #484848;
      color: #f2f2f2;
      font-size: 12px;
      font-weight: 800;
    }

    .tutorial-progress {
      margin-left: auto;
      color: #d8d0c4;
      font-size: 11px;
      font-weight: 700;
    }

    .tutorial-body {
      display: grid;
      gap: 8px;
      padding: 10px;
    }

    .tutorial-title {
      color: #fff;
      font-size: 14px;
      font-weight: 800;
      line-height: 1.25;
    }

    .tutorial-copy,
    .tutorial-state {
      color: #cfc9bf;
      font-size: 12px;
      line-height: 1.4;
    }

    .tutorial-state.complete { color: #9ee7d9; }
    .tutorial-state.pending { color: #ffe1a0; }

    .tutorial-steps {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 4px;
    }

    .tutorial-step-dot {
      height: 5px;
      border-radius: 999px;
      background: #68625b;
    }

    .tutorial-step-dot.complete { background: var(--primary); }
    .tutorial-step-dot.active { background: #F2C94C; }

    .tutorial-actions {
      border-top: 1px solid var(--line);
      justify-content: space-between;
    }

    .tutorial-actions button {
      min-height: 28px;
      padding: 4px 8px;
      font-size: 12px;
      font-weight: 700;
    }

    .rightbar {
      grid-area: right;
      display: flex;
      flex-direction: column;
      border-left: 1px solid var(--line);
      background: var(--surface);
      overflow: hidden;
    }

    .panel-tabs {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      border-bottom: 1px solid var(--line);
      background: var(--surface-2);
    }

    .tab-btn {
      height: 38px;
      border: 0;
      border-right: 1px solid var(--line);
      border-radius: 0;
      background: transparent;
      color: var(--muted);
      padding: 0 6px;
      font-size: 12px;
    }

    .tab-btn:last-child { border-right: 0; }
    .tab-btn.active { color: var(--ink); background: var(--panel); border-color: transparent; }

    .panel {
      display: none;
      min-height: 0;
      overflow: auto;
      padding: 12px;
      flex: 1;
    }

    .panel.active { display: block; }

    .panel-section {
      border-bottom: 1px solid var(--line);
      padding-bottom: 12px;
      margin-bottom: 12px;
    }

    .panel-section:last-child {
      border-bottom: 0;
      margin-bottom: 0;
      padding-bottom: 0;
    }

    .panel-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 9px;
      color: var(--muted);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    .layer-list {
      display: flex;
      flex-direction: column-reverse;
      gap: 8px;
    }

    .layer-row {
      display: grid;
      grid-template-columns: 30px 42px 42px minmax(0, 1fr);
      align-items: center;
      gap: 8px;
      min-height: 50px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--surface-2);
      padding: 6px 8px;
      cursor: pointer;
    }

    .layer-row:hover { border-color: var(--line-strong); background: var(--surface-3); }

    .layer-row.active {
      border-color: rgba(94, 106, 210, 0.6);
      background: rgba(94, 106, 210, 0.14);
    }

    .layer-row.drag-over,
    .group-folder-row.drag-over,
    .layer-list.drag-over {
      outline: 2px solid var(--primary);
      outline-offset: -2px;
    }

    .group-folder-row {
      display: grid;
      grid-template-columns: 24px minmax(0, 1fr) 44px;
      align-items: center;
      gap: 8px;
      min-height: 36px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--surface-3);
      padding: 6px 8px;
      color: var(--ink);
      cursor: pointer;
      font-size: 12px;
      font-weight: 800;
    }

    .group-folder-row.active {
      border-color: var(--accent);
      background: rgba(34, 166, 153, .18);
    }

    .group-folder-swatch {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: var(--group-color, #22a699);
      box-shadow: 0 0 0 1px rgba(255, 255, 255, .28);
    }

    .group-folder-name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .group-folder-count {
      color: var(--muted);
      font-size: 10px;
      text-align: right;
    }

    .eye-btn {
      width: 28px;
      height: 28px;
      min-height: 28px;
      padding: 0;
    }

    .thumb,
    .mask-thumb {
      width: 42px;
      height: 42px;
      border: 1px solid var(--line);
      border-radius: 4px;
      background:
        linear-gradient(45deg, #686868 25%, transparent 25%),
        linear-gradient(-45deg, #686868 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #686868 75%),
        linear-gradient(-45deg, transparent 75%, #686868 75%);
      background-color: #9a9a9a;
      background-size: 10px 10px;
      background-position: 0 0, 0 5px, 5px -5px, -5px 0;
      overflow: hidden;
    }

    .mask-thumb {
      display: grid;
      place-items: center;
      color: #e6e6e6;
      font-size: 16px;
      font-weight: 800;
    }

    .mask-thumb.has-mask {
      border-color: #d8d8d8;
      background: #fff;
    }

    .mask-thumb.editing-mask {
      outline: 2px solid #168cff;
      outline-offset: 1px;
    }

    .mask-thumb.disabled-mask {
      opacity: .55;
    }

    .thumb canvas,
    .mask-thumb canvas {
      width: 100%;
      height: 100%;
      display: block;
    }