:root { --bg:#0b0b0c; --panel:#141416; --border:#1f2023; --muter:#9aa0a6; --ring:#9ad0ff; }

body{ background:var(--bg); color:#f2f4f7; }
.card{ background:var(--panel); border:1px solid var(--border); }

.app-nav{
  background:rgba(11,12,16,.96);
  backdrop-filter:saturate(120%) blur(4px);
}

.hero{ background:#000; border-radius:16px; overflow:hidden; border:1px solid #1f2023; position:relative; }
.avatar{ width:84px; height:84px; border-radius:50%; object-fit:cover; background:#1a1b1e; border:1px solid #2a2c31; }
.muted{ color:var(--muter); }
.pill{ display:inline-flex; align-items:center; gap:.4rem; padding:.25rem .6rem; border-radius:999px; border:1px solid #2a2d33; background:#16181d; color:#eaf2ff; font-size:.9rem; text-decoration:none; }
.pill:focus{ outline:2px solid var(--ring); outline-offset:2px; }

video#mfcVideo{ width:100%; height:auto; aspect-ratio:16/9; display:block; background:#000; }
.smallcode{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:.85rem; }

.toolbar{
  display:flex; flex-wrap:wrap; gap:.5rem;
  padding:.65rem .75rem;
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(10,10,12,.55);
  backdrop-filter:saturate(120%) blur(6px);
}
.kbdline{
  padding:.55rem .75rem .75rem;
  color:#b7bdc6;
  font-size:.92rem;
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(10,10,12,.40);
}
.kbdline b{ color:#eaf2ff; font-weight:600; }

.toolbtn{
  border:1px solid #2a2d33;
  background:#12141a;
  color:#eaf2ff;
  border-radius:12px;
  padding:.35rem .6rem;
  font-size:.92rem;
  text-decoration:none;
  cursor:pointer;
}
.toolbtn:hover{ background:#171a22; }
.toolbtn:disabled{ opacity:.45; cursor:not-allowed; }

/* Record card (sidebar) */
.rec-card{
  border:1px solid #2a2d33;
  background:rgba(255,255,255,.03);
  border-radius:14px;
  padding:12px;
  text-align:center;
}
.rec-card.sticky{
  position: sticky;
  top: 84px;
}
.rec-btn{
  width:100%;
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  padding:.65rem .95rem;
  border-radius:12px;
  border:1px solid #3b1c1c;
  background:#1a0f10;
  color:#ffd7d7;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
}
.rec-btn:hover{ background:#221315; }
.rec-sub{ color:#b7bdc6; font-size:.92rem; margin-top:8px; }

.side-card{
  border:1px solid #2a2d33;
  background:rgba(255,255,255,.03);
  border-radius:14px;
  padding:12px;
}

/* Modal (vanilla) */
.m-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; z-index:9999; }
.m-card{ width:min(520px, 92vw); background:#111218; border:1px solid #2a2d33; border-radius:16px; box-shadow:0 18px 60px rgba(0,0,0,.55); }
.m-head{ padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:space-between; }
.m-body{ padding:16px; }
.m-foot{ padding:14px 16px; border-top:1px solid rgba(255,255,255,.08); display:flex; gap:10px; justify-content:flex-end; }
.m-x{ background:transparent; border:0; color:#cbd5e1; font-size:22px; line-height:1; cursor:pointer; }
.m-label{ color:#cbd5e1; font-size:.95rem; margin-bottom:6px; }
.m-input{ width:100%; padding:10px 12px; border-radius:12px; border:1px solid #2a2d33; background:#0f1117; color:#eaf2ff; }
.m-note{ color:#9aa0a6; font-size:.9rem; margin-top:10px; }

/* Dock */
.dock{
  position:fixed;
  right:14px; bottom:14px;
  width:340px; max-width:92vw;
  background:rgba(15,17,23,.98);
  border:1px solid #2a2d33;
  border-radius:16px;
  box-shadow:0 18px 60px rgba(0,0,0,.55);
  z-index:9998;
  overflow:hidden;
}
.dock.min{ width:220px; }
.dock-head{
  padding:10px 12px;
  display:flex; align-items:center; justify-content:space-between;
  cursor:pointer;
  user-select:none;
  background:rgba(10,10,12,.55);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.dock-title{ font-weight:700; font-size:.95rem; }
.dock-badge{
  font-size:.82rem;
  padding:.15rem .5rem;
  border-radius:999px;
  border:1px solid #2a2d33;
  background:#12141a;
  color:#eaf2ff;
}
.dock-body{ display:none; padding:10px 12px; }
.dock.open .dock-body{ display:block; }

.job{
  padding:10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(255,255,255,.03);
  margin-bottom:10px;
}
.job:last-child{ margin-bottom:0; }
.job-top{ display:flex; justify-content:space-between; gap:10px; }
.job-u{ font-weight:700; }
.job-st{ color:#9aa0a6; font-size:.88rem; }
.job-line{ margin-top:6px; color:#cbd5e1; font-size:.9rem; }

.job-actions{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }
.a-btn{
  padding:.38rem .6rem;
  border-radius:10px;
  border:1px solid #2a2d33;
  background:#12141a;
  color:#eaf2ff;
  text-decoration:none;
  font-size:.9rem;
  cursor:pointer;
}
.a-btn:hover{ background:#171a22; }
.a-danger{ border-color:#3b1c1c; background:#1a0f10; color:#ffd7d7; }
.a-danger:hover{ background:#221315; }

.prog{
  margin-top:8px;
  height:8px;
  background:#0f1117;
  border:1px solid #2a2d33;
  border-radius:999px;
  overflow:hidden;
}
.prog > div{ height:100%; width:0%; background:#9ad0ff; }