/* Dhivehi Font Tester - v1.1.1 */
.dft-wrap{width:100%;display:block;box-sizing:border-box;margin:18px 0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
.dft-wrap *{box-sizing:border-box}
.dft-shell{max-width:var(--dft-maxw,980px);margin:0 auto}

/* Top icon bar */
.dft-topbar{display:flex;flex-direction:column;gap:10px}
.dft-iconbar{display:flex;align-items:center;gap:10px;padding:6px 2px;flex-wrap:wrap}
.dft-icbtn{width:40px;height:40px;border-radius:999px;border:1px solid var(--dft-icon-border,#e5e7eb);background:var(--dft-icon-bg,#f8fafc);display:flex;align-items:center;justify-content:center;padding:0!important;margin:0!important;cursor:pointer}
.dft-icbtn svg,.dft-icbtn img{width:18px;height:18px;display:block;opacity:.9}
.dft-icbtn svg{color:var(--dft-icon-color,#111827)}
.dft-icbtn.dft-active{border-color:var(--dft-focus,#38bdf8);background:#fff}
.dft-sep{width:1px;height:22px;background:var(--dft-card-border,#e5e7eb);margin:0 4px}

/* Panel */
.dft-panel{display:none}
.dft-panel.dft-open{display:block}
.dft-panel-inner{border:1px solid var(--dft-card-border,#cbd5e1);border-radius:14px;background:#fff;padding:12px 14px}
.dft-panel-row{display:flex;flex-direction:column;gap:10px}
.dft-panel-head{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--dft-muted,#64748b)}
.dft-panel-val{font-weight:700;color:var(--dft-ui-text,#0f172a);font-variant-numeric:tabular-nums}
.dft-panel input[type=range]{width:100%!important;appearance:none;-webkit-appearance:none;height:6px;border-radius:999px;background:#e5e7eb;margin:0!important;padding:0!important;outline:none}
.dft-panel input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:999px;background:var(--dft-focus,#38bdf8);border:2px solid #fff}
.dft-panel input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:999px;background:var(--dft-focus,#38bdf8);border:2px solid #fff}
.dft-panel input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:#e5e7eb}

/* Editor */
.dft-editor{margin-top:2px}
.dft-textarea{width:100%;resize:vertical;border:1px solid var(--dft-card-border,#cbd5e1);border-radius:var(--dft-input-radius,14px);padding:14px 14px;font-size:38px;line-height:1.25;letter-spacing:0px;outline:none;background:#fff;color:var(--dft-ui-text,#0f172a)}
.dft-textarea:focus{border-color:var(--dft-focus,#38bdf8)}

/* Bottom bar */
.dft-bottom{padding-top:12px}
.dft-bottombar{border:1px solid var(--dft-card-border,#cbd5e1);border-radius:18px;background:#fff;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px}
.dft-download{display:inline-flex;align-items:center;gap:10px;border:none;border-radius:999px;padding:10px 18px;cursor:pointer;background:var(--dft-btn-bg,#00796F);color:var(--dft-btn-text,#fff);font-size:14px;line-height:1}
.dft-dl-ic svg{width:18px;height:18px}
.dft-bar-right{display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:120px}
.dft-name{font-weight:600;font-size:15px;color:var(--dft-ui-text,#0f172a)}
.dft-name-label{display:none !important;}

@media (max-width:720px){
  .dft-bottombar{flex-direction:column;align-items:stretch}
  .dft-bar-right{align-items:flex-start}
}


/* DFT ADV SETTINGS */
.dft-wrap{
  background: var(--dft-bg, #fff);
  border-color: var(--dft-border, #e5e7eb);
  color: var(--dft-secondary, #111827);
}
.dft-wrap[data-use-gradient="1"]{
  background: var(--dft-gradient);
}
.dft-toolbar, .dft-icons, .dft-top{
  gap: var(--dft-icon-gap, 14px);
}
.dft-toolbar{justify-content:center;}
.dft-icon svg{fill: var(--dft-icon-color,#111827);}
.dft-wrap[data-icon-circle="1"] .dft-icon{
  background: var(--dft-icon-bg,#fff);
  border: 1px solid var(--dft-icon-border,#e5e7eb);
  border-radius: 999px;
}
.dft-wrap[data-icon-circle="0"] .dft-icon{
  background: transparent;
  border: none;
}
.dft-textarea::placeholder{font-size: var(--dft-ph-size, 20px);}
.dft-download-btn{
  background: var(--dft-btn-bg,#3f3f46);
  color: var(--dft-btn-text,#fff);
  border-radius: var(--dft-btn-radius, 12px);
  padding: var(--dft-btn-pad-y,12px) var(--dft-btn-pad-x,22px);
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.dft-download-btn:hover{
  background: var(--dft-btn-bg-hover,#111827);
  color: var(--dft-btn-text-hover,#fff);
  transform: translateY(-1px);
}

/* DFT BUTTON DEFAULT UPDATE */
.dft-download{
  background: var(--dft-btn-bg,#00796F);
  color: var(--dft-btn-text,#ffffff);
  border-radius: var(--dft-btn-radius,999px);
  padding: 10px 18px;
}


/* === DFT MODERN UI UPDATE - comment-box style, no feature changes === */
.dft-modern{
  --dft-accent: #00796F;
  --dft-soft-bg: #fbfefe;
  --dft-soft-border: #d8eaf0;
  --dft-soft-text: #0f172a;
  --dft-soft-muted: #64748b;
  margin: 26px 0 !important;
  background: transparent !important;
}
.dft-modern .dft-shell{
  max-width: var(--dft-maxw, 980px);
  margin: 0 auto;
}
.dft-modern .dft-editor-card{
  border: 1px solid var(--dft-card-border, var(--dft-soft-border));
  border-radius: 22px;
  background: var(--dft-card-bg, #fff);
  padding: 20px 22px 22px;
  box-shadow: 0 18px 40px rgba(0, 121, 111, .055);
}
.dft-modern .dft-topbar{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}
.dft-modern .dft-iconbar{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0;
  flex-wrap: wrap;
}
.dft-modern .dft-tool-gap{
  width: 18px;
  height: 1px;
  display: inline-block;
}
.dft-modern .dft-sep{
  display: none !important;
}
.dft-modern .dft-icbtn{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--dft-icon-border, #dceaf0);
  background: var(--dft-icon-bg, #f8fcfd);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--dft-icon-color, #0f172a);
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: 0 5px 16px rgba(15, 23, 42, .035);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}
.dft-modern .dft-icbtn:hover{
  transform: translateY(-1px);
  border-color: rgba(0,121,111,.32);
  box-shadow: 0 9px 20px rgba(0,121,111,.08);
}
.dft-modern .dft-icbtn.dft-active{
  border-color: var(--dft-focus, var(--dft-accent));
  background: #fff;
  box-shadow: 0 0 0 4px rgba(0,121,111,.10);
}
.dft-modern .dft-icbtn svg,
.dft-modern .dft-icbtn img{
  width: 18px;
  height: 18px;
}
.dft-modern .dft-panel{
  max-width: 480px;
  margin: 2px auto 0;
}
.dft-modern .dft-panel-inner{
  border: 1px solid var(--dft-card-border, var(--dft-soft-border));
  border-radius: 16px;
  background: #fff;
  padding: 12px 14px;
  box-shadow: 0 12px 28px rgba(15,23,42,.045);
}
.dft-modern .dft-panel-head{
  font-size: 12px;
  color: var(--dft-soft-muted);
}
.dft-modern .dft-panel-val{
  color: var(--dft-accent);
}
.dft-modern .dft-panel input[type=range]{
  height: 5px;
  background: #e7f3f5;
}
.dft-modern .dft-panel input[type=range]::-webkit-slider-thumb{
  background: var(--dft-accent);
  border: 2px solid #fff;
  box-shadow: 0 3px 8px rgba(0,121,111,.22);
}
.dft-modern .dft-panel input[type=range]::-moz-range-thumb{
  background: var(--dft-accent);
  border: 2px solid #fff;
  box-shadow: 0 3px 8px rgba(0,121,111,.22);
}
.dft-modern .dft-editor{
  margin-top: 0;
}
.dft-modern .dft-textarea{
  width: 100%;
  min-height: 210px;
  resize: vertical;
  border: 1px solid var(--dft-card-border, var(--dft-soft-border));
  border-radius: 18px;
  padding: 24px 26px;
  background: #fbfeff;
  color: var(--dft-ui-text, var(--dft-soft-text));
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.dft-modern .dft-textarea:focus{
  border-color: rgba(0,121,111,.45);
  box-shadow: 0 0 0 4px rgba(0,121,111,.08), inset 0 1px 0 rgba(255,255,255,.7);
}
.dft-modern .dft-textarea::placeholder{
  color: rgba(15,23,42,.42);
  opacity: 1;
}
.dft-modern .dft-bottom{
  padding-top: 16px;
}
.dft-modern .dft-bottombar{
  border: 1px solid var(--dft-card-border, var(--dft-soft-border));
  border-radius: 18px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 18px;
  box-shadow: 0 12px 28px rgba(0,121,111,.045);
}
.dft-modern .dft-bar-right{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.dft-modern .dft-name{
  font-weight: 700;
  font-size: 15px;
  color: var(--dft-ui-text, var(--dft-soft-text));
  line-height: 1.3;
}
.dft-modern .dft-download{
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  gap: 10px;
  border: none;
  border-radius: 999px;
  padding: 12px 22px;
  cursor: pointer;
  background: var(--dft-btn-bg, #00796F);
  color: var(--dft-btn-text, #fff);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 10px 22px rgba(0,121,111,.18);
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.dft-modern .dft-download:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0,121,111,.22);
}
.dft-modern .dft-dl-ic{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dft-modern .dft-dl-ic svg{
  width: 16px;
  height: 16px;
}
@media (max-width:720px){
  .dft-modern .dft-editor-card{padding:16px;}
  .dft-modern .dft-textarea{min-height:170px;padding:18px;}
  .dft-modern .dft-bottombar{
    flex-direction: row;
    align-items:center;
  }
  .dft-modern .dft-download{padding:11px 18px;}
}


/* === DFT MOBILE ICON BAR FIX === */
/* Keep all tester icons on one line on small phones such as iPhone SE */
@media (max-width: 430px){
  .dft-modern .dft-editor-card{
    padding: 14px 12px 16px;
  }
  .dft-modern .dft-iconbar{
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 6px !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 2px 4px;
  }
  .dft-modern .dft-iconbar::-webkit-scrollbar{
    display: none;
  }
  .dft-modern .dft-icbtn{
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    flex: 0 0 34px !important;
  }
  .dft-modern .dft-icbtn svg,
  .dft-modern .dft-icbtn img{
    width: 15px !important;
    height: 15px !important;
  }
  .dft-modern .dft-tool-gap{
    width: 4px !important;
    min-width: 4px !important;
    flex: 0 0 4px !important;
  }
}

/* Extra small screens */
@media (max-width: 360px){
  .dft-modern .dft-iconbar{
    gap: 5px !important;
  }
  .dft-modern .dft-icbtn{
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    flex-basis: 32px !important;
  }
}


/* === DFT ICON SPACING CONSISTENCY FIX === */
/* Make all toolbar icon spaces equal. Removes the bigger center gap. */
.dft-modern .dft-iconbar{
  gap: 12px !important;
}
.dft-modern .dft-tool-gap,
.dft-modern .dft-sep{
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  flex: 0 0 0 !important;
  margin: 0 !important;
}

@media (max-width: 430px){
  .dft-modern .dft-iconbar{
    gap: 7px !important;
  }
  .dft-modern .dft-tool-gap,
  .dft-modern .dft-sep{
    display: none !important;
  }
}

@media (max-width: 360px){
  .dft-modern .dft-iconbar{
    gap: 6px !important;
  }
}