:root{
  --kpem-bg:#0b1220;
  --kpem-card:#101a2c;
  --kpem-card2:#0f192a;
  --kpem-border:rgba(255,255,255,.10);
  --kpem-text:#e9eefb;
  --kpem-muted:rgba(233,238,251,.72);
  --kpem-accent:#5dd6ff;
  --kpem-good:#3ee37a;
  --kpem-warn:#ffcc66;
}

#kpem-open.kpem-fab{
  position:fixed;right:16px;bottom:16px;z-index:999997;
  border:1px solid var(--kpem-border);
  background:rgba(255,255,255,.92);
  color:#0b1220;
  border-radius:999px;
  padding:12px 14px;
  font-weight:800;
  letter-spacing:.4px;
  box-shadow:0 10px 26px rgba(0,0,0,.22);
  cursor:pointer;
  user-select:none;
  -webkit-text-fill-color: currentColor;
}
#kpem-open.kpem-fab:hover{transform:translateY(-1px)}
#kpem-open.kpem-fab:active{transform:translateY(0px) scale(.99)}

#kpem-admin.kpem-admin{position:fixed;inset:0;z-index:999998;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial}
#kpem-admin [hidden]{display:none!important}

.kpem-admin-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter: blur(4px)}

.kpem-admin-modal{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(980px, calc(100vw - 28px));
  height:min(720px, calc(100vh - 28px));
  background:linear-gradient(180deg, rgba(16,26,44,.96), rgba(11,18,32,.96));
  border:1px solid var(--kpem-border);
  border-radius:18px;
  box-shadow:0 25px 70px rgba(0,0,0,.45);
  display:flex;flex-direction:column;
  color:var(--kpem-text);
  -webkit-text-fill-color: var(--kpem-text);
}

.kpem-admin-header{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 10px}
.kpem-admin-title{font-weight:900;font-size:18px;letter-spacing:.3px}
.kpem-admin-close{border-radius:999px}

.kpem-btn{
  border:1px solid var(--kpem-border);
  background:rgba(255,255,255,.06);
  color:var(--kpem-text);
  -webkit-text-fill-color: var(--kpem-text);
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:800;
  user-select:none;
  transition:transform .08s ease, background .15s ease;
}
.kpem-btn:hover{background:rgba(255,255,255,.10)}
.kpem-btn:active{transform:scale(.99)}
.kpem-primary{background:rgba(93,214,255,.14);border-color:rgba(93,214,255,.35)}
.kpem-secondary{background:rgba(255,255,255,.06)}

.kpem-admin-tabs{display:flex;gap:8px;padding:0 14px 10px;overflow:auto;align-items:stretch}
.kpem-tab{
  border:1px solid var(--kpem-border);
  background:rgba(255,255,255,.04);
  color:var(--kpem-text);
  -webkit-text-fill-color: var(--kpem-text);
  padding:8px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  cursor:pointer;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:38px;
  flex:1 1 118px;
}
.kpem-tab[aria-selected="true"]{background:rgba(93,214,255,.18);border-color:rgba(93,214,255,.42)}

.kpem-admin-body{padding:0 14px;overflow:auto;flex:1;display:flex;flex-direction:column}
.kpem-admin-panel{display:flex;flex-direction:column;min-height:100%}
.kpem-card{background:rgba(255,255,255,.04);border:1px solid var(--kpem-border);border-radius:16px;padding:14px;margin:12px 0}
.kpem-card h3{margin:0 0 10px;font-size:14px;letter-spacing:.3px}
.kpem-grid{display:grid;gap:10px}
@media (min-width:780px){.kpem-grid.two{grid-template-columns:1fr 1fr}}

.kpem-field > label{display:block;font-size:13px;color:var(--kpem-muted);-webkit-text-fill-color: var(--kpem-muted);margin-bottom:6px;font-weight:800;line-height:1.35}
.kpem-field input:not([type="checkbox"]),.kpem-field select,.kpem-field textarea{
  width:100%;padding:12px 12px;border-radius:12px;
  border:1px solid rgba(11,18,32,.28);
  background:#fff;
  color:#000 !important;
  -webkit-text-fill-color:#000 !important;
  outline:none;
  min-height:42px;
  box-sizing:border-box;
}
.kpem-field input::placeholder,.kpem-field textarea::placeholder{color:#000 !important;opacity:1}
.kpem-field select option{color:#000;background:#fff}

/* START: checkbox readability + sizing */
.kpem-field > input[type="checkbox"]{
  width:22px;
  height:22px;
  min-width:22px;
  min-height:22px;
  margin-top:4px;
  accent-color:#1fa9ff;
  border-radius:6px;
}

.kpem-field > label + label{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  line-height:1.4;
  font-weight:700;
  color:var(--kpem-text);
  -webkit-text-fill-color:var(--kpem-text);
}

.kpem-field > label + label input[type="checkbox"]{
  width:22px;
  height:22px;
  min-width:22px;
  min-height:22px;
  margin:0;
  padding:0;
  accent-color:#1fa9ff;
  border-radius:6px;
  flex:0 0 auto;
}
/* END: checkbox readability + sizing */

.kpem-list{display:flex;flex-direction:column;gap:10px}
.kpem-item{
  display:flex;gap:12px;align-items:center;
  padding:12px;
  border:1px solid var(--kpem-border);
  border-radius:14px;
  background:rgba(255,255,255,.03);
}
.kpem-item:hover{background:rgba(255,255,255,.06)}
.kpem-item.kpem-selected{outline:2px solid rgba(93,214,255,.45);background:rgba(93,214,255,.08)}
.kpem-thumb{width:44px;height:44px;border-radius:10px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto}
.kpem-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.kpem-meta{flex:1;min-width:0}
.kpem-title{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpem-sub{font-size:13px;line-height:1.45;color:var(--kpem-muted);-webkit-text-fill-color: var(--kpem-muted);margin-top:3px}
.kpem-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.kpem-badge{font-size:11px;font-weight:900;padding:4px 8px;border-radius:999px;border:1px solid var(--kpem-border);background:rgba(255,255,255,.04);color:var(--kpem-text);-webkit-text-fill-color: var(--kpem-text)}
.kpem-badge.good{border-color:rgba(62,227,122,.35);background:rgba(62,227,122,.10)}
.kpem-badge.order{border-color:rgba(93,214,255,.35);background:rgba(93,214,255,.10)}

.kpem-actions{display:flex;gap:8px;flex:0 0 auto}

.kpem-admin-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-top:1px solid var(--kpem-border);flex-wrap:wrap}
/* START: footer layout hardening to prevent status/actions overlap */
.kpem-admin-footer-inline{margin-top:12px;padding:12px 0 0;border-top:1px solid var(--kpem-border);position:static !important;background:transparent;z-index:auto}
.kpem-admin-status{font-size:12px;color:var(--kpem-muted);-webkit-text-fill-color: var(--kpem-muted);flex:1 1 220px;min-width:0;line-height:1.3}
.kpem-admin-actions{display:flex;gap:10px;margin-left:auto;flex:0 0 auto}
.kpem-admin-footer-safe{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px}
.kpem-admin-footer-safe .kpem-admin-actions{margin-left:0;justify-self:end}
.kpem-admin-footer-docked{
  margin:0 !important;
  padding:12px 14px !important;
  border-top:1px solid var(--kpem-border);
}
/* END: footer layout hardening to prevent status/actions overlap */

body.kpem-media-picker-open .media-modal-backdrop{
  z-index:1000000 !important;
}
body.kpem-media-picker-open .media-modal{
  z-index:1000001 !important;
}
body.kpem-media-picker-open .media-frame{
  z-index:1000001 !important;
}

/* START KPEM v2 ADMIN UX */
.kpem-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.kpem-inline-input{
  min-width:160px;
  flex:1 1 180px;
  height:42px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(11,18,32,.28);
  background:#fff;
  color:#000 !important;
  -webkit-text-fill-color:#000 !important;
  font-size:14px;
  box-sizing:border-box;
}
.kpem-inline-input::placeholder{color:#000 !important;opacity:1}

/* START: force readable text in all standard white form controls */
.kpem-admin-modal input[type="text"],
.kpem-admin-modal input[type="search"],
.kpem-admin-modal input[type="number"],
.kpem-admin-modal input[type="url"],
.kpem-admin-modal input[type="email"],
.kpem-admin-modal input[type="password"],
.kpem-admin-modal select,
.kpem-admin-modal textarea{
  color:#000 !important;
  -webkit-text-fill-color:#000 !important;
}
.kpem-admin-modal input[type="text"]::placeholder,
.kpem-admin-modal input[type="search"]::placeholder,
.kpem-admin-modal input[type="number"]::placeholder,
.kpem-admin-modal input[type="url"]::placeholder,
.kpem-admin-modal input[type="email"]::placeholder,
.kpem-admin-modal input[type="password"]::placeholder,
.kpem-admin-modal textarea::placeholder{
  color:#000 !important;
  opacity:1;
}
/* END: force readable text in all standard white form controls */

.kpem-toolbar .kpem-btn{
  height:42px;
  min-height:42px;
  padding:10px 13px;
  font-size:13px;
  letter-spacing:.4px;
  text-transform:uppercase;
  box-sizing:border-box;
}

.kpem-pagination{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
}

.kpem-pagination-page.is-active{
  border-color:rgba(93,214,255,.55);
  background:rgba(93,214,255,.22);
}

.kpem-pagination-ellipsis{
  font-size:13px;
  font-weight:900;
  color:var(--kpem-muted);
  -webkit-text-fill-color: var(--kpem-muted);
  padding:0 2px;
}

.kpem-pagination-meta{
  margin-left:4px;
  font-size:12px;
  color:var(--kpem-muted);
  -webkit-text-fill-color: var(--kpem-muted);
  font-weight:700;
}

.kpem-help{
  font-size:12px;
  font-weight:800;
  color:var(--kpem-warn);
  -webkit-text-fill-color: var(--kpem-warn);
  margin-bottom:10px;
}

.kpem-warning-banner{
  display:flex;
  align-items:center;
  gap:10px;
  margin:8px 0 12px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,204,102,.45);
  background:rgba(255,204,102,.18);
  color:#ffe7b5;
  -webkit-text-fill-color:#ffe7b5;
  font-size:13px;
}

.kpem-warning-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border-radius:50%;
  background:rgba(255,204,102,.28);
  border:1px solid rgba(255,204,102,.55);
  color:#fff4d7;
  font-size:12px;
  font-weight:900;
  -webkit-text-fill-color:#fff4d7;
}

.kpem-thumb-fallback{
  font-size:11px;
  font-weight:900;
  letter-spacing:.6px;
  opacity:.88;
}

.kpem-grade-panel{
  margin-top:8px;
  padding:10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}

.kpem-grade-header{
  display:flex;
  align-items:center;
  gap:10px;
}

.kpem-grade-title-wrap{min-width:0}
.kpem-grade-title{
  font-size:12px;
  font-weight:900;
  letter-spacing:.2px;
}
.kpem-grade-score{
  margin-top:2px;
  font-size:11px;
  color:var(--kpem-muted);
  -webkit-text-fill-color: var(--kpem-muted);
}

.kpem-grade-badge,.kpem-grade-mini{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  border-radius:999px;
  border:1px solid transparent;
  color:#081018;
  -webkit-text-fill-color:#081018;
}
.kpem-grade-badge{
  width:42px;
  height:42px;
  font-size:20px;
}
.kpem-grade-mini{
  min-width:24px;
  height:24px;
  padding:0 8px;
  font-size:12px;
}

.kpem-grade-a{background:#4de07d;border-color:#6cff98}
.kpem-grade-b{background:#ffd659;border-color:#ffe184}
.kpem-grade-c{background:#ff9e45;border-color:#ffb774}
.kpem-grade-d{background:#ff6e62;border-color:#ff8e86}

.kpem-subgrade-list{
  margin-top:8px;
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
}
.kpem-subgrade-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.kpem-subgrade-label{
  font-size:12px;
  color:#f2f5ff;
  -webkit-text-fill-color:#f2f5ff;
}
.kpem-subgrade-right{
  display:flex;
  align-items:center;
  gap:6px;
}
.kpem-subgrade-note{
  font-size:11px;
  color:var(--kpem-muted);
  -webkit-text-fill-color: var(--kpem-muted);
}

.kpem-grade-legend{
  margin-bottom:10px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(93,214,255,.28);
  background:rgba(93,214,255,.08);
  display:grid;
  gap:4px;
  font-size:12px;
  color:#dff7ff;
  -webkit-text-fill-color:#dff7ff;
}

.kpem-upload-hint{
  margin-top:8px;
  font-size:12px;
  color:var(--kpem-muted);
  -webkit-text-fill-color: var(--kpem-muted);
}

.kpem-item.kpem-selected{
  border-color:rgba(93,214,255,.65);
  box-shadow:0 0 0 1px rgba(93,214,255,.35) inset;
  background:rgba(93,214,255,.14);
}
.kpem-item.kpem-focused{
  outline:1px solid rgba(255,255,255,.3);
  outline-offset:0;
}
.kpem-item.kpem-new{
  border-color:rgba(62,227,122,.5);
  box-shadow:0 0 0 1px rgba(62,227,122,.2) inset;
}

.kpem-clip-row{
  align-items:flex-start;
  gap:14px;
}
.kpem-clip-row .kpem-thumb{
  width:96px;
  height:56px;
  border-radius:12px;
  background:rgba(255,255,255,.08);
}
.kpem-clip-row .kpem-meta{
  min-width:0;
}
.kpem-duration{
  font-weight:700;
  color:#e5ebff;
  -webkit-text-fill-color:#e5ebff;
}

.kpem-clip-row .kpem-actions{
  flex-direction:column;
  align-items:flex-end;
  align-self:center;
}

.kpem-sound-upload-row{
  margin-top:8px;
}

.kpem-sound-table{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.kpem-sound-head,.kpem-sound-row{
  display:grid;
  grid-template-columns:minmax(180px,2fr) 100px 100px minmax(240px,2fr);
  gap:10px;
  align-items:center;
}
.kpem-sound-head{
  padding:0 4px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.7px;
  color:var(--kpem-muted);
  -webkit-text-fill-color: var(--kpem-muted);
}
.kpem-sound-row{
  padding:10px 12px;
  border:1px solid var(--kpem-border);
  border-radius:12px;
  background:rgba(255,255,255,.03);
}
.kpem-sound-name{font-weight:800;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpem-sound-duration,.kpem-sound-size{
  font-size:12px;
  color:var(--kpem-muted);
  -webkit-text-fill-color: var(--kpem-muted);
}
.kpem-sound-actions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  flex-wrap:wrap;
}

.kpem-actions-wrap{
  flex-wrap:wrap;
}

@media (max-width:760px){
  .kpem-item{
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .kpem-actions{
    width:100%;
    justify-content:flex-end;
  }
  .kpem-clip-row .kpem-thumb{
    width:88px;
    height:50px;
  }
  .kpem-clip-row .kpem-actions{
    width:auto;
    margin-left:auto;
  }
  .kpem-inline-input{
    min-width:100%;
    flex:1 1 100%;
  }
  .kpem-sound-head{display:none}
  .kpem-sound-row{
    grid-template-columns:1fr;
    gap:8px;
  }
  .kpem-sound-actions{
    justify-content:flex-start;
  }
}
/* END KPEM v2 ADMIN UX */