/* 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:10px;padding:10px 14px;cursor:pointer;background:var(--dft-btn-bg,#0f172a);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);
}