/* ONE accent colour on tool pages: theme purple #7367f0 + light tints (user request). Tool page styles: mirrors templates/convert-to-excel.html (site's own OCR page) */

    :root {
      --ocr-primary:       #7367f0;
      --ocr-primary-light: #f4f3fe;
      --ocr-accent:        #7367f0;
      --ocr-success:       #7367f0;
      --ocr-surface:       #ffffff;
      --ocr-border:        #e5e7eb;
      --ocr-muted:         #6b7280;
      --ocr-text:          #111827;
      --ocr-radius:        14px;
      --ocr-shadow:        0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(115,103,240,.07);
      --ocr-shadow-lg:     0 8px 40px rgba(115,103,240,.13);
      font-family: 'Plus Jakarta Sans', sans-serif;
    }

    body { background: #f5f6fa !important; }

    /* ─── PAGE TITLE ─── */
    .page-title-block { margin-bottom: 1.75rem; }
    .page-title-block h4 {
      font-size: 1.55rem; font-weight: 800;
      color: var(--ocr-text); margin: 0 0 .25rem; letter-spacing: -.4px;
    }
    .page-title-block p { color: var(--ocr-muted); font-size: .93rem; margin: 0; }
    .page-badge {
      display: inline-flex; align-items: center; gap: 6px;
      background: var(--ocr-primary-light); color: var(--ocr-primary);
      font-size: .72rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .06em; padding: 4px 12px; border-radius: 20px; margin-bottom: .6rem;
    }

    /* ─── CARDS ─── */
    .ocr-card {
      background: var(--ocr-surface); border: 1px solid var(--ocr-border);
      border-radius: var(--ocr-radius); box-shadow: var(--ocr-shadow);
      overflow: hidden; transition: box-shadow .25s;
    }
    .ocr-card:hover { box-shadow: var(--ocr-shadow-lg); }
    .ocr-card-header {
      padding: 1.25rem 1.5rem 0;
      display: flex; align-items: center; gap: .65rem;
    }
    .ocr-card-icon {
      width: 40px; height: 40px; border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.15rem; flex-shrink: 0;
    }
    .ocr-card-icon.green { background: var(--ocr-primary-light); color: var(--ocr-primary); }
    .ocr-card-icon.cyan  { background: #f4f3fe; color: #7367f0; }
    .ocr-card-header h5  { font-size: 1rem; font-weight: 700; color: var(--ocr-text); margin: 0; }
    .ocr-card-header span{ font-size: .78rem; color: var(--ocr-muted); }
    .ocr-card-body       { padding: 1.25rem 1.5rem 1.5rem; }

    /* ─── DROPZONE ─── */
    .dropzone-custom {
      border: 2px dashed #cfcbfa; border-radius: 12px;
      background: #f4f3fe; padding: 2.5rem 1.5rem;
      text-align: center; cursor: pointer;
      transition: border-color .2s, background .2s; position: relative;
    }
    .dropzone-custom:hover, .dropzone-custom.dz-drag-hover {
      border-color: var(--ocr-primary); background: #e9e7fd;
    }
    .dropzone-custom .dz-icon {
      width: 60px; height: 60px; background: var(--ocr-primary-light);
      border-radius: 50%; display: flex; align-items: center; justify-content: center;
      margin: 0 auto .85rem; font-size: 1.6rem; color: var(--ocr-primary);
      transition: transform .2s;
    }
    .dropzone-custom:hover .dz-icon { transform: scale(1.1); }
    .dropzone-custom .dz-title   { font-size: 1rem; font-weight: 700; color: var(--ocr-text); margin-bottom: .3rem; }
    .dropzone-custom .dz-subtitle{ font-size: .82rem; color: var(--ocr-muted); }
    .dropzone-custom .dz-formats {
      display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; margin-top: .85rem;
    }
    .fmt-tag {
      background: #fff; border: 1px solid var(--ocr-border); border-radius: 6px;
      font-size: .72rem; font-weight: 600; color: var(--ocr-muted);
      padding: 2px 9px; font-family: 'DM Mono', monospace;
    }

    /* ─── FILE LIST ─── */
    .file-list {
      display: flex; flex-direction: column; gap: .5rem; margin-top: 1rem;
    }
    .file-item {
      display: flex; align-items: center; gap: .75rem;
      padding: .65rem .85rem;
      border: 1.5px solid var(--ocr-border);
      border-radius: 9px; background: #f9fafb;
    }
    .file-item-icon {
      width: 34px; height: 34px; border-radius: 8px;
      background: #e9e7fd; color: #7367f0;
      display: flex; align-items: center; justify-content: center;
      font-size: .85rem; flex-shrink: 0; font-weight: 800;
      font-family: 'DM Mono', monospace;
    }
    .file-item-name { font-size: .82rem; font-weight: 600; color: var(--ocr-text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .file-item-size { font-size: .72rem; color: var(--ocr-muted); font-family: 'DM Mono', monospace; }
    .file-item-remove {
      width: 22px; height: 22px; border-radius: 50%;
      background: #f3f4f6; border: none; color: #9ca3af;
      font-size: .65rem; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: background .15s, color .15s;
    }
    .file-item-remove:hover { background: #e9e7fd; color: #7367f0; }

    /* ─── ACTION ROW ─── */
    .ocr-action-row {
      display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: 1.25rem;
    }
    .btn-ocr-start {
      background: linear-gradient(135deg, var(--ocr-primary) 0%, #685dd8 100%);
      border: none; color: #fff; font-size: .88rem; font-weight: 700;
      padding: .62rem 1.4rem; border-radius: 10px;
      display: flex; align-items: center; gap: .45rem;
      box-shadow: 0 4px 14px rgba(115,103,240,.35);
      transition: opacity .18s, transform .18s, box-shadow .18s;
      cursor: pointer; letter-spacing: .01em;
    }
    .btn-ocr-start:hover { opacity: .92; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(115,103,240,.4); }
    .btn-ocr-start:active { transform: translateY(0); }
    .btn-ocr-start:disabled { opacity: .6; cursor: not-allowed; transform: none; }
    .btn-sample {
      background: #fff; border: 1.5px solid var(--ocr-border);
      color: var(--ocr-text); font-size: .84rem; font-weight: 600;
      padding: .58rem 1.1rem; border-radius: 10px;
      display: flex; align-items: center; gap: .4rem;
      cursor: pointer; transition: border-color .18s, background .18s;
    }
    .btn-sample:hover { border-color: var(--ocr-primary); background: var(--ocr-primary-light); color: var(--ocr-primary); }

    .ocr-timer {
      display: flex; align-items: center; gap: 5px;
      font-size: .8rem; color: var(--ocr-muted); font-family: 'DM Mono', monospace;
    }
    .timer-dot {
      width: 7px; height: 7px; background: var(--ocr-success);
      border-radius: 50%; animation: pulse-dot 1.4s ease-in-out infinite;
    }
    @keyframes pulse-dot {
      0%,100% { opacity:1; transform:scale(1); }
      50%      { opacity:.4; transform:scale(.7); }
    }

    /* ─── PROGRESS STEPS ─── */
    .ocr-steps { display: flex; align-items: flex-start; gap: 0; margin-top: 1.5rem; }
    .ocr-step {
      flex: 1; display: flex; flex-direction: column;
      align-items: center; text-align: center; position: relative;
    }
    .ocr-step:not(:last-child)::after {
      content: ''; position: absolute;
      top: 16px; left: calc(50% + 16px); right: calc(-50% + 16px);
      height: 2px; background: var(--ocr-border);
    }
    .step-circle {
      width: 32px; height: 32px; border-radius: 50%;
      background: var(--ocr-primary-light); color: var(--ocr-primary);
      font-size: .82rem; font-weight: 800;
      display: flex; align-items: center; justify-content: center;
      z-index: 1; border: 2px solid #ada6f6;
    }
    .ocr-step.done .step-circle { background: var(--ocr-primary); color: #fff; border-color: var(--ocr-primary); }
    .step-label { font-size: .72rem; color: var(--ocr-muted); font-weight: 600; margin-top: .4rem; line-height: 1.3; }
    .ocr-step.done .step-label { color: var(--ocr-primary); }

    /* ─── SETTINGS ─── */
    .setting-group   { margin-bottom: 1.5rem; }
    .setting-group:last-of-type { margin-bottom: 0; }
    .setting-label   { font-size: .82rem; font-weight: 700; color: var(--ocr-text); margin-bottom: .3rem; }
    .setting-hint    { font-size: .75rem; color: var(--ocr-muted); margin-bottom: .6rem; }
    .settings-divider{ height: 1px; background: var(--ocr-border); margin: 1.25rem 0; }

    /* ─── OUTPUT FORMAT CHIPS ─── */
    .format-options { display: flex; flex-direction: column; gap: .5rem; }
    .format-opt {
      display: flex; align-items: center; gap: .65rem;
      padding: .65rem .85rem; border: 1.5px solid var(--ocr-border);
      border-radius: 9px; cursor: pointer; transition: all .18s;
    }
    .format-opt:hover    { border-color: var(--ocr-primary); background: var(--ocr-primary-light); }
    .format-opt.selected { border-color: var(--ocr-primary); background: var(--ocr-primary-light); }
    .format-opt input    { display: none; }
    .format-icon {
      width: 34px; height: 34px; border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      font-size: .75rem; font-weight: 800; flex-shrink: 0;
      font-family: 'DM Mono', monospace; color: #fff;
    }
    .format-icon.xlsx { background: linear-gradient(135deg, #7367f0 0%, #685dd8 100%); }
    .format-icon.xls  { background: linear-gradient(135deg, #7367f0 0%, #685dd8 100%); }
    .format-opt-text strong { font-size: .82rem; font-weight: 700; color: var(--ocr-text); display: block; }
    .format-opt-text small  { font-size: .72rem; color: var(--ocr-muted); }

    /* ─── TOGGLE SWITCH ─── */
    .toggle-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: .65rem .85rem;
      border: 1.5px solid var(--ocr-border);
      border-radius: 9px; background: #fff;
      transition: border-color .18s, background .18s;
    }
    .toggle-row:hover { border-color: var(--ocr-primary); background: var(--ocr-primary-light); }
    .toggle-left strong { font-size: .82rem; font-weight: 700; color: var(--ocr-text); display: block; }
    .toggle-left small  { font-size: .72rem; color: var(--ocr-muted); }
    .toggle-switch {
      width: 40px; height: 22px; background: #d1d5db;
      border-radius: 99px; position: relative; cursor: pointer;
      transition: background .2s; flex-shrink: 0;
    }
    .toggle-switch.on { background: var(--ocr-primary); }
    .toggle-switch::after {
      content: ''; position: absolute;
      top: 3px; left: 3px;
      width: 16px; height: 16px;
      background: #fff; border-radius: 50%;
      transition: transform .2s;
      box-shadow: 0 1px 3px rgba(0,0,0,.2);
    }
    .toggle-switch.on::after { transform: translateX(18px); }

    /* ─── INFO STRIP ─── */
    .info-strip { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }
    .info-item {
      flex: 1; min-width: 130px; background: #f9fafb;
      border: 1px solid var(--ocr-border); border-radius: 10px; padding: .75rem 1rem;
    }
    .info-item .info-val  { font-size: 1.05rem; font-weight: 800; color: var(--ocr-text); }
    .info-item .info-desc { font-size: .73rem; color: var(--ocr-muted); margin-top: 1px; }

    /* ─── START BUTTON FULL ─── */
    .btn-ocr-full {
      width: 100%;
      background: linear-gradient(135deg, var(--ocr-primary) 0%, #685dd8 100%);
      border: none; color: #fff; font-size: .9rem; font-weight: 700;
      padding: .75rem 1.5rem; border-radius: 11px;
      display: flex; align-items: center; justify-content: center; gap: .5rem;
      box-shadow: 0 4px 14px rgba(115,103,240,.32); cursor: pointer;
      transition: opacity .18s, transform .18s; letter-spacing: .01em;
    }
    .btn-ocr-full:hover  { opacity: .92; transform: translateY(-1px); }
    .btn-ocr-full:active { transform: translateY(0); }
    .btn-ocr-full:disabled { opacity: .6; cursor: not-allowed; transform: none; }

    /* ─── CREDIT BAR ─── */
    .credit-usage-bar {
      margin-top: 1.25rem; background: #f9fafb;
      border: 1px solid var(--ocr-border); border-radius: 12px; padding: .9rem 1.1rem;
    }
    .cub-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .55rem; }
    .cub-left{ display: flex; align-items: center; gap: .45rem; }
    .cub-coin {
      width: 28px; height: 28px;
      background: linear-gradient(135deg, #8f85f3 0%, #7367f0 100%);
      border-radius: 50%; display: flex; align-items: center; justify-content: center;
      font-size: .8rem; color: #fff; box-shadow: 0 2px 6px rgba(115,103,240,.3);
    }
    .cub-title       { font-size: .82rem; font-weight: 700; color: var(--ocr-text); }
    .cub-title span  { font-size: .72rem; font-weight: 500; color: var(--ocr-muted); margin-left: 4px; }
    .cub-count       { font-family: 'DM Mono', monospace; font-size: .88rem; font-weight: 700; color: var(--ocr-text); }
    .cub-count em    { color: var(--ocr-muted); font-style: normal; font-size: .75rem; }
    .cub-track       { height: 7px; background: #e5e7eb; border-radius: 99px; overflow: hidden; margin-bottom: .5rem; }
    .cub-fill        { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #8f85f3 0%, #7367f0 100%); transition: width .6s cubic-bezier(.4,0,.2,1); }
    .cub-fill.low    { background: linear-gradient(90deg, #7367f0 0%, #7367f0 100%); }
    .cub-footer      { display: flex; align-items: center; justify-content: space-between; }
    .cub-footer small{ font-size: .72rem; color: var(--ocr-muted); }
    .cub-topup       { font-size: .75rem; font-weight: 700; color: var(--ocr-primary); text-decoration: none; display: flex; align-items: center; gap: 3px; transition: opacity .15s; }
    .cub-topup:hover { opacity: .75; }
    .credit-warn {
      display: flex; align-items: flex-start; gap: .6rem;
      background: #f4f3fe; border: 1px solid #cfcbfa;
      border-radius: 10px; padding: .7rem .9rem; margin-top: .75rem;
      font-size: .78rem; color: #374151; line-height: 1.4;
    }
    .credit-warn .cw-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }

    /* ─── FAQ CARD ─── */
    #faq-card {
      background: #ffffff;
      border: 1px solid var(--ocr-border);
      border-radius: var(--ocr-radius);
      box-shadow: var(--ocr-shadow);
      overflow: hidden;
      margin-top: 1.5rem;
      transition: box-shadow .25s;
    }
    #faq-card:hover { box-shadow: var(--ocr-shadow-lg); }

    .faq-section { padding: 1.25rem 1.5rem; }
    .faq-section + .faq-section { border-top: 1px solid var(--ocr-border); }

    .faq-section-header {
      display: flex; align-items: center; gap: 10px; margin-bottom: 0.75rem;
    }
    .faq-icon-box {
      width: 32px; height: 32px; border-radius: 8px;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .faq-icon-box--info    { background: #f4f3fe; }
    .faq-icon-box--success { background: #f4f3fe; }

    .faq-badge {
      font-size: 12px; font-weight: 700; color: var(--ocr-primary);
      text-transform: uppercase; letter-spacing: .04em;
    }

    #faq-q1-title, #faq-q2-title {
      font-size: 15px; font-weight: 700; color: var(--ocr-text); line-height: 1.4; margin: 0;
    }

    .faq-para {
      font-size: 13.5px; color: var(--ocr-muted); line-height: 1.75; margin: 0;
    }
    .faq-para + .faq-para { margin-top: 0.6rem; }

    .faq-code {
      font-family: 'DM Mono', monospace; font-size: 12px; background: #f3f4f6;
      border: 1px solid var(--ocr-border); padding: 1px 6px; border-radius: 5px; color: #374151;
    }

    #faq-steps-list { display: flex; flex-direction: column; gap: 8px; margin-top: 1rem; }

    .faq-step-item {
      display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px;
      background: #f9fafb; border: 1px solid var(--ocr-border); border-radius: 10px;
    }
    .faq-step-num {
      min-width: 24px; height: 24px; border-radius: 50%;
      background: var(--ocr-primary-light); color: var(--ocr-primary);
      font-size: 11px; font-weight: 800;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; font-family: 'DM Mono', monospace;
    }
    .faq-step-text { font-size: 13.5px; color: var(--ocr-text); line-height: 1.5; margin: 0; }
    .faq-optional-tag { font-size: 11px; color: #9ca3af; font-weight: 500; }

    #faq-q1-body { margin-top: 0.75rem; }

    @media (max-width: 767px) {
      .ocr-action-row { flex-direction: column; align-items: stretch; }
      .btn-ocr-start  { justify-content: center; }
    }
  
/* ===== Free-tool additions (same look as the OCR pages) ===== */
.ot-tool-page{--bs-primary:#7367f0;--bs-primary-rgb:115,103,240}
.page-title-block{margin-top:.25rem}
.page-badge a{color:inherit}
.page-title-block h1{font-size:1.55rem;font-weight:800;color:var(--ocr-text);margin:0 0 .25rem;letter-spacing:-.4px}

/* dropzone states from core.js */
.dropzone-custom{outline:none}
.dropzone-custom.ot-over{border-color:var(--ocr-primary);background:#e9e7fd}
.dropzone-custom .dz-icon .ti{font-size:1.6rem;width:1.6rem;height:1.6rem}
.dropzone-custom .ot-folder-btn{margin-top:.85rem}
.dropzone-custom.ot-compact{padding:.85rem 1rem;margin-bottom:.25rem}
.dropzone-custom.ot-compact .dz-icon,.dropzone-custom.ot-compact .dz-formats{display:none}
.dropzone-custom.ot-compact .dz-title{font-size:.9rem;margin:0}
.dropzone-custom.ot-compact .dz-subtitle{font-size:.75rem}
#ot-loading{display:flex;align-items:center;justify-content:center;gap:.6rem;padding:3rem 1rem;color:var(--ocr-muted)}

/* file list (core.js markup -> file-item look) */
.ot-filelist{list-style:none;padding:0;margin:1rem 0 0;display:flex;flex-direction:column;gap:.5rem}
.ot-file{display:flex;align-items:center;gap:.75rem;padding:.65rem .85rem;border:1.5px solid var(--ocr-border);border-radius:9px;background:#f9fafb}
.ot-file .ot-thumbwrap:empty{display:none}
.ot-file .ot-thumb{width:34px;height:34px;border-radius:8px;object-fit:cover;background:#fff;flex-shrink:0;display:block}
.ot-file .ot-thumbwrap:empty+.ot-fname::before{content:"";}
.ot-file .ot-fname{font-size:.82rem;font-weight:600;color:var(--ocr-text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ot-file .ot-fmeta{font-size:.72rem;color:var(--ocr-muted);font-family:'DM Mono',monospace;white-space:nowrap}
.ot-file .ot-handle{cursor:grab;color:var(--ocr-muted)}
.ot-file .ot-remove{width:22px;height:22px;min-width:22px;border-radius:50%;background:#f3f4f6;color:#9ca3af;padding:0}
.ot-file .ot-remove:hover{background:#e9e7fd;color:#7367f0}
.ot-file .ot-remove .ti{font-size:.8rem;width:.8rem;height:.8rem}
.ot-file.sortable-ghost{opacity:.4}
.ot-ficon-sm{width:34px;height:34px;border-radius:8px;background:#e9e7fd;color:#7367f0;display:flex;align-items:center;justify-content:center;font-size:.62rem;font-weight:800;font-family:'DM Mono',monospace;flex-shrink:0}

/* wide options (stage / page grid) inside the upload card */
#ot-options.ot-wide-opts{margin-top:1rem}
#ot-options .ot-opts{display:flex;flex-direction:column;gap:1rem}
.settings-col #ot-options .ot-opts>div{margin:0}
#ot-options.ot-wide-opts .ot-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
#ot-options .form-label,#ot-options .form-check-label{font-size:.82rem;font-weight:700;color:var(--ocr-text)}
#ot-options .form-text{font-size:.75rem;color:var(--ocr-muted)}
#ot-options .form-control,#ot-options .form-select{border-radius:9px;border-width:1.5px;font-size:.85rem}
#ot-options .form-control:focus,#ot-options .form-select:focus{border-color:var(--ocr-primary);box-shadow:0 0 0 3px rgba(115,103,240,.12)}
#ot-options .form-range::-webkit-slider-thumb{background:var(--ocr-primary)}
#ot-options .form-range::-moz-range-thumb{background:var(--ocr-primary)}
#ot-options .form-check-input:checked{background-color:var(--ocr-primary);border-color:var(--ocr-primary)}
.ot-range-val{font-family:'DM Mono',monospace;font-weight:700;color:var(--ocr-primary)}
.ot-opts-empty{font-size:.8rem;color:var(--ocr-muted);background:#f9fafb;border:1px dashed var(--ocr-border);border-radius:9px;padding:.85rem;text-align:center}
#ot-options-slot #ot-options:not(:empty)+.ot-opts-empty,#ot-options-slot.has-wide .ot-opts-empty-default{display:none}
#ot-options-slot .ot-opts-wide-note{display:none}
#ot-options-slot.has-wide .ot-opts-wide-note{display:block}
.ot-page-item.ot-selected{border-color:var(--ocr-primary)}

/* buttons */
.btn-ocr-start .ti,.btn-ocr-full .ti{font-size:.95rem;width:.95rem;height:.95rem}
.btn-sample .ti{font-size:.9rem;width:.9rem;height:.9rem}
.ot-step-active .step-circle{background:var(--ocr-primary);color:#fff;border-color:var(--ocr-primary)}

/* progress */
#ot-progress{margin-top:1.25rem;background:#f9fafb;border:1px solid var(--ocr-border);border-radius:12px;padding:.9rem 1.1rem}
#ot-progress .ot-progress-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:.82rem;font-weight:700;color:var(--ocr-text);margin-bottom:.55rem}
#ot-pct{font-family:'DM Mono',monospace;color:var(--ocr-primary)}
#ot-progress .progress{height:7px;border-radius:99px;background:#e5e7eb}
#ot-progress .progress-bar{background:linear-gradient(90deg,var(--ocr-primary),#685dd8);transition:width .2s}
#ot-progress .ot-progress-note{font-size:.72rem;color:var(--ocr-muted);margin-top:.45rem}

/* results */
.ot-results{margin-top:1.25rem}
.ot-done{text-align:center;padding:1.5rem 1rem;border:1.5px solid #cfcbfa;background:#f4f3fe;border-radius:12px}
.ot-done-icon{display:inline-flex;width:56px;height:56px;border-radius:50%;align-items:center;justify-content:center;background:#e9e7fd;color:var(--ocr-primary)}
.ot-done-icon .ti{font-size:1.9rem;width:1.9rem;height:1.9rem}
.ot-done-preview{display:block;max-width:min(300px,100%);max-height:220px;margin:1rem auto 0;border-radius:9px;border:1px solid var(--ocr-border);background:repeating-conic-gradient(#eee 0 25%,#fff 0 50%) 0 0/16px 16px}
.ot-done-title{font-size:1.15rem;font-weight:800;color:var(--ocr-text);margin:.75rem 0 .25rem}
.ot-done-sub{font-size:.82rem;color:var(--ocr-muted);word-break:break-word;font-family:'DM Mono',monospace}
.ot-done-saving{display:inline-flex;align-items:center;gap:.35rem;margin-top:.6rem;font-size:.8rem;font-weight:600;padding:.25rem .75rem;border-radius:20px;background:#fff;border:1px solid var(--ocr-border);color:var(--ocr-text)}
.ot-done-saving.is-good{color:var(--ocr-primary);border-color:#cfcbfa}
.ot-done-saving .ti{font-size:.85rem;width:.85rem;height:.85rem}
.ot-done-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.75rem;margin-top:1.1rem}
.ot-dl-main{background:linear-gradient(135deg,var(--ocr-primary) 0%,#685dd8 100%)!important;border:none!important;color:#fff!important;font-weight:700;padding:.7rem 1.6rem;border-radius:11px;box-shadow:0 4px 14px rgba(115,103,240,.32);font-size:.95rem}
.ot-dl-main:hover{opacity:.92;transform:translateY(-1px)}
.ot-again{background:#fff!important;border:1.5px solid var(--ocr-border)!important;color:var(--ocr-text)!important;font-weight:600;font-size:.88rem;padding:.62rem 1.2rem;border-radius:10px}
.ot-again:hover{border-color:var(--ocr-primary)!important;color:var(--ocr-primary)!important;background:var(--ocr-primary-light)!important}
.ot-done-actions .ot-back{flex-basis:100%;font-size:.8rem;color:var(--ocr-muted);padding:0}
.ot-done-actions .ot-back:hover{color:var(--ocr-primary)}
.ot-done-msg{margin:1rem 0 0;font-size:.82rem}
.ot-result-list{list-style:none;padding:0;margin:.85rem 0 0;display:flex;flex-direction:column;gap:.5rem}
.ot-result{display:flex;align-items:center;gap:.75rem;padding:.6rem .85rem;border:1.5px solid var(--ocr-border);border-radius:9px;background:#f9fafb}
.ot-result .ot-thumb{width:34px;height:34px;border-radius:8px;object-fit:cover;background:#fff;flex-shrink:0}
.ot-result .ot-ficon{width:34px;height:34px;border-radius:8px;background:var(--ocr-primary-light);color:var(--ocr-primary);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ot-result .ot-fname{flex:1;min-width:0;font-size:.82rem;font-weight:600;color:var(--ocr-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ot-result .ot-fname small{display:block;font-weight:400;font-size:.72rem;color:var(--ocr-muted);font-family:'DM Mono',monospace}
.ot-result .btn{border-radius:8px;border-color:var(--ocr-border);color:var(--ocr-primary)}
.ot-result .btn:hover{background:var(--ocr-primary-light);border-color:var(--ocr-primary);color:var(--ocr-primary)}
.ot-result-list>li:not(.ot-result){list-style:none}
.ot-textout{width:100%;min-height:220px;font-family:'DM Mono',ui-monospace,monospace;font-size:.82rem;border-radius:9px}
.ot-textres .btn-primary{background:var(--ocr-primary);border-color:var(--ocr-primary)}
.ot-next{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;margin-top:1rem;font-size:.8rem}
.ot-next>span{color:var(--ocr-muted);font-weight:600}
.ot-next a{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .75rem;border:1.5px solid var(--ocr-border);border-radius:20px;background:#fff;color:var(--ocr-text);font-weight:600}
.ot-next a:hover{border-color:var(--ocr-primary);color:var(--ocr-primary);background:var(--ocr-primary-light)}
.ot-next .ot-ticon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:5px;background:var(--tc,#7367f0);color:#fff}
.ot-next .ot-ticon .ti{font-size:.7rem;width:.7rem;height:.7rem}

/* faq extras */
.faq-section h3.faq-q{font-size:14px;font-weight:700;color:var(--ocr-text);margin:0 0 .35rem}
.faq-section .faq-qa+.faq-qa{margin-top:1rem}
.ot-note-box{display:flex;gap:.6rem;align-items:flex-start;background:#f4f3fe;border:1px solid #cfcbfa;border-radius:10px;padding:.7rem .9rem;margin-top:1rem;font-size:.78rem;color:#374151;line-height:1.45}

/* related tools card */
.ot-related-card{margin-top:1.5rem}
.ot-related-card .tg-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.ot-related-card .tg-card:hover{border-color:var(--ocr-primary);box-shadow:0 6px 18px -8px rgba(115,103,240,.45)}
@media (max-width:991.98px){.ot-related-card .tg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.settings-col .ocr-card{position:static!important}}
@media (max-width:575.98px){.ot-related-card .tg-grid{grid-template-columns:1fr}.ot-dl-main,.ot-again{width:100%}}
.faq-title{font-size:15px;font-weight:700;color:var(--ocr-text);line-height:1.4;margin:0}
.ot-faq-body{margin-top:.75rem}
.faq-icon-box--info .ti{color:#7367f0;font-size:1rem;width:1rem;height:1rem}
.faq-icon-box--success .ti{color:#7367f0;font-size:1rem;width:1rem;height:1rem}
.container-xxl.ot-page:has(.ot-tool-page){max-width:1440px}
body.ot-has-result .ocr-action-row{display:none}
.ocr-card-icon .ti{font-size:1.1rem;width:1.1rem;height:1.1rem}
.page-badge .ti{font-size:.85rem;width:.85rem;height:.85rem}
.ot-opts-empty .ot-post{display:none}
body.ot-has-files .ot-opts-empty .ot-pre{display:none}
body.ot-has-files .ot-opts-empty .ot-post{display:inline}
.ot-file .ot-thumb{object-fit:contain;border:1px solid var(--ocr-border)}
.ot-result .ot-thumb{object-fit:contain;border:1px solid var(--ocr-border)}
/* grid = convert-to-excel's row (col-lg-8 / col-lg-4), but settings come right after the upload card on phones */
.ot-tp-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem}
.ot-tp-grid #faq-card{margin-top:0}
@media (min-width:992px){
  .ot-tp-grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:start}
  .ot-tp-main{grid-column:1;grid-row:1}
  .settings-col{grid-column:2;grid-row:1 / span 2;align-self:stretch}
  .ot-tp-faq{grid-column:1;grid-row:2}
}
/* tool icon (colour from tools_registry.icon_color, same as home cards) */
.ot-title-row{display:flex;align-items:center;gap:.75rem}
.ot-title-row .ot-title-icon{margin:0;width:42px;height:42px}
.ocr-card-icon.ot-tool-tint{background:var(--tc);color:#fff}
/* shared footer accents, recoloured on tool pages only */
.whatsapp-float{background:#7367f0!important;box-shadow:0 4px 14px rgba(115,103,240,.35)!important}
.content-footer svg[fill="#25D366"]{fill:#7367f0}
.content-footer .footer-link{color:#7367f0}
/* shared navbar accents, recoloured on tool pages only (OCR pages/home unchanged) */
#layout-navbar .badge.bg-warning{background:#e9e7fd!important;color:#7367f0!important}
#layout-navbar .tabler-brand-whatsapp.text-success{color:#7367f0!important}
#layout-navbar .avatar-online::after{background-color:#7367f0!important}