/* ===== KIS Admin Panel — v3 (UX & Responsive) =====
   Class names preserved 1:1 so admin.js works unchanged.
   Goals: large touch targets, clear hierarchy, mobile full-screen modal,
   sticky header + tabs, scrollable tab bar on phones, consistent spacing.
================================================================= */
:root {
  --kis-admin-bg: #0b1220;
  --kis-admin-bg-2: #0e1729;
  --kis-admin-panel: #131e36;
  --kis-admin-panel-2: #1a2746;
  --kis-admin-line: rgba(255,255,255,.09);
  --kis-admin-line-2: rgba(255,255,255,.14);
  --kis-admin-text: #eef2f9;
  --kis-admin-muted: #93a0b8;
  --kis-admin-accent: #4f7cff;
  --kis-admin-accent-2: #6ea0ff;
  --kis-admin-danger: #ff5c6c;
  --kis-admin-ok: #22c55e;
  --kis-radius: 14px;
  --kis-radius-sm: 10px;
  --kis-shadow: 0 30px 80px rgba(0,0,0,.55);
}

/* ============ Floating launcher (FAB) ============ */
.kis-admin-fab{
  position:fixed; right:18px; bottom:18px; z-index:99998;
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#1f2a44,#0f1730);
  color:#fff; border:1px solid rgba(255,255,255,.15);
  cursor:pointer; box-shadow:0 12px 32px rgba(0,0,0,.45);
  opacity:.65; transition:opacity .25s, transform .25s, box-shadow .25s;
}
.kis-admin-fab:hover,.kis-admin-fab:focus-visible{ opacity:1; transform:translateY(-3px); outline:none; box-shadow:0 18px 40px rgba(0,0,0,.55); }
.kis-admin-fab svg{ width:22px; height:22px; }

/* ============ Overlay ============ */
.kis-admin-overlay{
  position:fixed; inset:0; z-index:99999;
  background:rgba(6,10,22,.65); backdrop-filter:blur(8px);
  display:none; align-items:center; justify-content:center;
  padding:16px; opacity:0; transition:opacity .25s;
  font-family:'Plus Jakarta Sans', system-ui, sans-serif;
}
.kis-admin-overlay.open{ display:flex; opacity:1; }
.kis-admin-overlay *{ box-sizing:border-box; }

/* ============ Modal shell ============ */
.kis-admin-modal{
  width:min(960px, 100%); max-height:92vh;
  background:var(--kis-admin-bg); color:var(--kis-admin-text);
  border:1px solid var(--kis-admin-line); border-radius:18px;
  box-shadow:var(--kis-shadow);
  display:flex; flex-direction:column; overflow:hidden;
  transform:translateY(14px) scale(.98); transition:transform .3s ease;
}
.kis-admin-overlay.open .kis-admin-modal{ transform:none; }

/* ============ Sticky Header ============ */
.kis-admin-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:14px 18px;
  border-bottom:1px solid var(--kis-admin-line);
  background:linear-gradient(180deg, rgba(79,124,255,.10), rgba(79,124,255,0));
  position:sticky; top:0; z-index:5;
  flex-wrap:wrap;
}
.kis-admin-head h3{
  margin:0; font-size:17px; font-weight:800; letter-spacing:.2px;
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
}
.kis-admin-head > div{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.kis-admin-close{
  background:transparent; border:1px solid transparent; color:var(--kis-admin-muted);
  width:40px; height:40px; min-width:40px; border-radius:12px; cursor:pointer; font-size:18px;
  display:inline-flex; align-items:center; justify-content:center;
  transition:.2s background, .2s color, .2s border-color;
}
.kis-admin-close:hover,.kis-admin-close:focus-visible{
  background:rgba(255,255,255,.08); color:#fff; border-color:var(--kis-admin-line-2); outline:none;
}

/* Publish status pill */
.kis-pub-status{ font-size:11px; font-weight:700; padding:5px 10px; border-radius:999px; white-space:nowrap; letter-spacing:.3px; }
.kis-pub-status.clean{ background:rgba(34,197,94,.16); color:#22c55e; }
.kis-pub-status.dirty{ background:rgba(255,184,0,.16); color:#ffb800; animation:kisPulse 2s infinite; }
@keyframes kisPulse{ 0%,100%{opacity:1} 50%{opacity:.55} }

.kis-publish-btn{
  background:linear-gradient(135deg,#22c55e,#16a34a) !important;
  padding:11px 18px !important; font-size:13px !important; font-weight:700 !important;
}
.kis-publish-btn:disabled{
  background:#243049 !important; color:#5a6480 !important;
  cursor:not-allowed; box-shadow:none !important; transform:none !important;
}
.kis-publish-btn:not(:disabled):hover{ box-shadow:0 12px 30px rgba(34,197,94,.45) !important; }

/* ============ Body ============ */
.kis-admin-body{
  padding:20px 22px 22px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

/* ============ Login ============ */
.kis-login{ max-width:400px; margin:18px auto 8px; }
.kis-login h2{ font-size:22px; margin:0 0 6px; text-align:center; font-weight:800; }
.kis-login p{ color:var(--kis-admin-muted); text-align:center; margin:0 0 22px; font-size:13.5px; }
.kis-pw-wrap{ position:relative; }
.kis-input{
  width:100%; padding:14px 46px 14px 14px;
  background:var(--kis-admin-panel); color:var(--kis-admin-text);
  border:1px solid var(--kis-admin-line); border-radius:12px;
  font-size:15px; outline:none;
  transition:.2s border-color, .2s box-shadow, .2s background;
  font-family:inherit;
}
.kis-input::placeholder{ color:#6b7693; }
.kis-input:hover{ border-color:var(--kis-admin-line-2); }
.kis-input:focus{ border-color:var(--kis-admin-accent); box-shadow:0 0 0 4px rgba(79,124,255,.22); background:var(--kis-admin-panel-2); }
.kis-eye{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:0; color:var(--kis-admin-muted); cursor:pointer;
  transition:.2s background, .2s color;
}
.kis-eye:hover,.kis-eye:focus-visible{ color:#fff; background:rgba(255,255,255,.07); outline:none; }

/* ============ Buttons ============ */
.kis-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; min-height:44px;
  border-radius:12px; border:1px solid transparent; cursor:pointer;
  font-weight:600; font-size:14px;
  background:var(--kis-admin-accent); color:#fff;
  transition:.2s transform, .2s box-shadow, .2s background, .2s border-color;
  font-family:inherit; line-height:1; white-space:nowrap;
}
.kis-btn:hover{ background:var(--kis-admin-accent-2); transform:translateY(-1px); box-shadow:0 10px 24px rgba(79,124,255,.38); }
.kis-btn:active{ transform:translateY(0); }
.kis-btn:focus-visible{ outline:none; box-shadow:0 0 0 4px rgba(79,124,255,.35); }
.kis-btn.ghost{ background:transparent; border-color:var(--kis-admin-line-2); color:var(--kis-admin-text); }
.kis-btn.ghost:hover{ background:rgba(255,255,255,.06); box-shadow:none; border-color:rgba(255,255,255,.22); }
.kis-btn.danger{ background:var(--kis-admin-danger); }
.kis-btn.danger:hover{ background:#ff7785; box-shadow:0 10px 24px rgba(255,92,108,.38); }
.kis-btn.full{ width:100%; }

.kis-error{ color:var(--kis-admin-danger); font-size:13px; margin-top:10px; text-align:center; min-height:18px; font-weight:600; }

/* ============ Tabs ============ */
.kis-tabs{
  display:flex; gap:4px; padding:8px 10px 0;
  border-bottom:1px solid var(--kis-admin-line);
  background:var(--kis-admin-bg-2);
  position:sticky; top:0; z-index:4;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -ms-overflow-style:none;
  scroll-snap-type:x proximity;
}
.kis-tabs::-webkit-scrollbar{ display:none; }
.kis-tab{
  background:transparent; border:0; color:var(--kis-admin-muted);
  padding:12px 16px; min-height:44px;
  border-radius:10px 10px 0 0; cursor:pointer; font-weight:600; font-size:13.5px;
  border-bottom:2px solid transparent;
  transition:.2s color, .2s background, .2s border-color;
  flex-shrink:0; scroll-snap-align:start;
  font-family:inherit;
}
.kis-tab:hover{ color:#fff; background:rgba(255,255,255,.04); }
.kis-tab:focus-visible{ outline:none; color:#fff; box-shadow:inset 0 0 0 2px rgba(79,124,255,.5); }
.kis-tab.active{ color:#fff; border-bottom-color:var(--kis-admin-accent); background:rgba(79,124,255,.12); }

.kis-section{ display:none; }
.kis-section.active{ display:block; animation:kisFade .25s ease; }
@keyframes kisFade{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }

/* ============ Form rows / fields ============ */
.kis-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.kis-row.one{ grid-template-columns:1fr; }
.kis-field label{
  display:block; font-size:12px; font-weight:600;
  color:var(--kis-admin-muted); margin:0 0 8px;
  text-transform:uppercase; letter-spacing:.5px;
}
.kis-field textarea.kis-input{ min-height:96px; resize:vertical; padding:12px 14px; line-height:1.5; }
.kis-field input[type="file"].kis-input{ padding:10px 12px; cursor:pointer; }
.kis-field input[type="file"].kis-input::-webkit-file-upload-button{
  background:var(--kis-admin-panel-2); color:#fff; border:1px solid var(--kis-admin-line-2);
  padding:8px 12px; border-radius:8px; margin-right:10px; cursor:pointer; font-family:inherit;
}

/* ============ Lists / items ============ */
.kis-list{ display:flex; flex-direction:column; gap:12px; margin-top:8px; }
.kis-item{
  display:flex; gap:14px; padding:14px;
  border:1px solid var(--kis-admin-line);
  border-radius:14px; background:var(--kis-admin-panel);
  align-items:flex-start;
  transition:.2s border-color, .2s background, .2s transform;
}
.kis-item:hover{ border-color:var(--kis-admin-line-2); background:var(--kis-admin-panel-2); }
.kis-item img.kis-thumb,
.kis-item .kis-thumb{
  width:72px; height:72px; object-fit:cover; border-radius:10px;
  flex-shrink:0; background:#0c1426;
}
.kis-item .kis-meta{ flex:1; min-width:0; padding-top:2px; }
.kis-item .kis-meta b{
  display:block; font-size:14px; font-weight:700; color:#fff;
  margin-bottom:4px; word-break:break-word;
}
.kis-item .kis-meta small{ color:var(--kis-admin-muted); font-size:12px; line-height:1.5; }
.kis-item-actions{
  display:flex; flex-direction:column; gap:6px; flex-shrink:0; align-items:stretch;
}
.kis-item-actions .kis-btn{ padding:8px 12px; font-size:12.5px; min-height:36px; }

/* ============ Toolbar ============ */
.kis-toolbar{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:14px; gap:12px; flex-wrap:wrap;
}
.kis-toolbar h4{
  margin:0; font-size:16px; font-weight:700; color:#fff;
  display:flex; align-items:center; gap:8px;
}

/* ============ Toast ============ */
.kis-toast{
  position:fixed; left:50%; bottom:32px;
  transform:translateX(-50%) translateY(20px);
  background:#0f172a; color:#fff;
  padding:13px 22px; border-radius:12px;
  font-size:14px; font-weight:600;
  opacity:0; pointer-events:none;
  transition:.3s opacity, .3s transform;
  z-index:100000;
  box-shadow:0 14px 36px rgba(0,0,0,.4);
  border:1px solid var(--kis-admin-line);
  font-family:'Plus Jakarta Sans', system-ui, sans-serif;
  max-width:calc(100vw - 32px);
}
.kis-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.kis-toast.ok{ background:linear-gradient(135deg,#20ad96,#16a085); border-color:rgba(46,204,113,.5); }
.kis-toast.err{ background:linear-gradient(135deg,#ef4444,#dc2626); border-color:rgba(255,92,108,.5); }

/* ============ Misc ============ */
.kis-tt-preview{
  width:100%; max-height:420px; object-fit:contain; border-radius:12px;
  background:#000; border:1px solid var(--kis-admin-line); display:block;
}
.kis-empty{
  color:var(--kis-admin-muted); font-size:13.5px; text-align:center;
  padding:28px 12px; border:1px dashed var(--kis-admin-line); border-radius:12px;
  background:rgba(255,255,255,.015);
}

/* ============ Public teacher modal (unchanged behavior) ============ */
.kis-tm-overlay{
  position:fixed; inset:0; z-index:99997;
  background:rgba(6,10,22,.55); backdrop-filter:blur(6px);
  display:none; align-items:center; justify-content:center; padding:16px;
  opacity:0; transition:opacity .25s;
}
.kis-tm-overlay.open{ display:flex; opacity:1; }
.kis-tm-modal{
  width:min(520px, 100%); background:#fff; color:#1a1a1a;
  border-radius:22px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.5);
  transform:translateY(14px) scale(.97); transition:transform .3s;
  font-family:'Plus Jakarta Sans', system-ui, sans-serif;
  display:flex; flex-direction:column; max-height:92vh;
}
.kis-tm-overlay.open .kis-tm-modal{ transform:none; }
.kis-tm-cover{
  position:relative; aspect-ratio:4 / 5; width:100%;
  background:linear-gradient(135deg,#0f172a,#1e293b); overflow:hidden;
}
.kis-tm-cover img{ width:100%; height:100%; object-fit:cover; object-position:center 20%; display:block; }
.kis-tm-cover::after{
  content:""; position:absolute; inset:auto 0 0 0; height:45%;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.7));
  pointer-events:none;
}
.kis-tm-x{
  position:absolute; top:14px; right:14px; z-index:2;
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.94); border:0; cursor:pointer; font-size:18px;
  display:flex; align-items:center; justify-content:center; color:#222;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  transition:transform .2s, background .2s;
}
.kis-tm-x:hover{ background:#fff; transform:scale(1.08); }
.kis-tm-body{ padding:22px 24px 26px; overflow:auto; }
.kis-tm-name{ margin:0 0 4px; font-size:22px; font-weight:800; }
.kis-tm-role{ color:#4f7cff; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; margin:0 0 8px; }
.kis-tm-exp{ color:#5a6478; font-size:13px; font-weight:600; margin:0 0 14px; }
.kis-tm-about{ color:#2a2f3a; line-height:1.6; font-size:14px; white-space:pre-wrap; }
.kis-tm-empty{ color:#8a93a6; font-size:13px; font-style:italic; }

/* Teacher cards clickable cue */
.teacher-card{ cursor:pointer; transition:transform .35s ease, box-shadow .35s ease; }

/* Reveal-on-scroll */
.kis-reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.kis-reveal.kis-in{ opacity:1; transform:none; }

/* ============ RESPONSIVE ============ */
@media (max-width: 768px){
  .kis-admin-overlay{ padding:0; }
  .kis-admin-modal{
    width:100%; max-width:100%; height:100vh; max-height:100vh;
    border-radius:0; border-left:0; border-right:0; border-top:0;
  }
  .kis-admin-head{ padding:12px 14px; }
  .kis-admin-head h3{ font-size:15px; gap:8px; width:100%; }
  .kis-admin-head > div{ width:100%; justify-content:flex-end; }
  .kis-publish-btn{ padding:10px 14px !important; font-size:12px !important; }
  .kis-admin-body{ padding:16px 14px 24px; }
  .kis-tabs{ padding:6px 8px 0; gap:2px; }
  .kis-tab{ padding:11px 14px; font-size:13px; }
}

@media (max-width: 560px){
  .kis-row{ grid-template-columns:1fr; gap:12px; }
  .kis-item{
    flex-wrap:wrap; gap:12px; padding:12px;
  }
  .kis-item img.kis-thumb,
  .kis-item .kis-thumb{ width:60px; height:60px; }
  .kis-item .kis-meta{ flex:1 1 calc(100% - 72px); min-width:0; }
  .kis-item-actions{
    flex-direction:row; flex-wrap:wrap; width:100%; gap:8px;
  }
  .kis-item-actions .kis-btn{ flex:1 1 auto; min-width:0; min-height:40px; font-size:13px; }
  .kis-toolbar{ gap:10px; }
  .kis-toolbar h4{ font-size:15px; }
  .kis-toolbar .kis-btn{ width:100%; }
  .kis-tm-cover{ aspect-ratio: 4 / 4.5; }
  .kis-tm-modal{ border-radius:18px; }
  .kis-tm-body{ padding:18px 18px 22px; }
  .kis-tm-name{ font-size:19px; }
  .kis-toast{ left:16px; right:16px; transform:translateY(20px); bottom:20px; max-width:none; }
  .kis-toast.show{ transform:translateY(0); }
  .kis-admin-fab{ right:14px; bottom:14px; width:52px; height:52px; }
}

@media (max-width: 380px){
  .kis-admin-head h3{ font-size:14px; }
  .kis-pub-status{ font-size:10px; padding:4px 8px; }
  .kis-tab{ padding:10px 12px; font-size:12.5px; }
  .kis-btn{ font-size:13.5px; padding:11px 14px; }
}