:root {
      --bg: #0b0f1a;
      --card: #121a2b;
      --card-2: #0f1627;
      --card-3: #101b33;
      --border: #1f2a44;
      --border-2: #2a3a64;
      --text: #e9ecf1;
      --muted: #a9b3c7;
      --primary: #1f4dff;
      --primary-2: #3b5cff;
      --success: #3bff9e;
      --danger: #ff6b6b;
      --selection: rgba(59, 92, 255, .22);
      --selection-border: rgba(59, 92, 255, .7);
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    .topbar {
      position: absolute;
      top: 25px;
      left: 24px;
      z-index: 10;
    }

    .back-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 36px;
      border-radius: 999px;
      border: 1px solid var(--border-2);
      background: var(--card-2);
      color: #c9d2e6;
      text-decoration: none;
      transition: .2s ease;
    }

    .back-btn:hover {
      border-color: var(--primary-2);
      background: rgba(59, 92, 255, .08);
      transform: translateY(-1px);
    }

    .back-icon {
      width: 36px;
      height: 22px;
      fill: none;
      transition: transform .2s ease;
    }

    .back-btn:hover .back-icon {
      transform: translateX(-2px);
    }

    .wrap {
      width: 100%;
      max-width: 900px;
      margin: 0 auto;
      padding: 20px 24px 40px;
      flex: 1;
    }

    h1 {
      text-align: center;
      margin: 0 0 24px;
      font-size: 40px;
      letter-spacing: -.5px;
    }

    .mode-switch {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 1fr;
      border-radius: 999px;
      padding: 0;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid var(--border);
      width: fit-content;
      margin: 0 auto 18px;
    }

    .card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 0px 22px 22px 22px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
    }

    .upload-box {
      border: 2px dashed #36508f;
      border-radius: 22px;
      padding: 26px 22px;
      text-align: center;
      cursor: pointer;
      transition: .25s ease;
      max-width: 520px;
      margin: 0 auto;
    }

    #uploadText {
      display: block;
      font-size: 16px;
      font-weight: 700;
      line-height: 1.35;
      color: #ffffff;
      margin-bottom: 8px;
    }

    #uploadSub.helptext {
      max-width: 420px;
      margin: 0 auto;
      font-size: 13px;
      line-height: 1.5;
      color: rgba(233, 236, 241, 0.76);
    }

    .upload-box.selected #uploadText {
      color: #d8ffe8;
    }

    .upload-box.expanded {
      max-width: 100%;
    }

    .upload-box:hover,
    .upload-box.dragover {
      background: var(--card-2);
      border-color: var(--primary-2);
      box-shadow: 0 0 0 3px rgba(59, 92, 255, .15);
      transform: translateY(-2px);
    }

    .upload-box:hover .upload-icon,
    .upload-box.dragover .upload-icon {
      box-shadow:
        0 0 12px rgba(59, 92, 255, 0.6),
        0 0 24px rgba(59, 92, 255, 0.25);
      border-color: var(--primary-2);
    }

    .upload-box:hover .upload-icon svg,
    .upload-box.dragover .upload-icon svg {
      transform: scale(1.1);
    }

    .upload-box:hover .upload-icon path,
    .upload-box.dragover .upload-icon path {
      stroke: #ffffff;
      filter: drop-shadow(0 0 4px rgba(59, 92, 255, 0.95)) drop-shadow(0 0 10px rgba(59, 92, 255, 0.75));
    }

    .upload-box.selected {
      border-color: var(--success);
      color: #b7ffcb;
      background: var(--card-2);
    }

    .upload-icon {
      width: 40px;
      height: 40px;
      border: 1px solid var(--border-2);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 16px;
      color: #d9e2ff;
      background: rgba(59, 92, 255, 0.08);
      box-shadow: inset 0 0 0 1px rgba(59, 92, 255, 0.05);
    }

    .upload-icon svg {
      transition: transform .2s ease, opacity .2s ease;
    }

    .upload-box {
      position: relative;
      overflow: hidden;
    }

    .upload-box::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at top, rgba(59, 92, 255, 0.16), transparent 58%);
      opacity: 0;
      transition: opacity .25s ease;
      pointer-events: none;
    }

    .upload-box:hover::before,
    .upload-box.dragover::before,
    .upload-box.selected::before {
      opacity: 1;
    }

    .upload-box.dragover {
      border-color: #7ea0ff;
      box-shadow: 0 0 0 4px rgba(59, 92, 255, .18), 0 18px 40px rgba(10, 16, 32, .32);
      transform: translateY(-3px) scale(1.01);
    }

    .upload-box.dragover #uploadText {
      color: #ffffff;
    }

    .upload-box.dragover #uploadSub {
      color: #dce5ff;
    }

    .upload-box.selected {
      border-style: solid;
      box-shadow: 0 0 0 3px rgba(59, 255, 158, .10), 0 14px 32px rgba(7, 15, 26, .24);
    }

    .upload-box.selected #uploadSub {
      color: rgba(183, 255, 203, .9) !important;
    }

    .upload-box.selected .upload-icon {
      background: rgba(59, 255, 158, 0.12);
      border-color: rgba(59, 255, 158, 0.5);
      color: #b7ffcb;
      box-shadow: 0 0 0 6px rgba(59, 255, 158, 0.08);
    }

    .upload-box.selected .upload-icon svg {
      transform: scale(1.08);
    }

    #removedInfo {
      display: inline-block;
      width: fit-content;
      max-width: 100%;
    }

    #removedInfo strong {
      white-space: nowrap;
    }

    .note-highlight {
      font-weight: 700;
    }

    .tiny-btn,
    .danger-btn {
      padding: 8px 14px;
      border-radius: 999px;
      border: 1px solid var(--border-2);
      background: var(--card-2);
      color: var(--text);
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      width: auto;
      margin: 0;
      transition: .15s ease;
    }

    .mode-btn {
      position: relative;
      z-index: 1;
      padding: 10px 22px;
      border-radius: 999px;
      border: none;
      background: transparent;
      color: var(--muted);
      font-weight: 700;
      cursor: pointer;
    }

    .tiny-btn.active {
      background: linear-gradient(135deg, var(--primary), var(--primary-2));
      border-color: transparent;
      color: #fff;

      box-shadow:
        0 8px 20px rgba(59, 92, 255, 0.35),
        0 0 0 1px rgba(59, 92, 255, 0.4);
    }

    .mode-btn.active {
      color: #fff;
    }

    .mode-slider {
      position: absolute;
      top: 0;
      left: 0;
      width: 50%;
      height: 100%;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--primary), var(--primary-2));
      transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
      will-change: transform;
      z-index: 0;
    }

    .tiny-btn:hover:not(:disabled),
    button.primary:hover:not(:disabled) {
      border-color: var(--primary-2);
      background: rgba(59, 92, 255, .10);
      color: #fff;
      box-shadow: 0 8px 20px rgba(59, 92, 255, .16);
      transform: translateY(-1px);
    }

    .tiny-btn:active:not(:disabled) {
      background: rgba(10, 20, 45, 0.9);
      border-color: var(--primary-2);
      color: #fff;
    }

    button.primary:hover:not(:disabled) {
      background: var(--primary-2);
      box-shadow: 0 8px 20px rgba(31, 77, 255, 0.28);
    }

    input:not([type="checkbox"]):hover,
    select:hover,
    textarea:hover {
      border-color: var(--primary-2);
      box-shadow: 0 0 0 2px rgba(59, 92, 255, .08);
    }

    button:active:not(:disabled),
    .tiny-btn:active:not(:disabled),
    .mode-btn:active:not(:disabled),
    .danger-btn:active:not(:disabled) {
      transform: translateY(1px);
    }

    .danger-btn {
      border: 1px solid rgba(255, 107, 107, 0.6);
      color: #fff;
      background: transparent;
    }

    .danger-btn:hover:not(:disabled) {
      border-color: rgba(255, 107, 107, .75);
      background: rgba(255, 107, 107, .14);
      color: #fff;
      box-shadow: 0 8px 20px rgba(255, 107, 107, .16);
      transform: translateY(-1px);
    }

    label {
      display: block;
      margin-top: 4px;
      margin-bottom: 6px;
      font-size: 15px;
      color: #c9d2e6;
      font-weight: 600;
    }

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

    input:not([type="checkbox"]),
    select,
    textarea {
      width: 100%;
      padding: 12px;
      border-radius: 10px;
      border: 1px solid var(--border-2);
      background: var(--card-2);
      color: #fff;
    }

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

    input::placeholder,
    textarea::placeholder {
      font-style: italic;
      opacity: 0.7;
      color: rgba(233, 236, 241, .45);
    }

    button.primary {
      margin-top: 18px;
      width: 100%;
      border: none;
      border-radius: 10px;
      background: var(--primary);
      color: #fff;
      padding: 12px 18px;
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
    }

    button:disabled,
    .tiny-btn:disabled,
    .danger-btn:disabled {
      opacity: .55;
      cursor: not-allowed;
      filter: grayscale(.35)
    }

    button.primary:disabled {
      background: #2a3f8f;
      color: rgba(255, 255, 255, 0.58);
      box-shadow: none;
    }

    button.primary.inactive-soft {
      background: #2a3f8f;
      color: rgba(255, 255, 255, 0.58);
      box-shadow: none;
      opacity: 0.72;
    }

    button.primary.inactive-soft,
    button.primary.inactive-soft:hover,
    button.primary.inactive-soft:focus,
    button.primary.inactive-soft:active {
      background: #2a3f8f !important;
      box-shadow: none !important;
      transform: none !important;
      color: rgba(255, 255, 255, 0.58) !important;
      cursor: not-allowed;
      transition: none !important;
    }

    .helptext {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.35;
      margin-top: 6px;
    }

    .helptext strong {
      color: #eaf0ff;
    }

    .section-title {
      margin: 16px 0 6px;
      font-size: 18px;
      font-weight: 700;
      color: #fff;
    }

    .row {
      display: flex;
      gap: 12px;
      align-items: flex-end;
      flex-wrap: wrap;
    }

    .row>div {
      flex: 1 1 260px;
    }

    .manual-card {
      margin-top: 20px;
      padding: 14px 24px 24px 24px;
    }

    .manual-head {
      margin-bottom: 12px;
    }

    .manual-head .section-title {
      margin: 0;
      font-size: 20px;
      font-weight: 700;
      color: #f3f6ff;
    }

    .manual-subtitle {
      margin: 6px 0 0;
      font-size: 14px;
      line-height: 1.45;
      color: var(--muted);
    }

    .manual-builder {
      display: flex;
      flex-wrap: wrap;
      gap: 18px 24px;
      align-items: flex-end;
    }

    .manual-config {
      display: flex;
      flex-wrap: wrap;
      gap: 18px;
      align-items: flex-end;
      flex: 1 1 320px;
    }

    .manual-field {
      min-width: 120px;
      max-width: 180px;
    }

    .manual-field label {
      display: block;
      margin: 0 0 8px;
      font-size: 15px;
      font-weight: 600;
      color: #e5eaff;
      letter-spacing: 0.2px;
      opacity: 0.95;
    }

    .mixed-percent {
      background: rgba(255, 107, 107, .14) !important;
      box-shadow: inset 0 0 0 2px rgba(255, 107, 107, .85);
      color: #ffd2d2;
      font-weight: 600;
    }

    .number-stepper {
      gap: 8px;
    }

    .number-stepper input {
      width: 48px;
      min-width: 48px;
      max-width: 48px;
      height: 40px;
      padding: 6px 8px;
      text-align: center;
      font-weight: 700;
    }

    .step-btn {
      width: 24px !important;
      height: 24px !important;
      padding: 0 !important;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }

    .manual-primary-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: flex-end;
    }

    .manual-create-btn,
    .manual-reset-btn {
      margin-top: 0 !important;
      width: auto !important;
      min-width: 190px;
      height: 42px;
      padding: 0 16px !important;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      font-size: 15px;
      font-weight: 700;
    }

    .ghost-btn {
      border: 1px solid var(--border-2);
      background: transparent;
      color: #d6deef;
      cursor: pointer;
      transition: .15s ease;
    }

    .ghost-btn:hover:not(:disabled) {
      border-color: rgba(255, 107, 107, .55);
      background: rgba(255, 107, 107, .10);
      color: #fff;
      box-shadow: 0 8px 20px rgba(255, 107, 107, .12);
      transform: translateY(-1px);
    }

    .ghost-btn:active:not(:disabled) {
      transform: translateY(1px);
    }

    .manual-toolbar {
      margin-top: 18px;
      display: flex;
      flex-wrap: wrap;
      gap: 14px 18px;
      align-items: center;
      justify-content: space-between;
    }

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

    .toolbar-group-secondary {
      padding-left: 0;
      margin-left: 12px;
    }

    .toolbar-apply-btn {
      border-color: var(--primary-2);
      background: rgba(59, 92, 255, .10);
      color: #fff;
    }

    .toolbar-apply-btn:hover:not(:disabled) {
      background: rgba(59, 92, 255, .16);
    }

    button.primary.secondary {
      background: #ea580c;
      border: 1px solid #ea580c;
      color: #fff;
    }

    button.primary.secondary:hover:not(:disabled) {
      background: #f97316;
      border-color: #f97316;
      color: #fff;
      box-shadow: 0 8px 20px rgba(234, 88, 12, 0.28);
    }

    .controls-row {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
      margin-top: 16px;
    }

    #rowSelectionControls {
      justify-content: flex-start;
      align-items: center;
      margin-top: 10px;
    }

    #rowSelectionControls .status-pill {
      margin-left: 2px;
    }

    .hidden {
      display: none !important;
    }

    .pillbox {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 8px;
      min-height: 42px;
      align-items: center;
    }

    .pill {
      background: var(--card-2);
      border: 1px solid var(--border-2);
      border-radius: 999px;
      line-height: 1;
      padding: 4px 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 13px;
      line-height: 1;
      transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, background .15s ease, color .15s ease;
    }

    .pill span {
      display: flex;
      align-items: center;
    }

    .pill:hover {
      border-color: var(--primary-2);
      background: rgba(59, 92, 255, .08);
      box-shadow: 0 8px 20px rgba(59, 92, 255, .12);
      transform: translateY(-1px);
    }

    .pill:has(input:checked) {
      border-color: var(--primary-2);
      background: rgba(59, 92, 255, .12);
      color: #fff;

      box-shadow:
        0 0 0 1px rgba(59, 92, 255, .2),
        0 0 6px rgba(59, 92, 255, .25);
    }

    .pill:has(input:checked):hover {
      background: rgba(59, 92, 255, .16);
      box-shadow:
        0 0 0 2px rgba(59, 92, 255, .14),
        0 10px 24px rgba(59, 92, 255, .20);
      transform: translateY(-2px);
    }

    .preview,
    .grid-wrap {
      margin-top: 14px;
      border: 1px solid var(--border-2);
      border-radius: 12px;
      background: var(--card-2);
      overflow: auto;
      max-height: 450px;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
      font-size: 15px;
    }

    .preview-error {
      border-color: rgba(255, 107, 107, 0.75) !important;
      box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.12);
    }

    .error-cell {
      background: rgba(255, 107, 107, 0.12) !important;
      box-shadow: inset 0 0 0 1px rgba(255, 107, 107, 0.7);
    }

    th,
    td {
      border-bottom: 1px solid var(--border);
      border-right: 1px solid var(--border);
      padding: 8px 10px;
      white-space: normal;
      word-break: break-word;
    }

    th:last-child,
    td:last-child {
      border-right: none;
    }

    th {
      position: sticky;
      top: 0;
      z-index: 2;
      background: var(--card-3);
      text-align: left;
      font-weight: 700;
    }

    tbody tr:nth-child(even) td {
      background: rgba(255, 255, 255, .02);
    }

    tbody tr:hover td {
      background: rgba(31, 77, 255, .10);
    }

    td.num {
      text-align: right;
      font-variant-numeric: tabular-nums;
    }

    td.txt {
      text-align: left;
    }

    .muted-cell {
      color: var(--muted);
      padding: 16px 10px !important;
    }

    .editor-table th,
    .editor-table td {
      padding: 0;
      min-width: 0;
      width: auto;
      white-space: normal;
      position: relative;
      overflow: hidden;
    }

    .editor-table .row-index,
    .editor-table .col-index {
      width: 54px;
      min-width: 54px;
      max-width: 54px;
      text-align: center;
      font-weight: 700;
      color: #9fb3da;
      background: rgba(255, 255, 255, .02);
    }

    .editor-table .row-index {
      padding: 12px 8px;
    }

    .editor-table input {
      display: block;
      width: 100%;
      min-width: 0;
      max-width: 100%;
      box-sizing: border-box;
      border: none;
      outline: none;
      border-radius: 0;
      background: transparent;
      padding: 11px 10px;
      color: #fff;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .editor-table th input {
      font-weight: 700;
      background: rgba(255, 255, 255, .02);
    }

    .editor-table input.active-cell {
      background: rgba(59, 92, 255, .16);
      box-shadow: inset 0 0 0 1px rgba(59, 92, 255, .7);
      position: relative;
      z-index: 2;
    }

    .editor-table input.selected-cell {
      background: var(--selection);
      box-shadow: inset 0 0 0 1px var(--selection-border);
      position: relative;
      z-index: 1;
    }

    .editor-table input.active-cell.selected-cell {
      background: rgba(59, 92, 255, .28);
      box-shadow: inset 0 0 0 2px rgba(59, 92, 255, .9);
      position: relative;
      z-index: 3;
    }

    .row-checkbox-cell,
    .row-checkbox-head {
      width: 56px;
      min-width: 56px;
      max-width: 56px;
      text-align: center;
    }

    .preview-row-toggle {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 1.5px solid rgba(159, 179, 218, 0.8);
      background: transparent;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .12s ease;
    }

    .preview-row-toggle::after {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: transparent;
      transition: background .15s ease, transform .15s ease;
      transform: scale(0.75);
    }

    .preview-row-toggle:hover {
      border-color: var(--primary-2);
      box-shadow: 0 0 0 3px rgba(59, 92, 255, .12);
      transform: translateY(-1px);
    }

    .preview-row-toggle.is-selected {
      border-color: var(--primary-2);
      background: rgba(59, 92, 255, .12);
      box-shadow: 0 0 0 3px rgba(59, 92, 255, .10);
    }

    .preview-row-toggle.is-selected::after {
      background: var(--primary-2);
      transform: scale(1);
    }

    .preview tbody tr.row-unselected td {
      opacity: 0.45;
    }

    .preview tbody tr.row-unselected:hover td {
      opacity: 0.8;
    }

    .status-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 0;
      min-height: 34px;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .03);
      border: 1px solid var(--border);
      color: var(--muted);
      font-size: 13px;
      flex-wrap: nowrap;
      white-space: nowrap;
    }

    .trust {
      margin-top: 12px;
      display: flex;
      gap: 16px;
      justify-content: center;
      font-size: 14px;
      color: #9ca3af;
      flex-wrap: wrap;
    }

    .error-msg {
      margin-top: 12px;
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px solid rgba(255, 107, 107, .45);
      background: rgba(255, 107, 107, .10);
      color: #ffd2d2;
      font-size: 15px;
    }

    .input-error {
      border-color: rgba(255, 107, 107, .75) !important;
      box-shadow: 0 0 0 3px rgba(255, 107, 107, .15);
    }

    .select-error .custom-select-trigger {
      border-color: rgba(255, 107, 107, .75) !important;
      box-shadow: 0 0 0 3px rgba(255, 107, 107, .15);
    }

    footer {
      padding: 20px;
      border-top: 1px solid var(--border);
      text-align: center;
      font-size: 12px;
      color: #aaa;
    }

    footer a {
      color: #aaa;
      text-decoration: none;
      margin: 0 6px;
    }

    footer a:hover {
      color: #fff;
    }

    input,
    select,
    textarea,
    button {
      transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
    }

    button {
      will-change: transform;
    }

    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    button:focus-visible {
      outline: none;
      border-color: var(--primary-2);
      box-shadow: 0 0 0 3px rgba(59, 92, 255, .15);
    }

    .toast {
      position: fixed;
      left: 50%;
      bottom: 24px;
      transform: translateX(-50%) translateY(16px);
      min-width: 240px;
      max-width: min(92vw, 560px);
      padding: 12px 16px;
      border-radius: 12px;
      border: 1px solid var(--border-2);
      background: rgba(15, 22, 39, .96);
      color: #fff;
      box-shadow: 0 16px 36px rgba(0, 0, 0, .35);
      opacity: 0;
      pointer-events: none;
      transition: opacity .22s ease, transform .22s ease, border-color .22s ease;
      z-index: 9999;
      text-align: center;
      font-size: 14px;
      line-height: 1.35;
    }

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

    .toast.success {
      border-color: rgba(59, 255, 158, .55);
      color: #b7ffcb;
    }

    .toast.error {
      border-color: rgba(255, 107, 107, .65);
      color: #ffd2d2;
    }

    select {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
      background-repeat: no-repeat;
      background-position: right 12px center;
      padding-right: 36px;
    }

    input[type="file"] {
      display: none;
    }

    .number-input {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .number-input input {
      max-width: 40px;
      padding: 6px 8px;
      height: 40px;
      font-size: 16px;
    }

    .number-input button {
      width: 20px;
      height: 20px;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      font-size: 14px;
      transform: translateY(-1px);
    }

    /* Native Pfeile bei number input entfernen */
    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

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

    .number-input input {
      text-align: center;
      font-weight: 600;
      letter-spacing: 0.5px;
    }

    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.55);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      padding: 20px;
    }

    .modal-card {
      width: min(100%, 420px);
      background: var(--card);
      border: 1px solid var(--border-2);
      position: relative;
      border-radius: 16px;
      padding: 22px;
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    }

    .modal-title {
      font-size: 20px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 10px;
      margin-top: 6px
    }

    .modal-text {
      font-size: 15px;
      line-height: 1.6;
      color: var(--muted);
      margin-bottom: 30px;
    }

    .modal-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 18px;
    }

    .modal-actions .tiny-btn,
    .modal-actions .primary {
      margin-top: 0;
    }

    .modal-close {
      position: absolute;
      top: -2px;
      right: 4px;
      border: none;
      background: transparent;
      color: #9ca3af;
      font-size: 24px;
      cursor: pointer;
      padding: 4px;
      line-height: 1;
      opacity: 0.7;
    }

    .modal-actions .primary {
      width: auto;
      min-width: 120px;
      padding: 10px 16px;
      font-size: 15px;
      border-radius: 20px;
    }

    .modal-close:hover {
      color: #fff;
      background: transparent;
      opacity: 1;
    }


    #checkPath {
      transition: stroke-dashoffset 0.4s ease;
    }

    .upload-box.selected .upload-icon {
      transform: scale(1.08);
      transition: transform .2s ease;
    }



    .stepper {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin: 0 0 22px;
    }

    .step {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #2a3a64;
      transition: all 0.25s ease;
    }

    .step.active {
      width: 22px;
      border-radius: 999px;
      background: var(--success);
      box-shadow: 0 0 8px rgba(59, 255, 158, 0.4);
    }

    .step.done {
      background: rgba(59, 255, 158, 0.4);
    }

    .step.done:last-child {
      width: 22px;
      border-radius: 999px;
      background: var(--success);
      box-shadow: 0 0 10px rgba(59, 255, 158, 0.4);
    }

    button.primary.success {
      background: #16a34a;
      color: #fff;
      border: none;
      box-shadow: 0 8px 20px rgba(22, 163, 74, 0.22);
    }

    button.primary.success:hover:not(:disabled) {
      background: #15803d;
      box-shadow: 0 8px 20px rgba(21, 128, 61, 0.28);
    }

    button.primary.success:disabled {
      opacity: 1;
      cursor: default;
      filter: none;
    }

    .upload-box.processing .upload-icon {
      animation: pulse 1.2s infinite ease-in-out;
    }

    @keyframes pulse {
      0% {
        transform: scale(1);
        opacity: 0.75;
      }

      50% {
        transform: scale(1.12);
        opacity: 1;
      }

      100% {
        transform: scale(1);
        opacity: 0.75;
      }
    }

    .upload-box.dragover {
      transform: translateY(-3px) scale(1.02);
    }


    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 220px;
      padding: 28px 18px;
      text-align: center;
    }

    .empty-state-icon {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--border-2);
      background: rgba(59, 92, 255, 0.08);
      color: #dbe5ff;
      box-shadow: inset 0 0 0 1px rgba(59, 92, 255, 0.05);
    }

    .empty-state-title {
      font-size: 16px;
      font-weight: 700;
      color: #fff;
      line-height: 1.35;
    }

    .empty-state-text {
      max-width: 460px;
      font-size: 13px;
      line-height: 1.6;
      color: var(--muted);
    }

    .empty-inline {
      margin-top: 10px;
      padding: 12px 14px;
      border: 1px dashed var(--border-2);
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.02);
      color: var(--muted);
      font-size: 13px;
      line-height: 1.5;
    }

    .empty-inline strong {
      color: #eef3ff;
    }

    .required {
      color: #ff6b6b;
      position: relative;
      top: -2px;
    }

    .toggle {
      position: relative;
      display: inline-block;
      width: 36px;
      height: 20px;
    }

    .slider {
      position: absolute;
      inset: 0;
      cursor: pointer;
      background-color: #2a3a64;
      /* OFF Zustand */
      border: 1px solid var(--border-2);
      border-radius: 999px;
      transition: all 0.25s ease;
    }

    .slider:before {
      content: "";
      position: absolute;
      width: 14px;
      height: 14px;
      left: 3px;
      top: 50%;
      transform: translateY(-50%);
      background: #fff;
      border-radius: 50%;
      transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .toggle input:checked+.slider {
      transform: scale(1.02);
    }

    .toggle input:checked+.slider {
      background-color: var(--primary);
      border-color: var(--primary-2);
      box-shadow: 0 0 8px rgba(59, 92, 255, 0.5);
    }

    .toggle input:checked+.slider:before {
      transform: translateY(-50%) translateX(16px) scale(1.08);
    }

    .toggle input:not(:checked)+.slider:before {
      transform: translateY(-50%) translateX(0) scale(1);
    }

    .toggle:hover .slider {
      box-shadow: 0 0 0 2px rgba(59, 92, 255, 0.15);
    }

    .custom-select {
      position: relative;
      width: 100%;
    }

    .custom-select-trigger {
      width: 100%;
      min-height: 46px;
      padding: 12px 14px;
      border-radius: 10px;
      border: 1px solid var(--border-2);
      background: var(--card-2);
      color: #fff;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      user-select: none;
      transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    }

    .custom-select-trigger:hover {
      border-color: var(--primary-2);
      box-shadow: 0 0 0 2px rgba(59, 92, 255, .08);
    }

    .custom-select.open .custom-select-trigger {
      border-color: var(--primary-2);
      box-shadow: 0 0 0 3px rgba(59, 92, 255, .15);
    }

    .custom-select-label {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .custom-select-arrow {
      flex: 0 0 auto;
      color: #dbe5ff;
      transition: transform .18s ease;
    }

    .custom-select.open .custom-select-arrow {
      transform: rotate(180deg);
    }

    .custom-select-dropdown {
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      right: 0;
      background: var(--card);
      border: 1px solid var(--border-2);
      border-radius: 12px;
      overflow: hidden;
      z-index: 200;
      display: none;
      box-shadow: 0 18px 36px rgba(0, 0, 0, .35);
    }

    .custom-select,
    .custom-option,
    .custom-select-trigger {
      user-select: none;
      -webkit-user-select: none;
    }

    .custom-select.open .custom-select-dropdown {
      display: block;
    }

    .custom-option {
      padding: 11px 14px;
      cursor: pointer;
      color: #fff;
      transition: background .15s ease;
    }

    .custom-option:hover {
      background: rgba(59, 92, 255, .12);
    }

    .custom-option.selected {
      background: rgba(59, 92, 255, .18);
    }

    .custom-option+.custom-option {
      border-top: 1px solid rgba(255, 255, 255, .04);
    }

    @media (max-width: 860px) {
      .manual-builder {
        flex-direction: column;
        align-items: stretch;
      }

      .manual-config,
      .manual-primary-actions,
      .manual-toolbar {
        width: 100%;
      }

      .manual-primary-actions {
        align-items: stretch;
      }

      .manual-create-btn,
      .manual-reset-btn {
        flex: 1 1 220px;
      }

      .toolbar-group-secondary {
        padding-left: 0;
        border-left: none;
      }
    }

    .upload-hint {
      font-size: 12px;
      margin-top: 6px;
      color: rgba(233, 236, 241, 0.55);
      font-style: italic;
    }

    /* === Custom sizing for data block + bottom fields === */
    #sheetRow,
    #blockRow,
    #categoryRow {
      max-width: 340px;
    }

    #sheetRow .custom-select-trigger,
    #blockRow .custom-select-trigger,
    #categoryRow .custom-select-trigger {
      min-height: 37px;
      padding: 8px 12px;
    }

    .removed-note {
      display: inline-flex;
      align-items: center;
      max-width: 100%;
      margin: 8px 0 12px;
      padding: 6px 10px;
      border-left: 3px solid #f59e0b;
      border-radius: 8px;
      background: rgba(245, 158, 11, 0.12);
      color: #fcd34d;
      font-size: 13px;
      line-height: 1.4;
      word-break: break-word;
    }

    .removed-note:hover {
      background: rgba(245, 158, 11, 0.18);
    }

    /* Bottom 4 fields */
    #app .row .custom-select-trigger,
    #app .row input {
      min-height: 37px;
      padding: 8px 12px;
    }

    #app .row {
      justify-content: space-between;
    }

    #app .row>div {
      flex: 0 1 340px;
      max-width: 340px;
    }

    .terms-check {
      margin-top: 14px;
      display: inline-flex; /* 🔥 statt flex */
      align-items: center;
      gap: 10px;
      font-size: 14px;
      color: var(--muted);
      line-height: 1.4;
      opacity: 0.9;

      width: fit-content; /* 🔥 sorgt dafür, dass es nur bis "AGB" geht */
      max-width: 100%;
    }

    .terms-check input {
      margin: 0;
      width: 18px;
      height: 18px;
      flex: 0 0 18px;
      accent-color: var(--primary-2);
      cursor: pointer;
    }

    .terms-check:hover {
      opacity: 1;
    }

    .terms-check a {
      color: #dbe4ff;
      text-decoration: underline;
    }

    /* sorgt dafür, dass Text sauber mittig sitzt */
    .terms-check span {
      display: flex;
      align-items: center;
    }

    .terms-check.input-error {
      border: 1px solid rgba(255, 107, 107, .75);
      border-radius: 10px;
      padding: 8px 10px;
    }

    .footer-social-inner-wrap {
      display: flex;
      justify-content: center;
      gap: 22px;
      margin-top: 18px;
      margin-bottom: 12px;
    }

    .social-icon {
      font-size: 20px;
      transition: transform .2s ease, opacity .2s ease;
    }

    .social-icon:hover {
      transform: scale(1.12);
    }

    .instagram {
      color: #8a3ab9;
    }

    .tiktok {
      color: #ffffff;
    }

    .youtube {
      color: #e96551;
    }

    .mobile-warning {
      display: none;
    }

  @media (max-width: 768px) {
    h1 {
      font-size: 26px;
      line-height: 1.2;
      }

    .mode-switch {
      transform: scale(0.9);
      }

    .mode-btn {
      padding: 6px 10px;
      font-size: 14px;
    }

    .upload-box {
      padding: 18px 14px;
      border-radius: 16px;
    }

    .upload-icon {
      width: 32px;
      height: 32px;
      margin-bottom: 12px;
    }

    #uploadText {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 6px;
    }

    #uploadSub {
      font-size: 12px;
      line-height: 1.4;
    }

    .upload-hint {
      font-size: 11px;
    }

    #uploadSub.helptext {
      font-size: 11px;
      line-height: 1.35;
    }
    .trust {
      font-size: 11px;
      gap: 6px;
      margin-top: 12px;
    }

    .trust span {
      display: block;
    }

    .terms-check {
      font-size: 11px;
      line-height: 1.35;
      margin-top: 10px;
      gap: 6px;
    }

    .terms-check input {
      transform: scale(0.85);
    }

    .terms-check span {
      display: inline;
    }

    @media (max-width: 768px) {
      .mobile-warning {
        display: block;
        font-size: 12px;
        text-align: center;
        margin: 10px 0;
        color: #ffb4b4;
      }
    }

    #manualBox {
      display: block !important;
      padding: 14px 22px 22px 22px !important;
    }

    #manualBox .manual-head {
      margin: 0 0 10px 0 !important;
      padding: 0 !important;
      height: auto !important;
      min-height: 0 !important;
    }

    #manualBox .manual-builder {
      margin: 0 !important;
      padding: 0 !important;
      gap: 14px !important;
      align-items: flex-start !important;
    }

    #manualBox .manual-config {
      display: flex !important;
      flex-direction: row !important;
      align-items: flex-start !important;
      justify-content: flex-start !important;
      gap: 34px !important;
      flex: 0 0 auto !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    #manualBox .manual-field {
      min-width: 0 !important;
      max-width: none !important;
      width: auto !important;
      margin: 0 !important;
    }

    #manualBox .manual-builder {
      display: flex !important;
      flex-direction: column !important;
      gap: 14px !important;
      margin-top: 8px !important;
    }

    #manualBox.hidden {
      display: none !important;
    }

    #uploadBox.hidden {
      display: none !important;
    }

    #addRowBtn,
    #addColBtn,
    #removeRowBtn,
    #removeColBtn {
      font-size: 12px !important;
      padding: 6px 10px !important;
      min-height: 28px !important;
    }

    .manual-toolbar {
      gap: 8px !important;
    }

    .toolbar-group {
      gap: 6px !important;
    }

    #fillExampleBtn,
    #analyzeManualBtn {
      font-size: 12px !important;
      padding: 6px 10px !important;
      height: 30px !important;
      min-height: 30px !important;
      min-width: unset !important;
    }
}