/**
 * NextTech Enterprise — KrutiDev Font Declarations
 *
 * KrutiDev is a legacy Hindi (Devanagari) font family widely used in
 * Indian government documents, legal papers, newspapers and official correspondence.
 *
 * HOW TO INSTALL FONT FILES:
 * ─────────────────────────────────────────────────────────────────────
 * 1. Download KrutiDev font files (.ttf) from a licensed source.
 * 2. Upload all .ttf files to:
 *    /wp-content/themes/nexttech-theme/fonts/krutidev/
 * 3. Required files:
 *    - KrutiDev010.ttf       (Regular — most common, used in govt docs)
 *    - KrutiDev010Bold.ttf   (Bold)
 *    - KrutiDev020.ttf       (Display / Heading variant)
 *    - KrutiDev030.ttf       (Narrow / Condensed)
 *    - KrutiDev040.ttf       (Wide / Extended)
 *    - KrutiDev050.ttf       (Decorative)
 *    - KrutiDev055.ttf       (Script variant)
 *    - KrutiDev070.ttf       (Bold decorative)
 *    - KrutiDev080.ttf       (Extra bold)
 *    - KrutiDev090.ttf       (Outline)
 * ─────────────────────────────────────────────────────────────────────
 */

/* ── KrutiDev 010 — Standard Regular (most used) ── */
@font-face {
  font-family: 'KrutiDev010';
  src: url('../fonts/krutidev/KrutiDev010.ttf')  format('truetype'),
       url('../fonts/krutidev/KrutiDev010.woff2') format('woff2'),
       url('../fonts/krutidev/KrutiDev010.woff')  format('woff');
  font-weight: 400;
  font-style:  normal;
  font-display: swap;
}

/* ── KrutiDev 010 Bold ── */
@font-face {
  font-family: 'KrutiDev010';
  src: url('../fonts/krutidev/KrutiDev010Bold.ttf')  format('truetype'),
       url('../fonts/krutidev/KrutiDev010Bold.woff2') format('woff2'),
       url('../fonts/krutidev/KrutiDev010Bold.woff')  format('woff');
  font-weight: 700;
  font-style:  normal;
  font-display: swap;
}

/* ── KrutiDev 020 — Display heading ── */
@font-face {
  font-family: 'KrutiDev020';
  src: url('../fonts/krutidev/KrutiDev020.ttf')  format('truetype'),
       url('../fonts/krutidev/KrutiDev020.woff2') format('woff2');
  font-weight: 400;
  font-style:  normal;
  font-display: swap;
}

/* ── KrutiDev 030 — Condensed ── */
@font-face {
  font-family: 'KrutiDev030';
  src: url('../fonts/krutidev/KrutiDev030.ttf')  format('truetype'),
       url('../fonts/krutidev/KrutiDev030.woff2') format('woff2');
  font-weight: 400;
  font-style:  normal;
  font-display: swap;
}

/* ── KrutiDev 040 — Wide ── */
@font-face {
  font-family: 'KrutiDev040';
  src: url('../fonts/krutidev/KrutiDev040.ttf') format('truetype');
  font-weight: 400;
  font-style:  normal;
  font-display: swap;
}

/* ── KrutiDev 050 — Decorative ── */
@font-face {
  font-family: 'KrutiDev050';
  src: url('../fonts/krutidev/KrutiDev050.ttf') format('truetype');
  font-weight: 400;
  font-style:  normal;
  font-display: swap;
}

/* ── KrutiDev 055 — Script ── */
@font-face {
  font-family: 'KrutiDev055';
  src: url('../fonts/krutidev/KrutiDev055.ttf') format('truetype');
  font-weight: 400;
  font-style:  normal;
  font-display: swap;
}

/* ── KrutiDev 070 — Bold Decorative ── */
@font-face {
  font-family: 'KrutiDev070';
  src: url('../fonts/krutidev/KrutiDev070.ttf') format('truetype');
  font-weight: 700;
  font-style:  normal;
  font-display: swap;
}

/* ── KrutiDev 080 — Extra Bold ── */
@font-face {
  font-family: 'KrutiDev080';
  src: url('../fonts/krutidev/KrutiDev080.ttf') format('truetype');
  font-weight: 800;
  font-style:  normal;
  font-display: swap;
}

/* ── KrutiDev 090 — Outline ── */
@font-face {
  font-family: 'KrutiDev090';
  src: url('../fonts/krutidev/KrutiDev090.ttf') format('truetype');
  font-weight: 400;
  font-style:  normal;
  font-display: swap;
}

/* ── CSS custom properties for KrutiDev fonts ── */
:root {
  --kd-regular    : 'KrutiDev010', 'Mangal', 'Arial Unicode MS', serif;
  --kd-display    : 'KrutiDev020', 'KrutiDev010', serif;
  --kd-condensed  : 'KrutiDev030', 'KrutiDev010', serif;
  --kd-wide       : 'KrutiDev040', 'KrutiDev010', serif;
  --kd-decorative : 'KrutiDev050', 'KrutiDev010', serif;
  --kd-script     : 'KrutiDev055', 'KrutiDev010', serif;
  --kd-size-body  : 18px;
  --kd-size-head  : 28px;
  --kd-line-height: 1.9;
}

/* ── Utility classes ── */
.kd-regular    { font-family: var(--kd-regular);    }
.kd-display    { font-family: var(--kd-display);    }
.kd-condensed  { font-family: var(--kd-condensed);  }
.kd-decorative { font-family: var(--kd-decorative); }
.kd-script     { font-family: var(--kd-script);     }

/* ─────────────────────────────────────────────────────────
   KRUTIDEV TOOLS PAGE STYLES
   ───────────────────────────────────────────────────────── */

/* Page wrapper */
.kd-page { padding-top: 100px; }

/* Hero */
.kd-hero {
  background: var(--nt-navy);
  border-bottom: 1px solid var(--nt-border);
  padding: 64px 0;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.kd-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 120% at 50% 0%, rgba(255,107,53,0.07), transparent 65%);
}
.kd-hero h1 { font-size: clamp(2rem,4vw,3rem); margin-bottom: 10px; position: relative; }
.kd-hero p  { color: var(--nt-gray-light); max-width: 600px; margin: 0 auto; position: relative; }

/* ── Tab navigation ── */
.kd-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 32px 0 0;
  position: relative;
}
.kd-tab {
  font-family: var(--nt-font-head);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 9px 20px;
  border-radius: 50px;
  border: 1px solid var(--nt-border);
  background: transparent;
  color: var(--nt-gray-light);
  cursor: pointer;
  transition: var(--nt-transition);
}
.kd-tab.active, .kd-tab:hover {
  border-color: var(--nt-orange);
  color: var(--nt-orange);
  background: rgba(255,107,53,0.07);
}

/* ── Tool panels ── */
.kd-tool-panel {
  display: none;
  animation: fadeSlideUp 0.35s ease;
}
.kd-tool-panel.active { display: block; }

/* ── Converter workspace ── */
.kd-workspace {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: start;
  margin-bottom: 24px;
}
@media (max-width: 860px) {
  .kd-workspace { grid-template-columns: 1fr; }
  .kd-swap-btn  { transform: rotate(90deg); margin: 0 auto; }
}

.kd-pane {
  background: var(--nt-navy);
  border: 1px solid var(--nt-border);
  border-radius: var(--nt-radius-lg);
  overflow: hidden;
}
.kd-pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--nt-navy-mid);
  border-bottom: 1px solid var(--nt-border);
  gap: 10px;
  flex-wrap: wrap;
}
.kd-pane-title {
  font-family: var(--nt-font-head);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nt-gray);
}
.kd-pane-actions { display: flex; gap: 8px; }
.kd-icon-btn {
  width: 30px; height: 30px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--nt-border);
  border-radius: 6px;
  color: var(--nt-gray);
  cursor: pointer;
  font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
  transition: var(--nt-transition);
}
.kd-icon-btn:hover { background: rgba(0,212,255,0.08); color: var(--nt-cyan); border-color: rgba(0,212,255,0.3); }

.kd-textarea {
  width: 100%;
  min-height: 240px;
  background: transparent;
  border: none;
  outline: none;
  padding: 20px;
  color: var(--nt-white);
  font-size: var(--kd-size-body);
  line-height: var(--kd-line-height);
  resize: vertical;
  font-family: var(--kd-regular);
}
.kd-textarea::placeholder { color: var(--nt-gray); font-size: 0.9rem; font-family: var(--nt-font-body); }
.kd-output-area {
  min-height: 240px;
  padding: 20px;
  font-size: var(--kd-size-body);
  line-height: var(--kd-line-height);
  color: var(--nt-white);
  word-break: break-word;
  white-space: pre-wrap;
}

/* Swap button */
.kd-swap-btn {
  width: 44px; height: 44px;
  background: var(--nt-navy-mid);
  border: 1px solid var(--nt-border);
  border-radius: 50%;
  color: var(--nt-orange);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  margin-top: 140px;
  flex-shrink: 0;
  transition: var(--nt-transition);
}
.kd-swap-btn:hover { background: rgba(255,107,53,0.1); border-color: var(--nt-orange); transform: rotate(180deg); }

/* ── Toolbar ── */
.kd-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.kd-font-select, .kd-size-select {
  background: var(--nt-navy);
  border: 1px solid var(--nt-border);
  border-radius: var(--nt-radius);
  padding: 8px 14px;
  color: var(--nt-white);
  font-family: var(--nt-font-body);
  font-size: 0.82rem;
  cursor: pointer;
  outline: none;
  transition: var(--nt-transition);
}
.kd-font-select:focus, .kd-size-select:focus { border-color: var(--nt-orange); }
.kd-font-select option { background: var(--nt-dark); }
.kd-word-count {
  font-size: 0.72rem;
  color: var(--nt-gray);
  font-family: var(--nt-font-head);
  letter-spacing: 0.06em;
  margin-left: auto;
}

/* ── Virtual Keyboard ── */
.kd-keyboard-wrap {
  background: var(--nt-navy);
  border: 1px solid var(--nt-border);
  border-radius: var(--nt-radius-lg);
  padding: 20px;
  margin-top: 24px;
  display: none;
}
.kd-keyboard-wrap.visible { display: block; animation: fadeSlideUp 0.3s ease; }
.kd-keyboard-title {
  font-family: var(--nt-font-head);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--nt-gray);
  text-transform: uppercase;
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.kd-keyboard-mode {
  display: flex;
  gap: 6px;
}
.kd-mode-btn {
  font-family: var(--nt-font-head);
  font-size: 0.6rem;
  padding: 4px 12px;
  border-radius: 50px;
  border: 1px solid var(--nt-border);
  background: transparent;
  color: var(--nt-gray);
  cursor: pointer;
  transition: var(--nt-transition);
}
.kd-mode-btn.active { border-color: var(--nt-orange); color: var(--nt-orange); background: rgba(255,107,53,0.08); }

.kd-keyboard-rows { display: flex; flex-direction: column; gap: 6px; }
.kd-keyboard-row  { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.kd-key {
  min-width: 40px;
  height: 44px;
  padding: 0 8px;
  background: var(--nt-navy-mid);
  border: 1px solid var(--nt-border);
  border-bottom: 3px solid rgba(0,0,0,0.4);
  border-radius: 7px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  transition: var(--nt-transition);
  user-select: none;
}
.kd-key:hover  { background: rgba(0,212,255,0.08); border-color: rgba(0,212,255,0.3); transform: translateY(-1px); }
.kd-key:active { transform: translateY(1px); border-bottom-width: 1px; }
.kd-key.kd-key-space { min-width: 180px; }
.kd-key.kd-key-wide  { min-width: 72px; }
.kd-key-hindi {
  font-family: var(--kd-regular);
  font-size: 1rem;
  color: var(--nt-white);
  line-height: 1;
}
.kd-key-label {
  font-size: 0.5rem;
  color: var(--nt-gray);
  font-family: var(--nt-font-head);
  letter-spacing: 0.04em;
  line-height: 1;
}

/* ── Document preview ── */
.kd-doc-preview {
  background: #fff;
  border-radius: var(--nt-radius-lg);
  padding: 60px;
  color: #1a1a1a;
  font-family: var(--kd-regular);
  font-size: 18px;
  line-height: 1.9;
  min-height: 400px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  position: relative;
}
@media (max-width: 640px) { .kd-doc-preview { padding: 32px 24px; } }
.kd-doc-preview-header {
  text-align: center;
  border-bottom: 2px solid #1a1a1a;
  padding-bottom: 16px;
  margin-bottom: 24px;
}
.kd-doc-preview-header h3 {
  font-family: var(--kd-display);
  font-size: 24px;
  color: #1a1a1a;
}
.kd-a4-badge {
  position: absolute;
  top: 12px; right: 16px;
  font-size: 0.65rem;
  font-family: var(--nt-font-head);
  color: #999;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Char map ── */
.kd-charmap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
  margin-top: 20px;
}
.kd-char-item {
  background: var(--nt-navy);
  border: 1px solid var(--nt-border);
  border-radius: var(--nt-radius);
  padding: 10px 8px;
  text-align: center;
  cursor: pointer;
  transition: var(--nt-transition);
}
.kd-char-item:hover { border-color: rgba(255,107,53,0.4); background: rgba(255,107,53,0.05); }
.kd-char-hindi {
  font-family: var(--kd-regular);
  font-size: 1.4rem;
  display: block;
  margin-bottom: 4px;
  color: var(--nt-white);
}
.kd-char-code {
  font-family: var(--nt-font-head);
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  color: var(--nt-gray);
}

/* ── Status bar ── */
.kd-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--nt-navy-mid);
  border-top: 1px solid var(--nt-border);
  font-size: 0.72rem;
  color: var(--nt-gray);
  font-family: var(--nt-font-head);
  letter-spacing: 0.05em;
  gap: 16px;
  flex-wrap: wrap;
}
.kd-status-item { display: flex; align-items: center; gap: 6px; }
.kd-status-dot  { width: 6px; height: 6px; border-radius: 50%; background: #4CAF50; }

/* ── Print styles ── */
@media print {
  .kd-page > *:not(.kd-print-area) { display: none !important; }
  .kd-print-area {
    display: block !important;
    font-family: var(--kd-regular);
    font-size: 16pt;
    line-height: 2;
    color: #000;
    background: #fff;
    padding: 0;
    margin: 0;
  }
}

/* ── Download Bar — appears after conversion ── */
.kd-download-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 20px;
  margin-top: 16px;
  background: rgba(76, 175, 80, 0.08);
  border: 1px solid rgba(76, 175, 80, 0.30);
  border-radius: var(--nt-radius);
  animation: kd-bar-in 0.25s ease;
}
@keyframes kd-bar-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.kd-download-bar__label {
  font-family: var(--nt-font-head);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: #4CAF50;
}
.kd-download-bar__links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.kd-dl-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: var(--nt-radius);
  font-family: var(--nt-font-head);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s, transform 0.15s;
}
.kd-dl-link:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}
.kd-dl-link--primary {
  background: var(--nt-orange);
  color: #fff;
}
.kd-dl-link--secondary {
  background: var(--nt-navy-mid);
  color: var(--nt-gray-light);
  border: 1px solid var(--nt-border);
}

/* ═══════════════════════════════════════════════════════════
   HINGLISH UNICODE TYPING  —  Tab 6 Styles
═══════════════════════════════════════════════════════════ */

/* Quick-reference pill strip */
.hl-ref-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 32px;
}
.hl-ref-pill {
  background: rgba(0, 212, 255, 0.07);
  border: 1px solid rgba(0, 212, 255, 0.18);
  color: var(--nt-cyan);
  font-family: var(--nt-font-head);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: default;
}

/* Main workspace: two columns */
.hl-workspace {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 800px) {
  .hl-workspace { grid-template-columns: 1fr; }
}

/* Panel card */
.hl-input-panel,
.hl-output-panel {
  background: var(--nt-navy);
  border: 1px solid var(--nt-border);
  border-radius: var(--nt-radius);
  overflow: hidden;
}

/* Panel header */
.hl-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid var(--nt-border);
}
.hl-panel-title {
  font-family: var(--nt-font-head);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nt-gray-light);
}
.hl-hint {
  font-size: 0.62rem;
  color: var(--nt-gray);
  white-space: nowrap;
}
.hl-counter {
  font-family: var(--nt-font-head);
  font-size: 0.68rem;
  color: var(--nt-gray);
  letter-spacing: 0.04em;
}

/* Roman input field */
.hl-roman-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 18px 20px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--nt-border);
  color: var(--nt-white);
  font-size: 1.15rem;
  font-family: var(--nt-font-body), sans-serif;
  outline: none;
  caret-color: var(--nt-orange);
  transition: background 0.15s;
}
.hl-roman-input::placeholder { color: var(--nt-gray); }
.hl-roman-input:focus {
  background: rgba(255,107,53,0.04);
}

/* Suggestion bar */
.hl-suggestion-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--nt-border);
  background: rgba(0,0,0,0.12);
  animation: hl-fade-in 0.15s ease;
}
@keyframes hl-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hl-suggestion-label {
  font-size: 0.68rem;
  color: var(--nt-gray);
  font-family: var(--nt-font-head);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.hl-suggestion-label em {
  font-style: normal;
  color: var(--nt-orange);
}
.hl-suggestion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hl-chip {
  padding: 8px 18px;
  border-radius: 24px;
  border: 1.5px solid var(--nt-border);
  background: var(--nt-navy-mid);
  color: var(--nt-white);
  font-family: 'Noto Sans Devanagari', sans-serif;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.14s;
  line-height: 1.4;
}
.hl-chip:hover {
  border-color: var(--nt-orange);
  background: rgba(255,107,53,0.12);
  transform: translateY(-1px);
}
.hl-chip-active {
  border-color: var(--nt-orange) !important;
  background: rgba(255,107,53,0.18) !important;
  color: var(--nt-orange);
  box-shadow: 0 0 0 3px rgba(255,107,53,0.12);
}

/* Keyboard shortcut help row */
.hl-kbd-help {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 12px 18px;
  align-items: center;
}
.hl-kbd-item {
  font-size: 0.65rem;
  color: var(--nt-gray);
  display: flex;
  align-items: center;
  gap: 5px;
}
kbd {
  display: inline-block;
  padding: 2px 7px;
  border: 1px solid var(--nt-border);
  border-radius: 4px;
  background: rgba(255,255,255,0.05);
  font-family: var(--nt-font-head);
  font-size: 0.65rem;
  color: var(--nt-gray-light);
  letter-spacing: 0.03em;
}

/* Unicode output */
.hl-output {
  min-height: 160px;
  padding: 20px;
  font-size: 22px;
  line-height: 1.9;
  color: var(--nt-white);
  cursor: text;
  white-space: pre-wrap;
  word-break: break-word;
  border-bottom: 1px solid var(--nt-border);
}
.hl-output:empty::before {
  content: 'आपकी हिंदी यहाँ दिखेगी…';
  color: var(--nt-gray);
  font-size: 18px;
  font-style: italic;
}

/* Action buttons row */
.hl-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 18px;
}

/* Phonetic reference grid */
.hl-ref-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
}
.hl-ref-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--nt-navy);
  border: 1px solid var(--nt-border);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  transition: border-color 0.14s, background 0.14s;
}
.hl-ref-item:hover {
  border-color: var(--nt-orange);
  background: rgba(255,107,53,0.07);
}
.hl-ref-roman {
  font-family: var(--nt-font-head);
  font-size: 0.75rem;
  color: var(--nt-cyan);
  min-width: 22px;
  letter-spacing: 0.02em;
}
.hl-ref-arrow {
  font-size: 0.6rem;
  color: var(--nt-gray);
}
.hl-ref-deva {
  font-size: 1.1rem;
  color: var(--nt-white);
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════
   AUTO-DETECT BADGE  (v2.0)
═══════════════════════════════════════════════════════════ */
.kd-detect-badge {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 20px;
  font-family: var(--nt-font-head);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  border: 1px solid var(--nt-border);
  color: var(--nt-gray-light);
  background: rgba(255,255,255,0.04);
  transition: all 0.2s;
}
.kd-badge-krutidev {
  border-color: var(--nt-orange);
  color: var(--nt-orange);
  background: rgba(255,107,53,0.1);
}
.kd-badge-unicode {
  border-color: #00d4ff;
  color: #00d4ff;
  background: rgba(0,212,255,0.1);
}
.kd-badge-english {
  border-color: #4caf50;
  color: #4caf50;
  background: rgba(76,175,80,0.1);
}
.kd-badge-mixed {
  border-color: #9c27b0;
  color: #ce93d8;
  background: rgba(156,39,176,0.1);
}