.gssr-reader {
  --gssr-primary: #1a3a5c;
  --gssr-primary-soft: #eaf1f8;
  --gssr-border: #d8dee6;
  --gssr-text: #222;
  --gssr-muted: #667085;
  --gssr-surface: #fff;
  --gssr-surface-alt: #f7f8fa;
  --gssr-pending: #8a4b08;
  --gssr-pending-bg: #fff4df;
  color: var(--gssr-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  max-width: 980px;
  margin: 0 auto;
}

.gssr-reader *,
.gssr-reader *::before,
.gssr-reader *::after { box-sizing: border-box; }

.gssr-toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--gssr-surface) 94%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--gssr-border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 18px;
  box-shadow: 0 4px 18px rgba(25, 42, 62, 0.07);
}

.gssr-toolbar-row,
.gssr-navigation {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
}

.gssr-toolbar-row label {
  display: block;
  color: var(--gssr-muted);
  font-size: .82rem;
  font-weight: 650;
  margin-bottom: 4px;
}

.gssr-language,
.gssr-ang-input,
.gssr-reader button {
  font: inherit;
}

.gssr-language,
.gssr-ang-input {
  border: 1px solid var(--gssr-border);
  border-radius: 8px;
  background: var(--gssr-surface);
  min-height: 42px;
  padding: 7px 10px;
}

.gssr-ang-jump { display: grid; grid-template-columns: minmax(80px, 110px) auto; align-items: end; }
.gssr-ang-jump label { grid-column: 1 / -1; }
.gssr-ang-input { width: 100%; border-radius: 8px 0 0 8px; }

.gssr-reader button {
  border: 1px solid var(--gssr-primary);
  border-radius: 8px;
  background: var(--gssr-surface);
  color: var(--gssr-primary);
  min-height: 42px;
  padding: 8px 13px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, opacity .15s ease;
}

.gssr-reader button:hover:not(:disabled),
.gssr-reader button:focus-visible {
  background: var(--gssr-primary-soft);
}

.gssr-reader button:disabled { opacity: .38; cursor: not-allowed; }
.gssr-go-ang { border-radius: 0 8px 8px 0 !important; background: var(--gssr-primary) !important; color: #fff !important; }

.gssr-mode-switch { display: inline-flex; margin-left: auto; }
.gssr-mode-switch .gssr-mode-button { border-radius: 0; }
.gssr-mode-switch .gssr-mode-button:first-child { border-radius: 8px 0 0 8px; }
.gssr-mode-switch .gssr-mode-button:last-child { border-radius: 0 8px 8px 0; margin-left: -1px; }
.gssr-mode-button.is-active { background: var(--gssr-primary); color: #fff; }

.gssr-navigation {
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--gssr-border);
  margin-top: 12px;
  padding-top: 12px;
}

.gssr-current-title { font-weight: 750; color: var(--gssr-primary); font-size: 1.12rem; text-align: center; }
.gssr-status { border-radius: 8px; padding: 12px 14px; margin-bottom: 16px; }
.gssr-status.is-loading { background: var(--gssr-primary-soft); color: var(--gssr-primary); }
.gssr-status.is-error { background: #fff0f0; color: #a22323; border: 1px solid #f0c4c4; }

.gssr-shabad {
  background: var(--gssr-surface);
  border: 1px solid var(--gssr-border);
  border-radius: 14px;
  margin: 0 0 24px;
  overflow: hidden;
}

.gssr-shabad-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--gssr-surface-alt);
  border-bottom: 1px solid var(--gssr-border);
  padding: 12px 16px;
}

.gssr-shabad-header h2 { font-size: 1.08rem; margin: 0; color: var(--gssr-primary); }
.gssr-shabad-meta { color: var(--gssr-muted); font-size: .86rem; }
.gssr-open-shabad { min-height: 34px !important; padding: 5px 10px !important; margin-left: auto; font-size: .86rem !important; }
.gssr-continuation { margin: 0; padding: 9px 16px; background: #fdf8eb; color: #70531a; font-size: .88rem; }
.gssr-back-button { margin: 0 0 14px; }

.gssr-verse {
  position: relative;
  padding: 22px 48px 22px 22px;
  border-bottom: 1px solid var(--gssr-border);
  scroll-margin-top: 150px;
}
.gssr-verse:last-child { border-bottom: 0; }
.gssr-verse:target { background: #fffbea; }

.gssr-gurmukhi {
  font-family: "GurbaniAkhar", "Noto Sans Gurmukhi", "Nirmala UI", sans-serif;
  font-size: clamp(1.45rem, 3vw, 2rem);
  line-height: 1.55;
  margin: 0 0 5px;
  color: #172033;
}

.gssr-transliteration { color: var(--gssr-muted); font-size: 1rem; margin: 0 0 12px; font-style: italic; }
.gssr-translation { font-size: 1.08rem; }
.gssr-translation p { margin: 0; }
.gssr-translation-study { border-left: 3px solid var(--gssr-primary); padding-left: 13px; }
.gssr-unavailable { color: var(--gssr-muted); font-style: italic; }

.gssr-pending-badge {
  display: inline-block;
  margin-top: 9px;
  padding: 4px 8px;
  border: 1px solid #efc98a;
  border-radius: 999px;
  background: var(--gssr-pending-bg);
  color: var(--gssr-pending);
  font-size: .78rem;
  font-weight: 700;
}

.gssr-notes { margin-top: 14px; border-top: 1px dashed var(--gssr-border); padding-top: 10px; }
.gssr-notes summary { color: var(--gssr-primary); cursor: pointer; font-weight: 650; }
.gssr-notes ul { margin: 10px 0 0 1.2rem; }
.gssr-notes li { margin-bottom: 8px; }
.gssr-notes small { display: inline-block; margin-left: 8px; color: var(--gssr-muted); font-size: .7rem; text-transform: uppercase; }
.gssr-shabad > .gssr-notes { margin: 0; padding: 12px 18px; background: #fbfcfd; }

.gssr-verse-link {
  position: absolute;
  right: 13px;
  top: 20px;
  color: var(--gssr-muted);
  font-size: .72rem;
  text-decoration: none;
  opacity: .55;
}
.gssr-verse-link:hover { opacity: 1; }

@media (max-width: 700px) {
  .gssr-toolbar { position: static; }
  .gssr-mode-switch { margin-left: 0; width: 100%; }
  .gssr-mode-switch button { flex: 1; }
  .gssr-navigation { display: grid; grid-template-columns: 1fr 1fr; }
  .gssr-current-title { grid-column: 1 / -1; grid-row: 1; }
  .gssr-prev-ang, .gssr-next-ang { width: 100%; }
  .gssr-verse { padding: 18px 38px 18px 16px; }
  .gssr-open-shabad { width: 100%; margin-left: 0; }
}