:root{--kmg-bg:#0b0f17;--kmg-card:#0f1724;--kmg-border:rgba(255,255,255,.08);--kmg-text:#e8eefc;--kmg-muted:rgba(232,238,252,.65);--kmg-accent:#ff7a18;--kmg-accent2:#ffb347;--kmg-ok:#34d399;--kmg-err:#fb7185}
.kmg-wrap{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;color:var(--kmg-text)}
.kmg-card{background:linear-gradient(180deg,rgba(255,122,24,.06),transparent 38%),var(--kmg-card);border:1px solid var(--kmg-border);border-radius:18px;box-shadow:0 18px 40px rgba(0,0,0,.35);padding:18px}
.kmg-head{margin-bottom:14px}
.kmg-title{font-weight:800;font-size:22px;line-height:1.1}
.kmg-sub{margin-top:6px;color:var(--kmg-muted);font-size:13px}
.kmg-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:16px}
@media (max-width: 860px){.kmg-grid{grid-template-columns:1fr}}
.kmg-row{margin-bottom:12px}
.kmg-row-compact{margin-top:10px}
.kmg-label{display:block;font-size:13px;font-weight:700;margin-bottom:6px}
.kmg-input,.kmg-textarea,.kmg-select{width:100%;border-radius:14px;border:1px solid var(--kmg-border);background:rgba(255,255,255,.03);color:var(--kmg-text);padding:10px 12px;font-size:14px;outline:none}
.kmg-select{background-color:#000}
.kmg-select option{background:#000;color:#fff}
.kmg-textarea{min-height:110px;resize:vertical}
.kmg-input:focus,.kmg-textarea:focus,.kmg-select:focus{border-color:rgba(255,122,24,.55);box-shadow:0 0 0 3px rgba(255,122,24,.12)}
.kmg-hint{color:var(--kmg-muted);font-size:12px;margin-top:6px}
.kmg-tabs{display:flex;gap:8px;flex-wrap:wrap}
.kmg-tab{border:1px solid var(--kmg-border);background:rgba(255,255,255,.02);color:var(--kmg-text);padding:8px 12px;border-radius:999px;font-weight:800;font-size:13px;cursor:pointer}
.kmg-tab.is-active{border-color:rgba(255,122,24,.6);background:linear-gradient(135deg,rgba(255,122,24,.25),rgba(255,179,71,.10))}
.kmg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 14px;border-radius:14px;border:1px solid rgba(0,0,0,.08);background:linear-gradient(135deg,var(--kmg-accent),var(--kmg-accent2));color:#111;font-weight:900;cursor:pointer;text-decoration:none;user-select:none}
.kmg-btn:hover{filter:saturate(1.1)}
.kmg-btn:disabled{opacity:.6;cursor:not-allowed}
.kmg-btn-secondary{background:rgba(255,255,255,.05);border:1px solid var(--kmg-border);color:var(--kmg-text)}
.kmg-link{background:none;border:none;color:var(--kmg-accent2);font-weight:800;cursor:pointer;padding:0}
.kmg-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kmg-status{font-size:13px;color:var(--kmg-muted)}
.kmg-status.is-ok{color:var(--kmg-ok)}
.kmg-status.is-err{color:var(--kmg-err)}
.kmg-upload-box{display:flex;align-items:center;gap:10px}
.kmg-file{display:none}
.kmg-upload-meta{flex:1;min-width:0}
.kmg-upload-name{font-size:13px;color:var(--kmg-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kmg-upload-progress{height:8px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--kmg-border);margin-top:8px;overflow:hidden}
.kmg-upload-progress span{display:block;height:100%;width:0%;background:linear-gradient(135deg,var(--kmg-accent),var(--kmg-accent2))}
.kmg-result{border:1px solid var(--kmg-border);border-radius:16px;padding:14px;background:rgba(0,0,0,.18)}
.kmg-result-title{font-weight:900;margin-bottom:10px}
.kmg-progress-bar{height:10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--kmg-border);overflow:hidden}
.kmg-progress-bar span{display:block;height:100%;width:0%;background:linear-gradient(135deg,var(--kmg-accent),var(--kmg-accent2))}
.kmg-progress-text{margin-top:8px;color:var(--kmg-muted);font-size:13px}
.kmg-audio{width:100%;margin-top:12px}
.kmg-result-actions{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}
.kmg-image{margin-top:12px}
.kmg-image img{width:100%;border-radius:14px;border:1px solid var(--kmg-border);display:block}
.kmg-meta{margin-top:10px;color:var(--kmg-muted);font-size:12px;white-space:pre-wrap}
.kmg-history{margin-top:12px;border:1px solid var(--kmg-border);border-radius:16px;padding:12px;background:rgba(0,0,0,.14)}
.kmg-history-title{font-weight:900;margin-bottom:10px}
.kmg-history-item{border:1px solid var(--kmg-border);border-radius:14px;padding:10px;margin-bottom:10px;background:rgba(255,255,255,.02)}
.kmg-history-item:last-child{margin-bottom:0}
.kmg-history-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.kmg-history-name{font-weight:900;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:70%}
.kmg-history-status{font-size:12px;color:var(--kmg-muted)}
.kmg-history-actions{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap}
.kmg-history-audio{width:100%;margin-top:10px}

/* =====================
   Custom audio player
   ===================== */
.kmg-player-wrap{margin-top:12px}
.kmg-player{display:flex;align-items:center;gap:14px;padding:12px 12px;border-radius:18px;background:rgba(0,0,0,.22);border:1px solid var(--kmg-border)}
.kmg-player.is-playing .kmg-ico-play{display:none}
.kmg-player.is-playing .kmg-ico-pause{display:inline-flex}
.kmg-ico-pause{display:none}

.kmg-pbtn{width:46px;height:46px;border-radius:16px;border:1px solid rgba(0,0,0,.25);
  background: radial-gradient(circle at 30% 30%, #32ff9a 0%, #1ccf78 42%, #0f8e51 100%);
  color:#06140d;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 14px 26px rgba(16,168,95,.20);user-select:none;text-decoration:none}
.kmg-pbtn:active{transform:translateY(1px)}

.kmg-player-track{flex:1;min-width:120px}
.kmg-eq{flex:0 0 140px;width:140px;height:28px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10)}
.kmg-player-rail{height:6px;border-radius:999px;background:rgba(120,160,255,.18);overflow:hidden}
.kmg-player-fill{height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg, rgba(120,160,255,.95), rgba(120,160,255,.55))}
.kmg-player-time{color:rgba(255,255,255,.8);font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.kmg-player-audio{display:none}

/* compact player for history cards */
.kmg-player.kmg-player--sm{padding:10px 10px;border-radius:16px}
.kmg-player.kmg-player--sm .kmg-pbtn{width:42px;height:42px;border-radius:15px}
.kmg-player.kmg-player--sm .kmg-player-time{font-size:12px}

@media (max-width:480px){
  .kmg-player-time{display:none}
  .kmg-player{gap:12px}
  .kmg-eq{flex:0 0 110px;width:110px}
}

.kmg-presets-grid{margin-top:10px;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.kmg-preset{border:1px solid var(--kmg-border);border-radius:16px;padding:12px;background:rgba(255,255,255,.02);cursor:pointer;transition:transform .08s ease}
.kmg-preset:hover{transform:translateY(-1px)}
.kmg-preset-name{font-weight:900;font-size:13px;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kmg-preset-style{font-size:12px;color:var(--kmg-muted);margin-bottom:8px}
.kmg-preset-btn{width:100%}
.kmg-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;border:1px solid var(--kmg-border);background:rgba(255,255,255,.02);font-size:12px;color:var(--kmg-muted)}
.kmg-pill.is-ok{color:var(--kmg-ok)}
.kmg-pill.is-err{color:var(--kmg-err)}
.kmg-hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.kmg-sliders{display:grid;grid-template-columns:1fr;gap:10px}
.kmg-slider-top{display:flex;justify-content:space-between;color:var(--kmg-muted);font-size:12px;margin-bottom:6px}
.kmg-slider input[type=range]{width:100%}
.kmg-switches{display:flex;gap:12px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--kmg-border);border-radius:14px;background:rgba(255,255,255,.02)}
.kmg-check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--kmg-text);cursor:pointer;user-select:none}
.kmg-check input{width:18px;height:18px}

/* Dropdown colors */
.kmg-select, .kmg-input, .kmg-textarea{background:#000 !important;color:#fff !important;}
.kmg-select option{background:#000 !important;color:#fff !important;}