/* ============================================================
   MIDS — Modern Display Theme (shared)
   Palet: navy gelap + aksen emerald/sky/amber, glassmorphism
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg0: #070c18;
  --bg1: #0b1326;
  --bg2: #0e1a33;
  --text: #e9eff9;
  --muted: #8fa0bd;
  --line: rgba(255,255,255,.08);
  --card: linear-gradient(180deg, rgba(20,34,64,.97), rgba(10,16,32,.95));
  --green: #10b981;
  --sky: #38bdf8;
  --amber: #fbbf24;
  --red: #f87171;
}

html, body {
  height: 100%;
  width: 100%;
  font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1100px 540px at 10% -10%, rgba(16,185,129,.16), transparent 60%),
    radial-gradient(900px 480px at 96% -6%, rgba(56,189,248,.13), transparent 55%),
    radial-gradient(760px 520px at 50% 118%, rgba(251,191,36,.07), transparent 60%),
    linear-gradient(160deg, var(--bg0), var(--bg1) 52%, var(--bg0));
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ============ CARD ============ */
.card {
  height: 100%;
  width: 100%;
  border-radius: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 14px 40px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.card-head {
  display: flex;
  align-items: center;
  gap: .6em;
  padding: 1em 1.25em .95em;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.card-head .dot { width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0; }
.dot-green  { background: var(--green); box-shadow: 0 0 0 5px rgba(16,185,129,.16); }
.dot-sky    { background: var(--sky);   box-shadow: 0 0 0 5px rgba(56,189,248,.16); }
.dot-amber  { background: var(--amber); box-shadow: 0 0 0 5px rgba(251,191,36,.16); }
.dot-red    { background: var(--red);   box-shadow: 0 0 0 5px rgba(248,113,113,.16); }

.card-head .t {
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: clamp(18px, 5.5vh, 46px);
  white-space: nowrap;
}
.card-head .s {
  margin-left: auto;
  color: var(--muted);
  font-weight: 700;
  font-size: clamp(13px, 3vh, 26px);
  letter-spacing: .02em;
  white-space: nowrap;
  text-align: right;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-body { flex: 1; overflow: hidden; position: relative; min-height: 0; }

/* ============ TABLE ============ */
table.mids { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.mids th {
  text-align: left;
  padding: 11px 14px;
  font-size: clamp(14px, 4vh, 32px);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 800;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.02);
}
table.mids td {
  padding: 10px 14px;
  font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,.05);
  font-size: clamp(18px, 7vh, 44px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
table.mids tbody tr:hover { background: rgba(255,255,255,.045); }
table.mids .c { text-align: center; }
table.mids .l { text-align: left; }
table.mids .r { text-align: right; }

/* ============ BADGE ============ */
.badge {
  display: inline-block;
  padding: .22em .55em;
  border-radius: 999px;
  font-weight: 800;
  font-size: .72em;
  letter-spacing: .02em;
  white-space: nowrap;
}
.b-red   { background: rgba(248,113,113,.16); color: #fca5a5; }
.b-amber { background: rgba(251,191,36,.16); color: #fcd34d; }
.b-green { background: rgba(16,185,129,.16); color: #6ee7b7; }
.b-sky   { background: rgba(56,189,248,.16); color: #7dd3fc; }
.b-muted { background: rgba(148,163,184,.16); color: #cbd5e1; }

/* ============ ANIMASI ============ */
@keyframes flipOutUp { 0% { transform: rotateX(0deg); opacity: 1; } 100% { transform: rotateX(-90deg); opacity: 0; } }
@keyframes flipInUp  { 0% { transform: rotateX(90deg); opacity: 0; } 100% { transform: rotateX(0deg); opacity: 1; } }
.flip-out-up { animation: flipOutUp .5s forwards; }
.flip-in-up  { animation: flipInUp .5s forwards; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.fade-up { animation: fadeUp .5s ease both; }

@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.pulse { animation: pulse 2s ease-in-out infinite; }

/* scrollbar hidden */
.hide-scroll { scrollbar-width: none; -ms-overflow-style: none; }
.hide-scroll::-webkit-scrollbar { display: none; }