:root {
      --label-width: 150px;
      --board-width: 1100px;
      --image-size: 100px;
      --image-gap: 10px;
      --row-min-height: 120px;
      --content-bg: rgba(22, 24, 30, .90);
      --page-bg: #0c0d10;
      --panel-bg: #15171c;
      --border: #2c3038;
      --text: #f5f6f8;
      --muted: #9ba3af;
      --accent: #6e7cff;
      --caption-font-size: 30px;
      --caption-text-align: center;
      --caption-font-family: Inter, Arial, sans-serif;
      --row-font-size: 24px;
      --row-text-align: center;
      --row-font-family: Inter, Arial, sans-serif;
      --row-padding-x: 44px;
      --row-padding-y: 10px;
      --row-vertical-align: center;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100vh;
      color: var(--text);
      background:
        radial-gradient(circle at 20% 0%, rgba(110,124,255,.12), transparent 28%),
        var(--page-bg);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

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

    button {
      border: 1px solid var(--border);
      color: var(--text);
      background: #20232a;
      border-radius: 10px;
      padding: 9px 12px;
      cursor: pointer;
      transition: .16s ease;
    }

    button:hover { background: #292d36; transform: translateY(-1px); }
    button:active { transform: translateY(0); }
    button.primary { background: var(--accent); border-color: var(--accent); }
    button.primary:hover { filter: brightness(1.08); }
    button.danger { color: #ffb6b6; }
    button.icon { padding: 7px 9px; min-width: 36px; }
    button:disabled {
      opacity: .45;
      cursor: not-allowed;
      transform: none !important;
    }

    input[type="text"], input[type="number"], textarea, select {
      width: 100%;
      color: var(--text);
      background: #0f1115;
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 10px 12px;
      outline: none;
    }

    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    input[type="number"] {
      -moz-appearance: textfield;
      text-align: center;
    }

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

    input:focus, textarea:focus, select:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(110,124,255,.15);
    }

    .app {
      width: min(100%, 1600px);
      margin: 0 auto;
      padding: 18px;
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 40;
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
      padding: 12px;
      margin-bottom: 14px;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: rgba(21, 23, 28, .94);
      backdrop-filter: blur(14px);
      box-shadow: 0 12px 35px rgba(0,0,0,.25);
    }

    .brand {
      font-weight: 800;
      margin-right: auto;
      letter-spacing: -.02em;
    }


    .topbar-group {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
    }

    .quick-position {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: rgba(255,255,255,.03);
    }

    .quick-position-label {
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .quick-status-dot {
      width: 12px;
      height: 12px;
      border-radius: 3px;
      background: #414652;
      border: 1px solid rgba(255,255,255,.12);
      box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
    }

    .quick-status-dot.active {
      background: #ffd84d;
      border-color: #d9b000;
      box-shadow: 0 0 0 2px rgba(255,216,77,.18);
    }

    .project-menu {
      position: relative;
    }

    .project-menu summary {
      list-style: none;
      cursor: pointer;
    }

    .project-menu summary::-webkit-details-marker { display: none; }

    .project-menu > summary,
    .toolbar-btn {
      appearance: none;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.04);
      color: var(--text);
      border-radius: 12px;
      padding: 10px 12px;
      font: inherit;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .project-menu[open] > summary {
      background: rgba(132, 144, 255, .18);
      border-color: rgba(132, 144, 255, .45);
    }

    .project-menu-panel {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      min-width: 300px;
      padding: 12px;
      border-radius: 14px;
      border: 1px solid var(--border);
      background: #17191f;
      box-shadow: 0 18px 50px rgba(0,0,0,.35);
      display: grid;
      gap: 10px;
      z-index: 60;
    }

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

    .project-menu-actions button {
      width: 100%;
    }

    .project-menu small {
      color: var(--muted);
      line-height: 1.45;
    }

    .workspace {
      display: grid;
      gap: 14px;
    }

    .panel {
      border: 1px solid var(--border);
      background: var(--panel-bg);
      border-radius: 14px;
      padding: 14px;
      box-shadow: 0 16px 50px rgba(0,0,0,.18);
    }

    .caption-panel {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      align-items: stretch;
    }

    .caption-panel-body {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: end;
    }

    .caption-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .field-label {
      display: block;
      margin-bottom: 7px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .05em;
    }

    .board-scroll {
      overflow-x: auto;
      padding-bottom: 6px;
    }

    .tier-export {
      width: var(--board-width);
      max-width: none;
      margin: 0 auto;
    }

    .tier-caption {
      display: none;
      border: 1px solid var(--border);
      border-bottom: 0;
      background: var(--caption-bg, #101217);
      color: var(--caption-color, #ffffff);
    }

    .section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 8px;
    }

    .section-head .field-label {
      margin: 0;
    }

    .collapse-btn {
      min-width: 38px;
      padding-inline: 10px;
    }

    .caption-panel-body[hidden] {
      display: none !important;
    }

    .tier-caption.visible { display: block; }

    .tier-caption-inner {
      display: flex;
      gap: 14px;
      padding: 18px 22px;
      align-items: center;
      justify-content: center;
    }

    .tier-caption.position-top .tier-caption-inner,
    .tier-caption.position-bottom .tier-caption-inner {
      flex-direction: column;
    }

    .tier-caption.position-left .tier-caption-inner {
      flex-direction: row;
    }

    .tier-caption.position-right .tier-caption-inner {
      flex-direction: row-reverse;
    }

    .tier-caption-media {
      flex: 0 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .tier-caption-media img {
      display: block;
      max-width: min(100%, var(--caption-image-size, 120px));
      max-height: var(--caption-image-size, 120px);
      object-fit: contain;
    }

    .tier-caption-text {
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      text-align: var(--caption-text-align);
      font-size: var(--caption-font-size);
      font-weight: 900;
      font-family: var(--caption-font-family);
      line-height: 1.15;
      flex: 1;
      width: 100%;
    }

    .tier-board {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      border: 1px solid var(--border);
      background: #101217;
      background-repeat: no-repeat;
      background-position: center;
    }

    .tier-board::before {
      content: "";
      position: absolute;
      z-index: -1;
      inset: 0 0 0 var(--label-width);
      background: rgba(0,0,0,var(--bg-overlay, .20));
      pointer-events: none;
    }

    .tier-row {
      display: grid;
      grid-template-columns: var(--label-width) minmax(0, 1fr);
      min-height: var(--row-min-height);
      border-bottom: var(--separator-width, 1px) solid var(--separator-color, rgba(255,255,255,.18));
    }

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

    .row-label {
      position: relative;
      display: grid;
      align-items: stretch;
      justify-items: stretch;
      padding: var(--row-padding-y) var(--row-padding-x);
      color: #111;
      text-align: var(--row-text-align);
      font-weight: 900;
      font-size: var(--row-font-size);
      font-family: var(--row-font-family);
      overflow-wrap: anywhere;
      border-right: var(--separator-width, 1px) solid var(--separator-color, rgba(255,255,255,.18));
    }

    .row-name {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      min-height: 38px;
      display: block;
      outline: none;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      word-break: break-word;
      line-height: 1.12;
      align-self: var(--row-vertical-align);
      padding-right: 0;
    }

    .row-tools {
      position: absolute;
      top: 6px;
      right: 6px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      opacity: 0;
      transition: opacity .15s ease;
      align-items: flex-end;
      max-width: 28px;
    }

    .row-label:hover .row-tools,
    .row-label:focus-within .row-tools { opacity: 1; }

    .row-tools button {
      padding: 2px 6px;
      min-width: 24px;
      height: 24px;
      color: #111;
      border: 1px solid rgba(0,0,0,.25);
      background: rgba(255,255,255,.75);
      border-radius: 6px;
      font-weight: 900;
      font-size: 12px;
      line-height: 1;
    }

    .row-tools button:hover { background: rgba(255,255,255,.9); }

    .row-color {
      position: absolute;
      right: 7px;
      bottom: 7px;
      width: 28px;
      height: 24px;
      padding: 0;
      border: 0;
      border-radius: 6px;
      overflow: hidden;
      opacity: 0;
      cursor: pointer;
    }

    .row-label:hover .row-color,
    .row-label:focus-within .row-color { opacity: 1; }

    .dropzone {
      min-width: 0;
      min-height: var(--row-min-height);
      padding: var(--image-gap);
      display: flex;
      align-content: flex-start;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: var(--image-gap);
      background: var(--content-bg);
      transition: background .15s ease, outline-color .15s ease;
    }

    .dropzone.drag-over {
      background: rgba(110,124,255,.18);
      outline: 3px solid rgba(110,124,255,.65);
      outline-offset: -3px;
    }

    .image-card {
      position: relative;
      flex: 0 0 var(--image-size);
      width: var(--image-size);
      height: var(--image-size);
      border-radius: 8px;
      overflow: hidden;
      background: var(--card-bg, transparent);
      border: 1px solid var(--card-border, transparent);
      box-shadow: var(--card-shadow, none);
      cursor: grab;
      user-select: none;
    }

    .image-card:active { cursor: grabbing; }
    .image-card.dragging { opacity: .35; }

    .image-card img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
      pointer-events: none;
    }

    .image-card .card-actions {
      position: absolute;
      top: 4px;
      right: 4px;
      display: flex;
      gap: 4px;
      opacity: 0;
      transition: opacity .15s ease;
    }

    .image-card .remove-image,
    .image-card .archive-image,
    .image-card .restore-image,
    .image-card .delete-forever-image,
    .image-card .edit-image {
      width: 24px;
      height: 24px;
      padding: 0;
      display: grid;
      place-items: center;
      border: 0;
      border-radius: 50%;
      color: #fff;
      background: rgba(0,0,0,.72);
      transform: none;
      font-weight: 900;
    }

    .image-card:hover .card-actions,
    .image-card:focus-within .card-actions { opacity: 1; }

    .image-card.touch-selected {
      outline: 3px solid #ffd84d;
      outline-offset: 2px;
      box-shadow: 0 0 0 4px rgba(255,216,77,.18);
    }

    .dropzone.mobile-target {
      border-color: rgba(255,216,77,.55);
      box-shadow: inset 0 0 0 2px rgba(255,216,77,.16);
    }

    .mobile-drag-tip {
      display: none;
      margin-top: 8px;
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px dashed rgba(255,216,77,.42);
      color: #f6e39b;
      background: rgba(255,216,77,.08);
      font-size: 13px;
      line-height: 1.4;
    }


    .image-rank-badge {
      position: absolute;
      left: 4px;
      top: 4px;
      z-index: 2;
      padding: 2px 6px;
      border-radius: 8px;
      font-weight: 900;
      line-height: 1;
      pointer-events: none;
      white-space: nowrap;
      box-shadow: 0 2px 8px rgba(0,0,0,.28);
    }

    .settings-subtitle {
      margin: 12px 0 6px;
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: .04em;
      color: #a9b2c5;
    }

    .row-height-control {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 88px;
      gap: 8px;
      align-items: center;
      margin-top: 6px;
    }

    .row-height-control .unit-input {
      width: 100%;
    }


    .browser-project-form {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      padding: 16px;
      border-bottom: 1px solid var(--border);
    }

    .browser-projects-list {
      display: grid;
      gap: 8px;
      padding: 16px;
      max-height: 55vh;
      overflow: auto;
    }

    .browser-project-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: #111319;
    }

    .browser-project-meta strong,
    .browser-project-meta small {
      display: block;
    }

    .browser-project-meta small {
      margin-top: 3px;
      color: var(--muted);
    }

    .browser-project-actions {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .highlight-target {
      animation: targetFlash .9s ease;
      box-shadow: 0 0 0 3px rgba(255,218,63,.92) inset, 0 0 0 2px rgba(255,218,63,.32);
    }

    @keyframes targetFlash {
      0% { box-shadow: 0 0 0 4px rgba(255,218,63,1) inset, 0 0 0 3px rgba(255,218,63,.5); }
      100% { box-shadow: 0 0 0 0 rgba(255,218,63,0) inset, 0 0 0 0 rgba(255,218,63,0); }
    }

    .bank-title {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }

    .bank-title h2 {
      margin: 0;
      font-size: 17px;
    }

    .count {
      color: var(--muted);
      font-size: 13px;
    }

    .image-bank {
      min-height: 150px;
      border: 1px dashed #3a3f49;
      border-radius: 12px;
      background: #0f1115;
    }


    .trash-panel {
      margin-top: 14px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: rgba(255,255,255,.025);
      overflow: hidden;
    }

    .trash-panel > summary {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 14px;
      cursor: pointer;
      font-weight: 800;
      user-select: none;
      list-style: none;
    }

    .trash-panel > summary::-webkit-details-marker { display: none; }

    .trash-panel[open] > summary {
      border-bottom: 1px solid var(--border);
    }

    .archived-bank {
      min-height: 110px;
      padding: 12px;
      border: 0;
      border-radius: 0;
      background: #0d0f13;
    }

    .archive-image,
    .restore-image,
    .delete-forever-image {
      width: 28px;
      height: 28px;
      padding: 0;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: rgba(0,0,0,.76);
      color: #fff;
      border: 0;
      font-size: 14px;
    }

    .empty-hint {
      width: 100%;
      align-self: center;
      padding: 25px;
      color: #6f7785;
      text-align: center;
      pointer-events: none;
    }

    dialog {
      width: min(96vw, 820px);
      max-height: 88vh;
      color: var(--text);
      background: #15171c;
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 0;
      box-shadow: 0 30px 90px rgba(0,0,0,.65);
    }

    dialog::backdrop {
      background: rgba(0,0,0,.72);
      backdrop-filter: blur(5px);
    }

    .modal-header {
      position: sticky;
      top: 0;
      z-index: 2;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 14px 16px;
      border-bottom: 1px solid var(--border);
      background: #15171c;
    }

    .modal-header h2 {
      margin: 0;
      font-size: 18px;
      flex: 1;
    }

    .modal-body {
      display: grid;
      gap: 16px;
      padding: 16px;
    }

    .settings-grid {
      display: grid;
      gap: 18px;
    }

    .settings-section {
      display: grid;
      gap: 12px;
      padding: 14px;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: #111319;
    }

    .settings-section h3 {
      margin: 0;
      font-size: 15px;
      letter-spacing: .02em;
    }

    .setting {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(310px, 360px);
      gap: 16px;
      align-items: center;
    }

    .setting-info strong {
      display: block;
      margin-bottom: 3px;
    }

    .setting-info small { color: var(--muted); }

    .setting-control {
      display: grid;
      grid-template-columns: minmax(140px,1fr) 112px;
      gap: 10px;
      align-items: center;
    }

    .unit-input {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: stretch;
      border: 1px solid var(--border);
      border-radius: 10px;
      overflow: hidden;
      background: #0f1115;
    }

    .unit-input input {
      border: 0;
      border-radius: 0;
      background: transparent;
      padding: 10px 8px;
      min-width: 0;
    }

    .unit-input span {
      display: grid;
      place-items: center;
      min-width: 40px;
      padding: 0 10px;
      color: var(--muted);
      border-left: 1px solid var(--border);
      background: #12151b;
      font-weight: 700;
    }

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

    .triple-buttons button.active,
    .segmented button.active {
      background: var(--accent);
      border-color: var(--accent);
    }

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

    .modal-actions {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
      padding-top: 4px;
    }

    .background-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .row-manager {
      display: grid;
      gap: 8px;
      padding-top: 4px;
    }

    .row-manager-item {
      display: grid;
      grid-template-columns: 32px minmax(0,1fr) auto;
      gap: 8px;
      align-items: center;
      padding: 8px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: #101217;
    }

    .swatch {
      width: 30px;
      height: 30px;
      border-radius: 7px;
      border: 1px solid rgba(255,255,255,.2);
    }

    .row-manager-buttons {
      display: flex;
      gap: 4px;
    }


    .preset-palette {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      align-items: center;
      margin-top: 6px;
    }

    .preset-color-btn {
      width: 22px;
      height: 22px;
      border: 1px solid rgba(255,255,255,.25);
      border-radius: 6px;
      padding: 0;
      min-width: 22px;
    }

    .row-manager-main {
      display: grid;
      gap: 6px;
    }


    .editor-layout {
      display: grid;
      grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
      gap: 16px;
      align-items: start;
    }

    .editor-preview-panel {
      position: sticky;
      top: 0;
      display: grid;
      gap: 12px;
      padding: 14px;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: #111319;
    }

    .editor-preview-panel canvas {
      width: 100%;
      aspect-ratio: 1 / 1;
      border-radius: 12px;
      border: 1px solid var(--border);
      background:
        linear-gradient(45deg, #161a22 25%, transparent 25%),
        linear-gradient(-45deg, #161a22 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #161a22 75%),
        linear-gradient(-45deg, transparent 75%, #161a22 75%);
      background-size: 24px 24px;
      background-position: 0 0, 0 12px, 12px -12px, -12px 0;
    }

    .editor-preview-help {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
    }

    .editor-controls {
      display: grid;
      gap: 14px;
      max-height: 72vh;
      overflow: auto;
      padding-right: 4px;
    }


    .editor-tabbar {
      position: sticky;
      top: 0;
      z-index: 3;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      padding-bottom: 4px;
      background: #15171c;
    }

    .editor-tabbar button.active {
      background: #6e7cff;
      border-color: #6e7cff;
      color: #fff;
    }

    .editor-section[hidden] {
      display: none !important;
    }

    .simple-toggle {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      color: var(--text);
    }

    .simple-toggle input { width: 18px; height: 18px; }

    .color-row {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
    }

    .color-row input[type="color"] {
      width: 56px;
      height: 42px;
      padding: 4px;
    }

    .editor-actions-inline {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .editor-compact-input {
      width: 100%;
      min-height: 84px;
      resize: vertical;
    }


    #imageEditorDialog {
      width: min(96vw, 1280px);
      max-height: 92vh;
    }

    #imageEditorDialog .dialog-inner {
      display: grid;
      gap: 16px;
      padding: 18px;
    }

    #imageEditorDialog .dialog-header {
      position: sticky;
      top: 0;
      z-index: 2;
      display: flex;
      align-items: center;
      gap: 12px;
      padding-bottom: 6px;
      background: #15171c;
    }

    #imageEditorDialog .dialog-header h2 {
      margin: 0;
      font-size: 18px;
      flex: 1;
    }

    #imageEditorDialog .editor-layout {
      grid-template-columns: minmax(320px, 400px) minmax(540px, 1fr);
      gap: 18px;
      align-items: start;
    }

    #imageEditorDialog .editor-preview-panel {
      position: sticky;
      top: 0;
    }

    #imageEditorDialog .editor-controls {
      max-height: 72vh;
      overflow: auto;
      padding-right: 8px;
      align-content: start;
    }

    #imageEditorDialog .settings-section {
      gap: 14px;
    }

    #imageEditorDialog .setting {
      grid-template-columns: 1fr;
      align-items: start;
      gap: 10px;
    }

    #imageEditorDialog .setting-info strong {
      font-size: 14px;
      line-height: 1.25;
    }

    #imageEditorDialog .setting-info small {
      display: block;
      line-height: 1.45;
      margin-top: 4px;
    }

    #imageEditorDialog .setting-control {
      grid-template-columns: minmax(0, 1fr) 110px;
      gap: 10px;
      align-items: center;
    }

    #imageEditorDialog .setting-control > div:empty {
      display: none;
    }

    #imageEditorDialog input[type="range"] {
      width: 100%;
      min-width: 0;
    }

    #imageEditorDialog textarea,
    #imageEditorDialog select,
    #imageEditorDialog input[type="text"],
    #imageEditorDialog input[type="number"] {
      width: 100%;
      min-width: 0;
    }

    #imageEditorDialog .editor-actions-inline {
      width: 100%;
    }

    #imageEditorDialog .editor-actions-inline button {
      flex: 1 1 160px;
    }


    #imageEditorDialog .editor-wide-control {
      grid-column: 1 / -1;
    }

    #imageEditorDialog #editorBannerEnabledButtons,
    #imageEditorDialog #editorTextShadowButtons,
    #imageEditorDialog #editorPipEnabledButtons {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #imageEditorDialog .modal-actions {
      position: sticky;
      bottom: 0;
      z-index: 2;
      padding-top: 10px;
      background: linear-gradient(180deg, rgba(21,23,28,0) 0%, rgba(21,23,28,1) 22%);
    }


    body.editor-open .app {
      max-width: 1800px;
      padding-right: 500px;
      transition: padding-right .22s ease;
    }


    body.settings-open .app {
      max-width: 1800px;
      padding-right: 500px;
      transition: padding-right .22s ease;
    }

    #settingsDialog.settings-drawer {
      position: fixed;
      top: 0;
      right: 0;
      left: auto;
      margin: 0;
      width: 480px;
      max-width: 92vw;
      height: 100vh;
      max-height: 100vh;
      border-radius: 0;
      border-left: 1px solid var(--border);
      border-top: 0;
      border-right: 0;
      border-bottom: 0;
      background: #15171c;
      box-shadow: -18px 0 40px rgba(0,0,0,.35);
    }

    #settingsDialog.settings-drawer::backdrop {
      background: transparent;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    #settingsDialog.settings-drawer .modal-body {
      max-height: calc(100vh - 60px);
      overflow: auto;
      padding-bottom: 24px;
    }


    #settingsDialog.settings-drawer .settings-grid {
      gap: 14px;
    }

    #settingsDialog.settings-drawer .settings-section {
      min-width: 0;
      padding: 12px;
      gap: 14px;
    }

    #settingsDialog.settings-drawer .setting {
      grid-template-columns: minmax(0, 1fr);
      gap: 9px;
      align-items: start;
    }

    #settingsDialog.settings-drawer .setting-info {
      min-width: 0;
    }

    #settingsDialog.settings-drawer .setting-info strong {
      font-size: 14px;
      line-height: 1.3;
      overflow-wrap: normal;
      word-break: normal;
    }

    #settingsDialog.settings-drawer .setting-info small {
      display: block;
      margin-top: 4px;
      line-height: 1.45;
      overflow-wrap: normal;
      word-break: normal;
    }

    #settingsDialog.settings-drawer .setting-control {
      grid-template-columns: minmax(0, 1fr) 100px;
      gap: 10px;
      width: 100%;
      min-width: 0;
    }

    #settingsDialog.settings-drawer .setting-control > div:empty {
      display: none;
    }

    #settingsDialog.settings-drawer input[type="range"],
    #settingsDialog.settings-drawer select,
    #settingsDialog.settings-drawer input[type="text"],
    #settingsDialog.settings-drawer input[type="number"] {
      width: 100%;
      min-width: 0;
    }

    #settingsDialog.settings-drawer .background-actions,
    #settingsDialog.settings-drawer .segmented {
      width: 100%;
    }

    #imageEditorDialog.editor-drawer {
      position: fixed;
      top: 0;
      right: 0;
      left: auto;
      margin: 0;
      width: 480px;
      max-width: 92vw;
      height: 100vh;
      max-height: 100vh;
      border-radius: 0;
      border-left: 1px solid var(--border);
      border-top: 0;
      border-right: 0;
      border-bottom: 0;
      background: #15171c;
      box-shadow: -18px 0 40px rgba(0,0,0,.35);
    }

    #imageEditorDialog.editor-drawer::backdrop {
      background: transparent;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    #imageEditorDialog.editor-drawer .dialog-inner {
      height: 100%;
      display: grid;
      grid-template-rows: auto 1fr auto;
    }

    #imageEditorDialog.editor-drawer .editor-layout {
      grid-template-columns: 1fr;
      min-height: 0;
    }

    #imageEditorDialog.editor-drawer .editor-preview-panel {
      position: sticky;
      top: 0;
      z-index: 2;
      background: #15171c;
    }

    #imageEditorDialog.editor-drawer .editor-controls {
      max-height: none;
      overflow: auto;
      min-height: 0;
      padding-bottom: 20px;
    }

    .toast {
      position: fixed;
      z-index: 999;
      left: 50%;
      bottom: 24px;
      transform: translate(-50%, 18px);
      padding: 11px 16px;
      border: 1px solid var(--border);
      border-radius: 10px;
      color: #fff;
      background: #20232a;
      opacity: 0;
      pointer-events: none;
      transition: .2s ease;
      box-shadow: 0 14px 35px rgba(0,0,0,.35);
    }

    .toast.show {
      opacity: 1;
      transform: translate(-50%, 0);
    }

    .hidden { display: none !important; }

    @media (max-width: 900px) {
      .setting {
        grid-template-columns: 1fr;
      }
      .setting-control {
        grid-template-columns: minmax(120px,1fr) 110px;
      }
    }

    @media (max-width: 760px) {
      .app { padding: 10px; }
      .topbar { position: static; padding: 10px; }
      .brand { width: 100%; margin-right: 0; text-align: center; }
      .topbar-group {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }
      .topbar-group > button,
      .topbar-group > .project-menu,
      .topbar-group > .quick-position { width: 100%; }
      #addImagesBtn,
      .quick-position,
      #settingsBtn,
      #shareLinkBtn,
      #exportBtn,
      .project-menu { grid-column: 1 / -1; }
      .quick-position { justify-content: space-between; flex-wrap: wrap; }
      .quick-position .segmented { width: 100%; }
      .quick-position .segmented button { flex: 1; }
      .project-menu-panel {
        position: static;
        min-width: 0;
        width: 100%;
        margin-top: 8px;
      }
      .project-menu-actions { grid-template-columns: 1fr; }
      .caption-panel { grid-template-columns: 1fr; }
      .caption-panel-body { grid-template-columns: 1fr; }
      .caption-actions { justify-content: stretch; }
      .caption-actions button { width: 100%; }
      .tier-export { margin-left: 0; }
      .board-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
      .setting-control { grid-template-columns: 1fr; }
      .dialog,
      #browserProjectsDialog,
      #rowManagerDialog { width: 98vw; max-width: 98vw; }
      .browser-project-form,
      .browser-project-row { grid-template-columns: 1fr; }
      .browser-project-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
      .editor-layout { grid-template-columns: 1fr; }
      .editor-preview-panel { position: static; }
      body.editor-open .app { padding-right: 10px; }
      body.settings-open .app { padding-right: 10px; }
      #settingsDialog.settings-drawer { width: 100vw; max-width: 100vw; }
      #imageEditorDialog.editor-drawer { width: 100vw; max-width: 100vw; }
      #imageEditorDialog .editor-layout { grid-template-columns: 1fr; }
      #imageEditorDialog .editor-controls { max-height: none; overflow: visible; }
      #imageEditorDialog .setting-control { grid-template-columns: 1fr; }
      .mobile-drag-tip { display: block; }
    }

    @media (hover: none), (pointer: coarse) {
      button:hover { transform: none; }
      .image-card .card-actions { opacity: 1; }
      .image-card .remove-image,
      .image-card .archive-image,
      .image-card .restore-image,
      .image-card .delete-forever-image,
      .image-card .edit-image { width: 28px; height: 28px; }
      .dropzone { -webkit-tap-highlight-color: transparent; }
    }


/* Central Free Fire integration */
body.tier-constructor-page{background:#050810}
.tier-constructor-app{padding-top:14px}
.tier-constructor-app .topbar{top:64px;border-color:#21324f;background:rgba(13,19,34,.96)}
.tier-constructor-app .panel{border-color:#21324f;background:#0d1322}
.tier-constructor-app .project-menu-panel{border-color:#21324f;background:#0d1322}
.cff-public-topbar button:hover,.cff-public-sidebar button:hover{transform:none}
.tier-preset-projects{display:grid;gap:7px;padding:10px;border:1px solid #2c3038;border-radius:11px;background:#10141d}
.tier-preset-projects strong{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:#b8c9df}
.tier-preset-projects button{text-align:left}
.tier-preset-projects small{min-height:16px;color:#9ba3af}
.tier-site-library{content-visibility:auto;contain-intrinsic-size:420px}
.tier-library-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}
.tier-library-head h2{margin:2px 0 0;font-size:20px}
.tier-library-head .field-label{margin:0}
.tier-library-controls{display:grid;grid-template-columns:minmax(210px,270px) minmax(240px,1fr) auto;gap:10px;align-items:center}
.tier-library-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
.tier-library-search{display:block;min-width:0}
.tier-library-status{min-height:22px;padding:10px 2px 4px;color:#9ba3af;font-size:13px}
.tier-library-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:9px;max-height:430px;overflow:auto;padding:2px 3px 3px 0;overscroll-behavior:contain}
.tier-asset-card{display:grid;grid-template-columns:54px minmax(0,1fr) auto;align-items:center;gap:10px;min-width:0;padding:8px;text-align:left;border-color:#26344e;background:#101725}
.tier-asset-card:hover{background:#152037;border-color:#00c8ff}
.tier-asset-card img{width:54px;height:54px;display:block;object-fit:contain;border-radius:9px;background:#080d16}
.tier-asset-copy{min-width:0}
.tier-asset-copy strong,.tier-asset-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tier-asset-copy strong{font-size:13px;color:#fff}
.tier-asset-copy small{margin-top:4px;font-size:11px;color:#8ca3c0}
.tier-asset-add{display:grid;place-items:center;width:30px;height:30px;padding:0;border-radius:50%;font-size:18px;font-weight:900;color:#00c8ff;background:rgba(0,200,255,.08)}
.tier-asset-card[disabled]{opacity:.5;cursor:not-allowed}
.tier-asset-card[disabled]:hover{transform:none;border-color:#26344e;background:#101725}
.tier-library-empty{grid-column:1/-1;padding:28px 14px;border:1px dashed #34435c;border-radius:12px;color:#8ca3c0;text-align:center}
.tier-library-loading{position:relative;overflow:hidden}
.tier-library-loading:after{content:'';position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);animation:tierLibraryShimmer 1.1s infinite}
@keyframes tierLibraryShimmer{to{transform:translateX(100%)}}
@media(max-width:900px){.tier-library-controls{grid-template-columns:1fr 1fr}.tier-library-search{grid-column:1/-1}.tier-library-results{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.tier-constructor-app{padding-top:8px}.tier-constructor-app .topbar{top:0}.tier-library-head{align-items:flex-start;flex-direction:column}.tier-library-controls{grid-template-columns:1fr}.tier-library-search{grid-column:auto}.tier-library-results{grid-template-columns:1fr;max-height:55vh}.tier-asset-card{grid-template-columns:50px minmax(0,1fr) 32px}.tier-asset-card img{width:50px;height:50px}}
.tier-constructor-app input[type="search"]{width:100%;color:var(--text);background:#0f1115;border:1px solid var(--border);border-radius:10px;padding:10px 12px;outline:none}
.tier-constructor-app input[type="search"]:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(110,124,255,.15)}
@media(max-width:760px){.tier-constructor-app #addRowBtn{grid-column:1/-1}.tier-constructor-app .project-menu>summary{width:100%;justify-content:center}}


/* Link compartilhável */
.share-project-dialog{width:min(94vw,760px)}
.share-project-body{display:grid;gap:13px;padding:18px}
.share-project-body p{margin:0;color:#c3cfdf;line-height:1.5}
.share-project-link-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px}
.share-project-link-row input{min-width:0;font-size:13px}
.share-project-status{min-height:20px;color:#91a6c2;font-size:13px;line-height:1.45}
.share-project-status.error{color:#ffb6b6}
.share-project-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;padding-top:2px}
@media(max-width:760px){.share-project-dialog{width:98vw;max-width:98vw}.share-project-link-row{grid-template-columns:1fr}.share-project-actions{display:grid;grid-template-columns:1fr}.share-project-actions button{width:100%}}


/* Tier Constructor UX refinements */
.row-delete-button{position:absolute;top:6px;left:6px;z-index:4;width:25px;height:25px;min-width:25px;padding:0;display:grid;place-items:center;border:1px solid rgba(0,0,0,.28);border-radius:7px;color:#fff!important;background:rgba(145,18,18,.86)!important;opacity:.76;box-shadow:0 2px 8px rgba(0,0,0,.22)}
.row-delete-button:hover,.row-delete-button:focus-visible{opacity:1;background:#b21f2d!important}
.row-tools{z-index:3}
.image-card .card-actions{z-index:6}
.image-card .archive-image,.image-card .restore-image,.image-card .delete-forever-image{width:24px;height:24px;padding:0;display:grid;place-items:center;border:0;border-radius:50%;color:#fff;background:rgba(0,0,0,.78);transform:none;font-weight:900;line-height:1}
.image-card .archive-image{font-size:12px}
.trash-panel{transition:border-color .15s ease,background .15s ease,box-shadow .15s ease}
.trash-panel.drag-over{border-color:#ffcc33;background:rgba(255,204,51,.08);box-shadow:inset 0 0 0 2px rgba(255,204,51,.22)}
.trash-panel.drag-over>summary{color:#ffe28a}
.trash-dropzone{transition:background .15s ease,outline-color .15s ease}
.tier-site-library{content-visibility:auto;contain-intrinsic-size:92px;padding:0;overflow:hidden}
.tier-library-summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px;cursor:pointer;list-style:none;user-select:none}
.tier-library-summary::-webkit-details-marker{display:none}
.tier-library-summary h2{margin:2px 0 0;font-size:20px}
.tier-library-summary .field-label{margin:0}
.tier-library-summary-meta{display:flex;align-items:center;gap:10px;white-space:nowrap}
.tier-library-chevron{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#101725;color:#8edcff;transition:transform .18s ease}
.tier-site-library[open] .tier-library-chevron{transform:rotate(180deg)}
.tier-library-body{padding:0 14px 14px;border-top:1px solid #21324f}
.tier-library-controls{padding-top:14px}
.tier-library-results:empty{display:none}
.tier-library-status{min-height:22px}
@media(max-width:760px){.tier-library-summary{align-items:flex-start}.tier-library-summary-meta{align-items:flex-end;flex-direction:column-reverse;gap:5px}.row-delete-button{width:28px;height:28px;min-width:28px;opacity:1}}