:root{
  /* Tahoma: jelas & lapang untuk judul/teks panjang; di Linux/mac pakai fallback Verdana/Segoe UI */
  --font-sans: Tahoma, "Segoe UI", Verdana, Geneva, system-ui, sans-serif;
  --bg: #0b1020;
  --panel: rgba(255,255,255,.06);
  --panel-2: rgba(255,255,255,.08);
  --stroke: rgba(255,255,255,.10);
  --text: rgba(255,255,255,.94);
  --muted: rgba(255,255,255,.74);
  --muted-2: rgba(255,255,255,.60);
  --brand: #8b5cf6;
  --brand-2: #22c55e;
  --danger: #ef4444;
  --shadow: 0 18px 45px rgba(0,0,0,.35);
  --radius-lg: 14px;
  --radius-md: 10px;
}

/* Dashboard session cards */
.session-card{
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04)) !important;
}
.session-title{
  font-weight: 800;
  letter-spacing: .2px;
}
.session-meta{
  color: var(--muted-2);
  font-size: .85rem;
}
.kv{
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 6px 12px;
  margin-top: 10px;
}
.kv .k{
  color: var(--muted);
}
.kv .v{
  color: var(--text);
  word-break: break-word;
}

.status-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: .78rem;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.06);
}
.status-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
}
.status-pill.live{
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.10);
  color: #b7f7cf;
}
.status-pill.live .status-dot{
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94,.55);
  animation: pulse 1.2s infinite;
}
.status-pill.stop{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.70);
}
.status-pill.stop .status-dot{
  background: rgba(255,255,255,.35);
}

@keyframes pulse{
  0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); }
  70% { box-shadow: 0 0 0 10px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

html, body{
  height: 100%;
  font-family: var(--font-sans);
  background: radial-gradient(1000px 600px at 10% 10%, rgba(139,92,246,.18), transparent 55%),
              radial-gradient(900px 500px at 90% 30%, rgba(34,197,94,.12), transparent 60%),
              var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Halaman login (satu tema dengan dashboard) ---------- */
body.login-page{
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.login-shell{
  width: 100%;
  max-width: 400px;
}
.login-card{
  background: linear-gradient(165deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
  padding: 2rem 1.75rem 2.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  text-align: center;
}
.login-logo{
  width: 88px;
  height: 88px;
  border-radius: 18px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 12px 32px rgba(0,0,0,.28);
  margin: 0 auto 14px;
  display: block;
}
.login-title{
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 .35rem;
  background: linear-gradient(120deg, #fff 0%, rgba(196,181,253,.95) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.login-subtitle{
  font-size: .88rem;
  color: var(--muted-2);
  margin: 0 0 1.5rem;
  font-weight: 500;
}
.login-card .form-control{
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text);
  border-radius: var(--radius-md);
  padding: .62rem .85rem;
  margin-bottom: .85rem;
  font-size: .95rem;
  word-spacing: 0.08em;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.login-card .form-control::placeholder{
  color: var(--muted-2);
}
.login-card .form-control:focus{
  background: rgba(0,0,0,.35);
  border-color: rgba(139,92,246,.45);
  box-shadow: 0 0 0 3px rgba(139,92,246,.18);
  outline: none;
  color: var(--text);
}
.login-card .btn-primary{
  width: 100%;
  margin-top: .25rem;
  padding: .65rem 1rem;
  font-weight: 700;
  font-size: 1rem;
  border: none;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(139,92,246,.95), rgba(124,58,237,.98));
  color: #fff;
  transition: transform .08s ease, filter .2s ease, box-shadow .2s ease;
  box-shadow: 0 10px 28px rgba(139,92,246,.28);
}
.login-card .btn-primary:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
  color: #fff;
}
.login-card .alert{
  text-align: left;
  border-radius: var(--radius-md);
  border: 1px solid rgba(239,68,68,.35);
  background: rgba(239,68,68,.12);
  color: #fecaca;
  font-size: .9rem;
}

/* Layout shell */
.app-shell{
  min-height: 100vh;
  display: grid;
  grid-template-columns: 260px 1fr;
}

.app-sidebar{
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 18px 14px;
  border-right: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  backdrop-filter: blur(12px);
}

.app-main{
  min-height: 100vh;
  min-width: 0;
  max-width: 100%;
}

.app-topbar{
  border-bottom: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(11,16,32,.88), rgba(11,16,32,.55));
  backdrop-filter: blur(10px);
}
.app-topbar-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 10px 20px 12px;
  max-width: 100%;
  min-height: 48px;
}
.app-topbar-lead{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}
.app-topbar-page-title{
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.25;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.app-topbar-actions{
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
.app-topbar-name{
  font-weight: 600;
  font-size: .88rem;
  color: rgba(245, 243, 255, .92);
  word-break: break-word;
  text-align: right;
  max-width: min(40vw, 200px);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-topbar-logout{
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  padding-left: 0.45rem;
  padding-right: 0.45rem;
}
.app-topbar-logout-icon{
  display: block;
  flex-shrink: 0;
  opacity: .94;
}

/* Dashboard: indikator slide ringkasan server */
#tmCarousel .carousel-indicators [data-bs-target]{
  width: 7px;
  height: 7px;
  border-radius: 999px;
}
#tmCarousel .carousel-indicators{
  gap: 6px;
}

.app-brand{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 12px 10px 18px 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--stroke);
}

.brand-text{
  width: 100%;
}
.brand-logo{
  display: block;
  margin: 0 auto 10px;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 26px rgba(0,0,0,.26);
}
.brand-title{ font-weight: 800; line-height: 1.15; }
.brand-subtitle{ font-size: .85rem; color: var(--muted-2); margin-top: 4px; }

.brand-clock-frame{
  margin-top: 12px;
  padding: 10px 10px;
  border-radius: 10px;
  border: 1px solid rgba(245, 158, 11, .42);
  background: linear-gradient(165deg, rgba(139, 92, 246, .22), rgba(34, 197, 94, .12));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .25) inset;
  line-height: 1.4;
  text-align: center;
}
.brand-clock-display{
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
}
.brand-clock-date{
  display: block;
  font-weight: 700;
  font-size: .8rem;
  color: #fde68a;
  text-shadow: 0 0 12px rgba(253, 224, 106, .35);
  letter-spacing: .015em;
  line-height: 1.35;
}
.brand-clock-time{
  display: block;
  margin-top: 6px;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: #6ee7b7;
  text-shadow: 0 0 14px rgba(110, 231, 183, .45);
  line-height: 1.2;
}

.brand-user-greet{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.12);
  text-align: center;
  word-spacing: 0.06em;
}
.brand-user-label{
  display: block;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .48);
  margin-bottom: 6px;
}
.brand-username-wrap{
  display: flex;
  justify-content: center;
  width: 100%;
}
.brand-username{
  display: inline-block;
  max-width: 100%;
  padding: 7px 12px;
  border-radius: 12px;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.35;
  word-break: break-word;
  text-align: center;
  color: #f5f3ff;
  background: linear-gradient(180deg, rgba(139, 92, 246, .28), rgba(139, 92, 246, .12));
  border: 1px solid rgba(167, 139, 250, .45);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .2);
}

.app-nav{
  padding: 10px 6px;
  display: grid;
  gap: 8px;
}
.app-nav .nav-link{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  color: var(--muted);
  text-decoration: none;
  transition: transform .08s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}
.app-nav .nav-link:hover{
  background: var(--panel);
  border-color: var(--stroke);
  color: var(--text);
}
.app-nav .nav-link.active{
  background: linear-gradient(135deg, rgba(139,92,246,.22), rgba(34,197,94,.14));
  border-color: rgba(139,92,246,.35);
  color: var(--text);
}

.app-sidebar-footer{
  margin-top: auto;
  padding: 10px 6px;
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
}

/* Bootstrap tune */
.card{
  border: 1px solid var(--stroke) !important;
  background: rgba(255,255,255,.06) !important;
  box-shadow: var(--shadow);
  border-radius: 16px !important;
}
.btn{
  border-radius: 12px !important;
}
.btn-outline-light{
  border-color: rgba(255,255,255,.22) !important;
  color: rgba(255,255,255,.88) !important;
}
.btn-outline-light:hover{
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.30) !important;
}
.btn-danger{
  background: var(--danger) !important;
  border-color: var(--danger) !important;
}
.table{
  border-color: rgba(255,255,255,.08) !important;
}

/* —— Tabel “BAET” (bungkus + hover + header) —— */
.section-heading{
  font-weight: 800;
  letter-spacing: .02em;
  margin-top: 1.75rem;
  margin-bottom: .65rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
  color: var(--text);
}

.table-baet-shell{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  background: linear-gradient(165deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.025) 50%, rgba(139,92,246,.04) 100%);
  margin-top: .5rem;
  margin-bottom: 1.5rem;
}
.table-baet-shell::before{
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, rgba(139,92,246,.95), rgba(34,197,94,.75), rgba(59,130,246,.55));
}

.table-baet-shell .table-responsive{
  margin: 0;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

.table.table-baet{
  margin-bottom: 0 !important;
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-striped-bg: rgba(255,255,255,.045);
  --bs-table-hover-bg: rgba(139,92,246,.11);
  --bs-table-border-color: rgba(255,255,255,.07);
}

.table-baet thead th{
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .11em;
  font-weight: 800;
  color: rgba(255,255,255,.52) !important;
  padding: 1rem 1.15rem !important;
  vertical-align: middle;
  border-bottom: 1px solid rgba(139,92,246,.32) !important;
  background: linear-gradient(180deg, rgba(139,92,246,.2), rgba(255,255,255,.04)) !important;
}

.table-baet thead.table-light th{
  background: linear-gradient(180deg, rgba(139,92,246,.24), rgba(255,255,255,.06)) !important;
  color: rgba(255,255,255,.9) !important;
  border-bottom: 1px solid rgba(139,92,246,.38) !important;
}

.table-baet tbody td{
  padding: 1rem 1.15rem !important;
  border-color: rgba(255,255,255,.065) !important;
  vertical-align: middle;
}

.table-baet tbody tr{
  transition: background-color .16s ease, box-shadow .16s ease;
}

.table-baet tbody tr:hover{
  box-shadow: inset 3px 0 0 rgba(139,92,246,.65);
}

/* Kolom pertama (biasanya ID): angka tabular */
.table-baet tbody td:first-child{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: .88rem;
  font-weight: 700;
  color: rgba(255,255,255,.58);
  white-space: nowrap;
}

.table-baet .text-filename{
  font-size: .84rem;
  color: rgba(255,255,255,.78);
  word-break: break-all;
}

.table-baet .schedule-status-col,
.table-baet .schedule-actions-col{
  min-width: 110px;
  vertical-align: top;
}

.badge.bg-warning.text-dark{
  background: rgba(250,204,21,.22) !important;
  color: #fef9c3 !important;
  border: 1px solid rgba(250,204,21,.35) !important;
}

/* Dashboard riwayat (tabel) */
.history-shell{
  margin-top: .35rem;
}
.history-table thead th.history-actions-col{
  text-align: center;
}
.history-table .history-actions-col{
  min-width: 150px;
  vertical-align: top !important;
}
.history-table thead th.history-col-id{
  white-space: nowrap;
}
.history-table .history-col-id{
  white-space: nowrap;
  vertical-align: middle !important;
  font-variant-numeric: tabular-nums;
}
.history-table .history-hash{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-weight: 800;
  font-size: .9rem;
  color: rgba(255,255,255,.78);
}
.history-table .history-id-gap{
  opacity: .35;
  margin: 0 .15rem;
  font-weight: 300;
}
.history-table .history-sess{
  font-size: .72rem;
  letter-spacing: .02em;
}
.history-table .history-col-st{
  width: 1%;
  vertical-align: middle !important;
}
.history-table .history-col-key{
  min-width: 12rem;
  max-width: 28rem;
  vertical-align: middle !important;
}
.history-table .history-key-code{
  display: block;
  width: 100%;
  white-space: normal;
  word-break: break-all;
  overflow-wrap: anywhere;
  background: rgba(0,0,0,.22);
  padding: .35rem .55rem;
  border-radius: 8px;
  font-size: .78rem;
  line-height: 1.4;
  color: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.1);
}
.history-table .history-col-detail{
  min-width: 240px;
  vertical-align: middle !important;
}
.history-table .history-detail-time{
  font-weight: 650;
  font-size: .86rem;
  letter-spacing: .015em;
  line-height: 1.35;
  color: rgba(255,255,255,.92);
}
.history-table .history-detail-meta{
  font-size: .72rem;
  color: rgba(255,255,255,.52);
  margin-top: 5px;
  line-height: 1.3;
}
.history-table .history-video-title{
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.25;
}
.history-table .history-fn{
  margin-top: 3px;
}
.history-actions{
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}
.history-actions-row{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.history-actions-row .btn{
  flex: 1 1 auto;
  min-width: 0;
}
.history-table tbody td .status-pill{
  white-space: nowrap;
}
.history-table tbody tr[title]{
  cursor: default;
}
.history-empty-wrap::before{
  opacity: .65;
}

/* Kartu tugas dashboard — ringkas (baris label:nilai) */
.task-card-shell .task-work-card{
  border: 1px solid var(--stroke) !important;
  background: linear-gradient(165deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.03) 100%) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.task-card-title{
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .02em;
  line-height: 1.25;
  margin: 0;
  color: var(--text);
}
.task-compact{
  display: flex;
  flex-direction: column;
  gap: .32rem;
  font-size: .84rem;
  line-height: 1.35;
}
.task-row{
  display: grid;
  grid-template-columns: 7.25rem minmax(0, 1fr);
  gap: .5rem .65rem;
  align-items: start;
}
.task-k{
  color: rgba(255,255,255,.48);
  font-weight: 650;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding-top: .12rem;
}
.task-v{
  color: rgba(255,255,255,.9);
  word-break: break-word;
}
.task-code{
  font-size: .78rem;
  margin: 0;
  padding: 0;
  background: transparent !important;
  color: rgba(255,255,255,.88) !important;
  word-break: break-all;
  white-space: normal;
}
.task-status.task-st-active{
  color: #fecaca;
  font-weight: 800;
}
.task-status.task-st-scheduled{
  color: #ffdf9c;
  font-weight: 800;
}
.task-status.task-st-stopped{
  color: rgba(255,255,255,.62);
  font-weight: 650;
}

/* Header kartu — judul kiri, pill status kanan (semua status) */
.task-card-head{
  min-width: 0;
}
.task-card-head .task-card-title{
  min-width: 0;
  padding-right: 0;
}
.task-status-pill{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  margin-top: 2px;
  padding: .32rem .62rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  border: 1px solid transparent;
}
.task-status-pill-text{
  position: relative;
  top: .5px;
}
.task-status-pill-active{
  color: #ef4444 !important;
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(239,68,68,.72) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
/* Tanpa restart: label server lama "AKTIF" → tampil sebagai "LIVE" */
.task-status-pill-active .task-status-pill-text{
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
  color: transparent !important;
}
.task-status-pill-active .task-status-pill-text::after{
  content: "LIVE";
  font-size: .62rem;
  line-height: 1;
  letter-spacing: .1em;
  font-weight: 800;
  text-transform: uppercase;
  color: #ef4444;
}
.task-status-pill-scheduled{
  color: #ffdf9c !important;
  background: rgba(245,158,11,.2) !important;
  border-color: rgba(245,158,11,.45) !important;
}
.task-status-pill-stopped{
  color: rgba(255,255,255,.72) !important;
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.18) !important;
}
.task-status-pill-ready.task-status-pill-stopped{
  color: #a5e9ff !important;
  background: rgba(56,189,248,.14) !important;
  border-color: rgba(56,189,248,.4) !important;
}
.task-status-pill-dot{
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239,68,68,.6);
  animation: taskLivePillPulse 1.15s ease-in-out infinite;
}
.task-status-pill-dot--scheduled{
  background: #fbbf24;
  box-shadow: 0 0 0 0 rgba(251,191,36,.5);
  animation: taskScheduledDotPulse 1.35s ease-in-out infinite;
}
.task-status-pill-dot--ready{
  background: #38bdf8;
  animation: none;
  opacity: .95;
}
@keyframes taskLivePillPulse{
  0%, 100%{
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(239,68,68,.55);
  }
  50%{
    opacity: .82;
    transform: scale(.9);
    box-shadow: 0 0 0 7px rgba(239,68,68,.12);
  }
}
@keyframes taskScheduledDotPulse{
  0%, 100%{
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(251,191,36,.45);
  }
  50%{
    opacity: .88;
    transform: scale(.92);
    box-shadow: 0 0 0 6px rgba(251,191,36,.1);
  }
}

/* Cache sangat lama: badge .task-live-pill (hijau) → sama seperti LIVE merah */
.task-live-pill{
  color: #fecaca !important;
  background: rgba(239,68,68,.22) !important;
  border-color: rgba(239,68,68,.52) !important;
}
.task-live-pill-dot{
  background: #ef4444 !important;
  box-shadow: 0 0 0 0 rgba(239,68,68,.6) !important;
  animation: taskLivePillPulse 1.15s ease-in-out infinite !important;
}
.task-live-pill-label{
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
  color: transparent !important;
}
.task-live-pill-label::after{
  content: "LIVE";
  font-size: .62rem;
  line-height: 1;
  letter-spacing: .1em;
  font-weight: 800;
  text-transform: uppercase;
  color: #fecaca;
}

/*
  Tanpa restart Flask: jika template masih cache Lama (baris "status" tetap di .task-compact),
  pindahkan baris itu ke pojok kanan seperti pill — semua jenis status.
*/
.task-card-shell .task-work-card:has(.task-compact .task-row:has(.task-status)):not(:has(.task-status-pill)) > .card-body{
  position: relative;
}
.task-card-shell .task-work-card:has(.task-compact .task-row:has(.task-status)):not(:has(.task-status-pill)) .task-card-head .task-card-title,
.task-card-shell .task-work-card:has(.task-compact .task-row:has(.task-status)):not(:has(.task-status-pill)) > .card-body > .task-card-title{
  padding-right: 7.75rem;
}
.task-card-shell .task-work-card:has(.task-compact .task-row:has(.task-status)):not(:has(.task-status-pill)) .task-compact .task-row:has(.task-status){
  position: absolute;
  top: 0.65rem;
  right: 0.85rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  width: auto;
  max-width: min(100% - 1rem, 16rem);
  grid-template-columns: none;
  padding: .32rem .62rem;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
  border: 1px solid transparent;
}
.task-card-shell .task-work-card:has(.task-compact .task-row:has(.task-status)):not(:has(.task-status-pill)) .task-compact .task-row:has(.task-st-active){
  background: rgba(34,197,94,.2);
  border-color: rgba(34,197,94,.48) !important;
}
.task-card-shell .task-work-card:has(.task-compact .task-row:has(.task-status)):not(:has(.task-status-pill)) .task-compact .task-row:has(.task-st-scheduled){
  background: rgba(245,158,11,.2);
  border-color: rgba(245,158,11,.45) !important;
}
.task-card-shell .task-work-card:has(.task-compact .task-row:has(.task-status)):not(:has(.task-status-pill)) .task-compact .task-row:has(.task-st-stopped){
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.18) !important;
}
.task-card-shell .task-work-card:has(.task-compact .task-row:has(.task-status)):not(:has(.task-status-pill)) .task-compact .task-row:has(.task-status) .task-k{
  display: none !important;
}
.task-card-shell .task-work-card:has(.task-compact .task-row:has(.task-status)):not(:has(.task-status-pill)) .task-compact .task-row:has(.task-status) .task-v{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 800;
}
.task-card-shell .task-work-card:has(.task-compact .task-row:has(.task-status)):not(:has(.task-status-pill)) .task-compact .task-row:has(.task-st-active) .task-v{
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
}
.task-card-shell .task-work-card:has(.task-compact .task-row:has(.task-status)):not(:has(.task-status-pill)) .task-compact .task-row:has(.task-st-active) .task-v::after{
  content: "LIVE";
  font-size: .62rem;
  line-height: 1;
  letter-spacing: .1em;
  font-weight: 800;
  text-transform: uppercase;
  color: #fecaca !important;
}
.task-card-shell .task-work-card:has(.task-compact .task-row:has(.task-status)):not(:has(.task-status-pill)) .task-compact .task-row:has(.task-st-scheduled) .task-v{
  color: #ffdf9c !important;
}
.task-card-shell .task-work-card:has(.task-compact .task-row:has(.task-status)):not(:has(.task-status-pill)) .task-compact .task-row:has(.task-st-stopped) .task-v{
  color: rgba(255,255,255,.75) !important;
}
.task-card-shell .task-work-card:has(.task-compact .task-row:has(.task-status)):not(:has(.task-status-pill)) .task-compact .task-row:has(.task-st-active) .task-v::before{
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #ef4444;
  animation: taskLivePillPulse 1.15s ease-in-out infinite;
}
.task-card-shell .task-work-card:has(.task-compact .task-row:has(.task-status)):not(:has(.task-status-pill)) .task-compact .task-row:has(.task-st-scheduled) .task-v::before{
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #fbbf24;
  animation: taskScheduledDotPulse 1.35s ease-in-out infinite;
}
.task-card-shell .task-work-card:has(.task-compact .task-row:has(.task-status)):not(:has(.task-status-pill)) .task-compact .task-row:has(.task-st-stopped) .task-v::before{
  content: none;
}

/* Riwayat streaming — kartu per tugas */
.history-card-grid{
  margin-top: .5rem;
}
.history-task-card .card{
  border: 1px solid var(--stroke) !important;
  background: linear-gradient(165deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.03) 100%) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.history-task-card .card::before{
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, rgba(139,92,246,.85), rgba(34,197,94,.65));
}
.history-card-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: .65rem;
  margin-bottom: .5rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.history-card-task-title{
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: .02em;
  line-height: 1.25;
  margin: 0;
  color: var(--text);
}
.badge-task-live{
  flex-shrink: 0;
  font-weight: 800;
  font-size: .68rem;
  letter-spacing: .06em;
  padding: .4rem .65rem;
  border-radius: 999px;
  background: rgba(34,197,94,.2) !important;
  color: #b7f7cf !important;
  border: 1px solid rgba(34,197,94,.4) !important;
}
.badge-task-scheduled{
  flex-shrink: 0;
  font-weight: 800;
  font-size: .68rem;
  letter-spacing: .06em;
  padding: .4rem .65rem;
  border-radius: 999px;
  background: rgba(245,158,11,.18) !important;
  color: #ffdf9c !important;
  border: 1px solid rgba(245,158,11,.4) !important;
}
.badge-task-stop{
  flex-shrink: 0;
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .05em;
  padding: .4rem .65rem;
  border-radius: 999px;
  background: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
}
.history-card-meta{
  display: grid;
  gap: .35rem;
  font-size: .84rem;
  line-height: 1.35;
  color: rgba(255,255,255,.88);
}
.history-card-meta .hk{
  color: rgba(255,255,255,.5);
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: .25rem;
}
.history-card-meta .hk:first-child{ margin-top: 0; }
.history-card-meta code{
  font-size: .78rem;
  word-break: break-all;
  display: block;
  background: rgba(0,0,0,.22);
  padding: .35rem .5rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.9);
}
.history-card-meta .history-video-title{
  font-weight: 700;
}
.history-card-meta .text-filename{
  font-size: .8rem;
  opacity: .9;
}
.history-card-footer{
  padding-top: .85rem;
  margin-top: .65rem;
  border-top: 1px solid rgba(255,255,255,.1);
}
.history-card-actions{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.history-card-actions .btn-wrap{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.history-card-actions .btn-wrap .btn{
  flex: 1 1 auto;
  min-width: 0;
}
.form-control, .form-select{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: var(--text) !important;
  border-radius: 12px !important;
  /* Spasi antar kata saat mengetik judul/isian — font UI sering terasa rapat */
  word-spacing: 0.08em;
}
.form-control::placeholder{
  color: rgba(255,255,255,.45) !important;
}
.form-control:focus, .form-select:focus{
  border-color: rgba(139,92,246,.55) !important;
  box-shadow: 0 0 0 .25rem rgba(139,92,246,.20) !important;
}

.badge.bg-success{ background: rgba(34,197,94,.25) !important; color: #b7f7cf !important; border: 1px solid rgba(34,197,94,.35) !important;}
.badge.bg-danger{ background: rgba(239,68,68,.28) !important; color: #fecaca !important; border: 1px solid rgba(239,68,68,.42) !important;}
.badge.bg-secondary{ background: rgba(255,255,255,.10) !important; color: rgba(255,255,255,.75) !important; border: 1px solid rgba(255,255,255,.15) !important;}
.badge.bg-info{ background: rgba(139,92,246,.22) !important; color: rgba(255,255,255,.88) !important; border: 1px solid rgba(139,92,246,.35) !important;}

/* Table alignment helpers */
.checker-cell{
  min-width: 200px;
  max-width: 380px;
  vertical-align: top;
}
.checker-box{
  display: grid;
  gap: 6px;
  text-align: left;
  line-height: 1.35;
  background: linear-gradient(145deg, rgba(139,92,246,.08), rgba(255,255,255,.04));
  border: 1px solid rgba(139,92,246,.2);
  border-radius: 12px;
  padding: 10px 12px;
}
.checker-box--compact{
  gap: 8px;
}
.checker-box--minimal{
  gap: 6px;
}
/* Baris atas: strip + summary Detail sejajar (desktop); terbuka → isi penuh ke bawah */
.checker-box--checkerbar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.checker-box--checkerbar .checker-strip{
  flex: 1 1 auto;
  min-width: 0;
  order: 1;
}
.checker-box--checkerbar .checker-more--solo{
  flex: 0 0 auto;
  order: 2;
}
.checker-box--checkerbar .checker-more--solo[open]{
  flex: 1 1 100%;
  order: 3;
  width: 100%;
}
@media (max-width: 767.98px) {
  .checker-box--checkerbar .checker-more--solo{
    flex: 1 1 100%;
    width: 100%;
  }
}
.checker-strip{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.checker-status{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 8px;
  letter-spacing: .02em;
}
.checker-status .checker-glyph{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25em;
  height: 1.25em;
  font-size: 1.05em;
  line-height: 1;
  border-radius: 50%;
  font-weight: 900;
}
.checker-status--ok{
  color: #bbf7d0;
  background: rgba(34,197,94,.2);
  border: 1px solid rgba(34,197,94,.45);
}
.checker-status--ok .checker-glyph{
  background: rgba(34,197,94,.45);
  color: #ecfdf5;
}
.checker-status--no{
  color: #fecaca;
  background: rgba(239,68,68,.22);
  border: 1px solid rgba(239,68,68,.45);
}
.checker-status--no .checker-glyph{
  background: rgba(239,68,68,.4);
  color: #fff5f5;
}
.checker-head{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
.checker-head--mode{
  align-items: center;
}
.checker-msc-pill{
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(139,92,246,.28);
  color: #ede9fe;
  border: 1px solid rgba(167,139,250,.45);
  cursor: help;
}
.checker-quality-pill{
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
}
.checker-quality-pill--ok{
  background: rgba(34,197,94,.18);
  color: #bbf7d0;
  border: 1px solid rgba(34,197,94,.35);
}
.checker-quality-pill--neutral{
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.18);
}
.checker-source-pill{
  font-size: .82rem;
  color: rgba(255,255,255,.88);
}
.checker-source-pill strong{
  color: #c4b5fd;
  font-weight: 700;
}
.checker-more--solo{
  margin-top: 0;
}
.checker-more--solo summary{
  font-size: .8rem;
  white-space: nowrap;
  list-style: none;
}
.checker-box--checkerbar .checker-more--solo[open] summary{
  margin-bottom: 6px;
}
.checker-dim{
  font-size: .85rem;
  color: rgba(255,255,255,.78);
  font-variant-numeric: tabular-nums;
}
.checker-tech{
  font-size: .8rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: rgba(255,255,255,.85);
  line-height: 1.4;
}
.checker-tech .checker-dot{
  color: rgba(255,255,255,.35);
  padding: 0 2px;
}
.checker-tech .checker-ok{ color: #9df4bd; }
.checker-tech .checker-bad{ color: #fecaca; }
.checker-tech .checker-muted{ color: rgba(255,255,255,.55); }
.checker-badge-row{
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.table-baet .checker-box{
  border-color: rgba(139,92,246,.22);
}
.checker-more{
  font-size: .78rem;
  color: rgba(255,255,255,.55);
}
.checker-more summary{
  cursor: pointer;
  user-select: none;
  color: rgba(167,139,250,.95);
  list-style-position: outside;
}
.checker-more summary::-webkit-details-marker{ display: none; }
.checker-more summary::before{
  content: "▸ ";
  display: inline-block;
  transition: transform .15s ease;
}
.checker-more[open] summary::before{
  transform: rotate(90deg);
}
.checker-more-body{
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(0,0,0,.2);
  border: 1px solid rgba(255,255,255,.06);
  font-size: .8rem;
  line-height: 1.45;
}
.checker-meta{
  font-size: .82rem;
  color: rgba(255,255,255,.8);
}
.checker-rec{
  font-size: .82rem;
  color: #8dd5ff;
}
.checker-warn{
  font-size: .82rem;
  color: #ffd37c;
}
.checker-result-ok{
  font-size: .82rem;
  color: #9df4bd;
  font-weight: 700;
}
.checker-result-bad{
  font-size: .82rem;
  color: #ffc9c9;
  font-weight: 700;
}
.checker-label{
  color: rgba(255,255,255,.65);
}

/* Upload / Database video: pemisah section dari form */
.upload-page-section{
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,.1);
}
.upload-empty-state{
  border-radius: 12px;
  border: 1px dashed rgba(255,255,255,.15);
  background: rgba(0,0,0,.15);
}
.upload-drive-form .form-label{
  font-size: .9rem;
  margin-bottom: .35rem;
  color: rgba(255,255,255,.88);
}

.actions-cell{
  min-width: 230px;
  vertical-align: top;
}
.actions-group{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
  align-items: center;
}
.actions-group form{
  margin: 0;
}

/* ---------- Mobile: menu geser + tombol hamburger ---------- */
.sidebar-toggle{
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1200;
  width: 44px;
  height: 44px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: rgba(11,16,32,.88);
  backdrop-filter: blur(10px);
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  transition: background .15s, border-color .15s;
}
.sidebar-toggle:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(139,92,246,.35);
}
.sidebar-toggle .icon-bar{
  display: block;
  width: 18px;
  height: 2px;
  margin: 3px 0;
  background: currentColor;
  border-radius: 1px;
}
.sidebar-overlay{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
}

/* Responsive */
@media (max-width: 992px){
  .app-shell{ grid-template-columns: 220px 1fr; }
}

@media (max-width: 768px){
  body.drawer-open{
    overflow: hidden;
    touch-action: none;
  }
  .app-shell{
    display: block;
    position: relative;
    min-height: 100vh;
    max-width: 100%;
    overflow-x: clip;
  }
  .sidebar-toggle{
    display: inline-flex;
  }
  .app-main{
    padding-top: 58px;
    min-height: 100vh;
  }
  .app-topbar-inner{
    padding-left: 58px;
    padding-right: 14px;
  }
  .app-topbar-page-title{
    font-size: 1.05rem;
  }
  .app-topbar-name{
    max-width: min(36vw, 140px);
  }
  .app-sidebar{
    position: fixed;
    top: 0;
    left: 0;
    width: min(290px, 88vw);
    height: 100vh;
    height: 100dvh;
    z-index: 1100;
    margin: 0;
    padding-top: 16px;
    border-right: 1px solid var(--stroke);
    border-bottom: none;
    background: linear-gradient(195deg, rgba(18,24,42,.97), rgba(11,16,32,.98));
    box-shadow: 12px 0 40px rgba(0,0,0,.4);
    transform: translateX(-102%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .app-shell.sidebar-open .app-sidebar{
    transform: translateX(0);
  }
  .app-shell.sidebar-open .sidebar-overlay{
    display: block;
  }
  .app-sidebar-footer{
    position: static;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  }

  .table-baet-shell{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .checker-cell{
    min-width: 0;
    max-width: 100%;
  }
  .actions-cell{
    min-width: 0;
  }
  .actions-group{
    flex-direction: column;
    align-items: stretch;
  }
  .actions-group .btn{
    width: 100%;
    justify-content: center;
  }

  .history-table .history-actions-col{
    min-width: 0;
  }
  .history-table .history-col-key{
    min-width: 0;
    max-width: none;
  }
  .history-table .history-col-detail{
    min-width: 0;
  }

  .table-baet thead th{
    padding: .65rem .5rem !important;
    font-size: .58rem !important;
    letter-spacing: .08em;
  }
  .table-baet tbody td{
    padding: .55rem .5rem !important;
    font-size: .84rem;
  }

  .display-6{
    font-size: 2rem !important;
  }

  .table-baet .schedule-status-col,
  .table-baet .schedule-actions-col{
    min-width: 0;
  }

  .task-row{
    grid-template-columns: 1fr;
    gap: .1rem .5rem;
  }
  .task-k{
    padding-top: 0;
  }
}