/* The calendar as the recipient sees it. Colors come from the theme's custom properties. */
.cal-page { min-height: 100vh; min-height: 100dvh; color: var(--t-text); display: flex; flex-direction: column; }
.cal-page .cal-inner { width: 100%; max-width: 560px; margin: 0 auto; flex: 1 1 auto; display: flex; flex-direction: column; padding: 0 20px calc(24px + env(safe-area-inset-bottom)); }
.cal-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; }
.cal-brand { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; color: var(--t-muted); font-family: var(--head); font-weight: 700; font-size: 13px; }
.cal-brand:hover { color: var(--t-text); }
/* The logo's dot: the brand blue, a lighter shade so it stays visible on dark designs. */
.cal-brand .logo-dot { fill: #6F8EFF; }
.cal-page .lp-btn { border-color: color-mix(in srgb, var(--t-muted) 45%, transparent); color: var(--t-muted); }
.cal-page .lp-btn:hover { background: color-mix(in srgb, var(--t-muted) 14%, transparent); color: var(--t-text); }
.cal-page .lp-menu :focus-visible { outline-color: var(--accent); }
.cal-page :focus-visible { outline: 3px solid var(--t-text); outline-offset: 2px; }

.cal-head { padding: 18px 0 20px; display: flex; flex-direction: column; gap: 8px; }
.cal-title.ttl { font-size: clamp(36px, 11vw, 48px); line-height: 1.02; overflow-wrap: anywhere; }
.cal-status { font-size: 15px; color: var(--t-muted); }

.cal-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 480px; margin: 0 auto; }
.cell {
  position: relative; height: 70px; padding: 0; border: 0; background: transparent; color: inherit;
  perspective: 480px; border-radius: 6px;
}
.cell .hole {
  position: absolute; inset: 0; border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: var(--t-hole); box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.55); color: var(--t-hole-ink);
  font-family: var(--t-font); font-style: var(--t-font-style); font-weight: var(--t-font-weight); font-size: 22px;
}
.cell .hole svg { color: var(--t-accent); }
.cell .leaf {
  position: absolute; inset: 0; flex-direction: column; gap: 2px;
  transform-origin: left center; transition: transform 0.4s cubic-bezier(0.3, 0.7, 0.4, 1), box-shadow 0.4s;
  backface-visibility: hidden;
}
.cell.is-future .leaf { font-size: 24px; }
.cell.is-today .leaf { box-shadow: 0 0 0 3px var(--t-glow), 0 0 22px var(--t-glow); font-size: 28px; }
.cell .today-tag { font: 600 11px/1 var(--text); font-style: normal; letter-spacing: 0; }
.cell.is-today .hole { background: radial-gradient(circle at 55% 45%, #FFF0BF, #E2B24D 75%); box-shadow: none; }
/* An earlier door that hasn't been opened yet: still closed, with a soft glow that says "you can open me". */
.cell.is-past.is-avail .leaf { box-shadow: 0 0 0 2px var(--t-glow), 0 0 12px var(--t-glow); animation: avail-glow 2.6s ease-in-out infinite; }
@keyframes avail-glow { 50% { box-shadow: 0 0 0 2px var(--t-glow), 0 0 4px var(--t-glow); } }
@media (prefers-reduced-motion: reduce) { .cell.is-past.is-avail .leaf { animation: none; } }
.cell.swing .leaf { transform: rotateY(-105deg); box-shadow: 8px 0 16px rgba(0, 0, 0, 0.35); }
.cell:focus-visible { outline-offset: 3px; }
.cal-note { margin-top: 18px; font-size: 13px; color: var(--t-muted); }
.cal-footer { margin-top: auto; padding-top: 28px; }
.cal-make {
  min-height: 48px; border: 1px solid color-mix(in srgb, var(--t-muted) 55%, transparent); border-radius: 12px;
  display: flex; align-items: center; justify-content: center; color: var(--t-text); text-decoration: none; font-weight: 500; font-size: 15px;
}
.cal-make:hover { color: var(--t-text); background: color-mix(in srgb, var(--t-muted) 12%, transparent); }
.cal-page .toast { bottom: calc(90px + env(safe-area-inset-bottom)); }

/* Bottom sheet ------------------------------------------------------------ */
body.no-scroll { overflow: hidden; }
.sheet-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(6, 10, 28, 0.72); display: flex; align-items: flex-end; justify-content: center; }
.sheet {
  width: 100%; max-width: 560px; max-height: 92vh; max-height: 92dvh; overflow-y: auto;
  background: #FBF4E2; color: #1B2440; border-radius: 24px 24px 0 0; border-top: 4px solid var(--t-accent);
  padding: 22px 22px calc(28px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px;
  animation: sheet-up 0.25s ease-out;
}
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet :focus-visible { outline: 3px solid #2B54E0; outline-offset: 2px; }
.sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sheet-head > div { display: flex; flex-direction: column; gap: 4px; }
.sheet-date { font-size: 14px; color: #5A5440; }
.sheet-kind { font-family: var(--t-font); font-style: var(--t-font-style); font-weight: var(--t-font-weight); font-size: 32px; line-height: 1.1; }
.sheet-close { width: 44px; height: 44px; flex: 0 0 auto; border: 0; border-radius: 50%; background: #EDE3C8; color: #1B2440; display: flex; align-items: center; justify-content: center; }
.sheet-photo { padding: 0; border: 0; background: #E4D7B5; border-radius: 14px; overflow: hidden; display: block; width: 100%; cursor: zoom-in; }
.sheet-photo img { width: 100%; height: auto; max-height: 60vh; object-fit: cover; }
.sheet-text { font-size: 20px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.sheet-player { background: #EDE3C8; border-radius: 14px; padding: 12px; }
.sheet-player .play { width: 48px; height: 48px; background: #1B2440; color: #FBF4E2; }
.sheet-player .bar { background: #CDBF98; }
.sheet-player .bar > div { background: #1B2440; }
.sheet-player .time { color: #5A5440; }
.player-title { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.link-block { display: flex; flex-direction: column; gap: 6px; }
.sheet-link { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; border: 1px solid #D9CCA8; }
.sheet-link .ico { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 10px; background: #1B2440; color: #FBF4E2; display: flex; align-items: center; justify-content: center; }
.sheet-link .meta { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sheet-link .meta span:first-child { font-size: 13px; color: #5A5440; }
.sheet-link .meta span:last-child { font-size: 15px; font-weight: 600; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
.sheet-btn { min-height: 44px; padding: 0 16px; border: 0; border-radius: 10px; background: #1B2440; color: #FBF4E2; text-decoration: none; font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; flex: 0 0 auto; }
.sheet-btn:hover { color: #FFFFFF; background: #2A3660; }
.open-app { align-self: flex-start; font-size: 14px; color: #3A3524; min-height: 44px; display: inline-flex; align-items: center; }
.embed { width: 100%; border: 0; border-radius: 12px; background: #000; }
.embed.is-video { aspect-ratio: 16 / 9; }
.embed.is-audio { height: 166px; background: transparent; }
.sheet-sign { font-size: 14px; color: #5A5440; }

.photo-viewer { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, 0.92); display: flex; align-items: center; justify-content: center; padding: 16px; }
.photo-viewer img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.viewer-close { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 12px; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: #18213A; display: flex; align-items: center; justify-content: center; }

.preview-banner { background: #18213A; color: #FFFFFF; padding: 10px 12px; display: flex; align-items: center; gap: 12px; justify-content: space-between; font-size: 14px; }
.preview-banner .btn { min-height: 40px; background: #FFFFFF; color: #18213A; }
.preview-overlay { position: fixed; inset: 0; z-index: 30; overflow-y: auto; }

@media (prefers-reduced-motion: reduce) {
  .cell .leaf { transition: none; }
  .sheet { animation: none; }
}

/* Menu and "deleted" page ----------------------------------- */
.cal-top-right { display: flex; align-items: center; gap: 4px; }
.more-btn { width: 44px; height: 44px; margin-right: -10px; border: 0; background: transparent; color: var(--t-muted); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.more-btn:hover { background: color-mix(in srgb, var(--t-muted) 15%, transparent); }
.cal-menu { position: absolute; right: 16px; top: 62px; z-index: 30; width: 260px; background: #FBF4E2; color: #1B2440; border-radius: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); padding: 6px; display: flex; flex-direction: column; }
.cal-menu button { min-height: 44px; padding: 0 12px; border: 0; background: transparent; text-align: left; color: #1B2440; font: 500 15px var(--text); border-radius: 10px; }
.cal-menu button:hover:not(:disabled) { background: #EDE3C8; }
.cal-menu button:disabled { color: #6A6250; cursor: default; }
.cal-menu .danger { color: #B42318; font-weight: 600; }
.cal-menu .menu-note { margin: 0; padding: 10px 12px; font: 400 14px/1.4 var(--text); color: #4F4838; }
.cal-menu :focus-visible { outline: 3px solid #2B54E0; outline-offset: -3px; }
.gone { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 32px; text-align: center; }
.gone h1 { font-family: var(--t-font); font-style: var(--t-font-style); font-weight: var(--t-font-weight); font-size: 40px; color: var(--t-text); }
@media (max-width: 400px) { .gone h1 { font-size: 32px; } }
.gone p { font-size: 16px; line-height: 1.5; color: var(--t-muted); max-width: 26em; }

/* Keepsake album (design/Keepsake.dc.html) ---------------------------------- */
.album-page { background: #101B3B radial-gradient(rgba(226, 194, 117, 0.3) 1px, transparent 1.6px) 0 0 / 22px 22px; color: #F3F5F8; min-height: 100vh; }
.album { max-width: 560px; margin: 0 auto; padding: 0 20px calc(32px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 16px; }
.album :focus-visible { outline: 3px solid #FFE6A3; outline-offset: 2px; }
.album h1:focus, .album .when:focus { outline: none; }
.album .serif { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 600; }
.album-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; }
.album-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px 0 4px; border: 0; background: transparent; color: #C4CCE3; font: 500 15px var(--text); border-radius: 10px; }
.album-cover .keep-badge { position: absolute; top: 12px; right: 12px; z-index: 2; max-width: calc(100% - 24px); }
.album .lp-btn { border-color: rgba(196, 204, 227, 0.45); color: #C4CCE3; }
.keep-badge { font-size: 12px; font-weight: 600; color: #3A2410; background: linear-gradient(180deg, #F7E3A3, #D9AE55); padding: 4px 10px; border-radius: 999px; }
.album-cover { position: relative; height: 300px; border-radius: 24px; overflow: hidden; background: #18285A; }
.album-cover .cover-img, .album-cover .cover-theme { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-tiles { display: grid; width: 100%; height: 100%; }
.cover-tiles img { width: 100%; height: 100%; object-fit: cover; display: block; }
.album-cover .cover-tiles { position: absolute; inset: 0; align-content: center; }
.album-cover .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 27, 59, 0) 15%, rgba(16, 27, 59, 0.55) 45%, rgba(16, 27, 59, 0.9)); }
.cover-text { position: absolute; left: 20px; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 6px; }
.cover-text .kicker { font-size: 13px; color: #E2C275; }
.cover-text h1 { font-size: 46px; line-height: 1; color: #FFFFFF; overflow-wrap: anywhere; }
.cover-text p:last-child { font-size: 14px; color: #DDE3F0; }
.album-stats { display: flex; gap: 8px; }
.album .stat { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 4px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(226, 194, 117, 0.35); }
.album .stat b { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 600; font-size: 30px; line-height: 1; color: #E2C275; }
.album .stat span { font-size: 12px; color: #C4CCE3; text-align: center; hyphens: manual; }
@media (max-width: 359px) { .album .stat span { font-size: 11px; } .album-stats { gap: 6px; } }
.album-reminder { padding: 14px 16px; border-radius: 16px; background: #FBF4E2; color: #1B2440; display: flex; flex-direction: column; gap: 10px; }
.album-reminder p { font-size: 15px; line-height: 1.45; }
.btn-dark { align-self: flex-start; min-height: 44px; padding: 0 16px; border: 0; border-radius: 12px; background: #1B2440; color: #FBF4E2; font: 600 15px var(--text); }
.album-actions { display: flex; gap: 10px; }
.abtn { min-height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; font: 600 16px var(--text); text-decoration: none; width: 100%; padding: 0 12px; text-align: center; }
.abtn-gold { background: #E2C275; color: #1B2440; border: 0; }
.abtn-outline { background: transparent; border: 1.5px solid rgba(226, 194, 117, 0.7); color: #F3F5F8; }
.abtn-soft { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.18); color: #F3F5F8; }
.abtn-soft:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.12); }
.abtn-danger { background: transparent; border: 1.5px solid #F4A6A0; color: #F4A6A0; }
.album-sec { padding-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.album-sec h2 { font-size: 32px; color: #E2C275; }
.album-doors { display: flex; flex-direction: column; gap: 12px; }
.album .day { display: flex; gap: 14px; padding: 16px; border-radius: 18px; background: #FBF4E2; color: #1B2440; }
.album .dnum { flex: 0 0 auto; width: 46px; height: 56px; border-radius: 6px; background: #18285A; border: 1px solid #C9A44C; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #E2C275; }
.album .dnum b { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 600; font-size: 24px; line-height: 1; }
.album .dnum span { font-size: 10px; color: #C4CCE3; margin-top: 2px; }
.album .day .body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.album .day .when { font-size: 12px; color: #5A5440; }
.album .day .text { font-size: 16px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.album .ph { padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: #E4D7B5; cursor: zoom-in; }
.album .ph img { width: 100%; max-height: 240px; object-fit: cover; display: block; }
.album-player { background: #EDE3C8; }
.album-player .play { background: #1B2440; color: #FBF4E2; }
.album-player .bar { background: #CDBF98; }
.album-player .bar > div { background: #1B2440; }
.album-link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #EDE3C8; color: #1B2440; text-decoration: none; min-height: 48px; }
.album-link i { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 50%; background: #1B2440; color: #FBF4E2; display: flex; align-items: center; justify-content: center; }
.album-link .meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.album-link .meta span:first-child { font-size: 11px; color: #5A5440; }
.album-link .meta span:last-child { font-size: 13px; font-weight: 600; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
.album-link .play { font-size: 14px; font-weight: 600; }
.album-songs { display: flex; flex-direction: column; gap: 8px; }
.album-songs .album-link { background: rgba(255, 255, 255, 0.06); color: #F3F5F8; border: 1px solid rgba(255, 255, 255, 0.12); }
.album-songs .album-link i { background: rgba(226, 194, 117, 0.18); color: #E2C275; }
.album-songs .album-link .meta span:first-child { color: #AEB9D6; }
.album-songs .album-link .play { color: #E2C275; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.grid3 button { padding: 0; border: 0; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: #18285A; cursor: zoom-in; }
.grid3 img { width: 100%; height: 100%; object-fit: cover; display: block; }
.album-choice { margin-top: 16px; padding: 18px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.18); display: flex; flex-direction: column; gap: 10px; }
.album-choice h2 { font-size: 17px; font-weight: 600; }
.album-choice p { font-size: 14px; line-height: 1.5; color: #C4CCE3; }
.album-end { padding-top: 16px; }
/* Privacy and Terms under the calendar and the album, small but easy to tap. */
.cal-legal { display: flex; justify-content: center; gap: 4px 20px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; }
.cal-legal a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 4px; color: var(--t-muted, #C4CCE3); text-decoration: underline; text-underline-offset: 3px; }
.album .cal-legal a { color: #C4CCE3; }
.album-switch { margin-top: 18px; }
.album-banner { margin-top: 16px; padding: 14px 16px; border-radius: 16px; background: #FBF4E2; color: #1B2440; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.album-banner p { font-size: 15px; line-height: 1.4; }

/* Print: only the album's print layout (design/KeepsakePrint.dc.html) --------- */
.print-album { display: none; }
@media print {
  @page { size: A4; margin: 12mm; }
  html, body { background: #FFFFFF !important; }
  body > *:not(.print-album) { display: none !important; }
  .print-album { display: block; color: #1B2440; font-family: 'Manrope', system-ui, sans-serif; }
  .print-page { break-after: page; page-break-after: always; display: flex; flex-direction: column; gap: 4mm; height: 272mm; }
  .print-page:last-child { break-after: auto; page-break-after: auto; }
  .print-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 6mm; }
  .print-head h1 { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 600; font-size: 26pt; line-height: 1; }
  .print-head p { font-size: 8pt; color: #5A5440; margin-top: 1mm; }
  .print-head .counts { font-size: 7.5pt; color: #7A6A45; }
  .print-cover { height: 45mm; border-radius: 2mm; overflow: hidden; flex: 0 0 auto; }
  .print-cover img.cover-img, .print-cover .cover-theme { width: 100%; height: 100%; object-fit: cover; display: block; }
  .print-cover .cover-tiles { height: 100%; align-content: center; overflow: hidden; }
  .print-grid { flex: 1 1 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr)); gap: 1.6mm; }
  .print-grid .cell { border: 0.3mm solid #D9CCA8; border-radius: 1.5mm; padding: 1.8mm 2mm; display: flex; flex-direction: column; gap: 0.8mm; overflow: hidden; background: #FFFDF8; break-inside: avoid; }
  .print-grid .cell b { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 600; font-size: 13pt; line-height: 1; color: #9C7A2E; }
  .print-grid .cell p { font-size: 6.5pt; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .print-grid .cell em { font-style: normal; font-size: 6pt; color: #7A6A45; }
  .print-foot { text-align: center; font-size: 6.5pt; color: #7A6A45; }
  .print-photos { justify-content: space-between; }
  .print-photos figure { margin: 0; height: 128mm; display: flex; flex-direction: column; gap: 2mm; break-inside: avoid; }
  .print-photos img { width: 100%; height: 118mm; object-fit: contain; }
  .print-photos figcaption { font-size: 8pt; color: #5A5440; text-align: center; }
}

/* Wider screens: larger calendar, centred dialogs ----------------------------- */
.cal-page .pscale { max-width: 480px; margin: 0 auto; }
@media (min-width: 768px) {
  .cal-page .cal-inner { padding-top: 12px; }
  .cal-head, .cal-note { max-width: 480px; width: 100%; margin-left: auto; margin-right: auto; }
  .cal-footer { max-width: 480px; width: 100%; margin-left: auto; margin-right: auto; }
  .cell { height: 100px; }
  .sheet-backdrop { align-items: center; padding: 24px; }
  .sheet { border-radius: 24px; max-width: 520px; max-height: 86vh; border-top-width: 4px; }
  .album { max-width: 640px; padding-top: 12px; }
  .album-cover { height: 380px; }
  .grid3 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .cal-page .cal-top, .cal-page #album-banner { max-width: 480px; width: 100%; margin-left: auto; margin-right: auto; }
  .cal-menu { right: max(16px, calc(50% - 240px)); }
}

/* Morning reminders, the home-screen hint and the report link (recipient page). */
.cal-extras { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; width: 100%; max-width: 480px; margin-left: auto; margin-right: auto; }
.remind-card, .install-hint { background: color-mix(in srgb, var(--t-text) 8%, transparent); border: 1px solid color-mix(in srgb, var(--t-muted) 35%, transparent); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 10px; color: var(--t-text); }
.remind-card h2, .install-hint h2 { font-family: var(--head); font-size: 20px; font-weight: 700; }
.remind-form { display: flex; flex-direction: column; gap: 8px; }
.remind-form .label { color: var(--t-muted); font-size: 14px; font-weight: 600; }
.remind-row { display: flex; flex-wrap: wrap; gap: 8px; }
.remind-row .input { flex: 1 1 200px; min-height: 48px; background: #FFFFFF; color: #18213A; }
.remind-btn, .hint-install, .hint-close { min-height: 48px; padding: 0 18px; border-radius: 12px; border: 1.5px solid var(--t-text); background: var(--t-text); color: var(--t-bg); font: 600 15px var(--text); }
.hint-close { background: transparent; color: var(--t-text); align-self: flex-start; }
.remind-note, .remind-msg, .install-hint p { font-size: 14px; line-height: 1.5; color: var(--t-muted); }
.remind-done { font-size: 15px; color: var(--t-text); }
.remind-link { border: 0; background: none; color: inherit; text-decoration: underline; font: inherit; min-height: 44px; padding: 0 4px; }
.album-link-note { font-size: 14px; color: #C4CCE3; }