:root {
  --shell-viewport-pad-top: max(12px, env(safe-area-inset-top, 0px));
  --shell-viewport-pad-right: max(12px, env(safe-area-inset-right, 0px));
}

body.lang-zh .setting-back,
body.lang-zh .setting-title,
body.lang-zh .setting-note {
  font-family: 'GenWanMinF', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

@font-face {
  font-family: 'Lilita One';
  src: url('../../fonts/LilitaOne-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: 'Lilita One', Arial, sans-serif;
  color: #0a1628;
  background: #c8dff5 url('../../bg-vertical.jpg') center / cover no-repeat;
}

.setting-page {
  max-width: 720px;
  margin: 0 auto;
  padding:
    max(72px, calc(clamp(16px, 3vw, 32px) + env(safe-area-inset-top, 0px)))
    max(clamp(16px, 3vw, 32px), env(safe-area-inset-right, 0px))
    max(32px, calc(clamp(16px, 3vw, 32px) + env(safe-area-inset-bottom, 0px)))
    max(clamp(16px, 3vw, 32px), env(safe-area-inset-left, 0px));
}

.setting-back {
  display: inline-block;
  margin-bottom: 24px;
  font-size: 18px;
  letter-spacing: 0.06em;
  color: #2d7fde;
  text-decoration: none;
}

.setting-back:hover {
  color: #0859b6;
}

.setting-title {
  margin: 0 0 12px;
  font-size: clamp(28px, 5vw, 42px);
  letter-spacing: 0.08em;
  color: #2d7fde;
}

.setting-note {
  margin: 0;
  font-size: 16px;
  opacity: 0.8;
}