@font-face {
  font-family: 'CYTV NotoSans';
  src: url('fonts/NotoSans.ttf') format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'CYTV NotoSansDevanagari';
  src: url('fonts/NotoSansDevanagari.ttf') format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'CYTV NotoSansKR';
  src: url('fonts/NotoSansKR.ttf') format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'CYTV NotoSansSC';
  src: url('fonts/NotoSansSC.ttf') format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'CYTV NotoSansTC';
  src: url('fonts/NotoSansTC.ttf') format('truetype');
  font-weight: 400;
}

/* Packaged fallbacks also keep Chinese text available offline. */

html,
body,
button {
  font-family:
    Outfit, 'CYTV NotoSans', 'CYTV NotoSansDevanagari', 'CYTV NotoSansSC',
    'CYTV NotoSansTC', 'CYTV NotoSansKR', 'Noto Sans', 'Noto Sans Devanagari',
    'Noto Sans CJK KR', 'Malgun Gothic', sans-serif;
}

#languagePicker {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(7, 10, 14, 0.96);
  color: #f5f7fa;
}

#languagePicker[hidden] {
  display: none;
}

.language-card {
  width: 1120px;
  max-width: 92vw;
  max-height: 92vh;
  overflow: auto;
  padding: 36px 44px;
  border: 1px solid #626a76;
  border-radius: 24px;
  background: #202329;
}

.language-card h2 {
  font-size: 36px;
  line-height: 1.4;
}

.language-card p {
  font-size: 24px;
  line-height: 1.5;
  margin: 12px 0 20px;
}

#languageChoices,
#settingsLanguageChoices {
  display: flex;
  flex-wrap: wrap;
  margin: -8px;
}

#languageChoices button,
#settingsLanguageChoices button {
  font: inherit;
  font-size: 26px;
  line-height: 1.5;
  min-height: 64px;
  padding: 12px 22px;
  background: #343941;
  border: 3px solid transparent;
  border-radius: 12px;
  color: #fff;
  text-align: left;
}

#languageChoices button[aria-pressed='true'],
#settingsLanguageChoices button[aria-pressed='true'] {
  border-color: #7f9ecb;
}

#languageChoices button:focus,
#settingsLanguageChoices button:focus {
  outline: 3px solid #b8d3ff;
  outline-offset: 3px;
  background: #46556c;
  border-color: #fff;
}

#languageError {
  color: #ffd1bd;
}

html[lang='hi'] #greeting,
html[lang='ko'] #greeting {
  line-height: 1.45;
}

#renewalPanel,
html .root-settings,
#updatePanel {
  font-family:
    Outfit, 'CYTV NotoSans', 'CYTV NotoSansDevanagari', 'CYTV NotoSansSC',
    'CYTV NotoSansTC', 'CYTV NotoSansKR', sans-serif;
}

/* Long localized dates wrap within the header instead of pushing shortcuts off screen. */

#leftBlock {
  flex: 1;
  min-width: 0;
}

#topButtons {
  flex-shrink: 0;
  margin-left: 32px;
}

#clock,
#ampm,
.divider {
  flex-shrink: 0;
}

#date {
  min-width: 0;
  white-space: normal;
  line-height: 1.4;
  letter-spacing: 0.06em;
}

html[lang='hi'] #greeting,
html[lang='hi'] #date {
  letter-spacing: 0;
}

#homeConfirmation {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 30000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(7, 10, 14, 0.88);
  color: #f5f7fa;
}

#homeConfirmation[hidden] {
  display: none;
}

.confirmation-card {
  box-sizing: border-box;
  width: 840px;
  max-width: 92vw;
  max-height: 90vh;
  overflow: auto;
  padding: 40px 44px;
  border: 1px solid #626a76;
  border-radius: 24px;
  background: #202329;
  box-shadow: 0 24px 100px #0008;
}

.confirmation-card h2 {
  font-size: 36px;
  line-height: 1.25;
  margin: 0 0 20px;
}

.confirmation-card p {
  font-size: 24px;
  line-height: 1.5;
  margin: 0 0 32px;
  white-space: pre-line;
}

.confirmation-actions {
  display: flex;
  flex-wrap: wrap;
}

.confirmation-actions button {
  flex: 1;
  font: inherit;
  font-size: 25px;
  line-height: 1.3;
  min-height: 72px;
  margin: 0;
  padding: 16px 24px;
  border: 3px solid #687381;
  border-radius: 12px;
  background: #343941;
  color: #f5f7fa;
  cursor: pointer;
}

.confirmation-actions button:focus {
  outline: 4px solid #b8d3ff;
  outline-offset: 4px;
  border-color: #fff;
  background: #46556c;
}

@media (max-width: 700px) {
  .confirmation-card {
    padding: 28px;
  }
  .confirmation-card h2 {
    font-size: 28px;
  }
  .confirmation-card p,
  .confirmation-actions button {
    font-size: 22px;
  }
  .confirmation-actions {
    flex-direction: column;
  }
}

/* Margin spacing also works before grid/flex gap support. */

#languageChoices button,
#settingsLanguageChoices button {
  width: calc(50% - 16px);
  margin: 8px;
}

.confirmation-actions {
  margin: -10px;
}

.confirmation-actions button {
  margin: 10px;
}

html[lang='zh-Hans'],
html[lang='zh-Hans'] body,
html[lang='zh-Hans'] button,
html[lang='zh-Hans'] #renewalPanel,
html[lang='zh-Hans'] .root-settings,
html[lang='zh-Hans'] #updatePanel {
  font-family:
    Outfit, 'CYTV NotoSansSC', 'CYTV NotoSansTC', 'CYTV NotoSans', sans-serif;
}

html[lang='zh-Hant'],
html[lang='zh-Hant'] body,
html[lang='zh-Hant'] button,
html[lang='zh-Hant'] #renewalPanel,
html[lang='zh-Hant'] .root-settings,
html[lang='zh-Hant'] #updatePanel {
  font-family:
    Outfit, 'CYTV NotoSansTC', 'CYTV NotoSansSC', 'CYTV NotoSans', sans-serif;
}

#languageChoices button[lang='zh-Hans'],
#settingsLanguageChoices button[lang='zh-Hans'] {
  font-family: 'CYTV NotoSansSC', 'CYTV NotoSansTC', sans-serif;
}

#languageChoices button[lang='zh-Hant'],
#settingsLanguageChoices button[lang='zh-Hant'] {
  font-family: 'CYTV NotoSansTC', 'CYTV NotoSansSC', sans-serif;
}

#settingsLanguageChoices button {
  width: calc(33.333% - 16px);
}
#settingsLanguageChoices button[data-language='auto'] {
  width: calc(100% - 16px);
}
@media (max-height: 800px) {
  #settingsLanguageChoices button {
    min-height: 48px;
    padding: 8px 12px;
    font-size: 22px;
  }
}