:root {
  --primary: #6e1423;
  --primary-dark: #4b0e19;
  --primary-soft: #f7e9ec;
  --accent: #c9a227;
  --accent-soft: #f6edcf;
  --bg: #f8f5f0;
  --surface: #ffffff;
  --surface-soft: #fcfaf7;
  --text: #2c2220;
  --muted: #786d68;
  --line: #e9e1d8;
  --success: #2f7d4b;
  --danger: #b53b47;
  --warning: #a36b00;
  --shadow: 0 18px 50px rgba(74, 31, 35, 0.09);
  --shadow-soft: 0 8px 25px rgba(74, 31, 35, 0.06);
  --radius: 22px;
  --sidebar: 278px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.nowrap { white-space: nowrap; }

/* Login */
.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr);
  background:
    radial-gradient(circle at 12% 12%, rgba(201, 162, 39, .22), transparent 32%),
    linear-gradient(135deg, var(--primary-dark), var(--primary) 62%, #8b2637);
}
.login-brand {
  padding: clamp(40px, 7vw, 96px);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.login-brand::after {
  content: "";
  position: absolute;
  width: 480px;
  height: 480px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 50%;
  right: -220px;
  bottom: -240px;
  box-shadow: 0 0 0 80px rgba(255,255,255,.03), 0 0 0 160px rgba(255,255,255,.02);
}
.brand-lockup { position: relative; z-index: 1; }
.logo-box {
  width: 74px;
  height: 74px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--accent), #f0d66b);
  color: var(--primary-dark);
  font-size: 25px;
  font-weight: 900;
  letter-spacing: -2px;
  box-shadow: 0 16px 35px rgba(0,0,0,.18);
}
.logo-box.compact { width: 52px; height: 52px; border-radius: 16px; font-size: 18px; }
.login-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 46px;
  color: #f6de88;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.login-brand h1 {
  max-width: 720px;
  margin: 18px 0 18px;
  font-size: clamp(42px, 5.2vw, 76px);
  line-height: 1.02;
  letter-spacing: -.045em;
}
.login-brand p {
  max-width: 610px;
  font-size: clamp(15px, 1.5vw, 19px);
  line-height: 1.8;
  color: rgba(255,255,255,.78);
}
.login-benefits {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 42px;
}
.login-benefit {
  padding: 18px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(9px);
}
.login-benefit strong { display: block; margin-top: 10px; font-size: 13px; }
.login-panel {
  background: var(--bg);
  display: grid;
  place-items: center;
  padding: 32px;
}
.login-card {
  width: min(100%, 480px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: clamp(28px, 4vw, 46px);
  box-shadow: var(--shadow);
}
.login-card h2 { margin: 0 0 8px; font-size: 28px; letter-spacing: -.03em; }
.login-card > p { margin: 0 0 30px; color: var(--muted); line-height: 1.7; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; margin-bottom: 9px; font-size: 13px; font-weight: 700; }
.input-wrap { position: relative; }
.input-wrap .input-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.input-wrap input { padding-left: 45px; }
.input-wrap .password-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  width: 38px;
  height: 38px;
  border-radius: 12px;
}
input, textarea, select {
  width: 100%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  border-radius: 14px;
  outline: none;
  padding: 13px 15px;
  transition: .18s ease;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(201,162,39,.14);
}
textarea { resize: vertical; min-height: 170px; line-height: 1.7; }
.form-error {
  display: none;
  padding: 12px 14px;
  margin-bottom: 16px;
  border-radius: 13px;
  background: #fff0f1;
  border: 1px solid #f4c8cc;
  color: #9f2733;
  font-size: 13px;
  line-height: 1.5;
}
.form-error.show { display: block; }
.btn {
  border: 0;
  border-radius: 14px;
  padding: 12px 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-weight: 750;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease, background .16s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; box-shadow: 0 11px 24px rgba(110,20,35,.22); }
.btn-accent { background: linear-gradient(135deg, var(--accent), #e0c251); color: var(--primary-dark); }
.btn-soft { background: var(--primary-soft); color: var(--primary); }
.btn-outline { background: #fff; color: var(--text); border: 1px solid var(--line); }
.btn-danger { background: #fff0f1; color: var(--danger); }
.btn-block { width: 100%; }
.login-help { margin: 22px 0 0; text-align: center; color: var(--muted); font-size: 12px; line-height: 1.6; }

/* App shell */
.app-shell { min-height: 100vh; }
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar);
  background: #fff;
  border-right: 1px solid var(--line);
  z-index: 40;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transition: transform .22s ease;
}
.sidebar-header {
  padding: 24px 22px 18px;
  display: flex;
  align-items: center;
  gap: 13px;
  border-bottom: 1px solid var(--line);
}
.sidebar-brand strong { display: block; font-size: 14px; letter-spacing: -.02em; }
.sidebar-brand span { display: block; margin-top: 4px; font-size: 10px; color: var(--muted); letter-spacing: .11em; text-transform: uppercase; }
.sidebar-search { padding: 16px 18px 8px; }
.sidebar-search .input-wrap input { background: var(--surface-soft); padding-top: 11px; padding-bottom: 11px; font-size: 12px; }
.nav-group { padding: 12px 12px 0; }
.nav-label { padding: 0 10px 8px; font-size: 9px; font-weight: 800; color: #958a84; letter-spacing: .15em; text-transform: uppercase; }
.nav-item {
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: 13px;
  padding: 11px 12px;
  display: flex;
  align-items: center;
  gap: 11px;
  color: #584d49;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 3px;
  transition: .16s ease;
}
.nav-item:hover { background: var(--surface-soft); color: var(--primary); }
.nav-item.active { background: var(--primary-soft); color: var(--primary); font-weight: 800; }
.nav-item.active::before { content: ""; width: 4px; height: 23px; border-radius: 8px; background: var(--accent); margin-left: -12px; }
.nav-item .nav-icon { width: 18px; display: inline-grid; place-items: center; flex: 0 0 18px; }
.nav-count { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; display: grid; place-items: center; background: var(--surface-soft); color: var(--muted); font-size: 10px; }
.sidebar-footer { margin-top: auto; padding: 17px; border-top: 1px solid var(--line); }
.profile-mini { display: flex; align-items: center; gap: 11px; padding: 10px; border-radius: 16px; background: var(--surface-soft); }
.avatar { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; flex: 0 0 auto; background: linear-gradient(145deg, var(--primary), var(--primary-dark)); color: #fff; font-weight: 800; }
.profile-mini strong { display: block; max-width: 128px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.profile-mini span { display: block; margin-top: 3px; font-size: 10px; color: var(--muted); }
.icon-button { width: 39px; height: 39px; border-radius: 12px; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; cursor: pointer; color: var(--muted); }

.main-shell { margin-left: var(--sidebar); min-height: 100vh; }
.topbar {
  height: 76px;
  padding: 0 clamp(20px, 3vw, 42px);
  position: sticky;
  top: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: rgba(248,245,240,.88);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(233,225,216,.75);
}
.mobile-menu { display: none; }
.breadcrumb { color: var(--muted); font-size: 12px; }
.breadcrumb strong { color: var(--text); }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.package-badge { border-radius: 99px; padding: 8px 12px; background: var(--accent-soft); color: #765d00; font-size: 11px; font-weight: 800; }
.content { padding: 28px clamp(20px, 3vw, 42px) 54px; max-width: 1600px; margin: 0 auto; }

/* Common cards */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.page-head h1 { margin: 0; font-size: clamp(26px, 3vw, 40px); letter-spacing: -.045em; line-height: 1.1; }
.page-head p { margin: 9px 0 0; color: var(--muted); line-height: 1.7; font-size: 13px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.card-pad { padding: 24px; }
.grid { display: grid; gap: 18px; }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat-card { padding: 20px; display: flex; align-items: center; gap: 15px; }
.stat-icon { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.stat-copy span { font-size: 11px; color: var(--muted); }
.stat-copy strong { display: block; margin-top: 5px; font-size: 24px; letter-spacing: -.03em; }

.hero-card {
  position: relative;
  overflow: hidden;
  min-height: 280px;
  padding: clamp(26px, 4vw, 46px);
  background:
    linear-gradient(110deg, rgba(75,14,25,.98), rgba(110,20,35,.92)),
    radial-gradient(circle at 90% 10%, rgba(201,162,39,.7), transparent 34%);
  color: #fff;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(220px, .7fr);
  align-items: center;
  gap: 28px;
}
.hero-card::after { content: ""; position: absolute; width: 340px; height: 340px; right: -130px; top: -150px; border-radius: 50%; border: 50px solid rgba(255,255,255,.035); }
.hero-kicker { font-size: 11px; font-weight: 800; color: #f5dc82; letter-spacing: .13em; text-transform: uppercase; }
.hero-card h2 { margin: 13px 0 13px; max-width: 700px; font-size: clamp(29px, 4vw, 52px); letter-spacing: -.055em; line-height: 1.05; }
.hero-card p { max-width: 690px; margin: 0; color: rgba(255,255,255,.74); line-height: 1.75; font-size: 13px; }
.hero-actions { margin-top: 23px; display: flex; flex-wrap: wrap; gap: 10px; }
.progress-orbit { position: relative; z-index: 1; justify-self: center; width: 190px; height: 190px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--accent) calc(var(--progress) * 1%), rgba(255,255,255,.14) 0); box-shadow: 0 20px 45px rgba(0,0,0,.18); }
.progress-orbit::before { content: ""; position: absolute; inset: 16px; border-radius: 50%; background: var(--primary-dark); }
.progress-orbit-content { position: relative; text-align: center; }
.progress-orbit-content strong { display: block; font-size: 39px; letter-spacing: -.05em; }
.progress-orbit-content span { display: block; margin-top: 3px; font-size: 11px; color: rgba(255,255,255,.66); }

.section-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 30px 0 14px; }
.section-head h2 { margin: 0; font-size: 18px; letter-spacing: -.025em; }
.section-head p { margin: 5px 0 0; font-size: 12px; color: var(--muted); }
.announcement { padding: 20px; display: flex; align-items: flex-start; gap: 15px; }
.announcement-icon { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: #765d00; flex: 0 0 auto; }
.announcement h3 { margin: 0 0 7px; font-size: 14px; }
.announcement p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }

.next-module { padding: 21px; display: flex; align-items: center; gap: 18px; }
.next-module-media { width: 120px; height: 78px; border-radius: 15px; flex: 0 0 auto; overflow: hidden; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); display: grid; place-items: center; color: #fff; }
.next-module-media img { width: 100%; height: 100%; object-fit: cover; }
.next-module-copy { min-width: 0; flex: 1; }
.next-module-copy span { color: var(--accent); font-weight: 800; font-size: 10px; text-transform: uppercase; letter-spacing: .09em; }
.next-module-copy h3 { margin: 6px 0 6px; font-size: 16px; }
.next-module-copy p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }

/* Checklist */
.progress-header { padding: 23px; margin-bottom: 18px; }
.progress-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.progress-title h2 { margin: 0; font-size: 17px; }
.progress-title p { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.progress-number { text-align: right; }
.progress-number strong { display: block; color: var(--primary); font-size: 24px; }
.progress-number span { font-size: 10px; color: var(--muted); }
.progress-track { height: 8px; margin-top: 17px; border-radius: 99px; background: #eee7df; overflow: hidden; }
.progress-track > div { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width .35s ease; }
.zone-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.zone-chip { border: 1px solid var(--line); background: #fff; color: var(--muted); border-radius: 99px; padding: 9px 13px; font-size: 11px; font-weight: 750; cursor: pointer; }
.zone-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.zone-section { margin-bottom: 26px; }
.zone-title-card { display: flex; align-items: center; gap: 14px; padding: 18px 21px; margin-bottom: 13px; }
.zone-number { width: 43px; height: 43px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: #765d00; font-weight: 900; }
.zone-title-card h2 { margin: 0; font-size: 17px; }
.zone-title-card p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.module-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.module-card { overflow: hidden; position: relative; transition: transform .18s ease, box-shadow .18s ease; }
.module-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.module-card.locked { opacity: .72; }
.module-media { aspect-ratio: 16 / 7.5; background: linear-gradient(135deg, #2b1015, var(--primary)); position: relative; overflow: hidden; display: grid; place-items: center; color: #fff; }
.module-media img { width: 100%; height: 100%; object-fit: cover; }
.module-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(24,6,10,.5)); }
.play-circle { position: relative; z-index: 2; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.18); backdrop-filter: blur(8px); display: grid; place-items: center; }
.module-index { position: absolute; top: 13px; left: 13px; z-index: 3; min-width: 31px; height: 31px; border-radius: 10px; padding: 0 9px; display: grid; place-items: center; background: var(--accent); color: var(--primary-dark); font-size: 11px; font-weight: 900; }
.module-lock { position: absolute; top: 13px; right: 13px; z-index: 3; width: 33px; height: 33px; border-radius: 11px; display: grid; place-items: center; background: rgba(20,7,10,.7); color: #fff; }
.module-body { padding: 19px; }
.module-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.module-status { font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); }
.duration { font-size: 10px; color: var(--muted); background: var(--surface-soft); padding: 6px 8px; border-radius: 99px; }
.module-body h3 { margin: 0 0 8px; font-size: 15px; }
.module-body p { min-height: 40px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.module-actions { margin-top: 17px; display: grid; grid-template-columns: 1fr auto; gap: 9px; }
.module-actions .btn { padding: 10px 12px; font-size: 11px; }
.complete-button.completed { background: #e8f6ed; color: var(--success); }

/* Notes, schedule, admin */
.two-column { display: grid; grid-template-columns: minmax(280px,.7fr) minmax(0,1.3fr); gap: 18px; align-items: start; }
.module-list { padding: 10px; max-height: 660px; overflow-y: auto; }
.module-list-item { width: 100%; border: 0; border-radius: 14px; background: transparent; padding: 13px; display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer; color: var(--text); }
.module-list-item:hover { background: var(--surface-soft); }
.module-list-item.active { background: var(--primary-soft); color: var(--primary); }
.module-list-item span:first-child { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); font-size: 10px; font-weight: 800; }
.module-list-item strong { display: block; font-size: 11px; }
.module-list-item small { display: block; margin-top: 4px; font-size: 9px; color: var(--muted); }
.editor-card { padding: clamp(21px, 3vw, 32px); }
.editor-card h2 { margin: 0 0 7px; font-size: 19px; }
.editor-card > p { margin: 0 0 20px; color: var(--muted); font-size: 12px; }
.editor-footer { margin-top: 13px; display: flex; justify-content: flex-end; }
.schedule-card { padding: 20px; }
.schedule-date { display: inline-flex; align-items: center; gap: 7px; color: var(--primary); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.schedule-card h3 { margin: 11px 0 8px; font-size: 15px; }
.schedule-card p { margin: 0 0 17px; color: var(--muted); font-size: 11px; }
.status-pill { display: inline-flex; align-items: center; border-radius: 99px; padding: 7px 9px; background: var(--accent-soft); color: #765d00; font-size: 9px; font-weight: 800; }
.admin-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.admin-form .full { grid-column: 1 / -1; }
.admin-form label { display: block; margin-bottom: 7px; font-size: 11px; font-weight: 750; }

/* Modal */
.modal-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(29,10,14,.7); backdrop-filter: blur(8px); display: grid; place-items: center; padding: 20px; }
.modal { width: min(100%, 1040px); max-height: 94vh; overflow-y: auto; border-radius: 24px; background: #fff; box-shadow: 0 30px 90px rgba(0,0,0,.3); }
.modal-head { padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; font-size: 16px; }
.modal-body { padding: 20px; }
.video-frame { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 17px; background: #16080b; }
.video-empty { aspect-ratio: 16/9; border-radius: 17px; background: linear-gradient(135deg,var(--primary-dark),var(--primary)); color: #fff; display: grid; place-items: center; text-align: center; padding: 30px; }
.video-empty p { margin: 8px 0 0; color: rgba(255,255,255,.68); font-size: 12px; }
.modal-copy { margin-top: 18px; }
.modal-copy p { color: var(--muted); line-height: 1.7; font-size: 12px; }
.modal-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }

/* Empty and loading */
.empty-state { padding: 48px 25px; text-align: center; }
.empty-state .empty-icon { width: 64px; height: 64px; margin: 0 auto 17px; border-radius: 20px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.empty-state h3 { margin: 0 0 8px; }
.empty-state p { max-width: 540px; margin: 0 auto; color: var(--muted); font-size: 12px; line-height: 1.7; }
.loading-screen { min-height: 100vh; display: grid; place-items: center; background: var(--bg); }
.loader { width: 52px; height: 52px; border: 4px solid #eadfda; border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton { background: linear-gradient(90deg,#f1ece6 25%,#faf7f3 40%,#f1ece6 60%); background-size: 300% 100%; animation: shimmer 1.3s infinite; border-radius: 12px; }
@keyframes shimmer { to { background-position: -300% 0; } }

/* Toast */
#toast-root { position: fixed; right: 22px; bottom: 22px; z-index: 200; display: grid; gap: 10px; }
.toast { min-width: 280px; max-width: 410px; padding: 14px 16px; border-radius: 15px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); display: flex; align-items: flex-start; gap: 11px; animation: toastIn .22s ease; font-size: 12px; line-height: 1.5; }
.toast.success { border-left: 4px solid var(--success); }
.toast.error { border-left: 4px solid var(--danger); }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } }

.sidebar-overlay { display: none; }

@media (max-width: 1180px) {
  .grid-4 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .module-grid { grid-template-columns: 1fr; }
}
@media (max-width: 920px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-brand { min-height: 450px; padding: 42px 28px; }
  .login-benefits { grid-template-columns: 1fr; }
  .login-panel { padding: 24px 18px; }
  .sidebar { transform: translateX(-100%); box-shadow: 25px 0 60px rgba(44,15,20,.2); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-overlay { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(37,13,17,.42); opacity: 0; pointer-events: none; transition: .2s ease; }
  .sidebar-overlay.show { opacity: 1; pointer-events: auto; }
  .main-shell { margin-left: 0; }
  .mobile-menu { display: grid; }
  .hero-card { grid-template-columns: 1fr; }
  .progress-orbit { justify-self: start; width: 150px; height: 150px; }
  .grid-3 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .two-column { grid-template-columns: 1fr; }
  .module-list { max-height: 330px; }
}
@media (max-width: 620px) {
  .content { padding: 20px 14px 42px; }
  .topbar { padding: 0 14px; height: 68px; }
  .package-badge { display: none; }
  .page-head { align-items: flex-start; flex-direction: column; }
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .hero-card { padding: 26px 21px; }
  .progress-orbit { width: 132px; height: 132px; }
  .progress-orbit::before { inset: 12px; }
  .progress-orbit-content strong { font-size: 31px; }
  .module-actions { grid-template-columns: 1fr; }
  .next-module { align-items: flex-start; flex-wrap: wrap; }
  .next-module-media { width: 100%; height: 145px; }
  .admin-form { grid-template-columns: 1fr; }
  .admin-form .full { grid-column: auto; }
  .login-brand h1 { font-size: 43px; }
  .login-brand { min-height: 390px; }
  .login-benefits { display: none; }
  #toast-root { left: 14px; right: 14px; bottom: 14px; }
  .toast { min-width: 0; max-width: none; }
}

/* =========================================================
   MRZ PAYMENT — MIDTRANS CORE API
   Premium custom checkout (maroon + gold)
   ========================================================= */
.mrz-payment-backdrop {
  z-index: 180;
  padding: 22px;
  background:
    radial-gradient(circle at 12% 14%, rgba(201,162,39,.18), transparent 30%),
    rgba(27,7,11,.82);
  backdrop-filter: blur(12px);
}
.mrz-payment-modal {
  width: min(1180px, 100%);
  max-height: 95vh;
  border-radius: 30px;
  overflow: auto;
  background: #fffaf4;
  border: 1px solid rgba(201,162,39,.28);
  box-shadow: 0 34px 100px rgba(0,0,0,.34);
}
.mrz-payment-topbar {
  position: sticky;
  top: 0;
  z-index: 3;
  min-height: 82px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 22px;
  color: #fff;
  background: linear-gradient(135deg, #4b0e19 0%, #6e1423 70%, #7f1b2c 100%);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.mrz-payment-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mrz-payment-logo {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: linear-gradient(145deg, #c9a227, #f1d873);
  color: #4b0e19;
  font-weight: 900;
  letter-spacing: .4px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.38);
}
.mrz-payment-brand div:last-child { display: grid; gap: 3px; }
.mrz-payment-brand span { font-size: 9px; letter-spacing: 1.6px; color: rgba(255,255,255,.64); font-weight: 800; }
.mrz-payment-brand strong { font-size: 15px; }
.mrz-payment-secure {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(236,207,104,.34);
  background: rgba(201,162,39,.12);
  color: #f4d86a;
  padding: 8px 11px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
}
.mrz-payment-close { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); }
.mrz-payment-grid { display: grid; grid-template-columns: .92fr 1.08fr; min-height: 610px; }
.mrz-payment-summary {
  padding: 34px;
  background:
    linear-gradient(180deg, #fff9ef 0%, #f8f0df 100%);
  border-right: 1px solid #eadcc8;
}
.mrz-payment-eyebrow,
.mrz-payment-step {
  display: inline-flex;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.4px;
  color: #8c6b10;
}
.mrz-payment-product { display: flex; align-items: center; gap: 16px; margin-top: 20px; }
.mrz-payment-product img,
.mrz-payment-product-placeholder {
  width: 88px;
  height: 88px;
  flex: 0 0 88px;
  object-fit: cover;
  border-radius: 20px;
  border: 1px solid #eadcc8;
  box-shadow: 0 12px 30px rgba(75,14,25,.09);
  background: #fff;
}
.mrz-payment-product-placeholder {
  display: grid;
  place-items: center;
  color: #4b0e19;
  font-weight: 900;
  background: linear-gradient(145deg, #c9a227, #f2dc80);
}
.mrz-payment-product h2 { margin: 0 0 7px; font-size: 18px; line-height: 1.35; color: #3a171c; }
.mrz-payment-product span { font-size: 11px; color: #8a7169; }
.mrz-payment-price-card {
  margin: 28px 0;
  padding: 20px;
  border-radius: 20px;
  border: 1px solid rgba(201,162,39,.32);
  background: rgba(255,255,255,.72);
  box-shadow: 0 10px 28px rgba(75,14,25,.05);
}
.mrz-payment-price-card > span { display: block; font-size: 10px; color: #8a7169; margin-bottom: 7px; }
.mrz-payment-price-card del { display: block; font-size: 11px; color: #9a8c83; margin-bottom: 3px; }
.mrz-payment-price-card strong { display: block; color: #6e1423; font-size: 30px; letter-spacing: -.7px; }
.mrz-payment-benefit { display: flex; gap: 10px; align-items: flex-start; margin: 13px 0; color: #5d514d; }
.mrz-payment-benefit > span {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #6e1423;
  font-size: 10px;
  font-weight: 900;
}
.mrz-payment-benefit p { margin: 2px 0 0; font-size: 11px; line-height: 1.6; }
.mrz-payment-main { padding: 34px; background: #fff; }
.mrz-payment-heading { margin-bottom: 24px; }
.mrz-payment-heading h2 { margin: 8px 0 7px; color: #38171c; font-size: 24px; letter-spacing: -.35px; }
.mrz-payment-heading p { margin: 0; color: #86736c; font-size: 11px; line-height: 1.65; }
.mrz-payment-form { display: grid; gap: 16px; }
.mrz-payment-field { display: grid; gap: 7px; }
.mrz-payment-field > span,
.mrz-payment-method-label { font-size: 10px; font-weight: 800; color: #5a4642; }
.mrz-payment-field input {
  width: 100%;
  height: 48px;
  border: 1px solid #e8ddd0;
  border-radius: 14px;
  padding: 0 14px;
  color: #2c2220;
  background: #fffdf9;
  outline: none;
  transition: .2s ease;
}
.mrz-payment-field input:focus { border-color: #c9a227; box-shadow: 0 0 0 4px rgba(201,162,39,.12); }
.mrz-payment-method {
  position: relative;
  display: grid;
  grid-template-columns: 62px 1fr 30px;
  align-items: center;
  gap: 14px;
  min-height: 86px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid #e8ddd0;
  background: #fff;
  cursor: pointer;
  transition: .2s ease;
}
.mrz-payment-method.active { border-color: #c9a227; box-shadow: 0 8px 24px rgba(201,162,39,.10); }
.mrz-payment-method input { position: absolute; opacity: 0; pointer-events: none; }
.mrz-payment-method-icon {
  width: 62px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #f6edcf;
  color: #6e1423;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .4px;
}
.mrz-payment-method-copy { display: grid; gap: 4px; }
.mrz-payment-method-copy strong { font-size: 13px; color: #3e1a20; }
.mrz-payment-method-copy small { color: #8a7771; font-size: 10px; line-height: 1.5; }
.mrz-payment-method-check {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #6e1423;
  font-weight: 900;
}
.mrz-payment-trustline { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 13px; background: #faf6ef; color: #74665f; }
.mrz-payment-trustline p { margin: 0; font-size: 10px; line-height: 1.5; }
.mrz-payment-submit {
  min-height: 52px;
  justify-content: center;
  gap: 10px;
  border: 0;
  color: #3f151b !important;
  background: linear-gradient(135deg, #c9a227, #eed36b) !important;
  box-shadow: 0 14px 32px rgba(201,162,39,.26);
  font-weight: 900;
}
.mrz-payment-submit:hover { transform: translateY(-1px); }
.mrz-payment-submit:disabled { opacity: .7; cursor: wait; transform: none; }
.mrz-payment-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(75,14,25,.25);
  border-top-color: #4b0e19;
  border-radius: 50%;
  animation: spin .75s linear infinite;
}
.mrz-payment-footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 22px;
  border-top: 1px solid #eee3d6;
  color: #8a7771;
  background: #fcf8f2;
  font-size: 9px;
}
.mrz-qris-layout { display: grid; grid-template-columns: minmax(250px,.82fr) 1.18fr; gap: 22px; align-items: stretch; }
.mrz-qris-card {
  position: relative;
  padding: 19px;
  border-radius: 24px;
  border: 1px solid rgba(201,162,39,.35);
  background: linear-gradient(180deg,#fffaf0,#f8edd6);
  text-align: center;
}
.mrz-qris-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  padding: 5px 8px;
  border-radius: 999px;
  color: #6e1423;
  background: #f3d96f;
  font-size: 8px;
  font-weight: 900;
}
.mrz-qris-image-wrap { width: min(235px,100%); aspect-ratio: 1; margin: 20px auto 15px; padding: 12px; border-radius: 18px; background: #fff; box-shadow: 0 12px 30px rgba(75,14,25,.08); }
.mrz-qris-image { width: 100%; height: 100%; object-fit: contain; }
.mrz-qris-card > strong { display: block; color: #6e1423; font-size: 24px; }
.mrz-qris-card > span { display: block; margin-top: 5px; color: #8b7770; font-size: 9px; overflow-wrap: anywhere; }
.mrz-qris-info { display: flex; flex-direction: column; gap: 12px; }
.mrz-payment-status {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 13px 15px;
  border-radius: 17px;
  border: 1px solid #f0dfad;
  background: #fff9e8;
}
.mrz-payment-status-dot {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border-radius: 50%;
  background: #d2aa25;
  box-shadow: 0 0 0 6px rgba(210,170,37,.14);
  animation: mrzPayPulse 1.6s ease infinite;
}
@keyframes mrzPayPulse { 50% { box-shadow: 0 0 0 10px rgba(210,170,37,.04); } }
.mrz-payment-status div { display: grid; gap: 3px; }
.mrz-payment-status strong { font-size: 12px; color: #4d332d; }
.mrz-payment-status small { color: #8b7770; font-size: 9px; }
.mrz-payment-status.success { border-color: #b8dfc4; background: #eff9f2; }
.mrz-payment-status.failed { border-color: #ecc6ca; background: #fff2f3; }
.mrz-payment-status-check {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #2f7d4b;
  font-weight: 900;
}
.mrz-payment-status.failed .mrz-payment-status-check { background: #b53b47; }
.mrz-qris-instruction { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; padding: 9px 0; border-bottom: 1px dashed #eadfd5; }
.mrz-qris-instruction > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 10px; color: #6e1423; background: #f6edcf; font-size: 10px; font-weight: 900; }
.mrz-qris-instruction p { margin: 4px 0 0; color: #665853; font-size: 10px; line-height: 1.55; }
.mrz-payment-secondary,
.mrz-payment-ghost { min-height: 45px; justify-content: center; font-weight: 800; }
.mrz-payment-secondary { background: #6e1423; color: #fff; border-color: #6e1423; }
.mrz-payment-ghost { background: #fff; color: #6e1423; border-color: #dac9ba; }
.mrz-payment-legacy { min-height: 360px; display: grid; align-content: center; justify-items: center; text-align: center; gap: 10px; padding: 30px; border-radius: 22px; border: 1px dashed #d8c7b5; background: #fffaf3; }
.mrz-payment-legacy-icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 20px; color: #6e1423; background: #f6edcf; font-size: 26px; }
.mrz-payment-legacy strong { font-size: 17px; color: #3e1a20; }
.mrz-payment-legacy p { max-width: 480px; margin: 0 0 8px; color: #83716a; font-size: 11px; line-height: 1.65; }
.mrz-pay-success { min-height: 320px; display: grid; align-content: center; justify-items: center; text-align: center; }
.mrz-pay-success-icon { width: 70px; height: 70px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #2f7d4b; font-size: 34px; font-weight: 900; box-shadow: 0 15px 35px rgba(47,125,75,.25); }
.mrz-pay-success h3 { margin: 17px 0 6px; color: #2e181c; font-size: 21px; }
.mrz-pay-success p { margin: 0; color: #7b6b65; font-size: 11px; }

@media (max-width: 900px) {
  .mrz-payment-grid { grid-template-columns: 1fr; }
  .mrz-payment-summary { border-right: 0; border-bottom: 1px solid #eadcc8; }
  .mrz-payment-summary { padding: 25px; }
  .mrz-payment-main { padding: 25px; }
}
@media (max-width: 620px) {
  .mrz-payment-backdrop { padding: 0; }
  .mrz-payment-modal { width: 100%; max-height: 100vh; min-height: 100vh; border-radius: 0; border: 0; }
  .mrz-payment-topbar { min-height: 70px; padding: 12px 14px; }
  .mrz-payment-secure { display: none; }
  .mrz-payment-logo { width: 42px; height: 42px; flex-basis: 42px; border-radius: 13px; }
  .mrz-payment-summary { padding: 20px 16px; }
  .mrz-payment-product img,
  .mrz-payment-product-placeholder { width: 72px; height: 72px; flex-basis: 72px; border-radius: 16px; }
  .mrz-payment-price-card { margin: 20px 0; }
  .mrz-payment-price-card strong { font-size: 25px; }
  .mrz-payment-main { padding: 22px 16px 28px; }
  .mrz-payment-heading h2 { font-size: 21px; }
  .mrz-qris-layout { grid-template-columns: 1fr; }
  .mrz-qris-image-wrap { width: min(250px,85vw); }
  .mrz-payment-footer { padding: 11px 14px; }
}

/* =========================================================
   MRZ PRODUCT CATALOG & VOICE OVER PRO — RESTORED
   Dikembalikan setelah integrasi Midtrans Core API.
   ========================================================= */
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  padding: 5px;
  margin-bottom: 22px;
  border-radius: 14px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
}
.auth-tab {
  border: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.auth-tab.active { background: #fff; color: var(--primary); box-shadow: 0 5px 18px rgba(74,31,35,.08); }

.catalog-hero {
  margin-bottom: 20px;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  color: #fff;
  background:
    radial-gradient(circle at 86% 20%, rgba(81,191,255,.2), transparent 28%),
    radial-gradient(circle at 72% 88%, rgba(151,73,255,.22), transparent 30%),
    linear-gradient(135deg,#08101c,#10172a 55%,#180c2a);
  border-color: rgba(255,255,255,.08);
  overflow: hidden;
}
.catalog-hero h2 { margin: 8px 0 10px; max-width: 720px; font-size: clamp(25px,3vw,40px); line-height: 1.12; }
.catalog-hero p { max-width: 700px; margin: 0; color: rgba(255,255,255,.7); line-height: 1.7; font-size: 13px; }
.catalog-stat { min-width: 145px; aspect-ratio: 1; border-radius: 28px; display: grid; place-content: center; text-align: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(8px); }
.catalog-stat strong { font-size: 42px; color: #71d7ff; }
.catalog-stat span { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.7); }

.tool-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.tool-grid-home { grid-template-columns: repeat(3,minmax(0,1fr)); }
.tool-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; min-height: 100%; }
.tool-card-media { height: 220px; position: relative; overflow: hidden; display: grid; place-items: center; background: #06101d; color: #72d7ff; }
.tool-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.tool-card:hover .tool-card-media img { transform: scale(1.035); }
.access-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 7px 10px; font-size: 9px; font-weight: 850; letter-spacing: .06em; }
.tool-card-media .access-badge { position: absolute; top: 14px; right: 14px; backdrop-filter: blur(10px); }
.access-badge.open { background: rgba(49,159,92,.9); color: #fff; }
.access-badge.locked { background: rgba(255,255,255,.88); color: var(--primary); }
.tool-card-body { padding: 19px; display: flex; flex-direction: column; flex: 1; }
.tool-type { color: var(--accent); font-size: 9px; font-weight: 850; letter-spacing: .13em; }
.tool-card h3 { margin: 8px 0; font-size: 18px; }
.tool-card p { margin: 0 0 18px; color: var(--muted); line-height: 1.7; font-size: 11px; flex: 1; }
.price-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.price-row > div { display: grid; gap: 2px; }
.price-row del { color: var(--muted); font-size: 10px; }
.price-row strong { color: var(--primary); font-size: 17px; }
.price-row .btn { padding-inline: 12px; }

.tool-page-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 13px; }
.back-link { border: 0; background: transparent; color: var(--primary); font-size: 11px; font-weight: 800; cursor: pointer; padding: 7px 0; }
.tool-hero {
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(320px,.9fr);
  overflow: hidden;
  background: linear-gradient(135deg,#07101d,#111a31 58%,#1c0b35);
  border-color: rgba(255,255,255,.08);
  color: #fff;
}
.tool-hero-copy { padding: clamp(28px,4vw,55px); align-self: center; }
.tool-hero h1 { margin: 9px 0 14px; font-size: clamp(31px,4vw,54px); line-height: 1.08; max-width: 760px; }
.tool-hero-copy > p { max-width: 690px; margin: 0; color: rgba(255,255,255,.7); line-height: 1.75; font-size: 13px; }
.tool-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.tool-hero .btn-outline { border-color: rgba(255,255,255,.3); color: #fff; }
.tool-hero .btn-outline:hover { background: rgba(255,255,255,.08); }
.tool-hero .btn-maroon {
  background: linear-gradient(135deg, #8a172d, #65101f);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
  box-shadow: 0 11px 24px rgba(71,10,23,.28);
}
.tool-hero .btn-maroon:hover { background: linear-gradient(135deg, #981b33, #721224); }
.tool-hero-media { min-height: 430px; display: grid; place-items: center; overflow: hidden; background: rgba(0,0,0,.15); }
.tool-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.price-stack { display: flex; align-items: baseline; gap: 10px; margin-top: 22px; }
.price-stack del { color: rgba(255,255,255,.45); font-size: 12px; }
.price-stack strong { color: #75d9ff; font-size: 25px; }
.price-stack span { color: rgba(255,255,255,.55); font-size: 10px; }

.tool-tabs { display: flex; gap: 8px; margin: 17px 0; padding: 7px; border: 1px solid var(--line); border-radius: 16px; background: #fff; position: sticky; top: 76px; z-index: 10; box-shadow: var(--shadow-soft); }
.tool-tab { flex: 1; border: 0; border-radius: 11px; padding: 12px 14px; color: var(--muted); background: transparent; font-size: 11px; font-weight: 850; cursor: pointer; }
.tool-tab.active { color: #fff; background: var(--primary); }
.tool-detail-stack { display: grid; gap: 18px; }
.sample-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; }
.sample-card { display: flex; gap: 14px; align-items: flex-start; padding: 18px; }
.sample-icon { flex: 0 0 43px; width: 43px; height: 43px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: linear-gradient(135deg,#168bd2,#7a45ef); }
.sample-card h3 { margin: 0 0 6px; font-size: 14px; }
.sample-card p { margin: 0 0 12px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.sample-card audio { width: 100%; height: 38px; }
.sample-placeholder { display: inline-flex; border-radius: 9px; padding: 7px 9px; color: #7d6410; background: var(--accent-soft); font-size: 9px; font-weight: 750; }
.info-split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.card-pad { padding: 23px; }
.card-pad > h2 { margin: 0 0 17px; font-size: 18px; }
.benefit-list { display: grid; gap: 12px; }
.benefit-list > div { display: flex; gap: 10px; align-items: flex-start; }
.benefit-list span { flex: 0 0 24px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-weight: 850; font-size: 10px; }
.benefit-list p { margin: 2px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.benefit-list.audience span { color: #725900; background: var(--accent-soft); }
.purchase-banner { padding: 27px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #fff; background: linear-gradient(120deg,var(--primary-dark),var(--primary)); border-color: transparent; }
.purchase-banner h2 { margin: 7px 0; font-size: 24px; }
.purchase-banner p { margin: 0; color: rgba(255,255,255,.75); font-size: 12px; }
.purchase-banner strong { color: #f5d76c; }

.tool-module-list { display: grid; gap: 12px; }
.tool-module { padding: 18px; display: grid; grid-template-columns: 54px minmax(0,1fr) auto; align-items: center; gap: 17px; }
.tool-module.locked { background: #fbf8f5; }
.tool-module-number { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 16px; color: var(--primary); background: var(--primary-soft); font-weight: 850; }
.tool-module-meta { display: flex; gap: 11px; flex-wrap: wrap; margin-bottom: 5px; color: var(--accent); font-size: 8px; font-weight: 850; letter-spacing: .08em; }
.tool-module h3 { margin: 0 0 5px; font-size: 15px; }
.tool-module p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.tool-module-actions { display: flex; gap: 8px; align-items: center; }
.launch-panel { padding: clamp(38px,7vw,78px); text-align: center; }
.launch-icon { width: 78px; height: 78px; margin: 0 auto 18px; border-radius: 25px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.launch-icon svg { width: 30px; height: 30px; }
.launch-panel h2 { margin: 10px 0; font-size: clamp(25px,3vw,38px); }
.launch-panel p { max-width: 660px; margin: 0 auto 22px; color: var(--muted); font-size: 12px; line-height: 1.75; }
.launch-price { display: grid; justify-content: center; margin-bottom: 16px; }
.launch-price del { color: var(--muted); font-size: 11px; }
.launch-price strong { color: var(--primary); font-size: 29px; }

.buyer-community-card {
  width: min(100%, 760px);
  margin: 28px auto 0;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 14px;
  text-align: left;
  border: 1px solid #dfe9e2;
  border-radius: 18px;
  background: linear-gradient(135deg,#f7fcf8,#ffffff);
  box-shadow: 0 10px 28px rgba(25,95,55,.07);
}
.buyer-community-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: #fff;
  background: #1f9d55;
}
.buyer-community-copy { min-width: 0; }
.buyer-community-copy strong { display: block; color: var(--text); font-size: 13px; }
.buyer-community-copy span { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.btn-whatsapp {
  white-space: nowrap;
  background: #1f9d55;
  color: #fff;
  box-shadow: 0 10px 22px rgba(31,157,85,.2);
}
.btn-whatsapp:hover { background: #178447; }

.bundle-group-area {
  width: min(100%, 820px);
  margin: 24px auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.bundle-group-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
}
.bundle-group-label svg {
  width: 16px;
  height: 16px;
  color: #1f9d55;
}
.bundle-group-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.bundle-group-actions .btn-whatsapp {
  min-width: 220px;
}
.loading-panel { min-height: 390px; display: grid; place-content: center; justify-items: center; gap: 14px; }
.loading-panel p { color: var(--muted); font-size: 11px; }

.purchase-modal { width: min(100%,680px); }
.purchase-body { display: grid; gap: 18px; }
.checkout-summary { display: grid; grid-template-columns: 145px 1fr; align-items: center; gap: 18px; padding: 14px; border-radius: 18px; color: #fff; background: linear-gradient(135deg,#07101d,#1d0d34); }
.checkout-summary img { width: 145px; height: 145px; border-radius: 14px; object-fit: cover; }
.checkout-summary del { display: block; color: rgba(255,255,255,.45); font-size: 11px; }
.checkout-summary strong { display: block; color: #78ddff; font-size: 26px; margin: 3px 0; }
.checkout-summary p { margin: 0; color: rgba(255,255,255,.65); font-size: 10px; }
.checkout-note { margin-bottom: 14px; padding: 11px 13px; border-radius: 12px; color: #745d10; background: var(--accent-soft); font-size: 10px; line-height: 1.6; }
.order-success { padding: 25px; text-align: center; border-radius: 18px; background: #effaf3; border: 1px solid #cbe8d5; }
.order-success > span { width: 48px; height: 48px; margin: 0 auto 10px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--success); font-size: 20px; }
.order-success h3 { margin: 0 0 10px; }
.order-success p { margin: 5px 0; font-size: 11px; }
.order-success small { display: block; margin-top: 11px; color: var(--muted); }

@media (max-width: 1120px) {
  .tool-grid, .tool-grid-home { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .tool-hero { grid-template-columns: 1fr; }
  .tool-hero-media { min-height: 340px; max-height: 520px; }
  .sample-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .catalog-hero { align-items: flex-start; flex-direction: column; }
  .catalog-stat { min-width: 115px; }
  .tool-grid, .tool-grid-home, .sample-grid, .info-split { grid-template-columns: 1fr; }
  .tool-card-media { height: 250px; }
  .tool-tabs { top: 67px; overflow-x: auto; }
  .tool-tab { min-width: 115px; }
  .tool-module { grid-template-columns: 45px minmax(0,1fr); }
  .tool-module-number { width: 43px; height: 43px; }
  .tool-module-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .purchase-banner { align-items: flex-start; flex-direction: column; }
  .checkout-summary { grid-template-columns: 100px 1fr; }
  .checkout-summary img { width: 100px; height: 100px; }
}
@media (max-width: 700px) {
  .buyer-community-card {
    grid-template-columns: auto minmax(0,1fr);
  }
  .buyer-community-card .btn-whatsapp {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (max-width: 470px) {
  .tool-hero-copy { padding: 27px 20px; }
  .tool-hero-media { min-height: 280px; }
  .tool-page-head { align-items: flex-start; }
  .price-row { align-items: stretch; flex-direction: column; }
  .price-row .btn { width: 100%; }
  .checkout-summary { grid-template-columns: 1fr; }
  .checkout-summary img { width: 100%; height: 220px; }
}

/* =========================================================
   MRZ TOOL SAMPLE PREVIEW — COMPACT PREMIUM V14
   Card mengikuti isi, tidak dipaksa tinggi.
   ========================================================= */

.sample-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.sample-card {
  min-width: 0;
  min-height: 0 !important;
  height: auto !important;
  padding: 14px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  align-items: start !important;
  gap: 12px !important;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0%, rgba(201,162,39,.07), transparent 26%),
    #fff;
  box-shadow: 0 8px 24px rgba(74,31,35,.055);
}

.sample-card-head {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  align-items: center;
  gap: 11px;
}

.sample-card-head .sample-icon,
.sample-icon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(135deg,#367de8,#7650ea);
  box-shadow: 0 7px 18px rgba(70,80,190,.18);
}

.sample-copy {
  min-width: 0;
  padding: 0;
}

.sample-label {
  display: block;
  margin: 0 0 3px;
  color: var(--primary);
  font-size: 8px;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.sample-card .sample-copy h3,
.sample-card h3 {
  margin: 0 0 3px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: -.01em;
}

.sample-card .sample-copy p,
.sample-card p {
  margin: 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.5;
}

.sample-card > [data-sample-video],
.sample-card > [data-sample-image],
.sample-card > .premium-audio-player {
  width: 100%;
  min-width: 0;
  margin-top: 1px;
}

/* Preview image / video tetap jelas tetapi tidak membuat card raksasa. */
.sample-card [data-sample-image] img,
.sample-card [data-sample-video] img,
.sample-card [data-sample-video] video,
.sample-card [data-sample-image] video {
  width: 100%;
  max-height: 170px;
  object-fit: cover;
  border-radius: 15px;
}

.sample-card .sample-placeholder {
  width: 100%;
  min-height: 0 !important;
  height: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 11px;
  border-radius: 10px;
  text-align: center;
  color: #7d6410;
  background: var(--accent-soft);
  font-size: 9px;
  font-weight: 800;
}

/* Custom audio player — compact premium. */
.premium-audio-player {
  position: relative;
  isolation: isolate;
  min-height: 104px !important;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px !important;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  color: #fff;
  background:
    radial-gradient(circle at 88% 14%, rgba(201,162,39,.20), transparent 32%),
    linear-gradient(135deg, #220a12, #651526 72%, #7a1d30);
  box-shadow: 0 11px 28px rgba(48,10,20,.15);
}

.premium-audio-player::after {
  content: "";
  position: absolute;
  width: 130px;
  height: 130px;
  right: -65px;
  bottom: -82px;
  border-radius: 50%;
  border: 23px solid rgba(255,255,255,.035);
  z-index: -1;
}

.premium-audio-player > audio {
  display: none !important;
}

.audio-play-button {
  position: relative;
  z-index: 1;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 14px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--primary-dark);
  background: linear-gradient(135deg, #d9b126, #f3d967);
  box-shadow: 0 8px 20px rgba(0,0,0,.22);
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  transition: transform .16s ease, box-shadow .16s ease;
}

.audio-play-button:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

.audio-player-main {
  position: relative;
  z-index: 1;
  min-width: 0;
  flex: 1;
}

.audio-player-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.audio-status {
  overflow: hidden;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.audio-duration {
  flex: 0 0 auto;
  color: rgba(255,255,255,.67);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}

.audio-progress {
  --audio-progress: 0%;
  width: 100% !important;
  height: 5px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  outline: none !important;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background: linear-gradient(
    90deg,
    #f0cf54 0%,
    #f0cf54 var(--audio-progress),
    rgba(255,255,255,.19) var(--audio-progress),
    rgba(255,255,255,.19) 100%
  ) !important;
  box-shadow: none !important;
}

.audio-progress::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  border: 3px solid #fff;
  border-radius: 50%;
  appearance: none;
  -webkit-appearance: none;
  background: #e0ba2d;
  box-shadow: 0 3px 9px rgba(0,0,0,.25);
}

.audio-progress::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #e0ba2d;
  box-shadow: 0 3px 9px rgba(0,0,0,.25);
}

.audio-wave {
  height: 22px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 3px;
  overflow: hidden;
  opacity: .68;
}

.audio-wave i {
  flex: 1 1 0;
  min-width: 2px;
  max-width: 4px;
  height: calc(4px + (var(--bar) * 2px));
  border-radius: 999px;
  background: linear-gradient(180deg, #f1d363, rgba(255,255,255,.42));
}

@media (max-width: 980px) {
  .sample-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 620px) {
  .sample-grid {
    grid-template-columns: 1fr;
  }

  .sample-card {
    padding: 13px !important;
  }

  .premium-audio-player {
    min-height: 98px !important;
  }
}



/* =========================================================
   MRZ SAMPLE MEDIA HARD FIX — V15
   Mengalahkan inline aspect-ratio/height dari app.js.
   ========================================================= */

/* Jangan biarkan style height:100% di renderToolSummary memanjangkan card. */
.sample-grid.sample-grid-count-1 .sample-card,
.sample-grid.sample-grid-count-2 .sample-card,
.sample-grid.sample-grid-count-3 .sample-card {
  height: auto !important;
  min-height: 0 !important;
  align-self: start !important;
}

/* Semua media dibuat satu rasio supaya 3 contoh hasil terlihat konsisten. */
.sample-card > [data-sample-image],
.sample-card > [data-sample-video] {
  width: 100% !important;
  height: 178px !important;
  min-height: 0 !important;
  max-height: 178px !important;
  aspect-ratio: auto !important;
  border-radius: 15px !important;
  box-shadow: 0 8px 20px rgba(48,10,20,.10) !important;
}

/* Inline absolute image tetap mengikuti container yang sudah diperkecil. */
.sample-card > [data-sample-image] > img,
.sample-card > [data-sample-video] > img,
.sample-card > [data-sample-image] > video,
.sample-card > [data-sample-video] > video {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
}

/* CTA overlay lebih ringkas agar tidak menutupi terlalu banyak preview. */
.sample-card > [data-sample-image] > span:last-child,
.sample-card > [data-sample-video] > span:last-child {
  left: 12px !important;
  right: 12px !important;
  bottom: 11px !important;
  gap: 9px !important;
}

.sample-card > [data-sample-image] > span:last-child > span:first-child,
.sample-card > [data-sample-video] > span:last-child > span:first-child {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  border-radius: 12px !important;
}

.sample-card > [data-sample-image] > span:last-child strong,
.sample-card > [data-sample-video] > span:last-child strong {
  font-size: 12px !important;
}

.sample-card > [data-sample-image] > span:last-child small,
.sample-card > [data-sample-video] > span:last-child small {
  font-size: 9px !important;
}

/* Header diringkas supaya fokus utama tetap ke hasil. */
.sample-card-head {
  min-height: 44px;
}

.sample-card-head .sample-icon,
.sample-icon {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
  border-radius: 12px;
}

.sample-card .sample-copy h3,
.sample-card h3 {
  font-size: 12px;
}

/* Tiga card desktop selalu terasa satu sistem visual. */
@media (min-width: 901px) {
  .sample-grid.sample-grid-count-3 {
    align-items: start !important;
  }

  .sample-grid.sample-grid-count-3 .sample-card {
    padding: 12px !important;
    gap: 10px !important;
  }
}

@media (max-width: 620px) {
  .sample-card > [data-sample-image],
  .sample-card > [data-sample-video] {
    height: 190px !important;
    max-height: 190px !important;
  }
}


/* =========================================================
   MRZ ADMIN — PROFESSIONAL UI V15
   Dashboard stat navigation + tables + tools editor
   ========================================================= */

.admin-page-head {
  align-items: center;
}

/* Main admin navigation */
.admin-tabs {
  display: flex;
  align-items: stretch;
  gap: 9px;
  padding: 10px;
  margin-bottom: 20px;
  overflow-x: auto;
  scrollbar-width: none;
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    radial-gradient(circle at 0 0, rgba(201,162,39,.055), transparent 25%),
    #fff;
  box-shadow: 0 7px 22px rgba(74,31,35,.045);
}

.admin-tabs::-webkit-scrollbar {
  display: none;
}

/* Base tab */
.admin-tab {
  position: relative;
  flex: 0 0 auto;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 13px;
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: transparent;
  color: #685b56;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition:
    color .18s ease,
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.admin-tab:hover {
  color: var(--primary);
  background: #fcf8f4;
  border-color: #eee5dc;
  transform: translateY(-1px);
}

.admin-tab.active {
  color: #fff;
  border-color: var(--primary);
  background:
    linear-gradient(135deg, #7a1729, var(--primary-dark));
  box-shadow: 0 9px 22px rgba(110,20,35,.20);
}

/*
  Tiga item pertama adalah ringkasan:
  Pesanan / Akses Tools / Member.
  Count dibuat sebagai badge nyata, bukan angka kecil menggantung.
*/
.admin-tab:nth-child(-n+3) {
  min-width: 138px;
  justify-content: flex-start;
  padding: 9px 11px 9px 13px;
  border-color: #ece3da;
  background: linear-gradient(180deg,#fff,#fdfaf7);
  color: #594c48;
  box-shadow: 0 3px 10px rgba(74,31,35,.035);
}

.admin-tab:nth-child(-n+3):hover {
  border-color: rgba(201,162,39,.48);
  background: #fffdf8;
}

/* Mendukung count dengan class nav-count maupun span biasa di dalam button. */
.admin-tab:nth-child(-n+3) .nav-count,
.admin-tab:nth-child(-n+3) > span {
  margin-left: auto;
  min-width: 38px;
  height: 30px;
  padding: 0 9px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #ead9a0;
  border-radius: 10px;
  color: #765d00;
  background: linear-gradient(145deg,#fbf2d7,#f3e4ae);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

.admin-tab:nth-child(-n+3).active {
  color: #fff;
  border-color: var(--primary);
  background: linear-gradient(135deg,#7c192b,#500e1a);
}

.admin-tab:nth-child(-n+3).active .nav-count,
.admin-tab:nth-child(-n+3).active > span {
  color: #4b0e19;
  border-color: rgba(255,255,255,.24);
  background: linear-gradient(145deg,#e3bd3a,#f4db7e);
}

/* Menu operasional sesudah 3 summary cards */
.admin-tab:nth-child(n+4) {
  padding-left: 16px;
  padding-right: 16px;
}

/* Summary cards apabila halaman memakai admin-summary-grid */
.admin-summary-grid {
  gap: 14px !important;
}

.admin-summary-grid .stat-card {
  min-width: 0;
  min-height: 92px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(201,162,39,.07), transparent 30%),
    #fff;
  box-shadow: 0 6px 20px rgba(74,31,35,.045);
}

.admin-summary-grid .stat-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
}

.admin-summary-grid .stat-copy span {
  font-size: 10px;
  font-weight: 700;
}

.admin-summary-grid .stat-copy strong {
  margin-top: 3px;
  font-size: 22px;
}

/* Search / toolbar */
.admin-table-card {
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 8px 25px rgba(74,31,35,.05);
}

.admin-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 19px 21px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 92% -20%, rgba(201,162,39,.10), transparent 34%),
    #fff;
}

.admin-table-head h2 {
  margin: 0;
  color: #372927;
  font-size: 17px;
  letter-spacing: -.025em;
}

.admin-table-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
}

.admin-table-head > span {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 7px 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ead9a0;
  border-radius: 999px;
  color: #765d00;
  background: #faf1d6;
  font-size: 9px;
  font-weight: 850;
}

.admin-table-wrap {
  width: 100%;
  overflow-x: auto;
  background: #fff;
}

.admin-table {
  width: 100%;
  min-width: 980px;
  border-collapse: separate;
  border-spacing: 0;
}

.admin-table th,
.admin-table td {
  padding: 14px 16px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid #eee7df;
}

.admin-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: #796a64;
  background: #fbf8f4;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.admin-table td {
  color: var(--text);
  background: #fff;
  font-size: 10px;
  line-height: 1.45;
  transition: background .16s ease;
}

.admin-table tbody tr:last-child td {
  border-bottom: 0;
}

.admin-table tbody tr:hover td {
  background: #fdfaf7;
}

.admin-table td strong {
  display: block;
  margin-bottom: 3px;
  color: #382b28;
  font-size: 11px;
  font-weight: 850;
}

.admin-table td small {
  display: block;
  max-width: 240px;
  color: #8b7c76;
  font-size: 9px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* Status */
.admin-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  min-height: 28px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .05em;
}

.admin-status.success {
  color: #23623b;
  background: #e8f6ed;
  border: 1px solid #c8e8d2;
}

.admin-status.warning {
  color: #835800;
  background: #fff6dc;
  border: 1px solid #f0dc9c;
}

.admin-status.danger {
  color: #982d39;
  background: #fff0f1;
  border: 1px solid #f0c8cc;
}

/* Admin buttons */
.admin-action-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.admin-action {
  min-height: 35px;
  padding: 8px 12px;
  border-radius: 11px;
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
}

.admin-action.btn-primary,
.admin-action.btn-maroon {
  box-shadow: 0 6px 16px rgba(110,20,35,.13);
}

/* Loading */
.admin-loading {
  min-height: 200px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 28px;
}

.admin-loading .loader {
  width: 42px;
  height: 42px;
}

.admin-loading p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
}

/* =========================================================
   KELOLA TOOLS
   ========================================================= */

.admin-tools-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.admin-tool-editor {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 7px 22px rgba(74,31,35,.045);
}

.admin-tool-editor > .admin-table-head {
  margin: -24px -24px 20px !important;
  padding: 18px 21px;
  background:
    radial-gradient(circle at 90% 0%, rgba(201,162,39,.11), transparent 31%),
    #fff;
}

.admin-tool-editor .admin-form {
  gap: 12px;
}

.admin-tool-editor .admin-form > div {
  min-width: 0;
}

.admin-tool-editor input,
.admin-tool-editor select,
.admin-tool-editor textarea {
  border-color: #e8dfd7;
  background: #fffdfb;
}

.admin-tool-editor input,
.admin-tool-editor select {
  min-height: 43px;
  font-size: 10px;
}

.admin-tool-editor textarea {
  min-height: 120px;
  font-size: 10px;
}

.admin-tool-editor .admin-form label {
  margin-bottom: 6px;
  color: #5b4d49;
  font-size: 10px;
  font-weight: 800;
}

.admin-tool-editor .btn {
  min-height: 40px;
  border-radius: 12px;
  font-size: 10px;
}

/* Form cards */
.admin-form {
  gap: 13px;
}

.admin-form input,
.admin-form select,
.admin-form textarea {
  background: #fffdfb;
}

.admin-form input:disabled,
.admin-form select:disabled,
.admin-form textarea:disabled {
  color: #8f827c;
  background: #f5f0eb;
  cursor: not-allowed;
}

/* Tool listing — membantu card/card-grid yang dipakai halaman admin */
.admin-page-head + .card,
.admin-tabs + .card {
  border-color: #e9e1d8;
}

/* Search fields di admin terlihat seperti command bar */
.admin-tabs + .card input[type="search"],
.admin-tabs + .card input[placeholder*="Cari"],
.admin-tabs + .card input[placeholder*="cari"] {
  min-height: 46px;
  border-radius: 14px;
  background: #fff;
}

/* Tool cards compact apabila menggunakan tool-card dalam area admin */
.admin-tools-grid .tool-card,
.admin-table-card .tool-card {
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 5px 18px rgba(74,31,35,.04);
}

.admin-tools-grid .tool-card-body,
.admin-table-card .tool-card-body {
  padding: 15px;
}

.admin-tools-grid .tool-card h3,
.admin-table-card .tool-card h3 {
  margin: 5px 0;
  font-size: 14px;
}

.admin-tools-grid .tool-card p,
.admin-table-card .tool-card p {
  margin-bottom: 10px;
  font-size: 9px;
}

/* Responsive */
@media (max-width: 1180px) {
  .admin-tools-grid {
    grid-template-columns: 1fr;
  }

  .admin-table {
    min-width: 900px;
  }

  .admin-tab:nth-child(-n+3) {
    min-width: 126px;
  }
}

@media (max-width: 900px) {
  .admin-tabs {
    padding: 8px;
  }

  .admin-tab:nth-child(-n+3) {
    min-width: 120px;
  }
}

@media (max-width: 760px) {
  .admin-tabs {
    margin-left: -2px;
    margin-right: -2px;
    gap: 7px;
  }

  .admin-tab {
    min-height: 41px;
    padding: 9px 12px;
    font-size: 10px;
  }

  .admin-tab:nth-child(-n+3) {
    min-width: 112px;
  }

  .admin-tab:nth-child(-n+3) .nav-count,
  .admin-tab:nth-child(-n+3) > span {
    min-width: 32px;
    height: 27px;
    font-size: 11px;
  }

  .admin-table-head {
    align-items: flex-start;
    flex-direction: column;
    padding: 17px;
  }

  .admin-table-wrap {
    margin: 0;
  }

  .admin-table th,
  .admin-table td {
    padding: 11px 12px;
  }

  .admin-action-group {
    min-width: 145px;
  }
}

@media (max-width: 540px) {
  .admin-tabs {
    border-radius: 16px;
  }

  .admin-tab:nth-child(-n+3) {
    min-width: 106px;
  }
}


/* =========================================================
   MRZ PREMIUM APP LOADING — V16
   Full-screen branded loader + improved compact loader.
   ========================================================= */

.loading-screen.mrz-app-loading {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    radial-gradient(circle at 18% 18%, rgba(201,162,39,.12), transparent 28%),
    radial-gradient(circle at 84% 82%, rgba(110,20,35,.10), transparent 31%),
    linear-gradient(145deg, #fbf8f3 0%, #f7f2ec 48%, #fbf9f5 100%);
}

.mrz-app-loading::before {
  content: "";
  position: absolute;
  z-index: -2;
  width: min(64vw, 720px);
  height: min(64vw, 720px);
  border-radius: 50%;
  border: 1px solid rgba(110,20,35,.055);
  box-shadow:
    0 0 0 70px rgba(110,20,35,.018),
    0 0 0 140px rgba(201,162,39,.018);
  animation: mrzLoaderBackdropFloat 7s ease-in-out infinite alternate;
}

.mrz-loader-ambient {
  position: absolute;
  z-index: -1;
  border-radius: 999px;
  filter: blur(4px);
  opacity: .7;
  pointer-events: none;
}

.mrz-loader-ambient-one {
  width: 190px;
  height: 190px;
  top: 12%;
  left: 11%;
  background: radial-gradient(circle, rgba(201,162,39,.14), transparent 68%);
  animation: mrzLoaderAmbientOne 8s ease-in-out infinite alternate;
}

.mrz-loader-ambient-two {
  width: 260px;
  height: 260px;
  right: 8%;
  bottom: 7%;
  background: radial-gradient(circle, rgba(110,20,35,.11), transparent 68%);
  animation: mrzLoaderAmbientTwo 9s ease-in-out infinite alternate;
}

.mrz-loader-card {
  width: min(92vw, 430px);
  min-height: 380px;
  padding: 40px 38px 31px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid rgba(231,220,209,.92);
  border-radius: 30px;
  background:
    radial-gradient(circle at 100% 0%, rgba(201,162,39,.10), transparent 31%),
    rgba(255,255,255,.90);
  box-shadow:
    0 28px 70px rgba(75,14,25,.10),
    0 8px 24px rgba(75,14,25,.045),
    inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter: blur(18px);
  animation: mrzLoaderCardIn .42s cubic-bezier(.2,.8,.2,1) both;
}

.mrz-loader-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--primary), transparent);
  opacity: .9;
}

.mrz-loader-card::after {
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  right: -105px;
  bottom: -110px;
  border: 26px solid rgba(110,20,35,.028);
  border-radius: 50%;
  pointer-events: none;
}

.mrz-loader-orbit {
  width: 104px;
  height: 104px;
  position: relative;
  display: grid;
  place-items: center;
  margin: 1px auto 25px;
  border-radius: 50%;
}

.mrz-loader-orbit::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    conic-gradient(
      from 10deg,
      transparent 0 14%,
      var(--primary) 14% 37%,
      var(--accent) 37% 58%,
      rgba(110,20,35,.12) 58% 77%,
      transparent 77% 100%
    );
  animation: mrzLoaderOrbit 1.45s linear infinite;
  box-shadow: 0 10px 30px rgba(110,20,35,.10);
}

.mrz-loader-orbit::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: inherit;
  background: rgba(255,255,255,.97);
  box-shadow: inset 0 0 0 1px rgba(232,223,214,.95);
}

.mrz-loader-brand {
  position: relative;
  z-index: 2;
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 21px;
  color: var(--primary-dark);
  background: linear-gradient(145deg, #c9a227 0%, #f4d96f 62%, #e1bd3e 100%);
  box-shadow:
    0 13px 29px rgba(110,20,35,.16),
    inset 0 1px 0 rgba(255,255,255,.65);
  font-size: 19px;
  font-weight: 950;
  letter-spacing: -.04em;
  animation: mrzLoaderBrandBreath 2.1s ease-in-out infinite;
}

.mrz-loader-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 25px;
  padding: 6px 10px;
  border: 1px solid rgba(201,162,39,.25);
  border-radius: 999px;
  color: #8a6b10;
  background: rgba(246,237,207,.58);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .15em;
}

.mrz-loader-card h2 {
  margin: 14px 0 8px;
  color: #342523;
  font-size: clamp(20px, 4vw, 25px);
  line-height: 1.18;
  letter-spacing: -.035em;
}

.mrz-loader-card > p {
  max-width: 330px;
  margin: 0;
  color: #82736d;
  font-size: 11px;
  line-height: 1.7;
}

.mrz-loader-track {
  width: 100%;
  height: 7px;
  margin: 25px 0 16px;
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  background: #eee6df;
  box-shadow: inset 0 1px 2px rgba(75,14,25,.055);
}

.mrz-loader-track > span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -42%;
  width: 42%;
  border-radius: inherit;
  background:
    linear-gradient(90deg, var(--primary), #9a3044 50%, var(--accent));
  box-shadow: 0 0 13px rgba(201,162,39,.25);
  animation: mrzLoaderTrack 1.45s cubic-bezier(.55,.1,.45,.9) infinite;
}

.mrz-loader-meta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #978984;
  font-size: 8px;
  font-weight: 700;
}

.mrz-loader-meta > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #6f625e;
}

.mrz-loader-meta i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 4px rgba(47,125,75,.10);
  animation: mrzLoaderSecurePulse 1.7s ease-in-out infinite;
}

/* Existing small loaders also become more premium without changing app logic. */
.loader {
  position: relative;
  width: 46px;
  height: 46px;
  border: 0 !important;
  border-radius: 50%;
  background:
    conic-gradient(
      transparent 0 18%,
      var(--primary) 18% 50%,
      var(--accent) 50% 72%,
      rgba(110,20,35,.12) 72% 86%,
      transparent 86% 100%
    );
  animation: mrzLoaderOrbit 1.05s linear infinite !important;
}

.loader::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}

.loading-panel {
  min-height: 300px !important;
  place-content: center;
  justify-items: center;
  gap: 13px !important;
  padding: 35px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(201,162,39,.07), transparent 38%),
    #fff;
}

.loading-panel p,
.admin-loading p {
  margin: 0 !important;
  color: var(--muted);
  font-size: 10px !important;
  font-weight: 650;
  letter-spacing: .01em;
}

.admin-loading {
  background:
    radial-gradient(circle at 50% 0%, rgba(201,162,39,.07), transparent 36%),
    #fff;
}

@keyframes mrzLoaderOrbit {
  to { transform: rotate(360deg); }
}

@keyframes mrzLoaderTrack {
  0% { transform: translateX(0); }
  55% { transform: translateX(210%); }
  100% { transform: translateX(340%); }
}

@keyframes mrzLoaderBrandBreath {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}

@keyframes mrzLoaderSecurePulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: .55; transform: scale(.86); }
}

@keyframes mrzLoaderCardIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.975);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes mrzLoaderBackdropFloat {
  from { transform: translate3d(-2%, -1%, 0) scale(.98); }
  to { transform: translate3d(2%, 1%, 0) scale(1.03); }
}

@keyframes mrzLoaderAmbientOne {
  from { transform: translate3d(-12px, 10px, 0); }
  to { transform: translate3d(20px, -14px, 0); }
}

@keyframes mrzLoaderAmbientTwo {
  from { transform: translate3d(16px, -8px, 0); }
  to { transform: translate3d(-18px, 15px, 0); }
}

@media (max-width: 620px) {
  .loading-screen.mrz-app-loading {
    padding: 18px;
  }

  .mrz-loader-card {
    width: min(100%, 390px);
    min-height: 350px;
    padding: 34px 24px 27px;
    border-radius: 25px;
  }

  .mrz-loader-orbit {
    width: 94px;
    height: 94px;
    margin-bottom: 22px;
  }

  .mrz-loader-brand {
    width: 62px;
    height: 62px;
    border-radius: 19px;
    font-size: 18px;
  }

  .mrz-loader-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mrz-loader-orbit::before,
  .mrz-loader-brand,
  .mrz-loader-track > span,
  .mrz-loader-meta i,
  .mrz-app-loading::before,
  .mrz-loader-ambient,
  .loader {
    animation-duration: 2.8s !important;
  }
}


/* =========================================================
   MRZ DIGITAL COMPANY — FULL UI REDESIGN V17
   Premium maroon + gold workspace.
   Visual-only overhaul. Existing functional selectors preserved.
   ========================================================= */

:root {
  --primary: #701628;
  --primary-dark: #470b16;
  --primary-soft: #f8e9ec;
  --accent: #c9a227;
  --accent-strong: #e2bd3a;
  --accent-soft: #fbf3d9;
  --bg: #f6f3ef;
  --surface: #ffffff;
  --surface-soft: #fbf9f6;
  --text: #2d2321;
  --muted: #7d706b;
  --line: #e9e1d9;
  --success: #2f7d4b;
  --danger: #b53b47;
  --warning: #a36b00;
  --shadow: 0 24px 70px rgba(67,22,30,.11);
  --shadow-soft: 0 10px 30px rgba(67,22,30,.055);
  --shadow-card: 0 8px 22px rgba(60,24,30,.045);
  --radius: 20px;
  --sidebar: 270px;
}

body {
  background:
    radial-gradient(circle at 84% 4%, rgba(201,162,39,.045), transparent 22%),
    linear-gradient(180deg,#f9f7f4 0,#f4f1ed 100%);
  color: var(--text);
}

/* Global interaction */
.btn {
  min-height: 42px;
  border-radius: 12px;
  padding: 10px 15px;
  font-size: 11px;
  font-weight: 820;
  letter-spacing: -.005em;
  box-shadow: none;
}

.btn-primary {
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(135deg,#7e1a2d,#55101d) !important;
  box-shadow: 0 10px 22px rgba(110,20,35,.16);
}

.btn-primary:hover {
  box-shadow: 0 14px 28px rgba(110,20,35,.20);
}

.btn-accent {
  border: 1px solid rgba(75,14,25,.06);
  background: linear-gradient(135deg,#d1aa29,#f0d66b);
  box-shadow: 0 10px 22px rgba(201,162,39,.18);
}

.btn-outline {
  background: rgba(255,255,255,.84);
  border-color: #e5dcd4;
}

input, textarea, select {
  border-radius: 12px;
  border-color: #e5ddd5;
  background: #fff;
}

input:focus, textarea:focus, select:focus {
  border-color: rgba(201,162,39,.78);
  box-shadow: 0 0 0 4px rgba(201,162,39,.10);
}

/* Layout / shell */
.sidebar {
  width: var(--sidebar);
  border-right: 1px solid #eadfd7;
  background:
    radial-gradient(circle at 0 0, rgba(201,162,39,.075), transparent 20%),
    linear-gradient(180deg,#fff 0,#fcfaf8 100%);
  box-shadow: 12px 0 34px rgba(67,22,30,.035);
}

.sidebar-header {
  min-height: 86px;
  padding: 18px 18px 15px;
  gap: 11px;
  border-bottom: 0;
}

.sidebar-header .logo-box.compact {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 14px;
  font-size: 16px;
  box-shadow: 0 11px 24px rgba(75,14,25,.13);
}

.sidebar-brand-copy {
  min-width: 0;
  flex: 1;
}

.sidebar-brand-copy strong {
  max-width: 145px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.sidebar-brand-copy span {
  margin-top: 3px;
  color: #9a8a83;
  font-size: 8px;
  letter-spacing: .12em;
}

.sidebar-live-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #39a35f;
  box-shadow: 0 0 0 5px rgba(57,163,95,.09);
}

.sidebar-workspace {
  margin: 2px 14px 10px;
  padding: 13px 14px;
  border: 1px solid rgba(201,162,39,.19);
  border-radius: 15px;
  background:
    radial-gradient(circle at 100% 0, rgba(201,162,39,.12), transparent 33%),
    linear-gradient(145deg,#fffaf0,#fdf9f4);
}

.sidebar-workspace-kicker {
  display: block;
  color: #9b7b1b;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .13em;
}

.sidebar-workspace strong {
  display: block;
  margin-top: 4px;
  color: #4d3732;
  font-size: 11px;
}

.sidebar-workspace small {
  display: block;
  margin-top: 3px;
  color: #9a8b84;
  font-size: 8px;
}

.sidebar-search {
  padding: 5px 14px 8px;
}

.sidebar-search .input-wrap input {
  min-height: 40px;
  border: 1px solid #ebe3dc;
  border-radius: 12px;
  background: #fff;
  font-size: 10px;
}

.nav-group {
  padding: 10px 10px 0;
}

.nav-label {
  padding: 0 10px 7px;
  color: #a39791;
  font-size: 7px;
  letter-spacing: .17em;
}

.nav-item {
  min-height: 42px;
  margin-bottom: 3px;
  padding: 9px 11px;
  gap: 10px;
  border-radius: 12px;
  color: #625650;
  font-size: 11px;
  font-weight: 680;
}

.nav-item:hover {
  color: var(--primary);
  background: #fbf6f4;
}

.nav-item.active {
  position: relative;
  color: var(--primary);
  background:
    linear-gradient(90deg,rgba(110,20,35,.09),rgba(110,20,35,.035));
  box-shadow: inset 0 0 0 1px rgba(110,20,35,.045);
}

.nav-item.active::before {
  width: 3px;
  height: 22px;
  margin-left: -11px;
  background: linear-gradient(var(--accent),var(--primary));
}

.nav-item .nav-icon {
  width: 18px;
  color: #8f7c76;
}

.nav-item.active .nav-icon {
  color: var(--primary);
}

.nav-count {
  min-width: 23px;
  height: 22px;
  padding: 0 6px;
  color: #85766f;
  background: #f7f3ef;
  font-size: 8px;
  font-weight: 850;
}

.sidebar-footer {
  padding: 13px;
  border-top-color: #eee5de;
}

.profile-mini {
  padding: 9px;
  border: 1px solid #ece3dc;
  border-radius: 14px;
  background: #fff;
}

.profile-mini .avatar {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  font-size: 11px;
}

.profile-mini strong {
  font-size: 10px;
}

.profile-mini span {
  font-size: 8px;
}

.profile-mini .icon-button {
  width: 31px;
  height: 31px;
  border-radius: 10px;
}

/* Main / topbar */
.main-shell {
  margin-left: var(--sidebar);
}

.topbar {
  height: 72px;
  padding: 0 clamp(20px,3vw,40px);
  border-bottom: 1px solid rgba(231,221,213,.80);
  background: rgba(248,246,243,.88);
  backdrop-filter: blur(20px);
}

.topbar-left {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar-context {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.topbar-eyebrow {
  color: #a18328;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .16em;
}

.breadcrumb {
  overflow: hidden;
  color: #8b7d76;
  font-size: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.breadcrumb span {
  padding: 0 5px;
  color: #c6b8b1;
}

.breadcrumb strong {
  color: #423431;
  font-size: 11px;
}

.topbar-right {
  gap: 9px;
}

.topbar-secure {
  min-height: 29px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #dce9e0;
  border-radius: 999px;
  color: #407452;
  background: rgba(240,249,243,.85);
  font-size: 8px;
  font-weight: 800;
}

.topbar-secure i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #46a367;
}

.package-badge {
  padding: 7px 10px;
  border: 1px solid #ead99d;
  color: #765d00;
  background: #faf1d5;
  font-size: 8px;
}

.topbar-profile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 5px;
}

.topbar-profile .avatar {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  font-size: 10px;
}

.topbar-profile strong {
  display: block;
  font-size: 9px;
}

.topbar-profile span {
  display: block;
  margin-top: 2px;
  color: #9a8c85;
  font-size: 7px;
}

.content {
  max-width: 1500px;
  padding: 27px clamp(20px,3vw,38px) 60px;
}

/* Page headings */
.page-head {
  margin-bottom: 20px;
  align-items: center;
}

.page-head > div:first-child {
  min-width: 0;
}

.page-eyebrow {
  display: block;
  margin-bottom: 6px;
  color: #a18020;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .15em;
}

.page-head h1 {
  color: #302421;
  font-size: clamp(25px,3vw,36px);
  letter-spacing: -.045em;
}

.page-head p {
  max-width: 760px;
  margin-top: 7px;
  font-size: 11px;
}

.home-page-head h1 {
  display: flex;
  align-items: center;
  gap: 11px;
}

.page-title-icon {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  color: #f3d75d;
  background: linear-gradient(145deg,#7b182b,#4d0c18);
  box-shadow: 0 10px 22px rgba(110,20,35,.13);
}

.home-head-badge {
  min-height: 34px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #e3eadf;
  border-radius: 999px;
  color: #54755f;
  background: rgba(249,252,249,.86);
  font-size: 8px;
  font-weight: 800;
}

.home-head-badge span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #42a161;
}

/* Cards */
.card {
  border: 1px solid #e9e1d9;
  border-radius: 18px;
  background: rgba(255,255,255,.96);
  box-shadow: var(--shadow-card);
}

.card:hover {
  border-color: #e4d9d1;
}

.card-pad {
  padding: 21px;
}

/* Home hero */
.hero-card.home-hero {
  min-height: 300px;
  padding: clamp(28px,4vw,44px);
  grid-template-columns: minmax(0,1.42fr) minmax(210px,.58fr);
  gap: 32px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  background:
    radial-gradient(circle at 85% 15%, rgba(226,189,58,.28), transparent 27%),
    radial-gradient(circle at 73% 90%, rgba(150,36,55,.32), transparent 28%),
    linear-gradient(125deg,#3d0913 0,#641122 52%,#78192c 100%);
  box-shadow: 0 26px 65px rgba(64,10,21,.20);
}

.home-hero .hero-copy {
  position: relative;
  z-index: 2;
}

.hero-kicker {
  color: #f2d461;
  font-size: 8px;
  letter-spacing: .15em;
}

.home-hero h2 {
  max-width: 760px;
  margin: 11px 0 12px;
  font-size: clamp(30px,4vw,48px);
  line-height: 1.04;
}

.home-hero p {
  max-width: 700px;
  font-size: 12px;
  line-height: 1.75;
}

.home-hero p strong {
  color: #f5d968;
}

.home-hero .btn-hero-secondary {
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  background: rgba(255,255,255,.08);
}

.hero-mini-meta {
  margin-top: 23px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.hero-mini-meta span {
  min-height: 29px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 999px;
  color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.055);
  font-size: 8px;
  font-weight: 700;
}

.hero-mini-meta svg {
  width: 12px;
  height: 12px;
  color: #f1d264;
}

.hero-progress-wrap {
  position: relative;
  z-index: 2;
  justify-self: center;
  display: grid;
  justify-items: center;
  gap: 10px;
}

.hero-progress-wrap small {
  color: rgba(255,255,255,.55);
  font-size: 8px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.progress-orbit {
  width: 166px;
  height: 166px;
  background: conic-gradient(#f1cf51 calc(var(--progress) * 1%), rgba(255,255,255,.10) 0);
  box-shadow: 0 20px 45px rgba(0,0,0,.18);
}

.progress-orbit::before {
  inset: 12px;
  background: #4b0d19;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

.progress-orbit-content strong {
  font-size: 35px;
}

.progress-orbit-content span {
  font-size: 8px;
}

/* Stat cards */
.home-stat-grid,
.admin-summary-grid {
  gap: 13px !important;
}

.stat-card {
  position: relative;
  min-width: 0;
  min-height: 94px;
  padding: 16px;
  gap: 13px;
  overflow: hidden;
  border-radius: 17px;
  background:
    radial-gradient(circle at 100% 0, rgba(201,162,39,.07), transparent 32%),
    #fff;
}

.stat-card::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: linear-gradient(90deg,var(--primary),var(--accent));
  opacity: .55;
}

.stat-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: var(--primary);
  background: linear-gradient(145deg,#faedef,#f6e4e8);
}

.stat-copy {
  min-width: 0;
}

.stat-copy span {
  font-size: 9px;
}

.stat-copy strong {
  margin-top: 3px;
  color: #382b28;
  font-size: 21px;
}

.stat-glow {
  position: absolute;
  width: 65px;
  height: 65px;
  right: -32px;
  top: -34px;
  border-radius: 50%;
  background: rgba(201,162,39,.06);
}

/* Section heading */
.section-head-premium,
.section-head {
  margin: 27px 0 12px;
}

.section-kicker {
  display: block;
  margin-bottom: 4px;
  color: #a37e17;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .15em;
}

.section-head h2 {
  font-size: 16px;
}

.section-head p {
  margin-top: 4px;
  font-size: 10px;
}

/* Continue module */
.next-module {
  min-height: 108px;
  padding: 14px;
  gap: 15px;
  border-radius: 18px;
}

.next-module-media {
  width: 116px;
  height: 80px;
  border-radius: 13px;
}

.next-module-copy span {
  font-size: 8px;
}

.next-module-copy h3 {
  margin: 4px 0 5px;
  font-size: 14px;
}

.next-module-copy p {
  font-size: 10px;
}

/* Announcements */
.announcement-grid {
  gap: 13px !important;
}

.announcement {
  min-height: 92px;
  padding: 16px;
  gap: 12px;
}

.announcement-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
}

.announcement h3 {
  margin-bottom: 5px;
  font-size: 12px;
}

.announcement p {
  font-size: 10px;
}

/* Tools catalog */
.catalog-hero {
  min-height: 250px;
  padding: 32px 34px;
  margin-bottom: 18px;
  border-radius: 23px;
  background:
    radial-gradient(circle at 86% 17%, rgba(201,162,39,.21), transparent 28%),
    radial-gradient(circle at 73% 85%, rgba(130,38,57,.28), transparent 30%),
    linear-gradient(135deg,#260811,#4a0c19 55%,#671326);
  box-shadow: 0 22px 55px rgba(59,9,18,.17);
}

.catalog-hero-copy {
  max-width: 820px;
}

.catalog-hero h2 {
  max-width: 760px;
  margin: 8px 0 10px;
  font-size: clamp(27px,3.3vw,43px);
  letter-spacing: -.04em;
}

.catalog-hero p {
  max-width: 700px;
  font-size: 11px;
}

.catalog-trust-row {
  margin-top: 19px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.catalog-trust-row span {
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  color: rgba(255,255,255,.68);
  background: rgba(255,255,255,.05);
  font-size: 7px;
  font-weight: 700;
}

.catalog-stat {
  position: relative;
  min-width: 140px;
  width: 140px;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255,255,255,.065);
}

.catalog-stat strong {
  position: relative;
  z-index: 2;
  color: #f3d866;
  font-size: 39px;
}

.catalog-stat > span:not(.catalog-stat-ring) {
  position: relative;
  z-index: 2;
  font-size: 7px;
}

.catalog-stat small {
  position: relative;
  z-index: 2;
  display: block;
  margin-top: 4px;
  color: rgba(255,255,255,.46);
  font-size: 7px;
}

.catalog-stat-ring {
  position: absolute;
  inset: 8px;
  border: 1px dashed rgba(243,216,102,.24);
  border-radius: 50%;
}

/* Tool cards */
.tool-grid {
  gap: 14px;
}

.tool-card {
  min-height: 0;
  border-radius: 19px;
  transition: transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}

.tool-card:hover {
  transform: translateY(-3px);
  border-color: #dfd2ca;
  box-shadow: 0 18px 42px rgba(65,20,28,.09);
}

.tool-card-media {
  height: 185px;
  background:
    radial-gradient(circle at 70% 20%,rgba(201,162,39,.11),transparent 30%),
    linear-gradient(145deg,#1b0810,#4f0d1b);
}

.tool-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,transparent 55%,rgba(24,6,10,.22));
  pointer-events: none;
}

.tool-card-fallback {
  display: grid;
  place-items: center;
  gap: 6px;
  color: #f1cf54;
}

.tool-card-fallback svg {
  width: 30px;
  height: 30px;
}

.tool-card-fallback span {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .16em;
}

.tool-card-media .access-badge {
  z-index: 2;
  top: 11px;
  right: 11px;
  padding: 6px 8px;
  font-size: 7px;
}

.tool-card-body {
  padding: 15px;
}

.tool-card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tool-type {
  color: #a5821d;
  font-size: 7px;
}

.tool-id-mini {
  max-width: 48%;
  overflow: hidden;
  color: #a4948d;
  font-size: 7px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tool-card h3 {
  margin: 6px 0 5px;
  font-size: 14px;
}

.tool-card p {
  min-height: 44px;
  margin-bottom: 13px;
  font-size: 9px;
  line-height: 1.6;
}

.price-row {
  padding-top: 12px;
  border-top: 1px solid #eee7e0;
}

.price-row del {
  font-size: 8px;
}

.price-row strong {
  font-size: 15px;
}

/* Tool detail */
.tool-page-head {
  margin-bottom: 10px;
}

.tool-hero {
  min-height: 420px;
  border-radius: 23px;
  background:
    radial-gradient(circle at 85% 10%,rgba(201,162,39,.18),transparent 28%),
    linear-gradient(135deg,#250812,#4c0d1a 60%,#6a1427);
}

.tool-hero-copy {
  padding: clamp(30px,4vw,50px);
}

.tool-hero h1 {
  font-size: clamp(30px,4vw,50px);
}

.tool-hero-copy > p {
  font-size: 11px;
}

.tool-hero-media {
  min-height: 390px;
}

.tool-tabs {
  padding: 6px;
  border: 1px solid #e8dfd8;
  border-radius: 15px;
  background: #fff;
}

.tool-tab {
  min-height: 39px;
  border-radius: 10px;
  font-size: 9px;
}

.tool-tab.active {
  color: #fff;
  background: linear-gradient(135deg,#78182a,#4c0d18);
}

.info-split {
  gap: 14px;
}

/* Samples */
.sample-grid {
  gap: 12px !important;
}

.sample-card {
  border-radius: 17px !important;
  box-shadow: 0 6px 18px rgba(63,20,27,.04) !important;
}

.sample-card > [data-sample-image],
.sample-card > [data-sample-video] {
  height: 160px !important;
  max-height: 160px !important;
}

/* Checklist / modules */
.progress-header {
  padding: 19px;
  border-radius: 18px;
}

.progress-title h2 {
  font-size: 14px;
}

.progress-title p {
  font-size: 9px;
}

.progress-number strong {
  font-size: 22px;
}

.progress-track {
  height: 6px;
}

.zone-chips {
  gap: 7px;
}

.zone-chip {
  min-height: 36px;
  padding: 7px 10px;
  border-radius: 11px;
  font-size: 9px;
}

.zone-title-card {
  min-height: 72px;
  padding: 14px 16px;
  border-radius: 16px;
}

.zone-number {
  width: 39px;
  height: 39px;
  border-radius: 11px;
}

.zone-title-card h2 {
  font-size: 14px;
}

.module-grid {
  gap: 12px;
}

.module-card {
  border-radius: 17px;
}

.module-media {
  aspect-ratio: 16/7.2;
}

.play-circle {
  width: 46px;
  height: 46px;
}

.module-body {
  padding: 15px;
}

.module-body h3 {
  font-size: 13px;
}

.module-body p {
  min-height: 34px;
  font-size: 9px;
}

.module-actions {
  margin-top: 13px;
  gap: 7px;
}

/* Notes */
.two-column {
  gap: 14px;
}

.module-list {
  padding: 8px;
  border-radius: 18px;
}

.module-list-item {
  min-height: 54px;
  padding: 10px;
  border-radius: 12px;
}

.editor-card {
  padding: 24px;
  border-radius: 18px;
}

/* Schedule */
.schedule-card {
  min-height: 165px;
  padding: 17px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0,rgba(201,162,39,.07),transparent 30%),
    #fff;
}

.schedule-date {
  font-size: 8px;
}

.schedule-card h3 {
  margin: 9px 0 6px;
  font-size: 13px;
}

.schedule-card p {
  font-size: 9px;
}

.status-pill {
  padding: 6px 8px;
  font-size: 7px;
}

/* Administrator */
.admin-page-head {
  margin-bottom: 16px;
}

.admin-refresh-button {
  min-height: 38px;
}

.admin-summary-grid .stat-card {
  min-height: 88px !important;
}

.admin-tabs {
  gap: 7px !important;
  padding: 8px !important;
  margin-bottom: 16px;
  border-radius: 17px !important;
  background: rgba(255,255,255,.90) !important;
  box-shadow: 0 7px 20px rgba(60,20,28,.035) !important;
}

.admin-tab,
.admin-tab:nth-child(-n+3),
.admin-tab:nth-child(n+4) {
  min-width: 0 !important;
  min-height: 42px !important;
  padding: 8px 11px !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  border: 1px solid transparent !important;
  border-radius: 11px !important;
  color: #6b5d58 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 9px !important;
}

.admin-tab:hover {
  color: var(--primary) !important;
  border-color: #eee4dd !important;
  background: #fcf8f6 !important;
}

.admin-tab.active,
.admin-tab:nth-child(-n+3).active {
  color: #fff !important;
  border-color: #681223 !important;
  background: linear-gradient(135deg,#7b192b,#4c0c18) !important;
  box-shadow: 0 8px 18px rgba(110,20,35,.15) !important;
}

.admin-tab-icon {
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: #8d7b74;
  background: #f7f2ef;
}

.admin-tab-icon svg {
  width: 13px;
  height: 13px;
}

.admin-tab.active .admin-tab-icon {
  color: #f3d763;
  background: rgba(255,255,255,.08);
}

.admin-tab-count,
.admin-tab:nth-child(-n+3) .admin-tab-count {
  margin-left: auto !important;
  min-width: 27px !important;
  height: 24px !important;
  padding: 0 6px !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 1px solid #ead9a0 !important;
  border-radius: 8px !important;
  color: #765d00 !important;
  background: #faf1d7 !important;
  font-size: 9px !important;
  font-weight: 900 !important;
}

.admin-tab.active .admin-tab-count {
  color: #51101c !important;
  border-color: rgba(255,255,255,.22) !important;
  background: #f0d260 !important;
}

/* Admin table/card */
.admin-table-card {
  border-radius: 18px;
}

.admin-table-head {
  padding: 16px 18px;
}

.admin-table-head h2 {
  font-size: 14px;
}

.admin-table th,
.admin-table td {
  padding: 12px 14px;
}

.admin-table th {
  font-size: 7px;
}

.admin-table td {
  font-size: 9px;
}

.admin-action {
  min-height: 32px;
  padding: 7px 9px;
  border-radius: 9px;
  font-size: 8px;
}

.admin-tools-grid {
  gap: 12px !important;
}

.admin-tools-grid > article.card {
  min-height: 0 !important;
  padding: 15px !important;
  border-radius: 17px !important;
  transition: transform .18s ease,box-shadow .18s ease;
}

.admin-tools-grid > article.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(66,20,27,.075);
}

/* Forms / modal */
.modal-backdrop {
  background: rgba(30,8,13,.72);
  backdrop-filter: blur(10px);
}

.modal {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  box-shadow: 0 34px 100px rgba(0,0,0,.30);
}

.modal-head {
  min-height: 64px;
  padding: 15px 18px;
}

.modal-body {
  padding: 18px;
}

.admin-form {
  gap: 12px;
}

.admin-form label {
  margin-bottom: 6px;
  font-size: 9px;
}

.admin-form input,
.admin-form select {
  min-height: 42px;
  font-size: 10px;
}

/* Payment align to V17 */
.mrz-payment-modal {
  border-radius: 24px;
  box-shadow: 0 34px 100px rgba(0,0,0,.30);
}

.mrz-payment-topbar {
  min-height: 72px;
}

.mrz-payment-logo {
  width: 43px;
  height: 43px;
  flex-basis: 43px;
  border-radius: 13px;
}

.mrz-payment-grid {
  min-height: 570px;
}

.mrz-payment-summary,
.mrz-payment-main {
  padding: 28px;
}

.mrz-qris-card {
  border-radius: 20px;
}

/* Premium loading retained & aligned */
.mrz-loader-card {
  border-radius: 26px !important;
}

/* Empty state */
.empty-state {
  padding: 42px 24px;
}

.empty-state .empty-icon {
  width: 55px;
  height: 55px;
  border-radius: 16px;
}

.empty-state h3 {
  font-size: 15px;
}

.empty-state p {
  font-size: 10px;
}

/* Responsive */
@media (max-width: 1180px) {
  :root { --sidebar: 248px; }

  .catalog-stat {
    min-width: 120px;
    width: 120px;
  }

  .admin-tabs {
    overflow-x: auto;
  }

  .admin-tab {
    flex: 0 0 auto !important;
  }
}

@media (max-width: 920px) {
  :root { --sidebar: 270px; }

  .main-shell {
    margin-left: 0;
  }

  .sidebar {
    width: var(--sidebar);
  }

  .topbar-secure,
  .topbar-profile > div:last-child {
    display: none;
  }

  .hero-card.home-hero {
    grid-template-columns: 1fr;
  }

  .hero-progress-wrap {
    justify-self: start;
  }

  .catalog-hero {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 760px) {
  .content {
    padding-left: 15px;
    padding-right: 15px;
  }

  .topbar {
    height: 66px;
    padding: 0 14px;
  }

  .home-head-badge {
    display: none;
  }

  .page-head {
    align-items: flex-start;
  }

  .hero-card.home-hero {
    min-height: 0;
    padding: 25px 20px;
    border-radius: 20px;
  }

  .home-hero h2 {
    font-size: 32px;
  }

  .hero-mini-meta {
    gap: 6px;
  }

  .progress-orbit {
    width: 132px;
    height: 132px;
  }

  .catalog-hero {
    padding: 25px 20px;
    border-radius: 20px;
  }

  .tool-card-media {
    height: 200px;
  }

  .sample-card > [data-sample-image],
  .sample-card > [data-sample-video] {
    height: 175px !important;
    max-height: 175px !important;
  }
}

@media (max-width: 540px) {
  .topbar-right .package-badge {
    display: none;
  }

  .page-head h1 {
    font-size: 27px;
  }

  .page-title-icon {
    width: 34px;
    height: 34px;
  }

  .home-hero h2 {
    font-size: 29px;
  }

  .hero-mini-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .hero-mini-meta span:last-child {
    grid-column: 1 / -1;
  }

  .stat-card {
    min-height: 82px;
  }

  .next-module {
    align-items: stretch;
  }

  .next-module-media {
    width: 100%;
    height: 145px;
  }

  .admin-tabs {
    border-radius: 14px !important;
  }

  .admin-tab {
    min-height: 40px !important;
  }
}


/* =========================================================
   MRZ V18 — STRUCTURAL MOTION UI
   New workspace architecture + native motion engine.
   ========================================================= */

:root {
  --v18-ink:#251a1c;
  --v18-maroon:#5d0f20;
  --v18-maroon-2:#7b1730;
  --v18-gold:#d2ad32;
  --v18-gold-soft:#f4dc80;
  --v18-cream:#f6f2ec;
  --v18-card:rgba(255,255,255,.82);
  --v18-border:rgba(112,74,68,.13);
  --v18-ease:cubic-bezier(.16,1,.3,1);
  --sidebar:286px;
}

html.mrz-motion-enabled { background:#f5f1eb; }
body {
  background:
    radial-gradient(circle at 82% -10%, rgba(210,173,50,.13), transparent 28%),
    radial-gradient(circle at 20% 110%, rgba(110,20,35,.08), transparent 34%),
    #f5f1eb;
}

body::before {
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.32;
  background-image:linear-gradient(rgba(80,50,45,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(80,50,45,.035) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom,black,transparent 84%);
}

/* Pointer light used by motion.js */
.motion-ready-surface { position:relative; isolation:isolate; }
.motion-ready-surface::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0; border-radius:inherit;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(210,173,50,.12),transparent 68%);
  transition:opacity .25s ease;
}
.motion-ready-surface:hover::before { opacity:1; }

/* APP FRAME */
.v18-shell { min-height:100vh; }
.v18-sidebar {
  width:var(--sidebar); padding:12px; border-right:0; overflow:hidden;
  color:#f9eff1;
  background:
    radial-gradient(circle at 10% 0,rgba(233,194,70,.16),transparent 24%),
    radial-gradient(circle at 110% 60%,rgba(165,47,71,.28),transparent 34%),
    linear-gradient(180deg,#3e0914 0%,#520d1c 48%,#2e0710 100%);
  box-shadow:18px 0 55px rgba(54,8,17,.16);
}
.v18-sidebar::after { content:""; position:absolute; inset:12px; border:1px solid rgba(255,255,255,.07); border-radius:24px; pointer-events:none; }
.sidebar-aurora { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.sidebar-aurora i { position:absolute; width:210px; height:210px; border-radius:50%; filter:blur(18px); opacity:.18; }
.sidebar-aurora i:first-child { left:-110px; top:90px; background:#e5bd3e; animation:v18FloatA 9s ease-in-out infinite alternate; }
.sidebar-aurora i:last-child { right:-140px; bottom:100px; background:#a82f4c; animation:v18FloatB 11s ease-in-out infinite alternate; }

.v18-sidebar-header { position:relative; z-index:2; min-height:76px; padding:12px 13px; border:0; }
.v18-sidebar-header .logo-box.compact { width:44px; height:44px; flex-basis:44px; border-radius:14px; color:#4b0e19; background:linear-gradient(145deg,#d3aa29,#f2da79); box-shadow:0 12px 28px rgba(0,0,0,.23); }
.v18-sidebar .sidebar-brand strong { color:#fff; font-size:12px; }
.v18-sidebar .sidebar-brand span { color:rgba(255,255,255,.43); font-size:7px; letter-spacing:.16em; }
.v18-sidebar .sidebar-live-dot { background:#6ee59b; box-shadow:0 0 0 5px rgba(110,229,155,.10),0 0 20px rgba(110,229,155,.35); animation:v18Pulse 2s ease-in-out infinite; }

.v18-member-chip { position:relative; z-index:2; margin:4px 8px 12px; padding:13px; border:1px solid rgba(238,210,111,.16); color:#fff; background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.035)); backdrop-filter:blur(14px); }
.v18-member-chip-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.v18-member-chip .sidebar-workspace-kicker { color:#f2d66d; font-size:7px; }
.v18-online-pill { display:inline-flex; align-items:center; gap:5px; color:rgba(255,255,255,.6); font-size:6px; font-weight:850; letter-spacing:.08em; }
.v18-online-pill i { width:5px; height:5px; border-radius:50%; background:#62dc91; box-shadow:0 0 10px #62dc91; }
.v18-member-chip strong { margin-top:7px; color:#fff; font-size:11px; }
.v18-member-chip small { color:rgba(255,255,255,.45); font-size:7px; }
.v18-mini-progress { height:4px; margin-top:11px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.10); }
.v18-mini-progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#f1d35f,#fff0a5); box-shadow:0 0 12px rgba(241,211,95,.45); animation:v18ProgressGlow 2.2s ease-in-out infinite; }
.v18-mini-progress-meta { margin-top:6px; display:flex; justify-content:space-between; color:rgba(255,255,255,.43); font-size:7px; }
.v18-mini-progress-meta b { color:#f2d76e; }

.v18-sidebar-search { position:relative; z-index:2; padding:0 8px 7px; }
.v18-sidebar-search .input-wrap input { min-height:39px; border:1px solid rgba(255,255,255,.08); color:#fff; background:rgba(255,255,255,.055); font-size:9px; }
.v18-sidebar-search .input-wrap input::placeholder { color:rgba(255,255,255,.32); }
.v18-sidebar-search .input-icon { color:rgba(255,255,255,.45); }

.v18-sidebar-nav { position:relative; z-index:2; flex:1; overflow-y:auto; padding-bottom:8px; scrollbar-width:none; }
.v18-sidebar-nav::-webkit-scrollbar { display:none; }
.v18-sidebar .nav-group { padding:10px 7px 0; }
.v18-sidebar .nav-label { color:rgba(255,255,255,.28); padding:0 9px 6px; font-size:6px; letter-spacing:.20em; }
.v18-sidebar .nav-item { min-height:39px; margin:2px 0; padding:8px 9px; border:1px solid transparent; border-radius:11px; color:rgba(255,255,255,.66); font-size:9px; font-weight:680; transition:transform .22s var(--v18-ease),background .22s ease,color .22s ease,border-color .22s ease; }
.v18-sidebar .nav-item:hover { transform:translateX(3px); color:#fff; border-color:rgba(255,255,255,.07); background:rgba(255,255,255,.065); }
.v18-sidebar .nav-item.active { color:#fff; border-color:rgba(239,211,107,.18); background:linear-gradient(90deg,rgba(216,176,49,.20),rgba(255,255,255,.055)); box-shadow:0 10px 24px rgba(0,0,0,.09); }
.v18-sidebar .nav-item.active::before { width:3px; height:20px; margin-left:-9px; background:linear-gradient(#f3db7c,#d0a82e); box-shadow:0 0 14px rgba(243,219,124,.42); }
.v18-sidebar .nav-icon { color:rgba(255,255,255,.48); }
.v18-sidebar .nav-item.active .nav-icon { color:#f0d263; }
.v18-sidebar .nav-count { min-width:22px; height:21px; color:rgba(255,255,255,.62); background:rgba(255,255,255,.075); font-size:7px; }
.v18-sidebar .zone-nav-number { background:rgba(242,215,110,.14)!important; color:#f4dc83!important; border-color:rgba(242,215,110,.17)!important; }
.sidebar-empty-note { padding:8px 10px; color:rgba(255,255,255,.30); font-size:8px; }
.v18-bonus-lock-note { margin:7px 8px 0; display:flex; align-items:flex-start; gap:7px; color:rgba(255,255,255,.32); font-size:7px; line-height:1.5; }
.v18-bonus-lock-note svg { width:11px; height:11px; flex:0 0 11px; }
.nav-external-dot { margin-left:auto; color:rgba(255,255,255,.30); }

.v18-sidebar .sidebar-footer { position:relative; z-index:2; padding:8px; border:0; }
.v18-profile-mini { gap:8px; padding:8px; border:1px solid rgba(255,255,255,.075); color:#fff; background:rgba(255,255,255,.055); }
.v18-profile-mini .avatar { width:34px; height:34px; border-radius:10px; background:linear-gradient(145deg,#d1aa30,#f1d779); color:#4c0d18; font-size:9px; }
.v18-profile-mini-copy { min-width:0; flex:1; }
.v18-profile-mini-copy strong { color:#fff; font-size:8px; }
.v18-profile-mini-copy span { color:rgba(255,255,255,.38); font-size:7px; }
.v18-profile-mini .icon-button { width:29px; height:29px; border-color:rgba(255,255,255,.07); color:rgba(255,255,255,.55); background:rgba(255,255,255,.045); }

/* TOPBAR */
.v18-main-shell { margin-left:var(--sidebar); }
.v18-topbar { height:70px; padding:0 clamp(18px,2.8vw,38px); background:rgba(246,242,236,.78); border-bottom:1px solid rgba(91,56,51,.08); backdrop-filter:blur(22px) saturate(130%); }
.v18-topbar .topbar-eyebrow { color:#a08127; font-size:6px; letter-spacing:.18em; }
.v18-topbar .breadcrumb { display:flex; align-items:center; gap:9px; }
.v18-topbar .breadcrumb strong { color:#2f2222; font-size:13px; letter-spacing:-.02em; }
.v18-breadcrumb-live { display:inline-flex; align-items:center; gap:5px; padding:4px 7px; border:1px solid #dcebdd; border-radius:999px; color:#4e785c; background:#f7fbf7; font-size:6px; font-weight:850; letter-spacing:.08em; }
.v18-breadcrumb-live i { width:5px; height:5px; border-radius:50%; background:#45a965; animation:v18Pulse 1.8s ease-in-out infinite; }
.v18-command-button { min-height:36px; padding:0 9px; display:inline-flex; align-items:center; gap:7px; border:1px solid rgba(87,56,51,.10); border-radius:10px; color:#6f625d; background:rgba(255,255,255,.74); cursor:pointer; font-size:8px; }
.v18-command-button svg { width:13px; height:13px; }
.v18-command-button kbd { margin-left:5px; padding:3px 5px; border:1px solid #e5ddd7; border-radius:5px; color:#9b8d87; background:#faf8f5; font-size:6px; font-family:inherit; }
.v18-topbar .topbar-profile { padding:4px 5px 4px 4px; border:1px solid rgba(85,50,45,.08); border-radius:12px; background:rgba(255,255,255,.65); }
.v18-topbar .topbar-profile .avatar { width:30px!important; height:30px!important; border-radius:9px!important; }
.v18-topbar .topbar-profile strong { font-size:8px; }
.v18-topbar .topbar-profile span { font-size:6px; }

.v18-content { max-width:1480px; padding:27px clamp(18px,3vw,38px) 60px; }
.v18-page-head { margin-bottom:17px; }
.v18-page-head .page-eyebrow { margin-bottom:5px; color:#a28021; font-size:7px; letter-spacing:.17em; }
.v18-page-head h1 { font-size:clamp(27px,3vw,39px); }
.v18-page-head p { max-width:730px; font-size:10px; }
.v18-status-chip { min-height:31px; padding:0 10px; display:inline-flex; align-items:center; gap:6px; border:1px solid #dce8df; border-radius:999px; color:#557663; background:#fbfdfb; font-size:7px; font-weight:800; }
.v18-status-chip i { width:6px; height:6px; border-radius:50%; background:#47a567; }
.v18-date-chip { min-width:150px; padding:9px 11px; display:flex; align-items:center; gap:9px; border:1px solid rgba(78,48,44,.09); border-radius:13px; background:rgba(255,255,255,.72); box-shadow:0 7px 20px rgba(65,28,33,.035); }
.v18-date-chip > span { width:31px; height:31px; display:grid; place-items:center; border-radius:9px; color:#6a1223; background:#f7e8eb; }
.v18-date-chip small { display:block; color:#a08e87; font-size:6px; letter-spacing:.12em; }
.v18-date-chip strong { display:block; margin-top:2px; color:#493936; font-size:8px; }
.v18-wave { display:inline-block; color:#cba62d; animation:v18Spark 2.6s ease-in-out infinite; }

/* HOME BENTO */
.v18-home-bento { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(280px,.55fr); gap:14px; align-items:stretch; }
.v18-command-hero { min-height:465px; padding:clamp(28px,4vw,48px); overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,.64fr); align-items:center; gap:24px; border:1px solid rgba(255,255,255,.08); border-radius:26px; color:#fff; background:radial-gradient(circle at 78% 18%,rgba(232,195,75,.20),transparent 24%),radial-gradient(circle at 88% 88%,rgba(166,47,75,.32),transparent 32%),linear-gradient(135deg,#300811,#5c0e20 56%,#76172c); box-shadow:0 28px 70px rgba(58,8,18,.20); }
.v18-command-hero::after { content:""; position:absolute; width:460px; height:460px; right:-210px; top:-260px; border:1px solid rgba(255,255,255,.05); border-radius:50%; box-shadow:0 0 0 60px rgba(255,255,255,.018),0 0 0 120px rgba(255,255,255,.012); animation:v18OrbitDrift 12s linear infinite; }
.v18-hero-noise { position:absolute; inset:0; pointer-events:none; opacity:.15; background-image:radial-gradient(rgba(255,255,255,.26) .7px,transparent .7px); background-size:12px 12px; mask-image:linear-gradient(90deg,transparent,black 30%,black 70%,transparent); }
.v18-command-copy { position:relative; z-index:3; }
.v18-command-copy .hero-kicker { font-size:7px; letter-spacing:.18em; }
.v18-command-copy h2 { max-width:720px; margin:12px 0 14px; font-size:clamp(37px,4.5vw,62px); line-height:.98; letter-spacing:-.055em; }
.v18-command-copy h2 em { color:#f0d36c; font-style:normal; }
.v18-command-copy > p { max-width:650px; margin:0; color:rgba(255,255,255,.63); font-size:11px; line-height:1.75; }
.v18-primary-cta { min-height:45px; }
.v18-ghost-button { min-height:45px; border:1px solid rgba(255,255,255,.13); color:#fff; background:rgba(255,255,255,.055); }
.v18-live-row { margin-top:23px; display:flex; flex-wrap:wrap; gap:7px; }
.v18-live-row span { min-height:27px; padding:0 9px; display:inline-flex; align-items:center; gap:6px; border:1px solid rgba(255,255,255,.08); border-radius:999px; color:rgba(255,255,255,.50); background:rgba(255,255,255,.035); font-size:7px; }
.v18-live-row i { width:5px; height:5px; border-radius:50%; background:#6fe29b; box-shadow:0 0 10px #6fe29b; }

.v18-ai-core { position:relative; z-index:3; width:min(27vw,290px); aspect-ratio:1; justify-self:center; display:grid; place-items:center; }
.v18-core-ring { position:absolute; border-radius:50%; border:1px solid rgba(244,220,128,.22); }
.v18-core-ring.ring-a { inset:4%; border-style:dashed; animation:v18Spin 17s linear infinite; }
.v18-core-ring.ring-b { inset:18%; border-color:rgba(255,255,255,.16); animation:v18SpinReverse 12s linear infinite; }
.v18-core-ring.ring-c { inset:31%; border:8px solid rgba(255,255,255,.035); box-shadow:0 0 45px rgba(231,193,70,.10),inset 0 0 25px rgba(255,255,255,.035); }
.v18-core-center { position:relative; z-index:2; width:34%; aspect-ratio:1; display:grid; place-content:center; text-align:center; border:1px solid rgba(246,221,129,.36); border-radius:50%; color:#f3d977; background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.12),rgba(229,190,69,.05)),rgba(38,5,12,.56); box-shadow:0 0 45px rgba(210,173,50,.15); backdrop-filter:blur(8px); }
.v18-core-center strong { display:inline; font-size:30px; line-height:1; letter-spacing:-.05em; }
.v18-core-center > span { font-size:11px; }
.v18-core-center small { display:block; margin-top:4px; color:rgba(255,255,255,.42); font-size:5px; letter-spacing:.16em; }
.v18-core-node { position:absolute; width:8px; height:8px; border:2px solid #4d0b18; border-radius:50%; background:#f1d56f; box-shadow:0 0 15px rgba(241,213,111,.72); }
.v18-core-node.node-a { left:7%; top:45%; animation:v18NodePulse 2.4s ease-in-out infinite; }
.v18-core-node.node-b { right:16%; top:17%; animation:v18NodePulse 2.4s .7s ease-in-out infinite; }
.v18-core-node.node-c { right:8%; bottom:29%; animation:v18NodePulse 2.4s 1.2s ease-in-out infinite; }

.v18-home-side { display:grid; grid-template-rows:1.12fr .88fr; gap:14px; }
.v18-next-card,.v18-quick-panel { padding:17px; border-radius:21px; background:rgba(255,255,255,.80); backdrop-filter:blur(14px); }
.v18-next-card-top { display:flex; justify-content:space-between; align-items:center; }
.v18-arrow-chip { width:27px; height:27px; display:grid; place-items:center; border:1px solid #e9dfd6; border-radius:9px; color:#7a182c; background:#fff; }
.v18-next-media { height:112px; margin:12px 0 11px; overflow:hidden; display:grid; place-items:center; border-radius:14px; color:#f0d465; background:linear-gradient(145deg,#310912,#6f1529); }
.v18-next-media img { width:100%; height:100%; object-fit:cover; }
.v18-next-zone { color:#a17e1d; font-size:6px; font-weight:900; letter-spacing:.11em; }
.v18-next-card h3 { margin:5px 0 5px; font-size:13px; }
.v18-next-card p { display:-webkit-box; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; margin:0 0 12px; color:#82736d; font-size:8px; line-height:1.55; }
.v18-next-card .btn { width:100%; min-height:37px; font-size:8px; }
.v18-complete-state { min-height:215px; display:grid; place-items:center; align-content:center; gap:8px; text-align:center; color:#6e1423; }
.v18-complete-state svg { width:28px; height:28px; }
.v18-complete-state p { margin:0; }

.v18-panel-title { margin-bottom:8px; display:grid; gap:2px; }
.v18-panel-title strong { font-size:11px; }
.v18-quick-action { width:100%; min-height:49px; margin-top:6px; padding:7px 8px; display:grid; grid-template-columns:31px 1fr 20px; align-items:center; gap:8px; border:1px solid transparent; border-radius:12px; text-align:left; color:#473835; background:transparent; cursor:pointer; transition:transform .2s var(--v18-ease),background .2s ease,border-color .2s ease; }
.v18-quick-action:hover { transform:translateX(3px); border-color:#eadfd7; background:#fcf8f5; }
.v18-quick-action > span { width:31px; height:31px; display:grid; place-items:center; border-radius:9px; color:#74162a; background:#f8e9ec; }
.v18-quick-action svg { width:14px; height:14px; }
.v18-quick-action strong { display:block; font-size:8px; }
.v18-quick-action small { display:block; margin-top:2px; color:#a0918a; font-size:6px; }
.v18-quick-action b { color:#b0a19a; font-size:10px; }

.v18-metric-strip,.v18-admin-command-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:14px; }
.v18-metric-strip .stat-card,.v18-admin-command-strip .stat-card { min-height:82px; padding:13px; border-radius:16px; background:rgba(255,255,255,.76); backdrop-filter:blur(12px); }
.stat-trend { position:absolute; right:11px; top:10px; color:#b9aaa4; font-size:9px; }
.v18-metric-strip .stat-icon,.v18-admin-command-strip .stat-icon { width:37px; height:37px; border-radius:11px; }
.v18-metric-strip .stat-copy strong,.v18-admin-command-strip .stat-copy strong { font-size:19px; }

.v18-section-head { margin:26px 0 11px; }
.v18-section-head h2 { font-size:17px; }
.v18-section-head p { font-size:9px; }
.v18-tool-preview-grid { gap:12px!important; }
.v18-announcement-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.v18-announcement { min-height:92px; padding:14px; display:grid; grid-template-columns:24px 35px 1fr; align-items:start; gap:9px; }
.v18-announcement-index { color:#c0b1ab; font-size:6px; font-weight:900; }
.v18-announcement .announcement-icon { width:35px; height:35px; border-radius:10px; }
.v18-announcement h3 { font-size:10px; }
.v18-announcement p { font-size:8px; }

/* TOOLS */
.v18-tools-head-metrics { display:flex; gap:7px; }
.v18-tools-head-metrics span { min-height:32px; padding:0 10px; display:inline-flex; align-items:center; gap:5px; border:1px solid #e7ded6; border-radius:10px; color:#8f8079; background:rgba(255,255,255,.68); font-size:7px; }
.v18-tools-head-metrics b { color:#651225; font-size:11px; }
.v18-tools-hero { min-height:330px; padding:36px 42px; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr); align-items:center; gap:24px; overflow:hidden; border-radius:25px; color:#fff; background:radial-gradient(circle at 76% 20%,rgba(228,191,68,.20),transparent 22%),linear-gradient(135deg,#25070e,#55101e 55%,#76172d); box-shadow:0 25px 65px rgba(61,10,20,.18); }
.v18-tools-hero h2 { margin:11px 0 12px; font-size:clamp(34px,4vw,54px); line-height:1; letter-spacing:-.055em; }
.v18-tools-hero h2 em { color:#f1d66f; font-style:normal; }
.v18-tools-hero p { max-width:670px; margin:0; color:rgba(255,255,255,.60); font-size:10px; line-height:1.7; }
.v18-tool-orbit { position:relative; width:min(26vw,265px); aspect-ratio:1; justify-self:center; display:grid; place-items:center; }
.v18-tool-orbit-ring { position:absolute; border-radius:50%; border:1px solid rgba(239,211,105,.22); }
.v18-tool-orbit-ring.orbit-one { inset:3%; border-style:dashed; animation:v18Spin 18s linear infinite; }
.v18-tool-orbit-ring.orbit-two { inset:20%; border-color:rgba(255,255,255,.12); animation:v18SpinReverse 12s linear infinite; }
.v18-tool-orbit-ring.orbit-three { inset:36%; border:6px solid rgba(255,255,255,.04); }
.v18-tool-orbit-core { position:relative; z-index:2; width:31%; aspect-ratio:1; display:grid; place-content:center; text-align:center; border-radius:50%; color:#f3d775; background:#3b0914; box-shadow:0 0 40px rgba(231,191,66,.15); }
.v18-tool-orbit-core strong { font-size:26px; line-height:1; }
.v18-tool-orbit-core span { margin-top:3px; color:rgba(255,255,255,.42); font-size:5px; letter-spacing:.18em; }
.orbit-node { position:absolute; min-width:31px; height:31px; padding:0 6px; display:grid; place-items:center; border:1px solid rgba(242,215,112,.25); border-radius:10px; color:#f3d875; background:rgba(49,7,16,.72); box-shadow:0 8px 22px rgba(0,0,0,.18); font-size:6px; font-style:normal; font-weight:900; }
.node-1{top:8%;left:44%;animation:v18NodeFloat 3.2s ease-in-out infinite}.node-2{right:1%;top:43%;animation:v18NodeFloat 3.5s .5s ease-in-out infinite}.node-3{bottom:7%;left:39%;animation:v18NodeFloat 3.7s 1s ease-in-out infinite}.node-4{left:2%;top:42%;animation:v18NodeFloat 3.4s 1.4s ease-in-out infinite}
.v18-library-bar { margin:21px 0 10px; display:flex; align-items:end; justify-content:space-between; gap:12px; }
.v18-library-bar strong { display:block; margin-top:3px; font-size:13px; }
.v18-library-live { display:inline-flex; align-items:center; gap:5px; color:#7f716a; font-size:7px; }
.v18-library-live i { width:6px; height:6px; border-radius:50%; background:#45a866; animation:v18Pulse 2s ease-in-out infinite; }

.v18-tool-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px!important; }
.v18-tool-card { --tilt-x:0deg; --tilt-y:0deg; transform:perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transform-style:preserve-3d; min-height:0; border-radius:18px; transition:transform .16s ease,box-shadow .2s ease,border-color .2s ease; }
.v18-tool-card:hover { transform:perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-4px); box-shadow:0 20px 46px rgba(63,17,26,.11); }
.v18-tool-card .tool-card-media { height:178px; }
.v18-tool-card .tool-card-media img { transition:transform .55s var(--v18-ease),filter .4s ease; }
.v18-tool-card:hover .tool-card-media img { transform:scale(1.055); filter:saturate(1.05); }
.v18-tool-number { position:absolute; z-index:3; left:11px; top:11px; min-width:27px; height:27px; padding:0 7px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.14); border-radius:9px; color:rgba(255,255,255,.78); background:rgba(40,8,15,.46); backdrop-filter:blur(9px); font-size:7px; font-weight:900; }
.v18-tool-media-shade { position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,rgba(30,5,12,.02),rgba(30,5,12,.17)); }
.v18-tool-card .access-badge { z-index:3; }
.v18-circle-action { width:36px; height:36px; flex:0 0 36px; display:grid; place-items:center; border:0; border-radius:50%; color:#fff; background:linear-gradient(145deg,#77172b,#4a0c17); cursor:pointer; transition:transform .25s var(--v18-ease),box-shadow .25s ease; }
.v18-circle-action:hover { transform:rotate(-9deg) scale(1.06); box-shadow:0 9px 22px rgba(110,20,35,.22); }
.v18-circle-action svg { width:14px; height:14px; }

/* SCHEDULE TIMELINE */
.v18-schedule-counter { width:82px; height:58px; display:grid; place-content:center; text-align:center; border:1px solid #e6ddd5; border-radius:15px; background:rgba(255,255,255,.72); }
.v18-schedule-counter strong { color:#6d1427; font-size:21px; line-height:1; }
.v18-schedule-counter span { margin-top:3px; color:#a2938d; font-size:5px; letter-spacing:.15em; }
.v18-schedule-banner { min-height:170px; padding:27px 30px; display:flex; align-items:center; justify-content:space-between; gap:25px; overflow:hidden; border-radius:21px; color:#fff; background:linear-gradient(135deg,#3b0913,#681326); }
.v18-schedule-banner h2 { margin:7px 0 6px; font-size:27px; }
.v18-schedule-banner p { margin:0; color:rgba(255,255,255,.55); font-size:9px; }
.v18-schedule-pulse { position:relative; width:105px; height:105px; display:grid; place-items:center; }
.v18-schedule-pulse i { position:absolute; inset:0; border:1px solid rgba(241,211,100,.22); border-radius:50%; animation:v18Ripple 2.6s ease-out infinite; }
.v18-schedule-pulse i:nth-child(2){animation-delay:.8s}.v18-schedule-pulse i:nth-child(3){animation-delay:1.6s}.v18-schedule-pulse span { width:50px; height:50px; z-index:2; display:grid; place-items:center; border-radius:16px; color:#51101d; background:#f0d264; }
.v18-schedule-timeline { margin-top:14px; display:grid; gap:9px; }
.v18-schedule-card { min-height:102px; padding:12px 14px; display:grid; grid-template-columns:48px 1fr auto; align-items:center; gap:13px; }
.v18-timeline-marker { height:100%; display:grid; place-items:center; position:relative; }
.v18-timeline-marker span { width:31px; height:31px; z-index:2; display:grid; place-items:center; border:1px solid #eaded6; border-radius:10px; color:#77172b; background:#fff; font-size:7px; font-weight:900; }
.v18-timeline-marker i { position:absolute; top:50%; bottom:-58px; width:1px; background:linear-gradient(#e3d8d0,transparent); }
.v18-schedule-card:last-child .v18-timeline-marker i { display:none; }
.v18-session-top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.v18-session-content h3 { margin:6px 0 4px; font-size:12px; }
.v18-session-content p { margin:0; color:#91827b; font-size:8px; }
.v18-session-action { min-width:120px; display:flex; justify-content:flex-end; }
.v18-session-muted { color:#a2948d; font-size:7px; }
.v18-schedule-card .status-pill { font-size:6px; }
.status-ongoing { color:#2d6e45!important; background:#e9f7ee!important; }
.status-completed { color:#6f625d!important; background:#f1eeeb!important; }
.status-cancelled { color:#9e3440!important; background:#fff0f1!important; }

/* PROFILE */
.v18-profile-layout { display:grid; grid-template-columns:260px minmax(0,1fr) 270px; gap:12px; align-items:start; }
.v18-profile-identity { padding:24px 18px; text-align:center; overflow:hidden; }
.v18-profile-orbit { position:relative; width:112px; height:112px; margin:0 auto 16px; display:grid; place-items:center; }
.v18-profile-orbit::before,.v18-profile-orbit::after { content:""; position:absolute; border-radius:50%; border:1px dashed rgba(110,20,35,.18); }
.v18-profile-orbit::before { inset:0; animation:v18Spin 15s linear infinite; }
.v18-profile-orbit::after { inset:12px; border-style:solid; border-color:rgba(201,162,39,.20); animation:v18SpinReverse 10s linear infinite; }
.v18-profile-orbit .avatar { width:70px; height:70px; z-index:2; border-radius:22px; font-size:18px; }
.v18-profile-identity h2 { margin:6px 0 3px; font-size:18px; }
.v18-profile-identity > p { margin:0; color:#94857e; font-size:8px; }
.v18-profile-badges { margin:13px 0; display:flex; justify-content:center; flex-wrap:wrap; gap:5px; }
.v18-profile-badges span { padding:5px 7px; border:1px solid #e8ddd5; border-radius:999px; color:#795f16; background:#fff9e5; font-size:6px; font-weight:850; }
.v18-profile-facts { display:grid; gap:7px; margin-top:16px; text-align:left; }
.v18-profile-facts div { padding:10px; border:1px solid #eee6df; border-radius:11px; background:#fcfaf8; }
.v18-profile-facts small { display:block; color:#a5958e; font-size:6px; }
.v18-profile-facts strong { display:block; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:8px; }
.v18-profile-form-card { padding:22px; }
.v18-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.v18-form-grid .full { grid-column:1/-1; }
.v18-form-grid .form-group { margin:0; }
.v18-form-grid label { font-size:8px; }
.v18-form-grid input,.v18-form-grid textarea { font-size:9px; }
.v18-form-grid textarea { min-height:95px; }
.v18-readonly { color:#887b75!important; background:#f6f2ed!important; cursor:not-allowed!important; }
.v18-field-note { margin-top:5px!important; font-size:6px!important; }
.v18-form-actions { display:flex; justify-content:flex-end; padding-top:3px; }
.v18-security-card { padding:21px; }
.v18-security-icon { width:48px; height:48px; margin-bottom:15px; display:grid; place-items:center; border-radius:15px; color:#f1d56f; background:linear-gradient(145deg,#4d0b18,#77172b); box-shadow:0 12px 24px rgba(110,20,35,.16); }
.v18-security-card h2 { margin:5px 0 6px; font-size:16px; }
.v18-security-card > p { margin:0 0 17px; color:#897a74; font-size:9px; line-height:1.65; }
.v18-security-note { margin-top:14px; padding:11px; border:1px solid #eee5de; border-radius:11px; background:#fcfaf8; }
.v18-security-note strong { display:block; font-size:8px; }
.v18-security-note span { display:block; margin-top:4px; color:#9a8c85; font-size:7px; line-height:1.5; }

/* ADMIN CONTROL CENTER */
.v18-admin-command-strip { margin:0 0 12px; }
.v18-admin-console { display:grid; grid-template-columns:205px minmax(0,1fr); gap:12px; align-items:start; }
.v18-admin-rail { position:sticky; top:84px; min-height:570px; padding:11px; overflow:hidden; border:1px solid rgba(255,255,255,.07); color:#fff; background:radial-gradient(circle at 20% 0,rgba(213,174,52,.16),transparent 24%),linear-gradient(180deg,#3b0812,#54101e 65%,#320811); box-shadow:0 18px 44px rgba(56,8,17,.16); }
.v18-admin-rail-head { padding:9px 7px 14px; display:grid; grid-template-columns:38px 1fr 7px; align-items:center; gap:8px; border-bottom:1px solid rgba(255,255,255,.07); }
.v18-admin-core { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; color:#4b0d19; background:linear-gradient(145deg,#d1a92d,#f0d66d); font-size:9px; font-weight:950; }
.v18-admin-rail-head span { display:block; color:rgba(255,255,255,.35); font-size:5px; letter-spacing:.14em; }
.v18-admin-rail-head strong { display:block; margin-top:2px; font-size:9px; }
.v18-admin-rail-head > i { width:6px; height:6px; border-radius:50%; background:#66df94; box-shadow:0 0 12px #66df94; }
.v18-admin-nav { display:grid; gap:3px; margin-top:9px; }
.v18-admin-nav-label { padding:10px 7px 4px; color:rgba(255,255,255,.27); font-size:5px; font-weight:900; letter-spacing:.16em; }
.v18-admin-rail .admin-tab,.v18-admin-rail .admin-tab:nth-child(-n+3),.v18-admin-rail .admin-tab:nth-child(n+4) { width:100%; min-height:39px!important; padding:7px!important; display:grid!important; grid-template-columns:27px 1fr auto!important; gap:7px!important; justify-content:stretch!important; border:1px solid transparent!important; border-radius:10px!important; color:rgba(255,255,255,.61)!important; background:transparent!important; font-size:8px!important; text-align:left!important; }
.v18-admin-rail .admin-tab:hover { transform:translateX(2px)!important; color:#fff!important; border-color:rgba(255,255,255,.07)!important; background:rgba(255,255,255,.05)!important; }
.v18-admin-rail .admin-tab.active { color:#fff!important; border-color:rgba(240,211,100,.17)!important; background:linear-gradient(90deg,rgba(215,176,48,.18),rgba(255,255,255,.045))!important; box-shadow:none!important; }
.v18-admin-rail .admin-tab-icon { width:27px; height:27px; color:rgba(255,255,255,.47); background:rgba(255,255,255,.05); }
.v18-admin-rail .admin-tab.active .admin-tab-icon { color:#f1d36a; background:rgba(241,211,106,.09); }
.v18-admin-rail .admin-tab-count { min-width:23px!important; height:21px!important; border:0!important; color:rgba(255,255,255,.64)!important; background:rgba(255,255,255,.07)!important; font-size:7px!important; }
.v18-admin-rail .admin-tab.active .admin-tab-count { color:#4d0d18!important; background:#efd164!important; }
.v18-admin-rail-foot { position:absolute; left:11px; right:11px; bottom:11px; padding:10px; border:1px solid rgba(255,255,255,.06); border-radius:10px; background:rgba(255,255,255,.035); }
.v18-admin-rail-foot span { display:flex; align-items:center; gap:5px; color:rgba(255,255,255,.55); font-size:6px; }
.v18-admin-rail-foot span i { width:5px; height:5px; border-radius:50%; background:#66dd93; }
.v18-admin-rail-foot small { display:block; margin-top:4px; color:rgba(255,255,255,.25); font-size:5px; }
.v18-admin-stage { min-width:0; display:grid; gap:10px; }
.v18-admin-stage-head { min-height:90px; padding:17px 19px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.v18-admin-stage-head h2 { margin:4px 0 4px; font-size:16px; }
.v18-admin-stage-head p { margin:0; color:#8c7e77; font-size:8px; }
.v18-admin-stage-id { min-width:72px; min-height:30px; padding:0 8px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #e8ddd5; border-radius:9px; color:#7d6e68; background:#fbf8f5; font-size:6px; font-weight:900; letter-spacing:.13em; }
.v18-admin-panel { min-width:0; }
.v18-admin-panel > .card:first-child { margin-top:0!important; }
.v18-admin-panel .admin-tabs { display:none!important; }

/* Existing admin data views compact inside new stage */
.v18-admin-panel .admin-table-head { padding:14px 16px; }
.v18-admin-panel .admin-table-head h2 { font-size:13px; }
.v18-admin-panel .admin-table th,.v18-admin-panel .admin-table td { padding:10px 12px; }
.v18-admin-panel .admin-table th { font-size:6px; }
.v18-admin-panel .admin-table td { font-size:8px; }
.v18-admin-panel .admin-tools-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px!important; }
.v18-admin-panel .admin-tools-grid > article.card { padding:13px!important; }

/* LEARNING ZONE existing inline layouts receive motion language */
.zone-catalog-grid { gap:12px!important; }
.zone-product-card { --tilt-x:0deg; --tilt-y:0deg; transform:perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); border-radius:19px!important; overflow:hidden; }
.zone-product-media { background:radial-gradient(circle at 70% 10%,rgba(225,187,64,.15),transparent 30%),linear-gradient(145deg,#350812,#6e1427)!important; }
.zone-product-copy { padding:20px!important; }
.zone-product-copy h2 { font-size:16px; }
.zone-product-copy p { font-size:9px; }
.academy-zone-hero { border-radius:22px!important; }
.academy-zone-visual { background:radial-gradient(circle at 70% 10%,rgba(225,187,64,.16),transparent 30%),linear-gradient(145deg,#350812,#6e1427)!important; }
.module-card { border-radius:17px; }
.module-card:hover { transform:translateY(-3px); box-shadow:0 17px 38px rgba(64,18,26,.09); }

/* LOGIN gets a real motion layer without changing auth logic */
.login-shell { background:#f4f0ea; }
.login-brand { background:radial-gradient(circle at 17% 16%,rgba(229,190,66,.19),transparent 25%),radial-gradient(circle at 82% 86%,rgba(155,39,62,.32),transparent 30%),linear-gradient(145deg,#350811,#5f1021 58%,#77172d); }
.login-brand::before { content:""; position:absolute; width:310px; height:310px; left:14%; top:18%; border:1px dashed rgba(241,211,104,.13); border-radius:50%; animation:v18Spin 32s linear infinite; }
.login-benefit { border-color:rgba(255,255,255,.10); background:rgba(255,255,255,.055); transition:transform .25s var(--v18-ease),background .25s ease; }
.login-benefit:nth-child(1){animation:v18CardFloat 5s ease-in-out infinite}.login-benefit:nth-child(2){animation:v18CardFloat 5.5s .8s ease-in-out infinite}.login-benefit:nth-child(3){animation:v18CardFloat 6s 1.4s ease-in-out infinite}
.login-card { border:1px solid rgba(98,60,54,.10); border-radius:26px; box-shadow:0 28px 70px rgba(61,18,25,.11); }

/* MODALS / PAYMENT MICRO MOTION */
.modal,.mrz-payment-modal { transform-origin:center; }
.icon-button,.btn,.v18-circle-action,.admin-tab,.nav-item { will-change:transform; }

/* Keyframes */
@keyframes v18Spin{to{transform:rotate(360deg)}}
@keyframes v18SpinReverse{to{transform:rotate(-360deg)}}
@keyframes v18Pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.82)}}
@keyframes v18FloatA{from{transform:translate3d(-10px,-8px,0)}to{transform:translate3d(25px,24px,0)}}
@keyframes v18FloatB{from{transform:translate3d(12px,14px,0)}to{transform:translate3d(-22px,-18px,0)}}
@keyframes v18ProgressGlow{50%{filter:brightness(1.18);box-shadow:0 0 18px rgba(241,211,95,.65)}}
@keyframes v18Spark{0%,100%{transform:rotate(0) scale(1);opacity:.75}50%{transform:rotate(18deg) scale(1.18);opacity:1}}
@keyframes v18OrbitDrift{to{transform:rotate(360deg)}}
@keyframes v18NodePulse{0%,100%{transform:scale(.8);opacity:.55}50%{transform:scale(1.25);opacity:1}}
@keyframes v18NodeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes v18Ripple{0%{transform:scale(.5);opacity:0}25%{opacity:.55}100%{transform:scale(1.25);opacity:0}}
@keyframes v18CardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

@media (max-width:1220px){
  :root{--sidebar:258px}
  .v18-home-bento{grid-template-columns:minmax(0,1.35fr) minmax(250px,.65fr)}
  .v18-command-hero{grid-template-columns:1fr minmax(210px,.55fr)}
  .v18-tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v18-profile-layout{grid-template-columns:230px minmax(0,1fr)}
  .v18-security-card{grid-column:1/-1}
}

@media (max-width:980px){
  :root{--sidebar:286px}
  .v18-main-shell{margin-left:0}
  .v18-home-bento{grid-template-columns:1fr}
  .v18-home-side{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .v18-command-hero{min-height:410px}
  .v18-tools-hero{grid-template-columns:1fr minmax(210px,.5fr)}
  .v18-admin-console{grid-template-columns:1fr}
  .v18-admin-rail{position:relative;top:auto;min-height:0;padding:9px}
  .v18-admin-rail-head,.v18-admin-rail-foot{display:none}
  .v18-admin-nav{display:flex;overflow-x:auto;gap:5px;margin:0;scrollbar-width:none}
  .v18-admin-nav::-webkit-scrollbar{display:none}
  .v18-admin-nav-label{display:none}
  .v18-admin-rail .admin-tab,.v18-admin-rail .admin-tab:nth-child(-n+3),.v18-admin-rail .admin-tab:nth-child(n+4){width:auto;min-width:120px!important;flex:0 0 auto!important}
}

@media (max-width:760px){
  .v18-command-button{display:none}
  .v18-content{padding:20px 13px 45px}
  .v18-date-chip,.v18-tools-head-metrics{display:none}
  .v18-command-hero{min-height:0;padding:27px 21px;grid-template-columns:1fr;border-radius:21px}
  .v18-command-copy h2{font-size:38px}
  .v18-ai-core{width:210px;margin:4px auto 0}
  .v18-home-side{grid-template-columns:1fr}
  .v18-metric-strip,.v18-admin-command-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v18-announcement-grid{grid-template-columns:1fr}
  .v18-tools-hero{padding:27px 21px;grid-template-columns:1fr;border-radius:21px}
  .v18-tool-orbit{width:210px;margin:auto}
  .v18-tool-grid{grid-template-columns:1fr}
  .v18-tool-card .tool-card-media{height:220px}
  .v18-schedule-card{grid-template-columns:42px 1fr}.v18-session-action{grid-column:2;justify-content:flex-start}
  .v18-profile-layout{grid-template-columns:1fr}.v18-security-card{grid-column:auto}.v18-form-grid{grid-template-columns:1fr}.v18-form-grid .full{grid-column:auto}
}

@media (max-width:540px){
  .v18-topbar .topbar-profile>div:last-child,.v18-topbar .package-badge{display:none}
  .v18-command-copy h2{font-size:32px}
  .v18-live-row{display:grid;grid-template-columns:1fr 1fr}.v18-live-row span:first-child{grid-column:1/-1}
  .v18-metric-strip,.v18-admin-command-strip{gap:7px}
  .v18-metric-strip .stat-card,.v18-admin-command-strip .stat-card{min-height:76px;padding:11px}
}

@media (prefers-reduced-motion:reduce){
  .sidebar-aurora i,.v18-sidebar .sidebar-live-dot,.v18-mini-progress span,.v18-wave,.v18-command-hero::after,.v18-core-ring,.v18-core-node,.v18-tool-orbit-ring,.orbit-node,.v18-library-live i,.v18-schedule-pulse i,.v18-profile-orbit::before,.v18-profile-orbit::after,.login-brand::before,.login-benefit{animation:none!important}
  .v18-tool-card{transform:none!important}
}

/* =========================================================
   MRZ V18.1 — SIDEBAR FREEZE FIX
   Sidebar shell benar-benar fixed. Hanya area menu yang boleh scroll.
   ========================================================= */

@media (min-width: 921px) {
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  .sidebar-header,
  .sidebar-workspace,
  .sidebar-search,
  .sidebar-footer {
    flex: 0 0 auto;
  }

  .sidebar > nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(110,20,35,.24) transparent;
  }

  .sidebar > nav::-webkit-scrollbar {
    width: 5px;
  }

  .sidebar > nav::-webkit-scrollbar-track {
    background: transparent;
  }

  .sidebar > nav::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(110,20,35,.20);
  }

  .main-shell {
    margin-left: var(--sidebar) !important;
    min-height: 100vh;
  }
}

/* Mobile tetap memakai drawer sidebar seperti V18. */
@media (max-width: 920px) {
  .sidebar {
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
  }
}


/* =========================================================
   MRZ V18.2 — HARD SIDEBAR VIEWPORT LOCK
   Fix: sidebar tidak boleh berhenti mengikuti tinggi konten.
   ========================================================= */

@media (min-width: 921px) {
  /* Rail background cadangan: selalu memenuhi viewport. */
  .app-shell.v18-shell::before {
    content: "";
    position: fixed !important;
    z-index: 39;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: var(--sidebar) !important;
    pointer-events: none;
    background:
      radial-gradient(circle at 10% 0, rgba(233,194,70,.16), transparent 24%),
      radial-gradient(circle at 110% 60%, rgba(165,47,71,.28), transparent 34%),
      linear-gradient(180deg,#3e0914 0%,#520d1c 48%,#2e0710 100%);
    box-shadow: 18px 0 55px rgba(54,8,17,.16);
  }

  /* Selector dibuat sangat spesifik agar tidak kalah dengan rule V18 lain. */
  aside#sidebar.sidebar.v18-sidebar {
    position: fixed !important;
    z-index: 40 !important;

    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;

    width: var(--sidebar) !important;
    height: auto !important;
    min-height: 100vh !important;
    max-height: 100vh !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    margin: 0 !important;
    padding: 12px !important;
    box-sizing: border-box !important;

    overflow: hidden !important;
    overscroll-behavior: none !important;

    color: #f9eff1 !important;
    background:
      radial-gradient(circle at 10% 0, rgba(233,194,70,.16), transparent 24%),
      radial-gradient(circle at 110% 60%, rgba(165,47,71,.28), transparent 34%),
      linear-gradient(180deg,#3e0914 0%,#520d1c 48%,#2e0710 100%) !important;
  }

  aside#sidebar.sidebar.v18-sidebar > .sidebar-aurora,
  aside#sidebar.sidebar.v18-sidebar > .sidebar-header,
  aside#sidebar.sidebar.v18-sidebar > .sidebar-workspace,
  aside#sidebar.sidebar.v18-sidebar > .sidebar-search,
  aside#sidebar.sidebar.v18-sidebar > .sidebar-footer {
    flex: 0 0 auto !important;
  }

  /* HANYA daftar menu yang scroll. */
  aside#sidebar.sidebar.v18-sidebar > nav.v18-sidebar-nav {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
  }

  /* Profile dipaku ke bawah sidebar. */
  aside#sidebar.sidebar.v18-sidebar > .sidebar-footer {
    margin-top: auto !important;
    position: relative !important;
    bottom: auto !important;
  }

  /* Konten selalu mulai setelah sidebar, tidak menimpa rail. */
  .main-shell.v18-main-shell {
    margin-left: var(--sidebar) !important;
    width: calc(100% - var(--sidebar)) !important;
    min-height: 100vh !important;
  }
}

/* Mobile kembali ke drawer biasa, tanpa rail background desktop. */
@media (max-width: 920px) {
  .app-shell.v18-shell::before {
    display: none !important;
  }

  aside#sidebar.sidebar.v18-sidebar {
    min-height: 100dvh;
  }

  .main-shell.v18-main-shell {
    width: 100% !important;
  }
}


/* =========================================================
   MRZ V18.3 — FIXED SIDEBAR / SCROLL MAIN CONTENT ONLY
   DESKTOP:
   - Panel kiri (sidebar) benar-benar freeze.
   - Topbar juga tetap.
   - HANYA area konten kanan (#view-root) yang bergerak saat scroll.
   ========================================================= */

@media (min-width: 921px) {
  html,
  body {
    height: 100% !important;
    overflow: hidden !important;
  }

  body {
    overscroll-behavior: none !important;
  }

  .app-shell.v18-shell {
    position: relative !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* PANEL KIRI = FREEZE TOTAL */
  aside#sidebar.sidebar.v18-sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: var(--sidebar) !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    z-index: 60 !important;
  }

  /* Hanya daftar menu sidebar yang boleh punya scroll internal
     bila isi menu lebih tinggi dari layar. Sidebar-nya sendiri tetap diam. */
  aside#sidebar.sidebar.v18-sidebar > nav.v18-sidebar-nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
  }

  /* PANEL KANAN */
  .main-shell.v18-main-shell {
    position: relative !important;
    margin-left: var(--sidebar) !important;
    width: calc(100% - var(--sidebar)) !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;

    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  /* TOPBAR TETAP DI TEMPAT */
  .main-shell.v18-main-shell > .topbar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    flex: 0 0 auto !important;
    z-index: 30 !important;
  }

  /* INI YANG BERGERAK SAAT SCROLL = PANEL / KONTEN NOMOR 2 */
  .main-shell.v18-main-shell > main.content#view-root {
    position: relative !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: none !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch;

    scrollbar-gutter: stable;
  }

  .main-shell.v18-main-shell > main.content#view-root::-webkit-scrollbar {
    width: 8px;
  }

  .main-shell.v18-main-shell > main.content#view-root::-webkit-scrollbar-track {
    background: transparent;
  }

  .main-shell.v18-main-shell > main.content#view-root::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: rgba(110, 20, 35, .26);
    background-clip: padding-box;
  }
}

/* MOBILE: pakai perilaku normal/drawer supaya tidak mengunci layar HP. */
@media (max-width: 920px) {
  html,
  body {
    height: auto !important;
    overflow: auto !important;
  }

  .app-shell.v18-shell,
  .main-shell.v18-main-shell {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }

  .main-shell.v18-main-shell {
    width: 100% !important;
    display: block !important;
  }

  .main-shell.v18-main-shell > main.content#view-root {
    height: auto !important;
    overflow: visible !important;
  }
}


/* =========================================================
   MRZ V18.4 — ADMIN CONTROL PANEL FIXED + FIT
   Target:
   - Admin rail kiri TETAP / freeze saat konten admin di-scroll.
   - Lebar dan ukuran UI TIDAK mengecil / scale.
   - Rail selalu fit tinggi viewport.
   - Jika layar pendek, hanya menu rail yang scroll internal.
   ========================================================= */

@media (min-width: 921px) {

  /* Console admin mempertahankan kolom rail yang stabil. */
  .v18-admin-console {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 224px minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: start !important;
    min-width: 0 !important;
  }

  /* Rail admin = freeze/sticky di viewport scroll kanan. */
  .v18-admin-console > aside.v18-admin-rail {
    position: sticky !important;
    top: 14px !important;

    width: 224px !important;
    min-width: 224px !important;
    max-width: 224px !important;

    /* Topbar desktop ±72px + jarak aman. */
    height: calc(100dvh - 100px) !important;
    min-height: 520px !important;
    max-height: calc(100dvh - 100px) !important;

    align-self: start !important;
    display: flex !important;
    flex-direction: column !important;

    margin: 0 !important;
    padding: 13px !important;
    box-sizing: border-box !important;

    overflow: hidden !important;
    z-index: 15 !important;

    /* Jangan pernah ikut animation scale/tilt. */
    transform: none !important;
    scale: 1 !important;
    zoom: 1 !important;
    flex-shrink: 0 !important;

    border-radius: 18px !important;
  }

  .v18-admin-rail > .v18-admin-rail-head {
    flex: 0 0 auto !important;
    min-height: 59px !important;
  }

  /* Hanya menu tengah yang boleh scroll bila viewport pendek. */
  .v18-admin-rail > nav.v18-admin-nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;

    display: block !important;
    margin-top: 10px !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(242,211,105,.24) transparent;
  }

  .v18-admin-rail > nav.v18-admin-nav::-webkit-scrollbar {
    width: 4px;
  }

  .v18-admin-rail > nav.v18-admin-nav::-webkit-scrollbar-track {
    background: transparent;
  }

  .v18-admin-rail > nav.v18-admin-nav::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(242,211,105,.22);
  }

  /* Tombol menu tetap ukuran normal — tidak dikecilkan untuk fit. */
  .v18-admin-rail .admin-tab,
  .v18-admin-rail .admin-tab:nth-child(-n+3),
  .v18-admin-rail .admin-tab:nth-child(n+4) {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: auto !important;

    padding: 8px 9px !important;
    margin: 0 0 4px !important;

    grid-template-columns: 30px minmax(0,1fr) auto !important;
    gap: 8px !important;

    font-size: 9px !important;
    line-height: 1.25 !important;

    transform: none !important;
    scale: 1 !important;
  }

  .v18-admin-rail .admin-tab:hover {
    transform: translateX(2px) !important;
  }

  .v18-admin-rail .admin-tab-icon {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border-radius: 9px !important;
  }

  .v18-admin-rail .admin-tab-count {
    min-width: 27px !important;
    height: 24px !important;
    padding: 0 7px !important;
    font-size: 9px !important;
  }

  .v18-admin-nav-label {
    padding: 11px 8px 5px !important;
    font-size: 6px !important;
    line-height: 1 !important;
  }

  /* Backend status selalu berada di bawah rail. */
  .v18-admin-rail > .v18-admin-rail-foot {
    flex: 0 0 auto !important;
    margin-top: 9px !important;
    padding: 10px 9px !important;
    min-height: 47px !important;
  }

  .v18-admin-rail-foot span {
    font-size: 7px !important;
  }

  .v18-admin-rail-foot small {
    font-size: 6px !important;
  }

  /* Stage kanan tidak boleh memaksa rail mengecil. */
  .v18-admin-stage {
    min-width: 0 !important;
    width: 100% !important;
    align-self: start !important;
  }

  .v18-admin-panel {
    min-width: 0 !important;
    width: 100% !important;
  }

  /*
   * Saat scroll #view-root, rail sticky tetap pada 14px.
   * Tidak membuat admin stage menjadi scroll container kedua.
   */
  #view-root .v18-admin-console,
  #view-root .v18-admin-stage,
  #view-root .v18-admin-panel {
    overflow: visible !important;
  }
}

/* Laptop pendek: TIDAK scale/menciutkan panel.
   Tinggi rail menyesuaikan layar, menu tengah menjadi scroll internal. */
@media (min-width: 921px) and (max-height: 720px) {
  .v18-admin-console > aside.v18-admin-rail {
    top: 10px !important;
    height: calc(100dvh - 88px) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 88px) !important;
  }
}

/* Layar lebar: beri sedikit ruang lebih ke control panel tanpa scale. */
@media (min-width: 1400px) {
  .v18-admin-console {
    grid-template-columns: 236px minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  .v18-admin-console > aside.v18-admin-rail {
    width: 236px !important;
    min-width: 236px !important;
    max-width: 236px !important;
  }
}

/* Mobile/tablet kembali ke layout normal, bukan fixed rail desktop. */
@media (max-width: 920px) {
  .v18-admin-console {
    grid-template-columns: 1fr !important;
  }

  .v18-admin-console > aside.v18-admin-rail {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    transform: none !important;
  }

  .v18-admin-rail > nav.v18-admin-nav {
    overflow: visible !important;
  }
}


/* =========================================================
   MRZ V18.5 — ADMIN SINGLE FIT LOCK
   Tujuan:
   - Satu ukuran / satu fit untuk SEMUA tab Administrator.
   - Tidak berubah saat Pesanan / Member / Tools / Bonus / Materi.
   - Tidak menciut saat viewport desktop lebih lebar atau browser di-zoom out.
   - Tidak ada breakpoint desktop yang mengubah lebar admin rail.
   ========================================================= */

@media (min-width: 921px) {

  /*
   * Admin tidak lagi mengikuti max-width global .v18-content (1480px).
   * Ini penyebab workspace terlihat makin kecil/menengah saat viewport melebar.
   * Khusus halaman Administrator, pakai SELURUH area kanan yang tersedia.
   */
  main#view-root.v18-content:has(.v18-admin-console) {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;

    /* Padding dibuat angka tetap, bukan clamp(), agar fit tidak berubah-ubah. */
    padding-left: 32px !important;
    padding-right: 32px !important;
    padding-top: 27px !important;
  }

  /* Header admin selalu memiliki ukuran yang sama. */
  main#view-root:has(.v18-admin-console) .admin-page-head {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  main#view-root:has(.v18-admin-console) .admin-page-head h1 {
    font-size: 38px !important;
    line-height: 1.08 !important;
  }

  main#view-root:has(.v18-admin-console) .admin-page-head p {
    font-size: 10px !important;
    max-width: 730px !important;
  }

  /* KPI strip = selalu 4 kolom dengan ukuran konsisten. */
  main#view-root:has(.v18-admin-console) .v18-admin-command-strip {
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  main#view-root:has(.v18-admin-console) .v18-admin-command-strip .stat-card {
    min-height: 81px !important;
    padding: 13px 15px !important;
  }

  main#view-root:has(.v18-admin-console) .v18-admin-command-strip .stat-icon {
    width: 37px !important;
    height: 37px !important;
    flex: 0 0 37px !important;
  }

  main#view-root:has(.v18-admin-console) .v18-admin-command-strip .stat-copy span {
    font-size: 8px !important;
  }

  main#view-root:has(.v18-admin-console) .v18-admin-command-strip .stat-copy strong {
    font-size: 21px !important;
  }

  /*
   * SATU FIT ADMIN:
   * Rail SELALU 224px.
   * Stage kanan SELALU mengambil seluruh sisa ruang.
   */
  main#view-root:has(.v18-admin-console) .v18-admin-console {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    grid-template-columns: 224px minmax(0, 1fr) !important;
    gap: 14px !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  main#view-root:has(.v18-admin-console) .v18-admin-console > aside.v18-admin-rail {
    width: 224px !important;
    min-width: 224px !important;
    max-width: 224px !important;

    /* TIDAK PERNAH scale / zoom / shrink */
    transform: none !important;
    scale: 1 !important;
    zoom: 1 !important;
    flex-shrink: 0 !important;
  }

  /* Stage kanan tidak boleh memakai ukuran berdasarkan isi tab. */
  main#view-root:has(.v18-admin-console) .v18-admin-stage,
  main#view-root:has(.v18-admin-console) .v18-admin-panel {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  main#view-root:has(.v18-admin-console) .v18-admin-stage-head {
    width: 100% !important;
    min-height: 90px !important;
    padding: 17px 19px !important;
  }

  main#view-root:has(.v18-admin-console) .v18-admin-stage-head h2 {
    font-size: 16px !important;
  }

  /* Semua table/card tidak boleh memperbesar atau memperkecil parent. */
  main#view-root:has(.v18-admin-console) .admin-table-card,
  main#view-root:has(.v18-admin-console) .admin-table-wrap,
  main#view-root:has(.v18-admin-console) .admin-tool-editor,
  main#view-root:has(.v18-admin-console) .v18-admin-panel > .card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  main#view-root:has(.v18-admin-console) .admin-table-wrap {
    overflow-x: auto !important;
  }

  /*
   * Kelola Tools tetap 2 kolom.
   * Lebar stage yang bertambah tidak mengubah jumlah kolom,
   * sehingga tampilan tidak lompat-lompat antar ukuran desktop.
   */
  main#view-root:has(.v18-admin-console) .admin-tools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  /*
   * Matikan rule V18.4 >=1400px yang sebelumnya mengubah rail 224 -> 236.
   * Sekarang SEMUA desktop memakai ukuran yang sama.
   */
  .v18-admin-console {
    grid-template-columns: 224px minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  .v18-admin-console > aside.v18-admin-rail {
    width: 224px !important;
    min-width: 224px !important;
    max-width: 224px !important;
  }
}

/*
 * Hanya ketika benar-benar masuk tablet/mobile (<921px)
 * layout boleh berubah menjadi satu kolom.
 * Tidak ada perubahan fit lain pada desktop.
 */
@media (max-width: 920px) {
  main#view-root.v18-content:has(.v18-admin-console) {
    width: 100% !important;
    max-width: none !important;
  }
}