/* Song requests 0.17.0 */
.song-hero { display:flex; align-items:center; justify-content:space-between; gap:22px; margin-bottom:20px; padding:26px; overflow:hidden; border-color:color-mix(in srgb,var(--primary) 25%,var(--line)); background:linear-gradient(135deg,var(--primary-soft),color-mix(in srgb,var(--cyan) 10%,var(--white))); }
.song-hero h2,.song-hero p { margin:4px 0; }
.song-hero > div { max-width:720px; }
.song-hero-icon { width:78px; height:78px; flex:0 0 auto; border-radius:25px; color:#fff; background:linear-gradient(135deg,var(--primary),var(--cyan)); box-shadow:0 18px 35px color-mix(in srgb,var(--primary) 28%,transparent); }
.song-hero-icon .ui-icon { width:36px; height:36px; }
.song-drafts { margin-bottom:24px; }
.song-draft-list,.song-request-list,.song-removed-list { display:grid; gap:11px; }
.song-draft-card { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:17px 19px; }
.song-draft-card h3,.song-request-card h3 { margin:3px 0 5px; font-size:15px; }
.song-draft-card small,.song-request-meta,.song-playlist-entry small,.song-removed-entry small { color:var(--muted); font-size:10px; }
.song-draft-card.pending-delete { border-color:color-mix(in srgb,var(--red) 38%,var(--line)); opacity:.78; }
.song-editor { max-width:920px; margin:0 auto; }
.song-editor form { display:grid; gap:15px; }
.song-editor .form-grid { align-items:start; }
.song-upload { margin-top:0; }
.song-audio { display:grid; grid-template-columns:minmax(160px,1fr) minmax(240px,1.4fr); align-items:center; gap:15px; padding:13px 15px; border:1px solid var(--line); border-radius:17px; background:var(--surface-alt); }
.song-audio b,.song-audio small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.song-audio small { margin-top:3px; color:var(--muted); font-size:9px; }
.song-audio audio { width:100%; height:36px; }
.song-audio.compact { margin-top:11px; padding:10px 12px; }
.song-explicit,.song-explicit-editor { display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid color-mix(in srgb,var(--red) 42%,var(--line)); border-radius:13px; color:#a5142f; background:#fff0f3; font-size:11px; font-weight:800; }
.song-explicit .ui-icon,.song-explicit-editor .ui-icon { width:18px; height:18px; flex:0 0 auto; }
.song-save-state { min-height:20px; padding-left:24px; position:relative; color:var(--muted); font-size:10px; }
.song-save-state::before { content:""; position:absolute; left:2px; top:1px; width:12px; height:12px; border:2px solid var(--line); border-radius:50%; }
.song-save-state.saving::before { border-color:var(--primary-soft); border-top-color:var(--primary); animation:spin .7s linear infinite; }
.song-save-state.saved::before { content:"✓"; display:grid; place-items:center; border:0; color:#14804a; font-weight:900; }
.song-save-state.offline,.song-save-state.error,.song-save-state.conflict { color:var(--red); }
.song-retention { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 13px; border-radius:13px; background:var(--soft); color:var(--muted); font-size:10px; }
.song-retention small { color:var(--muted); }
.song-editor-actions { justify-content:space-between; }
.song-main-tabs { margin:20px 0 15px; }
.song-request-card { padding:18px; }
.song-request-card.has-explicit { border-color:color-mix(in srgb,var(--red) 36%,var(--line)); }
.song-request-head { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:13px; }
.song-request-head:has(.song-select) { grid-template-columns:28px minmax(0,1fr) auto; }
.song-request-head .eyebrow { margin:0; }
.song-status { padding:6px 9px; border-radius:999px; color:#765300; background:#fff4cb; font-size:9px; font-weight:850; white-space:nowrap; }
.song-status.accepted { color:#0f7040; background:#e3f8ec; }
.song-status.rejected,.song-status.cancelled,.song-status.expired,.song-status.removed-from-playlist { color:#a5142f; background:#fff0f3; }
.song-select { margin:2px 0 0; }
.song-select input { width:19px; height:19px; margin:0; padding:0; box-shadow:none; accent-color:var(--primary); }
.song-request-meta { margin:10px 0 0; }
.song-comment { margin:10px 0 0; padding:10px 12px; border-radius:12px; background:var(--soft); font-size:11px; line-height:1.5; }
.song-rejection { display:grid; gap:3px; margin-top:11px; padding:11px 13px; border-left:3px solid var(--red); border-radius:0 12px 12px 0; color:#a5142f; background:#fff0f3; font-size:11px; }
.song-card-actions { margin-top:13px; }
.song-filters { display:grid; grid-template-columns:minmax(180px,1.3fr) repeat(3,minmax(145px,1fr)); gap:10px; margin-bottom:15px; padding:13px; }
.song-filters label { margin:0; font-size:9px; }
.song-playlist-tabs { overflow-x:auto; justify-content:flex-start; margin-bottom:13px; }
.song-playlist { display:grid; gap:9px; }
.song-playlist-entry { display:grid; grid-template-columns:22px 28px minmax(180px,1fr) minmax(180px,280px) auto; align-items:center; gap:10px; padding:12px 14px; transition:opacity .15s,transform .15s,box-shadow .15s; }
.song-playlist-entry.dragging { opacity:.56; transform:scale(.99); box-shadow:0 14px 35px rgba(15,25,60,.18); }
.song-playlist-entry audio { width:100%; height:34px; }
.song-playlist-entry em { display:inline-block; margin-left:7px; padding:2px 6px; border-radius:999px; color:#fff; background:var(--red); font-size:8px; font-style:normal; }
.song-drag { color:var(--muted); cursor:grab; font-weight:900; letter-spacing:-2px; }
.song-playlist-actions { display:flex; gap:5px; }
.song-removed-entry { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 15px; }
.song-removed-entry b,.song-removed-entry small { display:block; }
.song-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:14px 0; }
.song-detail-grid > div { padding:12px; border-radius:13px; background:var(--soft); }
.song-detail-grid small,.song-detail-grid b { display:block; }
.song-detail-grid small { margin-bottom:4px; color:var(--muted); font-size:9px; }
.song-event-list { display:grid; gap:0; }
.song-event-list > div { display:grid; grid-template-columns:14px minmax(0,1fr); gap:8px; min-height:46px; }
.song-event-list i { position:relative; width:10px; height:10px; margin-top:4px; border:2px solid var(--primary); border-radius:50%; }
.song-event-list i::after { content:""; position:absolute; left:2px; top:10px; width:2px; height:32px; background:var(--line); }
.song-event-list > div:last-child i::after { display:none; }
.song-event-list b,.song-event-list small { display:block; }
.song-event-list small { margin-top:3px; color:var(--muted); font-size:9px; }
.song-conflict-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:16px 0; }
.song-conflict-summary > div { padding:13px; border:1px solid var(--line); border-radius:14px; background:var(--surface-alt); }
.song-conflict-summary b,.song-conflict-summary span,.song-conflict-summary small { display:block; }
.song-conflict-summary span { margin-top:5px; }
.song-conflict-summary small { margin-top:4px; color:var(--muted); }
.song-undo-toast { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.song-undo-toast button { border:0; color:var(--yellow); background:transparent; font-weight:850; cursor:pointer; }
[data-theme="dark"] .song-explicit,[data-theme="dark"] .song-explicit-editor,[data-theme="dark"] .song-rejection { color:#ff97aa; background:#35151d; }

@media (max-width:760px) {
  .song-hero { align-items:flex-start; padding:18px; }
  .song-hero-icon { width:58px; height:58px; border-radius:19px; }
  .song-hero-icon .ui-icon { width:27px; height:27px; }
  .song-draft-card { align-items:flex-start; flex-direction:column; padding:15px; }
  .song-draft-card .form-actions { width:100%; justify-content:flex-end; }
  .song-audio { grid-template-columns:1fr; gap:9px; }
  .song-retention { align-items:flex-start; flex-direction:column; }
  .song-editor-actions { align-items:stretch; flex-direction:column-reverse; }
  .song-editor-actions .button { width:100%; }
  .song-main-tabs { overflow-x:auto; justify-content:flex-start; }
  .song-request-head,.song-request-head:has(.song-select) { grid-template-columns:25px minmax(0,1fr); }
  .song-request-head:not(:has(.song-select)) { grid-template-columns:minmax(0,1fr); }
  .song-status { grid-column:2; justify-self:start; }
  .song-request-head:not(:has(.song-select)) .song-status { grid-column:1; }
  .song-filters { grid-template-columns:1fr 1fr; }
  .song-filters label:first-child { grid-column:1/-1; }
  .song-playlist-entry { grid-template-columns:18px 24px minmax(0,1fr) auto; }
  .song-playlist-entry audio,.song-playlist-entry > .muted { grid-column:3/-1; }
  .song-playlist-actions { grid-column:4; grid-row:1; }
  .song-detail-grid,.song-conflict-summary { grid-template-columns:1fr; }
}

/* Immersive chat and message interactions — 0.13 */
:root { --message-radius:16px; }
.twemoji-icon { width:1.18em; height:1.18em; display:inline-block; margin:0 .04em; vertical-align:-.2em; object-fit:contain; }
.emoji-button .twemoji-icon,.message-context-reactions .twemoji-icon { width:28px; height:28px; margin:0; vertical-align:middle; }
.twemoji-grid .emoji-button { display:grid; place-items:center; min-height:45px; }
.emoji-license { margin:16px 0 0; color:var(--muted); font-size:9px; line-height:1.5; }
.settings-license { padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:var(--surface-alt); }

.channel-avatar { overflow:hidden; border-radius:50% !important; }
.channel-avatar img { width:100%; height:100%; object-fit:cover; }
.channel-avatar .twemoji-icon { width:21px; height:21px; margin:0; }
.channel-avatar-editor { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:9px 13px; margin:14px 0; padding:13px; border:1px solid var(--line); border-radius:16px; background:var(--surface-alt); }
.channel-avatar-editor > div { grid-row:span 2; }
.channel-avatar-editor .file-picker { margin:0; }
.channel-avatar-editor .file-selection { color:var(--muted); font-size:9px; }
.channel-avatar-editor .check-item { grid-column:1 / -1; }

.chat-main { position:relative; grid-template-rows:auto auto minmax(0,1fr) auto; }
.chat-notices:empty { display:none; }
.mobile-chat-search { display:none; }
.chat-pinned-bar { width:100%; min-width:0; display:grid; grid-template-columns:20px minmax(0,1fr); align-items:center; gap:8px; padding:8px 14px; border:0; border-bottom:1px solid var(--line); color:var(--ink); background:color-mix(in srgb,var(--primary-soft) 62%,var(--white)); text-align:left; cursor:pointer; }
.chat-pinned-bar > .ui-icon { width:16px; height:16px; color:var(--primary); }
.chat-pinned-bar span,.chat-pinned-bar b,.chat-pinned-bar small { min-width:0; display:block; }
.chat-pinned-bar b { color:var(--primary); font-size:9px; }
.chat-pinned-bar small { overflow:hidden; margin-top:2px; color:var(--muted); text-overflow:ellipsis; white-space:nowrap; font-size:9px; }
.chat-scroll-bottom { position:absolute; z-index:8; right:14px; bottom:76px; width:42px; height:42px; display:grid; place-items:center; padding:0; border:1px solid var(--line); border-radius:50%; color:var(--primary); background:var(--surface-overlay); box-shadow:0 10px 30px rgba(18,28,61,.2); cursor:pointer; opacity:0; transform:translateY(12px); transition:opacity .2s,transform .2s; backdrop-filter:blur(14px); }
.chat-scroll-bottom.visible { opacity:1; transform:none; }
.chat-scroll-bottom > .ui-icon { width:20px; height:20px; transform:rotate(-90deg); }

.message { align-items:flex-start; }
.message-bubble-wrap { position:relative; min-width:0; transform:translate3d(var(--message-swipe-x,0px),0,0); transition:transform .18s cubic-bezier(.2,.76,.28,1); will-change:transform; }
.message.mine .message-bubble-wrap { margin-right:44px; }
.message.swiping .message-bubble-wrap { transition:none; }
.message.swipe-resetting .message-bubble-wrap { transition:transform .18s cubic-bezier(.2,.76,.28,1); }
.message-body { border-radius:var(--message-radius) var(--message-radius) var(--message-radius) calc(var(--message-radius) * .22); }
.message.mine .message-body { border-radius:var(--message-radius) var(--message-radius) calc(var(--message-radius) * .22) var(--message-radius); }
.message-author { margin-right:0; }
.message-pin-label { display:flex; align-items:center; gap:3px; margin:0 0 5px; color:var(--primary); font-size:8px; font-weight:850; }
.message-pin-label .ui-icon { width:11px; height:11px; }
.message.mine .message-pin-label { color:rgba(255,255,255,.82); }
.message.selected .message-body { outline:3px solid color-mix(in srgb,var(--cyan) 72%,white); outline-offset:2px; }
.message-select-check { display:none; flex:0 0 auto; width:25px; height:25px; place-items:center; align-self:center; padding:0; border:2px solid var(--primary); border-radius:50%; color:#fff; background:var(--white); cursor:pointer; font-size:12px; font-weight:900; }
.messages:has(.message.selected) .message-select-check { display:grid; }
.message.selected .message-select-check { background:var(--primary); }
.message.mine .message-select-check { order:3; }

.message-hover-actions { position:absolute; z-index:9; top:-39px; right:0; display:flex; gap:2px; padding:4px; border:1px solid var(--line); border-radius:13px; background:var(--surface-overlay); box-shadow:0 10px 30px rgba(18,28,61,.16); opacity:0; pointer-events:none; transform:translateY(5px); transition:opacity .15s,transform .15s; backdrop-filter:blur(14px); }
.message.mine .message-hover-actions { right:0; }
.message:hover .message-hover-actions,.message:focus-within .message-hover-actions { opacity:1; pointer-events:auto; transform:none; }
.message-hover-actions button { width:28px; height:28px; display:grid; place-items:center; padding:0; border:0; border-radius:9px; color:var(--muted); background:transparent; cursor:pointer; }
.message-hover-actions button:hover,.message-hover-actions button:focus-visible { color:var(--primary); background:var(--primary-soft); }
.message-hover-actions .ui-icon { width:15px; height:15px; }
.message-menu { display:none !important; }

.message-quick-forward,.message.mine .message-quick-forward { right:-44px; left:auto; bottom:2px; }
.message-swipe-reply { position:absolute; z-index:-1; right:-62px; top:50%; width:40px; height:40px; display:grid; place-items:center; border-radius:50%; color:var(--primary); background:var(--surface-overlay); opacity:0; transform:translateY(-50%) scale(.72); transition:opacity .12s,transform .12s; }
.message.swiping .message-swipe-reply { z-index:1; opacity:.65; transform:translateY(-50%) scale(.9); }
.message.swipe-ready .message-swipe-reply { opacity:1; transform:translateY(-50%) scale(1.08); box-shadow:0 6px 20px rgba(20,30,60,.18); }
.message-swipe-reply .ui-icon { width:19px; height:19px; }

.message-actions-content { min-height:0; padding-right:24px !important; }
.message-context-sheet { display:grid; gap:12px; }
.message-context-reactions { display:flex; gap:7px; overflow-x:auto; margin:0 -6px; padding:8px 8px 12px; scroll-snap-type:x mandatory; scrollbar-width:none; }
.message-context-reactions::-webkit-scrollbar { display:none; }
.message-context-reactions button { flex:0 0 47px; width:47px; height:47px; display:grid; place-items:center; padding:0; border:1px solid var(--line); border-radius:50%; background:var(--surface-alt); scroll-snap-align:center; cursor:pointer; transition:transform .15s,background .15s; }
.message-context-reactions button:hover,.message-context-reactions button:focus-visible { background:var(--primary-soft); transform:scale(1.12); }
.message-context-preview { display:grid; grid-template-columns:36px minmax(0,1fr); gap:9px; padding:11px; border:1px solid var(--line); border-radius:16px; background:var(--surface-alt); }
.message-context-preview b { font-size:10px; }
.message-context-preview p { max-height:80px; overflow:hidden; margin:3px 0 0; color:var(--ink); font-size:11px; line-height:1.4; }
.message-context-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.message-context-grid button,.thread-context-actions button { min-width:0; min-height:74px; display:grid; justify-items:center; align-content:center; gap:6px; padding:9px 5px; border:1px solid var(--line); border-radius:14px; color:var(--ink); background:var(--white); cursor:pointer; text-align:center; }
.message-context-grid button:hover,.thread-context-actions button:hover { background:var(--primary-soft); }
.message-context-grid .ui-icon,.thread-context-actions .ui-icon { width:21px; height:21px; color:var(--primary); }
.message-context-grid span { font-size:9px; font-weight:800; }
.message-context-grid .danger-action { color:var(--red); }
.message-context-grid .danger-action .ui-icon { color:var(--red); }
.message-context-hint { color:var(--muted); text-align:center; font-size:8px; }
.thread-context-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.thread-context-actions button span { font-size:10px; }

.sticker-pack-list { display:grid; gap:12px; margin:14px 0; }
.sticker-pack-card { overflow:hidden; border:1px solid var(--line); border-radius:18px; background:var(--surface-alt); }
.sticker-pack-head { width:100%; display:grid; grid-template-columns:80px minmax(0,1fr) 18px; align-items:center; gap:10px; padding:11px; border:0; color:var(--ink); background:transparent; text-align:left; cursor:pointer; }
.sticker-pack-head > span { display:flex; }
.sticker-pack-head img { width:35px; height:35px; margin-right:-9px; border:2px solid var(--white); border-radius:50%; object-fit:contain; background:var(--white); }
.sticker-pack-head b,.sticker-pack-head small { display:block; }
.sticker-pack-head small { margin-top:3px; color:var(--muted); font-size:9px; }
.sticker-pack-head > .ui-icon { width:16px; height:16px; color:var(--muted); }
.sticker-grid.compact { grid-template-columns:repeat(6,minmax(0,1fr)); margin:0; padding:7px 10px 11px; border-top:1px solid var(--line); }
.sticker-grid.compact .sticker-choice { padding:3px; border:0; background:transparent; }
.pack-saved-state { padding:11px; border-radius:12px; color:var(--green); background:color-mix(in srgb,var(--green) 10%,var(--white)); text-align:center; font-size:10px; font-weight:850; }

.message-radius-setting { padding:13px; border:1px solid var(--line); border-radius:16px; background:var(--surface-alt); }
.message-radius-preview { justify-self:start; max-width:220px; padding:10px 13px; border-radius:var(--message-radius) var(--message-radius) var(--message-radius) calc(var(--message-radius) * .22); color:#fff; background:var(--primary); font-size:11px; }

@media (max-width:760px) {
  body.chat-page .topbar,body.chat-page .mobile-nav { display:none !important; }
  body.chat-page .app { height:var(--app-height,100dvh); padding-bottom:0; }
  body.chat-page .content.chat-content { height:var(--app-height,100dvh); padding:0; }
  body.chat-page .chat-layout { border:0; border-radius:0; box-shadow:none; }
  body.chat-page .chat-sidebar-head { padding-top:max(13px,env(safe-area-inset-top)); }
  body.chat-page .chat-head { min-height:calc(58px + env(safe-area-inset-top)); padding-top:calc(8px + env(safe-area-inset-top)); }
  .desktop-chat-action { display:none !important; }
  .mobile-chat-search { display:grid; }
  .chat-message-search { display:none; margin:6px 7px 0; }
  .chat-message-search.open { display:flex; }
  .chat-main { grid-template-rows:auto auto minmax(0,1fr) auto; }
  .messages { padding:16px 52px 16px 9px; scrollbar-gutter:auto; }
  .message { max-width:calc(100% - 45px); touch-action:pan-y; }
  .message-hover-actions { display:none; }
  .message-quick-forward,.message.mine .message-quick-forward { right:-42px; left:auto; }
  .message.mine .message-bubble-wrap { margin-right:42px; }
  .chat-scroll-bottom { right:10px; bottom:calc(68px + env(safe-area-inset-bottom)); }
  .message-actions-content { min-height:0; padding:14px 13px calc(18px + env(safe-area-inset-bottom)) !important; }
  .message-context-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .message-context-reactions { margin-top:-38px; padding:10px 12px 13px; border:1px solid var(--line); border-radius:27px; background:var(--surface-overlay); box-shadow:0 12px 32px rgba(16,25,54,.16); }
  .sticker-grid.compact { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .toast-region { bottom:18px; }
}

/* Notification sounds and gift catalog — 0.18.0 */
.notification-sound-settings { display:grid; gap:14px; margin:0 0 20px; padding:16px; border:1px solid var(--line); border-radius:19px; background:linear-gradient(135deg,var(--surface-alt),color-mix(in srgb,var(--primary-soft) 42%,var(--white))); }
.notification-sound-settings.enabled { border-color:color-mix(in srgb,var(--green) 62%,var(--line)); }
.notification-sound-head { display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:12px; }
.notification-sound-head > span:first-child { width:44px; height:44px; display:grid; place-items:center; border-radius:14px; color:#fff; background:linear-gradient(135deg,var(--primary),var(--cyan)); }
.notification-sound-head > span .ui-icon { width:22px; height:22px; }
.notification-sound-head b,.notification-sound-head small { display:block; }
.notification-sound-head small { margin-top:4px; color:var(--muted); }
.sound-enabled { display:flex !important; align-items:center; gap:7px; margin:0; padding:8px 10px; border-radius:999px; background:var(--white); }
.sound-enabled input { width:auto; margin:0; }
.notification-sound-controls { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
.notification-sound-controls label { margin:0; }
.notification-sound-controls input[type="range"] { padding-inline:0; accent-color:var(--primary); }
.notification-sound-actions { display:flex; flex-wrap:wrap; gap:8px; }
.notification-sound-actions .button:last-of-type { margin-left:auto; }
.notification-sound-settings > p { margin:0; color:var(--muted); font-size:9px; line-height:1.55; }
.notification-upload-audio { width:100%; margin:12px 0; }
.notification-trim { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:14px; border:1px solid var(--line); border-radius:16px; background:var(--surface-alt); }
.notification-trim label { margin:0; }
.notification-trim label b { float:right; color:var(--primary); }
.notification-trim input { padding-inline:0; accent-color:var(--primary); }
.notification-trim .button { grid-column:1 / -1; justify-self:start; }

.gift-tools { display:grid; grid-template-columns:minmax(240px,.7fr) minmax(0,1.3fr); align-items:center; gap:16px; margin-top:16px; padding:14px; }
.gift-tools > label,.gift-picker-search { display:flex; align-items:center; gap:8px; margin:0; padding:0 12px; border:1px solid var(--line); border-radius:14px; background:var(--surface-alt); }
.gift-tools > label .ui-icon,.gift-picker-search .ui-icon { width:18px; height:18px; color:var(--muted); }
.gift-tools input,.gift-picker-search input { min-width:0; margin:0; padding-inline:0; border:0; background:transparent; box-shadow:none; }
.gift-category-tabs,.gift-picker-tabs { display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; }
.gift-category-tabs::-webkit-scrollbar,.gift-picker-tabs::-webkit-scrollbar { display:none; }
.gift-category-tabs button,.gift-picker-tabs button { min-height:36px; flex:0 0 auto; padding:7px 12px; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:var(--white); font-size:9px; font-weight:850; cursor:pointer; }
.gift-category-tabs button.active,.gift-picker-tabs button.active { border-color:var(--primary); color:#fff; background:var(--primary); }
.gift-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.gift-card { position:relative; min-height:152px; align-items:flex-start; overflow:hidden; padding:18px; border-color:color-mix(in srgb,var(--gift-accent) 22%,var(--line)); background:linear-gradient(135deg,color-mix(in srgb,var(--gift-accent) 10%,var(--white)),var(--white) 58%); }
.gift-card::after { content:""; position:absolute; width:110px; height:110px; right:-50px; bottom:-54px; border-radius:50%; background:color-mix(in srgb,var(--gift-accent) 12%,transparent); }
.gift-card-art { width:66px; height:66px; flex:0 0 66px; display:grid; place-items:center; border-radius:22px; background:color-mix(in srgb,var(--gift-accent) 15%,var(--white)); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gift-accent) 20%,transparent); }
.gift-card-art .twemoji-icon { width:42px; height:42px; }
.gift-card > div { min-width:0; position:relative; z-index:1; }
.gift-card > div > b { display:block; margin-top:2px; font-size:14px; }
.gift-card-category { color:var(--gift-accent) !important; text-transform:uppercase; font-size:8px !important; font-weight:900; letter-spacing:.08em; }
.gift-card p { margin:10px 0 6px; line-height:1.45; }
.gift-card-actions { position:absolute !important; z-index:2 !important; top:10px; right:10px; display:flex; gap:4px; opacity:0; transition:opacity .18s ease; }
.gift-card:hover .gift-card-actions,.gift-card:focus-within .gift-card-actions { opacity:1; }
.gift-card-actions .icon-button { width:32px; height:32px; background:var(--surface-overlay); }

.gift-picker { display:grid; gap:12px; margin:12px 0 18px; }
.gift-choice-grid { max-height:360px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; overflow-y:auto; padding:2px; }
.gift-choice { min-width:0; min-height:112px; display:grid; place-items:center; align-content:center; gap:7px; margin:0; padding:11px 6px; border:1px solid var(--line); border-radius:17px; background:linear-gradient(145deg,color-mix(in srgb,var(--gift-accent) 8%,var(--white)),var(--white)); cursor:pointer; text-align:center; }
.gift-choice:hover { border-color:color-mix(in srgb,var(--gift-accent) 58%,var(--line)); transform:translateY(-1px); }
.gift-choice:has(input:checked) { border-color:var(--gift-accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--gift-accent) 15%,transparent); }
.gift-choice input { position:absolute; opacity:0; pointer-events:none; }
.gift-choice > span { width:50px; height:50px; display:grid; place-items:center; border-radius:16px; background:color-mix(in srgb,var(--gift-accent) 14%,var(--white)); }
.gift-choice .twemoji-icon { width:34px; height:34px; }
.gift-choice b { max-width:100%; font-size:9px; line-height:1.25; }
.gift-delivery-note { display:flex; align-items:center; gap:9px; margin:10px 0 2px; padding:11px 13px; border:1px solid color-mix(in srgb,var(--primary) 25%,var(--line)); border-radius:14px; color:var(--primary); background:var(--primary-soft); font-size:10px; font-weight:800; }
.gift-delivery-note .ui-icon { width:18px; height:18px; flex:0 0 auto; }
.gift-recipient-lock { display:grid; grid-template-columns:42px minmax(0,1fr) 22px; align-items:center; gap:11px; margin:12px 0; padding:11px 13px; border:1px solid var(--line); border-radius:16px; background:var(--surface-alt); }
.gift-recipient-lock .avatar { width:42px; height:42px; }
.gift-recipient-lock span { min-width:0; display:grid; gap:2px; }
.gift-recipient-lock small { color:var(--muted); font-size:7px; font-weight:900; letter-spacing:.08em; }
.gift-recipient-lock b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.gift-recipient-lock > .ui-icon { width:20px; height:20px; color:var(--green); }

.message.gift-message .message-body { overflow:hidden; padding:5px; }
.message.gift-message .message-author { margin:5px 40px 5px 7px; }
.chat-gift-card { position:relative; isolation:isolate; width:min(370px,68vw); min-height:168px; display:grid; grid-template-columns:112px minmax(0,1fr); align-items:center; gap:13px; overflow:hidden; padding:18px 17px 16px; border:1px solid color-mix(in srgb,var(--gift-accent) 32%,rgba(255,255,255,.7)); border-radius:20px; color:#17213d; background:radial-gradient(circle at 18% 18%,rgba(255,255,255,.94),rgba(255,255,255,.34) 28%,transparent 42%),linear-gradient(145deg,color-mix(in srgb,var(--gift-accent) 23%,#fff),#fff 62%); box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 12px 30px color-mix(in srgb,var(--gift-accent) 18%,transparent); }
.chat-gift-glow { position:absolute; z-index:-1; width:190px; height:190px; left:-52px; top:-48px; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--gift-accent) 25%,#fff),transparent 68%); filter:blur(2px); }
.chat-gift-art { position:relative; width:104px; height:104px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.75); border-radius:36px; background:linear-gradient(145deg,rgba(255,255,255,.94),color-mix(in srgb,var(--gift-accent) 18%,#fff)); box-shadow:inset 0 0 0 7px rgba(255,255,255,.28),0 14px 28px color-mix(in srgb,var(--gift-accent) 24%,transparent); transform:rotate(-3deg); }
.chat-gift-art::after { content:""; position:absolute; inset:7px; border:1px solid color-mix(in srgb,var(--gift-accent) 20%,transparent); border-radius:29px; }
.chat-gift-art .twemoji-icon { width:66px; height:66px; filter:drop-shadow(0 8px 10px rgba(21,28,56,.18)); transform:rotate(3deg); }
.chat-gift-copy { position:relative; z-index:2; min-width:0; display:grid; gap:4px; }
.chat-gift-copy small { overflow:hidden; color:color-mix(in srgb,var(--gift-accent) 86%,#18213a); text-overflow:ellipsis; white-space:nowrap; text-transform:uppercase; font-size:7px; font-weight:950; letter-spacing:.08em; }
.chat-gift-copy b { font-family:Georgia,"Times New Roman",serif; font-size:18px; line-height:1.08; }
.chat-gift-copy p { display:-webkit-box; overflow:hidden; margin:5px 0 3px; color:#3f4860; font-size:10px; line-height:1.42; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
.chat-gift-copy em { color:#636b7f; font-size:8px; font-style:normal; font-weight:800; }
.chat-gift-stars { position:absolute; z-index:1; inset:0; pointer-events:none; color:color-mix(in srgb,var(--gift-accent) 72%,#fff); }
.chat-gift-stars i { position:absolute; font-style:normal; text-shadow:0 2px 8px rgba(255,255,255,.8); animation:gift-sparkle 2.8s ease-in-out infinite; }
.chat-gift-stars i:nth-child(1) { left:9px; top:13px; font-size:18px; }
.chat-gift-stars i:nth-child(2) { left:104px; bottom:12px; font-size:14px; animation-delay:.8s; }
.chat-gift-stars i:nth-child(3) { right:12px; top:11px; font-size:11px; animation-delay:1.5s; }
.chat-gift-removed { min-height:80px; grid-template-columns:34px minmax(0,1fr); color:var(--muted); background:var(--surface-alt); box-shadow:none; }
.chat-gift-removed > .ui-icon { width:28px; height:28px; }
.chat-gift-removed span { display:grid; gap:3px; }
.chat-gift-removed small { font-size:8px; }
@keyframes gift-sparkle { 0%,100%{opacity:.45;transform:scale(.78) rotate(0)} 50%{opacity:1;transform:scale(1.2) rotate(18deg)} }

.pedometer-live { display:flex; align-items:center; gap:14px; margin:12px 0; padding:15px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(135deg,var(--surface-alt),var(--white)); }
.pedometer-live.active { border-color:color-mix(in srgb,var(--green) 60%,var(--line)); background:linear-gradient(135deg,color-mix(in srgb,var(--green) 12%,var(--white)),var(--white)); box-shadow:0 10px 25px color-mix(in srgb,var(--green) 13%,transparent); }
.pedometer-live > span { width:54px; height:54px; display:grid; place-items:center; border-radius:18px; background:var(--primary-soft); font-size:29px; }
.pedometer-live > div { display:grid; grid-template-columns:auto auto; align-items:baseline; column-gap:6px; }
.pedometer-live small { grid-column:1 / -1; color:var(--muted); font-size:7px; font-weight:950; letter-spacing:.08em; }
.pedometer-live b { color:var(--primary); font-size:28px; line-height:1.1; font-variant-numeric:tabular-nums; }
.pedometer-live em { color:var(--muted); font-size:9px; font-style:normal; }
.pedometer-actions { display:flex; gap:8px; margin-bottom:10px; }
.manual-steps { margin-top:13px; border-top:1px solid var(--line); }
.manual-steps summary { padding:13px 0 6px; color:var(--primary); cursor:pointer; font-size:10px; font-weight:850; }
.manual-steps form { display:grid; gap:8px; padding-top:6px; }
.wellbeing-dynamics { margin:18px 0; }
.wellbeing-days { display:grid; gap:8px; }
.wellbeing-days article { display:grid; grid-template-columns:150px minmax(250px,1fr) minmax(170px,.6fr); align-items:center; gap:16px; padding:12px 14px; border:1px solid var(--line); border-radius:15px; background:var(--surface-alt); }
.wellbeing-days time { font-size:10px; font-weight:850; }
.wellbeing-mood { display:grid; grid-template-columns:72px minmax(80px,1fr) 38px; align-items:center; gap:8px; }
.wellbeing-mood span,.wellbeing-steps span { color:var(--muted); font-size:8px; }
.wellbeing-mood i { height:8px; overflow:hidden; border-radius:99px; background:var(--line); }
.wellbeing-mood i em { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--red),var(--yellow),var(--green)); }
.wellbeing-mood b { font-size:9px; text-align:right; }
.wellbeing-steps { display:grid; grid-template-columns:auto auto; align-items:baseline; gap:2px 8px; }
.wellbeing-steps strong { color:var(--primary); font-size:14px; }
.wellbeing-steps small { grid-column:1 / -1; overflow:hidden; color:var(--muted); text-overflow:ellipsis; white-space:nowrap; font-size:7px; }

[data-theme="dark"] .gift-card,[data-theme="dark"] .gift-choice { background:linear-gradient(135deg,color-mix(in srgb,var(--gift-accent) 17%,var(--white)),var(--white) 64%); }

@media (max-width:760px) {
  .notification-sound-head { grid-template-columns:42px minmax(0,1fr); }
  .sound-enabled { grid-column:1 / -1; justify-self:start; }
  .notification-sound-controls,.notification-trim { grid-template-columns:1fr; }
  .notification-trim .button { grid-column:1; }
  .notification-sound-actions .button { flex:1 1 auto; }
  .notification-sound-actions .button:last-of-type { margin-left:0; }
  .gift-tools { grid-template-columns:1fr; }
  .gift-grid { grid-template-columns:1fr; }
  .gift-card-actions { opacity:1; }
  .gift-choice-grid { grid-template-columns:repeat(3,minmax(0,1fr)); max-height:52vh; }
  .gift-choice { min-height:104px; }
  .chat-gift-card { width:min(330px,76vw); min-height:150px; grid-template-columns:88px minmax(0,1fr); padding:15px 13px; border-radius:18px; }
  .chat-gift-art { width:82px; height:82px; border-radius:28px; }
  .chat-gift-art::after { border-radius:22px; }
  .chat-gift-art .twemoji-icon { width:52px; height:52px; }
  .chat-gift-copy b { font-size:16px; }
  .wellbeing-days article { grid-template-columns:1fr; gap:9px; }
  .wellbeing-mood { grid-template-columns:72px minmax(80px,1fr) 38px; }
}

/* Communication, wellbeing and analytics — 0.11 */
.chat-main { grid-template-rows:auto auto minmax(0,1fr) auto; }
.chat-list-search,.chat-message-search { display:flex; align-items:center; gap:7px; min-width:0; border:1px solid var(--modern-line); border-radius:13px; color:var(--muted); background:var(--surface-alt); }
.chat-list-search { margin-top:8px; padding:0 9px; }.chat-list-search input,.chat-message-search input { min-width:0; min-height:34px; margin:0; padding:6px 2px; border:0; background:transparent; box-shadow:none; }
.chat-list-search .ui-icon,.chat-message-search .ui-icon { width:16px; height:16px; flex:0 0 auto; }
.chat-message-search { margin:8px 12px 0; padding:0 9px; background:var(--white); }.chat-message-search button { border:0; color:var(--muted); background:transparent; font-size:20px; }
.message-date-separator { position:sticky; z-index:2; top:6px; display:flex; justify-content:center; margin:12px 0; pointer-events:none; }.message-date-separator span { padding:6px 11px; border:1px solid var(--modern-line); border-radius:999px; color:var(--muted); background:var(--surface-overlay); box-shadow:0 6px 18px rgba(17,26,61,.08); backdrop-filter:blur(12px); font-size:9px; font-weight:850; }
.message-unread-separator { display:flex; align-items:center; gap:9px; width:100%; margin:15px 0 11px; color:var(--primary); pointer-events:none; }.message-unread-separator::before,.message-unread-separator::after { height:1px; flex:1; content:""; background:color-mix(in srgb,var(--primary) 42%,transparent); }.message-unread-separator span { flex:0 0 auto; padding:5px 9px; border-radius:999px; background:color-mix(in srgb,var(--primary-soft) 86%,var(--white)); box-shadow:0 5px 16px rgba(24,39,91,.08); font-size:9px; font-weight:900; letter-spacing:.02em; }
.chat-history-control { display:block; max-width:290px; min-height:34px; margin:3px auto 13px; padding:8px 13px; border:1px solid color-mix(in srgb,var(--primary) 22%,var(--line)); border-radius:999px; color:var(--primary); background:var(--surface-overlay); box-shadow:0 6px 20px rgba(20,32,72,.08); cursor:pointer; font-size:9px; font-weight:850; backdrop-filter:blur(10px); }.chat-history-control:hover,.chat-history-control:focus-visible { border-color:var(--primary); background:var(--primary-soft); }.chat-history-control.newer { margin-top:14px; margin-bottom:5px; }.chat-history-control.error { color:var(--red); border-color:color-mix(in srgb,var(--red) 30%,var(--line)); }
.chat-history-loading { display:flex; align-items:center; justify-content:center; gap:8px; margin:4px auto 14px; color:var(--muted); font-size:9px; }.chat-history-loading span { width:13px; height:13px; border:2px solid var(--line); border-top-color:var(--primary); border-radius:50%; animation:chat-history-spin .8s linear infinite; }
@keyframes chat-history-spin { to { transform:rotate(360deg); } }
.chat-main.has-thread-background .messages { background-position:var(--thread-background-position,center); background-size:var(--thread-background-size,cover); }
.adaptiv-emoji { display:inline-grid; width:28px; height:28px; vertical-align:middle; }.adaptiv-emoji svg { width:100%; height:100%; }.adaptiv-emoji-picker { display:grid; grid-template-columns:repeat(auto-fit,minmax(75px,1fr)); gap:8px; margin-bottom:14px; }.custom-emoji-button { display:grid; justify-items:center; gap:4px; padding:9px; border:1px solid var(--modern-line); border-radius:14px; color:var(--ink); background:var(--white); }.custom-emoji-button small { color:var(--muted); font-size:8px; }
.attachment.sticker { display:inline-block; border:0; background:transparent; box-shadow:none; }.attachment.sticker img { width:min(180px,45vw); max-height:180px; object-fit:contain; }
.sticker-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:16px 0; }.sticker-choice { position:relative; min-width:0; }.sticker-choice > button:first-child { width:100%; display:grid; gap:5px; padding:7px; border:1px solid var(--modern-line); border-radius:15px; color:var(--ink); background:var(--surface-alt); }.sticker-choice img { width:100%; aspect-ratio:1; object-fit:contain; }.sticker-delete,.sticker-edit { position:absolute; top:4px; width:24px; height:24px; border:0; border-radius:50%; color:#fff; }.sticker-delete { right:4px; background:var(--red); }.sticker-edit { left:4px; background:var(--primary); }
.composer-voice {
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  touch-action:none;
}
.composer-voice.is-recording {
  z-index:8;
  width:56px;
  height:56px;
  overflow:hidden;
  border-radius:50%;
  color:#fff;
  background:var(--red);
  transform:translate3d(var(--record-drag-x,0px),var(--record-drag-y,0px),0);
  transition:transform 45ms linear,background .16s ease,box-shadow .16s ease;
  animation:record-pulse .8s infinite alternate;
}
.composer-voice.is-recording.is-locked { animation-duration:1.2s; }
@keyframes record-pulse { to { box-shadow:0 0 0 8px color-mix(in srgb,var(--red) 18%,transparent); } }
.composer-voice.is-recording.is-cancelling {
  color:#fff;
  background:var(--red);
  transition:transform 120ms cubic-bezier(.2,.8,.2,1),opacity 120ms ease;
}
.recording-button-preview { position:absolute; inset:2px; width:calc(100% - 4px); height:calc(100% - 4px); border-radius:50%; object-fit:cover; transform:none !important; pointer-events:none; }
.message-form.recording-inline > :not(.composer-voice):not(.quick-recording-dock) { opacity:0; pointer-events:none; }
.quick-recording-dock { --cancel-progress:0; --lock-progress:0; position:absolute; z-index:6; inset:0; display:grid; grid-template-columns:minmax(72px,.8fr) minmax(125px,1.4fr) minmax(72px,.8fr); align-items:center; gap:8px; padding:8px 76px 8px 12px; border-top:1px solid var(--line); color:var(--ink); background:color-mix(in srgb,var(--white) 97%,transparent); box-shadow:0 -8px 28px rgba(16,25,54,.08); backdrop-filter:blur(20px); pointer-events:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.quick-recording-cancel,.quick-recording-lock { min-width:0; padding:8px 9px; border-radius:999px; color:var(--muted); text-align:center; font-size:9px; font-weight:900; transition:background .16s,color .16s,transform .16s; }
.quick-recording-cancel { transform:scale(calc(1 + var(--cancel-progress) * .08)); }
.quick-recording-lock { transform:scale(calc(1 + var(--lock-progress) * .08)); }
.quick-recording-cancel.active { color:#fff; background:var(--red); }
.quick-recording-lock.active,.quick-recording-dock.locked .quick-recording-lock { color:#fff; background:var(--primary); }
.quick-recording-main { min-width:0; display:grid; justify-items:center; gap:3px; }
.quick-recording-main b { color:var(--red); font-size:16px; font-variant-numeric:tabular-nums; }
.quick-recording-main small { overflow:hidden; max-width:100%; color:var(--muted); text-overflow:ellipsis; white-space:nowrap; font-size:8px; }
.quick-recording-actions { display:none; grid-column:1 / -1; justify-content:center; gap:8px; pointer-events:auto; }
.quick-recording-dock.locked { grid-template-columns:1fr; padding-right:74px; }
.quick-recording-dock.locked .quick-recording-cancel,.quick-recording-dock.locked .quick-recording-lock { display:none; }
.quick-recording-dock.locked .quick-recording-actions { display:flex; }
.recording-circle.unmirrored { transform:none !important; }
.recording-hint { text-align:center; }.recording-box.paused { opacity:.55; }
.recording-preview-content { min-width:0; }
.recording-preview-media { --recording-preview-progress:0%; position:relative; min-width:0; margin:14px auto 18px; }
.recording-preview-toggle { z-index:2; width:54px; height:54px; display:grid; place-items:center; flex:0 0 54px; border:0; border-radius:50%; color:#fff; background:rgba(18,27,58,.88); box-shadow:0 10px 28px rgba(10,17,42,.24); cursor:pointer; backdrop-filter:blur(12px); }
.recording-preview-toggle .ui-icon { width:25px; height:25px; }
.recording-preview-scrubber { position:relative; min-width:0; height:34px; display:flex; align-items:center; touch-action:none; }
.recording-preview-track { position:relative; width:100%; height:5px; overflow:visible; border-radius:999px; background:color-mix(in srgb,var(--line) 82%,var(--white)); pointer-events:none; }
.recording-preview-track i { position:absolute; inset:0 auto 0 0; width:var(--recording-preview-progress); border-radius:inherit; background:linear-gradient(90deg,var(--primary),var(--cyan)); }
.recording-preview-track span { position:absolute; left:var(--recording-preview-progress); top:50%; width:15px; height:15px; border:3px solid #fff; border-radius:50%; background:var(--cyan); box-shadow:0 2px 8px rgba(12,30,60,.2); transform:translate(-50%,-50%); }
.recording-preview-scrubber input { position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; border:0; opacity:.001; cursor:pointer; }
.recording-preview-clock { display:flex; align-items:center; justify-content:flex-end; gap:4px; color:var(--muted); font-size:9px; font-variant-numeric:tabular-nums; }
.recording-preview-circle { width:min(300px,74vw); aspect-ratio:1; }
.recording-preview-circle .recording-result { width:100%; height:100%; display:block; margin:0; border-radius:50%; object-fit:cover; background:#05070d; }
.recording-preview-circle .recording-preview-toggle { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.recording-preview-circle-controls { position:absolute; z-index:2; right:14%; bottom:15px; left:14%; padding:5px 11px 7px; border-radius:15px; background:rgba(16,24,54,.76); backdrop-filter:blur(12px); }
.recording-preview-circle .recording-preview-scrubber { height:21px; }
.recording-preview-circle .recording-preview-clock { color:rgba(255,255,255,.82); }
.recording-preview-audio { display:grid; grid-template-columns:54px minmax(0,1fr); align-items:center; gap:12px; width:min(100%,560px); padding:13px 15px; border:1px solid var(--modern-line); border-radius:19px; background:linear-gradient(135deg,var(--surface-alt),color-mix(in srgb,var(--primary) 7%,var(--white))); }
.recording-preview-audio-body { min-width:0; display:grid; gap:2px; }
.recording-preview-audio-body > b { font-size:11px; }
.recording-preview-audio .recording-result { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }
.recording-trim-form { min-width:0; }
.recording-trim-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.recording-trim-control { min-width:0; display:grid; gap:8px; margin:0; padding:11px 12px; border:1px solid var(--modern-line); border-radius:15px; background:var(--surface-alt); }
.recording-trim-control > span { min-width:0; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.recording-trim-control b { font-size:10px; }
.recording-trim-control output { color:var(--primary); font-size:10px; font-weight:900; font-variant-numeric:tabular-nums; }
.recording-trim-control input { min-height:30px; margin:0; padding:0; border:0; background:transparent; box-shadow:none; accent-color:var(--primary); }
.recording-trim-note { margin:12px 2px 0; font-size:10px; line-height:1.45; }
.recording-preview-actions { margin-top:14px; }
.media-volume { display:flex; align-items:center; gap:5px; color:var(--muted); font-size:10px; }.media-volume input { width:70px; min-height:20px; padding:0; }.wide-volume { margin-top:7px; }.wide-volume input { width:min(220px,60vw); }
.reader-pills { display:flex; flex-wrap:wrap; gap:6px; }

.countdown-card { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:16px; padding:24px; overflow:hidden; color:#fff; background:radial-gradient(circle at 85% 0,rgba(86,229,218,.3),transparent 32%),linear-gradient(135deg,#141d46,#6045d8); }.countdown-card h2 { margin:4px 0; }.countdown-card > small { grid-column:1/-1; color:rgba(255,255,255,.72); }.countdown-values { display:flex; gap:8px; }.countdown-values span { min-width:63px; display:grid; place-items:center; padding:10px; border:1px solid rgba(255,255,255,.18); border-radius:15px; background:rgba(255,255,255,.1); backdrop-filter:blur(10px); }.countdown-values b { font-size:24px; }.countdown-values small { color:rgba(255,255,255,.68); font-size:8px; }
.confetti-layer { position:fixed; z-index:500; inset:0; overflow:hidden; pointer-events:none; }.confetti-layer i { position:absolute; left:var(--x); top:-20px; width:9px; height:18px; background:var(--color); animation:confetti 4.8s var(--delay) ease-in forwards; } @keyframes confetti { to { transform:translate3d(30px,110vh,0) rotate(900deg); } }
.mood-home-card,.gift-hero,.mood-hero { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px; }.mood-home-icon,.mood-hero > span { font-size:58px; }.mood-layout,.certificate-admin-layout { display:grid; grid-template-columns:1.35fr .85fr; gap:16px; }.mood-range { width:100%; accent-color:hsl(calc(var(--mood-value,75) * 1.2),70%,46%); }.mood-range-label span { display:flex; justify-content:space-between; }.mood-history { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.mood-history-card { display:grid; grid-template-columns:62px minmax(0,1fr) auto; align-items:center; gap:12px; padding:14px; background:linear-gradient(90deg,color-mix(in srgb,#ef476f calc(100% - var(--mood)),#5dd39e var(--mood)),var(--white) 28%); }.mood-score { display:grid; place-items:center; width:58px; height:58px; border-radius:18px; color:#fff; background:rgba(18,28,55,.82); font-weight:900; }.mood-history-card small,.mood-history-card p { display:block; margin-top:4px; color:var(--muted); }
.gift-hero { color:#fff; background:radial-gradient(circle at 80% 0,rgba(255,204,86,.4),transparent 32%),linear-gradient(135deg,#43256c,#9f437d); }.gift-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:18px; }.gift-card { display:flex; gap:12px; padding:18px; }.gift-card > span { font-size:38px; }.gift-card small,.gift-card em { display:block; margin-top:4px; color:var(--muted); }.gift-card em { color:var(--primary); font-style:normal; font-weight:850; }
.dashboard-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; }.dashboard-stat { display:grid; gap:7px; padding:18px; }.dashboard-stat .feature-icon { width:42px; height:42px; border-radius:14px; }.dashboard-stat strong { font-size:25px; }.dashboard-stat span { color:var(--muted); font-size:10px; }.dashboard-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.dashboard-roles { margin:16px 0; }.role-counts { display:flex; flex-wrap:wrap; gap:7px; }.dashboard-rank { display:grid; gap:9px; }.dashboard-rank-row { display:grid; grid-template-columns:25px minmax(0,1fr) auto; align-items:center; gap:8px; }.dashboard-rank-row > span { display:grid; place-items:center; width:25px; height:25px; border-radius:8px; background:var(--surface-alt); font-size:9px; font-weight:900; }.dashboard-rank-row div { min-width:0; }.dashboard-rank-row b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }.dashboard-rank-row i { display:block; height:5px; margin-top:5px; border-radius:999px; background:linear-gradient(90deg,var(--primary),var(--cyan)); }.dashboard-rank-row strong { font-size:10px; }

.profile-visual-button { position:relative; padding:0; border:0; border-radius:50%; background:transparent; cursor:pointer; }.profile-visual-button > span { position:absolute; inset:auto 8% 5%; padding:6px; border-radius:999px; color:#fff; background:rgba(10,16,38,.75); font-size:8px; opacity:0; transition:opacity .2s; }.profile-visual-button:hover > span { opacity:1; }.background-editor,.permission-card,.offline-card,.form-subsection { margin-top:16px; padding:16px; border:1px solid var(--modern-line); border-radius:18px; background:var(--surface-alt); }.permission-card p,.offline-card p { color:var(--muted); font-size:10px; line-height:1.5; }.crop-editor { display:grid; grid-template-columns:minmax(150px,1fr) 1fr; gap:9px 14px; align-items:center; margin:12px 0; }.crop-preview { grid-row:span 3; min-height:180px; overflow:hidden; display:grid; place-items:center; border:1px dashed var(--modern-line); border-radius:18px; background:var(--white); }.crop-preview img { width:100%; height:100%; min-height:180px; object-fit:cover; }.sticker-crop-preview img { object-fit:cover; }.profile-gallery-main,.profile-gallery-empty { width:100%; max-height:58vh; object-fit:contain; border-radius:20px; background:#11162b; }.profile-gallery-empty { min-height:300px; display:grid; place-items:center; color:#fff; font-size:64px; }.profile-gallery-thumbs { display:flex; gap:8px; overflow-x:auto; margin-top:10px; padding:4px; }.profile-gallery-thumbs button { flex:0 0 68px; width:68px; height:68px; overflow:hidden; padding:2px; border:2px solid transparent; border-radius:14px; background:var(--surface-alt); }.profile-gallery-thumbs button.active { border-color:var(--primary); }.profile-gallery-thumbs img,.profile-gallery-thumbs video { width:100%; height:100%; object-fit:cover; border-radius:10px; }
.crop-preview [data-crop-preview],.admin-welcome-frame [data-crop-preview] { cursor:grab; touch-action:none; user-select:none; will-change:transform; }.crop-preview [data-crop-preview]:active,.admin-welcome-frame [data-crop-preview]:active { cursor:grabbing; }.admin-welcome-frame { width:100%; aspect-ratio:16/7; overflow:hidden; display:grid; place-items:center; margin:14px 0; border:1px solid var(--modern-line); border-radius:18px; background:#10162a; }.admin-welcome-frame .welcome-admin-preview { width:100%; height:100%; max-height:none; object-fit:cover; border-radius:0; }.admin-welcome-crop { grid-template-columns:repeat(3,minmax(0,1fr)); }.admin-welcome-crop h3,.admin-welcome-crop p { grid-column:1/-1; }
.certificate-template-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.certificate-template-card { overflow:hidden; border:1px solid var(--modern-line); border-radius:18px; background:var(--surface-alt); }.certificate-template-card.selected { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); }.certificate-template-card img { width:100%; aspect-ratio:.707; object-fit:cover; object-position:top; }.certificate-template-card > div { padding:10px; }.certificate-template-card small { display:block; color:var(--muted); }.certificate-modal-preview { width:min(100%,380px); max-height:460px; display:block; margin:0 auto 16px; object-fit:contain; border-radius:16px; }.certificate-summary { margin-top:18px; }

@media (max-width:760px) {
  html,body { overscroll-behavior:none; touch-action:manipulation; }
  .mobile-nav { height:calc(64px + env(safe-area-inset-bottom)); transform:translate3d(0,0,0); will-change:transform; contain:layout paint; overscroll-behavior:none; }
  .app { padding-bottom:calc(70px + env(safe-area-inset-bottom)); }
  .chat-message-search { margin:6px 7px 0; }
  .message { touch-action:pan-y; }
  .countdown-card { grid-template-columns:1fr; padding:18px; }.countdown-values { display:grid; grid-template-columns:repeat(4,1fr); }.countdown-values span { min-width:0; padding:8px 3px; }.countdown-values b { font-size:19px; }.countdown-card > small { grid-column:auto; }
  .mood-layout,.certificate-admin-layout,.dashboard-columns { grid-template-columns:1fr; }.mood-history { grid-template-columns:1fr; }.gift-grid { grid-template-columns:1fr; }.dashboard-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.crop-editor { grid-template-columns:1fr; }.crop-preview { grid-row:auto; }.certificate-template-grid { grid-template-columns:1fr; }
  .profile-visual-button > span { opacity:1; }
  .sticker-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}