/* ========== Overlay ========== */
.sunyi-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.32);
  backdrop-filter: blur(4px);
  z-index: 99998;
  opacity: 0;
  animation: sunyiFadeIn .25s forwards;
  transition: opacity .35s ease;
}

/* ========== Panel ========== */
.sunyi-panel {
  position: fixed; 
  top: 50%; left: 50%;
  transform: translate(-50%, -48%);
  background: #fff;
  padding: 28px 32px;
  width: 360px;
  max-width: 92%;
  border-radius: 14px;
  box-shadow: 0 22px 38px rgba(0,0,0,0.12);
  font-family: "Lato", sans-serif;
  z-index: 99999;
  opacity: 0;
  animation: sunyiFadeIn .28s forwards;
  transition: transform .33s ease-out, opacity .33s ease-out;
}

.sunyi-panel.show {
  transform: translate(-50%, -50%);
}

/* ========== Header ========== */
.sunyi-header {
  font-family: "Cormorant Garamond", serif;
  font-size: 23px;
  margin-bottom: 18px;
  font-weight: 400;
  letter-spacing: .2px;
  opacity: .94;
}

/* ========== Select ========== */
.sunyi-select label {
  font-size: 13px;
  color: #444;
  opacity: .9;
}

.sunyi-select select {
  margin-top: 6px;
  width: 100%;
  padding: 8px 9px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.14);
  background: #fafafa;
  font-size: 14px;
}

/* ========== Content ========== */
.sunyi-content {
  margin-top: 20px;
  min-height: 105px;
  font-size: 14px;
  line-height: 1.62;
  color: #222;
  letter-spacing: .2px;
  transition: opacity .3s ease;
}

.sunyi-line {
  margin-bottom: 8px;
}

.sunyi-content .sunyi-line:first-child {
  font-family: "Cormorant Garamond", serif;
  font-size: 18px;
  margin-bottom: 13px;
  opacity: .98;
}

/* ========== Actions ========== */
.sunyi-actions {
  margin-top: 26px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.sunyi-actions button {
  background: #111;
  color: #fff;
  padding: 8px 14px;
  font-size: 13px;
  border-radius: 7px;
  border: none;
  cursor: pointer;
  transition: background .2s, opacity .28s;
  font-weight: 400;
}

.sunyi-actions button:hover {
  background: #000;
}

.sunyi-actions button.sunyi-disabled {
  opacity: 0.38;
  pointer-events: none;
}

/* ========== Trigger Button ========== */
.btn-latihan-sunyi {
  font-family: "Lato", sans-serif;
  background: #111;
  color: #fff;
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 12px;
  cursor: pointer;
  margin-top: 6px;
  margin-bottom: 10px;
  opacity: .85;
  transition: opacity .2s;
}

.btn-latihan-sunyi:hover {
  opacity: 1;
}

/* ========== Animations ========== */
@keyframes sunyiFadeIn {
  to { opacity: 1; }
}

/* ========== Mobile Detail ========== */
@media (max-width: 480px) {
  .sunyi-panel {
    padding: 24px 22px;
    width: 94%;
    max-width: none;
  }

  .sunyi-actions button {
    padding: 9px;
    flex: 1;
    font-size: 12.5px;
  }
}

/* ==== Force perfect center mobile ==== */
@media (max-width: 600px) {
  .sunyi-panel {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;

    width: 94% !important;
    max-width: 94% !important;

    padding: 22px 19px;
  }

  .sunyi-panel, .sunyi-overlay {
    position: fixed !important;
  }

  .sunyi-actions { gap: 8px; }
}


/* ============================================================
   SISTEM SUNYI
   LATIHAN SUNYI
   GODMODE EDITORIAL PREMIUM SKIN PATCH v1.0
   Visual override only.
   Tempel paling bawah CSS Latihan Sunyi.
   Scope: .sunyi-ritual, .sunyi-panel, .sunyi-overlay
   ============================================================ */


/* ============================================================
   01. LOCAL TOKENS
   ============================================================ */

.sunyi-ritual,
.sunyi-ritual-box,
.sunyi-panel,
.sunyi-overlay {
  --ls-bg: rgba(246,239,229,.76);
  --ls-surface: rgba(255,255,255,.76);
  --ls-card: rgba(255,255,255,.62);

  --ls-text: #172235;
  --ls-text-strong: #111827;
  --ls-muted: rgba(23,34,53,.66);
  --ls-muted-soft: rgba(23,34,53,.48);

  --ls-line: rgba(23,34,53,.105);
  --ls-line-soft: rgba(23,34,53,.070);
  --ls-line-gold: rgba(154,111,53,.24);

  --ls-gold: #9a6f35;
  --ls-gold-strong: #7d5526;
  --ls-gold-soft: rgba(154,111,53,.105);
  --ls-gold-mid: rgba(154,111,53,.16);

  --ls-blue-soft: rgba(67,101,132,.11);
  --ls-shadow: 0 30px 90px rgba(24,34,52,.18);
  --ls-shadow-soft: 0 14px 38px rgba(24,34,52,.10);

  --ls-radius: 28px;
  --ls-radius-sm: 17px;
}

html.ss-darkmode .sunyi-ritual,
body.ss-darkmode .sunyi-ritual,
body.ss-dark-mode .sunyi-ritual,
body[data-theme="dark"] .sunyi-ritual,
html.ss-darkmode .sunyi-ritual-box,
body.ss-darkmode .sunyi-ritual-box,
body.ss-dark-mode .sunyi-ritual-box,
body[data-theme="dark"] .sunyi-ritual-box,
html.ss-darkmode .sunyi-panel,
body.ss-darkmode .sunyi-panel,
body.ss-dark-mode .sunyi-panel,
body[data-theme="dark"] .sunyi-panel,
html.ss-darkmode .sunyi-overlay,
body.ss-darkmode .sunyi-overlay,
body.ss-dark-mode .sunyi-overlay,
body[data-theme="dark"] .sunyi-overlay {
  --ls-bg: rgba(2,7,13,.82);
  --ls-surface: rgba(255,255,255,.066);
  --ls-card: rgba(255,255,255,.060);

  --ls-text: rgba(244,239,230,.84);
  --ls-text-strong: #f4efe6;
  --ls-muted: rgba(244,239,230,.66);
  --ls-muted-soft: rgba(244,239,230,.48);

  --ls-line: rgba(255,255,255,.105);
  --ls-line-soft: rgba(255,255,255,.070);
  --ls-line-gold: rgba(202,167,102,.28);

  --ls-gold: #caa766;
  --ls-gold-strong: #e1c27a;
  --ls-gold-soft: rgba(202,167,102,.115);
  --ls-gold-mid: rgba(202,167,102,.18);

  --ls-blue-soft: rgba(76,121,160,.15);
  --ls-shadow: 0 34px 110px rgba(0,0,0,.66);
  --ls-shadow-soft: 0 16px 44px rgba(0,0,0,.24);
}


/* ============================================================
   02. OVERLAY, NEW RITUAL
   ============================================================ */

.sunyi-ritual {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 18px !important;

  background:
    radial-gradient(circle at 12% 8%, rgba(202,167,102,.16), transparent 31%),
    radial-gradient(circle at 86% 10%, rgba(76,121,160,.18), transparent 38%),
    radial-gradient(circle at 50% 88%, rgba(202,167,102,.075), transparent 34%),
    var(--ls-bg) !important;

  backdrop-filter: blur(14px) saturate(118%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(118%) !important;

  opacity: 0 !important;
  pointer-events: none !important;

  transition:
    opacity .42s ease,
    backdrop-filter .42s ease !important;
}

.sunyi-ritual.show {
  opacity: 1 !important;
  pointer-events: auto !important;
}

html.ss-darkmode .sunyi-ritual,
body.ss-darkmode .sunyi-ritual,
body.ss-dark-mode .sunyi-ritual,
body[data-theme="dark"] .sunyi-ritual {
  background:
    radial-gradient(circle at 12% 8%, rgba(202,167,102,.18), transparent 31%),
    radial-gradient(circle at 86% 10%, rgba(76,121,160,.24), transparent 38%),
    radial-gradient(circle at 50% 88%, rgba(202,167,102,.10), transparent 34%),
    var(--ls-bg) !important;
}


/* ============================================================
   03. RITUAL BOX
   ============================================================ */

.sunyi-ritual-box {
  position: relative !important;

  width: min(620px, 94vw) !important;
  max-height: calc(100dvh - 36px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;

  padding: 34px 34px 28px !important;

  border: 1px solid var(--ls-line-gold) !important;
  border-radius: var(--ls-radius) !important;

  color: var(--ls-text) !important;

  background:
    radial-gradient(circle at 12% 7%, rgba(154,111,53,.13), transparent 32%),
    radial-gradient(circle at 92% 12%, rgba(67,101,132,.12), transparent 38%),
    radial-gradient(circle at 50% 88%, rgba(154,111,53,.055), transparent 36%),
    linear-gradient(90deg, rgba(126,88,35,.018) 0 1px, transparent 1px 100%),
    linear-gradient(145deg, #fbf8f1 0%, #f3eadf 48%, #eaf2f7 100%) !important;
  background-size: auto, auto, auto, 56px 56px, auto !important;

  box-shadow: var(--ls-shadow) !important;

  font-family: Inter, "Lato", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;

  transform: translateY(12px) scale(.985) !important;
  opacity: 0 !important;

  transition:
    transform .52s cubic-bezier(.16,1,.3,1),
    opacity .52s ease !important;

  scrollbar-width: thin !important;
  scrollbar-color: rgba(202,167,102,.56) transparent !important;
}

.sunyi-ritual.show .sunyi-ritual-box {
  transform: translateY(0) scale(1) !important;
  opacity: 1 !important;
}

html.ss-darkmode .sunyi-ritual-box,
body.ss-darkmode .sunyi-ritual-box,
body.ss-dark-mode .sunyi-ritual-box,
body[data-theme="dark"] .sunyi-ritual-box {
  background:
    radial-gradient(circle at 12% 7%, rgba(202,167,102,.14), transparent 32%),
    radial-gradient(circle at 92% 12%, rgba(76,121,160,.16), transparent 38%),
    radial-gradient(circle at 50% 88%, rgba(202,167,102,.08), transparent 36%),
    linear-gradient(90deg, rgba(202,167,102,.014) 0 1px, transparent 1px 100%),
    linear-gradient(145deg, #040a13 0%, #07111d 46%, #0e2034 100%) !important;
  background-size: auto, auto, auto, 56px 56px, auto !important;
}

.sunyi-ritual-box::-webkit-scrollbar {
  width: 8px !important;
}

.sunyi-ritual-box::-webkit-scrollbar-track {
  background: transparent !important;
}

.sunyi-ritual-box::-webkit-scrollbar-thumb {
  border-radius: 999px !important;
  background: rgba(202,167,102,.56) !important;
}

.sunyi-ritual-box::before {
  content: "" !important;
  position: absolute !important;
  left: 34px !important;
  right: 34px !important;
  top: 0 !important;
  height: 1px !important;
  pointer-events: none !important;
  background: linear-gradient(90deg, transparent, var(--ls-gold), transparent) !important;
  opacity: .42 !important;
}


/* ============================================================
   04. TITLE
   ============================================================ */

.sunyi-ritual-title {
  display: block !important;

  margin: 0 0 22px !important;
  padding: 0 !important;

  color: var(--ls-text-strong) !important;

  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(30px, 4vw, 42px) !important;
  line-height: 1.04 !important;
  font-weight: 680 !important;
  letter-spacing: -.038em !important;
  text-align: center !important;
}

.sunyi-ritual-title::before {
  content: "Latihan Sunyi" !important;
  display: block !important;

  margin: 0 0 9px !important;

  color: var(--ls-gold-strong) !important;

  font-family: Inter, "Lato", system-ui, sans-serif !important;
  font-size: 10.5px !important;
  line-height: 1.35 !important;
  font-weight: 850 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}


/* ============================================================
   05. BODY LINES
   ============================================================ */

.sunyi-ritual-body {
  position: relative !important;

  margin: 0 !important;
  padding: 18px 20px !important;

  border: 1px solid var(--ls-line) !important;
  border-radius: 22px !important;

  background:
    radial-gradient(circle at 88% 10%, var(--ls-gold-soft), transparent 34%),
    radial-gradient(circle at 12% 90%, var(--ls-blue-soft), transparent 36%),
    linear-gradient(145deg, rgba(255,255,255,.44), rgba(255,255,255,.18)),
    var(--ls-card) !important;

  box-shadow: var(--ls-shadow-soft) !important;
}

html.ss-darkmode .sunyi-ritual-body,
body.ss-darkmode .sunyi-ritual-body,
body.ss-dark-mode .sunyi-ritual-body,
body[data-theme="dark"] .sunyi-ritual-body {
  background:
    radial-gradient(circle at 88% 10%, rgba(202,167,102,.095), transparent 34%),
    radial-gradient(circle at 12% 90%, rgba(76,121,160,.080), transparent 36%),
    linear-gradient(145deg, rgba(255,255,255,.060), rgba(255,255,255,.024)),
    var(--ls-card) !important;
}

.sunyi-ritual-line {
  display: block !important;

  margin: 0 0 14px !important;
  padding: 0 !important;

  color: var(--ls-text) !important;

  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(20px, 2.6vw, 25px) !important;
  line-height: 1.48 !important;
  font-weight: 520 !important;
  letter-spacing: -.010em !important;
  text-align: center !important;

  opacity: 0 !important;
  transform: translateY(5px) !important;

  animation: sunyiRitualLineIn .52s ease forwards !important;
}

.sunyi-ritual-line:last-child {
  margin-bottom: 0 !important;
}

.sunyi-ritual-line.em {
  color: var(--ls-text-strong) !important;
  font-weight: 620 !important;
}

.sunyi-pulang {
  display: inline !important;
  color: var(--ls-gold-strong) !important;
  font-style: italic !important;
}

@keyframes sunyiRitualLineIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ============================================================
   06. META
   ============================================================ */

.sunyi-ritual-meta,
#sunyiLatihanMeta {
  display: block !important;

  min-height: 0 !important;
  margin: 14px 0 0 !important;
  padding: 0 !important;

  color: var(--ls-muted-soft) !important;

  font-size: 12px !important;
  line-height: 1.45 !important;
  text-align: center !important;
}


/* ============================================================
   07. FOOT BUTTONS
   ============================================================ */

.sunyi-ritual-foot {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;

  gap: 10px !important;

  margin: 22px 0 0 !important;
  padding: 0 !important;
}

.sunyi-ritual-choose,
.sunyi-ritual-close,
#sunyiLatihanChoose,
#sunyiLatihanClose {
  appearance: none !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 38px !important;
  padding: 9px 16px !important;

  border: 1px solid var(--ls-line) !important;
  border-radius: 999px !important;

  font-family: Inter, "Lato", system-ui, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 760 !important;
  letter-spacing: .04em !important;
  text-transform: lowercase !important;

  cursor: pointer !important;

  transition:
    transform .18s ease,
    color .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease !important;
}

.sunyi-ritual-choose,
#sunyiLatihanChoose {
  color: var(--ls-muted) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.070), rgba(255,255,255,.026)),
    rgba(202,167,102,.045) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.070) !important;
}

.sunyi-ritual-close,
#sunyiLatihanClose {
  color: #151107 !important;
  border-color: rgba(180,135,60,.34) !important;
  background: linear-gradient(135deg, #dfbf72, #f0d894) !important;
  box-shadow: 0 14px 34px rgba(202,167,102,.20) !important;
}

.sunyi-ritual-choose:hover,
.sunyi-ritual-close:hover,
#sunyiLatihanChoose:hover,
#sunyiLatihanClose:hover {
  transform: translateY(-1px) !important;
  color: var(--ls-gold-strong) !important;
  border-color: var(--ls-line-gold) !important;
}

.sunyi-ritual-close:hover,
#sunyiLatihanClose:hover {
  color: #151107 !important;
}

html.ss-darkmode .sunyi-ritual-choose,
body.ss-darkmode .sunyi-ritual-choose,
body.ss-dark-mode .sunyi-ritual-choose,
body[data-theme="dark"] .sunyi-ritual-choose,
html.ss-darkmode #sunyiLatihanChoose,
body.ss-darkmode #sunyiLatihanChoose,
body.ss-dark-mode #sunyiLatihanChoose,
body[data-theme="dark"] #sunyiLatihanChoose {
  background: rgba(255,255,255,.050) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.18) !important;
}


/* ============================================================
   08. PICKER
   ============================================================ */

.sunyi-ritual-picker,
#sunyiLatihanPicker {
  display: none !important;

  margin: 18px auto 0 !important;
  padding: 14px !important;

  border: 1px solid var(--ls-line) !important;
  border-radius: 17px !important;

  background:
    radial-gradient(circle at 12% 0%, var(--ls-gold-soft), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.40), rgba(255,255,255,.15)),
    rgba(255,255,255,.26) !important;

  text-align: center !important;
}

.sunyi-ritual-picker.show,
#sunyiLatihanPicker.show {
  display: block !important;
  animation: sunyiPickerIn .22s ease forwards !important;
}

@keyframes sunyiPickerIn {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sunyi-ritual-picker label,
#sunyiLatihanPicker label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;

  margin: 0 8px 0 0 !important;

  color: var(--ls-muted) !important;
  opacity: 1 !important;

  font-family: Inter, "Lato", system-ui, sans-serif !important;
  font-size: 11.5px !important;
  line-height: 1.3 !important;
  font-weight: 760 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.sunyi-ritual-picker select,
#sunyiLatihanSelect {
  appearance: none !important;

  min-width: 190px !important;
  min-height: 36px !important;

  margin: 0 !important;
  padding: 7px 30px 7px 12px !important;

  border: 1px solid var(--ls-line) !important;
  border-radius: 999px !important;

  color: var(--ls-text) !important;
  background:
    linear-gradient(45deg, transparent 50%, var(--ls-muted) 50%),
    linear-gradient(135deg, var(--ls-muted) 50%, transparent 50%),
    rgba(255,255,255,.34) !important;
  background-position:
    calc(100% - 16px) 15px,
    calc(100% - 11px) 15px,
    0 0 !important;
  background-size:
    5px 5px,
    5px 5px,
    auto !important;
  background-repeat: no-repeat !important;

  font-family: Inter, "Lato", system-ui, sans-serif !important;
  font-size: 12.5px !important;
  line-height: 1.2 !important;
  font-weight: 650 !important;

  cursor: pointer !important;
}

html.ss-darkmode .sunyi-ritual-picker,
body.ss-darkmode .sunyi-ritual-picker,
body.ss-dark-mode .sunyi-ritual-picker,
body[data-theme="dark"] .sunyi-ritual-picker,
html.ss-darkmode #sunyiLatihanPicker,
body.ss-darkmode #sunyiLatihanPicker,
body.ss-dark-mode #sunyiLatihanPicker,
body[data-theme="dark"] #sunyiLatihanPicker {
  background:
    radial-gradient(circle at 12% 0%, rgba(202,167,102,.095), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.060), rgba(255,255,255,.024)),
    rgba(255,255,255,.035) !important;
}

html.ss-darkmode #sunyiLatihanSelect,
body.ss-darkmode #sunyiLatihanSelect,
body.ss-dark-mode #sunyiLatihanSelect,
body[data-theme="dark"] #sunyiLatihanSelect {
  background:
    linear-gradient(45deg, transparent 50%, var(--ls-muted) 50%),
    linear-gradient(135deg, var(--ls-muted) 50%, transparent 50%),
    rgba(255,255,255,.050) !important;
  background-position:
    calc(100% - 16px) 15px,
    calc(100% - 11px) 15px,
    0 0 !important;
  background-size:
    5px 5px,
    5px 5px,
    auto !important;
  background-repeat: no-repeat !important;
}


/* ============================================================
   09. YANG MENGETUK
   ============================================================ */

.sunyi-mengetuk-wrap {
  display: block !important;

  margin: 24px 0 0 !important;
  padding: 16px 18px !important;

  border: 1px solid var(--ls-line) !important;
  border-radius: 19px !important;

  background:
    radial-gradient(circle at 88% 10%, var(--ls-gold-soft), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.34), rgba(255,255,255,.12)),
    rgba(255,255,255,.20) !important;

  opacity: 1 !important;

  transition:
    opacity .25s ease,
    transform .25s ease,
    border-color .25s ease !important;
}

.sunyi-mengetuk-wrap:hover {
  opacity: 1 !important;
  border-color: var(--ls-line-gold) !important;
}

html.ss-darkmode .sunyi-mengetuk-wrap,
body.ss-darkmode .sunyi-mengetuk-wrap,
body.ss-dark-mode .sunyi-mengetuk-wrap,
body[data-theme="dark"] .sunyi-mengetuk-wrap {
  background:
    radial-gradient(circle at 88% 10%, rgba(202,167,102,.085), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.020)),
    rgba(255,255,255,.030) !important;
}

.sunyi-mengetuk-rasa {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 6px !important;

  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;
}

.sunyi-mengetuk-item {
  display: block !important;

  margin: 0 !important;
  padding: 7px 10px !important;

  border-radius: 13px !important;

  color: var(--ls-text) !important;

  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 19px !important;
  line-height: 1.38 !important;
  font-weight: 520 !important;
  letter-spacing: -.006em !important;

  cursor: pointer !important;
  opacity: .86 !important;

  transition:
    opacity .18s ease,
    transform .18s ease,
    background .18s ease,
    color .18s ease !important;
}

.sunyi-mengetuk-item::before {
  content: "" !important;
  display: inline-block !important;

  width: 18px !important;
  height: 1px !important;

  margin: 0 8px 5px 0 !important;

  background: var(--ls-gold) !important;
  opacity: .45 !important;
}

.sunyi-mengetuk-item:hover {
  transform: translateY(-1px) !important;
  opacity: 1 !important;
  color: var(--ls-gold-strong) !important;
  background: rgba(255,255,255,.28) !important;
}

.sunyi-mengetuk-item.aktif {
  opacity: 1 !important;
  color: var(--ls-gold-strong) !important;
  background: var(--ls-gold-soft) !important;
  font-style: italic !important;
}

html.ss-darkmode .sunyi-mengetuk-item:hover,
body.ss-darkmode .sunyi-mengetuk-item:hover,
body.ss-dark-mode .sunyi-mengetuk-item:hover,
body[data-theme="dark"] .sunyi-mengetuk-item:hover {
  background: rgba(255,255,255,.055) !important;
}

.sunyi-mengetuk-label {
  display: block !important;

  margin: 14px 0 0 !important;
  padding: 0 !important;

  color: var(--ls-muted-soft) !important;

  font-family: Inter, "Lato", system-ui, sans-serif !important;
  font-size: 10.5px !important;
  line-height: 1.35 !important;
  font-weight: 760 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  text-align: center !important;

  opacity: 1 !important;
}


/* ============================================================
   10. LEGACY OVERLAY AND PANEL
   For old .sunyi-overlay / .sunyi-panel, if still used.
   ============================================================ */

.sunyi-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999998 !important;

  background:
    radial-gradient(circle at 12% 8%, rgba(202,167,102,.16), transparent 31%),
    radial-gradient(circle at 86% 10%, rgba(76,121,160,.18), transparent 38%),
    rgba(2,7,13,.55) !important;

  backdrop-filter: blur(12px) saturate(118%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(118%) !important;
}

.sunyi-panel {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  z-index: 999999 !important;

  width: min(420px, 94vw) !important;
  max-width: 94vw !important;

  padding: 28px 30px !important;

  border: 1px solid var(--ls-line-gold) !important;
  border-radius: 24px !important;

  color: var(--ls-text) !important;

  background:
    radial-gradient(circle at 12% 7%, rgba(154,111,53,.13), transparent 32%),
    radial-gradient(circle at 92% 12%, rgba(67,101,132,.12), transparent 38%),
    linear-gradient(145deg, #fbf8f1 0%, #f3eadf 52%, #eaf2f7 100%) !important;

  box-shadow: var(--ls-shadow) !important;

  font-family: Inter, "Lato", system-ui, sans-serif !important;

  transform: translate(-50%, -50%) !important;
}

html.ss-darkmode .sunyi-panel,
body.ss-darkmode .sunyi-panel,
body.ss-dark-mode .sunyi-panel,
body[data-theme="dark"] .sunyi-panel {
  background:
    radial-gradient(circle at 12% 7%, rgba(202,167,102,.14), transparent 32%),
    radial-gradient(circle at 92% 12%, rgba(76,121,160,.16), transparent 38%),
    linear-gradient(145deg, #040a13 0%, #07111d 52%, #0e2034 100%) !important;
}

.sunyi-header {
  margin: 0 0 18px !important;

  color: var(--ls-text-strong) !important;

  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 28px !important;
  line-height: 1.1 !important;
  font-weight: 680 !important;
  letter-spacing: -.025em !important;
}

.sunyi-select label,
.sunyi-content,
.sunyi-line {
  color: var(--ls-text) !important;
}

.sunyi-select select {
  border: 1px solid var(--ls-line) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.34) !important;
  color: var(--ls-text) !important;
}

.sunyi-actions button,
.btn-latihan-sunyi {
  border: 1px solid rgba(180,135,60,.34) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #dfbf72, #f0d894) !important;
  color: #151107 !important;
}


/* ============================================================
   11. FOCUS
   ============================================================ */

.sunyi-ritual button:focus-visible,
.sunyi-ritual select:focus-visible,
.sunyi-panel button:focus-visible,
.sunyi-panel select:focus-visible,
.btn-latihan-sunyi:focus-visible,
.sunyi-mengetuk-item:focus-visible {
  outline: 2px solid var(--ls-gold) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 3px rgba(154,111,53,.16) !important;
}


/* ============================================================
   12. MOBILE
   ============================================================ */

@media (max-width: 640px) {
  .sunyi-ritual {
    padding: 12px !important;
    align-items: center !important;
  }

  .sunyi-ritual-box {
    width: 100% !important;
    max-height: calc(100dvh - 24px) !important;
    padding: 26px 19px 22px !important;
    border-radius: 23px !important;
  }

  .sunyi-ritual-title {
    font-size: 31px !important;
    margin-bottom: 18px !important;
  }

  .sunyi-ritual-body {
    padding: 16px 15px !important;
    border-radius: 20px !important;
  }

  .sunyi-ritual-line {
    font-size: 20px !important;
    line-height: 1.48 !important;
  }

  .sunyi-ritual-foot {
    gap: 8px !important;
  }

  .sunyi-ritual-choose,
  .sunyi-ritual-close,
  #sunyiLatihanChoose,
  #sunyiLatihanClose {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding-left: 11px !important;
    padding-right: 11px !important;
  }

  .sunyi-ritual-picker,
  #sunyiLatihanPicker {
    padding: 13px !important;
  }

  .sunyi-ritual-picker label,
  #sunyiLatihanPicker label {
    width: 100% !important;
    justify-content: center !important;
    margin: 0 0 8px !important;
  }

  .sunyi-ritual-picker select,
  #sunyiLatihanSelect {
    width: 100% !important;
    min-width: 0 !important;
  }

  .sunyi-mengetuk-wrap {
    margin-top: 20px !important;
    padding: 14px 13px !important;
  }

  .sunyi-mengetuk-item {
    font-size: 17px !important;
    padding: 7px 8px !important;
  }
}

@media (max-width: 420px) {
  .sunyi-ritual-box {
    padding: 24px 16px 20px !important;
  }

  .sunyi-ritual-title {
    font-size: 29px !important;
  }

  .sunyi-ritual-line {
    font-size: 19px !important;
  }

  .sunyi-mengetuk-item {
    font-size: 16px !important;
  }
}


/* ============================================================
   SISTEM SUNYI
   LATIHAN SUNYI
   GODMODE EDITORIAL PREMIUM SKIN PATCH v1.0
   Visual override only.
   Tempel paling bawah CSS Latihan Sunyi.
   Scope: .sunyi-ritual, .sunyi-panel, .sunyi-overlay
   ============================================================ */


/* ============================================================
   01. LOCAL TOKENS
   ============================================================ */

.sunyi-ritual,
.sunyi-ritual-box,
.sunyi-panel,
.sunyi-overlay {
  --ls-bg: rgba(246,239,229,.76);
  --ls-surface: rgba(255,255,255,.76);
  --ls-card: rgba(255,255,255,.62);

  --ls-text: #172235;
  --ls-text-strong: #111827;
  --ls-muted: rgba(23,34,53,.66);
  --ls-muted-soft: rgba(23,34,53,.48);

  --ls-line: rgba(23,34,53,.105);
  --ls-line-soft: rgba(23,34,53,.070);
  --ls-line-gold: rgba(154,111,53,.24);

  --ls-gold: #9a6f35;
  --ls-gold-strong: #7d5526;
  --ls-gold-soft: rgba(154,111,53,.105);
  --ls-gold-mid: rgba(154,111,53,.16);

  --ls-blue-soft: rgba(67,101,132,.11);
  --ls-shadow: 0 30px 90px rgba(24,34,52,.18);
  --ls-shadow-soft: 0 14px 38px rgba(24,34,52,.10);

  --ls-radius: 28px;
  --ls-radius-sm: 17px;
}

html.ss-darkmode .sunyi-ritual,
body.ss-darkmode .sunyi-ritual,
body.ss-dark-mode .sunyi-ritual,
body[data-theme="dark"] .sunyi-ritual,
html.ss-darkmode .sunyi-ritual-box,
body.ss-darkmode .sunyi-ritual-box,
body.ss-dark-mode .sunyi-ritual-box,
body[data-theme="dark"] .sunyi-ritual-box,
html.ss-darkmode .sunyi-panel,
body.ss-darkmode .sunyi-panel,
body.ss-dark-mode .sunyi-panel,
body[data-theme="dark"] .sunyi-panel,
html.ss-darkmode .sunyi-overlay,
body.ss-darkmode .sunyi-overlay,
body.ss-dark-mode .sunyi-overlay,
body[data-theme="dark"] .sunyi-overlay {
  --ls-bg: rgba(2,7,13,.82);
  --ls-surface: rgba(255,255,255,.066);
  --ls-card: rgba(255,255,255,.060);

  --ls-text: rgba(244,239,230,.84);
  --ls-text-strong: #f4efe6;
  --ls-muted: rgba(244,239,230,.66);
  --ls-muted-soft: rgba(244,239,230,.48);

  --ls-line: rgba(255,255,255,.105);
  --ls-line-soft: rgba(255,255,255,.070);
  --ls-line-gold: rgba(202,167,102,.28);

  --ls-gold: #caa766;
  --ls-gold-strong: #e1c27a;
  --ls-gold-soft: rgba(202,167,102,.115);
  --ls-gold-mid: rgba(202,167,102,.18);

  --ls-blue-soft: rgba(76,121,160,.15);
  --ls-shadow: 0 34px 110px rgba(0,0,0,.66);
  --ls-shadow-soft: 0 16px 44px rgba(0,0,0,.24);
}


/* ============================================================
   02. OVERLAY, NEW RITUAL
   ============================================================ */

.sunyi-ritual {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 18px !important;

  background:
    radial-gradient(circle at 12% 8%, rgba(202,167,102,.16), transparent 31%),
    radial-gradient(circle at 86% 10%, rgba(76,121,160,.18), transparent 38%),
    radial-gradient(circle at 50% 88%, rgba(202,167,102,.075), transparent 34%),
    var(--ls-bg) !important;

  backdrop-filter: blur(14px) saturate(118%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(118%) !important;

  opacity: 0 !important;
  pointer-events: none !important;

  transition:
    opacity .42s ease,
    backdrop-filter .42s ease !important;
}

.sunyi-ritual.show {
  opacity: 1 !important;
  pointer-events: auto !important;
}

html.ss-darkmode .sunyi-ritual,
body.ss-darkmode .sunyi-ritual,
body.ss-dark-mode .sunyi-ritual,
body[data-theme="dark"] .sunyi-ritual {
  background:
    radial-gradient(circle at 12% 8%, rgba(202,167,102,.18), transparent 31%),
    radial-gradient(circle at 86% 10%, rgba(76,121,160,.24), transparent 38%),
    radial-gradient(circle at 50% 88%, rgba(202,167,102,.10), transparent 34%),
    var(--ls-bg) !important;
}


/* ============================================================
   03. RITUAL BOX
   ============================================================ */

.sunyi-ritual-box {
  position: relative !important;

  width: min(620px, 94vw) !important;
  max-height: calc(100dvh - 36px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;

  padding: 34px 34px 28px !important;

  border: 1px solid var(--ls-line-gold) !important;
  border-radius: var(--ls-radius) !important;

  color: var(--ls-text) !important;

  background:
    radial-gradient(circle at 12% 7%, rgba(154,111,53,.13), transparent 32%),
    radial-gradient(circle at 92% 12%, rgba(67,101,132,.12), transparent 38%),
    radial-gradient(circle at 50% 88%, rgba(154,111,53,.055), transparent 36%),
    linear-gradient(90deg, rgba(126,88,35,.018) 0 1px, transparent 1px 100%),
    linear-gradient(145deg, #fbf8f1 0%, #f3eadf 48%, #eaf2f7 100%) !important;
  background-size: auto, auto, auto, 56px 56px, auto !important;

  box-shadow: var(--ls-shadow) !important;

  font-family: Inter, "Lato", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;

  transform: translateY(12px) scale(.985) !important;
  opacity: 0 !important;

  transition:
    transform .52s cubic-bezier(.16,1,.3,1),
    opacity .52s ease !important;

  scrollbar-width: thin !important;
  scrollbar-color: rgba(202,167,102,.56) transparent !important;
}

.sunyi-ritual.show .sunyi-ritual-box {
  transform: translateY(0) scale(1) !important;
  opacity: 1 !important;
}

html.ss-darkmode .sunyi-ritual-box,
body.ss-darkmode .sunyi-ritual-box,
body.ss-dark-mode .sunyi-ritual-box,
body[data-theme="dark"] .sunyi-ritual-box {
  background:
    radial-gradient(circle at 12% 7%, rgba(202,167,102,.14), transparent 32%),
    radial-gradient(circle at 92% 12%, rgba(76,121,160,.16), transparent 38%),
    radial-gradient(circle at 50% 88%, rgba(202,167,102,.08), transparent 36%),
    linear-gradient(90deg, rgba(202,167,102,.014) 0 1px, transparent 1px 100%),
    linear-gradient(145deg, #040a13 0%, #07111d 46%, #0e2034 100%) !important;
  background-size: auto, auto, auto, 56px 56px, auto !important;
}

.sunyi-ritual-box::-webkit-scrollbar {
  width: 8px !important;
}

.sunyi-ritual-box::-webkit-scrollbar-track {
  background: transparent !important;
}

.sunyi-ritual-box::-webkit-scrollbar-thumb {
  border-radius: 999px !important;
  background: rgba(202,167,102,.56) !important;
}

.sunyi-ritual-box::before {
  content: "" !important;
  position: absolute !important;
  left: 34px !important;
  right: 34px !important;
  top: 0 !important;
  height: 1px !important;
  pointer-events: none !important;
  background: linear-gradient(90deg, transparent, var(--ls-gold), transparent) !important;
  opacity: .42 !important;
}


/* ============================================================
   04. TITLE
   ============================================================ */

.sunyi-ritual-title {
  display: block !important;

  margin: 0 0 22px !important;
  padding: 0 !important;

  color: var(--ls-text-strong) !important;

  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(22px, 4vw, 24px) !important;
  line-height: 1.04 !important;
  font-weight: 680 !important;
  letter-spacing: -.038em !important;
  text-align: center !important;
}

.sunyi-ritual-title::before {
  content: "Latihan Sunyi" !important;
  display: block !important;

  margin: 0 0 9px !important;

  color: var(--ls-gold-strong) !important;

  font-family: Inter, "Lato", system-ui, sans-serif !important;
  font-size: 10.5px !important;
  line-height: 1.35 !important;
  font-weight: 850 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}


/* ============================================================
   05. BODY LINES
   ============================================================ */

.sunyi-ritual-body {
  position: relative !important;

  margin: 0 !important;
  padding: 18px 20px !important;

  border: 1px solid var(--ls-line) !important;
  border-radius: 22px !important;

  background:
    radial-gradient(circle at 88% 10%, var(--ls-gold-soft), transparent 34%),
    radial-gradient(circle at 12% 90%, var(--ls-blue-soft), transparent 36%),
    linear-gradient(145deg, rgba(255,255,255,.44), rgba(255,255,255,.18)),
    var(--ls-card) !important;

  box-shadow: var(--ls-shadow-soft) !important;
}

html.ss-darkmode .sunyi-ritual-body,
body.ss-darkmode .sunyi-ritual-body,
body.ss-dark-mode .sunyi-ritual-body,
body[data-theme="dark"] .sunyi-ritual-body {
  background:
    radial-gradient(circle at 88% 10%, rgba(202,167,102,.095), transparent 34%),
    radial-gradient(circle at 12% 90%, rgba(76,121,160,.080), transparent 36%),
    linear-gradient(145deg, rgba(255,255,255,.060), rgba(255,255,255,.024)),
    var(--ls-card) !important;
}


.sunyi-ritual-line {
  display: block !important;

  margin: 0 0 14px !important;
  padding: 0 !important;

  color: var(--ls-text) !important;

  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(20px, 2.6vw, 25px) !important;
  line-height: 1.48 !important;
  font-weight: 520 !important;
  letter-spacing: -.010em !important;
  text-align: center !important;

  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

.sunyi-ritual-line.is-visible {
  animation: sunyiRitualLineIn .52s ease both !important;
  animation-delay: var(--sunyi-line-delay, 0ms) !important;
}

.sunyi-ritual-line:last-child {
  margin-bottom: 0 !important;
}

.sunyi-ritual-line.em {
  color: var(--ls-text-strong) !important;
  font-weight: 620 !important;
}

.sunyi-pulang {
  display: inline !important;
  color: var(--ls-gold-strong) !important;
  font-style: italic !important;
}

@keyframes sunyiRitualLineIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ============================================================
   06. META
   ============================================================ */

.sunyi-ritual-meta,
#sunyiLatihanMeta {
  display: block !important;

  min-height: 0 !important;
  margin: 14px 0 0 !important;
  padding: 0 !important;

  color: var(--ls-muted-soft) !important;

  font-size: 12px !important;
  line-height: 1.45 !important;
  text-align: center !important;
}


/* ============================================================
   07. FOOT BUTTONS
   ============================================================ */

.sunyi-ritual-foot {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;

  gap: 10px !important;

  margin: 22px 0 0 !important;
  padding: 0 !important;
}

.sunyi-ritual-choose,
.sunyi-ritual-close,
#sunyiLatihanChoose,
#sunyiLatihanClose {
  appearance: none !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 38px !important;
  padding: 9px 16px !important;

  border: 1px solid var(--ls-line) !important;
  border-radius: 999px !important;

  font-family: Inter, "Lato", system-ui, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 760 !important;
  letter-spacing: .04em !important;
  text-transform: lowercase !important;

  cursor: pointer !important;

  transition:
    transform .18s ease,
    color .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease !important;
}

.sunyi-ritual-choose,
#sunyiLatihanChoose {
  color: var(--ls-muted) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.070), rgba(255,255,255,.026)),
    rgba(202,167,102,.045) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.070) !important;
}

.sunyi-ritual-close,
#sunyiLatihanClose {
  color: #151107 !important;
  border-color: rgba(180,135,60,.34) !important;
  background: linear-gradient(135deg, #dfbf72, #f0d894) !important;
  box-shadow: 0 14px 34px rgba(202,167,102,.20) !important;
}

.sunyi-ritual-choose:hover,
.sunyi-ritual-close:hover,
#sunyiLatihanChoose:hover,
#sunyiLatihanClose:hover {
  transform: translateY(-1px) !important;
  color: var(--ls-gold-strong) !important;
  border-color: var(--ls-line-gold) !important;
}

.sunyi-ritual-close:hover,
#sunyiLatihanClose:hover {
  color: #151107 !important;
}

html.ss-darkmode .sunyi-ritual-choose,
body.ss-darkmode .sunyi-ritual-choose,
body.ss-dark-mode .sunyi-ritual-choose,
body[data-theme="dark"] .sunyi-ritual-choose,
html.ss-darkmode #sunyiLatihanChoose,
body.ss-darkmode #sunyiLatihanChoose,
body.ss-dark-mode #sunyiLatihanChoose,
body[data-theme="dark"] #sunyiLatihanChoose {
  background: rgba(255,255,255,.050) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.18) !important;
}


/* ============================================================
   08. PICKER
   ============================================================ */

.sunyi-ritual-picker,
#sunyiLatihanPicker {
  display: none !important;

  margin: 18px auto 0 !important;
  padding: 14px !important;

  border: 1px solid var(--ls-line) !important;
  border-radius: 17px !important;

  background:
    radial-gradient(circle at 12% 0%, var(--ls-gold-soft), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.40), rgba(255,255,255,.15)),
    rgba(255,255,255,.26) !important;

  text-align: center !important;
}

.sunyi-ritual-picker.show,
#sunyiLatihanPicker.show {
  display: block !important;
  animation: sunyiPickerIn .22s ease forwards !important;
}

@keyframes sunyiPickerIn {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sunyi-ritual-picker label,
#sunyiLatihanPicker label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;

  margin: 0 8px 0 0 !important;

  color: var(--ls-muted) !important;
  opacity: 1 !important;

  font-family: Inter, "Lato", system-ui, sans-serif !important;
  font-size: 11.5px !important;
  line-height: 1.3 !important;
  font-weight: 760 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.sunyi-ritual-picker select,
#sunyiLatihanSelect {
  appearance: none !important;

  min-width: 190px !important;
  min-height: 36px !important;

  margin: 0 !important;
  padding: 7px 30px 7px 12px !important;

  border: 1px solid var(--ls-line) !important;
  border-radius: 999px !important;

  color: var(--ls-text) !important;
  background:
    linear-gradient(45deg, transparent 50%, var(--ls-muted) 50%),
    linear-gradient(135deg, var(--ls-muted) 50%, transparent 50%),
    rgba(255,255,255,.34) !important;
  background-position:
    calc(100% - 16px) 15px,
    calc(100% - 11px) 15px,
    0 0 !important;
  background-size:
    5px 5px,
    5px 5px,
    auto !important;
  background-repeat: no-repeat !important;

  font-family: Inter, "Lato", system-ui, sans-serif !important;
  font-size: 12.5px !important;
  line-height: 1.2 !important;
  font-weight: 650 !important;

  cursor: pointer !important;
}

html.ss-darkmode .sunyi-ritual-picker,
body.ss-darkmode .sunyi-ritual-picker,
body.ss-dark-mode .sunyi-ritual-picker,
body[data-theme="dark"] .sunyi-ritual-picker,
html.ss-darkmode #sunyiLatihanPicker,
body.ss-darkmode #sunyiLatihanPicker,
body.ss-dark-mode #sunyiLatihanPicker,
body[data-theme="dark"] #sunyiLatihanPicker {
  background:
    radial-gradient(circle at 12% 0%, rgba(202,167,102,.095), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.060), rgba(255,255,255,.024)),
    rgba(255,255,255,.035) !important;
}

html.ss-darkmode #sunyiLatihanSelect,
body.ss-darkmode #sunyiLatihanSelect,
body.ss-dark-mode #sunyiLatihanSelect,
body[data-theme="dark"] #sunyiLatihanSelect {
  background:
    linear-gradient(45deg, transparent 50%, var(--ls-muted) 50%),
    linear-gradient(135deg, var(--ls-muted) 50%, transparent 50%),
    rgba(255,255,255,.050) !important;
  background-position:
    calc(100% - 16px) 15px,
    calc(100% - 11px) 15px,
    0 0 !important;
  background-size:
    5px 5px,
    5px 5px,
    auto !important;
  background-repeat: no-repeat !important;
}


/* ============================================================
   09. YANG MENGETUK
   ============================================================ */

.sunyi-mengetuk-wrap {
  display: block !important;

  margin: 24px 0 0 !important;
  padding: 16px 18px !important;

  border: 1px solid var(--ls-line) !important;
  border-radius: 19px !important;

  background:
    radial-gradient(circle at 88% 10%, var(--ls-gold-soft), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.34), rgba(255,255,255,.12)),
    rgba(255,255,255,.20) !important;

  opacity: 1 !important;

  transition:
    opacity .25s ease,
    transform .25s ease,
    border-color .25s ease !important;
}

.sunyi-mengetuk-wrap:hover {
  opacity: 1 !important;
  border-color: var(--ls-line-gold) !important;
}

html.ss-darkmode .sunyi-mengetuk-wrap,
body.ss-darkmode .sunyi-mengetuk-wrap,
body.ss-dark-mode .sunyi-mengetuk-wrap,
body[data-theme="dark"] .sunyi-mengetuk-wrap {
  background:
    radial-gradient(circle at 88% 10%, rgba(202,167,102,.085), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.020)),
    rgba(255,255,255,.030) !important;
}

.sunyi-mengetuk-rasa {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 6px !important;

  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;
}

.sunyi-mengetuk-item {
  display: block !important;

  margin: 0 !important;
  padding: 7px 10px !important;

  border-radius: 13px !important;

  color: var(--ls-text) !important;

  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 19px !important;
  line-height: 1.38 !important;
  font-weight: 520 !important;
  letter-spacing: -.006em !important;

  cursor: pointer !important;
  opacity: .86 !important;

  transition:
    opacity .18s ease,
    transform .18s ease,
    background .18s ease,
    color .18s ease !important;
}

.sunyi-mengetuk-item::before {
  content: "" !important;
  display: inline-block !important;

  width: 18px !important;
  height: 1px !important;

  margin: 0 8px 5px 0 !important;

  background: var(--ls-gold) !important;
  opacity: .45 !important;
}

.sunyi-mengetuk-item:hover {
  transform: translateY(-1px) !important;
  opacity: 1 !important;
  color: var(--ls-gold-strong) !important;
  background: rgba(255,255,255,.28) !important;
}

.sunyi-mengetuk-item.aktif {
  opacity: 1 !important;
  color: var(--ls-gold-strong) !important;
  background: var(--ls-gold-soft) !important;
  font-style: italic !important;
}

html.ss-darkmode .sunyi-mengetuk-item:hover,
body.ss-darkmode .sunyi-mengetuk-item:hover,
body.ss-dark-mode .sunyi-mengetuk-item:hover,
body[data-theme="dark"] .sunyi-mengetuk-item:hover {
  background: rgba(255,255,255,.055) !important;
}

.sunyi-mengetuk-label {
  display: block !important;

  margin: 14px 0 0 !important;
  padding: 0 !important;

  color: var(--ls-muted-soft) !important;

  font-family: Inter, "Lato", system-ui, sans-serif !important;
  font-size: 10.5px !important;
  line-height: 1.35 !important;
  font-weight: 760 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  text-align: center !important;

  opacity: 1 !important;
}


/* ============================================================
   10. LEGACY OVERLAY AND PANEL
   For old .sunyi-overlay / .sunyi-panel, if still used.
   ============================================================ */

.sunyi-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999998 !important;

  background:
    radial-gradient(circle at 12% 8%, rgba(202,167,102,.16), transparent 31%),
    radial-gradient(circle at 86% 10%, rgba(76,121,160,.18), transparent 38%),
    rgba(2,7,13,.55) !important;

  backdrop-filter: blur(12px) saturate(118%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(118%) !important;
}

.sunyi-panel {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  z-index: 999999 !important;

  width: min(420px, 94vw) !important;
  max-width: 94vw !important;

  padding: 28px 30px !important;

  border: 1px solid var(--ls-line-gold) !important;
  border-radius: 24px !important;

  color: var(--ls-text) !important;

  background:
    radial-gradient(circle at 12% 7%, rgba(154,111,53,.13), transparent 32%),
    radial-gradient(circle at 92% 12%, rgba(67,101,132,.12), transparent 38%),
    linear-gradient(145deg, #fbf8f1 0%, #f3eadf 52%, #eaf2f7 100%) !important;

  box-shadow: var(--ls-shadow) !important;

  font-family: Inter, "Lato", system-ui, sans-serif !important;

  transform: translate(-50%, -50%) !important;
}

html.ss-darkmode .sunyi-panel,
body.ss-darkmode .sunyi-panel,
body.ss-dark-mode .sunyi-panel,
body[data-theme="dark"] .sunyi-panel {
  background:
    radial-gradient(circle at 12% 7%, rgba(202,167,102,.14), transparent 32%),
    radial-gradient(circle at 92% 12%, rgba(76,121,160,.16), transparent 38%),
    linear-gradient(145deg, #040a13 0%, #07111d 52%, #0e2034 100%) !important;
}

.sunyi-header {
  margin: 0 0 18px !important;

  color: var(--ls-text-strong) !important;

  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 28px !important;
  line-height: 1.1 !important;
  font-weight: 680 !important;
  letter-spacing: -.025em !important;
}

.sunyi-select label,
.sunyi-content,
.sunyi-line {
  color: var(--ls-text) !important;
}

.sunyi-select select {
  border: 1px solid var(--ls-line) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.34) !important;
  color: var(--ls-text) !important;
}

.sunyi-actions button,
.btn-latihan-sunyi {
  border: 1px solid rgba(180,135,60,.34) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #dfbf72, #f0d894) !important;
  color: #151107 !important;
}


/* ============================================================
   11. FOCUS
   ============================================================ */

.sunyi-ritual button:focus-visible,
.sunyi-ritual select:focus-visible,
.sunyi-panel button:focus-visible,
.sunyi-panel select:focus-visible,
.btn-latihan-sunyi:focus-visible,
.sunyi-mengetuk-item:focus-visible {
  outline: 2px solid var(--ls-gold) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 3px rgba(154,111,53,.16) !important;
}


/* ============================================================
   12. MOBILE
   ============================================================ */

@media (max-width: 640px) {
  .sunyi-ritual {
    padding: 12px !important;
    align-items: center !important;
  }

  .sunyi-ritual-box {
    width: 100% !important;
    max-height: calc(100dvh - 24px) !important;
    padding: 26px 19px 22px !important;
    border-radius: 23px !important;
  }

  .sunyi-ritual-title {
    font-size: 24px !important;
    margin-bottom: 18px !important;
  }

  .sunyi-ritual-body {
    padding: 16px 15px !important;
    border-radius: 20px !important;
  }

  .sunyi-ritual-line {
    font-size: 20px !important;
    line-height: 1.48 !important;
  }

  .sunyi-ritual-foot {
    gap: 8px !important;
  }

  .sunyi-ritual-choose,
  .sunyi-ritual-close,
  #sunyiLatihanChoose,
  #sunyiLatihanClose {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding-left: 11px !important;
    padding-right: 11px !important;
  }

  .sunyi-ritual-picker,
  #sunyiLatihanPicker {
    padding: 13px !important;
  }

  .sunyi-ritual-picker label,
  #sunyiLatihanPicker label {
    width: 100% !important;
    justify-content: center !important;
    margin: 0 0 8px !important;
  }

  .sunyi-ritual-picker select,
  #sunyiLatihanSelect {
    width: 100% !important;
    min-width: 0 !important;
  }

  .sunyi-mengetuk-wrap {
    margin-top: 20px !important;
    padding: 14px 13px !important;
  }

  .sunyi-mengetuk-item {
    font-size: 17px !important;
    padding: 7px 8px !important;
  }
}

@media (max-width: 420px) {
  .sunyi-ritual-box {
    padding: 24px 16px 20px !important;
  }

  .sunyi-ritual-title {
    font-size: 24px !important;
  }

  .sunyi-ritual-line {
    font-size: 19px !important;
  }

  .sunyi-mengetuk-item {
    font-size: 16px !important;
  }
}


/* ============================================================
   SISTEM SUNYI
   SATU NAPAS
   GODMODE EDITORIAL PREMIUM SKIN PATCH v1.0
   Shared file: latihan-sunyi.css
   Scope: #sunyi-ritus
   ============================================================ */

#sunyi-ritus {
  --ritus-bg: rgba(246,239,229,.78);
  --ritus-card: rgba(255,255,255,.72);
  --ritus-text: #172235;
  --ritus-text-strong: #111827;
  --ritus-muted: rgba(23,34,53,.62);
  --ritus-muted-soft: rgba(23,34,53,.46);
  --ritus-line: rgba(23,34,53,.105);
  --ritus-line-gold: rgba(154,111,53,.24);
  --ritus-gold: #9a6f35;
  --ritus-gold-strong: #7d5526;
  --ritus-gold-soft: rgba(154,111,53,.105);
  --ritus-blue-soft: rgba(67,101,132,.11);
  --ritus-shadow: 0 34px 100px rgba(24,34,52,.20);

  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 18px !important;

  background:
    radial-gradient(circle at 12% 8%, rgba(202,167,102,.16), transparent 31%),
    radial-gradient(circle at 86% 10%, rgba(76,121,160,.18), transparent 38%),
    radial-gradient(circle at 50% 88%, rgba(202,167,102,.075), transparent 34%),
    var(--ritus-bg) !important;

  backdrop-filter: blur(14px) saturate(118%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(118%) !important;

  opacity: 0 !important;
  pointer-events: none !important;

  transition: opacity .42s ease !important;
}

html.ss-darkmode #sunyi-ritus,
body.ss-darkmode #sunyi-ritus,
body.ss-dark-mode #sunyi-ritus,
body[data-theme="dark"] #sunyi-ritus {
  --ritus-bg: rgba(2,7,13,.84);
  --ritus-card: rgba(255,255,255,.066);
  --ritus-text: rgba(244,239,230,.84);
  --ritus-text-strong: #f4efe6;
  --ritus-muted: rgba(244,239,230,.66);
  --ritus-muted-soft: rgba(244,239,230,.48);
  --ritus-line: rgba(255,255,255,.105);
  --ritus-line-gold: rgba(202,167,102,.28);
  --ritus-gold: #caa766;
  --ritus-gold-strong: #e1c27a;
  --ritus-gold-soft: rgba(202,167,102,.115);
  --ritus-blue-soft: rgba(76,121,160,.15);
  --ritus-shadow: 0 34px 110px rgba(0,0,0,.66);

  background:
    radial-gradient(circle at 12% 8%, rgba(202,167,102,.18), transparent 31%),
    radial-gradient(circle at 86% 10%, rgba(76,121,160,.24), transparent 38%),
    radial-gradient(circle at 50% 88%, rgba(202,167,102,.10), transparent 34%),
    var(--ritus-bg) !important;
}

#sunyi-ritus.show {
  opacity: 1 !important;
  pointer-events: auto !important;
}

#sunyi-ritus,
#sunyi-ritus *,
#sunyi-ritus *::before,
#sunyi-ritus *::after {
  box-sizing: border-box !important;
}

#sunyi-ritus .ritus-wrap {
  position: relative !important;

  width: min(620px, 94vw) !important;
  min-height: 320px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 44px 38px 38px !important;

  border: 1px solid var(--ritus-line-gold) !important;
  border-radius: 30px !important;

  color: var(--ritus-text) !important;

  background:
    radial-gradient(circle at 12% 7%, rgba(154,111,53,.13), transparent 32%),
    radial-gradient(circle at 92% 12%, rgba(67,101,132,.12), transparent 38%),
    radial-gradient(circle at 50% 88%, rgba(154,111,53,.055), transparent 36%),
    linear-gradient(90deg, rgba(126,88,35,.018) 0 1px, transparent 1px 100%),
    linear-gradient(145deg, #fbf8f1 0%, #f3eadf 48%, #eaf2f7 100%) !important;
  background-size: auto, auto, auto, 56px 56px, auto !important;

  box-shadow: var(--ritus-shadow) !important;

  font-family: Inter, "Lato", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;

  transform: translateY(12px) scale(.985) !important;
  opacity: 0 !important;

  transition:
    transform .52s cubic-bezier(.16,1,.3,1),
    opacity .52s ease !important;

  overflow: hidden !important;
}

#sunyi-ritus.show .ritus-wrap {
  transform: translateY(0) scale(1) !important;
  opacity: 1 !important;
}

html.ss-darkmode #sunyi-ritus .ritus-wrap,
body.ss-darkmode #sunyi-ritus .ritus-wrap,
body.ss-dark-mode #sunyi-ritus .ritus-wrap,
body[data-theme="dark"] #sunyi-ritus .ritus-wrap {
  background:
    radial-gradient(circle at 12% 7%, rgba(202,167,102,.14), transparent 32%),
    radial-gradient(circle at 92% 12%, rgba(76,121,160,.16), transparent 38%),
    radial-gradient(circle at 50% 88%, rgba(202,167,102,.08), transparent 36%),
    linear-gradient(90deg, rgba(202,167,102,.014) 0 1px, transparent 1px 100%),
    linear-gradient(145deg, #040a13 0%, #07111d 46%, #0e2034 100%) !important;
  background-size: auto, auto, auto, 56px 56px, auto !important;
}

#sunyi-ritus .ritus-wrap::before {
  content: "Satu Napas" !important;
  display: block !important;

  position: absolute !important;
  top: 30px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  color: var(--ritus-gold-strong) !important;

  font-family: Inter, "Lato", system-ui, sans-serif !important;
  font-size: 10.5px !important;
  line-height: 1.35 !important;
  font-weight: 850 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

#sunyi-ritus .ritus-wrap::after {
  content: "" !important;
  position: absolute !important;
  left: 34px !important;
  right: 34px !important;
  top: 0 !important;
  height: 1px !important;
  pointer-events: none !important;
  background: linear-gradient(90deg, transparent, var(--ritus-gold), transparent) !important;
  opacity: .42 !important;
}

#sunyi-ritus .ritus-line {
  display: block !important;
  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  color: var(--ritus-text) !important;

  font-family: Georgia, "Times New Roman", serif !important;
  text-align: center !important;

  transition:
    opacity .55s ease,
    transform .55s ease,
    color .25s ease !important;
}

#sunyi-ritus .ritus-breath {
  margin-top: 18px !important;

  color: var(--ritus-text-strong) !important;

  font-size: clamp(20px, 4vw, 23px) !important;
  line-height: 1.08 !important;
  font-weight: 680 !important;
  letter-spacing: -.04em !important;
}

#sunyi-ritus .ritus-quote {
  max-width: 520px !important;
  margin-top: 22px !important;

  color: var(--ritus-text) !important;

  font-size: clamp(21px, 2.7vw, 28px) !important;
  line-height: 1.46 !important;
  font-weight: 520 !important;
  letter-spacing: -.014em !important;
}

#sunyi-ritus .ritus-credit {
  margin-top: 24px !important;

  color: var(--ritus-muted-soft) !important;

  font-family: Inter, "Lato", system-ui, sans-serif !important;
  font-size: 11.5px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;

  transition: opacity .55s ease !important;
}

#sunyi-ritus .ritus-credit a {
  color: var(--ritus-gold-strong) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(154,111,53,.30) !important;
}

#sunyi-ritus .ritus-credit a:hover {
  color: var(--ritus-gold) !important;
  border-bottom-color: var(--ritus-gold) !important;
}

@media (max-width: 640px) {
  #sunyi-ritus {
    padding: 12px !important;
  }

  #sunyi-ritus .ritus-wrap {
    width: 100% !important;
    min-height: 300px !important;
    padding: 42px 20px 32px !important;
    border-radius: 24px !important;
  }

  #sunyi-ritus .ritus-wrap::before {
    top: 25px !important;
  }

  #sunyi-ritus .ritus-breath {
    font-size: 31px !important;
  }

  #sunyi-ritus .ritus-quote {
    font-size: 21px !important;
    line-height: 1.48 !important;
  }
}

@media (max-width: 420px) {
  #sunyi-ritus .ritus-wrap {
    min-height: 280px !important;
    padding: 40px 17px 30px !important;
  }

  #sunyi-ritus .ritus-breath {
    font-size: 29px !important;
  }

  #sunyi-ritus .ritus-quote {
    font-size: 20px !important;
  }
}