/* Theme preset: D — Easa Arts cool blue brand */
:root {
  /* Day — #7e7e7e shell, light page surface */
  --shell-bg: #7e7e7e;
  --library-bg: #f0f0f0;
  --page-surface: #f0f0f0;
  --bg-0: #7e7e7e;
  --bg-1: #f0f0f0;
  --ink: #ececec;
  --ink-dim: #d0d0d0;
  --title-ink: #555555;
  --ink-muted: #d8d8d8;
  --ink-control: #e8e8e8;
  --page-ink: #333333;
  --ink-icon: #b3b3b3;
  --line: #6a6a6a;
  --line-soft: #737373;
  --line-mid: #707070;
  --line-chip: #737373;
  --btn-hover: #e8e8e8;
  --accent: #ececec;
  --accent-strong: #686868;
  --chip-active-fg: #f0f0f0;
  --filter-hover: #707070;
  --filter-active: #686868;
  --writer: #333333;
  --select-bg: #f0f0f0;

  /* Toolbars — flat Photoshop-style chrome */
  --toolbar-bg: #323232;
  --toolbar-bg-2: #3c3c3c;
  --bg-2: #3c3c3c;
  --bg-3: #3c3c3c;
  --btn-bg: #3c3c3c;
  --btn-border: #555555;
  --toolbar-divider: #1e1e1e;
  --toolbar-divider-light: #4a4a4a;
  --toolbar-line: #1e1e1e;
  --toolbar-line-chip: #4a4a4a;
  --toolbar-line-mid: #1e1e1e;
  --toolbar-line-soft: #4a4a4a;
  --toolbar-ink-muted: #b3b3b3;
  --toolbar-ink-control: #d0d0d0;
  --toolbar-btn-hover: #474747;
  --toolbar-accent: #d0d0d0;
  --brand-text: #c8c8c8;

  --toolbar-h: 52px;
  --toolbar2-h: 36px;
  --toolbar-nav-row-h: 0px;
  --bars-total: calc(var(--toolbar-h) + var(--safe-top));
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --touch-min: 44px;
  --poem-col-max: 680px;
  --page-gutter: max(12px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --line-indent-step: 2.25rem;
  --poem-start-inset: 6rem;
  --icon-stroke: 1.25;
  --page-border: #c8c8c8;
  --page-title-border: #d8d8d8;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html, body {
  font-family: "Faruma", "MV Boli", Arial, sans-serif;
  direction: rtl;
  unicode-bidi: embed;
  margin: 0;
  padding: 0;
  background: var(--shell-bg);
  color: var(--ink);
  min-height: 100%;
  min-height: 100dvh;
  overflow-x: hidden;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Fonts loaded dynamically from fonts-config.js */

/* ----------------- Top Toolbar ----------------- */
#toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--toolbar-h) + var(--safe-top));
  padding-top: var(--safe-top);
  box-sizing: border-box;
  background: var(--toolbar-bg);
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
  z-index: 900;
  border-bottom: 1px solid var(--toolbar-divider);
  box-shadow: none;
  direction: ltr !important;
}

#brandGroup {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  flex: 0 0 auto;
  padding-right: 12px;
  border-right: 1px solid var(--toolbar-divider-light);
  height: calc(var(--toolbar-h) - 12px);
}

#appLogo {
  width: 34px;
  height: 34px;
  display: block;
  object-fit: contain;
  background: #0a0e24;
  border-radius: 6px;
  filter: none;
  pointer-events: none;
}

#appName {
  font-size: 16px;
  color: var(--brand-text);
  font-family: "Faruma", "EasaIce", sans-serif;
  pointer-events: none;
}

#toolbarNav {
  display: none;
  box-sizing: border-box;
}

#toolbarNav::-webkit-scrollbar {
  display: none;
}

body.editor-mode #toolbarNav {
  display: none;
}

#toolbarNav .toolbar-select {
  height: 36px;
  min-height: 36px;
  font-size: 13px;
  padding: 0 12px;
  border-radius: 0;
  border: none;
  border-left: 1px solid var(--toolbar-divider-light);
  background: transparent;
  color: var(--toolbar-ink-control);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  box-shadow: none;
  margin: 0;
  transition: background 0.15s;
}

#toolbarNav .toolbar-select:first-child {
  border-left: none;
}

#toolbarNav .toolbar-select:hover {
  background: var(--toolbar-btn-hover);
}

#toolbarNav .toolbar-select option {
  font-family: "Faruma", "MV Boli", Arial, sans-serif !important;
  direction: rtl;
  background: var(--bg-2);
  color: var(--ink-icon);
}

#toolbarIcons {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0;
  padding-left: 4px;
  margin-left: auto;
  height: calc(var(--toolbar-h) - 12px);
}

#toolbarIcons button {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  border: none;
  border-left: 1px solid var(--toolbar-divider-light);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-icon);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
  box-shadow: none;
}

#toolbarIcons button:hover {
  background: var(--toolbar-btn-hover);
  box-shadow: none;
}

#toolbarIcons svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  fill: none;
  vector-effect: non-scaling-stroke;
}

#toolbarIcons button.toolbar-text-btn {
  width: auto;
  min-width: 0;
  padding: 0 10px;
  font-family: "Faruma", "MV Boli", Arial, sans-serif;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--ink-icon);
}

#fullscreenBtn.active {
  background: var(--toolbar-btn-hover);
  color: var(--toolbar-accent);
}

/* ----------------- Second Toolbar (editor only; mobile row / desktop inline) ----------------- */
#toolbar2 {
  display: none;
}

body.editor-mode #toolbar2 {
  display: none;
}

#toolbar2 > * {
  flex: 0 0 auto;
}

#toolbar2 button {
  height: var(--toolbar2-h);
  min-height: var(--toolbar2-h);
  padding: 0 12px;
  min-width: var(--touch-min);
  border: none;
  border-left: 1px solid var(--toolbar-divider-light);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  color: var(--toolbar-ink-muted);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}

#toolbar2 button:first-child {
  border-left: none;
}

#toolbar2 button:hover {
  background: var(--toolbar-btn-hover);
}

#toolbar2 .iconBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
}

#toolbar2 svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  fill: none;
  display: block;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}

#toolbar2 .toolbar-select {
  font-size: 14px;
  height: var(--toolbar2-h);
  min-height: var(--toolbar2-h);
  padding: 0 12px;
  border-radius: 0;
  border: none;
  border-left: 1px solid var(--toolbar-divider-light);
  background: transparent;
  color: var(--toolbar-ink-control);
  min-width: 148px;
  max-width: none;
  cursor: pointer;
  font-family: "Faruma", "MV Boli", Arial, sans-serif !important;
  direction: rtl;
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none;
}

#toolbar2 .toolbar-select option {
  font-family: "Faruma", "MV Boli", Arial, sans-serif !important;
  direction: rtl;
  background: var(--bg-2);
  color: var(--ink-icon);
}

#categorySelect {
  min-width: 112px;
  max-width: 140px;
  font-family: "Faruma", "MV Boli", Arial, sans-serif !important;
  direction: rtl;
}

#categorySelect option {
  font-family: "Faruma", "MV Boli", Arial, sans-serif !important;
}

#fontSelector {
  min-width: 108px;
  max-width: 148px;
  font-family: Arial, sans-serif !important;
}

#fontSelector option {
  font-family: Arial, sans-serif !important;
}

#stanzaSelector {
  min-width: 108px;
  max-width: 132px;
  font-family: "Faruma", "MV Boli", Arial, sans-serif !important;
  direction: rtl;
}

/* ----------------- Toggle Buttons ----------------- */
.colorBtn {
  border: none;
  border-left: 1px solid var(--toolbar-divider-light);
  border-radius: 0;
  font-size: 13px;
  padding: 0 12px;
  min-width: var(--touch-min);
  min-height: var(--toolbar2-h);
  background: transparent;
  color: var(--toolbar-ink-muted);
  cursor: pointer;
  transition: background 0.15s;
  touch-action: manipulation;
}

.colorBtn:hover {
  background: var(--toolbar-btn-hover);
}

.colorBtn.active {
  background: var(--accent-strong);
  color: #e3e3e3;
}

/* ----------------- Library ----------------- */
#libraryView {
  margin-top: calc(var(--toolbar-h) + var(--safe-top));
  padding: 8px var(--page-gutter) calc(8px + var(--safe-bottom));
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  background: var(--shell-bg);
  min-height: calc(100dvh - var(--toolbar-h) - var(--safe-top));
  box-sizing: border-box;
}

#poemList {
  list-style: none;
  padding: 0;
}

#poemList li {
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  margin-bottom: 10px;
  border-radius: 0;
  background: var(--bg-1);
  font-family: "Faruma", "MV Boli", Arial, sans-serif;
  color: var(--page-ink);
  transition: background 0.15s, border-color 0.15s;
  box-shadow: none;
}

#poemList li:hover {
  background: #e8e8e8;
}

#poemList button {
  color: #707070;
}

#poemList button:hover {
  color: var(--page-ink);
}

/* Category Filter Bar */
#categoryFilterBar {
  display: flex;
  justify-content: center;
  gap: 0;
  margin: 4px 0 10px 0;
  flex-wrap: wrap;
  border: 1px solid var(--line);
}

#categoryFilterBar button {
  padding: 10px 14px;
  min-height: 36px;
  border: none;
  border-left: 1px solid var(--line-chip);
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  font-family: "Faruma", "MV Boli", Arial, sans-serif;
  font-size: 14px;
  color: var(--ink-muted);
  transition: background 0.15s;
  touch-action: manipulation;
}

#categoryFilterBar button:hover {
  background: var(--filter-hover);
  color: var(--ink);
}

#categoryFilterBar button.active {
  background: var(--filter-active);
  color: var(--ink);
}

/* ----------------- Editor ----------------- */
body.editor-mode #libraryView {
  display: none;
}

#editorView {
  display: none;
  padding-top: var(--bars-total);
  padding-bottom: var(--safe-bottom);
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
  background: var(--shell-bg);
  min-height: 100dvh;
  box-sizing: border-box;
}

body.editor-mode #editorView {
  display: block;
}

#editorPage {
  width: 100%;
  max-width: var(--poem-col-max);
  margin: 0 auto;
  background: var(--library-bg);
  min-height: calc(100dvh - var(--bars-total) - var(--safe-bottom));
  box-sizing: border-box;
  border: 1px solid var(--page-border);
  box-shadow: none;
  padding-bottom: 8px;
  color: var(--page-ink);
}

/* Editor scroll model (all sizes): pin body, one scroller, no nested poem scroll */
body.editor-mode {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-width: 100vw;
  overflow: hidden;
}

body.editor-mode #editorView {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: var(--bars-total);
  padding: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-width: 100vw;
}

body.install-ui-visible.editor-mode #editorView {
  bottom: calc(72px + env(safe-area-inset-bottom));
}

body.editor-mode #editorPage {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: var(--poem-col-max);
  margin: 0 auto;
  border: 1px solid var(--page-border);
  border-radius: 0;
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  overflow-anchor: none;
  scroll-padding-bottom: 2rem;
  padding-bottom: 2rem;
}

body.editor-mode #poetryArea {
  display: block;
  flex: none;
  min-height: 0;
  height: auto;
  overflow: visible !important;
  max-width: 100%;
  padding-bottom: 1rem;
}

#poemTitle,
#poemByline,
#poetryArea {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
  background: transparent;
}

#poemTitle {
  display: block;
  width: 100%;
  max-width: 100%;
  text-align: center;
  font-size: clamp(22px, 5vw, 28px);
  font-weight: 700;
  margin-bottom: 0;
  padding: 14px 12px 6px;
  padding-inline-start: var(--poem-start-inset);
  padding-inline-end: var(--poem-start-inset);
  outline: none;
  direction: rtl;
  unicode-bidi: plaintext;
  border: none;
  box-shadow: none;
  font-family: "EasaIce", "Faruma", "MV Boli", Arial, sans-serif;
  color: var(--title-ink);
  -webkit-text-fill-color: currentColor;
  background: transparent;
  -webkit-user-select: text;
  user-select: text;
  cursor: text;
  box-sizing: border-box;
  min-height: 1.4em;
  white-space: pre-wrap;
  word-break: break-word;
}

#poemByline {
  display: block;
  width: 100%;
  max-width: 100%;
  text-align: center;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  margin: 0 0 4px;
  padding: 2px 12px 12px;
  padding-inline-start: var(--poem-start-inset);
  padding-inline-end: var(--poem-start-inset);
  outline: none;
  direction: rtl;
  unicode-bidi: plaintext;
  border: none;
  border-bottom: 1px solid var(--page-title-border);
  box-shadow: none;
  font-family: "Faruma", "MV Boli", Arial, sans-serif;
  color: var(--title-ink);
  opacity: 0.78;
  -webkit-text-fill-color: currentColor;
  background: transparent;
  -webkit-user-select: text;
  user-select: text;
  cursor: text;
  box-sizing: border-box;
  min-height: 1.2em;
  white-space: pre-wrap;
  word-break: break-word;
}

#poemTitle[data-placeholder].is-empty::before,
#poemByline[data-placeholder].is-empty::before {
  content: attr(data-placeholder);
  color: var(--title-ink);
  opacity: 0.35;
  font-weight: 400;
  pointer-events: none;
}

#poemTitle.is-empty::before {
  font-size: 24px;
  font-family: "EasaIce", "Faruma", sans-serif;
}

#poetryArea {
  font-size: clamp(18px, 4.5vw, 22px);
  direction: rtl;
  unicode-bidi: embed;
  outline: none;
  border: none;
  box-shadow: none;
  padding: 14px 12px;
  padding-inline-start: var(--poem-start-inset);
  padding-inline-end: 12px;
  font-family: "Faruma", "MV Boli", Arial, sans-serif;
  color: var(--writer);
  background: transparent;
  line-height: 1.85;
  min-height: 12rem;
  max-width: 100%;
  overflow-x: hidden;
  -webkit-user-select: text;
  user-select: text;
  cursor: text;
}

.stanza {
  margin-bottom: 14px;
  border: none;
  outline: none;
  box-shadow: none;
  font-family: "Faruma", "MV Boli", Arial, sans-serif;
  position: relative;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

#toolDock {
  display: none;
}

#poetryArea.free-mode .stanza {
  margin-bottom: 0;
}

/* މިނިވަން — A4 paper, equal side margins, page-by-page scroll */
:root {
  --a4-w: 210mm;
  --a4-h: 297mm;
  --a4-margin-x: 18mm;
  --a4-margin-y: 20mm;
  --a4-gap-h: 40mm;
}

body.editor-mode.free-a4 #editorView {
  background: var(--page-surface);
  align-items: center;
  justify-content: center;
  padding: 12px var(--page-gutter);
  box-sizing: border-box;
  overflow: hidden;
}

body.editor-mode.free-a4 #editorPage,
body.editor-mode #editorPage.free-a4-page {
  width: min(var(--a4-w), calc(100% - 8px));
  max-width: var(--a4-w);
  height: min(var(--a4-h), calc(100dvh - var(--bars-total) - 24px));
  min-height: min(var(--a4-h), calc(100dvh - var(--bars-total) - 24px));
  margin: 0 auto;
  border: 1px solid #c0c0c0;
  border-radius: 2px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: none;
  scroll-behavior: auto;
  overflow-anchor: none;
  scroll-padding-bottom: 0;
  padding-bottom: 0;
  background: var(--page-surface);
}

body.editor-mode.free-a4 #poemTitle,
body.editor-mode.free-a4 #poemByline {
  padding-inline-start: var(--a4-margin-x);
  padding-inline-end: var(--a4-margin-x);
}

body.editor-mode.free-a4 #poemTitle {
  padding-top: 14px;
  padding-bottom: 4px;
  box-sizing: border-box;
}

body.editor-mode.free-a4 #poemByline {
  padding-top: 0;
  padding-bottom: 12px;
  box-sizing: border-box;
}

body.editor-mode.free-a4 #poetryArea.free-mode {
  /* Equal side margins + top/bottom page margins */
  padding-top: var(--a4-margin-y);
  padding-bottom: var(--a4-margin-y);
  padding-inline-start: var(--a4-margin-x);
  padding-inline-end: var(--a4-margin-x);
  box-sizing: border-box;
  /* Solid paper — never paint break lines through transparent text */
  background: var(--page-surface);
  background-image: none;
}

/* Page break = empty margin + hairline only (no grey band) */
body.editor-mode.free-a4 .a4-page-gap {
  display: block;
  width: calc(100% + 2 * var(--a4-margin-x));
  margin-inline-start: calc(var(--a4-margin-x) * -1);
  margin-inline-end: calc(var(--a4-margin-x) * -1);
  height: var(--a4-gap-h, calc(var(--a4-margin-y) * 2));
  min-height: calc(var(--a4-margin-y) * 2);
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  border: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
  box-sizing: border-box;
  background: transparent;
  box-shadow: none;
  flex-shrink: 0;
}

body.editor-mode.free-a4 .a4-page-gap::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 50%;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  transform: translateY(-50%);
}

body.night.editor-mode.free-a4 .a4-page-gap {
  background: transparent;
  box-shadow: none;
}

body.night.editor-mode.free-a4 .a4-page-gap::before {
  border-top-color: rgba(255, 255, 255, 0.16);
}

/* Keep glyphs on paper so nothing shows “through” a break band */
body.editor-mode.free-a4 #poetryArea.free-mode .line {
  background: var(--page-surface);
}

@media (max-width: 900px) {
  :root {
    --a4-margin-x: 14mm;
    --a4-margin-y: 16mm;
  }

  body.editor-mode.free-a4 #editorView {
    padding: 8px 8px;
  }

  body.editor-mode.free-a4 #editorPage,
  body.editor-mode #editorPage.free-a4-page {
    width: min(var(--a4-w), 100%);
    max-width: 100%;
    height: calc(100dvh - var(--bars-total) - 16px);
    min-height: calc(100dvh - var(--bars-total) - 16px);
    border-left: none;
    border-right: none;
    box-shadow: none;
  }

  /* Override generic mobile full-bleed when in free A4 */
  body.editor-mode.free-a4 #editorPage {
    margin: 0 auto;
    padding-bottom: 0;
    scroll-padding-bottom: 0;
  }
}

@media (min-width: 901px) {
  body.editor-mode.free-a4 #editorView {
    padding-left: calc(var(--tool-dock-w) + var(--page-gutter));
    padding-right: var(--page-gutter);
  }
}

.line {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 1.6em;
  text-align: right;
  direction: rtl;
  unicode-bidi: isolate;
  outline: none;
  border: none;
  box-shadow: none;
  background: transparent;
  margin: 0;
  padding: 4px 0;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  line-height: 1.85;
  font-family: "Faruma", "MV Boli", Arial, sans-serif;
  font-size: inherit;
  color: inherit;
  cursor: text;
  overflow-x: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  -webkit-user-select: text;
  user-select: text;
}

div.line[contenteditable="true"] {
  resize: none;
  overflow: visible;
  field-sizing: content;
}

/* Thaana sits low — thin grey underline with extra offset */
#poemTitle span[style*="underline"],
#poemByline span[style*="underline"],
.line span[style*="underline"],
#poemTitle u,
#poemByline u,
.line u {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 0.5px;
  text-decoration-color: rgba(90, 90, 90, 0.45);
  text-underline-offset: 0.42em;
}

body.night #poemTitle span[style*="underline"],
body.night #poemByline span[style*="underline"],
body.night .line span[style*="underline"],
body.night #poemTitle u,
body.night #poemByline u,
body.night .line u {
  text-decoration-color: rgba(200, 200, 200, 0.4);
}

.line::selection,
#poetryArea::selection,
#poemTitle::selection,
#poemByline::selection {
  background: rgba(0, 0, 0, 0.12);
}

#newPoemLink {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  cursor: pointer;
  padding: 14px;
  min-height: var(--touch-min);
  font-size: 16px;
  color: var(--ink-muted);
  touch-action: manipulation;
  transition: color 0.15s, background 0.15s;
}

#newPoemLink .newPoemPlus {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  fill: none;
  flex-shrink: 0;
  pointer-events: none;
}

#newPoemLink:hover {
  color: var(--ink);
  background: var(--filter-hover);
}

/* ----------------- Night Mode — Photoshop dark ----------------- */
body.night #editorPage {
  box-shadow: none;
  border-color: var(--page-border);
}

body.night #poemTitle,
body.night #poemByline {
  border-bottom-color: var(--page-title-border);
}

body.night {
  /* Workspace darker than toolbars (#323232) */
  --shell-bg: #1a1a1a;
  --library-bg: #262626;
  --page-surface: #2a2a2a;
  --bg-0: #1a1a1a;
  --bg-1: #2e2e2e;
  --title-ink: #d0d0d0;
  --chip-active-fg: #f0f0f0;
  --filter-hover: #333333;
  --filter-active: #3d3d3d;
  --ink: #d9d9d9;
  --ink-dim: #a8a8a8;
  --ink-muted: #b8b8b8;
  --ink-control: #d0d0d0;
  --line: #3a3a3a;
  --line-soft: #333333;
  --line-mid: #383838;
  --line-chip: #333333;
  --btn-hover: #333333;
  --accent: #d0d0d0;
  --accent-strong: #5a5a5a;
  --writer: #ececec;
  --select-bg: #3c3c3c;

  /* Toolbars — same flat PS chrome as day */
  --toolbar-bg: #323232;
  --toolbar-bg-2: #3c3c3c;
  --toolbar-divider: #1e1e1e;
  --toolbar-divider-light: #4a4a4a;
  --toolbar-line: #1e1e1e;
  --toolbar-line-chip: #4a4a4a;
  --toolbar-line-mid: #1e1e1e;
  --toolbar-line-soft: #4a4a4a;
  --toolbar-ink-muted: #b3b3b3;
  --toolbar-ink-control: #d0d0d0;
  --toolbar-btn-hover: #474747;
  --toolbar-accent: #d0d0d0;
  --brand-text: #c8c8c8;
  --ink-icon: #b3b3b3;
  --btn-border: #555555;
  --bg-2: #3c3c3c;
  --bg-3: #3c3c3c;
  --page-border: #242424;
  --page-title-border: #282828;
}

body.night #categoryFilterBar button {
  color: var(--ink-muted);
}

body.night #categoryFilterBar button:hover,
body.night #categoryFilterBar button.active {
  color: var(--ink);
}

body.night #newPoemLink {
  color: var(--ink-muted);
}

body.night #newPoemLink:hover {
  color: var(--ink);
  background: var(--filter-hover);
}

body.night #poemList li:hover {
  background: var(--btn-hover);
}

body.night .line::selection,
body.night #poetryArea::selection,
body.night #poemTitle::selection,
body.night #poemByline::selection {
  background: rgba(255, 255, 255, 0.18);
}

body.night #categorySelect,
body.night #fontSelector {
  color: var(--toolbar-ink-control);
}

body.night .colorBtn.active {
  background: #5a5a5a;
  color: #f0f0f0;
}

/* ----------------- Responsive ----------------- */
@media (min-width: 768px) {
  :root {
    --toolbar-h: 64px;
    --poem-col-max: 720px;
  }

  #appLogo {
    height: 38px;
  }

  #appName {
    font-size: 17px;
  }
}

@media (min-width: 901px) {
  :root {
    --page-gutter: 4rem;
    --line-indent-step: calc(2.25rem + 2rem);
    --bars-total: calc(var(--toolbar-h) + var(--safe-top));
    --tool-dock-w: 52px;
  }

  body.editor-mode #toolDock {
    display: block;
    position: fixed;
    left: 0;
    top: calc(var(--toolbar-h) + var(--safe-top));
    bottom: 0;
    width: var(--tool-dock-w);
    z-index: 850;
    background: var(--toolbar-bg);
    border-right: 1px solid var(--toolbar-divider);
    box-sizing: border-box;
  }

  body.editor-mode #toolbar2 {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    position: static;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 6px 0;
    margin: 0;
    background: transparent;
    border: none;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
  }

  body.editor-mode #toolbar2 button,
  body.editor-mode #toolbar2 .colorBtn {
    width: 100%;
    min-width: 0;
    height: 42px;
    min-height: 42px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid var(--toolbar-divider-light);
    font-size: 12px;
    color: var(--toolbar-ink-muted);
    background: transparent;
    transition: background 0.15s, color 0.15s;
  }

  body.editor-mode #toolbar2 button:hover,
  body.editor-mode #toolbar2 .colorBtn:hover {
    background: var(--toolbar-btn-hover);
    color: var(--toolbar-ink-control);
  }

  body.editor-mode #toolbar2 .colorBtn.active {
    background: var(--toolbar-btn-hover);
    color: var(--toolbar-accent);
    box-shadow: inset 3px 0 0 var(--toolbar-accent);
  }

  body.editor-mode #toolbar2 .iconBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  body.editor-mode #toolbar2 .iconBtn svg {
    width: 17px;
    height: 17px;
  }

  body.editor-mode #toolbar2 .toolDockTextBtn {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.02em;
  }

  body.editor-mode #toolbar2 #decreaseSize,
  body.editor-mode #toolbar2 #decreaseSpacing {
    border-top: 1px solid var(--toolbar-divider);
  }

  body.editor-mode #toolbar2 button:first-child {
    border-left: none;
  }

  body.editor-mode #editorView {
    padding-left: calc(var(--tool-dock-w) + var(--page-gutter));
    padding-right: var(--page-gutter);
    box-sizing: border-box;
  }

  body.editor-mode #editorPage {
    max-width: var(--poem-col-max);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid var(--page-border);
    scroll-padding-bottom: 2rem;
    padding-bottom: 2rem;
  }

  body.editor-mode #toolbarNav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    position: fixed;
    top: calc(var(--safe-top) + 6px);
    left: calc(var(--tool-dock-w) + var(--page-gutter));
    right: var(--page-gutter);
    width: auto;
    max-width: var(--poem-col-max);
    margin-left: auto;
    margin-right: auto;
    height: calc(var(--toolbar-h) - 12px);
    pointer-events: none;
    z-index: 901;
    background: transparent;
    border: none;
    overflow: hidden;
    flex: none;
  }

  body.editor-mode #toolbarNav .toolbar-select {
    flex: 0 1 auto;
    min-width: 96px;
    max-width: 148px;
    width: auto;
    padding: 0 10px;
    font-size: 12px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    pointer-events: auto;
  }

  body.editor-mode #categorySelect {
    max-width: 120px;
  }

  body.editor-mode #stanzaSelector {
    max-width: 112px;
  }

  body.editor-mode #fontSelector {
    max-width: 132px;
    font-size: 11px;
  }
}

@media (max-width: 900px) {
  :root {
    --toolbar-h: 48px;
    --toolbar2-h: 40px;
    --toolbar-nav-row-h: 0px;
    --poem-col-max: none;
    --page-gutter: max(10px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
    --line-indent-step: calc(0.875rem + 3rem);
    --poem-start-inset: 1.25rem;
  }

  /* Mobile editor: row1 toolbar, row2 toolbar2, row3 toolbarNav */
  body.editor-mode {
    --toolbar-nav-row-h: 40px;
    --bars-total: calc(var(--toolbar-h) + var(--toolbar2-h) + var(--toolbar-nav-row-h) + var(--safe-top));
  }

  body.editor-mode #toolbar {
    height: calc(var(--toolbar-h) + var(--safe-top));
  }

  body.editor-mode #toolbar2 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    flex-direction: row;
    position: fixed;
    top: calc(var(--toolbar-h) + var(--safe-top));
    left: 0;
    right: 0;
    width: 100%;
    height: var(--toolbar2-h);
    margin: 0;
    padding: 0 max(8px, env(safe-area-inset-left));
    box-sizing: border-box;
    background: var(--toolbar-bg-2);
    z-index: 850;
    border-bottom: 1px solid var(--toolbar-divider);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body.editor-mode #toolDock {
    display: contents;
  }

  #toolbar2::-webkit-scrollbar {
    display: none;
  }

  body.editor-mode #toolbarNav {
    display: flex;
    position: fixed;
    top: calc(var(--toolbar-h) + var(--toolbar2-h) + var(--safe-top));
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    height: var(--toolbar-nav-row-h);
    min-height: var(--toolbar-nav-row-h);
    margin: 0;
    padding: 0;
    background: var(--toolbar-bg);
    border: none;
    border-bottom: 1px solid var(--toolbar-divider);
    z-index: 840;
    pointer-events: auto;
    grid-template-columns: none;
    justify-content: stretch;
    align-items: stretch;
    overflow: hidden;
  }

  body.editor-mode #toolbarNav .toolbar-select {
    flex: 1 1 33.33%;
    width: 33.33%;
    min-width: 0;
    max-width: none;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0 4px;
    font-size: 11px;
    border-radius: 0;
    border: none;
    border-left: 1px solid var(--toolbar-divider-light);
    box-sizing: border-box;
    pointer-events: auto;
  }

  body.editor-mode #toolbarNav .toolbar-select:first-child {
    border-left: none;
  }

  body.editor-mode #categorySelect,
  body.editor-mode #stanzaSelector,
  body.editor-mode #fontSelector {
    justify-self: unset;
    grid-column: unset;
    min-width: 0;
    max-width: none;
  }

  #libraryView {
    max-width: none;
  }

  #appName {
    font-size: 15px;
  }

  #appLogo {
    height: 30px;
  }

  #toolbarIcons {
    gap: 0;
    padding-right: 0;
    justify-content: flex-end;
  }

  #toolbarIcons button {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
  }

  #toolbarIcons button.toolbar-text-btn {
    width: auto;
    min-width: 0;
    padding: 0 8px;
    font-size: 11px;
  }

  body.editor-mode #appName {
    display: none;
  }

  body.editor-mode #editorPage {
    max-width: 100%;
    margin: 0;
    border: none;
    border-radius: 0;
    /* Do NOT use large scroll-padding — browser focus-scroll uses it and jumps the page */
    scroll-padding-bottom: 12px;
    padding-bottom: min(36vh, 260px);
  }

  #poemList li {
    padding: 14px;
  }

}

@media (max-width: 380px) {
  #appName {
    font-size: 14px;
  }

  #toolbar2 .toolbar-select {
    min-width: 132px;
    font-size: 13px;
  }
}

.install-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 12px 14px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #3d7ef0 0%, #173feb 100%);
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(23, 63, 235, 0.28);
}
.install-card-logo {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  flex: 0 0 auto;
  object-fit: cover;
}
.install-card-text {
  flex: 1 1 auto;
  min-width: 0;
}
.install-card-text strong {
  display: block;
  font-family: "Faruma", "MV Boli", Arial, sans-serif;
  font-size: 15px;
  font-weight: normal;
  margin-bottom: 4px;
}
.install-card-text p {
  margin: 0;
  font-family: "Faruma", "MV Boli", Arial, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  opacity: 0.92;
}
.install-card-btn,
.install-bar-btn,
.install-sheet-btn {
  flex: 0 0 auto;
  border: none;
  background: #fff;
  color: #173feb;
  font-family: "Faruma", "MV Boli", Arial, sans-serif;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.install-bar-btn--ghost {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.install-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #2d72ee 0%, #173feb 100%);
  color: #fff;
  box-shadow: 0 -4px 24px rgba(23, 63, 235, 0.35);
}
.install-bar-logo {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  flex: 0 0 auto;
  object-fit: cover;
}
.install-bar-msg {
  flex: 1 1 auto;
  margin: 0;
  font-family: "Faruma", "MV Boli", Arial, sans-serif;
  font-size: 12px;
  line-height: 1.45;
  min-width: 0;
}
.install-bar-close {
  flex: 0 0 auto;
  border: none;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.update-bar {
  position: fixed;
  bottom: calc(12px + env(safe-area-inset-bottom));
  left: 12px;
  right: 12px;
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 420px;
  margin: 0 auto;
  padding: 10px 12px;
  border-radius: 12px;
  background: #1f1f1f;
  color: #f5f5f5;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.update-bar-msg {
  flex: 1 1 auto;
  margin: 0;
  font-family: "Faruma", "MV Boli", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  min-width: 0;
}

.update-bar-btn {
  flex: 0 0 auto;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  font-family: "Faruma", "MV Boli", Arial, sans-serif;
  font-size: 13px;
  background: #173feb;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}

.update-bar-btn:hover {
  filter: brightness(1.08);
}

.update-bar-close {
  flex: 0 0 auto;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

body.night .update-bar {
  background: #111;
  border-color: rgba(255, 255, 255, 0.16);
}

.updated-toast {
  position: fixed;
  bottom: calc(18px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 10001;
  padding: 10px 18px;
  border-radius: 999px;
  background: #1a7f4b;
  color: #fff;
  font-family: "Faruma", "MV Boli", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.3;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
  pointer-events: none;
  animation: updatedToastIn 0.25s ease-out;
}

.updated-toast[hidden] {
  display: none !important;
}

@keyframes updatedToastIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.install-sheet {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.install-sheet[hidden] {
  display: none !important;
}

/* ----------------- Share sheet ----------------- */
.share-sheet {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.share-sheet[hidden] {
  display: none !important;
}
.share-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}
.share-sheet-panel {
  position: relative;
  width: min(100%, 420px);
  margin: 12px;
  padding: 20px 18px calc(18px + env(safe-area-inset-bottom));
  background: #fff;
  border-radius: 16px 16px 12px 12px;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.2);
  text-align: center;
}
.share-sheet-close {
  position: absolute;
  top: 10px;
  left: 10px;
  border: none;
  background: #eef2f7;
  color: #333;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.share-sheet-panel h2 {
  margin: 8px 0 6px;
  font-size: 20px;
  font-weight: normal;
  font-family: "Faruma", "MV Boli", Arial, sans-serif;
  color: #173feb;
}
.share-sheet-note {
  margin: 0 0 16px;
  font-size: 14px;
  color: #627d98;
  line-height: 1.6;
  font-family: "Faruma", "MV Boli", Arial, sans-serif;
}
.share-sheet-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.share-sheet-btn {
  width: 100%;
  border: none;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 16px;
  font-family: "Faruma", "MV Boli", Arial, sans-serif;
  cursor: pointer;
  background: linear-gradient(180deg, #3d7ef0 0%, #173feb 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(23, 63, 235, 0.25);
}
.share-sheet-btn--ghost {
  background: #eef2f7;
  color: #173feb;
  box-shadow: none;
}
.share-sheet-btn:hover {
  filter: brightness(1.03);
}
body.night .share-sheet-panel {
  background: #1e2430;
  color: #e8f0fa;
}
body.night .share-sheet-panel h2 {
  color: #7ab0fa;
}
body.night .share-sheet-note {
  color: #9fb3c8;
}
body.night .share-sheet-close {
  background: #2d3748;
  color: #e8f0fa;
}
body.night .share-sheet-btn--ghost {
  background: #2d3748;
  color: #9ae3fd;
}

.install-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}
.install-sheet-panel {
  position: relative;
  width: min(100%, 420px);
  margin: 12px;
  padding: 20px 18px calc(18px + env(safe-area-inset-bottom));
  background: #fff;
  border-radius: 16px 16px 12px 12px;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.2);
  text-align: center;
}
.install-sheet-close {
  position: absolute;
  top: 10px;
  left: 10px;
  border: none;
  background: #eef2f7;
  color: #333;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
}
.install-sheet-logo {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  margin-bottom: 12px;
}
.install-sheet-panel h2 {
  font-family: "Faruma", "MV Boli", Arial, sans-serif;
  font-size: 20px;
  font-weight: normal;
  color: #173feb;
  margin: 0 0 14px;
}
.install-steps {
  text-align: right;
  margin: 0 0 14px;
  padding: 0 18px 0 0;
  font-family: "Faruma", "MV Boli", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.8;
  color: #333;
}
.install-steps li {
  margin-bottom: 6px;
}
.install-ios-share {
  display: inline-block;
  padding: 1px 8px;
  background: #eef2f7;
  border-radius: 6px;
  font-weight: bold;
}
.install-sheet-note {
  margin: 0;
  font-family: "Faruma", "MV Boli", Arial, sans-serif;
  font-size: 12px;
  line-height: 1.6;
  color: #666;
}

body.install-ui-visible #libraryView,
body.install-ui-visible #editorView {
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}

/* Never show install prompts inside the installed app */
@media (display-mode: standalone), (display-mode: fullscreen) {
  .install-bar,
  .install-card,
  .install-sheet {
    display: none !important;
  }
  body.install-ui-visible #libraryView,
  body.install-ui-visible #editorView {
    padding-bottom: 0;
  }
}

/* Custom Faruma tooltips (replaces native title hovers) */
.galan-tip {
  position: fixed;
  z-index: 10050;
  max-width: min(280px, 90vw);
  padding: 7px 11px;
  border-radius: 7px;
  background: #1f1f1f;
  color: #f8f8f8;
  font-family: "Faruma", "MV Boli", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  direction: rtl;
  text-align: right;
  unicode-bidi: isolate;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
  white-space: nowrap;
}

.galan-tip[hidden] {
  display: none !important;
}

.galan-alert-msg {
  margin: 28px 0 18px;
  font-size: 17px;
  line-height: 1.65;
  color: #173feb;
  font-weight: normal;
  white-space: pre-wrap;
}

body.night .galan-alert-msg {
  color: #7ab0fa;
}

/* Centered Faruma modal (alerts + confirm) */
.galan-modal {
  position: fixed;
  inset: 0;
  z-index: 10100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  box-sizing: border-box;
}

.galan-modal[hidden] {
  display: none !important;
}

.galan-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.52);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.galan-modal-box {
  position: relative;
  width: min(360px, 100%);
  padding: 24px 20px 18px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(23, 63, 235, 0.12);
  box-shadow:
    0 24px 60px rgba(15, 23, 42, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  text-align: center;
  font-family: "Faruma", "MV Boli", Arial, sans-serif;
  animation: galanModalIn 0.22s ease;
}

@keyframes galanModalIn {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.galan-modal-close {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: #eef2f7;
  color: #334e68;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}

.galan-modal-close:hover {
  background: #e2e8f0;
}

.galan-modal-msg {
  margin: 8px 10px 22px;
  font-family: "Faruma", "MV Boli", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.65;
  color: #173feb;
  direction: rtl;
  unicode-bidi: isolate;
  white-space: pre-wrap;
}

.galan-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.galan-modal-actions--row {
  flex-direction: row;
}

.galan-modal-btn {
  flex: 1 1 auto;
  min-height: 46px;
  border: none;
  border-radius: 12px;
  padding: 12px 16px;
  font-family: "Faruma", "MV Boli", Arial, sans-serif;
  font-size: 16px;
  cursor: pointer;
  touch-action: manipulation;
  background: linear-gradient(180deg, #3d7ef0 0%, #173feb 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(23, 63, 235, 0.22);
}

.galan-modal-btn:hover {
  filter: brightness(1.04);
}

.galan-modal-btn--ghost {
  background: #eef2f7;
  color: #173feb;
  box-shadow: none;
}

.galan-modal-btn--danger {
  background: linear-gradient(180deg, #ef6b6b 0%, #c1121f 100%);
  box-shadow: 0 4px 14px rgba(193, 18, 31, 0.22);
}

body.night .galan-modal-box {
  background: #1e2430;
  border-color: rgba(122, 176, 250, 0.18);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

body.night .galan-modal-msg {
  color: #7ab0fa;
}

body.night .galan-modal-close {
  background: #2d3748;
  color: #e8f0fa;
}

body.night .galan-modal-btn--ghost {
  background: #2d3748;
  color: #9ae3fd;
}

.install-bar[hidden],
.install-card[hidden],
.install-sheet[hidden],
.update-bar[hidden] {
  display: none !important;
}