/* --- BIẾN MÀU & CẤU HÌNH (Đồng bộ với Word Counter) --- */
    #cpfsb-text-convert-tool {
      --cp-bg: #ffffff;
      --cp-border: #e2e8f0;
      --cp-text: #0f172a;
      --cp-text-muted: #64748b;
      --cp-primary: #0f172a; /* Màu đen chủ đạo */
      --cp-primary-hover: #334155;
      --cp-radius: 12px;
      --cp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

      font-family: var(--cp-font);
      color: var(--cp-text);
     
      max-width: 1200px;
      margin: 0 auto;
    }

    #cpfsb-text-convert-tool * { box-sizing: border-box; }

    /* --- LAYOUT GRID --- */
    #cpfsb-text-convert-tool .cp-grid-cols {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }
    @media (max-width: 992px) {
      #cpfsb-text-convert-tool .cp-grid-cols { grid-template-columns: 1fr; }
    }

    /* --- CARD STYLE --- */
    #cpfsb-text-convert-tool .cp-card {
      background: var(--cp-bg);
      border: 1px solid var(--cp-border);
      border-radius: var(--cp-radius);
      box-shadow: 0 1px 3px rgba(0,0,0,0.02);
      display: flex;
      flex-direction: column;
      height: auto;
      min-height: 750px;
      overflow: hidden;
    }

    #cpfsb-text-convert-tool .cp-card-head {
      padding: 14px 18px;
      border-bottom: 1px solid var(--cp-border);
      background: #fafafa;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
    }
    #cpfsb-text-convert-tool .cp-card-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--cp-text);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    /* --- TEXTAREA --- */
    #cpfsb-text-convert-tool .cp-input-wrap {
      position: relative;
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    #cpfsb-text-convert-tool .cp-textarea {
      width: 100%;
      min-height: 220px;
      padding: 16px;
      border: none;
      outline: none;
      resize: none !important;
      font-size: 16px;
      line-height: 1.6;
      font-family: inherit;
      color: var(--cp-text);
      background: #fff;
      flex: 1;
    }
    #cpfsb-text-convert-tool .cp-textarea:focus { background: #fdfdfd; }
    #cpfsb-text-convert-tool .cp-textarea.output { background: #f8fafc; color: #334155; }

    /* Highlight selection style */
    #cpfsb-text-convert-tool .selection-active { box-shadow: inset 0 0 0 2px #3b82f6; }

    /* --- BUTTONS --- */
    #cpfsb-text-convert-tool .cp-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 8px 14px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      border: 1px solid transparent;
      transition: all 0.2s;
      white-space: nowrap;
      user-select: none;
    }
    #cpfsb-text-convert-tool .cp-btn svg { width: 16px; height: 16px; }

    #cpfsb-text-convert-tool .cp-btn-primary { background: var(--cp-primary); color: #fff; }
    #cpfsb-text-convert-tool .cp-btn-primary:hover { background: var(--cp-primary-hover); transform: translateY(-1px); }

    #cpfsb-text-convert-tool .cp-btn-secondary { background: #fff; border-color: var(--cp-border); color: var(--cp-text); }
    #cpfsb-text-convert-tool .cp-btn-secondary:hover { border-color: var(--cp-primary); color: var(--cp-primary); }

    #cpfsb-text-convert-tool .cp-btn-danger { background: #fff; border-color: #fee2e2; color: #ef4444; }
    #cpfsb-text-convert-tool .cp-btn-danger:hover { background: #fef2f2; border-color: #dc2626; }

    #cpfsb-text-convert-tool .cp-btn-ghost { background: transparent; color: var(--cp-text-muted); padding: 6px; }
    #cpfsb-text-convert-tool .cp-btn-ghost:hover { color: var(--cp-text); background: rgba(0,0,0,0.03); }

    /* --- TOOLBAR BUTTONS GRID --- */
    #cpfsb-text-convert-tool .cp-tools-panel {
      padding: 16px;
      background: #fff;
      border-top: 1px solid var(--cp-border);
    }
    #cpfsb-text-convert-tool .cp-btn-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
      gap: 8px;
      margin-bottom: 12px;
    }
    /* Style riêng cho nút convert để giống style tool kia nhưng gọn hơn */
    #cpfsb-text-convert-tool .btn-convert {
      background: #fff;
      color: #334155;
      border: 1px solid #cbd5e1;
    }
    #cpfsb-text-convert-tool .btn-convert:hover {
      background: #fff;
      border-color: #2563eb;
      color: #2563eb;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

    /* --- ADVANCED SETTINGS --- */
    #cpfsb-text-convert-tool .cp-divider { height: 1px; background: #f1f5f9; margin: 12px 0; }

    #cpfsb-text-convert-tool details {
      border: 1px solid var(--cp-border);
      border-radius: 8px;
      background: #f8fafc;
      overflow: hidden;
    }
    #cpfsb-text-convert-tool summary {
      padding: 10px 14px;
      font-size: 13px;
      font-weight: 700;
      color: var(--cp-text-muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    #cpfsb-text-convert-tool summary:hover { background: #f1f5f9; color: var(--cp-primary); }

    #cpfsb-text-convert-tool .adv-content {
      padding: 14px;
      background: #fff;
      border-top: 1px solid var(--cp-border);
    }
    #cpfsb-text-convert-tool .adv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
    @media (max-width: 640px) { #cpfsb-text-convert-tool .adv-grid { grid-template-columns: 1fr; } }

    #cpfsb-text-convert-tool .cp-checkbox {
      display: flex; align-items: center; gap: 8px;
      font-size: 13px; font-weight: 600; color: #334155; cursor: pointer;
    }
    #cpfsb-text-convert-tool .cp-checkbox input { accent-color: var(--cp-primary); width: 16px; height: 16px; }

    #cpfsb-text-convert-tool .small-ta {
      width: 100%; height: 60px;
      border: 1px solid var(--cp-border); border-radius: 8px;
      padding: 8px; font-size: 13px; resize: vertical; outline: none;
    }
    #cpfsb-text-convert-tool .small-ta:focus { border-color: var(--cp-primary); }

    /* --- FOOTER --- */
    #cpfsb-text-convert-tool .cp-footer {
      padding: 10px 16px;
      background: #f8fafc;
      border-top: 1px solid var(--cp-border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      color: var(--cp-text-muted);
      font-family: monospace;
    }

    /* --- UTILS --- */
    #cpfsb-text-convert-tool .hidden { display: none !important; }
    #cpfsb-text-convert-tool .sel-preview {
      font-size: 12px; font-family: monospace; color: #64748b;
      background: #f8fafc; padding: 8px; border-bottom: 1px solid var(--cp-border);
      white-space: pre-wrap; word-break: break-all;
    }
    #cpfsb-text-convert-tool .sel-preview .hl { background: #fef08a; color: #854d0e; font-weight: 700; padding: 0 2px; }

    /* Toast */
    #cpfsb-text-convert-tool .cp-toast {
      position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
      background: var(--cp-primary); color: #fff;
      padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600;
      opacity: 0; pointer-events: none; transition: opacity 0.3s; z-index: 10;
    }
    #cpfsb-text-convert-tool .cp-toast.show { opacity: 1; }
    #cpfsb-text-convert-tool .cp-toast.error { background: #ef4444; }
    #cpfsb-text-convert-tool .cp-toast{
  max-width: calc(100% - 24px);
  text-align: center;
  white-space: normal;
}