:root{
  --bg1:#fff7fb;
  --bg2:#f3fbff;
  --card: rgba(255,255,255,.74);
  --border: rgba(20, 25, 38, .10);
  --text: rgba(18, 23, 38, .92);
  --muted: rgba(18, 23, 38, .60);

  --p1:#ff5ea8;
  --p2:#7c5cff;
  --p3:#22c7c7;

  --r: 18px;
  --shadow: 0 22px 58px rgba(24, 32, 54, .095);
  --shadow2: 0 12px 30px rgba(24, 32, 54, .085);
  --ease-premium: cubic-bezier(.2,.78,.22,1);

  --music-bar-height: 64px;
  --tabbar-height: 64px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  color:var(--text);
  font-family:"Pretendard","Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(900px 520px at 10% 0%, rgba(255,94,168,.22), transparent 60%),
    radial-gradient(900px 520px at 90% 15%, rgba(124,92,255,.16), transparent 60%),
    radial-gradient(900px 520px at 50% 95%, rgba(34,199,199,.16), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  overflow-x:hidden;

  padding-bottom: calc(var(--music-bar-height) + var(--tabbar-height) + env(safe-area-inset-bottom));
}

.bg{
  position:fixed;
  inset:-40vh -40vw;
  background: conic-gradient(from 180deg, rgba(255,94,168,.10), rgba(124,92,255,.10), rgba(34,199,199,.10), rgba(255,94,168,.10));
  filter: blur(90px);
  opacity:.65;
  pointer-events:none;
  z-index:-1;
}

.container{
  width:min(1120px, calc(100% - 40px));
  margin:0 auto;
}

/* ============ App Shell ============ */
.app{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.appHeader{
  position:sticky;
  top:0;
  z-index:10;
  backdrop-filter: blur(14px);
  background: rgba(255,255,255,.72);
  border-bottom: 1px solid rgba(20,25,38,.08);
}
.appHeader__inner{
  height:60px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.appHeader__brand{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:900;
}
.appHeader__name{
  font-size:14px;
  letter-spacing:-.2px;
}
.appHeader__heart{
  width:24px;height:24px;
  border-radius:999px;
  display:grid;place-items:center;
  background: linear-gradient(135deg, rgba(255,94,168,.25), rgba(124,92,255,.18));
  border: 1px solid rgba(20,25,38,.08);
  font-weight:900;
}
.appHeader__dday{
  font-weight:900;
  font-size:14px;
  padding:6px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(20,25,38,.08);
}

.appMain{
  flex: 1;
  /* 위 12px, 좌우 0, 아래 = 음악바 + 탭바 + 여유 24px */
  padding: 12px 0 calc(var(--music-bar-height) + var(--tabbar-height) + 24px);
}

/* ============ Tabs ============ */
.tab{ display:none; padding-bottom:16px; }
.tab--active{ display:block; }

.tabbar{
  position:fixed;
  left:0; right:0;
  bottom: max(0px, env(safe-area-inset-bottom));
  height:var(--tabbar-height);
  z-index:80;
  display:flex;
  justify-content:space-around;
  align-items:center;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(20,25,38,.10);
}
.tabbar__btn{
  appearance:none;
  border:none;
  background:transparent;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  color: rgba(18,23,38,.60);
}
.tabbar__btn--active{
  background: linear-gradient(135deg, rgba(255,94,168,.18), rgba(124,92,255,.16));
  color: rgba(18,23,38,.95);
}
.tabbar__icon{ font-size:18px; }
.tabbar__label{ letter-spacing:-.1px; }

/* Beat animation */
.beat{ animation: beat 1.35s ease-in-out infinite; transform-origin: center; }
@keyframes beat{
  0%{ transform: scale(1); }
  8%{ transform: scale(1.12); }
  16%{ transform: scale(1.02); }
  28%{ transform: scale(1.16); }
  42%{ transform: scale(1); }
  100%{ transform: scale(1); }
}
@media (prefers-reduced-motion: reduce){ .beat{ animation:none; } }

/* ============ Hero Video ============ */
.hero{ margin-top:14px; }
.hero__media{
  position:relative;
  border-radius: calc(var(--r) + 10px);
  overflow:hidden;
  border: 1px solid rgba(20,25,38,.10);
  box-shadow: var(--shadow);
  min-height: 360px;
  background:#fff;
}
.hero__media--loading::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg, rgba(255,255,255,.32), rgba(255,255,255,.78), rgba(255,255,255,.32)),
    linear-gradient(135deg, rgba(255,94,168,.10), rgba(124,92,255,.10));
  background-size:220% 100%, 100% 100%;
  animation:heroMediaLoading 1.25s ease-in-out infinite;
  pointer-events:none;
}
.hero__media--ready::before{
  display:none;
}
@keyframes heroMediaLoading{
  from{ background-position:120% 0, 0 0; }
  to{ background-position:-120% 0, 0 0; }
}
.hero__video{
  position:relative;
  z-index:0;
  width:100%;
  height:100%;
  object-fit: cover;
  transform: scale(1.02);
  filter: saturate(1.04) contrast(1.02);
}
.hero__shine{
  position:absolute; inset:0;
  z-index:2;
  background:
    radial-gradient(700px 380px at 20% 20%, rgba(255,255,255,.70), transparent 55%),
    linear-gradient(90deg, rgba(255,255,255,.70), rgba(255,255,255,.10) 45%, rgba(255,255,255,.55));
  mix-blend-mode: soft-light;
  pointer-events:none;
}
.hero__overlay{
  position:absolute;
  inset:0;
  z-index:3;
  padding:20px 20px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:10px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.55) 55%, rgba(255,255,255,.88));
}
.hero__badge{
  width:fit-content;
  margin:0;
  padding:6px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:11px;
  color: rgba(18,23,38,.78);
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(20,25,38,.10);
  box-shadow: var(--shadow2);
}
.hero__title{
  margin:0;
  font-size:26px;
  line-height:1.14;
  letter-spacing:-.7px;
}
.hero__titleGrad{
  background: linear-gradient(135deg, var(--p1), var(--p2), var(--p3));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero__sub{
  margin:0;
  color: rgba(18,23,38,.66);
  font-weight:800;
  font-size:13px;
  line-height:1.6;
}
.hero__chips{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:4px;
}
.chip{
  padding:8px 10px;
  border-radius:14px;
  background: rgba(255,255,255,.70);
  border:1px solid rgba(20,25,38,.10);
  box-shadow: var(--shadow2);
  min-width:140px;
}
.chip__label{ font-size:11px; font-weight:900; color: rgba(18,23,38,.56); }
.chip__value{ margin-top:4px; font-size:13px; font-weight:900; }

/* ============ Sections / Cards ============ */
.section{ margin-top:18px; }
.section--compact{ margin-top:18px; }
.section__spaced{ margin-top:12px; }
.section__head{ margin-bottom:10px; }
.section__title{ margin:0; font-size:17px; letter-spacing:-.3px; }
.section__desc{ margin:5px 0 0; color: var(--muted); font-weight:800; font-size:13px; }

.grid{ display:grid; gap:14px; }
.grid--2{ grid-template-columns: 1.1fr .9fr; }

.card{
  border-radius: calc(var(--r) + 6px);
  background: var(--card);
  border: 1px solid rgba(20,25,38,.10);
  box-shadow: var(--shadow);
  padding:16px 16px;
}
.card__title{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  font-size:13px;
  color: rgba(18,23,38,.78);
}
.count{
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(20,25,38,.10);
  font-weight: 900;
  font-size: 12px;
}
.card--counter{
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.72));
}
.card--slider{
  margin-bottom:10px;
}

/* Counter */
.kicker{ font-size:11px; font-weight:900; letter-spacing:.4px; color: rgba(18,23,38,.55); }
.dday{ margin-top:4px; font-size:34px; line-height:1.05; font-weight:900; letter-spacing:-1px; }
.muted{ margin-top:4px; color: rgba(18,23,38,.62); font-weight:800; font-size:13px; }

.counterTop{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.live{
  text-align:right;
  padding:8px 10px;
  border-radius:14px;
  background: rgba(255,255,255,.74);
  border:1px solid rgba(20,25,38,.10);
}
.live__label{ font-size:10px; font-weight:900; color: rgba(18,23,38,.55); letter-spacing:.4px; }
.live__time{ margin-top:4px; font-size:18px; font-weight:900; font-variant-numeric: tabular-nums; }

.divider{ height:1px; background: rgba(20,25,38,.10); margin:12px 0; }

.stats{ display:grid; grid-template-columns: repeat(4, 1fr); gap:8px; }
.stat{
  padding:10px 10px;
  border-radius:14px;
  background: rgba(255,255,255,.72);
  border:1px solid rgba(20,25,38,.10);
}
.stat__label{ font-size:10px; font-weight:900; color: rgba(18,23,38,.55); }
.stat__value{ margin-top:4px; font-size:14px; font-weight:900; font-variant-numeric: tabular-nums; }

.nextBox{
  margin-top:10px;
  padding:12px 12px;
  border-radius:16px;
  background: rgba(255,255,255,.78);
  border:1px solid rgba(20,25,38,.10);
}
.nextBox__label{ font-size:12px; font-weight:900; color: rgba(18,23,38,.62); }
.nextBox__value{ margin-top:6px; font-size:18px; font-weight:900; font-variant-numeric: tabular-nums; }

.hint{ margin:8px 0 0; color: rgba(18,23,38,.60); font-weight:800; font-size:12.5px; line-height:1.7; }

/* ============ Buttons ============ */
.btn{
  appearance:none;
  border: 1px solid rgba(20,25,38,.10);
  background: rgba(255,255,255,.72);
  color: rgba(18,23,38,.92);
  padding:9px 13px;
  border-radius:999px;
  font-weight:900;
  font-size:13px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  cursor:pointer;
  transition:.18s ease;
  box-shadow: var(--shadow2);
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); box-shadow:none; }

.btn--primary{
  background: linear-gradient(135deg, rgba(255,94,168,.95), rgba(124,92,255,.90));
  border-color: rgba(255,94,168,.25);
  color: rgba(255,255,255,.95);
}
.btn--soft{ background: linear-gradient(135deg, rgba(34,199,199,.16), rgba(255,94,168,.14)); }
.btn--ghost{ background: rgba(255,255,255,.48); }

.iconBtn{
  width: 30px; height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(20,25,38,.10);
  background: rgba(255,255,255,.82);
  cursor:pointer;
  font-weight: 900;
}
.iconBtn:hover{ transform: translateY(-1px); }

/* ============ Forms ============ */
.form{ margin-top:12px; display:grid; gap:10px; }
.label{ display:grid; gap:6px; font-size:12px; font-weight:900; color: rgba(18,23,38,.76); }
.input, .textarea, select.input{
  width:100%;
  border-radius:14px;
  border: 1px solid rgba(20,25,38,.10);
  background: rgba(255,255,255,.78);
  color: rgba(18,23,38,.92);
  padding:10px 12px;
  outline:none;
  font-size:14px;
  transition:.18s ease;
}
.textarea{ min-height:120px; resize:vertical; line-height:1.6; }
.input:focus, .textarea:focus{
  border-color: rgba(255,94,168,.35);
  box-shadow: 0 0 0 6px rgba(255,94,168,.14);
}
.row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* ============ Upload ============ */
.upload{ margin-top:10px; display:grid; gap:10px; }
.upload__input{ display:none; }
.upload__hint{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:800;
  color: rgba(18,23,38,.62);
  font-size:12.5px;
}
.dot{
  width:8px; height:8px; border-radius:999px;
  background: linear-gradient(135deg, var(--p1), var(--p2));
}

.uploadProgress{
  grid-column:1 / -1;
  display:grid;
  gap:8px;
  padding:12px;
  border:1px solid rgba(66,190,194,.16);
  border-radius:18px;
  background:
    radial-gradient(circle at 10% 0%, rgba(66,190,194,.10), transparent 44%),
    rgba(255,255,255,.72);
  box-shadow:0 10px 26px rgba(17,24,39,.055);
}

.uploadProgress__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:rgba(55,65,81,.76);
  font-size:12.5px;
  font-weight:900;
}

.uploadProgress__top strong{
  color:rgba(17,24,39,.90);
  font-variant-numeric:tabular-nums;
}

.uploadProgress__bar{
  height:8px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(17,24,39,.075);
}

.uploadProgress__bar span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, rgba(66,190,194,.92), rgba(120,114,216,.86));
  transition:width .2s ease;
}

.uploadProgress p{
  margin:0;
  color:rgba(55,65,81,.62);
  font-size:12px;
  font-weight:850;
  line-height:1.55;
}

/* ============ Gallery + Slider ============ */
.gallery{
  margin-top:10px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.gallery.gallery--scroll{
  overflow-y: auto;
  padding-right: 6px;
  scroll-behavior: smooth;
  max-height: 520px;
}

.photo{
  position:relative;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(20,25,38,.10);
  background: rgba(255,255,255,.68);
  box-shadow: var(--shadow2);
  min-height: 120px;
  cursor: zoom-in;
  user-select: none;
}
.photo__img{
  width:100%;
  height: 140px;
  object-fit: cover;
  display:block;
}
.photo__del{
  position:absolute;
  top:6px;
  left:6px;
  width:30px;
  height:30px;
  border-radius: 12px;
  border: 1px solid rgba(20,25,38,.12);
  background: rgba(255,255,255,.86);
  box-shadow: 0 10px 24px rgba(24, 32, 54, .12);
  display:grid;
  place-items:center;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
}
.photo__del:hover{ transform: translateY(-1px); }

.albumBar{
  margin-top: 10px; display:flex; gap:8px; align-items:center; flex-wrap:wrap;
}
.albumSelect{ flex:1; min-width: 150px; }
.sortSelect{ min-width: 140px; }

.paging{
  margin-top: 10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.paging__hint{ font-weight: 900; font-size: 12px; color: rgba(18,23,38,.58); }

/* Slider */
.photoSlider{
  margin-top:10px;
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding-bottom:4px;
  scroll-snap-type:x mandatory;
}
.photoSlider__item{
  flex:0 0 auto;
  width:180px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(20,25,38,.10);
  background: rgba(255,255,255,.8);
  box-shadow: var(--shadow2);
  scroll-snap-align:start;
}
.photoSlider__img{
  width:100%;
  height:140px;
  object-fit:cover;
  display:block;
}
.photoSlider__caption{
  padding:8px 10px;
  font-size:12px;
  font-weight:800;
  color: rgba(18,23,38,.76);
}

/* Lightbox */
.lightbox{ position:fixed; inset:0; display:none; z-index:60; overflow:hidden; }
.lightbox.show{ display:block; }
.lightbox__backdrop{
  position:absolute;
  inset:0;
  background: rgba(10,12,20,.35);
  backdrop-filter: blur(7px);
}
.lightbox__center{
  position:absolute;
  inset:0;
  z-index:1;
  display:grid;
  place-items:center;
  padding:24px;
  pointer-events:none;
}
.lightbox__panel{
  position:relative;
  width:min(980px, calc(100% - 28px));
  margin:0;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.94);
  box-shadow: var(--shadow);
  overflow:hidden;
  pointer-events:auto;
}
.lightbox__close{ position:absolute; right:12px; top:12px; z-index:2; }
.lightbox__stage{
  position: relative;
  width: 100%;
  height: min(62vh, 640px);
  background: rgba(255,255,255,.9);
  overflow:hidden;
  touch-action: pan-y;
}
.lightbox__img{
  width:100%;
  height:100%;
  object-fit: contain;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
}
.lightbox__meta{
  padding: 10px 14px 14px;
  border-top: 1px solid rgba(20,25,38,.10);
  background: rgba(255,255,255,.96);
}
.lightbox__nav{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(20,25,38,.10);
  background: rgba(255,255,255,.88);
  cursor:pointer;
  font-size: 26px;
  font-weight: 900;
  display:grid;
  place-items:center;
  z-index:2;
}
.lightbox__nav--prev{ left: 12px; }
.lightbox__nav--next{ right: 12px; }
.lightbox__nav:hover{ transform: translateY(-50%) translateY(-1px); }

.lightbox__form{ display:grid; gap:8px; }
.lbLabel{ display:grid; gap:4px; font-weight:900; color: rgba(18,23,38,.70); font-size:12.5px; }
.lbRow{ display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; }
.lightbox__saveHint{ font-weight:900; font-size:12px; color: rgba(18,23,38,.56); }

/* ============ Memo ============ */
.memoList{ margin-top:10px; display:grid; gap:8px; }
.memo{
  border-radius:16px;
  border:1px solid rgba(20,25,38,.10);
  background: rgba(255,255,255,.82);
  padding:10px 10px;
}
.memo__top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}
.memo__title{ font-weight:900; font-size:13px; }
.memo__date{ color: rgba(18,23,38,.56); font-weight:800; font-size:12px; font-variant-numeric: tabular-nums; }
.memo__body{
  margin:6px 0 0;
  color: rgba(18,23,38,.72);
  font-weight:800;
  font-size:13px;
  line-height:1.7;
  white-space: pre-wrap;
}
.memo__actions{ margin-top:8px; display:flex; justify-content:flex-end; }

/* ============ Daily Prompt ============ */
.card--prompt{ position:relative; overflow:hidden; }
.promptHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:4px;
}
.promptHeader__label{
  font-size:12px;
  font-weight:900;
  color: rgba(18,23,38,.62);
}
.promptHeader__date{
  font-size:12px;
  font-weight:900;
  color: rgba(18,23,38,.56);
}
.promptQuestion{
  margin:10px 0 0;
  font-weight:900;
  font-size:14px;
  line-height:1.6;
}
.promptForm{ margin-top:12px; display:grid; gap:10px; }
.promptForm__hint{ font-size:11.5px; font-weight:800; color: rgba(18,23,38,.58); }

.promptHeart{
  position:absolute;
  right:18px;
  bottom:16px;
  font-size:30px;
  opacity:0;
  transform: scale(.6);
  pointer-events:none;
}
.promptHeart.show{
  animation: heartBurst .9s ease-out 0s 1;
}
@keyframes heartBurst{
  0%{ opacity:0; transform: translateY(4px) scale(.6); }
  20%{ opacity:1; transform: translateY(-4px) scale(1.1); }
  60%{ opacity:1; transform: translateY(-10px) scale(1); }
  100%{ opacity:0; transform: translateY(-18px) scale(.6); }
}

/* ============ Mood ============ */
.moodPicker{
  margin-top:10px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.moodBtn{
  flex:1;
  min-width:90px;
  border-radius:16px;
  border:1px solid rgba(20,25,38,.10);
  background: rgba(255,255,255,.86);
  padding:10px 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  cursor:pointer;
  font-size:13px;
  font-weight:900;
}
.moodBtn__emoji{ font-size:22px; }
.moodBtn__label{ font-size:12px; }
.moodBtn--active{
  border-color: rgba(255,94,168,.6);
  box-shadow: 0 0 0 3px rgba(255,94,168,.16);
}

.moodGraph{
  margin-top:10px;
  display:flex;
  gap:10px;
  align-items:flex-end;
}
.moodGraph__item{
  flex:1;
  min-width:0;
  text-align:center;
}
.moodGraph__bar{
  width:100%;
  border-radius:999px;
  height:40px;
  margin-bottom:4px;
  background: rgba(226,232,240,.9);
}
.moodGraph__bar--happy{ background: linear-gradient(180deg, rgba(251,191,36,.9), rgba(245,158,11,.9)); }
.moodGraph__bar--normal{ background: linear-gradient(180deg, rgba(148,163,184,.9), rgba(100,116,139,.9)); }
.moodGraph__bar--sad{ background: linear-gradient(180deg, rgba(96,165,250,.9), rgba(37,99,235,.9)); }
.moodGraph__label{
  font-size:11px;
  font-weight:900;
  color: rgba(15,23,42,.7);
}
.moodGraph__day{
  font-size:10px;
  color: rgba(148,163,184,1);
}

/* ============ Notify Card ============ */
.card--notify .notifyRow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:8px;
}
.notifyStatus{
  font-weight:900;
  font-size:12px;
  color: rgba(37,99,235,.9);
}

/* ============ Couple Diary ============ */
.diaryGrid{
  align-items:start;
}
.card--diaryCalendar,
.card--diaryEditor{
  min-height:100%;
}
.diaryCalendar__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.diaryCalendar__month{
  margin-top:4px;
  color:var(--muted);
  font-size:13px;
  font-weight:800;
}
.diaryLegend{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:12px;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}
.diaryLegend__item{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.diaryWeekdays{
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 1fr));
  gap:8px;
  margin-bottom:8px;
}
.diaryWeekdays span{
  text-align:center;
  font-size:12px;
  font-weight:900;
  color:var(--muted);
}
.diaryCalendar{
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 1fr));
  gap:8px;
}
.diaryCell{
  min-height:72px;
  padding:10px 8px;
  border-radius:16px;
  border:1px solid rgba(20,25,38,.08);
  background:rgba(255,255,255,.72);
  box-shadow:var(--shadow2);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:flex-start;
  cursor:pointer;
  transition:transform .16s ease, border-color .16s ease, background .16s ease;
}
.diaryCell:hover{
  transform:translateY(-1px);
}
.diaryCell--empty{
  visibility:hidden;
  pointer-events:none;
}
.diaryCell--today{
  border-color:rgba(255,94,168,.45);
}
.diaryCell--active{
  background:linear-gradient(180deg, rgba(255,94,168,.16), rgba(124,92,255,.08));
  border-color:rgba(255,94,168,.40);
}
.diaryCell__day{
  font-size:14px;
  font-weight:900;
}
.diaryCell__dots{
  display:flex;
  align-items:center;
  gap:5px;
  min-height:10px;
}
.diaryDot{
  width:7px;
  height:7px;
  border-radius:999px;
  display:inline-block;
}
.diaryDot--memo{ background:#fb7185; }
.diaryDot--photo{ background:#38bdf8; }
.diaryDot--anni{ background:#a78bfa; }
.diaryUploadPicker{
  display:grid;
  justify-items:start;
  gap:10px;
  padding:10px;
  border:1px solid rgba(255,94,168,.18);
  border-radius:18px;
  background:linear-gradient(135deg, rgba(255,94,168,.10), rgba(124,92,255,.10));
}
.diaryUploadPicker__input{
  display:none !important;
}
.diaryUploadPicker__button{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:0 16px;
  background:linear-gradient(135deg, rgba(255,94,168,.96), rgba(124,92,255,.92));
  color:white;
  box-shadow:0 12px 28px rgba(255,94,168,.18);
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
}
.diaryUploadPicker__button:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 34px rgba(124,92,255,.20);
}
.diaryUploadPicker__button:active{
  transform:scale(.98);
}
.diaryUploadPicker__count{
  color:rgba(18,23,38,.62);
  font-size:12.5px;
  font-weight:900;
}
.diaryPhotoList{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}
.diaryPhoto{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  border:1px solid rgba(20,25,38,.08);
  background:rgba(255,255,255,.78);
  contain:layout paint;
}
.diaryPhoto__img{
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
  display:block;
  background:rgba(255,255,255,.56);
}
.diaryPhoto__remove{
  position:absolute;
  right:8px;
  bottom:8px;
  border:none;
  border-radius:999px;
  padding:6px 10px;
  background:rgba(17,24,39,.76);
  color:#fff;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
}
.diaryAnniversaryList{
  display:grid;
  gap:10px;
}
.diaryAnniversaryItem{
  width:100%;
  border:none;
  cursor:pointer;
  text-align:left;
  border-radius:16px;
  padding:12px 14px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(20,25,38,.08);
  box-shadow:var(--shadow2);
  display:flex;
  align-items:center;
  gap:12px;
}
.diaryAnniversaryItem__date{
  min-width:54px;
  color:var(--muted);
  font-size:12px;
  font-weight:900;
}
.diaryAnniversaryItem__text{
  font-size:14px;
  font-weight:800;
}

/* ============ Lock Screen ============ */
.lock{
  position: fixed;
  inset: 0;
  z-index: 100;
  display:none;
  place-items:center;
  background:
    radial-gradient(900px 520px at 10% 0%, rgba(255,94,168,.20), transparent 60%),
    radial-gradient(900px 520px at 90% 15%, rgba(124,92,255,.14), transparent 60%),
    radial-gradient(900px 520px at 50% 95%, rgba(34,199,199,.14), transparent 60%),
    rgba(255,255,255,.45);
  backdrop-filter: blur(10px);
}
.lock.show{ display:grid; }

.lock__card{
  width: min(520px, calc(100% - 28px));
  border-radius: 22px;
  border: 1px solid rgba(20,25,38,.10);
  background: rgba(255,255,255,.96);
  box-shadow: var(--shadow);
  padding: 18px 18px;
  text-align:center;
}
.lock__badge{
  width: 44px;
  height: 44px;
  margin: 0 auto 10px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  font-weight: 900;
  background: linear-gradient(135deg, rgba(255,94,168,.20), rgba(124,92,255,.16));
  border: 1px solid rgba(20,25,38,.10);
}
.lock__title{ margin: 0; font-size: 18px; letter-spacing: -0.3px; }
.lock__desc{ margin: 8px 0 14px; color: rgba(18,23,38,.66); font-weight: 800; font-size: 13.5px; line-height: 1.7; }
.lock__form{ display:grid; gap: 8px; }
.lock__label{ text-align:left; font-weight: 900; font-size: 12px; color: rgba(18,23,38,.76); }
.lock__row{ display:flex; gap:10px; align-items:center; }
.lock__codeRow{ display:flex; gap:8px; align-items:center; }
.lock__input{
  width: 100%;
  flex: 1;
  border-radius: 14px;
  border: 1px solid rgba(20,25,38,.10);
  background: rgba(255,255,255,.78);
  color: rgba(18,23,38,.92);
  padding: 12px 12px;
  outline:none;
  font-size: 14px;
}
.lock__miniButton,
.lock__resetCode{
  border: 1px solid rgba(20,25,38,.10);
  background: rgba(255,255,255,.78);
  color: rgba(18,23,38,.72);
  font-weight: 900;
  cursor: pointer;
}
.lock__miniButton{
  flex: 0 0 auto;
  min-height: 42px;
  border-radius: 13px;
  padding: 0 12px;
}
.lock__resetCode{
  justify-self: start;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
}
.lock__miniButton:disabled,
.lock__resetCode:disabled{ opacity: .55; cursor: not-allowed; }
.lock__hint{ margin: 0; text-align:left; color: rgba(18,23,38,.60); font-weight: 800; font-size: 12.5px; }
.lock__hint.error{ color: rgba(220, 38, 38, .85); }
.lock__card.shake{ animation: shake .26s ease-in-out 0s 1; }
@keyframes shake{
  0%{ transform: translateX(0); }
  25%{ transform: translateX(-6px); }
  50%{ transform: translateX(6px); }
  75%{ transform: translateX(-4px); }
  100%{ transform: translateX(0); }
}
.lock__foot{ margin-top: 12px; color: rgba(18,23,38,.55); font-weight: 900; font-size: 12px; }

/* ============ Install Bar ============ */
.install{
  position:fixed;
  left:14px;
  right:14px;
  bottom: calc(var(--music-bar-height) + var(--tabbar-height) + 20px + env(safe-area-inset-bottom));
  z-index:70;
  padding:10px 12px;
  border-radius:16px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(20,25,38,.10);
  box-shadow: var(--shadow2);
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.install.show{ display:flex; }
.install__text{ display:flex; flex-direction:column; gap:2px; }
.install__title{ font-weight:900; font-size:13px; }
.install__sub{ font-weight:800; font-size:12px; color: rgba(15,23,42,.7); }
.install__actions{ display:flex; gap:8px; }

/* ==========================
   🎵 Music Floating UI
   ========================== */
.music{
  position:fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom));
  z-index: 90;

  margin: 0 auto;
  width: min(640px, 100%);
  display:flex;
  align-items:center;
  gap:12px;

  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(20,25,38,.10);
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,255,255,.88));
  backdrop-filter: blur(16px);
  box-shadow: 0 16px 40px rgba(15,23,42,.16);
}

/* 재생 중일 때 살짝 빛나는 느낌 */
.music.music--playing{
  box-shadow:
    0 0 0 1px rgba(255,94,168,.18),
    0 18px 40px rgba(248,113,113,.35);
}

.music__artwork{
  width:34px;
  height:34px;
  flex:0 0 auto;
  border-radius:10px;
  object-fit:cover;
  border:1px solid rgba(20,25,38,.10);
  box-shadow:0 7px 16px rgba(15,23,42,.18);
}

.music__btn{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(20,25,38,.15);
  background: radial-gradient(circle at 30% 0%, #ffffff, rgba(255,94,168,0.18));
  box-shadow: 0 4px 10px rgba(148,163,184,0.35);

  display:flex;
  align-items:center;
  justify-content:center;

  position: relative;
  font-size: 0;          /* 안의 텍스트는 숨기고 */
  cursor:pointer;
}

/* 아이콘 공통 베이스 */
.music__btn::before{
  content:"";
  display:block;
}

/* ⏯ 재생(▶) 아이콘 – paused 상태일 때 */
.music__btn[data-state="paused"]::before{
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 11px;  /* 삼각형 크기 */
  border-color: transparent transparent transparent #111827;
  margin-left: 1px;              /* 살짝만 오른쪽으로 */
}

/* ⏸ 일시정지 아이콘 – playing 상태일 때 */
.music__btn[data-state="playing"]::before{
  width: 12px;
  height: 12px;
  background:
    linear-gradient(90deg,
      #111827 0 40%,
      transparent 40% 60%,
      #111827 60% 100%);
  border-radius: 2px;
}

.music__meta{
  flex:1;
  min-width:0;
}

.music__title{
  font-size:13px;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.music__sub{
  font-size:11px;
  font-weight:800;
  color: rgba(55,65,81,.7);
}

/* 가사 아이콘 버튼 */
.music__lyricsBtn{
  border:none;
  border-radius:999px;
  padding: 6px 10px;
  font-size:11px;
  font-weight:900;
  cursor:pointer;
  white-space:nowrap;
  background: linear-gradient(135deg, var(--p1), var(--p2));
  color:#fff;
  box-shadow: 0 8px 20px rgba(236,72,153,.55);
}

/* 볼륨 슬라이더 */
.music__vol{
  width:90px;
}

/* =========================
   Cinematic lyrics player
   ========================= */
.lyrics{
  position:fixed;
  inset:0;
  width:100vw;
  height:100dvh;
  max-height:100dvh;
  z-index:9999;
  display:grid;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  transform:translateY(12px) scale(.985);
  transition:opacity .28s ease, transform .34s cubic-bezier(.2,.8,.2,1);
}

.lyrics.show{
  pointer-events:auto;
  opacity:1;
  transform:translateY(0) scale(1);
}

body.lyrics-open{
  overflow:hidden;
  touch-action:none;
}

.lyrics__backdrop{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 24% 4%, rgba(255,174,213,.34), transparent 31%),
    radial-gradient(circle at 82% 18%, rgba(142,128,255,.26), transparent 34%),
    radial-gradient(circle at 50% 96%, rgba(38,176,184,.16), transparent 32%),
    linear-gradient(180deg, rgba(18,14,34,.90), rgba(5,7,20,.98));
  backdrop-filter: blur(14px);
}

.lyrics__sheet{
  position:fixed;
  inset:0;
  width:100vw;
  height:100dvh;
  max-height:100dvh;
  overflow:hidden;
  color:#fff;
  isolation:isolate;
  outline:none;
  display:block;
  padding:0;
}

.lyrics__ambient{
  position:absolute;
  inset:-10%;
  z-index:-3;
  background-position:center;
  background-size:cover;
  filter: blur(30px) saturate(1.28) contrast(1.08) brightness(.72);
  transform:scale(1.12);
  opacity:.72;
}

.lyrics__veil{
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(180deg, rgba(3,5,14,.62) 0%, rgba(12,10,28,.18) 35%, rgba(3,5,14,.92) 100%),
    radial-gradient(ellipse at center, rgba(255,255,255,.05), transparent 58%),
    radial-gradient(circle at 18% 24%, rgba(255,128,186,.22), transparent 30%),
    radial-gradient(circle at 86% 68%, rgba(107,203,210,.14), transparent 30%),
    linear-gradient(90deg, rgba(2,4,12,.58), transparent 18%, transparent 82%, rgba(2,4,12,.58));
}

.lyrics__topbar{
  position:static;
  z-index:3;
  height:0;
}

.lyrics__now{
  display:none;
}

.lyrics__close{
  position:fixed;
  top:calc(env(safe-area-inset-top, 0px) + 12px);
  right:16px;
  z-index:9999;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.16);
  color:#fff;
  cursor:pointer;
  font-size:20px;
  font-weight:800;
  display:grid;
  place-items:center;
  box-shadow:0 14px 32px rgba(0,0,0,.24);
  backdrop-filter:blur(18px);
}

.lyrics__content{
  position:absolute;
  inset:0;
  z-index:2;
  width:100vw;
  height:100dvh;
  min-height:0;
  max-height:100dvh;
  margin:0;
  display:block;
  overflow:hidden;
  padding:0;
}

.lyrics__artWrap{
  position:absolute;
  top:calc(env(safe-area-inset-top, 0px) + 64px);
  left:50%;
  width:min(38vw, 148px);
  aspect-ratio:1;
  margin:0;
  transform:translateX(-50%);
  border-radius:26px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.24), rgba(255,255,255,.06)),
    rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.24);
  padding:6px;
  box-shadow:
    0 28px 58px rgba(0,0,0,.42),
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 0 46px rgba(255,142,200,.12);
  filter:none;
  animation:none;
}

.lyrics__art{
  width:100%;
  height:100%;
  object-fit:contain;
  background:rgba(255,255,255,.08);
  display:block;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.16);
}

.lyrics__pulse{
  position:absolute;
  inset:4%;
  z-index:-1;
  border-radius:inherit;
  background:rgba(255,155,205,.20);
  filter:blur(30px);
  animation:lyricsPulse 3.8s ease-in-out infinite;
}

.lyrics__player{
  position:absolute;
  left:50%;
  top:calc(env(safe-area-inset-top, 0px) + 238px);
  bottom:calc(env(safe-area-inset-bottom, 0px) + 122px);
  width:min(430px, calc(100vw - 28px));
  transform:translateX(-50%);
  min-height:0;
  max-height:calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 330px);
  display:grid;
  grid-template-rows:auto minmax(78px, 1fr) minmax(46px, auto);
  align-content:center;
  gap:14px;
  padding:0;
  border-radius:0;
  border:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
}

.lyrics__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:0 8px;
}

.lyrics__song{
  font-size:18px;
  line-height:1.2;
  font-weight:950;
  letter-spacing:0;
  color:#fff;
}

.lyrics__meta{
  margin-top:4px;
  font-size:12px;
  font-weight:850;
  color:rgba(255,255,255,.70);
}

.lyrics__play{
  flex:0 0 auto;
  width:42px;
  height:42px;
  border:0;
  border-radius:999px;
  background:
    radial-gradient(circle at 32% 22%, rgba(255,255,255,.95), rgba(255,255,255,.48) 34%, transparent 35%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,212,235,.92));
  box-shadow:0 10px 24px rgba(0,0,0,.22), 0 0 18px rgba(255,142,200,.14);
  display:grid;
  place-items:center;
  cursor:pointer;
}

.lyrics__play::before{
  content:"";
  display:block;
}

.lyrics__play[data-state="paused"]::before{
  width:0;
  height:0;
  border-style:solid;
  border-width:7px 0 7px 11px;
  border-color:transparent transparent transparent #111827;
  margin-left:2px;
}

.lyrics__play[data-state="playing"]::before{
  width:12px;
  height:13px;
  border-radius:2px;
  background:linear-gradient(90deg, #111827 0 38%, transparent 38% 62%, #111827 62% 100%);
}

.lyrics__play:disabled,
.music__btn:disabled{
  cursor:not-allowed;
  opacity:.48;
}

.lyrics__audioWarning{
  width:min(430px, 100%);
  margin:0 auto;
  padding:7px 10px;
  border-radius:14px;
  background:rgba(255,255,255,.10);
  color:rgba(255,255,255,.78);
  font-size:12px;
  font-weight:850;
  text-align:center;
}

.lyrics__trackStrip{
  width:min(430px, 100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:34px minmax(0, 1fr) 34px;
  align-items:center;
  gap:8px;
}

.lyrics__trackNav{
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:22px;
  line-height:1;
  display:grid;
  place-items:center;
  cursor:pointer;
}

.lyrics__tracks{
  min-width:0;
  display:flex;
  gap:8px;
  overflow-x:auto;
  scrollbar-width:none;
}

.lyrics__tracks::-webkit-scrollbar{
  display:none;
}

.lyrics__track{
  flex:0 0 auto;
  max-width:154px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  padding:8px 10px;
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.78);
  text-align:left;
  cursor:pointer;
}

.lyrics__track span,
.lyrics__track small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.lyrics__track span{
  font-size:12px;
  font-weight:950;
}

.lyrics__track small{
  margin-top:2px;
  font-size:10px;
  font-weight:800;
  color:rgba(255,255,255,.55);
}

.lyrics__track--active{
  border-color:rgba(255,255,255,.42);
  background:rgba(255,255,255,.18);
  color:#fff;
  box-shadow:0 10px 26px rgba(0,0,0,.18);
}

.lyrics__featured{
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  max-width:min(88vw, 430px);
  margin:8px auto 4px;
  text-align:center;
  font-size:clamp(22px, 5.2vw, 32px);
  line-height:1.36;
  font-weight:950;
  letter-spacing:0;
  color:#fff;
  text-wrap:balance;
  word-break:keep-all;
  overflow-wrap:normal;
  text-shadow:0 12px 34px rgba(0,0,0,.46), 0 0 22px rgba(255,194,225,.18);
  animation:lyricsTextIn .42s ease both;
}

.lyrics__body{
  position:relative;
  min-height:0;
  max-height:none;
  padding:0 14px 6px;
  overflow:hidden;
  mask-image:none;
  -webkit-mask-image:none;
}

.lyrics__body::-webkit-scrollbar{
  width:0;
  height:0;
}

.lyrics__line{
  padding:5px 2px;
  font-size:15.5px;
  line-height:1.58;
  font-weight:900;
  letter-spacing:0;
  color:rgba(255,255,255,.52);
  opacity:.46;
  transform:scale(.96);
  transform-origin:center;
  text-align:center;
  transition:color .26s ease, transform .32s ease, opacity .26s ease, filter .26s ease;
  white-space:pre-wrap;
  word-break:keep-all;
  overflow-wrap:normal;
  will-change:transform, opacity;
}

.lyrics__line--near{
  opacity:.68;
  color:rgba(255,255,255,.70);
  transform:scale(.985);
}

.lyrics__line--far{
  opacity:.16;
  filter:blur(.2px);
}

.lyrics__line--tag{
  margin-top:6px;
  font-size:9.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.32);
  opacity:.42;
}

.lyrics__line--active{
  color:#fff;
  opacity:1;
  transform:scale(1.02);
  text-shadow:0 12px 30px rgba(0,0,0,.50), 0 0 22px rgba(255,153,205,.30);
}

.lyrics__seek{
  position:fixed;
  left:50%;
  bottom:calc(env(safe-area-inset-bottom, 0px) + 28px);
  z-index:9998;
  width:min(430px, calc(100vw - 32px));
  transform:translateX(-50%);
  display:grid;
  gap:6px;
  padding:0;
  min-height:44px;
}

.lyrics__range{
  width:100%;
  height:26px;
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  cursor:pointer;
}

.lyrics__range::-webkit-slider-runnable-track{
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,.96) 0 var(--lyrics-progress), rgba(255,255,255,.25) var(--lyrics-progress) 100%);
}

.lyrics__range::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:14px;
  height:14px;
  margin-top:-5px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.8);
  background:#fff;
  box-shadow:0 8px 18px rgba(0,0,0,.3);
}

.lyrics__range::-moz-range-track{
  height:4px;
  border-radius:999px;
  background:rgba(255,255,255,.24);
}

.lyrics__range::-moz-range-progress{
  height:4px;
  border-radius:999px;
  background:#fff;
}

.lyrics__range::-moz-range-thumb{
  width:14px;
  height:14px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.8);
  background:#fff;
}

.lyrics__time{
  display:flex;
  justify-content:space-between;
  font-size:11.5px;
  font-weight:900;
  color:rgba(255,255,255,.72);
  font-variant-numeric:tabular-nums;
}

.lyrics__content{
  display:grid;
  grid-template-rows:30% 36% 34%;
  gap:0;
  padding:0 16px;
}

.lyrics__topZone{
  min-height:0;
  display:grid;
  align-content:end;
  justify-items:center;
  gap:8px;
  padding:calc(env(safe-area-inset-top, 0px) + 38px) 0 6px;
}

.lyrics__artWrap{
  position:relative;
  top:auto;
  left:auto;
  width:min(38vw, 152px);
  transform:none;
  box-shadow:
    0 22px 48px rgba(0,0,0,.36),
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 0 38px rgba(255,142,200,.13);
}

.lyrics__header{
  width:min(430px, 100%);
  padding:0;
  gap:10px;
}

.lyrics__focus{
  min-height:0;
  display:grid;
  place-items:center;
  padding:8px 0 2px;
}

.lyrics__featured{
  min-height:0;
  margin:0 auto;
  font-size:clamp(21px, 5vw, 31px);
  line-height:1.34;
}

.lyrics__bottomZone{
  min-height:0;
  width:min(430px, 100%);
  margin:0 auto;
  display:grid;
  grid-template-rows:minmax(32px, .8fr) auto auto;
  align-content:end;
  gap:16px;
  padding:8px 0 calc(env(safe-area-inset-bottom, 0px) + 22px);
}

.lyrics__body{
  min-height:0;
  max-height:none;
  display:grid;
  align-content:center;
  gap:2px;
  padding:0 10px;
  overflow:hidden;
}

.lyrics__line--tag{
  display:none;
}

.lyrics__empty{
  padding:10px 0;
  color:rgba(255,255,255,.70);
  font-size:14px;
  font-weight:900;
  text-align:center;
}

.lyrics__albumCarousel{
  position:relative;
  min-width:0;
  display:grid;
  grid-template-columns:28px minmax(0, 1fr) 28px;
  align-items:center;
  gap:8px;
  padding:10px 0 8px;
  margin-bottom:8px;
}

.lyrics__albumCarousel--single{
  grid-template-columns:minmax(0, 1fr);
  justify-items:center;
}

.lyrics__albumTimeline{
  position:absolute;
  top:2px;
  left:48px;
  right:48px;
  height:1px;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  opacity:.55;
}

.lyrics__albumCarousel--single .lyrics__albumTimeline{
  left:32%;
  right:32%;
  opacity:.32;
}

.lyrics__albumNav{
  width:28px;
  height:42px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  color:rgba(255,255,255,.78);
  font-size:21px;
  display:grid;
  place-items:center;
  cursor:pointer;
}

.lyrics__albums{
  min-width:0;
  display:flex;
  gap:10px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  padding:2px 2px 8px;
}

.lyrics__albumCarousel--single .lyrics__albums{
  justify-content:center;
  overflow:visible;
  width:100%;
}

.lyrics__albums::-webkit-scrollbar{
  display:none;
}

.lyrics__albumCard{
  --track-color:#f59ac4;
  flex:0 0 88px;
  width:88px;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.72);
  display:grid;
  gap:7px;
  justify-items:center;
  cursor:pointer;
  scroll-snap-align:center;
  transform:scale(.96);
  transition:transform .2s ease, color .2s ease, opacity .2s ease;
}

.lyrics__albumCard--active{
  color:#fff;
  transform:scale(1.03);
}

.lyrics__albumArtWrap{
  position:relative;
  width:70px;
  aspect-ratio:1;
  border-radius:18px;
  display:block;
  padding:3px;
  background:linear-gradient(145deg, rgba(255,255,255,.24), rgba(255,255,255,.08));
  box-shadow:0 12px 28px rgba(0,0,0,.26);
}

.lyrics__albumCard--active .lyrics__albumArtWrap{
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--track-color) 64%, white 36%),
    0 0 0 5px color-mix(in srgb, var(--track-color) 18%, transparent),
    0 0 30px color-mix(in srgb, var(--track-color) 40%, transparent),
    0 16px 34px rgba(0,0,0,.36);
}

.lyrics__albumArt{
  width:100%;
  height:100%;
  border-radius:15px;
  object-fit:cover;
  display:block;
}

.lyrics__albumPlay{
  position:absolute;
  right:6px;
  bottom:6px;
  width:22px;
  height:22px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  box-shadow:0 8px 18px rgba(0,0,0,.24);
}

.lyrics__albumPlay::before{
  content:"";
  position:absolute;
  left:9px;
  top:6px;
  width:0;
  height:0;
  border-style:solid;
  border-width:5px 0 5px 7px;
  border-color:transparent transparent transparent #111827;
}

.lyrics__albumPlay--disabled{
  opacity:.42;
}

.lyrics__albumTitle{
  max-width:88px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
  font-weight:950;
}

.lyrics__albumCarousel--single .lyrics__albumCard{
  flex-basis:96px;
  width:96px;
}

.lyrics__albumCarousel--single .lyrics__albumArtWrap{
  width:78px;
  border-radius:21px;
}

.lyrics__albumCarousel--single .lyrics__albumArt{
  border-radius:18px;
}

.lyrics__albumCarousel--single .lyrics__albumTitle{
  max-width:96px;
}

.lyrics__seek{
  position:static;
  width:100%;
  min-height:44px;
  transform:none;
}

/* Reference-inspired premium lyric player final layout */
.lyrics__backdrop{
  background:
    radial-gradient(circle at 50% 18%, rgba(255,196,225,.30), transparent 28%),
    radial-gradient(circle at 18% 44%, rgba(194,139,255,.24), transparent 34%),
    radial-gradient(circle at 82% 78%, rgba(255,115,184,.18), transparent 30%),
    linear-gradient(180deg, rgba(10,8,22,.94), rgba(5,6,18,.99));
}

.lyrics__ambient{
  filter:blur(38px) saturate(1.36) contrast(1.14) brightness(.56);
  transform:scale(1.18);
  opacity:.78;
}

.lyrics__veil{
  background:
    linear-gradient(180deg, rgba(3,4,12,.58), rgba(5,5,18,.18) 32%, rgba(3,4,12,.92)),
    radial-gradient(ellipse at 50% 26%, rgba(255,255,255,.09), transparent 36%),
    radial-gradient(circle at 22% 32%, rgba(255,114,185,.20), transparent 30%),
    radial-gradient(circle at 78% 72%, rgba(143,117,255,.18), transparent 32%),
    linear-gradient(90deg, rgba(2,3,10,.64), transparent 20%, transparent 80%, rgba(2,3,10,.64));
}

.lyrics__content{
  grid-template-rows:31% 33% 36%;
  padding:0 max(18px, env(safe-area-inset-left)) 0 max(18px, env(safe-area-inset-right));
}

.lyrics__topZone{
  align-content:end;
  gap:10px;
  padding:calc(env(safe-area-inset-top, 0px) + 42px) 0 8px;
}

.lyrics__artWrap{
  width:min(42vw, 168px);
  border-radius:30px;
  padding:5px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.30), rgba(255,255,255,.07)),
    rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.30);
  box-shadow:
    0 30px 70px rgba(0,0,0,.46),
    0 0 0 1px rgba(255,255,255,.12) inset,
    0 0 54px rgba(255,122,192,.22);
}

.lyrics__art{
  border-radius:24px;
  object-fit:cover;
}

.lyrics__pulse{
  inset:-10%;
  background:
    radial-gradient(circle, rgba(255,132,196,.30), transparent 60%),
    radial-gradient(circle, rgba(152,118,255,.20), transparent 72%);
  filter:blur(34px);
}

.lyrics__header{
  justify-content:center;
  gap:14px;
  padding:0 8px;
}

.lyrics__song{
  font-size:17px;
  text-align:left;
  text-shadow:0 8px 22px rgba(0,0,0,.38);
}

.lyrics__meta{
  font-size:11.5px;
  color:rgba(255,255,255,.66);
}

.lyrics__play{
  width:38px;
  height:38px;
  background:rgba(255,255,255,.92);
  box-shadow:0 10px 24px rgba(0,0,0,.24), 0 0 18px rgba(255,132,196,.16);
}

.lyrics__focus{
  align-items:center;
  padding:2px 0 4px;
  min-height:0;
}

.lyrics__featured{
  width:min(88vw, 430px);
  min-height:calc(2.62em + 2px);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:clamp(21px, 5.1vw, 31px);
  line-height:1.31;
  text-align:center;
  word-break:keep-all;
  overflow-wrap:normal;
  white-space:normal;
  text-wrap:balance;
  text-shadow:0 14px 36px rgba(0,0,0,.58), 0 0 26px rgba(255,198,227,.22);
}

.lyrics__bottomZone{
  grid-template-rows:minmax(46px, .86fr) auto auto;
  gap:14px;
  padding:4px 0 calc(env(safe-area-inset-bottom, 0px) + 20px);
}

.lyrics__body{
  align-content:center;
  padding:0 12px;
}

.lyrics__line{
  padding:2px 2px;
  font-size:13.5px;
  line-height:1.42;
  opacity:.42;
  word-break:keep-all;
  overflow-wrap:normal;
  text-wrap:balance;
}

.lyrics__line--near{
  opacity:.56;
  color:rgba(255,255,255,.66);
}

.lyrics__albumCarousel{
  gap:10px;
  padding:12px 0 10px;
  margin-bottom:10px;
}

.lyrics__albumTimeline{
  opacity:.26;
}

.lyrics__albumNav{
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.62);
}

.lyrics__albums{
  gap:12px;
  padding:4px 4px 10px;
}

.lyrics__albumCard{
  flex-basis:92px;
  width:92px;
}

.lyrics__albumArtWrap{
  width:74px;
  border-radius:20px;
  background:linear-gradient(145deg, rgba(255,255,255,.30), rgba(255,255,255,.08));
}

.lyrics__albumArt{
  border-radius:17px;
}

.lyrics__albumCard--active{
  transform:scale(1.045);
}

.lyrics__albumCard--active .lyrics__albumArtWrap{
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--track-color) 72%, white 28%),
    0 0 0 6px color-mix(in srgb, var(--track-color) 16%, transparent),
    0 0 34px color-mix(in srgb, var(--track-color) 42%, transparent),
    0 18px 38px rgba(0,0,0,.38);
}

.lyrics__albumTitle{
  max-width:92px;
  color:rgba(255,255,255,.82);
}

.lyrics__range{
  height:22px;
}

.lyrics__range::-webkit-slider-runnable-track{
  height:3px;
  background:linear-gradient(90deg, rgba(255,255,255,.96) 0 var(--lyrics-progress), rgba(255,255,255,.20) var(--lyrics-progress) 100%);
}

.lyrics__range::-webkit-slider-thumb{
  width:12px;
  height:12px;
  margin-top:-4.5px;
}

.lyrics__time{
  font-size:11px;
  color:rgba(255,255,255,.58);
}

@keyframes lyricsFloat{
  0%, 100%{ transform:translateY(0) scale(1); }
  50%{ transform:translateY(-4px) scale(1.015); }
}

@keyframes lyricsPulse{
  0%, 100%{ opacity:.42; transform:scale(.96); }
  50%{ opacity:.72; transform:scale(1.05); }
}

@keyframes lyricsTextIn{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}

@media (max-width: 480px){
  .lyrics__sheet{
    padding:0;
  }

  .lyrics__content{
    min-height:0;
    max-height:100dvh;
    grid-template-rows:30% 36% 34%;
    padding:0 14px;
  }

  .lyrics__topZone{
    padding:calc(env(safe-area-inset-top, 0px) + 36px) 0 4px;
    gap:7px;
  }

  .lyrics__artWrap{
    top:auto;
    left:auto;
    width:min(39vw, 140px);
    border-radius:24px;
    padding:6px;
    transform:none;
  }

  .lyrics__art{
    border-radius:18px;
  }

  .lyrics__player{
    top:calc(env(safe-area-inset-top, 0px) + 224px);
    bottom:calc(env(safe-area-inset-bottom, 0px) + 118px);
    padding:0;
    gap:12px;
    grid-template-rows:auto minmax(66px, 1fr) minmax(40px, auto);
  }

  .lyrics__featured{
    min-height:0;
    max-width:94%;
    font-size:clamp(20px, 5vw, 25px);
    line-height:1.36;
  }

  .lyrics__body{
    max-height:none;
    min-height:0;
    padding:0 8px;
  }

  .lyrics__line{
    font-size:14.5px;
    line-height:1.58;
    padding:6px 2px;
  }

  .lyrics__line--active{
    transform:scale(1.02);
  }

  .lyrics__song{
    font-size:16.5px;
  }

  .lyrics__time{
    font-size:12px;
  }
}

@media (max-width: 480px){
  .lyrics__content{
    grid-template-rows:30% 34% 36%;
    padding:0 14px;
  }

  .lyrics__topZone{
    padding:calc(env(safe-area-inset-top, 0px) + 38px) 0 6px;
  }

  .lyrics__artWrap{
    width:min(43vw, 150px);
    border-radius:26px;
  }

  .lyrics__art{
    border-radius:21px;
  }

  .lyrics__header{
    gap:10px;
  }

  .lyrics__song{
    font-size:16px;
  }

  .lyrics__play{
    width:36px;
    height:36px;
  }

  .lyrics__featured{
    width:min(90vw, 390px);
    min-height:calc(2.62em + 2px);
    font-size:clamp(19px, 5.15vw, 25px);
    line-height:1.31;
  }

  .lyrics__bottomZone{
    grid-template-rows:minmax(44px, .84fr) auto auto;
    gap:13px;
    padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 18px);
  }

  .lyrics__line{
    font-size:13px;
    line-height:1.38;
  }

  .lyrics__albumCarousel{
    padding:10px 0 8px;
    margin-bottom:8px;
  }

  .lyrics__albumCard{
    flex-basis:84px;
    width:84px;
  }

  .lyrics__albumArtWrap{
    width:68px;
    border-radius:18px;
  }

  .lyrics__albumArt{
    border-radius:15px;
  }
}

@media (max-width: 380px){
  .lyrics__artWrap{
    width:min(38vw, 130px);
  }

  .lyrics__featured{
    font-size:clamp(19px, 4.9vw, 23px);
    min-height:calc(2.62em + 2px);
  }

  .lyrics__player{
    top:calc(env(safe-area-inset-top, 0px) + 212px);
    bottom:calc(env(safe-area-inset-bottom, 0px) + 114px);
    padding:0;
  }

  .lyrics__body{
    max-height:none;
    padding:0 6px;
  }
}

/* Premium mockup-aligned lyric player layout */
.lyrics,
.lyrics__sheet,
.lyrics__content{
  width:100vw;
  height:100dvh;
  max-height:100dvh;
  overflow:hidden;
}

.lyrics__backdrop{
  background:
    radial-gradient(circle at 50% 20%, rgba(255,177,220,.36), transparent 28%),
    radial-gradient(circle at 17% 50%, rgba(159,120,255,.26), transparent 34%),
    radial-gradient(circle at 88% 72%, rgba(255,91,171,.22), transparent 30%),
    linear-gradient(180deg, rgba(7,6,19,.96), rgba(3,4,13,.99));
}

.lyrics__ambient{
  inset:-16%;
  filter:blur(46px) saturate(1.42) contrast(1.18) brightness(.48);
  transform:scale(1.24);
  opacity:.86;
}

.lyrics__veil{
  background:
    linear-gradient(180deg, rgba(2,3,10,.42), rgba(5,5,18,.06) 34%, rgba(2,3,10,.82)),
    radial-gradient(ellipse at 50% 22%, rgba(255,255,255,.12), transparent 34%),
    radial-gradient(circle at 50% 38%, rgba(255,117,190,.18), transparent 40%),
    linear-gradient(90deg, rgba(1,2,8,.72), transparent 22%, transparent 78%, rgba(1,2,8,.72));
}

.lyrics__content{
  display:grid;
  grid-template-rows:42% 22% 36%;
  gap:0;
  padding:0 18px;
}

.lyrics__topZone{
  min-height:0;
  display:grid;
  align-content:end;
  justify-items:center;
  gap:14px;
  padding:calc(env(safe-area-inset-top, 0px) + 50px) 0 8px;
}

.lyrics__artWrap{
  width:clamp(196px, 58vw, 238px);
  border-radius:34px;
  padding:6px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.34), rgba(255,255,255,.08)),
    linear-gradient(135deg, rgba(255,120,194,.32), rgba(154,124,255,.20));
  border:1px solid rgba(255,205,232,.38);
  box-shadow:
    0 34px 78px rgba(0,0,0,.50),
    0 0 0 1px rgba(255,255,255,.16) inset,
    0 0 62px rgba(255,105,183,.34),
    0 0 98px rgba(154,124,255,.18);
}

.lyrics__art{
  border-radius:27px;
  object-fit:cover;
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset;
}

.lyrics__header{
  width:min(420px, calc(100vw - 44px));
  display:grid;
  grid-template-columns:minmax(0, 1fr) 58px;
  align-items:center;
  gap:16px;
  padding:0;
}

.lyrics__song{
  font-size:clamp(18px, 4.8vw, 23px);
  line-height:1.16;
  font-weight:950;
  color:#fff;
  text-shadow:0 12px 28px rgba(0,0,0,.44);
}

.lyrics__meta{
  margin-top:5px;
  font-size:12.5px;
  line-height:1.25;
  color:rgba(255,255,255,.66);
}

.lyrics__play{
  width:58px;
  height:58px;
  border-radius:999px;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.96), rgba(255,255,255,.45) 28%, transparent 30%),
    linear-gradient(135deg, #fff, #ffd7ec 58%, #f7a0cb);
  box-shadow:
    0 18px 38px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.42) inset,
    0 0 34px rgba(255,115,188,.30);
}

.lyrics__play[data-state="paused"]::before{
  border-width:9px 0 9px 14px;
}

.lyrics__play[data-state="playing"]::before{
  width:16px;
  height:17px;
}

.lyrics__focus{
  min-height:0;
  display:grid;
  place-items:center;
  padding:0;
}

.lyrics__featured{
  width:min(92vw, 430px);
  min-height:calc(2.7em + 4px);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto;
  font-size:clamp(24px, 6vw, 34px);
  line-height:1.28;
  font-weight:950;
  letter-spacing:0;
  color:#fff;
  text-align:center;
  word-break:keep-all;
  overflow-wrap:normal;
  white-space:normal;
  text-wrap:balance;
  text-shadow:
    0 16px 36px rgba(0,0,0,.62),
    0 0 28px rgba(255,205,232,.28);
}

.lyrics__bottomZone{
  min-height:0;
  width:min(430px, 100%);
  margin:0 auto;
  display:grid;
  grid-template-rows:44px 42px 112px 62px;
  align-content:start;
  gap:8px;
  padding:4px 0 calc(env(safe-area-inset-bottom, 0px) + 12px);
}

.lyrics__body{
  order:1;
  min-height:0;
  max-height:44px;
  display:grid;
  grid-auto-rows:min-content;
  align-content:center;
  gap:0;
  padding:0 8px;
  overflow:hidden;
}

.lyrics__line{
  padding:1px 2px;
  font-size:13px;
  line-height:1.34;
  font-weight:900;
  color:rgba(255,255,255,.58);
  opacity:.48;
  text-align:center;
  white-space:normal;
  word-break:keep-all;
  overflow-wrap:normal;
  text-wrap:balance;
}

.lyrics__line--near{
  opacity:.64;
  color:rgba(255,255,255,.72);
}

.lyrics__seek{
  order:2;
  width:100%;
  min-height:42px;
  display:grid;
  gap:4px;
  padding:0 8px;
}

.lyrics__range{
  height:18px;
}

.lyrics__range::-webkit-slider-runnable-track{
  height:3px;
  background:linear-gradient(90deg, rgba(255,119,188,.98) 0 var(--lyrics-progress), rgba(255,255,255,.22) var(--lyrics-progress) 100%);
  box-shadow:0 0 18px rgba(255,119,188,.28);
}

.lyrics__range::-webkit-slider-thumb{
  width:12px;
  height:12px;
  margin-top:-4.5px;
  border:2px solid rgba(255,219,238,.95);
  background:#fff;
}

.lyrics__time{
  font-size:11px;
  font-weight:850;
  color:rgba(255,255,255,.58);
}

.lyrics__albumCarousel{
  order:3;
  min-height:0;
  display:grid;
  grid-template-columns:30px minmax(0, 1fr) 30px;
  align-items:center;
  gap:8px;
  padding:4px 0 6px;
  margin:0;
}

.lyrics__albumCarousel--single{
  grid-template-columns:minmax(0, 1fr);
}

.lyrics__albumTimeline{
  display:none;
}

.lyrics__albumNav{
  width:30px;
  height:48px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.66);
  box-shadow:none;
}

.lyrics__albums{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:94px;
  justify-content:center;
  gap:11px;
  overflow-x:auto;
  padding:5px 2px 12px;
  scroll-snap-type:x proximity;
}

.lyrics__albumCard{
  width:94px;
  flex-basis:94px;
  transform:none;
  gap:8px;
  position:relative;
}

.lyrics__albumArtWrap{
  width:82px;
  border-radius:22px;
  padding:4px;
  background:linear-gradient(145deg, rgba(255,255,255,.32), rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 16px 34px rgba(0,0,0,.32);
}

.lyrics__albumArt{
  border-radius:18px;
  object-fit:cover;
}

.lyrics__albumCard--active{
  transform:translateY(-2px);
}

.lyrics__albumCard--active .lyrics__albumArtWrap{
  border-color:rgba(255,191,226,.72);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--track-color) 74%, white 26%),
    0 0 0 6px color-mix(in srgb, var(--track-color) 18%, transparent),
    0 0 38px color-mix(in srgb, var(--track-color) 46%, transparent),
    0 18px 38px rgba(0,0,0,.38);
}

.lyrics__albumCard--active::after{
  content:"";
  width:34px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,124,193,.95), rgba(190,151,255,.88));
  box-shadow:0 0 16px rgba(255,124,193,.48);
}

.lyrics__albumTitle{
  max-width:94px;
  font-size:11px;
  color:rgba(255,255,255,.82);
}

.lyrics__controlBar{
  order:4;
  display:grid;
  grid-template-columns:48px 64px 48px 42px;
  justify-content:center;
  align-items:center;
  gap:13px;
  min-height:58px;
  padding:0;
}

.lyrics__controlBtn{
  border:0;
  border-radius:999px;
  color:#fff;
  background:rgba(255,255,255,.11);
  box-shadow:0 12px 28px rgba(0,0,0,.24);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:transform .18s ease, opacity .18s ease, background .18s ease;
}

.lyrics__controlBtn:active{
  transform:scale(.94);
}

.lyrics__controlBtn:disabled{
  opacity:.34;
  cursor:not-allowed;
}

.lyrics__controlBtn--side{
  width:48px;
  height:48px;
  font-size:34px;
  line-height:1;
}

.lyrics__controlBtn--main{
  width:64px;
  height:64px;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.95), rgba(255,255,255,.42) 28%, transparent 30%),
    linear-gradient(135deg, #fff, #ffd9ee 56%, #ff90c8);
  box-shadow:
    0 20px 42px rgba(0,0,0,.36),
    0 0 0 1px rgba(255,255,255,.44) inset,
    0 0 34px rgba(255,119,188,.38);
}

.lyrics__controlBtn--main[data-state="paused"]::before{
  content:"";
  width:0;
  height:0;
  border-style:solid;
  border-width:10px 0 10px 15px;
  border-color:transparent transparent transparent #141827;
  margin-left:3px;
}

.lyrics__controlBtn--main[data-state="playing"]::before{
  content:"";
  width:17px;
  height:18px;
  border-radius:2px;
  background:linear-gradient(90deg, #141827 0 38%, transparent 38% 62%, #141827 62% 100%);
}

.lyrics__controlBtn--playlist{
  width:42px;
  height:42px;
  font-size:24px;
  color:rgba(255,255,255,.72);
}

@media (max-width: 430px){
  .lyrics__content{
    grid-template-rows:42% 22% 36%;
    padding:0 14px;
  }

  .lyrics__topZone{
    gap:12px;
    padding-top:calc(env(safe-area-inset-top, 0px) + 46px);
  }

  .lyrics__artWrap{
    width:clamp(198px, 58vw, 226px);
    border-radius:31px;
  }

  .lyrics__art{
    border-radius:24px;
  }

  .lyrics__header{
    width:min(390px, calc(100vw - 34px));
    grid-template-columns:minmax(0, 1fr) 54px;
    gap:12px;
  }

  .lyrics__play{
    width:54px;
    height:54px;
  }

  .lyrics__featured{
    width:min(92vw, 392px);
    font-size:clamp(22px, 6.1vw, 28px);
    line-height:1.29;
  }

  .lyrics__bottomZone{
    grid-template-rows:42px 40px 108px 60px;
    gap:7px;
    padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 10px);
  }

  .lyrics__albums{
    grid-auto-columns:88px;
    gap:9px;
  }

  .lyrics__albumCard{
    width:88px;
    flex-basis:88px;
  }

  .lyrics__albumArtWrap{
    width:76px;
  }

  .lyrics__controlBar{
    grid-template-columns:45px 60px 45px 38px;
    gap:11px;
  }

  .lyrics__controlBtn--side{
    width:45px;
    height:45px;
  }

  .lyrics__controlBtn--main{
    width:60px;
    height:60px;
  }
}

@media (max-width: 370px){
  .lyrics__content{
    grid-template-rows:41% 22% 37%;
    padding:0 12px;
  }

  .lyrics__topZone{
    gap:10px;
    padding-top:calc(env(safe-area-inset-top, 0px) + 44px);
  }

  .lyrics__artWrap{
    width:clamp(190px, 56vw, 206px);
  }

  .lyrics__song{
    font-size:17px;
  }

  .lyrics__featured{
    font-size:clamp(21px, 5.9vw, 25px);
  }

  .lyrics__bottomZone{
    grid-template-rows:40px 38px 102px 58px;
    gap:6px;
  }

  .lyrics__albumArtWrap{
    width:72px;
  }
}

/* Apple Music-style live lyric stack */
.lyrics__focus{
  display:grid;
  place-items:center;
  min-height:0;
  padding:0 0 2px;
}

.lyrics__stack{
  width:min(96vw, 448px);
  min-height:100%;
  display:grid;
  grid-template-rows:minmax(22px, .72fr) minmax(70px, 1.35fr) minmax(22px, .72fr) minmax(20px, .58fr);
  align-items:center;
  justify-items:center;
  gap:4px;
  text-align:center;
  overflow:hidden;
  transform:translateZ(0);
}

.lyrics__stackLine{
  --lyrics-stack-opacity:.48;
  max-width:min(96vw, 448px);
  color:rgba(255,255,255,.58);
  font-size:clamp(13px, 3.45vw, 16px);
  line-height:1.3;
  font-weight:760;
  letter-spacing:0;
  text-align:center;
  word-break:keep-all;
  overflow-wrap:normal;
  white-space:normal;
  text-wrap:balance;
  opacity:var(--lyrics-stack-opacity);
  transform:translateY(4px) scale(.98);
  text-shadow:0 10px 24px rgba(0,0,0,.38);
  animation:lyricsStackIn .28s ease both;
  transition:opacity .24s ease, transform .24s ease, color .24s ease, filter .24s ease;
}

.lyrics__stackLine--active{
  --lyrics-stack-opacity:1;
  max-width:min(96vw, 448px);
  color:#fff;
  font-size:clamp(18px, 5vw, 30px);
  line-height:1.26;
  font-weight:800;
  transform:translateY(0) scale(1);
  text-shadow:
    0 16px 38px rgba(0,0,0,.64),
    0 0 28px rgba(255,205,232,.28);
}

.lyrics__stackLine--previous{
  --lyrics-stack-opacity:.46;
  align-self:end;
  filter:blur(.1px);
}

.lyrics__stackLine--next{
  --lyrics-stack-opacity:.58;
  align-self:start;
  color:rgba(255,255,255,.66);
}

.lyrics__stackLine--next2{
  --lyrics-stack-opacity:.34;
  align-self:start;
  transform:translateY(-2px) scale(.96);
  color:rgba(255,255,255,.48);
}

.lyrics__bottomZone{
  grid-template-rows:42px 112px 62px;
}

.lyrics__seek{
  order:1;
}

.lyrics__albumCarousel{
  order:2;
}

.lyrics__controlBar{
  order:3;
}

@keyframes lyricsStackIn{
  from{
    opacity:0;
    transform:translateY(10px) scale(.985);
  }
  to{
    opacity:var(--lyrics-stack-opacity, 1);
  }
}

@media (max-width: 430px){
  .lyrics__stack{
    width:min(97vw, 410px);
    grid-template-rows:minmax(20px, .68fr) minmax(66px, 1.38fr) minmax(20px, .68fr) minmax(18px, .52fr);
    gap:3px;
  }

  .lyrics__stackLine{
    max-width:min(97vw, 410px);
    font-size:clamp(12.5px, 3.45vw, 15px);
    line-height:1.28;
  }

  .lyrics__stackLine--active{
    font-size:clamp(18px, 5.15vw, 25px);
    line-height:1.26;
  }

  .lyrics__bottomZone{
    grid-template-rows:40px 108px 60px;
  }
}

@media (max-width: 370px){
  .lyrics__stack{
    grid-template-rows:minmax(18px, .62fr) minmax(62px, 1.35fr) minmax(18px, .62fr) minmax(16px, .48fr);
    gap:2px;
  }

  .lyrics__stackLine--active{
    font-size:clamp(18px, 5vw, 23px);
  }

  .lyrics__bottomZone{
    grid-template-rows:38px 102px 58px;
  }
}

@media (prefers-reduced-motion:reduce){
  .lyrics,
  .lyrics__artWrap,
  .lyrics__pulse,
  .lyrics__featured,
  .lyrics__stackLine,
  .lyrics__line{
    animation:none !important;
    transition:none !important;
  }
}

/* ============ Responsive ============ */
@media (min-width: 960px){
  .hero__title{ font-size:32px; }
  .appMain{ padding-top:16px; }
}
@media (max-width: 720px){
  .grid--2{ grid-template-columns: 1fr; }
  .hero__media{ min-height:300px; }
  .diaryUploadPicker{
    justify-items:stretch;
  }
  .diaryUploadPicker__button{
    width:100%;
  }
  .diaryPhotoList{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .diaryCalendar,
  .diaryWeekdays{ gap:6px; }
  .diaryCell{
    min-height:64px;
    padding:8px 6px;
    border-radius:14px;
  }
}

/* ==========================
   🎨 Theme Variants
   data-theme="romance" | "midnight" | "minimal"
   ========================== */

/* 1) Romance (기본) */
html[data-theme="romance"] {
  --bg1:#fff7fb;
  --bg2:#f3fbff;
  --card: rgba(255,255,255,.74);
  --border: rgba(20, 25, 38, .10);
  --text: rgba(18, 23, 38, .92);
  --muted: rgba(18, 23, 38, .60);

  --p1:#ff5ea8;
  --p2:#7c5cff;
  --p3:#22c7c7;
}

html[data-theme="romance"] body{
  background:
    radial-gradient(900px 520px at 10% 0%, rgba(255,94,168,.22), transparent 60%),
    radial-gradient(900px 520px at 90% 15%, rgba(124,92,255,.16), transparent 60%),
    radial-gradient(900px 520px at 50% 95%, rgba(34,199,199,.16), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
}

/* 2) Midnight (다크 모드 느낌) */
/* 2) Midnight Love – 세련된 네이비 다크 */
html[data-theme="midnight"] {
  /* 전체 톤: 딥 네이비 + 살짝 밝은 텍스트 */
  --bg1:#020617;
  --bg2:#020617;
  --card: rgba(15,23,42,.88);
  --border: rgba(148,163,184,.38);
  --text: rgba(226,232,240,.98);
  --muted: rgba(148,163,184,.86);

  /* 포인트 컬러: 오렌지 + 블루 + 시안 */
  --p1:#fb923c;
  --p2:#6366f1;
  --p3:#0ea5e9;
}

/* 배경: 완전 까만색 대신, 위쪽은 조금 밝고 그라데이션 */
html[data-theme="midnight"] body{
  background:
    radial-gradient(1200px 640px at 10% 0%, rgba(56,189,248,.32), transparent 60%),
    radial-gradient(1200px 640px at 80% 0%, rgba(251,113,133,.26), transparent 55%),
    linear-gradient(180deg, #020617 0%, #020617 35%, #020617 60%, #020617 100%);
}

/* 네비 / 상단바 / 음악바: 유리 느낌의 네이비 바 */
html[data-theme="midnight"] .tabbar,
html[data-theme="midnight"] .music,
html[data-theme="midnight"] .install,
html[data-theme="midnight"] .appHeader{
  background: radial-gradient(circle at top left,
              rgba(148,163,184,.16),
              transparent 55%)
              , rgba(15,23,42,.92);
  border-top: 1px solid rgba(30,64,175,.35);
  border-bottom: 1px solid rgba(30,64,175,.24);
  backdrop-filter: blur(20px);
}

/* 카드: 살짝 밝은 네이비 + 안쪽 그라데이션 + 부드러운 그림자 */
html[data-theme="midnight"] .card{
  background:
    radial-gradient(circle at top left,
      rgba(148,163,184,.18),
      transparent 60%)
    , rgba(15,23,42,.96);
  border: 1px solid rgba(148,163,184,.40);
  box-shadow: 0 18px 40px rgba(15,23,42,.75);
}

/* 버튼 기본: 네이비 유리 버튼 */
html[data-theme="midnight"] .btn{
  background: rgba(15,23,42,.96);
  color: var(--text);
  border-color: rgba(51,65,85,.85);
  box-shadow: 0 10px 26px rgba(15,23,42,.65);
}

/* 메인 CTA: Midnight 용 그라데이션 */
html[data-theme="midnight"] .btn--primary{
  background: linear-gradient(135deg, #fb923c, #6366f1);
  border-color: rgba(59,130,246,.85);
}

/* 인풋 / textarea: 너무 어둡지 않게 살짝 밝힌 칸 */
html[data-theme="midnight"] .input,
html[data-theme="midnight"] .textarea,
html[data-theme="midnight"] select.input{
  background: rgba(15,23,42,.94);
  border-color: rgba(51,65,85,.9);
  color: var(--text);
}

html[data-theme="midnight"] .input::placeholder,
html[data-theme="midnight"] .textarea::placeholder{
  color: rgba(148,163,184,.75);
}

html[data-theme="midnight"] .input:focus,
html[data-theme="midnight"] .textarea:focus{
  border-color: rgba(96,165,250,.95);
  box-shadow: 0 0 0 1px rgba(96,165,250,.65);
}

/* 히어로 오버레이: 위쪽은 투명, 아래로 갈수록 살짝만 어두워지게 */
html[data-theme="midnight"] .hero__overlay{
  background: linear-gradient(180deg,
    rgba(15,23,42,.10),
    rgba(15,23,42,.80) 60%,
    rgba(15,23,42,.95));
}

/* 락 화면 카드도 더 고급스럽게 */
html[data-theme="midnight"] .lock__card{
  background:
    radial-gradient(circle at top left,
      rgba(148,163,184,.20),
      transparent 60%)
    , rgba(15,23,42,.96);
  color: var(--text);
  border: 1px solid rgba(148,163,184,.40);
}

/* 음악바 슬라이더가 잘 보이도록 트랙/썸만 살짝 더 밝게 */
html[data-theme="midnight"] .music__vol{
  background: transparent;
}
html[data-theme="midnight"] .music__vol::-webkit-slider-runnable-track{
  background: rgba(51,65,85,.95);
}
html[data-theme="midnight"] .music__vol::-webkit-slider-thumb{
  box-shadow: 0 0 0 4px rgba(59,130,246,.45);
}

/* 3) Minimal (화이트 + 민트) */
html[data-theme="minimal"] {
  --bg1:#f9fafb;
  --bg2:#ecfeff;
  --card: rgba(255,255,255,.90);
  --border: rgba(148,163,184,.35);
  --text: rgba(15,23,42,.92);
  --muted: rgba(107,114,128,.90);

  --p1:#14b8a6;
  --p2:#0ea5e9;
  --p3:#6366f1;
}

html[data-theme="minimal"] body{
  background:
    radial-gradient(900px 520px at 10% 0%, rgba(20,184,166,.18), transparent 60%),
    radial-gradient(900px 520px at 90% 15%, rgba(14,165,233,.20), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
}

html[data-theme="minimal"] .tabbar,
html[data-theme="minimal"] .music,
html[data-theme="minimal"] .install,
html[data-theme="minimal"] .appHeader{
  background: rgba(255,255,255,.96);
  border-color: rgba(148,163,184,.35);
}

html[data-theme="minimal"] .btn--primary{
  background: linear-gradient(135deg, #14b8a6, #0ea5e9);
  border-color: rgba(56,189,248,.7);
}

.music{
  display:flex;
  align-items:center;
  gap:14px;
}

/* 제목 */
.music__title{
  font-size:13px;
  font-weight:900;
  white-space:nowrap;
  flex-shrink:0;
}

/* 🎵 중앙 실시간 가사 */
.music__centerLyric{
  flex:1;                    /* 가운데 영역 최대 확장 */
  text-align:center;         /* 중앙 정렬 */
  font-size:12px;
  font-weight:700;
  color: rgba(236,72,153,.9);   /* 은은한 핑크 */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition: opacity .2s ease, transform .2s ease;
}

/* 가사가 바뀔 때 살짝 부드럽게 */
.music--playing .music__centerLyric{
  opacity:1;
}

/* 제목과 가사 사이에 세련된 구분점 "·" 넣기 */
.music__lyricNow::before{
  content:"·";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  font-style:normal;
  color: rgba(156,163,175,.9);
}

/* ==========================
   🎨 Theme Variants
   data-theme="romance" | "minimal" | "lavender"
   ========================== */

/* 1) 🌸 Pink Romance (기본) */
html[data-theme="romance"] {
  --bg1:#fff7fb;
  --bg2:#f3fbff;
  --card: rgba(255,255,255,.74);
  --border: rgba(20, 25, 38, .10);
  --text: rgba(18, 23, 38, .92);
  --muted: rgba(18, 23, 38, .60);

  --p1:#ff5ea8;
  --p2:#7c5cff;
  --p3:#22c7c7;
}

html[data-theme="romance"] body{
  background:
    radial-gradient(900px 520px at 10% 0%, rgba(255,94,168,.22), transparent 60%),
    radial-gradient(900px 520px at 90% 15%, rgba(124,92,255,.16), transparent 60%),
    radial-gradient(900px 520px at 50% 95%, rgba(34,199,199,.16), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
}

/* 2) 🌿 Soft Minimal (민트/블루, 기존 minimal 밝은 버전) */
html[data-theme="minimal"] {
  --bg1:#f9fafb;
  --bg2:#ecfeff;
  --card: rgba(255,255,255,.90);
  --border: rgba(148,163,184,.35);
  --text: rgba(15,23,42,.92);
  --muted: rgba(107,114,128,.90);

  --p1:#14b8a6;
  --p2:#0ea5e9;
  --p3:#6366f1;
}

html[data-theme="minimal"] body{
  background:
    radial-gradient(900px 520px at 10% 0%, rgba(20,184,166,.18), transparent 60%),
    radial-gradient(900px 520px at 90% 15%, rgba(14,165,233,.20), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
}

html[data-theme="minimal"] .tabbar,
html[data-theme="minimal"] .music,
html[data-theme="minimal"] .install,
html[data-theme="minimal"] .appHeader{
  background: rgba(255,255,255,.96);
  border-color: rgba(148,163,184,.35);
}

html[data-theme="minimal"] .btn--primary{
  background: linear-gradient(135deg, #14b8a6, #0ea5e9);
  border-color: rgba(56,189,248,.7);
}

/* 3) 💜 Lavender Dream (새 밝은 테마) */
html[data-theme="lavender"] {
  --bg1:#f5f3ff;
  --bg2:#fdf2ff;
  --card: rgba(255,255,255,.94);
  --border: rgba(129,140,248,.28);
  --text:#111827;
  --muted: rgba(107,114,128,.90);

  --p1:#a855f7;
  --p2:#ec4899;
  --p3:#6366f1;
}

html[data-theme="lavender"] body{
  background:
    radial-gradient(900px 520px at 10% 0%, rgba(168,85,247,.21), transparent 60%),
    radial-gradient(900px 520px at 90% 10%, rgba(236,72,153,.18), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
}

html[data-theme="lavender"] .tabbar,
html[data-theme="lavender"] .music,
html[data-theme="lavender"] .install,
html[data-theme="lavender"] .appHeader{
  background: rgba(255,255,255,.96);
  border-color: rgba(148,163,184,.30);
}

html[data-theme="lavender"] .btn--primary{
  background: linear-gradient(135deg, #a855f7, #ec4899);
  border-color: rgba(192,132,252,.75);
}

/* Premium production polish */
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  overscroll-behavior-y:contain;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

button,
.btn,
.card,
.photo,
.photoSlider__item,
.diaryCell,
.tabbar__btn{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

.bg{
  animation:ambientDrift 22s ease-in-out infinite alternate;
}

@keyframes ambientDrift{
  from{filter:saturate(1) hue-rotate(0deg); transform:scale(1);}
  to{filter:saturate(1.06) hue-rotate(4deg); transform:scale(1.012);}
}

.appMain{
  -webkit-overflow-scrolling:touch;
  scroll-padding-bottom:calc(var(--tabbarH) + var(--musicH) + 36px);
}

.tab--active{
  animation:tabEnter .34s var(--ease-premium) both;
}

@keyframes tabEnter{
  from{opacity:0; transform:translateY(10px) scale(.992);}
  to{opacity:1; transform:translateY(0);}
}

.section{
  margin-top:22px;
}

.section__head{
  gap:7px;
}

.section__title{
  letter-spacing:0;
  line-height:1.22;
}

.section__desc,
.hint{
  line-height:1.62;
}

.card{
  box-shadow:0 18px 48px rgba(20,25,38,.10), 0 1px 0 rgba(255,255,255,.62) inset;
  backdrop-filter:blur(18px);
  transition:transform .26s var(--ease-premium), box-shadow .26s var(--ease-premium), border-color .26s ease, background .26s ease;
}

@media (hover:hover){
  .card:hover{
    box-shadow:0 22px 56px rgba(20,25,38,.13), 0 1px 0 rgba(255,255,255,.72) inset;
    transform:translateY(-1px);
  }
}

.btn,
.iconBtn,
.tabbar__btn,
.photoSlider__item,
.diaryCell{
  min-height:44px;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease, opacity .16s ease;
}

.btn:active,
.iconBtn:active,
.tabbar__btn:active,
.photo:active,
.photoSlider__item:active,
.diaryCell:active{
  transform:scale(.985);
}

.btn:focus-visible,
.iconBtn:focus-visible,
.tabbar__btn:focus-visible,
.segmented__btn:focus-visible,
.albumChip:focus-visible{
  outline:0;
  box-shadow:0 0 0 4px rgba(255,94,168,.18), var(--shadow2);
}

.btn:disabled,
.input:disabled,
.textarea:disabled{
  cursor:not-allowed;
  opacity:.64;
}

.hero{
  isolation:isolate;
}

.hero__media{
  min-height:360px;
  box-shadow:0 28px 74px rgba(20,25,38,.18);
}

.hero__media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 24% 18%, rgba(255,255,255,.26), transparent 30%),
    linear-gradient(180deg, rgba(10,12,22,.08), transparent 38%, rgba(10,12,22,.42));
  mix-blend-mode:screen;
  opacity:.72;
}

.hero__shine{
  animation:heroShine 8s ease-in-out infinite;
}

@keyframes heroShine{
  0%,100%{opacity:.42; transform:translateX(-8%);}
  50%{opacity:.72; transform:translateX(8%);}
}

.hero__badge,
.chip{
  box-shadow:0 10px 28px rgba(20,25,38,.10);
}

.hero__title{
  line-height:1.08;
  text-shadow:0 18px 42px rgba(10,12,22,.22);
}

.gallery,
.photoSlider{
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}

.photo,
.photoSlider__item{
  background:
    linear-gradient(110deg, rgba(255,255,255,.54) 8%, rgba(255,255,255,.86) 18%, rgba(255,255,255,.54) 33%),
    rgba(255,255,255,.48);
  background-size:220% 100%;
  animation:skeletonShimmer 2.2s ease-in-out infinite;
}

@keyframes skeletonShimmer{
  0%{background-position:120% 0;}
  100%{background-position:-120% 0;}
}

.photo__img,
.photoSlider__img{
  object-fit:cover;
  background:rgba(255,255,255,.5);
}

.gallery .photo__img{
  transition:transform .42s var(--ease-premium), filter .42s ease;
}

@media (hover:hover){
  .gallery .photo:hover .photo__img{
    transform:scale(1.018);
    filter:saturate(1.04) contrast(1.02);
  }
}

.photo__del{
  min-width:38px;
  min-height:38px;
  display:inline-grid;
  place-items:center;
  font-size:20px;
  line-height:1;
  backdrop-filter:blur(14px);
}

.lightbox{
  backdrop-filter:blur(0);
  transition:opacity .2s ease, backdrop-filter .2s ease;
}

.lightbox.show{
  backdrop-filter:blur(10px);
}

.lightbox__backdrop{
  background:rgba(4,7,18,.78);
}

.lightbox__panel{
  background:linear-gradient(180deg, rgba(15,23,42,.94), rgba(3,7,18,.96));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 28px 90px rgba(0,0,0,.42);
  animation:modalRise .28s var(--ease-premium) both;
}

@keyframes modalRise{
  from{opacity:0; transform:translateY(14px) scale(.982);}
  to{opacity:1; transform:translateY(0) scale(1);}
}

.lightbox__stage{
  background:rgba(2,6,23,.72);
  touch-action:pan-y;
}

.lightbox__img{
  max-height:72vh;
  object-fit:contain;
  user-select:none;
}

.lightbox__nav,
.lightbox__close{
  min-width:46px;
  min-height:46px;
}

.memo{
  position:relative;
  overflow:hidden;
}

.memo::before{
  content:"";
  position:absolute;
  left:0;
  top:14px;
  bottom:14px;
  width:3px;
  border-radius:999px;
  background:linear-gradient(180deg, var(--p1), var(--p2));
  opacity:.68;
}

.memo__top,
.memo__body,
.memo__actions{
  padding-left:8px;
}

.diaryCell--filled{
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.70)),
    radial-gradient(circle at 50% 0%, rgba(255,94,168,.16), transparent 62%);
  border-color:rgba(255,94,168,.32);
  box-shadow:0 12px 30px rgba(255,94,168,.10);
}

.diaryCell--active{
  box-shadow:0 0 0 2px rgba(255,94,168,.22), 0 16px 34px rgba(20,25,38,.12);
}

.diaryAnniversaryItem{
  position:relative;
  overflow:hidden;
}

.diaryAnniversaryItem::before{
  content:"";
  position:absolute;
  left:0;
  top:12px;
  bottom:12px;
  width:3px;
  border-radius:999px;
  background:linear-gradient(180deg, var(--p1), var(--p3));
}

.install{
  box-shadow:0 18px 56px rgba(20,25,38,.18);
}

.install::before{
  content:"";
  width:10px;
  align-self:stretch;
  border-radius:999px;
  background:linear-gradient(180deg, var(--p1), var(--p2));
}

.install__title{
  line-height:1.28;
}

.emptyState{
  padding:18px;
  border:1px dashed rgba(20,25,38,.16);
  border-radius:16px;
  background:rgba(255,255,255,.46);
  text-align:center;
}

.loadingHint{
  position:relative;
  overflow:hidden;
}

.loadingHint::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-2px;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--p1), transparent);
  animation:loadingBar 1.25s ease-in-out infinite;
}

.loadingHint,
.appBoot{
  animation:softContentFade .32s ease both;
}

@keyframes softContentFade{
  from{opacity:0; transform:translateY(4px);}
  to{opacity:1; transform:translateY(0);}
}

@keyframes loadingBar{
  from{transform:translateX(-100%);}
  to{transform:translateX(100%);}
}

.appInfoCard__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:44px;
  padding:10px 0;
  color:var(--muted);
}

.appInfoCard__row strong{
  color:var(--text);
  font-size:14px;
  letter-spacing:0;
}

.adminPanel,
.adminPanel__group{
  display:grid;
  gap:14px;
}

.adminPanel__group{
  margin-top:4px;
}

.adminPanel__label{
  color:rgba(18,23,38,.58);
  font-size:12px;
  font-weight:900;
}

.customerProvisioning__result{
  display:grid;
  gap:8px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(20,25,38,.10);
  background:rgba(255,255,255,.64);
}

.customerProvisioning__result div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.customerProvisioning__result span{
  color:rgba(18,23,38,.58);
  font-size:12px;
  font-weight:900;
}

.customerProvisioning__result strong{
  color:var(--text);
  font-size:13px;
  font-weight:900;
  word-break:break-all;
  text-align:right;
}

.onboardingGuide{
  position:fixed;
  inset:0;
  z-index:99998;
  display:grid;
  place-items:end center;
  padding:18px;
  animation:guideFade .22s ease both;
}

.onboardingGuide__backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.34);
}

.onboardingGuide__panel{
  position:relative;
  width:min(420px, 100%);
  display:grid;
  gap:10px;
  border:1px solid rgba(20,25,38,.10);
  border-radius:22px;
  background:rgba(255,255,255,.96);
  box-shadow:var(--shadow);
  padding:18px;
  animation:guidePanelIn .3s var(--ease-premium) both;
}

.cinematicIntro{
  position:fixed;
  inset:0;
  z-index:99997;
  display:grid;
  place-items:center;
  padding:max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  color:white;
  background:rgba(3,6,18,.92);
  overflow:hidden;
  animation:introFadeOut 3.6s cubic-bezier(.16,1,.3,1) both;
  isolation:isolate;
  cursor:pointer;
}

.cinematicIntro__media,
.cinematicIntro__image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.04);
  filter:saturate(1.05) contrast(1.02);
}

.cinematicIntro__media{
  opacity:.46;
}

.cinematicIntro__image{
  background:url("../images/영우재은.png") center/cover no-repeat;
  opacity:.22;
  animation:introMediaDrift 3.6s cubic-bezier(.16,1,.3,1) both;
}

.cinematicIntro__veil{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(3,6,18,.64), rgba(3,6,18,.18) 42%, rgba(3,6,18,.76)),
    radial-gradient(circle at 50% 38%, rgba(255,255,255,.16), transparent 26%),
    radial-gradient(circle at 20% 20%, rgba(255,94,168,.22), transparent 36%),
    radial-gradient(circle at 80% 18%, rgba(124,92,255,.20), transparent 36%);
  backdrop-filter:blur(1px);
}

.cinematicIntro__glow{
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,94,168,.28), transparent 28%),
    radial-gradient(circle at 38% 56%, rgba(124,92,255,.22), transparent 32%),
    radial-gradient(circle at 62% 58%, rgba(34,199,199,.14), transparent 34%);
  filter:blur(22px);
  animation:introGlow 3.6s var(--ease-premium) both;
  mix-blend-mode:screen;
}

.cinematicIntro__content{
  position:relative;
  z-index:1;
  display:grid;
  gap:14px;
  text-align:center;
  transform:translateY(-10px);
  max-width:min(680px, calc(100vw - 48px));
}

.cinematicIntro__eyebrow{
  margin:0;
  color:rgba(255,255,255,.72);
  font-size:12px;
  font-weight:900;
  line-height:1.5;
  letter-spacing:.08em;
  text-transform:uppercase;
  animation:introLineIn .9s ease .18s both;
}

.cinematicIntro__names{
  margin:0;
  font-size:clamp(34px, 10vw, 68px);
  font-weight:900;
  line-height:1.05;
  letter-spacing:0;
  text-shadow:0 24px 70px rgba(0,0,0,.52);
  animation:introNamesIn 1.25s cubic-bezier(.16,1,.3,1) .38s both;
}

.cinematicIntro__dday{
  justify-self:center;
  min-height:38px;
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:0 16px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.13);
  backdrop-filter:blur(18px) saturate(1.16);
  -webkit-backdrop-filter:blur(18px) saturate(1.16);
  color:rgba(255,255,255,.88);
  font-size:14px;
  font-weight:900;
  box-shadow:0 18px 60px rgba(0,0,0,.24);
  animation:introLineIn .84s ease .96s both;
}

.cinematicIntro__skip{
  position:absolute;
  right:max(18px, env(safe-area-inset-right));
  bottom:max(18px, env(safe-area-inset-bottom));
  z-index:2;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(255,255,255,.13);
  color:white;
  min-height:40px;
  padding:0 14px;
  font-weight:900;
  cursor:pointer;
  backdrop-filter:blur(16px);
}

@keyframes introFadeOut{
  0%{opacity:0;}
  10%,84%{opacity:1;}
  100%{opacity:0; visibility:hidden;}
}

@keyframes introMediaDrift{
  from{transform:scale(1.08) translate3d(-1%, .8%, 0);}
  to{transform:scale(1.03) translate3d(1%, -.8%, 0);}
}

@keyframes introGlow{
  from{opacity:.4; transform:scale(1.04);}
  to{opacity:.9; transform:scale(1);}
}

@keyframes introLineIn{
  from{opacity:0; transform:translateY(8px);}
  to{opacity:1; transform:translateY(0);}
}

@keyframes introNamesIn{
  from{opacity:0; transform:translateY(12px) scale(.96);}
  to{opacity:1; transform:translateY(0) scale(1);}
}

@keyframes guideFade{
  from{opacity:0;}
  to{opacity:1;}
}

@keyframes guidePanelIn{
  from{opacity:0; transform:translateY(16px) scale(.985);}
  to{opacity:1; transform:translateY(0) scale(1);}
}

@media (min-width:960px){
  .hero__media{min-height:480px;}
  .hero__title{font-size:42px;}
}

@media (max-width:720px){
  .input,
  .textarea,
  select.input{
    font-size:16px;
  }

  .hero__media{
    min-height:390px;
  }

  .lightbox__panel{
    width:100%;
    height:auto;
    max-height:calc(100dvh - 24px);
    border-radius:0;
  }

  .lightbox__img{
    max-height:64vh;
  }

  .install{
    align-items:flex-start;
  }
}

@supports (height:100dvh){
  body,
  .lock{
    min-height:100dvh;
  }
}

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
  }

  .bg,
  .hero__shine,
  .photo,
  .photoSlider__item,
  .replay__stage img,
  .cinematicIntro,
  .cinematicIntro__glow,
  .cinematicIntro__eyebrow,
  .cinematicIntro__names,
  .cinematicIntro__dday{
    animation:none !important;
  }
}

/* Premium memory gallery */
.albumHeroHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
}

.photoUploadCard{
  margin-bottom:16px;
}

.photoUploadCard__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}

.upload--premium{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}

.upload--premium .upload__hint{
  grid-column:1 / -1;
}

.albumGalleryCard__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}

.albumTools{
  display:grid;
  gap:12px;
  margin:14px 0 16px;
}

.albumChips{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:2px 0 6px;
  scrollbar-width:none;
}

.albumChips::-webkit-scrollbar{
  display:none;
}

.albumChip{
  flex:0 0 auto;
  min-height:38px;
  border:1px solid rgba(20,25,38,.12);
  border-radius:999px;
  padding:0 14px;
  background:rgba(255,255,255,.58);
  color:var(--muted);
  font-weight:800;
  cursor:pointer;
  transition:transform .16s ease, background .16s ease, color .16s ease, border-color .16s ease;
}

.albumChip--active{
  background:linear-gradient(135deg, rgba(255,94,168,.96), rgba(124,92,255,.92));
  border-color:rgba(255,255,255,.58);
  color:white;
  box-shadow:0 12px 30px rgba(255,94,168,.20);
}

.albumChip:active{
  transform:scale(.97);
}

.segmented{
  display:inline-flex;
  min-height:44px;
  padding:4px;
  gap:4px;
  border:1px solid rgba(20,25,38,.10);
  border-radius:999px;
  background:rgba(255,255,255,.56);
}

.segmented__btn{
  border:0;
  border-radius:999px;
  padding:0 13px;
  background:transparent;
  color:var(--muted);
  font-weight:900;
  cursor:pointer;
}

.segmented__btn--active{
  background:rgba(255,255,255,.96);
  color:var(--text);
  box-shadow:0 8px 22px rgba(20,25,38,.10);
}

.selectionBar{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  padding:10px;
  border:1px solid rgba(255,94,168,.22);
  border-radius:18px;
  background:rgba(255,255,255,.58);
}

.selectionBar strong{
  margin-right:auto;
  font-size:13px;
}

.memoryGrid{
  display:block;
  column-count:3;
  column-gap:14px;
  margin-top:12px;
}

.gallery.memoryGrid.gallery--scroll{
  max-height:none;
  overflow:visible;
  padding-right:0;
}

.memoryGrid .photo{
  display:block;
  width:100%;
  min-height:0;
  margin:0 0 14px;
  break-inside:avoid;
  page-break-inside:avoid;
  border-radius:18px;
  overflow:hidden;
  cursor:pointer;
  background:rgba(255,255,255,.72);
  box-shadow:0 14px 34px rgba(20,25,38,.11);
  transform:translateZ(0);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  content-visibility:auto;
  contain:layout paint style;
  contain-intrinsic-size:260px 340px;
}

.memoryGrid .photo:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 46px rgba(20,25,38,.15);
  border-color:rgba(255,255,255,.76);
}

.memoryGrid .photo:active{
  transform:scale(.985);
}

.memoryGrid .photo__img{
  width:100%;
  height:auto;
  min-height:0;
  display:block;
  object-fit:cover;
  background:linear-gradient(135deg, rgba(255,255,255,.78), rgba(243,251,255,.88));
}

.photo__shade{
  position:absolute;
  inset:auto 0 0;
  height:56%;
  background:linear-gradient(180deg, rgba(4,7,18,0), rgba(4,7,18,.20) 35%, rgba(4,7,18,.76));
  opacity:.92;
  pointer-events:none;
}

.photo__caption{
  position:absolute;
  z-index:2;
  left:12px;
  right:12px;
  bottom:11px;
  display:grid;
  gap:3px;
  min-width:0;
  color:white;
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}

.photo__album{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10.5px;
  font-weight:800;
  color:rgba(255,255,255,.74);
}

.photo__title{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
  font-weight:900;
  line-height:1.2;
  color:rgba(255,255,255,.96);
}

.photo__coverBadge{
  position:absolute;
  z-index:2;
  left:9px;
  color:white;
  font-size:10.5px;
  font-weight:900;
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}

.photo__coverBadge{
  top:9px;
  right:auto;
  width:auto;
  padding:4px 7px;
  border-radius:999px;
  background:rgba(255,94,168,.92);
}

.photo__check{
  position:absolute;
  z-index:3;
  top:10px;
  right:10px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.70);
  border-radius:999px;
  background:rgba(5,8,20,.28);
  color:white;
  font-weight:900;
  transform:scale(.92);
}

.photo__check--on{
  background:linear-gradient(135deg, var(--p1), var(--p2));
  transform:scale(1);
}

.memoryGrid .photo__del{
  top:9px;
  right:9px;
  left:auto;
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.50);
  background:rgba(8,12,24,.32);
  color:white;
  box-shadow:0 8px 22px rgba(2,6,23,.18);
  font-size:16px;
  line-height:1;
  backdrop-filter:blur(12px);
  transition:transform .18s ease, background .18s ease, opacity .18s ease;
}

.memoryGrid .photo__del:hover{
  transform:scale(1.06);
  background:rgba(220,38,38,.84);
}

.photo--selected{
  outline:3px solid rgba(255,94,168,.78);
  outline-offset:3px;
}

.albumEmpty{
  grid-column:1 / -1;
  column-span:all;
  display:grid;
  gap:6px;
}

.albumEmpty strong{
  color:var(--text);
}

.lightbox__panel--gallery{
  width:min(1120px, 96vw);
  height:auto;
  max-height:calc(100dvh - 48px);
  display:grid;
  grid-template-columns:minmax(0, 1fr) 340px;
  overflow:hidden;
}

.lightbox__panel--gallery .lightbox__stage{
  min-height:0;
  max-height:calc(100dvh - 48px);
}

.lightbox__meta--premium{
  display:flex;
  flex-direction:column;
  gap:14px;
  overflow:auto;
}

.lightbox__summary{
  display:grid;
  gap:7px;
  padding:4px 0 2px;
}

.lightbox__summary span{
  color:rgba(255,255,255,.68);
  font-size:12px;
  font-weight:800;
}

.lightbox__summary strong{
  color:white;
  font-size:20px;
  line-height:1.28;
}

.lightbox__summary p{
  margin:0;
  color:rgba(255,255,255,.78);
  line-height:1.58;
}

.lightbox__actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.lightbox__img{
  transition:transform .18s ease;
  transform-origin:center;
}

.replay{
  position:fixed;
  inset:0;
  z-index:99999;
  display:grid;
  place-items:center;
  width:100vw;
  max-width:100vw;
  height:100dvh;
  min-height:100dvh;
  margin:0;
  padding:0;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,94,168,.18), transparent 30%),
    radial-gradient(circle at 82% 18%, rgba(124,92,255,.20), transparent 34%),
    radial-gradient(circle at 50% 92%, rgba(34,199,199,.10), transparent 38%),
    rgba(3, 6, 18, 0.98);
  color:white;
  overflow:hidden;
  overflow-x:hidden;
  overscroll-behavior:contain;
  transform:none;
  animation:replayOverlayFade .52s cubic-bezier(.16,1,.3,1) both;
  isolation:isolate;
  box-sizing:border-box;
  touch-action:manipulation;
  contain:layout paint;
}

@keyframes replayOverlayFade{
  from{opacity:0;}
  to{opacity:1;}
}

.replay__progress{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:rgba(255,255,255,.10);
  z-index:3;
}

.replay__progress span{
  display:block;
  height:100%;
  background:linear-gradient(90deg, rgba(255,94,168,.9), rgba(124,92,255,.9), rgba(255,255,255,.86));
  transition:width .08s linear;
  box-shadow:0 0 22px rgba(255,255,255,.38);
}

.replay__stage{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  width:100%;
  max-width:100vw;
  height:100%;
  margin:0;
  padding:0;
  transform:none;
  animation:replayCrossfade .92s cubic-bezier(.16,1,.3,1) both;
  will-change:opacity, transform;
}

@keyframes replayCrossfade{
  from{opacity:0; transform:scale(1.018);}
  42%{opacity:1;}
  to{opacity:1; transform:scale(1);}
}

.replay__stage img{
  width:auto;
  height:auto;
  max-width:100vw;
  max-height:100dvh;
  object-fit:contain;
  display:block;
  animation:replayImageDrift 5.2s cubic-bezier(.22,.72,.18,1) both;
  will-change:transform, opacity;
  backface-visibility:hidden;
}

@keyframes replayImageDrift{
  from{transform:scale(1.045) translate3d(-1.2%, .8%, 0);}
  to{transform:scale(1.105) translate3d(1.2%, -.8%, 0);}
}

.replay__stage::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(2,6,23,.34), transparent 36%, rgba(2,6,23,.76)),
    radial-gradient(circle at 50% 50%, transparent 48%, rgba(0,0,0,.28));
  pointer-events:none;
}

.replay__caption{
  position:absolute;
  left:24px;
  right:24px;
  bottom:92px;
  display:grid;
  gap:8px;
  max-width:min(680px, calc(100vw - 48px));
  text-shadow:0 10px 32px rgba(0,0,0,.55);
  animation:replayCaptionIn .76s cubic-bezier(.16,1,.3,1) .12s both;
}

@keyframes replayCaptionIn{
  from{opacity:0; transform:translate3d(0,16px,0);}
  to{opacity:1; transform:translate3d(0,0,0);}
}

.replay__caption span{
  font-size:13px;
  font-weight:900;
  color:rgba(255,255,255,.72);
  letter-spacing:.04em;
}

.replay__caption strong{
  font-size:28px;
  line-height:1.18;
  text-wrap:balance;
}

.replay__caption p{
  margin:0;
  color:rgba(255,255,255,.78);
  line-height:1.55;
}

.replay__close,
.replay__play,
.replay__restart,
.replay__fullscreen,
.replay__nav{
  z-index:2;
}

.replay__close{
  position:fixed;
  top:max(18px, env(safe-area-inset-top));
  right:max(18px, env(safe-area-inset-right));
  background:rgba(255,255,255,.12);
  color:white;
  border-color:rgba(255,255,255,.18);
}

.replay__fullscreen{
  position:fixed;
  top:max(18px, env(safe-area-inset-top));
  left:max(18px, env(safe-area-inset-left));
  min-height:42px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.10);
  color:white;
  font-weight:900;
  backdrop-filter:blur(18px);
  cursor:pointer;
}

.replay__controls{
  position:absolute;
  right:max(24px, env(safe-area-inset-right));
  bottom:max(24px, env(safe-area-inset-bottom));
  z-index:2;
  display:flex;
  gap:8px;
}

.replay__play,
.replay__restart{
  min-height:42px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.10);
  color:white;
  font-weight:900;
  backdrop-filter:blur(18px);
  cursor:pointer;
  box-shadow:0 18px 60px rgba(0,0,0,.20);
}

.replay__nav{
  position:absolute;
  top:50%;
  width:52px;
  height:72px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(255,255,255,.10);
  color:white;
  font-size:38px;
  cursor:pointer;
  backdrop-filter:blur(16px);
  transition:transform .2s var(--ease-premium), background .2s ease, border-color .2s ease, opacity .2s ease;
}

.replay__nav:hover{
  transform:translateY(-50%) scale(1.035);
  background:rgba(255,255,255,.16);
}

.replay__nav--prev{
  left:max(18px, env(safe-area-inset-left));
}

.replay__nav--next{
  right:max(18px, env(safe-area-inset-right));
}

.replay--paused .replay__stage img{
  animation-play-state:paused;
}

@media (max-width:720px){
  .albumHeroHead,
  .photoUploadCard__head{
    align-items:stretch;
    flex-direction:column;
  }

  .upload--premium{
    grid-template-columns:1fr;
  }

  .albumBar{
    align-items:stretch;
  }

  .segmented{
    width:100%;
  }

  .segmented__btn{
    flex:1;
    padding:0 8px;
    font-size:12px;
  }

  .memoryGrid{
    column-count:2;
    column-gap:10px;
    margin-top:10px;
  }

  .memoryGrid .photo{
    margin-bottom:10px;
    border-radius:16px;
    box-shadow:0 10px 26px rgba(20,25,38,.10);
  }

  .memoryGrid .photo:hover{
    transform:none;
  }

  .photo__caption{
    left:10px;
    right:10px;
    bottom:10px;
  }

  .photo__title{
    font-size:12.5px;
  }

  .photo__album{
    font-size:10px;
  }

  .memoryGrid .photo__del,
  .photo__check{
    top:8px;
    right:8px;
    width:32px;
    height:32px;
  }

  .memoryGrid .photo__del{
    width:30px;
    height:30px;
  }

  .photo__coverBadge{
    top:8px;
    left:8px;
  }

  .lightbox{
    overflow:hidden;
  }

  .lightbox__center{
    padding:12px;
    align-items:center;
    justify-items:center;
    overflow:hidden;
  }

  .lightbox__panel--gallery{
    width:calc(100vw - 24px);
    max-width:calc(100vw - 24px);
    height:auto;
    min-height:0;
    max-height:calc(100dvh - 24px);
    margin:0;
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    border-radius:18px;
    overflow-x:hidden;
    overflow-y:auto;
  }

  .lightbox__backdrop{
    background:rgba(4,7,18,.58);
  }

  .lightbox__panel--gallery .lightbox__stage{
    display:grid;
    place-items:center;
    width:100%;
    height:auto;
    min-height:0;
    max-height:65dvh;
    background:rgba(2,6,23,.86);
    overflow:hidden;
  }

  .lightbox__panel--gallery .lightbox__img{
    width:auto;
    height:auto;
    max-width:100%;
    max-height:65dvh;
    object-fit:contain;
  }

  .lightbox__meta--premium{
    max-height:min(42dvh, 320px);
    padding-bottom:18px;
    overflow-y:auto;
    overflow-x:hidden;
  }

  .replay__caption{
    left:16px;
    right:16px;
    bottom:92px;
    max-width:calc(100vw - 32px);
  }

  .replay__caption strong{
    font-size:23px;
  }

  .replay__nav{
    width:44px;
    height:60px;
    font-size:32px;
  }

  .replay__fullscreen{
    min-height:38px;
    padding:0 12px;
    font-size:12px;
  }

  .replay__controls{
    left:16px;
    right:16px;
    bottom:max(18px, env(safe-area-inset-bottom));
    justify-content:flex-end;
  }

  .replay__play,
  .replay__restart{
    min-height:38px;
    padding:0 12px;
    font-size:12px;
  }
}

body.photo-modal-open .install,
body.photo-modal-open .music{
  opacity:0;
  pointer-events:none;
  transform:translate3d(0,14px,0);
}

body.replay-open .install,
body.replay-open .music,
body.replay-open .tabbar{
  opacity:0;
  pointer-events:none;
  transform:translate3d(0,18px,0);
}

.lightbox{
  z-index:9998;
  contain:layout paint;
}

.lightbox.show{
  animation:galleryFade .22s cubic-bezier(.16,1,.3,1) both;
}

.lightbox__backdrop{
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.08), transparent 36%),
    rgba(3,7,18,.82);
  backdrop-filter:blur(18px);
}

.lightbox__center{
  padding:max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
}

.lightbox__panel--gallery{
  width:min(1180px, calc(100vw - 48px));
  max-height:calc(100dvh - 48px);
  grid-template-columns:minmax(0, 1fr) minmax(280px, 340px);
  border-radius:24px;
  background:rgba(5,10,24,.92);
  overflow:hidden;
  box-shadow:0 30px 110px rgba(0,0,0,.48);
  transform-origin:center;
  will-change:transform, opacity;
  animation:galleryPanelSpring .42s cubic-bezier(.16,1,.3,1) both;
}

.lightbox__panel--gallery .lightbox__stage{
  display:grid;
  place-items:center;
  min-height:min(72dvh, 720px);
  max-height:calc(100dvh - 48px);
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.08), transparent 52%),
    rgba(2,6,20,.88);
  touch-action:pan-y pinch-zoom;
  overscroll-behavior:contain;
}

.lightbox__panel--gallery .lightbox__img{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:calc(100dvh - 84px);
  object-fit:contain;
  border-radius:10px;
  box-shadow:0 18px 60px rgba(0,0,0,.28);
  opacity:0;
  filter:blur(8px);
  transform-origin:center;
  will-change:transform, opacity, filter;
  transition:opacity .32s ease, filter .32s ease, transform .22s cubic-bezier(.2,.8,.2,1);
  backface-visibility:hidden;
}

.lightbox__panel--gallery .lightbox__img.is-loaded{
  opacity:1;
  filter:blur(0);
}

.lightbox__meta--premium{
  min-width:0;
  padding:22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.07)),
    rgba(255,255,255,.055);
  border-left:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(24px) saturate(1.18);
  -webkit-backdrop-filter:blur(24px) saturate(1.18);
}

.lightbox__summary{
  gap:9px;
}

.lightbox__summary strong{
  font-size:22px;
  letter-spacing:0;
  font-weight:900;
}

.lightbox__summary span:first-child{
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:11px;
}

.lightbox__summary span:nth-child(3){
  font-size:13px;
  color:rgba(255,255,255,.58);
}

.lightbox__actions{
  align-items:center;
}

.lightbox__settingsBtn{
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.10);
  color:white;
  font-size:22px;
  font-weight:900;
  line-height:1;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:transform .18s ease, background .18s ease;
}

.lightbox__settingsBtn:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.16);
}

.lightbox__editPanel{
  display:grid;
  gap:12px;
  max-height:0;
  opacity:0;
  overflow:hidden;
  transform:translate3d(0,-6px,0);
  transition:max-height .26s ease, opacity .2s ease, transform .2s ease;
}

.lightbox__editPanel.show{
  max-height:520px;
  opacity:1;
  overflow:visible;
  transform:translate3d(0,0,0);
}

.lightbox__editActions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

@keyframes galleryFade{
  from{opacity:0;}
  to{opacity:1;}
}

@keyframes galleryPanelSpring{
  0%{opacity:0; transform:translate3d(0,18px,0) scale(.965);}
  62%{opacity:1; transform:translate3d(0,-2px,0) scale(1.006);}
  100%{opacity:1; transform:translate3d(0,0,0) scale(1);}
}

@media (max-width:720px){
  .lightbox__center{
    padding:max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    align-items:center;
  }

  .lightbox__panel--gallery{
    width:calc(100vw - 24px);
    max-width:calc(100vw - 24px);
    max-height:calc(100dvh - 24px);
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    border-radius:22px;
    overflow-y:auto;
    overflow-x:hidden;
  }

  .lightbox__panel--gallery .lightbox__stage{
    min-height:0;
    max-height:65dvh;
    padding:0;
    background:rgba(2,6,20,.92);
  }

  .lightbox__panel--gallery .lightbox__img{
    max-width:100%;
    max-height:65dvh;
    border-radius:0;
    box-shadow:none;
  }

  .lightbox__meta--premium{
    max-height:none;
    padding:14px 14px max(14px, env(safe-area-inset-bottom));
    border-left:0;
    border-top:1px solid rgba(255,255,255,.12);
    background:
      linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08)),
      rgba(10,16,32,.48);
  }

  .lightbox__summary strong{
    font-size:18px;
  }

  .lightbox__nav{
    width:38px;
    height:48px;
    background:rgba(255,255,255,.14);
    color:white;
  }

  .lightbox__close{
    top:max(10px, env(safe-area-inset-top));
    right:max(10px, env(safe-area-inset-right));
    background:rgba(255,255,255,.14);
    color:white;
  }
}

@media (prefers-reduced-motion:reduce){
  .lightbox.show,
  .lightbox__panel--gallery,
  .replay,
  .replay__stage,
  .replay__stage img,
  .replay__caption{
    animation:none;
  }

  .lightbox__panel--gallery .lightbox__img,
  .lightbox__editPanel{
    transition:none;
  }
}

/* Unified premium design system */
:root{
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --radius-xs:12px;
  --radius-sm:16px;
  --radius-md:20px;
  --radius-lg:24px;
  --radius-xl:30px;
  --surface-glass:rgba(255,255,255,.78);
  --surface-glass-strong:rgba(255,255,255,.92);
  --surface-tint:linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,255,255,.62));
  --surface-emotional:linear-gradient(135deg, rgba(255,94,168,.11), rgba(124,92,255,.08), rgba(34,199,199,.07));
  --line-soft:rgba(20,25,38,.095);
  --line-tint:rgba(255,94,168,.18);
  --shadow-soft:0 12px 32px rgba(24,32,54,.08);
  --shadow-premium:0 22px 64px rgba(24,32,54,.115), 0 1px 0 rgba(255,255,255,.72) inset;
  --shadow-float:0 18px 46px rgba(24,32,54,.13);
  --blur-glass:blur(18px) saturate(1.12);
}

body{
  letter-spacing:0;
}

.container{
  width:min(1120px, calc(100% - 32px));
}

.appHeader,
.tabbar,
.music,
.install{
  border-color:var(--line-soft);
  background:rgba(255,255,255,.86);
  backdrop-filter:var(--blur-glass);
  -webkit-backdrop-filter:var(--blur-glass);
}

.appHeader{
  box-shadow:0 10px 30px rgba(24,32,54,.055);
}

.appHeader__inner{
  height:64px;
}

.appHeader__name,
.section__title,
.card__title,
.memo__title,
.diaryCalendar__month,
.adminPanel__label{
  letter-spacing:0;
}

.section{
  margin-top:var(--space-6);
}

.section__head{
  margin-bottom:var(--space-4);
}

.section__title{
  font-size:clamp(18px, 2.4vw, 22px);
  line-height:1.22;
  font-weight:900;
}

.section__desc{
  margin-top:var(--space-2);
  max-width:680px;
  font-size:13px;
  line-height:1.65;
}

.grid{
  gap:var(--space-4);
}

.card,
.memo,
.diaryCell,
.diaryAnniversaryItem,
.nextBox,
.live,
.stat,
.chip,
.customerProvisioning__result,
.emptyState,
.photoUploadCard,
.albumGalleryCard{
  border-color:var(--line-soft);
  background:
    var(--surface-emotional),
    var(--surface-tint);
  box-shadow:var(--shadow-premium);
  backdrop-filter:var(--blur-glass);
  -webkit-backdrop-filter:var(--blur-glass);
}

.card{
  border-radius:var(--radius-lg);
  padding:var(--space-5);
}

.card__title{
  font-size:13.5px;
  line-height:1.3;
  color:rgba(18,23,38,.84);
}

.hint,
.promptForm__hint,
.lock__hint{
  line-height:1.68;
}

.divider{
  background:linear-gradient(90deg, transparent, rgba(20,25,38,.12), transparent);
}

.btn,
.iconBtn,
.albumChip,
.segmented,
.segmented__btn,
.lock__miniButton,
.lock__resetCode,
.diaryUploadPicker__button,
.music__lyricsBtn{
  border-radius:999px;
}

.btn{
  min-height:44px;
  padding:0 16px;
  border-color:var(--line-soft);
  background:rgba(255,255,255,.76);
  box-shadow:0 10px 24px rgba(24,32,54,.085);
  transition:transform .18s var(--ease-premium), box-shadow .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
}

.btn:hover{
  box-shadow:0 14px 30px rgba(24,32,54,.12);
}

.btn:active{
  transform:scale(.975);
}

.btn--primary{
  background:
    linear-gradient(135deg, rgba(255,255,255,.16), transparent 42%),
    linear-gradient(135deg, var(--p1), var(--p2));
  border-color:rgba(255,255,255,.46);
  box-shadow:0 14px 34px rgba(255,94,168,.20);
}

.btn--soft{
  background:
    linear-gradient(135deg, rgba(255,94,168,.13), rgba(124,92,255,.11), rgba(34,199,199,.10)),
    rgba(255,255,255,.76);
}

.btn--ghost{
  background:rgba(255,255,255,.64);
}

.input,
.textarea,
select.input,
.lock__input{
  min-height:46px;
  border-radius:var(--radius-sm);
  border-color:var(--line-soft);
  background:rgba(255,255,255,.82);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset;
}

.textarea{
  padding-top:12px;
}

.input:focus,
.textarea:focus,
.lock__input:focus{
  border-color:rgba(255,94,168,.42);
  background:rgba(255,255,255,.94);
  box-shadow:0 0 0 5px rgba(255,94,168,.12), 0 10px 26px rgba(24,32,54,.06);
}

.row{
  gap:var(--space-2);
}

.tab--active{
  animation:tabEnterUnified .36s var(--ease-premium) both;
}

@keyframes tabEnterUnified{
  from{opacity:0; transform:translate3d(0,10px,0) scale(.995);}
  to{opacity:1; transform:translate3d(0,0,0) scale(1);}
}

.albumHeroHead,
.albumGalleryCard__head,
.photoUploadCard__head,
.diaryCalendar__head,
.memo__top,
.card--notify .notifyRow{
  gap:var(--space-4);
}

.albumTools,
.adminPanel,
.adminPanel__group,
.form,
.promptForm,
.memoList,
.diaryAnniversaryList{
  gap:var(--space-3);
}

.albumChip,
.segmented{
  background:rgba(255,255,255,.64);
  box-shadow:0 8px 22px rgba(24,32,54,.065);
}

.albumChip--active,
.segmented__btn--active,
.moodBtn--active{
  box-shadow:0 12px 28px rgba(255,94,168,.16);
}

.memoryGrid .photo{
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-soft);
}

@media (hover:hover){
  .memoryGrid .photo:hover{
    box-shadow:var(--shadow-float);
  }
}

.photo__shade{
  background:linear-gradient(180deg, rgba(4,7,18,0), rgba(4,7,18,.18) 36%, rgba(4,7,18,.72));
}

.photo__caption{
  bottom:12px;
}

.photo__title{
  letter-spacing:0;
}

.memo{
  padding:var(--space-4);
}

.memo::before,
.diaryAnniversaryItem::before{
  width:4px;
  opacity:.72;
}

.memo__body{
  line-height:1.72;
}

.card--prompt::before,
.card--diaryCalendar::before,
.card--diaryEditor::before,
.albumGalleryCard::before,
.photoUploadCard::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(circle at 18% 0%, rgba(255,255,255,.55), transparent 34%);
  opacity:.48;
}

.card--prompt,
.card--diaryCalendar,
.card--diaryEditor,
.albumGalleryCard,
.photoUploadCard{
  position:relative;
  overflow:hidden;
}

.card--prompt > *,
.card--diaryCalendar > *,
.card--diaryEditor > *,
.albumGalleryCard > *,
.photoUploadCard > *{
  position:relative;
  z-index:1;
}

.diaryCell{
  border-radius:var(--radius-sm);
  box-shadow:0 8px 22px rgba(24,32,54,.075);
}

.diaryCell:hover{
  box-shadow:0 12px 28px rgba(24,32,54,.10);
}

.diaryUploadPicker{
  border-color:var(--line-tint);
  border-radius:var(--radius-md);
  background:
    linear-gradient(135deg, rgba(255,94,168,.10), rgba(124,92,255,.09)),
    rgba(255,255,255,.68);
}

.diaryPhoto,
.diaryAnniversaryItem{
  border-radius:var(--radius-sm);
}

.adminPanel__label{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  min-height:30px;
  padding:0 12px;
  border-radius:999px;
  color:rgba(18,23,38,.62);
  background:rgba(255,255,255,.58);
  border:1px solid var(--line-soft);
}

.customerProvisioning__result{
  border-radius:var(--radius-md);
}

.tabbar{
  height:calc(var(--tabbar-height) + 2px);
  box-shadow:0 -12px 34px rgba(24,32,54,.08);
}

.tabbar__btn{
  min-width:58px;
  min-height:46px;
  padding:6px 12px;
}

.tabbar__btn--active{
  background:
    linear-gradient(135deg, rgba(255,94,168,.17), rgba(124,92,255,.14)),
    rgba(255,255,255,.64);
  box-shadow:0 8px 20px rgba(255,94,168,.12);
}

.music{
  box-shadow:0 16px 42px rgba(24,32,54,.14);
}

.music__btn,
.lyrics__close,
.lightbox__settingsBtn{
  transition:transform .18s var(--ease-premium), background .18s ease, box-shadow .18s ease;
}

.music__btn:active,
.lyrics__close:active,
.lightbox__settingsBtn:active{
  transform:scale(.94);
}

.onboardingGuide__panel,
.lock__card{
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-premium);
}

.lock__card{
  background:
    radial-gradient(circle at 16% 0%, rgba(255,94,168,.12), transparent 40%),
    rgba(255,255,255,.94);
  backdrop-filter:var(--blur-glass);
  -webkit-backdrop-filter:var(--blur-glass);
}

.install{
  border-radius:var(--radius-md);
}

.loadingHint,
.appBoot,
.card,
.memo,
.diaryAnniversaryItem{
  animation:softContentFade .32s ease both;
}

html[data-theme="midnight"] .card,
html[data-theme="midnight"] .memo,
html[data-theme="midnight"] .diaryCell,
html[data-theme="midnight"] .diaryAnniversaryItem,
html[data-theme="midnight"] .nextBox,
html[data-theme="midnight"] .live,
html[data-theme="midnight"] .stat,
html[data-theme="midnight"] .chip,
html[data-theme="midnight"] .customerProvisioning__result,
html[data-theme="midnight"] .emptyState{
  background:
    radial-gradient(circle at 18% 0%, rgba(148,163,184,.14), transparent 42%),
    rgba(15,23,42,.92);
  border-color:rgba(148,163,184,.30);
}

html[data-theme="midnight"] .adminPanel__label,
html[data-theme="midnight"] .albumChip,
html[data-theme="midnight"] .segmented,
html[data-theme="midnight"] .input,
html[data-theme="midnight"] .textarea,
html[data-theme="midnight"] select.input{
  background:rgba(15,23,42,.82);
  border-color:rgba(148,163,184,.28);
}

@media (max-width:720px){
  .container{
    width:min(100% - 24px, 1120px);
  }

  .appHeader__inner{
    height:58px;
  }

  .section{
    margin-top:20px;
  }

  .section__head{
    margin-bottom:12px;
  }

  .card{
    border-radius:20px;
    padding:16px;
  }

  .grid{
    gap:12px;
  }

  .btn{
    min-height:46px;
    padding:0 15px;
  }

  .row .btn{
    flex:1 1 auto;
  }

  .memoryGrid .photo{
    border-radius:17px;
  }

  .diaryWeekdays,
  .diaryCalendar{
    gap:6px;
  }

  .diaryCell{
    min-height:62px;
    padding:8px 6px;
  }

  .tabbar__btn{
    min-width:54px;
    padding-inline:8px;
  }

  .music{
    width:calc(100% - 16px);
    border-radius:22px;
  }
}

@media (prefers-reduced-motion:reduce){
  .tab--active,
  .loadingHint,
  .appBoot,
  .card,
  .memo,
  .diaryAnniversaryItem{
    animation:none !important;
  }

  .btn,
  .iconBtn,
  .albumChip,
  .segmented__btn,
  .diaryCell,
  .music__btn,
  .lyrics__close,
  .lightbox__settingsBtn{
    transition:none !important;
  }
}

/* Emotional brand identity layer */
:root{
  --brand-rose:#ff5ea8;
  --brand-violet:#7c5cff;
  --brand-aqua:#22c7c7;
  --brand-ink:rgba(18,23,38,.92);
  --brand-line:linear-gradient(90deg, var(--brand-rose), var(--brand-violet), var(--brand-aqua));
  --brand-glow:0 18px 48px rgba(255,94,168,.16), 0 10px 34px rgba(124,92,255,.10);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(420px 280px at 18% 12%, rgba(255,94,168,.10), transparent 66%),
    radial-gradient(380px 280px at 86% 18%, rgba(124,92,255,.09), transparent 66%),
    linear-gradient(180deg, rgba(255,255,255,.22), transparent 34%);
  opacity:.78;
}

.appHeader__brand{
  position:relative;
  min-height:44px;
  padding:5px 12px 5px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.58);
  border:1px solid rgba(255,255,255,.70);
  box-shadow:0 10px 28px rgba(24,32,54,.07);
}

.appHeader__brand::before{
  content:"";
  width:30px;
  height:30px;
  border-radius:999px;
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.92), transparent 30%),
    var(--brand-line);
  box-shadow:var(--brand-glow);
}

.appHeader__brand::after{
  content:"";
  position:absolute;
  left:17px;
  top:50%;
  width:12px;
  height:12px;
  border-right:2px solid rgba(255,255,255,.92);
  border-bottom:2px solid rgba(255,255,255,.92);
  transform:translateY(-58%) rotate(45deg);
  border-radius:2px;
}

.appHeader__heart{
  width:22px;
  height:22px;
  color:var(--brand-rose);
  background:transparent;
  border:0;
  box-shadow:none;
  text-shadow:0 8px 20px rgba(255,94,168,.34);
}

.appHeader__name{
  font-size:14px;
  font-weight:950;
  background:linear-gradient(135deg, rgba(18,23,38,.95), rgba(124,92,255,.80));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.appHeader__dday,
.count,
.hero__badge{
  position:relative;
  overflow:hidden;
}

.appHeader__dday::after,
.count::after,
.hero__badge::after{
  content:"";
  position:absolute;
  left:12%;
  right:12%;
  bottom:0;
  height:2px;
  background:var(--brand-line);
  opacity:.54;
}

.section__title{
  position:relative;
  width:fit-content;
}

.section__title::after{
  content:"";
  position:absolute;
  left:0;
  right:8%;
  bottom:-6px;
  height:3px;
  border-radius:999px;
  background:var(--brand-line);
  opacity:.42;
  transform-origin:left center;
  animation:brandLineIn .42s var(--ease-premium) both;
}

@keyframes brandLineIn{
  from{opacity:0; transform:scaleX(.32);}
  to{opacity:.42; transform:scaleX(1);}
}

.hero__media,
.cinematicIntro,
.replay,
.albumGalleryCard,
.photoUploadCard,
.card--prompt,
.memo,
.card--diaryCalendar,
.card--diaryEditor{
  --emotional-ring:linear-gradient(135deg, rgba(255,94,168,.34), rgba(124,92,255,.24), rgba(34,199,199,.18));
}

.albumGalleryCard::after,
.photoUploadCard::after,
.card--prompt::after,
.card--diaryCalendar::after,
.card--diaryEditor::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:var(--emotional-ring);
  pointer-events:none;
  opacity:.42;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}

.hero__titleGrad,
.cinematicIntro__names,
.replay__caption strong{
  text-shadow:0 18px 48px rgba(255,94,168,.20), 0 10px 36px rgba(124,92,255,.14);
}

.cinematicIntro__veil{
  background:
    radial-gradient(circle at 50% 26%, rgba(255,255,255,.18), transparent 32%),
    radial-gradient(circle at 18% 16%, rgba(255,94,168,.24), transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(124,92,255,.22), transparent 36%),
    linear-gradient(180deg, rgba(3,6,18,.10), rgba(3,6,18,.36) 58%, rgba(3,6,18,.72));
}

.cinematicIntro__dday,
.replay__play,
.replay__restart,
.replay__fullscreen,
.lightbox__settingsBtn{
  border-color:rgba(255,255,255,.22);
  box-shadow:0 18px 52px rgba(255,94,168,.12), 0 10px 34px rgba(0,0,0,.16);
}

.replay__progress span{
  background:var(--brand-line);
}

.replay__caption::before{
  content:"";
  width:52px;
  height:3px;
  border-radius:999px;
  background:var(--brand-line);
  box-shadow:0 0 20px rgba(255,94,168,.32);
}

.memoryGrid .photo{
  border-color:rgba(255,255,255,.70);
}

.memoryGrid .photo::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,.18), transparent 34%, rgba(255,94,168,.10));
  opacity:.58;
}

.memo::before{
  box-shadow:0 0 24px rgba(255,94,168,.24);
}

.memo__title::before{
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  margin-right:7px;
  border-radius:999px;
  background:var(--brand-line);
  box-shadow:0 0 14px rgba(255,94,168,.34);
  vertical-align:middle;
}

.diaryDot{
  box-shadow:0 0 12px currentColor;
}

.diaryCell--today{
  box-shadow:0 0 0 2px rgba(255,94,168,.18), 0 10px 26px rgba(255,94,168,.10);
}

.diaryCell--active .diaryCell__day{
  background:var(--brand-line);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.appBoot{
  position:relative;
  display:grid;
  gap:12px;
  place-items:center;
  min-height:100dvh;
  padding:24px;
  background:
    radial-gradient(420px 280px at 50% 38%, rgba(255,94,168,.14), transparent 68%),
    radial-gradient(360px 240px at 58% 42%, rgba(124,92,255,.11), transparent 68%),
    linear-gradient(180deg, rgba(255,247,251,.96), rgba(243,251,255,.96));
}

.appBoot__mark{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:999px;
  color:white;
  font-size:26px;
  font-weight:900;
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.80), transparent 28%),
    var(--brand-line);
  box-shadow:var(--brand-glow);
  animation:brandPulse 1.55s ease-in-out infinite;
}

.appBoot__label{
  color:rgba(18,23,38,.68);
  font-size:13px;
  font-weight:900;
}

.loadingHint{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:fit-content;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.58);
  border:1px solid rgba(20,25,38,.08);
}

.loadingHint::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--brand-line);
  box-shadow:0 0 16px rgba(255,94,168,.42);
  animation:brandPulse 1.25s ease-in-out infinite;
}

@keyframes brandPulse{
  0%,100%{transform:scale(1); opacity:.82;}
  50%{transform:scale(1.08); opacity:1;}
}

html[data-theme="minimal"]{
  --brand-rose:#14b8a6;
  --brand-violet:#0ea5e9;
  --brand-aqua:#6366f1;
}

html[data-theme="lavender"]{
  --brand-rose:#ec4899;
  --brand-violet:#a855f7;
  --brand-aqua:#6366f1;
}

html[data-theme="midnight"] body::before{
  opacity:.38;
}

html[data-theme="midnight"] .appHeader__name{
  background:linear-gradient(135deg, rgba(226,232,240,.98), rgba(96,165,250,.86));
  -webkit-background-clip:text;
  background-clip:text;
}

@media (max-width:720px){
  .appHeader__brand{
    padding-right:10px;
    gap:5px;
  }

  .appHeader__brand::before{
    width:28px;
    height:28px;
  }

  .appHeader__brand::after{
    left:16px;
  }

  .appHeader__name{
    font-size:13px;
  }

  .section__title::after{
    bottom:-5px;
  }

  .appBoot__mark{
    width:52px;
    height:52px;
    font-size:24px;
  }
}

@media (prefers-reduced-motion:reduce){
  .section__title::after,
  .appBoot__mark,
  .loadingHint::before{
    animation:none !important;
  }
}

/* Premium emotional copywriting system */
.emotionalQuote{
  position:relative;
  margin:10px 0 0;
  max-width:620px;
  color:rgba(18,23,38,.58);
  font-size:12.5px;
  font-weight:850;
  line-height:1.72;
  letter-spacing:0;
  animation:emotionalTextIn .44s var(--ease-premium) both;
}

.emotionalQuote::before{
  content:"";
  display:inline-block;
  width:18px;
  height:2px;
  margin:0 8px 4px 0;
  border-radius:999px;
  background:var(--brand-line);
  opacity:.58;
}

.albumAtmosphere{
  margin-top:8px;
}

.promptAtmosphere{
  margin-top:8px;
  padding:10px 12px;
  border-radius:16px;
  background:rgba(255,255,255,.44);
  border:1px solid rgba(255,255,255,.62);
}

.cinematicIntro__quotes{
  position:relative;
  width:min(520px, calc(100vw - 48px));
  min-height:24px;
  margin-top:2px;
  color:rgba(255,255,255,.76);
  font-size:13px;
  font-weight:800;
  line-height:1.55;
  text-shadow:0 10px 28px rgba(0,0,0,.34);
}

.cinematicIntro__quotes span{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  opacity:0;
  transform:translate3d(0,8px,0);
  animation:introQuoteRotate 4.2s ease both;
}

.cinematicIntro__quotes span:nth-child(2){
  animation-delay:1.35s;
}

.cinematicIntro__quotes span:nth-child(3){
  animation-delay:2.7s;
}

@keyframes introQuoteRotate{
  0%{opacity:0; transform:translate3d(0,8px,0);}
  12%,30%{opacity:1; transform:translate3d(0,0,0);}
  44%,100%{opacity:0; transform:translate3d(0,-6px,0);}
}

.replay__memoryLine{
  position:relative;
  padding-left:16px;
}

.replay__memoryLine::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:7px;
  height:7px;
  border-radius:999px;
  background:var(--brand-line);
  box-shadow:0 0 18px rgba(255,94,168,.42);
}

.emptyState{
  gap:8px;
  color:rgba(18,23,38,.62);
  line-height:1.7;
  animation:emotionalTextIn .42s var(--ease-premium) both;
}

.emptyState strong{
  font-size:14px;
  color:rgba(18,23,38,.86);
}

.emptyState span,
.emptyState small{
  display:block;
}

.emptyState small{
  color:rgba(18,23,38,.50);
  font-size:12px;
  font-weight:800;
}

.memoEmpty{
  text-align:left;
}

.memoEmpty::before,
.albumEmpty::before{
  content:"";
  width:34px;
  height:34px;
  display:block;
  border-radius:999px;
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.88), transparent 28%),
    var(--brand-line);
  box-shadow:var(--brand-glow);
  opacity:.92;
}

.memoList .hint:not(.errorText),
.albumGalleryCard .loadingHint{
  animation:emotionalTextIn .36s var(--ease-premium) both;
}

@keyframes emotionalTextIn{
  from{opacity:0; transform:translate3d(0,8px,0);}
  to{opacity:1; transform:translate3d(0,0,0);}
}

@media (max-width:720px){
  .emotionalQuote{
    font-size:12px;
    line-height:1.65;
  }

  .cinematicIntro__quotes{
    width:min(360px, calc(100vw - 36px));
    font-size:12.5px;
  }

  .promptAtmosphere{
    padding:9px 10px;
  }
}

@media (prefers-reduced-motion:reduce){
  .emotionalQuote,
  .cinematicIntro__quotes span,
  .emptyState,
  .memoList .hint:not(.errorText),
  .albumGalleryCard .loadingHint{
    animation:none !important;
  }

  .cinematicIntro__quotes span{
    position:static;
    display:none;
    opacity:1;
    transform:none;
  }

  .cinematicIntro__quotes span:first-child{
    display:block;
  }
}

/* Clean premium readability refinement */
:root{
  --bg1:#fbfdff;
  --bg2:#f5f7ff;
  --card:rgba(255,255,255,.88);
  --border:rgba(17,24,39,.10);
  --text:rgba(17,24,39,.95);
  --muted:rgba(55,65,81,.74);
  --p1:#d96f9d;
  --p2:#7872d8;
  --p3:#42bec2;
  --brand-rose:#d96f9d;
  --brand-violet:#7872d8;
  --brand-aqua:#42bec2;
  --brand-ink:rgba(17,24,39,.95);
  --brand-line:linear-gradient(90deg, rgba(217,111,157,.82), rgba(120,114,216,.86), rgba(66,190,194,.80));
  --brand-glow:0 14px 36px rgba(120,114,216,.10), 0 8px 24px rgba(66,190,194,.08);
  --surface-glass:rgba(255,255,255,.86);
  --surface-glass-strong:rgba(255,255,255,.96);
  --surface-tint:linear-gradient(145deg, rgba(255,255,255,.96), rgba(250,252,255,.84));
  --surface-emotional:linear-gradient(135deg, rgba(66,190,194,.075), rgba(120,114,216,.065), rgba(217,111,157,.045));
  --line-soft:rgba(17,24,39,.085);
  --line-tint:rgba(120,114,216,.16);
  --shadow-soft:0 10px 28px rgba(17,24,39,.065);
  --shadow-premium:0 18px 48px rgba(17,24,39,.085), 0 1px 0 rgba(255,255,255,.80) inset;
  --shadow-float:0 16px 42px rgba(17,24,39,.105);
  --blur-glass:blur(10px) saturate(1.04);
}

body{
  color:var(--text);
  background:
    radial-gradient(860px 520px at 8% 0%, rgba(66,190,194,.12), transparent 62%),
    radial-gradient(760px 480px at 92% 10%, rgba(120,114,216,.10), transparent 62%),
    radial-gradient(680px 420px at 50% 96%, rgba(217,111,157,.055), transparent 64%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
}

body::before{
  background:
    radial-gradient(420px 280px at 18% 12%, rgba(66,190,194,.07), transparent 68%),
    radial-gradient(380px 280px at 86% 18%, rgba(120,114,216,.07), transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,.28), transparent 34%);
  opacity:.62;
}

.bg{
  background:conic-gradient(from 180deg, rgba(66,190,194,.055), rgba(120,114,216,.060), rgba(217,111,157,.045), rgba(66,190,194,.055));
  filter:blur(72px);
  opacity:.48;
}

.appHeader,
.tabbar,
.music,
.install{
  background:rgba(255,255,255,.90);
  border-color:rgba(17,24,39,.08);
}

.card,
.memo,
.diaryCell,
.diaryAnniversaryItem,
.nextBox,
.live,
.stat,
.chip,
.customerProvisioning__result,
.emptyState,
.photoUploadCard,
.albumGalleryCard{
  background:
    var(--surface-emotional),
    var(--surface-tint);
  border-color:rgba(17,24,39,.075);
  box-shadow:var(--shadow-premium);
}

.section__title{
  color:rgba(17,24,39,.96);
  font-weight:950;
}

.section__desc,
.hint,
.muted,
.promptForm__hint,
.lock__hint,
.paging__hint,
.emotionalQuote,
.diaryCalendar__month,
.diaryLegend,
.memo__date,
.appBoot__label{
  color:rgba(55,65,81,.74);
}

.card__title,
.memo__title,
.diaryCell__day,
.nextBox__value,
.stat__value,
.chip__value,
.promptQuestion,
.lock__title,
.music__title{
  color:rgba(17,24,39,.94);
}

.memo__body,
.emptyState,
.emptyState span{
  color:rgba(31,41,55,.78);
}

.emptyState strong{
  color:rgba(17,24,39,.92);
}

.emptyState small{
  color:rgba(75,85,99,.68);
}

.appHeader__name{
  background:linear-gradient(135deg, rgba(17,24,39,.98), rgba(67,56,202,.78));
  -webkit-background-clip:text;
  background-clip:text;
}

.appHeader__heart{
  color:#bf6f9f;
  text-shadow:0 8px 18px rgba(120,114,216,.16);
}

.appHeader__brand::before,
.appBoot__mark,
.memoEmpty::before,
.albumEmpty::before{
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.90), transparent 30%),
    linear-gradient(135deg, rgba(66,190,194,.82), rgba(120,114,216,.82), rgba(217,111,157,.70));
}

.section__title::after,
.appHeader__dday::after,
.count::after,
.hero__badge::after{
  opacity:.32;
}

.btn--primary,
.albumChip--active{
  background:
    linear-gradient(135deg, rgba(255,255,255,.16), transparent 42%),
    linear-gradient(135deg, #746fe0, #41b9c0);
  border-color:rgba(255,255,255,.54);
  box-shadow:0 12px 30px rgba(65,185,192,.16), 0 8px 22px rgba(116,111,224,.12);
}

.btn--soft{
  background:
    linear-gradient(135deg, rgba(66,190,194,.10), rgba(120,114,216,.085), rgba(217,111,157,.045)),
    rgba(255,255,255,.84);
}

.btn--ghost,
.albumChip,
.segmented,
.segmented__btn--active,
.adminPanel__label{
  background:rgba(255,255,255,.78);
}

.input,
.textarea,
select.input,
.lock__input{
  color:rgba(17,24,39,.94);
  background:rgba(255,255,255,.90);
  border-color:rgba(17,24,39,.10);
}

.input::placeholder,
.textarea::placeholder{
  color:rgba(75,85,99,.55);
}

.input:focus,
.textarea:focus,
.lock__input:focus{
  border-color:rgba(66,190,194,.42);
  box-shadow:0 0 0 4px rgba(66,190,194,.13), 0 10px 24px rgba(17,24,39,.045);
}

.diaryDot--memo{
  background:#8fb8ff;
}

.diaryDot--photo{
  background:#42bec2;
}

.diaryDot--anni{
  background:#9b93e6;
}

.diaryCell--today{
  border-color:rgba(66,190,194,.42);
  box-shadow:0 0 0 2px rgba(66,190,194,.14), 0 10px 24px rgba(17,24,39,.055);
}

.diaryCell--active,
.diaryCell--filled{
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(249,252,255,.82)),
    radial-gradient(circle at 50% 0%, rgba(66,190,194,.12), transparent 62%);
  border-color:rgba(120,114,216,.24);
}

.diaryUploadPicker{
  border-color:rgba(120,114,216,.15);
  background:
    linear-gradient(135deg, rgba(66,190,194,.075), rgba(120,114,216,.075)),
    rgba(255,255,255,.78);
}

.diaryUploadPicker__button{
  background:linear-gradient(135deg, #746fe0, #41b9c0);
  box-shadow:0 12px 26px rgba(65,185,192,.15);
}

.moodBtn--active{
  border-color:rgba(66,190,194,.45);
  box-shadow:0 0 0 3px rgba(66,190,194,.13);
}

.music.music--playing{
  box-shadow:
    0 0 0 1px rgba(66,190,194,.16),
    0 16px 38px rgba(65,185,192,.16);
}

.music__btn{
  background:radial-gradient(circle at 30% 0%, #ffffff, rgba(66,190,194,.14));
}

.music__lyricsBtn{
  background:linear-gradient(135deg, #746fe0, #41b9c0);
  box-shadow:0 8px 20px rgba(65,185,192,.22);
}

.music__centerLyric{
  color:rgba(67,56,202,.78);
}

.albumGalleryCard{
  padding:22px;
}

.albumGalleryCard__head{
  margin-bottom:18px;
}

.albumTools{
  margin:16px 0 18px;
  gap:14px;
}

.albumChip{
  color:rgba(55,65,81,.74);
  border-color:rgba(17,24,39,.09);
}

.selectionBar{
  border-color:rgba(120,114,216,.16);
  background:rgba(255,255,255,.76);
}

.memoryGrid{
  column-gap:16px;
  margin-top:14px;
}

.memoryGrid .photo{
  margin-bottom:16px;
  border-color:rgba(255,255,255,.84);
  box-shadow:0 10px 26px rgba(17,24,39,.075);
}

.memoryGrid .photo:hover{
  box-shadow:0 16px 38px rgba(17,24,39,.105);
}

.photo__coverBadge{
  background:rgba(65,185,192,.90);
}

.photo--selected{
  outline-color:rgba(65,185,192,.78);
}

.memoryGrid .photo__del:hover{
  background:rgba(185,28,28,.78);
}

.emotionalQuote::before,
.memo__title::before,
.replay__memoryLine::before,
.loadingHint::before{
  box-shadow:0 0 14px rgba(66,190,194,.26);
}

.memo::before,
.diaryAnniversaryItem::before{
  background:linear-gradient(180deg, rgba(66,190,194,.84), rgba(120,114,216,.72));
  box-shadow:none;
}

.cinematicIntro__veil{
  background:
    radial-gradient(circle at 50% 26%, rgba(255,255,255,.16), transparent 32%),
    radial-gradient(circle at 18% 16%, rgba(66,190,194,.18), transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(120,114,216,.18), transparent 36%),
    linear-gradient(180deg, rgba(3,6,18,.10), rgba(3,6,18,.34) 58%, rgba(3,6,18,.70));
}

.cinematicIntro__names,
.replay__caption strong{
  text-shadow:0 18px 46px rgba(17,24,39,.24), 0 10px 28px rgba(120,114,216,.16);
}

.lightbox__settingsBtn,
.replay__play,
.replay__restart,
.replay__fullscreen{
  box-shadow:0 16px 42px rgba(0,0,0,.16);
}

@media (max-width:720px){
  .albumGalleryCard{
    padding:16px;
  }

  .albumTools{
    margin:14px 0 16px;
  }

  .memoryGrid{
    column-gap:12px;
  }

  .memoryGrid .photo{
    margin-bottom:12px;
  }
}

/* Settings archive UX refinement */
.adminPanel{
  gap:18px;
}

.adminPanel__group{
  gap:10px;
}

.adminPanel__label{
  min-height:28px;
  padding:0 11px;
  color:rgba(55,65,81,.72);
  font-size:11.5px;
  background:rgba(255,255,255,.68);
  box-shadow:none;
}

.backupCard{
  display:grid;
  gap:14px;
}

.backupCard__head{
  display:flex;
  align-items:flex-start;
  gap:12px;
}

.backupCard__icon{
  flex:0 0 auto;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:14px;
  color:white;
  font-size:18px;
  font-weight:900;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.78), transparent 30%),
    linear-gradient(135deg, rgba(66,190,194,.88), rgba(120,114,216,.82));
  box-shadow:0 12px 26px rgba(66,190,194,.14);
}

.backupCard__button{
  width:100%;
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:1px solid rgba(17,24,39,.08);
  border-radius:18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.20), transparent 44%),
    linear-gradient(135deg, #746fe0, #41b9c0);
  color:white;
  font-size:14px;
  font-weight:950;
  box-shadow:0 14px 34px rgba(65,185,192,.16), 0 8px 22px rgba(116,111,224,.12);
  cursor:pointer;
  transition:transform .18s var(--ease-premium), box-shadow .18s ease, opacity .18s ease;
}

.backupCard__button:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 42px rgba(65,185,192,.18), 0 10px 26px rgba(116,111,224,.14);
}

.backupCard__button:active{
  transform:scale(.98);
}

.backupCard__button:disabled{
  cursor:not-allowed;
  opacity:.58;
  transform:none;
}

.backupCard__buttonIcon{
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:rgba(255,255,255,.20);
  font-size:16px;
  line-height:1;
}

.backupCard__hint{
  margin:0;
  padding:10px 12px;
  border-radius:16px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(17,24,39,.07);
  color:rgba(55,65,81,.74);
  font-size:12.5px;
  font-weight:850;
  line-height:1.62;
}

.appInfoCard__row{
  border-top:1px solid rgba(17,24,39,.07);
  border-bottom:1px solid rgba(17,24,39,.07);
}

@media (max-width:720px){
  .backupCard{
    gap:12px;
  }

  .backupCard__button{
    min-height:52px;
    border-radius:17px;
  }
}

/* System admin customer dashboard */
.customerDashboard{
  display:grid;
  gap:16px;
}

.customerDashboard__entry{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.customerDashboard__body{
  display:grid;
  gap:14px;
  animation:softContentFade .28s var(--ease-premium) both;
}

.customerDashboard__body[aria-busy="true"]{
  opacity:.86;
}

.customerDashboard__section{
  display:grid;
  gap:12px;
  padding:14px;
  border:1px solid rgba(17,24,39,.075);
  border-radius:20px;
  background:rgba(255,255,255,.64);
}

.customerDashboard__section--featured,
.customerDashboard__section--invite{
  background:
    radial-gradient(circle at 12% 0%, rgba(66,190,194,.10), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.88), rgba(250,252,255,.72));
}

.customerDashboard__sectionHead{
  display:flex;
  align-items:flex-start;
  gap:12px;
}

.customerDashboard__sectionHead h3{
  margin:0;
  color:rgba(17,24,39,.94);
  font-size:15px;
  line-height:1.3;
}

.customerDashboard__sectionHead p{
  margin:4px 0 0;
  color:rgba(55,65,81,.72);
  font-size:12.5px;
  font-weight:850;
  line-height:1.6;
}

.customerDashboard__icon{
  flex:0 0 auto;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:14px;
  color:white;
  font-weight:950;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.78), transparent 30%),
    linear-gradient(135deg, rgba(66,190,194,.88), rgba(120,114,216,.82));
  box-shadow:0 12px 26px rgba(66,190,194,.12);
}

.customerDashboard__icon--soft{
  color:rgba(67,56,202,.80);
  background:rgba(255,255,255,.82);
  border:1px solid rgba(17,24,39,.075);
  box-shadow:0 10px 24px rgba(17,24,39,.055);
}

.customerDashboard__stats,
.customerDashboard__list{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
}

.customerDashboard__stats div,
.customerDashboard__list div{
  min-width:0;
  padding:10px 12px;
  border:1px solid rgba(17,24,39,.07);
  border-radius:16px;
  background:rgba(255,255,255,.72);
}

.customerDashboard__list{
  grid-template-columns:1fr;
}

.customerCard{
  position:relative;
  overflow:hidden;
  padding:14px 14px 14px 16px !important;
  background:
    linear-gradient(135deg, rgba(66,190,194,.10), rgba(120,114,216,.07)),
    rgba(255,255,255,.82) !important;
}

.customerCard::before{
  content:"";
  position:absolute;
  left:0;
  top:12px;
  bottom:12px;
  width:4px;
  border-radius:999px;
  background:var(--brand-line);
}

.customerCard__label{
  color:rgba(55,65,81,.62) !important;
  font-size:11px !important;
  letter-spacing:.02em;
}

.customerCard strong{
  margin-top:6px !important;
  color:rgba(17,24,39,.95) !important;
  font-size:15px !important;
}

.customerCard small{
  display:block;
  margin-top:6px;
  overflow:hidden;
  color:rgba(55,65,81,.70);
  font-size:12px;
  font-weight:850;
  text-overflow:ellipsis;
}

.customerDashboard__stats span,
.customerDashboard__list span{
  display:block;
  color:rgba(55,65,81,.68);
  font-size:11px;
  font-weight:900;
}

.customerDashboard__stats strong,
.customerDashboard__list strong{
  display:block;
  margin-top:5px;
  overflow:hidden;
  color:rgba(17,24,39,.92);
  font-size:12.5px;
  font-weight:950;
  line-height:1.35;
  text-overflow:ellipsis;
}

.customerDashboard__form{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.customerDashboard__form .row{
  grid-column:1 / -1;
}

.customerDashboard__hint{
  margin:0;
  padding:10px 12px;
  border-radius:16px;
  background:rgba(255,255,255,.66);
  border:1px solid rgba(17,24,39,.07);
  color:rgba(55,65,81,.74);
  font-size:12.5px;
  font-weight:850;
  line-height:1.62;
}

.customerDashboard__hint--success{
  border-color:rgba(66,190,194,.24);
  background:rgba(236,253,245,.72);
  color:rgba(15,118,110,.88);
}

.customerDashboard__hint--error{
  border-color:rgba(239,68,68,.20);
  background:rgba(254,242,242,.76);
  color:rgba(185,28,28,.88);
}

.customerDeliveryCard{
  display:grid;
  gap:14px;
  padding:16px;
  border:1px solid rgba(66,190,194,.18);
  border-radius:22px;
  background:
    radial-gradient(circle at 18% 0%, rgba(66,190,194,.16), transparent 42%),
    radial-gradient(circle at 86% 12%, rgba(120,114,216,.12), transparent 42%),
    rgba(255,255,255,.78);
  box-shadow:0 18px 48px rgba(17,24,39,.085);
  animation:deliveryCardIn .44s var(--ease-premium) both;
}

.customerDeliveryCard__hero{
  display:grid;
  justify-items:center;
  gap:7px;
  padding:18px 12px 14px;
  text-align:center;
}

.customerDeliveryCard__mark{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:18px;
  color:white;
  font-size:24px;
  font-weight:950;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.80), transparent 30%),
    linear-gradient(135deg, rgba(66,190,194,.90), rgba(120,114,216,.84));
  box-shadow:0 16px 34px rgba(66,190,194,.16);
}

.customerDeliveryCard__hero p{
  margin:0;
  color:rgba(55,65,81,.72);
  font-size:12px;
  font-weight:900;
}

.customerDeliveryCard__hero h4{
  margin:0;
  color:rgba(17,24,39,.96);
  font-size:21px;
  line-height:1.22;
}

.customerDeliveryCard__hero > span{
  max-width:360px;
  color:rgba(55,65,81,.66);
  font-size:12.5px;
  font-weight:850;
  line-height:1.65;
}

.customerDeliveryCard__details{
  display:grid;
  gap:8px;
}

.customerDeliveryCard__details div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width:0;
  padding:11px 12px;
  border:1px solid rgba(17,24,39,.065);
  border-radius:15px;
  background:rgba(255,255,255,.72);
}

.customerDeliveryCard__details span{
  flex:0 0 auto;
  color:rgba(55,65,81,.66);
  font-size:11.5px;
  font-weight:900;
}

.customerDeliveryCard__details strong{
  min-width:0;
  overflow:hidden;
  color:rgba(17,24,39,.94);
  font-size:12.5px;
  font-weight:950;
  text-align:right;
  text-overflow:ellipsis;
}

.customerDeliveryCard__actions{
  display:flex;
  gap:8px;
}

.customerDeliveryCard__actions .btn{
  flex:1;
}

@keyframes deliveryCardIn{
  from{opacity:0; transform:translate3d(0,12px,0) scale(.985);}
  to{opacity:1; transform:translate3d(0,0,0) scale(1);}
}

@media (max-width:720px){
  .customerDashboard__entry{
    align-items:stretch;
    flex-direction:column;
  }

  .customerDashboard__stats,
  .customerDashboard__list,
  .customerDashboard__form{
    grid-template-columns:1fr;
  }

  .customerDashboard__section{
    padding:12px;
    border-radius:18px;
  }

  .customerDashboard__sectionHead h3{
    font-size:14px;
  }

  .customerDashboard__sectionHead p{
    font-size:12px;
  }

  .customerDashboard__sectionHead{
    gap:10px;
  }

  .customerDashboard__icon{
    width:34px;
    height:34px;
    border-radius:13px;
  }

  .customerDashboard__stats div,
  .customerDashboard__list div{
    padding:10px;
  }

  .customerDashboard__form .row .btn,
  .customerDashboard .row .btn{
    flex:1 1 100%;
  }

  .customerProvisioning__result div{
    align-items:flex-start;
    flex-direction:column;
  }

  .customerProvisioning__result strong{
    text-align:left;
  }

  .customerCard strong{
    font-size:14px !important;
  }

  .customerDeliveryCard{
    padding:14px;
    border-radius:20px;
  }

  .customerDeliveryCard__hero h4{
    font-size:19px;
  }

  .customerDeliveryCard__details div{
    align-items:flex-start;
    flex-direction:column;
    gap:5px;
  }

  .customerDeliveryCard__details strong{
    width:100%;
    text-align:left;
    white-space:normal;
    word-break:break-word;
  }

  .customerDeliveryCard__actions{
    flex-direction:column;
  }
}