:root {
      --primary: #00c853;
      --primary-dark: #009688;
      --primary-soft: #e8f8ef;
      --blue: #1565c0;
      --danger: #c62828;
      --warning: #ef6c00;
      --background: #f2f5f7;
      --card: #ffffff;
      --text: #17212b;
      --muted: #607080;
      --border: #d5dee5;
      --row-hover: #f3fff7;
      --shadow: 0 7px 24px rgba(0, 0, 0, 0.08);
    }

    body.dark {
      --background: #111827;
      --card: #1f2937;
      --text: #f3f4f6;
      --muted: #aeb8c5;
      --border: #435064;
      --primary-soft: #16392c;
      --row-hover: #243a32;
      --shadow: 0 7px 24px rgba(0, 0, 0, 0.25);
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      min-height: 100vh;
      background: var(--background);
      color: var(--text);
      font-family: Arial, Helvetica, sans-serif;
      transition: background 0.2s, color 0.2s;
    }

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

    .container {
      width: min(1320px, 95%);
      margin: 26px auto 50px;
    }

    .header {
      position: relative;
      padding: 27px 70px;
      border-radius: 15px;
      text-align: center;
      color: #fff;
      background: linear-gradient(
        135deg,
        var(--primary-dark),
        var(--primary)
      );
      box-shadow: var(--shadow);
    }

    .header h1 {
      margin: 0 0 8px;
      font-size: clamp(25px, 4vw, 34px);
    }

    .header p {
      margin: 0;
      opacity: 0.95;
    }

    .theme-button {
      position: absolute;
      top: 17px;
      right: 18px;
      width: 43px;
      height: 43px;
      padding: 0;
      border: 1px solid rgba(255, 255, 255, 0.35);
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.16);
      color: white;
      font-size: 20px;
      cursor: pointer;
    }

    .upload-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      margin-top: 20px;
    }

    .card {
      background: var(--card);
      border: 1px solid transparent;
      border-radius: 14px;
      padding: 20px;
      box-shadow: var(--shadow);
    }

    .card h2,
    .card h3 {
      margin-top: 0;
    }

    .hint {
      margin: -2px 0 13px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.5;
    }

    .file-box {
      padding: 12px;
      border: 1px dashed #a9b7c3;
      border-radius: 9px;
      background: color-mix(in srgb, var(--card) 90%, var(--background));
    }

    .file-box label {
      display: block;
      margin-bottom: 7px;
      font-size: 13px;
      font-weight: 700;
    }

    input[type="file"] {
      width: 100%;
    }

    .file-status {
      margin-top: 10px;
      padding: 9px 11px;
      border-radius: 7px;
      background: var(--background);
      color: var(--muted);
      font-size: 13px;
    }

    .file-status.valid {
      background: #e8f5e9;
      color: #1b5e20;
    }

    .file-status.invalid {
      background: #ffebee;
      color: #b71c1c;
    }

    body.dark .file-status.valid {
      background: #183d2b;
      color: #a7f3c2;
    }

    body.dark .file-status.invalid {
      background: #4a2025;
      color: #ffc4c9;
    }

    .preview-label {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      margin: 13px 0 6px;
      color: var(--muted);
      font-size: 12px;
    }

    textarea {
      width: 100%;
      height: 205px;
      padding: 12px;
      resize: vertical;
      border: 1px solid var(--border);
      border-radius: 9px;
      outline: none;
      background: var(--card);
      color: var(--text);
      font-family: Consolas, monospace;
      font-size: 12px;
      line-height: 1.45;
    }

    textarea:focus,
    input:focus,
    select:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(0, 200, 83, 0.13);
      outline: none;
    }

    .settings {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
      margin-top: 18px;
    }

    .field label {
      display: block;
      margin-bottom: 7px;
      font-size: 13px;
      font-weight: 700;
    }

    .field input,
    .field select {
      width: 100%;
      min-height: 42px;
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--card);
      color: var(--text);
    }

    .actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      margin-top: 19px;
    }

    button {
      border: 0;
      border-radius: 9px;
      padding: 12px 20px;
      font-weight: 700;
      cursor: pointer;
      transition: transform 0.1s, filter 0.1s;
    }

    button:hover {
      filter: brightness(0.96);
    }

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

    button:disabled {
      opacity: 0.55;
      cursor: not-allowed;
    }

    .btn-primary {
      min-width: 210px;
      background: var(--primary);
      color: #fff;
    }

    .btn-blue {
      background: var(--blue);
      color: #fff;
    }

    .btn-neutral {
      background: #e9eef2;
      color: #263238;
    }

    body.dark .btn-neutral {
      background: #354154;
      color: #f3f4f6;
    }

    .btn-danger {
      background: #ffebee;
      color: var(--danger);
    }

    .progress-card {
      display: none;
      margin-top: 18px;
    }

    .progress-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 9px;
      font-size: 13px;
    }

    .progress-track {
      width: 100%;
      height: 13px;
      overflow: hidden;
      border-radius: 999px;
      background: #dfe6eb;
    }

    .progress-bar {
      width: 0;
      height: 100%;
      border-radius: 999px;
      background: linear-gradient(
        90deg,
        var(--primary-dark),
        var(--primary)
      );
      transition: width 0.22s;
    }

    .message {
      display: none;
      margin-top: 18px;
      padding: 13px 15px;
      border-radius: 9px;
      white-space: pre-line;
      line-height: 1.5;
    }

    .message.success {
      display: block;
      background: #e8f5e9;
      color: #1b5e20;
      border: 1px solid #c8e6c9;
    }

    .message.error {
      display: block;
      background: #ffebee;
      color: #b71c1c;
      border: 1px solid #ffcdd2;
    }

    .message.warning {
      display: block;
      background: #fff3e0;
      color: #9a4d00;
      border: 1px solid #ffe0b2;
    }

    body.dark .message.success {
      background: #183d2b;
      color: #b8f7ce;
      border-color: #2d6849;
    }

    body.dark .message.error {
      background: #4a2025;
      color: #ffc5c9;
      border-color: #7c3038;
    }

    body.dark .message.warning {
      background: #4a351c;
      color: #ffd49a;
      border-color: #775629;
    }

    .result-section {
      display: none;
      margin-top: 20px;
    }

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

    .summary-item {
      padding: 16px 11px;
      border-radius: 12px;
      background: var(--card);
      text-align: center;
      box-shadow: var(--shadow);
    }

    .summary-item span {
      display: block;
      margin-bottom: 7px;
      color: var(--muted);
      font-size: 12px;
    }

    .summary-item strong {
      font-size: 18px;
    }

    .failure-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-top: 14px;
    }

    .failure-item {
      padding: 14px;
      border-left: 4px solid var(--warning);
      border-radius: 9px;
      background: var(--card);
      box-shadow: var(--shadow);
    }

    .failure-item span {
      display: block;
      color: var(--muted);
      font-size: 12px;
    }

    .failure-item strong {
      display: block;
      margin-top: 5px;
      font-size: 19px;
    }

    .result-controls {
      display: grid;
      grid-template-columns: minmax(220px, 1fr) auto;
      align-items: end;
      gap: 14px;
      margin-top: 18px;
    }

    .search-box input {
      width: 100%;
      min-height: 43px;
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: 9px;
      background: var(--card);
      color: var(--text);
    }

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

    .table-wrap {
      max-height: 610px;
      overflow: auto;
      margin-top: 13px;
      border-radius: 12px;
      background: var(--card);
      box-shadow: var(--shadow);
    }

    table {
      width: 100%;
      border-collapse: collapse;
    }

    th {
      position: sticky;
      top: 0;
      z-index: 3;
      padding: 12px 13px;
      background: var(--primary);
      color: #fff;
      text-align: left;
      white-space: nowrap;
      cursor: pointer;
      user-select: none;
    }

    th.number,
    td.number {
      text-align: right;
    }

    td {
      padding: 11px 13px;
      border-bottom: 1px solid var(--border);
    }

    tbody tr:hover {
      background: var(--row-hover);
    }

    .status-pass {
      color: #00a445;
      font-weight: 700;
    }

    .empty {
      padding: 35px;
      color: var(--muted);
      text-align: center;
    }

    .table-footer {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      margin-top: 10px;
      color: var(--muted);
      font-size: 13px;
    }

    .log-card {
      display: none;
      margin-top: 18px;
    }

    .log-list {
      max-height: 210px;
      overflow: auto;
      padding: 0;
      margin: 0;
      list-style: none;
    }

    .log-list li {
      padding: 9px 2px;
      border-bottom: 1px solid var(--border);
      color: var(--muted);
      font-size: 13px;
    }

    .log-time {
      display: inline-block;
      min-width: 67px;
      color: var(--text);
      font-weight: 700;
    }

    .history-card {
      position: relative;
      overflow: hidden;
      margin-top: 18px;
    }

    .history-card::before {
      content: '';
      position: absolute;
      inset: 0 auto 0 0;
      width: 4px;
      background: linear-gradient(180deg, var(--primary-dark), var(--primary));
    }

    .history-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 15px;
      padding-left: 4px;
    }

    .history-header h3 {
      margin: 0;
      font-size: 19px;
      letter-spacing: 0.1px;
    }

    .history-table-wrap {
      overflow: auto;
      margin-top: 15px;
      border: 1px solid var(--border);
      border-radius: 11px;
      background: var(--card);
    }

    .history-table-wrap th {
      position: static;
      cursor: default;
    }

    .history-table-wrap tbody tr:first-child {
      background: var(--primary-soft);
    }

    .history-rank {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 30px;
      height: 26px;
      padding: 0 8px;
      border-radius: 999px;
      background: var(--background);
      color: var(--text);
      font-weight: 800;
      font-size: 12px;
    }

    .history-rank.latest {
      background: var(--primary);
      color: #fff;
    }

    .history-latest-label {
      display: inline-block;
      margin-left: 8px;
      padding: 3px 7px;
      border-radius: 999px;
      background: rgba(0, 200, 83, .14);
      color: #00883a;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .35px;
      text-transform: uppercase;
      vertical-align: middle;
    }

    body.dark .history-latest-label {
      color: #9ff3c0;
    }


    .coin-manual-toolbar {
      display: grid;
      grid-template-columns: minmax(300px, 1.5fr) minmax(190px, .7fr);
      gap: 10px;
      margin-bottom: 10px;
    }

    .coin-manual-input-wrap {
      display: flex;
      gap: 8px;
    }

    .coin-manual-input-wrap input,
    .coin-search-input {
      width: 100%;
      min-height: 42px;
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: 9px;
      background: var(--card);
      color: var(--text);
    }

    .coin-add-button {
      flex: 0 0 auto;
      padding: 10px 15px;
      border-radius: 9px;
      background: var(--primary);
      color: #fff;
      white-space: nowrap;
    }

    .coin-option {
      position: relative;
    }

    .coin-option-main {
      display: flex;
      align-items: center;
      gap: 9px;
      min-width: 0;
      flex: 1;
      cursor: pointer;
    }

    .coin-source-badge {
      flex: 0 0 auto;
      padding: 3px 6px;
      border-radius: 999px;
      background: var(--background);
      color: var(--muted);
      font-size: 9px;
      font-weight: 800;
      letter-spacing: .04em;
    }

    .coin-option.manual .coin-source-badge {
      background: #fff3e0;
      color: #9a4d00;
    }

    body.dark .coin-option.manual .coin-source-badge {
      background: #4a351c;
      color: #ffd49a;
    }

    .coin-delete-button {
      flex: 0 0 auto;
      width: 28px;
      height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: 1px solid transparent;
      border-radius: 7px;
      background: transparent;
      color: var(--muted);
      font-size: 16px;
      line-height: 1;
    }

    .coin-delete-button:hover {
      border-color: #ffcdd2;
      background: #ffebee;
      color: var(--danger);
    }

    .coin-option.coin-hidden {
      display: none;
    }

    @media (max-width: 650px) {
      .history-header {
        align-items: stretch;
        flex-direction: column;
      }
    }

    @media print {
      body {
        background: white;
      }

      .header,
      .upload-grid,
      .settings,
      .actions,
      .progress-card,
      .message,
      .failure-grid,
      .result-controls,
      .log-card,
      .table-footer {
        display: none !important;
      }

      .result-section {
        display: block !important;
      }

      .table-wrap {
        max-height: none;
        overflow: visible;
        box-shadow: none;
      }

      th {
        position: static;
      }
    }

    @media (max-width: 1000px) {
      .summary {
        grid-template-columns: repeat(3, 1fr);
      }

      .failure-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 820px) {
      .upload-grid,
      .settings,
      .result-controls {
        grid-template-columns: 1fr;
      }

      .export-actions {
        justify-content: flex-start;
      }
    }

    @media (max-width: 600px) {
      .container {
        width: 96%;
        margin-top: 12px;
      }

      .header {
        padding: 23px 55px 23px 16px;
      }

      .summary,
      .failure-grid {
        grid-template-columns: 1fr 1fr;
      }

      .card {
        padding: 15px;
      }

      textarea {
        height: 175px;
      }
    }

    @media (max-width: 430px) {
      .summary,
      .failure-grid {
        grid-template-columns: 1fr;
      }
    }
  

    /* Professional 10/10 additions */
    .header-kicker {
      margin-bottom: 7px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.18em;
      opacity: 0.85;
    }

    .header-meta {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 8px 18px;
      margin-top: 13px;
      font-size: 11px;
      opacity: 0.82;
    }

    .header-meta span::before {
      content: '✓';
      margin-right: 5px;
      font-weight: 900;
    }

    .visually-hidden {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      white-space: nowrap !important;
      border: 0 !important;
    }

    .drop-zone {
      position: relative;
      display: flex;
      min-height: 150px;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 7px;
      text-align: center;
      cursor: pointer;
      border-width: 1.5px;
      transition: border-color .18s, background .18s, transform .18s;
    }

    .drop-zone:hover,
    .drop-zone:focus,
    .drop-zone.drag-over {
      border-color: var(--primary);
      background: var(--primary-soft);
      transform: translateY(-1px);
      outline: none;
    }

    .drop-zone.file-ready {
      border-style: solid;
      border-color: var(--primary);
      background: var(--primary-soft);
    }

    .drop-zone > span {
      color: var(--muted);
      font-size: 12px;
    }

    .drop-icon {
      display: grid;
      width: 48px;
      height: 48px;
      place-items: center;
      border-radius: 13px;
      background: linear-gradient(135deg, var(--primary-dark), var(--primary));
      color: #fff;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .08em;
      box-shadow: 0 8px 20px rgba(0, 168, 92, .22);
    }

    .drop-zone .file-status {
      width: min(100%, 440px);
      margin-top: 5px;
    }

    .settings-card {
      margin-top: 18px;
    }

    .settings-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .settings-heading h3 {
      margin: 3px 0 0;
    }

    .section-eyebrow {
      color: var(--primary-dark);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .14em;
    }

    .rules-badge {
      padding: 7px 10px;
      border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent);
      border-radius: 999px;
      background: var(--primary-soft);
      color: var(--primary-dark);
      font-size: 11px;
      font-weight: 800;
    }

    .rules-note {
      margin-top: 14px;
      padding: 11px 13px;
      border-radius: 9px;
      background: var(--background);
      color: var(--muted);
      font-size: 12px;
      line-height: 1.55;
    }

    .process-readiness {
      margin: 11px auto 0;
      color: var(--muted);
      font-size: 12px;
      text-align: center;
    }

    .process-readiness.ready {
      color: var(--primary-dark);
      font-weight: 700;
    }

    .result-controls {
      grid-template-columns: minmax(220px, 1fr) minmax(170px, .55fr) auto;
    }

    .result-filter select {
      width: 100%;
      min-height: 43px;
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: 9px;
      background: var(--card);
      color: var(--text);
    }

    .app-footer {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      margin-top: 20px;
      padding: 13px 4px 0;
      border-top: 1px solid var(--border);
      color: var(--muted);
      font-size: 11px;
    }

    .toast-stack {
      position: fixed;
      z-index: 9999;
      right: 18px;
      bottom: 18px;
      display: grid;
      gap: 9px;
      pointer-events: none;
    }

    .toast-item {
      min-width: 260px;
      max-width: min(420px, calc(100vw - 36px));
      padding: 12px 14px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--card);
      color: var(--text);
      box-shadow: var(--shadow);
      font-size: 13px;
      animation: toastIn .2s ease-out;
    }

    .toast-item.success { border-left: 4px solid var(--primary); }
    .toast-item.error { border-left: 4px solid var(--danger); }

    @keyframes toastIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @media (max-width: 920px) {
      .result-controls { grid-template-columns: 1fr; }
      .app-footer { flex-direction: column; text-align: center; }
    }


    .coin-selector-field {
      grid-column: 1 / -1;
    }

    .coin-selector-heading {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 12px;
    }

    .coin-selector-heading label {
      margin-bottom: 4px;
    }

    .coin-selector-heading small {
      display: block;
      color: var(--muted);
      line-height: 1.45;
    }

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

    .coin-action-button {
      padding: 8px 11px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--card);
      color: var(--text);
      font-size: 11px;
      letter-spacing: .03em;
    }

    .coin-options {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
      gap: 9px;
      max-height: 250px;
      overflow: auto;
      padding: 11px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: color-mix(in srgb, var(--card) 92%, var(--background));
    }

    .coin-option {
      display: flex;
      align-items: center;
      gap: 9px;
      min-width: 0;
      padding: 10px 11px;
      border: 1px solid var(--border);
      border-radius: 9px;
      background: var(--card);
      cursor: pointer;
      transition: border-color .15s, background .15s, transform .15s;
    }

    .coin-option:hover {
      border-color: var(--primary);
      transform: translateY(-1px);
    }

    .coin-option.selected {
      border-color: var(--primary);
      background: var(--primary-soft);
    }

    .coin-option input {
      width: 17px;
      height: 17px;
      margin: 0;
      accent-color: var(--primary);
      flex: 0 0 auto;
    }

    .coin-option-name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 13px;
      font-weight: 700;
    }

    .coin-empty-state {
      grid-column: 1 / -1;
      padding: 20px;
      color: var(--muted);
      text-align: center;
      font-size: 13px;
    }

    .coin-selection-summary {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      margin-top: 8px;
      color: var(--muted);
      font-size: 12px;
    }

    .coin-selection-summary strong {
      color: var(--primary-dark);
    }

    body.dark .coin-selection-summary strong {
      color: #8df2b5;
    }


    .coin-manual-toolbar {
      display: grid;
      grid-template-columns: minmax(300px, 1.5fr) minmax(190px, .7fr);
      gap: 10px;
      margin-bottom: 10px;
    }

    .coin-manual-input-wrap {
      display: flex;
      gap: 8px;
    }

    .coin-manual-input-wrap input,
    .coin-search-input {
      width: 100%;
      min-height: 42px;
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: 9px;
      background: var(--card);
      color: var(--text);
    }

    .coin-add-button {
      flex: 0 0 auto;
      padding: 10px 15px;
      border-radius: 9px;
      background: var(--primary);
      color: #fff;
      white-space: nowrap;
    }

    .coin-option {
      position: relative;
    }

    .coin-option-main {
      display: flex;
      align-items: center;
      gap: 9px;
      min-width: 0;
      flex: 1;
      cursor: pointer;
    }

    .coin-source-badge {
      flex: 0 0 auto;
      padding: 3px 6px;
      border-radius: 999px;
      background: var(--background);
      color: var(--muted);
      font-size: 9px;
      font-weight: 800;
      letter-spacing: .04em;
    }

    .coin-option.manual .coin-source-badge {
      background: #fff3e0;
      color: #9a4d00;
    }

    body.dark .coin-option.manual .coin-source-badge {
      background: #4a351c;
      color: #ffd49a;
    }

    .coin-delete-button {
      flex: 0 0 auto;
      width: 28px;
      height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: 1px solid transparent;
      border-radius: 7px;
      background: transparent;
      color: var(--muted);
      font-size: 16px;
      line-height: 1;
    }

    .coin-delete-button:hover {
      border-color: #ffcdd2;
      background: #ffebee;
      color: var(--danger);
    }

    .coin-option.coin-hidden {
      display: none;
    }

    @media (max-width: 650px) {
      .coin-selector-heading {
        flex-direction: column;
      }

      .coin-selector-actions {
        justify-content: flex-start;
      }

      .coin-options {
        grid-template-columns: 1fr;
      }

      .coin-manual-toolbar {
        grid-template-columns: 1fr;
      }

      .coin-manual-input-wrap {
        flex-direction: column;
      }

      .coin-add-button {
        width: 100%;
      }
    }



/* =========================================================
   PENYEMPURNAAN TAMPILAN PILIHAN COIN — V6.1
   Hanya mengubah tampilan. Logika seleksi tidak berubah.
   ========================================================= */

.coin-selector-heading {
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.coin-selector-heading > div:first-child {
  min-width: 0;
}

.coin-selector-heading label {
  display: block;
  margin: 0 0 5px;
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
}

.coin-selector-heading small {
  max-width: 780px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.coin-selector-actions {
  flex: 0 0 auto;
}

.coin-action-button {
  min-height: 36px;
  padding: 8px 14px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 800;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}

.coin-action-button:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary-dark);
}

.coin-manual-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, .75fr);
  align-items: stretch;
  gap: 12px;
  margin-bottom: 13px;
}

.coin-manual-input-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 10px;
  min-width: 0;
}

.coin-manual-input-wrap input,
.coin-search-input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  font-size: 14px;
}

.coin-add-button {
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 5px 14px rgba(0, 200, 83, .16);
}

.coin-add-button:hover {
  filter: brightness(.96);
  box-shadow: 0 7px 18px rgba(0, 200, 83, .22);
}

.coin-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
  gap: 11px;
  max-height: 310px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: color-mix(in srgb, var(--card) 94%, var(--background));
  scrollbar-width: thin;
}

.coin-option {
  position: relative;
  display: flex;
  align-items: stretch;
  min-width: 0;
  min-height: 60px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--card);
  cursor: default;
  transition:
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease,
    transform .16s ease;
}

.coin-option:hover {
  border-color: color-mix(in srgb, var(--primary) 72%, var(--border));
  box-shadow: 0 6px 18px rgba(0, 0, 0, .07);
  transform: translateY(-1px);
}

.coin-option.selected {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: 0 0 0 2px rgba(0, 200, 83, .08);
}

.coin-option-main {
  display: grid;
  grid-template-columns: 19px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 60px;
  padding: 11px 12px;
  cursor: pointer;
}

.coin-option input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  align-self: center;
  accent-color: var(--primary);
  cursor: pointer;
}

.coin-option-name {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coin-source-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 38px;
  min-height: 21px;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--background);
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .05em;
}

.coin-option.selected .coin-source-badge {
  background: color-mix(in srgb, var(--primary) 12%, var(--card));
  color: var(--primary-dark);
}

.coin-option.manual .coin-source-badge {
  background: #fff3e0;
  color: #9a4d00;
}

body.dark .coin-option.manual .coin-source-badge {
  background: #4a351c;
  color: #ffd49a;
}

.coin-delete-button {
  flex: 0 0 auto;
  align-self: center;
  width: 33px;
  height: 33px;
  margin: 0 9px 0 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
}

.coin-delete-button:hover {
  border-color: #ffcdd2;
  background: #ffebee;
  color: var(--danger);
}

.coin-empty-state {
  grid-column: 1 / -1;
  padding: 30px 20px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
}

.coin-selection-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 9px;
  padding: 0 2px;
  color: var(--muted);
  font-size: 12px;
}

.coin-selection-summary strong {
  color: var(--primary-dark);
  font-weight: 850;
}

body.dark .coin-selection-summary strong {
  color: #8df2b5;
}

.coin-option.coin-hidden {
  display: none;
}

@media (max-width: 880px) {
  .coin-manual-toolbar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .coin-selector-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .coin-selector-actions {
    justify-content: flex-start;
  }

  .coin-manual-input-wrap {
    grid-template-columns: 1fr;
  }

  .coin-add-button {
    width: 100%;
  }

  .coin-options {
    grid-template-columns: 1fr;
    max-height: 360px;
  }
}



/* =========================================================
   V6.2 — COIN HORIZONTAL FINAL
   Checkbox, nama Coin, badge, dan tombol hapus sejajar ke samping.
   ========================================================= */

.coin-options {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
}

.coin-option {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center !important;
  min-height: 52px;
  overflow: hidden;
}

.coin-option-main {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start;
  gap: 11px;
  min-width: 0;
  min-height: 52px;
  padding: 10px 12px;
}

.coin-option input[type="checkbox"],
.coin-option .coin-checkbox {
  display: block;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 0 !important;
  padding: 0;
  align-self: center !important;
}

.coin-option-name {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.coin-option-end {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
}

.coin-source-badge {
  margin: 0;
  white-space: nowrap;
}

.coin-delete-button {
  align-self: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  margin: 0 9px 0 0;
}

.coin-delete-button svg {
  display: block;
  pointer-events: none;
}

@media (max-width: 720px) {
  .coin-options {
    grid-template-columns: 1fr;
  }
}


    /* Efek berhasil khusus tombol DOWNLOAD CSV dan COPY USER ID + TO */
    .export-feedback-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-width: 174px;
      overflow: hidden;
      white-space: nowrap;
      transition:
        background-color 0.22s ease,
        color 0.22s ease,
        box-shadow 0.22s ease,
        opacity 0.18s ease;
    }

    .export-feedback-button.is-processing {
      pointer-events: none;
      opacity: 0.82;
    }

    .export-feedback-button.is-success {
      background: #00a94f !important;
      color: #ffffff !important;
      box-shadow: 0 0 0 6px rgba(0, 169, 79, 0);
      animation: exportFeedbackSuccess 0.42s ease;
    }

    .export-feedback-icon {
      display: none;
      width: 17px;
      height: 17px;
      flex: 0 0 auto;
    }

    .export-feedback-button.is-processing .export-feedback-icon {
      display: inline-block;
      border: 2px solid currentColor;
      border-right-color: transparent;
      border-radius: 50%;
      animation: exportFeedbackSpin 0.7s linear infinite;
    }

    .export-feedback-button.is-success .export-feedback-icon {
      display: inline-block;
      position: relative;
    }

    .export-feedback-button.is-success .export-feedback-icon::before {
      content: "";
      position: absolute;
      left: 3px;
      top: 3px;
      width: 9px;
      height: 5px;
      border-left: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: rotate(-45deg);
    }

    @keyframes exportFeedbackSpin {
      to {
        transform: rotate(360deg);
      }
    }

    @keyframes exportFeedbackSuccess {
      0% {
        box-shadow: 0 0 0 0 rgba(0, 169, 79, 0.28);
      }
      70% {
        box-shadow: 0 0 0 7px rgba(0, 169, 79, 0);
      }
      100% {
        box-shadow: 0 0 0 0 rgba(0, 169, 79, 0);
      }
    }


    /* =========================================================
       VERSI 4.0 — STATUS DAN VALIDASI PROFESIONAL
       Tidak mengubah aturan seleksi.
    ========================================================= */

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

    .v4-status-item {
      min-width: 0;
      padding: 13px 15px;
      border: 1px solid var(--border);
      border-radius: 11px;
      background: var(--card);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.045);
    }

    .v4-status-label {
      display: block;
      margin-bottom: 5px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.035em;
      text-transform: uppercase;
    }

    .v4-status-item strong {
      display: block;
      overflow: hidden;
      color: var(--text);
      font-size: 14px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .v4-status-item strong.is-ready {
      color: #009447;
    }

    body.dark .v4-status-item strong.is-ready {
      color: #8df2b5;
    }

    .v4-validation-card {
      margin-top: 15px;
      padding: 17px 19px;
    }

    .v4-validation-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 13px;
    }

    .v4-validation-heading h3 {
      margin: 2px 0 0;
      font-size: 17px;
    }

    .v4-validation-badge {
      flex: 0 0 auto;
      padding: 6px 10px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: var(--background);
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
    }

    .v4-validation-badge.ready {
      border-color: rgba(0, 200, 83, 0.34);
      background: var(--primary-soft);
      color: #008a3a;
    }

    body.dark .v4-validation-badge.ready {
      color: #9ff3c0;
    }

    .v4-validation-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }

    .v4-validation-item {
      min-width: 0;
      padding: 11px 12px;
      border: 1px solid var(--border);
      border-radius: 9px;
      background: color-mix(in srgb, var(--card) 94%, var(--background));
    }

    .v4-validation-item span {
      display: block;
      margin-bottom: 5px;
      color: var(--muted);
      font-size: 11px;
    }

    .v4-validation-item strong {
      font-size: 17px;
    }

    @media (max-width: 900px) {
      .v4-status-grid,
      .v4-validation-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 540px) {
      .v4-status-grid,
      .v4-validation-grid {
        grid-template-columns: 1fr;
      }

      .v4-validation-heading {
        align-items: flex-start;
        flex-direction: column;
      }
    }