:root {
  color-scheme: light dark;
  --ink: #17181a;
  --muted: #76767b;
  --line: rgba(0, 0, 0, .1);
  --paper: #ffffff;
  --paper-2: #f6f6f8;
  --kakao: #fee500;
  --kakao-ink: #231f00;
  --ig: #ec3f79;
  --blue: #0a84ff;
  --red: #ff453a;
  --green: #32d74b;
  --safe-bottom: max(18px, env(safe-area-inset-bottom));
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  letter-spacing: 0;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; letter-spacing: 0; }
body {
  min-height: 100dvh;
  overflow: hidden;
  color: var(--ink);
  background: #141517;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 44px 44px;
}
button, input, textarea { font: inherit; letter-spacing: 0; }
button { color: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #31a8ff;
  outline-offset: 2px;
}
img { display: block; max-width: 100%; }

.stage {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 16px;
}
.phone-shell {
  position: relative;
  height: min(844px, calc(100dvh - 32px));
  aspect-ratio: 390 / 844;
  width: auto;
  max-width: calc(100vw - 32px);
  filter: drop-shadow(0 32px 54px rgba(0,0,0,.48));
}
.phone-bezel {
  position: absolute;
  inset: 0;
  padding: 9px;
  border: 1px solid #6d6e71;
  border-radius: 55px;
  background: linear-gradient(145deg, #3c3e42 0%, #090a0b 46%, #303135 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.22),
    inset 0 0 0 3px #111,
    0 0 0 1px #080808;
}
.phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 46px;
  background: #fff;
  isolation: isolate;
}
.phone-screen::before {
  content: "";
  position: absolute;
  z-index: 150;
  top: 9px;
  left: 50%;
  width: 96px;
  height: 26px;
  border-radius: 999px;
  background: #020203;
  transform: translateX(-50%);
  pointer-events: none;
}
.phone-screen::after {
  content: "";
  position: absolute;
  z-index: 149;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  pointer-events: none;
}
.side-button {
  position: absolute;
  width: 4px;
  background: #242529;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px #54555a;
}
.side-button--mute { left: -4px; top: 117px; height: 30px; }
.side-button--volume-up { left: -4px; top: 174px; height: 60px; }
.side-button--volume-down { left: -4px; top: 244px; height: 60px; }
.side-button--power { right: -4px; top: 198px; height: 92px; }

.ios-status {
  position: absolute;
  z-index: 80;
  top: 0;
  left: 0;
  right: 0;
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 20px 0;
  color: #111;
  font-size: 12px;
  font-weight: 650;
  pointer-events: none;
}
.ios-status.is-light { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.3); }
.status-time { width: 75px; }
.status-icons { display: flex; align-items: center; gap: 5px; }
.status-icons svg { width: 15px; height: 15px; stroke-width: 2.3; }
.status-icons .battery { width: 22px; }

.screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--paper);
  animation: screen-in .28s cubic-bezier(.22,.8,.26,1);
}
@keyframes screen-in {
  from { opacity: 0; transform: scale(.985); }
  to { opacity: 1; transform: scale(1); }
}
.screen--dark { background: #08090b; color: #fff; }
.screen-scroll {
  height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.screen-scroll::-webkit-scrollbar { display: none; }

.icon-btn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.icon-btn:active { background: rgba(0,0,0,.07); transform: scale(.96); }
.icon-btn svg { width: 22px; height: 22px; stroke-width: 2; }
.icon-btn--dark:active { background: rgba(255,255,255,.1); }
.primary-btn {
  min-height: 42px;
  border: 0;
  border-radius: 10px;
  padding: 0 18px;
  background: #17181a;
  color: #fff;
  font-weight: 650;
  cursor: pointer;
}
.primary-btn:disabled { opacity: .45; cursor: default; }
.text-btn {
  border: 0;
  background: transparent;
  color: #0a84ff;
  padding: 8px;
  cursor: pointer;
}
.eyebrow {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.muted { color: var(--muted); }
.hidden { display: none !important; }

/* Lock screen */
.lock-screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: #fff;
  background: #1c1b1a;
}
.lock-wallpaper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  image-orientation: from-image;
  transform: scale(1.03);
}
.lock-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(9,13,17,.26) 0%, rgba(9,13,17,.02) 31%, rgba(8,9,10,.08) 61%, rgba(8,9,10,.48) 100%),
    linear-gradient(90deg, rgba(5,10,15,.18), transparent 60%);
}
.lock-clock {
  position: absolute;
  top: 65px;
  left: 0;
  right: 0;
  text-align: center;
  text-shadow: 0 2px 15px rgba(0,0,0,.3);
}
.lock-clock .lock-time {
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
  font-size: clamp(60px, 17vw, 76px);
  line-height: .95;
  font-weight: 250;
  letter-spacing: 0;
}
.lock-clock .lock-date {
  display: block;
  margin-top: 10px;
  font-size: 15px;
  font-weight: 550;
}
.lock-notifications {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 116px;
  display: grid;
  gap: 9px;
}
.lock-notification {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 10px;
  align-items: center;
  min-height: 67px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 16px;
  background: rgba(242,240,238,.64);
  color: #212225;
  box-shadow: 0 8px 28px rgba(0,0,0,.12);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
  backdrop-filter: blur(20px) saturate(1.1);
}
.notification-icon {
  width: 37px;
  height: 37px;
  border-radius: 10px;
  background: var(--kakao);
  color: var(--kakao-ink);
  display: grid;
  place-items: center;
}
.notification-icon svg { width: 22px; height: 22px; fill: currentColor; }
.notification-copy { min-width: 0; }
.notification-copy strong { display: block; font-size: 12px; line-height: 1.2; }
.notification-copy span {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 11px;
  color: #55565a;
}
.notification-time { align-self: start; color: #78797d; font-size: 9px; }
.lock-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 28px;
  display: grid;
  gap: 5px;
  justify-items: center;
  color: rgba(255,255,255,.9);
  font-size: 11px;
  text-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.swipe-handle {
  width: 126px;
  height: 4px;
  margin-top: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
}
.lock-swipe-area {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.lock-swipe-area::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 140px;
  background: linear-gradient(to top, rgba(0,0,0,.14), transparent);
}

/* Password */
.password-screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: #fff;
  background: #111;
}
.password-screen .lock-wallpaper { filter: blur(5px) brightness(.55); transform: scale(1.08); }
.password-panel {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 85px 28px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(9,11,14,.32);
}
.password-lock {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin-bottom: 15px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.password-panel h1 { margin: 0; font-size: 20px; font-weight: 650; }
.password-panel > p { margin: 7px 0 22px; color: rgba(255,255,255,.7); font-size: 12px; }
.password-dots { display: flex; gap: 18px; height: 28px; align-items: center; }
.password-dot {
  width: 12px;
  height: 12px;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 50%;
  background: transparent;
}
.password-dot.filled { background: #fff; box-shadow: 0 0 12px rgba(255,255,255,.3); }
.password-error { min-height: 21px; margin-top: 9px; color: #ffd0cb; font-size: 12px; }
.password-error.shake { animation: shake .35s ease; }
@keyframes shake {
  20%, 60% { transform: translateX(-7px); }
  40%, 80% { transform: translateX(7px); }
}
.keypad {
  width: 100%;
  max-width: 286px;
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 26px;
}
.key {
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 50%;
  background: rgba(255,255,255,.17);
  color: #fff;
  font-size: 23px;
  font-weight: 400;
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  cursor: pointer;
}
.key:active { background: rgba(255,255,255,.34); transform: scale(.96); }
.key--plain { border-color: transparent; background: transparent; font-size: 13px; }
.key svg { width: 22px; height: 22px; }
.password-cancel { margin-top: 16px; color: rgba(255,255,255,.72); font-size: 12px; background: transparent; border: 0; cursor: pointer; }

/* Home screen */
.home-screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: #fff;
  background: #242427;
}
.home-screen .lock-wallpaper {
  filter: brightness(.64) saturate(.72);
  transform: scale(1.06);
}
.home-screen .lock-shade {
  background:
    linear-gradient(180deg, rgba(12,14,20,.34), rgba(11,12,15,.05) 45%, rgba(11,12,15,.42)),
    linear-gradient(180deg, transparent 76%, rgba(0,0,0,.18));
}
.home-content {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 58px 17px 29px;
  display: flex;
  flex-direction: column;
}
.home-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin: 0 4px 16px;
  text-shadow: 0 1px 9px rgba(0,0,0,.22);
}
.home-heading h1 { margin: 0; font-size: 23px; font-weight: 650; }
.home-heading p { margin: 3px 0 0; font-size: 11px; color: rgba(255,255,255,.75); }
.home-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 19px 10px;
}
.app-icon {
  display: grid;
  justify-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: #fff;
  padding: 0;
  text-shadow: 0 1px 5px rgba(0,0,0,.38);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.app-icon:active .app-icon-symbol { transform: scale(.92); }
.app-icon-symbol {
  position: relative;
  width: 59px;
  height: 59px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 5px 12px rgba(0,0,0,.18);
  transition: transform .14s ease;
  overflow: hidden;
}
.app-icon-symbol svg { width: 31px; height: 31px; stroke-width: 1.8; }
.app-icon span:last-child { font-size: 10px; line-height: 1.1; white-space: nowrap; }
.icon-kakao { background: #fee500; color: #231f00; }
.icon-kakao svg { fill: currentColor; stroke-width: 1.2; }
.icon-instagram { background: radial-gradient(circle at 30% 110%, #ffdd55 0 18%, #ff543e 38%, #c837ab 62%, #4b62de 100%); color: white; }
.icon-x { background: #050505; color: white; }
.icon-x strong { font-size: 28px; line-height: 1; font-weight: 500; }
.icon-camera { background: #e9e9ec; color: #27282b; }
.icon-notes { background: #fff7b0; color: #8d771a; }
.icon-settings { background: #8d8f96; color: #f4f4f5; }
.icon-weather { background: #2b9fea; color: #fff; }
.icon-calendar { background: #fff; color: #ff3b30; }
.icon-calendar svg { stroke-width: 2.3; }
.icon-music { background: #fa315a; color: #fff; }
.icon-phone { background: #35c759; color: #fff; }
.icon-phone svg { fill: #fff; stroke-width: 1.2; }
.icon-messages { background: #39c85b; color: #fff; }
.icon-messages svg { fill: #fff; stroke-width: 1.2; }
.icon-safari { background: #f3f7fc; color: #1687e8; }
.icon-photos { background: #fff; color: #fff; }
.app-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(80,80,80,.75);
  border-radius: 999px;
  background: #ff3b30;
  color: white;
  font-size: 10px;
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.home-dock {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  padding: 13px 11px;
  border: 1px solid rgba(255,255,255,.21);
  border-radius: 26px;
  background: rgba(205,205,207,.36);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(24px) saturate(1.1);
  backdrop-filter: blur(24px) saturate(1.1);
}
.home-dock .app-icon-symbol { width: 55px; height: 55px; box-shadow: 0 3px 8px rgba(0,0,0,.15); }
.home-dock .app-icon span:last-child { display: none; }
.home-indicator {
  position: absolute;
  z-index: 90;
  left: 50%;
  bottom: 7px;
  width: 128px;
  height: 5px;
  border: 0;
  padding: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.8);
  transform: translateX(-50%);
  cursor: pointer;
}
.home-indicator--light { background: rgba(255,255,255,.9); }
.unlock-callout {
  margin-top: 21px;
  display: flex;
  justify-content: center;
}
.unlock-callout span {
  padding: 8px 13px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(17,18,22,.28);
  color: rgba(255,255,255,.86);
  font-size: 10px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Shared app chrome */
.app-page { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; overflow: hidden; }
.app-header {
  position: relative;
  z-index: 20;
  flex: 0 0 auto;
  min-height: 96px;
  padding: 51px 16px 9px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.app-header h1 { margin: 0; font-size: 21px; font-weight: 720; line-height: 1.15; }
.app-header .header-center { flex: 1; min-width: 0; text-align: center; }
.app-header .header-center h1 { font-size: 17px; }
.app-header .header-center p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.app-body { flex: 1; min-height: 0; position: relative; overflow: auto; overscroll-behavior: contain; scrollbar-width: none; }
.app-body::-webkit-scrollbar { display: none; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 1px; }
.app-header--dark { background: rgba(8,9,11,.92); color: #fff; border-bottom-color: rgba(255,255,255,.09); }
.app-header--dark .muted { color: rgba(255,255,255,.55); }
.app-header--dark .icon-btn:active { background: rgba(255,255,255,.08); }

/* Kakao */
.kakao-page { background: #fff; }
.kakao-header { border-bottom: 0; }
.kakao-header h1 { font-size: 24px; font-weight: 760; }
.kakao-profile-bar {
  padding: 9px 16px 11px;
  display: flex;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid #ececef;
}
.mini-avatar {
  width: 35px;
  height: 35px;
  flex: 0 0 auto;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  background: #d9dae0;
  image-orientation: from-image;
}
.mini-avatar--default { display: grid; place-items: center; background: #4a4b51; color: #fff; font-size: 12px; font-weight: 700; }
.kakao-profile-bar b { display: block; font-size: 12px; }
.kakao-profile-bar span { display: block; color: var(--muted); font-size: 10px; }
.chat-list { padding-bottom: 28px; }
.chat-row {
  width: 100%;
  display: grid;
  grid-template-columns: 50px minmax(0,1fr) auto;
  gap: 11px;
  align-items: center;
  padding: 13px 15px;
  border: 0;
  border-bottom: 1px solid #f0f0f2;
  background: #fff;
  text-align: left;
  cursor: pointer;
}
.chat-row:active { background: #f5f5f6; }
.chat-avatar-stack { position: relative; width: 50px; height: 50px; }
.chat-avatar-stack img { width: 50px; height: 50px; object-fit: cover; object-position: center; border-radius: 18px; image-orientation: from-image; }
.chat-main { min-width: 0; }
.chat-main strong { display: flex; align-items: center; gap: 5px; font-size: 13px; line-height: 1.3; }
.chat-main p { margin: 3px 0 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #74757a; font-size: 11px; }
.chat-side { min-height: 40px; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; align-self: stretch; padding: 2px 0; }
.chat-side time { color: #a0a0a5; font-size: 9px; }
.unread-badge { min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; border-radius: 999px; background: #ffe400; color: #2b2600; font-size: 9px; font-weight: 750; }
.tabbar {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  bottom: 0;
  height: 78px;
  padding: 8px 20px var(--safe-bottom);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(0,0,0,.08);
  background: rgba(250,250,251,.95);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.tabbar button {
  border: 0;
  background: transparent;
  color: #929399;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 3px;
  font-size: 9px;
  cursor: pointer;
}
.tabbar button.active { color: #18191b; font-weight: 700; }
.tabbar svg { width: 22px; height: 22px; }
.chat-list .app-body { padding-bottom: 78px; }
.kakao-tabs-spacer { height: 88px; }

.chatroom { background: #090a0c; color: #fff; }
.chat-head {
  flex: 0 0 auto;
  min-height: 89px;
  padding: 47px 10px 7px;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto;
  gap: 3px;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(9,10,12,.96);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.chat-head-title { min-width: 0; text-align: center; }
.chat-head-title strong { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15px; }
.chat-head-title span { display: block; margin-top: 2px; color: rgba(255,255,255,.42); font-size: 9px; }
.chat-head-actions { display: flex; }
.chat-feed {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 15px 14px 24px;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.chat-feed::-webkit-scrollbar { display: none; }
.date-separator { display: flex; justify-content: center; margin: 17px 0 16px; }
.date-separator span { padding: 6px 12px; border-radius: 999px; background: #1b1d20; color: rgba(255,255,255,.6); font-size: 10px; }
.msg-row { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0; }
.msg-row.is-me { justify-content: flex-end; }
.msg-avatar { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; object-fit: cover; object-position: center; margin-top: 17px; image-orientation: from-image; }
.msg-stack { max-width: 78%; }
.msg-name { display: block; margin: 0 0 4px 4px; color: rgba(255,255,255,.52); font-size: 9px; }
.msg-content { display: flex; align-items: flex-end; gap: 5px; }
.is-me .msg-content { flex-direction: row-reverse; }
.bubble {
  position: relative;
  padding: 9px 12px;
  border-radius: 15px;
  background: #2b2d31;
  color: #f6f6f7;
  font-size: 12px;
  line-height: 1.45;
  word-break: break-word;
  white-space: pre-wrap;
}
.is-me .bubble { background: var(--kakao); color: var(--kakao-ink); border-top-right-radius: 4px; }
.msg-row:not(.is-me) .bubble { border-top-left-radius: 4px; }
.msg-row:not(.is-me) .bubble::before,
.is-me .bubble::before {
  content: "";
  position: absolute;
  top: 0;
  width: 7px;
  height: 8px;
}
.msg-row:not(.is-me) .bubble::before { left: -5px; background: linear-gradient(135deg, transparent 50%, #2b2d31 51%); }
.is-me .bubble::before { right: -5px; background: linear-gradient(225deg, transparent 50%, var(--kakao) 51%); }
.msg-time { flex: 0 0 auto; align-self: flex-end; margin-bottom: 2px; color: rgba(255,255,255,.34); font-size: 8px; white-space: nowrap; }
.is-me .msg-time { text-align: right; }
.msg-typing .bubble { display: flex; gap: 4px; padding: 12px 14px; }
.msg-typing i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.55); animation: typing 1s infinite ease-in-out; }
.msg-typing i:nth-child(2) { animation-delay: .13s; }
.msg-typing i:nth-child(3) { animation-delay: .26s; }
@keyframes typing { 50% { transform: translateY(-3px); opacity: .5; } }
.story-note {
  margin: 15px 0;
  padding: 12px 13px;
  border: 1px solid rgba(254,229,0,.22);
  border-radius: 12px;
  background: rgba(254,229,0,.08);
  color: rgba(255,255,255,.74);
  font-size: 10px;
  line-height: 1.5;
}
.story-note strong { color: var(--kakao); }
.chat-composer {
  flex: 0 0 auto;
  padding: 8px 9px calc(var(--safe-bottom) + 2px);
  background: rgba(8,9,11,.98);
}
.composer-hint {
  width: 100%;
  margin-bottom: 6px;
  padding: 8px 10px;
  border: 1px solid rgba(254,229,0,.18);
  border-radius: 9px;
  background: transparent;
  color: #e7dc72;
  font-size: 9px;
  text-align: left;
  cursor: pointer;
}
.composer-row { display: flex; align-items: flex-end; gap: 8px; }
.composer-plus { width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #222428; color: #d3d4d7; }
.chat-input {
  flex: 1;
  min-width: 0;
  min-height: 39px;
  max-height: 94px;
  resize: none;
  border: 0;
  border-radius: 20px;
  padding: 10px 13px;
  background: #202226;
  color: #fff;
  line-height: 1.4;
  font-size: 11px;
}
.chat-input::placeholder { color: #6c6d72; }
.send-btn { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--kakao); color: var(--kakao-ink); cursor: pointer; }
.send-btn:disabled { background: #303236; color: #6e7075; }
.send-btn svg { width: 18px; height: 18px; }

/* Instagram */
.ig-page { background: #fff; }
.ig-header { min-height: 92px; padding: 48px 14px 6px; }
.ig-header h1 { font-family: "Snell Roundhand", "Brush Script MT", cursive; font-size: 25px; font-weight: 600; }
.ig-body { background: #fff; }
.ig-stories {
  display: flex;
  gap: 13px;
  overflow-x: auto;
  padding: 10px 13px 15px;
  border-bottom: 1px solid #efeff0;
  scrollbar-width: none;
}
.ig-stories::-webkit-scrollbar { display: none; }
.ig-story {
  width: 65px;
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  padding: 0;
  display: grid;
  gap: 5px;
  justify-items: center;
  cursor: pointer;
}
.story-ring {
  width: 61px;
  height: 61px;
  padding: 3px;
  border: 2px solid #ff3d75;
  border-radius: 50%;
  background: #fff;
}
.story-ring.is-seen { border-color: #c7c8cb; }
.story-ring img, .story-ring .default-avatar { width: 51px; height: 51px; object-fit: cover; object-position: center; border-radius: 50%; border: 2px solid #fff; image-orientation: from-image; }
.ig-story span { max-width: 64px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 9px; color: #3c3d41; }
.ig-post { border-bottom: 1px solid #ececee; }
.post-head { height: 55px; padding: 8px 13px; display: flex; align-items: center; gap: 9px; }
.post-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; object-position: center; image-orientation: from-image; }
.post-user { min-width: 0; border: 0; background: transparent; padding: 0; text-align: left; cursor: pointer; }
.post-user strong { display: block; font-size: 11px; }
.post-user span { display: block; margin-top: 2px; color: #7c7d82; font-size: 9px; }
.post-more { margin-left: auto; }
.post-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #eeedf0;
}
.post-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; image-orientation: from-image; }
.carousel-badge { position: absolute; top: 11px; right: 11px; padding: 4px 7px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-size: 9px; }
.carousel-dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 4px; }
.carousel-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.46); }
.carousel-dots i.active { background: #fff; }
.post-actions { padding: 8px 12px 5px; display: flex; align-items: center; gap: 1px; }
.ig-heart { border: 0; background: transparent; padding: 5px; cursor: pointer; }
.ig-heart svg { width: 24px; height: 24px; }
.ig-heart.liked svg { fill: #ff3040; color: #ff3040; animation: heart-pop .26s ease; }
@keyframes heart-pop { 50% { transform: scale(1.23); } }
.ig-action { width: 38px; height: 38px; display: grid; place-items: center; border: 0; background: transparent; cursor: pointer; }
.ig-action svg { width: 23px; height: 23px; }
.ig-action:last-child { margin-left: auto; }
.post-likes { padding: 0 14px; font-size: 10px; font-weight: 700; }
.post-caption { padding: 6px 14px 4px; font-size: 10px; line-height: 1.45; }
.post-caption b { margin-right: 5px; }
.post-comments { padding: 2px 14px 5px; color: #8a8b90; font-size: 10px; }
.comment-link { border: 0; background: transparent; padding: 4px 0; color: #8a8b90; font-size: 10px; cursor: pointer; }
.post-date { padding: 3px 14px 15px; color: #9a9ba0; font-size: 8px; }
.ig-bottom-nav {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  bottom: 0;
  height: 70px;
  padding-bottom: var(--safe-bottom);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid #e9e9ea;
  background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.ig-bottom-nav button { border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; }
.ig-bottom-nav svg { width: 22px; height: 22px; }
.ig-bottom-nav .active { color: #111; }
.ig-bottom-nav button:not(.active) { color: #85868b; }
.ig-spacer { height: 75px; }

/* Story viewer */
.story-viewer {
  position: absolute;
  z-index: 120;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #fff;
  background: #050506;
}
.story-bg {
  position: absolute;
  inset: -24px;
  width: calc(100% + 48px);
  height: calc(100% + 48px);
  object-fit: cover;
  filter: blur(24px) brightness(.42);
  transform: scale(1.15);
}
.story-main-image { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; image-orientation: from-image; }
.story-top { position: absolute; z-index: 4; top: 48px; left: 14px; right: 14px; }
.story-progress { display: flex; gap: 3px; }
.story-progress i { height: 2px; flex: 1; border-radius: 5px; background: rgba(255,255,255,.35); }
.story-progress i.active { background: #fff; }
.story-head { margin-top: 11px; display: flex; align-items: center; gap: 8px; }
.story-head img { width: 32px; height: 32px; object-fit: cover; object-position: center; border-radius: 50%; }
.story-head b { font-size: 11px; }
.story-head time { margin-left: 2px; color: rgba(255,255,255,.65); font-size: 9px; }
.story-head button { margin-left: auto; }
.story-tag { position: absolute; z-index: 3; top: 63%; left: 58%; padding: 6px 9px; border: 1px solid rgba(255,255,255,.36); border-radius: 999px; background: rgba(0,0,0,.4); color: #fff; font-size: 10px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.story-close { position: absolute; z-index: 5; top: 42px; right: 13px; color: #fff; }

/* Photos */
.photos-page { background: #fff; }
.photos-header { border-bottom: 1px solid #e8e8ea; }
.photos-header h1 { font-size: 21px; }
.photos-toolbar { padding: 9px 15px; display: flex; justify-content: space-between; align-items: center; }
.photos-toolbar strong { font-size: 12px; }
.photos-toolbar span { color: #8a8b90; font-size: 10px; }
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding-bottom: 24px; }
.photo-thumb {
  position: relative;
  aspect-ratio: 1;
  border: 0;
  padding: 0;
  overflow: hidden;
  background: #ececf0;
  cursor: pointer;
}
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; image-orientation: from-image; transition: transform .2s ease; }
.photo-thumb:active img { transform: scale(.97); }
.photo-viewer { position: absolute; z-index: 110; inset: 0; display: flex; flex-direction: column; background: #f4f2ee; color: #16171a; }
.photo-viewer-bg { position: absolute; inset: -30px; width: calc(100% + 60px); height: calc(100% + 60px); object-fit: cover; filter: blur(30px) brightness(.7); opacity: .45; transform: scale(1.15); }
.photo-viewer-head { position: relative; z-index: 2; min-height: 91px; padding: 51px 13px 8px; display: flex; align-items: center; gap: 8px; color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,.28); }
.photo-viewer-head .header-center { flex: 1; text-align: center; }
.photo-viewer-head strong { font-size: 11px; }
.photo-viewer-head p { margin: 2px 0 0; font-size: 9px; opacity: .7; }
.photo-viewer-stage { position: relative; z-index: 1; flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; touch-action: pan-y; }
.photo-viewer-stage img { width: 100%; height: 100%; object-fit: contain; image-orientation: from-image; }
.photo-viewer-foot { position: relative; z-index: 2; min-height: 74px; padding: 10px 24px var(--safe-bottom); display: flex; align-items: center; justify-content: space-between; background: rgba(244,242,238,.84); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.photo-viewer-foot span { font-size: 10px; color: #55565a; }
.photo-viewer-foot button { color: #1d1e21; }

/* Notes */
.notes-page { background: #fbfaf7; }
.notes-header { background: rgba(251,250,247,.95); }
.notes-search { margin: 0 14px 11px; display: flex; align-items: center; gap: 7px; min-height: 35px; padding: 0 10px; border-radius: 9px; background: #eeedeb; color: #85868b; }
.notes-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: 0; font-size: 11px; }
.notes-list { padding-bottom: 90px; }
.note-card { width: 100%; padding: 14px 16px; border: 0; border-bottom: 1px solid #ecebe8; background: transparent; text-align: left; cursor: pointer; }
.note-card:active { background: #f3f1ec; }
.note-card h3 { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; }
.note-card p { margin: 5px 0 0; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #74757a; font-size: 10px; line-height: 1.4; }
.note-card time { display: block; margin-top: 6px; color: #a0a1a5; font-size: 8px; }
.notes-empty { padding: 86px 30px; text-align: center; color: #898a8f; }
.notes-empty svg { width: 46px; height: 46px; stroke-width: 1.25; margin-bottom: 12px; }
.notes-empty h3 { margin: 0 0 6px; color: #45464a; font-size: 15px; }
.notes-empty p { margin: 0; font-size: 11px; line-height: 1.55; }
.fab {
  position: absolute;
  z-index: 25;
  right: 17px;
  bottom: calc(var(--safe-bottom) + 15px);
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #1d1e20;
  color: #fff;
  box-shadow: 0 7px 18px rgba(0,0,0,.18);
  cursor: pointer;
}
.fab svg { width: 22px; height: 22px; }
.note-editor { inset: 0; background: #fffdf7; z-index: 30; }
.note-editor .app-header { background: rgba(255,253,247,.95); }
.note-title-input { width: 100%; border: 0; padding: 19px 18px 8px; background: transparent; color: #17181a; font-size: 22px; font-weight: 720; outline: 0; }
.note-body-input { width: 100%; min-height: 420px; flex: 1; resize: none; border: 0; padding: 8px 18px 40px; background: transparent; color: #313235; font-size: 13px; line-height: 1.75; outline: 0; }
.note-editor-meta { padding: 0 18px 10px; color: #a3a4a8; font-size: 9px; }

/* Calendar */
.calendar-page { background: #fff; }
.calendar-head { align-items: flex-end; }
.calendar-head h1 { font-size: 22px; }
.calendar-monthbar { padding: 10px 15px; display: flex; align-items: center; justify-content: space-between; }
.calendar-monthbar strong { font-size: 16px; }
.calendar-week { display: grid; grid-template-columns: repeat(7, 1fr); padding: 3px 9px 8px; color: #8d8e93; font-size: 9px; text-align: center; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); padding: 0 8px 13px; }
.calendar-day {
  position: relative;
  min-height: 45px;
  border: 0;
  background: transparent;
  font-size: 11px;
  cursor: pointer;
}
.calendar-day span { position: relative; z-index: 2; width: 26px; height: 26px; margin: 4px auto 0; display: grid; place-items: center; border-radius: 50%; }
.calendar-day.is-today span { background: #ff453a; color: #fff; }
.calendar-day.is-selected span { background: #222327; color: #fff; }
.calendar-day.is-outside { color: #c7c7ca; }
.calendar-day.has-event::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; background: #ff453a; transform: translateX(-50%); }
.calendar-content { border-top: 8px solid #f5f5f7; padding: 14px 15px 86px; }
.calendar-content h2 { margin: 0 0 12px; font-size: 14px; }
.event-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid #efeff1; }
.event-dot { width: 7px; height: 7px; margin-top: 4px; flex: 0 0 auto; border-radius: 50%; background: #ff453a; }
.event-copy { flex: 1; }
.event-copy strong { display: block; font-size: 11px; }
.event-copy span { display: block; margin-top: 3px; color: #8b8c91; font-size: 9px; }
.calendar-add {
  width: 100%;
  margin-top: 12px;
  min-height: 37px;
  border: 1px solid #e3e3e6;
  border-radius: 9px;
  background: #fff;
  font-size: 10px;
  color: #3c3d41;
  cursor: pointer;
}
.calendar-empty { padding: 22px 5px; color: #999a9e; font-size: 10px; }

/* Display-only app base */
.display-page { background: #f2f2f5; }
.display-page .app-header { background: rgba(242,242,245,.9); }
.display-body { padding: 17px 15px calc(var(--safe-bottom) + 25px); }
.display-callout {
  margin: 0 0 14px;
  padding: 11px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.78);
  color: #74757a;
  font-size: 10px;
  line-height: 1.5;
}
.display-card {
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
  overflow: hidden;
}
.display-card + .display-card { margin-top: 12px; }
.display-card-body { padding: 14px; }
.display-row { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-bottom: 1px solid #efeff1; }
.display-row:last-child { border-bottom: 0; }
.display-row-icon { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px; background: #f0f0f3; }
.display-row-icon svg { width: 17px; height: 17px; }
.display-row-copy { flex: 1; min-width: 0; }
.display-row-copy strong { display: block; font-size: 11px; }
.display-row-copy span { display: block; margin-top: 2px; color: #8c8d92; font-size: 9px; }
.display-row-value { color: #97989c; font-size: 10px; }
.display-note { margin: 12px 7px 0; color: #96979c; font-size: 9px; line-height: 1.5; text-align: center; }

/* X */
.x-page { background: #000; color: #f2f2f3; }
.x-page .app-header { background: rgba(0,0,0,.94); color: #fff; border-bottom-color: #202327; }
.x-body { padding-bottom: 30px; }
.x-profile { padding: 15px; display: flex; align-items: center; gap: 11px; }
.x-avatar { width: 45px; height: 45px; border-radius: 50%; background: #30343a; display: grid; place-items: center; font-weight: 700; }
.x-handle strong { display: block; font-size: 12px; }
.x-handle span { display: block; margin-top: 2px; color: #757a80; font-size: 10px; }
.x-post { padding: 13px 15px; border-top: 1px solid #202327; border-bottom: 1px solid #202327; }
.x-post-head { display: flex; gap: 8px; align-items: center; font-size: 11px; }
.x-post p { margin: 11px 0; font-size: 13px; line-height: 1.5; }
.x-post-actions { display: flex; gap: 28px; color: #777d84; font-size: 9px; }
.x-placeholder { padding: 70px 30px; text-align: center; color: #6b7077; }
.x-placeholder svg { width: 40px; height: 40px; margin-bottom: 12px; }
.x-placeholder p { margin: 0; font-size: 11px; line-height: 1.55; }

/* Weather */
.weather-page { color: #fff; background: linear-gradient(180deg, #3295d9 0%, #80bfe4 45%, #c4d3d9 100%); }
.weather-page .app-header { color: #fff; background: transparent; border-bottom: 0; }
.weather-hero { padding: 10px 0 18px; text-align: center; text-shadow: 0 1px 8px rgba(0,0,0,.1); }
.weather-hero h2 { margin: 0; font-size: 23px; font-weight: 500; }
.weather-temp { margin: 3px 0 0; font-size: 73px; line-height: 1; font-weight: 220; }
.weather-condition { margin: 4px 0 0; font-size: 14px; }
.weather-high-low { margin: 5px 0 0; font-size: 11px; opacity: .9; }
.weather-hourly { margin: 11px 12px 0; padding: 13px 4px; display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid rgba(255,255,255,.22); border-radius: 15px; background: rgba(38,98,139,.22); -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); }
.weather-hour { display: grid; justify-items: center; gap: 7px; font-size: 9px; }
.weather-hour svg { width: 21px; height: 21px; }
.weather-hour strong { font-size: 12px; }
.weather-days { margin: 12px 12px 20px; padding: 5px 12px; border: 1px solid rgba(255,255,255,.22); border-radius: 15px; background: rgba(38,98,139,.22); -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); }
.weather-day { display: grid; grid-template-columns: 38px 26px 1fr auto; gap: 10px; align-items: center; min-height: 38px; border-bottom: 1px solid rgba(255,255,255,.15); font-size: 10px; }
.weather-day:last-child { border-bottom: 0; }
.weather-day svg { width: 18px; height: 18px; }
.weather-day .range { font-weight: 650; }

/* Camera */
.camera-page { color: #fff; background: #050505; }
.camera-page .app-header { color: #fff; background: rgba(5,5,5,.9); border-bottom: 0; }
.camera-view { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; background: #1c2024; }
.camera-view img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.52) saturate(.8); }
.camera-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.13) 1px, transparent 1px); background-size: 33.333% 33.333%; }
.camera-label { position: absolute; top: 22px; left: 50%; padding: 5px 9px; border-radius: 999px; background: rgba(0,0,0,.4); transform: translateX(-50%); font-size: 9px; }
.camera-modes { display: flex; justify-content: center; gap: 22px; padding: 14px 0 8px; font-size: 9px; color: rgba(255,255,255,.45); }
.camera-modes b { color: #ffd60a; }
.camera-controls { padding: 2px 24px 30px; display: flex; justify-content: space-between; align-items: center; }
.camera-thumb { width: 42px; height: 42px; overflow: hidden; border-radius: 8px; background: #26292d; }
.camera-thumb img { width: 100%; height: 100%; object-fit: cover; }
.shutter { width: 65px; height: 65px; border: 5px solid #fff; border-radius: 50%; background: transparent; }
.camera-flip { width: 43px; height: 43px; border: 0; border-radius: 50%; background: #22252a; color: #fff; display: grid; place-items: center; }

/* Settings */
.settings-body { padding-bottom: 30px; }
.settings-profile { display: flex; gap: 12px; align-items: center; padding: 14px 16px; background: #fff; }
.settings-profile .default-avatar { width: 52px; height: 52px; font-size: 15px; }
.settings-profile strong { display: block; font-size: 13px; }
.settings-profile span { display: block; margin-top: 3px; color: #8b8c91; font-size: 10px; }
.settings-group { margin-top: 17px; overflow: hidden; background: #fff; }
.settings-group-title { padding: 0 16px 7px; color: #8b8c91; font-size: 9px; text-transform: uppercase; }
.settings-item { min-height: 44px; padding: 8px 14px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #f0f0f2; font-size: 11px; }
.settings-item:last-child { border-bottom: 0; }
.settings-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; background: #eef0f4; color: #4f5359; }
.settings-icon svg { width: 16px; height: 16px; }
.settings-value { margin-left: auto; color: #a1a2a6; font-size: 10px; }
.toggle { margin-left: auto; width: 38px; height: 23px; padding: 2px; border-radius: 999px; background: #34c759; }
.toggle::after { content: ""; display: block; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); margin-left: auto; }

/* Music */
.music-page { color: #fff; background: #0a0b0d; }
.music-page .app-header { color: #fff; background: rgba(10,11,13,.92); border-bottom-color: #222329; }
.music-art { width: min(72vw, 292px); aspect-ratio: 1; margin: 16px auto 22px; overflow: hidden; border-radius: 8px; box-shadow: 0 20px 42px rgba(0,0,0,.45); }
.music-art img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) brightness(.72); }
.music-copy { text-align: center; }
.music-copy h2 { margin: 0; font-size: 19px; }
.music-copy p { margin: 6px 0 0; color: #8b8d93; font-size: 12px; }
.music-progress { margin: 25px 26px 8px; height: 3px; border-radius: 99px; background: #303138; }
.music-progress i { display: block; width: 34%; height: 100%; border-radius: inherit; background: #f2f2f4; }
.music-times { margin: 0 26px; display: flex; justify-content: space-between; color: #74767c; font-size: 8px; }
.music-controls { margin-top: 22px; display: flex; justify-content: center; gap: 31px; align-items: center; }
.music-controls button { border: 0; background: transparent; color: #fff; }
.music-controls svg { width: 24px; height: 24px; }
.music-controls .play { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: #f5f5f7; color: #111; }
.music-controls .play svg { width: 23px; height: 23px; fill: currentColor; }
.music-extra { margin: 28px 18px 12px; padding-top: 15px; border-top: 1px solid #25262c; display: flex; justify-content: space-between; color: #a5a6ab; font-size: 10px; }

/* Phone and messages */
.phone-page { background: #f5f5f7; }
.phone-call-card { padding: 28px 20px 18px; text-align: center; }
.phone-call-card h2 { margin: 0; font-size: 18px; }
.phone-call-card p { margin: 6px 0 20px; color: #8c8d92; font-size: 10px; }
.call-avatar { width: 84px; height: 84px; margin: 0 auto 15px; overflow: hidden; border-radius: 50%; }
.call-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.call-btn { width: 52px; height: 52px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #34c759; color: #fff; }
.call-btn svg { width: 23px; height: 23px; }
.phone-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px 22px; padding: 12px 43px 20px; }
.phone-key { aspect-ratio: 1; display: grid; place-items: center; border: 0; border-radius: 50%; background: #e8e8eb; font-size: 20px; cursor: pointer; }
.phone-key small { display: block; font-size: 6px; color: #9a9b9f; }
.messages-search { padding: 6px 14px 13px; }
.messages-search div { min-height: 34px; padding: 0 10px; display: flex; align-items: center; gap: 7px; border-radius: 9px; background: #efeff1; color: #8c8d92; font-size: 10px; }
.message-row { display: flex; gap: 10px; align-items: center; padding: 11px 14px; border-bottom: 1px solid #ececee; }
.message-row img { width: 43px; height: 43px; object-fit: cover; object-position: center; border-radius: 50%; }
.message-copy { min-width: 0; flex: 1; }
.message-copy strong { display: block; font-size: 11px; }
.message-copy p { margin: 4px 0 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #8a8b90; font-size: 10px; }
.message-row time { color: #a2a3a7; font-size: 8px; }

/* Safari */
.safari-page { background: #f4f5f7; }
.safari-header { border-bottom: 0; }
.safari-start { min-height: 100%; padding: 5px 17px 80px; background: #f4f5f7; }
.safari-search { min-height: 43px; padding: 0 12px; display: flex; align-items: center; gap: 8px; border-radius: 11px; background: #e5e6e9; color: #7f8085; font-size: 11px; }
.safari-favorites { margin-top: 25px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 10px; }
.safari-favorite { display: grid; justify-items: center; gap: 6px; border: 0; background: transparent; color: #52545a; font-size: 9px; }
.safari-logo { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 10px; background: #fff; box-shadow: 0 2px 7px rgba(0,0,0,.07); }
.safari-logo svg { width: 22px; height: 22px; }
.safari-reading { margin-top: 30px; }
.safari-reading h2 { margin: 0 0 10px; font-size: 16px; }
.safari-reading-card { padding: 14px; border-radius: 12px; background: #fff; }
.safari-reading-card strong { display: block; font-size: 11px; }
.safari-reading-card p { margin: 5px 0 0; color: #898a8f; font-size: 9px; line-height: 1.45; }

/* Modals and sheets */
.modal-backdrop {
  position: absolute;
  z-index: 200;
  inset: 0;
  display: flex;
  align-items: flex-end;
  background: rgba(0,0,0,.38);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: fade-in .2s ease;
}
@keyframes fade-in { from { opacity: 0; } }
.sheet {
  width: 100%;
  max-height: 68%;
  display: flex;
  flex-direction: column;
  border-radius: 18px 18px 0 0;
  background: #fff;
  color: #17181a;
  animation: sheet-up .25s cubic-bezier(.22,.8,.25,1);
}
@keyframes sheet-up { from { transform: translateY(50px); opacity: .5; } }
.sheet-handle { width: 40px; height: 4px; margin: 8px auto 5px; border-radius: 99px; background: #d1d1d4; }
.sheet-head { padding: 7px 15px 11px; display: flex; align-items: center; border-bottom: 1px solid #ececee; }
.sheet-head strong { flex: 1; text-align: center; font-size: 12px; }
.sheet-body { overflow: auto; padding: 10px 14px calc(var(--safe-bottom) + 12px); }
.comment { display: flex; gap: 9px; padding: 9px 0; }
.comment-avatar { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: #ececf0; color: #6d6e73; font-size: 10px; font-weight: 700; }
.comment-copy { font-size: 10px; line-height: 1.5; }
.comment-copy b { margin-right: 4px; }
.comment-copy span { display: block; margin-top: 4px; color: #a0a1a5; font-size: 8px; }
.comment-sheet-body { display: flex; flex-direction: column; min-height: 100%; }
.comments-empty { flex: 1; min-height: 138px; display: grid; place-content: center; justify-items: center; color: #96979c; font-size: 11px; }
.comments-empty svg { width: 24px; height: 24px; margin-bottom: 6px; }
.comments-empty p { margin: 0; }
.instagram-comment-form { display: flex; align-items: flex-end; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid #ececee; }
.instagram-comment-form textarea { min-height: 38px; max-height: 92px; flex: 1; resize: none; padding: 10px 11px; border: 1px solid #dfdfe3; border-radius: 10px; background: #fff; color: #111; font: inherit; font-size: 11px; line-height: 1.4; }
.instagram-comment-form textarea:focus { outline: 2px solid rgba(0, 0, 0, .16); border-color: transparent; }
.instagram-comment-form button { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border: 0; border-radius: 50%; background: #111; color: #fff; cursor: pointer; }
.instagram-comment-form button svg { width: 16px; height: 16px; }
.profile-sheet { text-align: center; }
.profile-sheet .profile-main-avatar { width: 72px; height: 72px; object-fit: cover; object-position: center; border-radius: 50%; margin: 4px auto 10px; }
.profile-sheet h2 { margin: 0; font-size: 17px; }
.profile-sheet .handle { margin: 4px 0 0; color: #898a8f; font-size: 10px; }
.profile-stats { display: flex; justify-content: center; gap: 28px; margin: 17px 0; font-size: 10px; }
.profile-stats b { display: block; font-size: 13px; }
.profile-stats span { display: block; margin-top: 2px; color: #8c8d92; }
.profile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 15px; }
.profile-grid img { aspect-ratio: 1; object-fit: cover; image-orientation: from-image; }

.toast {
  position: fixed;
  z-index: 500;
  left: 50%;
  bottom: 32px;
  max-width: min(360px, calc(100vw - 36px));
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(18,19,22,.92);
  color: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,.24);
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.default-avatar { display: grid; place-items: center; background: #4d4f56; color: #fff; font-weight: 720; }

@media (max-width: 560px) {
  body { background: #fff; }
  .stage { padding: 0; }
  .phone-shell { width: 100vw; max-width: none; height: 100dvh; aspect-ratio: auto; filter: none; }
  .phone-bezel { inset: 0; padding: 0; border: 0; border-radius: 0; background: #000; box-shadow: none; }
  .phone-screen { border-radius: 0; }
  .phone-screen::before { top: max(7px, env(safe-area-inset-top)); }
  .phone-screen::after { border-radius: 0; }
  .side-button { display: none; }
  .toast { bottom: max(22px, env(safe-area-inset-bottom)); }
}

@media (max-height: 690px) and (min-width: 561px) {
  .phone-shell { height: calc(100dvh - 18px); }
  .lock-clock { top: 53px; }
  .home-content { padding-top: 52px; }
  .home-grid { gap: 13px 8px; }
  .app-icon-symbol { width: 53px; height: 53px; }
}

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


/* Interaction additions */
.modal-layer { position: absolute; inset: 0; z-index: 200; pointer-events: none; }
.modal-layer .modal-backdrop { pointer-events: auto; }
.post-media-nav,
.photo-viewer-nav {
  position: absolute;
  z-index: 4;
  top: 50%;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(18,19,22,.46);
  color: #fff;
  transform: translateY(-50%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
}
.post-media-nav.prev,
.photo-viewer-nav.prev { left: 9px; }
.post-media-nav.next,
.photo-viewer-nav.next { right: 9px; }
.post-media-nav svg,
.photo-viewer-nav svg { width: 18px; height: 18px; }
.photo-viewer-nav { width: 38px; height: 38px; background: rgba(18,19,22,.36); }
.story-main-image + .story-top { pointer-events: none; }
.story-top button, .story-top .story-head { pointer-events: auto; }
.profile-main-avatar.default-avatar { display: grid; }
.event-form { display: grid; gap: 11px; padding: 5px 0 10px; }
.event-form label { display: grid; gap: 5px; color: #77787d; font-size: 10px; }
.event-form input { width: 100%; min-height: 42px; border: 1px solid #e4e4e7; border-radius: 9px; padding: 0 11px; background: #f8f8f9; color: #202124; outline: 0; }
.event-form input:focus { border-color: #0a84ff; background: #fff; }

#modal-root {
  position: absolute;
  inset: 9px;
  z-index: 200;
  overflow: hidden;
  border-radius: 46px;
  pointer-events: none;
}
#modal-root .modal-layer { pointer-events: none; }
#modal-root .modal-backdrop { pointer-events: auto; }

@media (max-width: 560px) {
  #modal-root { inset: 0; border-radius: 0; }
}