:root {
        --bg: #ee9ca7;
        --bg2: #ffdde1;
        --card: rgba(255, 255, 255, 0.72);
        --solid: rgba(255, 255, 255, 0.96);
        --text: #4d2638;
        --muted: #9d7083;
        --pink: #ff5f9e;
        --pink2: #ff3d88;
        --soft: #ffd5e5;
        --line: rgba(255, 95, 158, 0.16);
        --shadow: 0 14px 38px rgba(142, 43, 86, 0.14);
        --nav: 76px;
      }
      body.dark {
        --bg: #181015;
        --bg2: #2b1721;
        --card: rgba(56, 31, 43, 0.76);
        --solid: rgba(66, 36, 51, 0.96);
        --text: #fff5f8;
        --muted: #d3aabd;
        --soft: #5b2d43;
        --line: rgba(255, 255, 255, 0.08);
        --shadow: 0 14px 38px rgba(0, 0, 0, 0.3);
      }
      * {
        box-sizing: border-box;
      }
      [hidden],
      .hidden {
        display: none !important;
      }
      html {
        scroll-behavior: smooth;
      }
      body {
        margin: 0;
        min-height: 100vh;
        overflow-x: hidden;
        color: var(--text);
        font-family:
          "Nunito",
          ui-rounded,
          "Segoe UI",
          system-ui,
          -apple-system,
          sans-serif;
        background: linear-gradient(135deg, var(--bg), var(--bg2));
        transition: 0.25s;
      }
      button,
      input,
      textarea {
        font: inherit;
      }
      button {
        cursor: pointer;
      }
      img {
        display: block;
        max-width: 100%;
      }
      .glass {
        border: 1px solid rgba(255, 255, 255, 0.45);
        background: var(--card);
        box-shadow: var(--shadow);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
      }
      body.viewer .owner-only {
        display: none !important;
      }
      .viewer-only {
        display: none;
      }
      body.viewer .viewer-only {
        display: block;
      }
      .shell {
        width: min(100%, 1080px);
        min-height: 100vh;
        margin: auto;
        /* Chừa chỗ cho topbar fixed để nội dung không bị che. */
        padding: 79px 15px calc(var(--nav) + 42px);
      }
      .topbar {
        position: fixed;
        z-index: 30;
        top: calc(env(safe-area-inset-top, 0px) + 10px);
        left: 50%;
        width: calc(100% - 30px);
        max-width: 1050px;
        transform: translateX(-50%);
        height: 57px;
        min-height: 57px;
        margin: 0;
        padding: 8px;
        border-radius: 21px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
      }
      .topbar-normal,
      .music-player-bar {
        width: 100%;
        min-width: 0;
        height: 39px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
      }
      .topbar-normal {
        justify-content: space-between;
      }
      .topbar-normal > #loveTopBtn {
        margin: 0;
        min-width: 0;
        height: auto;
        padding: 4px 6px;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        justify-content: flex-start;
        color: var(--text);
      }
      .topbar-normal > #loveTopBtn:hover,
      .topbar-normal > #loveTopBtn:active {
        background: transparent;
        box-shadow: none;
        transform: none;
      }
      .topbar-normal > #loveTopBtn .ui-filled-icon {
        width: 20px;
        height: 20px;
        color: var(--pink);
        fill: currentColor;
      }
      .topbar-normal > #loveTopBtn strong {
        font-size: 14px;
        font-weight: 950;
      }
      .top-actions {
        margin-left: auto;
        display: flex;
        gap: 5px;
      }
      .music-player-bar {
        display: none;
      }
      .topbar.music-mode .topbar-normal {
        display: none;
      }
      .topbar.music-mode .music-player-bar {
        display: flex;
        animation: musicBarEnter 0.2s ease;
      }
      .music-control {
        width: 35px;
        min-width: 35px;
        height: 35px;
        padding: 0;
        border: 0;
        border-radius: 12px;
        color: var(--text);
        background: var(--solid);
        display: grid;
        place-items: center;
        font-size: 13px;
        font-weight: 950;
        box-shadow: 0 5px 14px rgba(143, 42, 87, 0.08);
      }
      .music-control.play-control {
        color: #fff;
        background: linear-gradient(135deg, var(--pink), var(--pink2));
      }
      .music-track {
        height: 35px;
        min-width: 0;
        flex: 1;
        padding: 0 10px;
        border-radius: 12px;
        color: var(--text);
        background: var(--solid);
        display: flex;
        align-items: center;
        gap: 10px;
        overflow: hidden;
        box-shadow: 0 5px 14px rgba(143, 42, 87, 0.08);
      }
      .music-track-copy {
        min-width: 58px;
        max-width: 84px;
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        line-height: 1.05;
      }
      .music-track-copy strong,
      .music-track-copy small {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .music-track-copy strong {
        font-size: 11px;
      }
      .music-track-copy small {
        margin-top: 3px;
        color: var(--muted);
        font-size: 8px;
        font-weight: 750;
      }
      .music-equalizer {
        min-width: 0;
        height: 18px;
        flex: 1 1 auto;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: stretch;
        gap: 2px;
        opacity: 0.96;
      }
      .music-equalizer span {
        width: 3px;
        min-width: 2px;
        height: 15px;
        flex: 1 1 0;
        border-radius: 999px;
        background: linear-gradient(180deg, var(--pink), var(--pink2));
        transform: scaleY(0.24);
        transform-origin: center;
        animation: musicBeat 0.72s ease-in-out infinite;
        animation-play-state: paused;
      }
      .music-equalizer span:nth-child(4n + 1) {
        animation-duration: 0.54s;
        animation-delay: -0.18s;
      }
      .music-equalizer span:nth-child(4n + 2) {
        animation-duration: 0.82s;
        animation-delay: -0.3s;
      }
      .music-equalizer span:nth-child(4n + 3) {
        animation-duration: 0.61s;
        animation-delay: -0.1s;
      }
      .music-equalizer span:nth-child(4n) {
        animation-duration: 0.76s;
        animation-delay: -0.42s;
      }
      .music-player-bar.playing .music-equalizer span {
        animation-play-state: running;
      }
      .music-player-bar.audio-reactive .music-equalizer span {
        animation: none;
        transition: transform 70ms linear, opacity 70ms linear;
      }
      @keyframes musicBeat {
        0%,
        100% {
          transform: scaleY(0.28);
          opacity: 0.62;
        }
        50% {
          transform: scaleY(1);
          opacity: 1;
        }
      }
      @keyframes musicBarEnter {
        from {
          opacity: 0;
          transform: translateY(4px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      .icon-btn {
        height: 39px;
        min-width: 39px;
        padding: 0 11px;
        border: 0;
        border-radius: 13px;
        color: var(--text);
        background: var(--solid);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-size: 13px;
        font-weight: 900;
        box-shadow: 0 5px 14px rgba(143, 42, 87, 0.08);
      }
      .panel {
        display: none;
        animation: fade 0.2s ease;
      }
      .panel.active {
        display: block;
      }
      @keyframes fade {
        from {
          opacity: 0;
          transform: translateY(7px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      .section-head {
        margin: 23px 2px 11px;
      }
      /* Header đầu mỗi trang nằm gần topbar hơn nhưng vẫn không bị che. */
      .panel > .section-head:first-child {
        margin-top: 8px;
      }
      .section-row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
      }
      .section-head h2,
      .section-head h3 {
        margin: 0;
        font-size: 22px;
        letter-spacing: -0.03em;
      }
      .section-head p {
        margin: 4px 0 0;
        color: var(--muted);
        font-size: 12px;
      }
      .link {
        padding: 0;
        border: 0;
        background: none;
        color: var(--pink);
        font-size: 12px;
        font-weight: 900;
      }
      .locked {
        display: none;
        margin-bottom: 10px;
        padding: 10px 12px;
        border: 1px dashed rgba(255, 95, 158, 0.28);
        border-radius: 14px;
        color: var(--muted);
        background: rgba(255, 95, 158, 0.07);
        font-size: 10px;
      }
      body.viewer .locked {
        display: block;
      }
      .btn {
        min-height: 46px;
        padding: 11px 14px;
        border: 0;
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        font-size: 12px;
        font-weight: 850;
      }
      .primary {
        color: #fff;
        background: linear-gradient(135deg, var(--pink), var(--pink2));
        box-shadow: 0 10px 22px rgba(255, 61, 137, 0.24);
      }
      .secondary {
        color: var(--text);
        background: var(--solid);
        border: 1px solid var(--line);
      }
      .danger {
        color: #fff;
        background: linear-gradient(135deg, #ff7188, #ff4267);
      }
      .input {
        width: 100%;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 14px;
        outline: 0;
        color: var(--text);
        background: var(--solid);
        font-size: 12px;
      }
      textarea.input {
        min-height: 90px;
        resize: vertical;
      }

      /* Tránh iPhone và mobile WebView tự phóng to khi focus ô nhập. */
      @media (max-width: 719px) {
        input,
        textarea,
        select,
        .input,
        .pin-input {
          font-size: 16px !important;
        }
      }
      .empty {
        padding: 20px 12px;
        border: 1px dashed var(--line);
        border-radius: 15px;
        color: var(--muted);
        font-size: 11px;
        text-align: center;
      }

      /* =========================
   UTILITIES
   Các class nhỏ thay cho inline style trong HTML.
========================= */
      .btn-block {
        width: 100%;
      }
      .btn-compact {
        min-height: 38px;
      }
      .request-panel {
        padding: 14px;
        border-radius: 22px;
      }
      .mt-9 {
        margin-top: 9px;
      }
      .mt-10 {
        margin-top: 10px;
      }
      .mt-11 {
        margin-top: 11px;
      }
      .mb-8 {
        margin-bottom: 8px;
      }
      .text-9 {
        font-size: 9px;
      }
      .text-13 {
        font-size: 13px;
      }
      .text-muted {
        color: var(--muted);
      }

      /* LockLuv */
      .camera-card {
        padding: 11px;
        border-radius: 28px;
      }
      .camera-frame {
        position: relative;
        width: 100%;
        min-height: 0;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        border-radius: 23px;
        display: flex;
        align-items: center;
        justify-content: center;
        background:
          radial-gradient(
            circle at 25% 18%,
            rgba(255, 255, 255, 0.3),
            transparent 24%
          ),
          linear-gradient(145deg, #ffb9d2, #ff6fa8);
      }
      .camera-photo,
      .camera-video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .camera-photo {
        z-index: 1;
        opacity: 1;
        transition: opacity 280ms cubic-bezier(.2,.8,.2,1);
      }
      .camera-video {
        z-index: 2;
        background: transparent;
        opacity: 0;
        --camera-zoom: 1;
        --camera-mirror: 1;
        transform: translateZ(0) scaleX(var(--camera-mirror)) scale(var(--camera-zoom));
        transition: opacity 280ms cubic-bezier(.2,.8,.2,1);
        transform-origin: center;
        will-change: transform;
      }
      .camera-frame.camera-live .camera-video {
        opacity: 1;
      }
      .camera-frame.camera-live .camera-photo {
        opacity: 0;
      }
      .camera-video.front-camera {
        --camera-mirror: -1;
      }
      .camera-frame.camera-live {
        touch-action: none;
      }
      .camera-zoom-badge {
        position: absolute;
        z-index: 8;
        left: 50%;
        bottom: 80px;
        min-width: 44px;
        height: 28px;
        padding: 0 10px;
        border: 1px solid rgba(255,255,255,.5);
        border-radius: 999px;
        color: #fff;
        background: rgba(20,8,15,.46);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 900;
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, 6px) scale(.94);
        transition: opacity .18s ease, transform .18s ease;
      }
      .camera-zoom-badge.show {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
      }

      .camera-frame.camera-opening::after {
        content: "";
        position: absolute;
        z-index: 8;
        width: 34px;
        height: 34px;
        border: 3px solid rgba(255, 255, 255, 0.38);
        border-top-color: #ff3f8f;
        border-radius: 50%;
        animation: cameraOpenSpin 0.72s linear infinite;
        pointer-events: none;
      }
      .camera-frame.camera-opening .camera-empty {
        opacity: 0.42;
      }
      @keyframes cameraOpenSpin {
        to { transform: rotate(360deg); }
      }
      .camera-frame.camera-live .camera-meta {
        display: none;
      }
      .camera-frame.camera-live .camera-controls {
        z-index: 7;
      }
      .camera-action-row {
        margin-top: 10px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 9px;
      }
      .camera-action-row .btn[hidden] {
        display: none !important;
      }
      .camera-empty {
        position: relative;
        z-index: 1;
        width: min(100%, 360px);
        min-height: 100%;
        margin: auto;
        padding: 72px 28px 92px;
        color: #fff;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
        pointer-events: none;
      }
      .camera-empty .emoji {
        display: block;
        width: auto;
        height: auto;
        margin: 0 auto 14px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        font-size: 34px;
        line-height: 1;
      }
      .camera-empty h3 {
        max-width: 260px;
        margin: 0;
        font-size: clamp(18px, 3vw, 23px);
        line-height: 1.16;
        letter-spacing: -.025em;
      }
      .camera-empty p {
        max-width: 250px;
        margin: 9px 0 0;
        font-size: 12px;
        line-height: 1.45;
        opacity: 0.88;
      }
      @media (max-width: 719px) {
        .camera-empty {
          width: min(100%, 310px);
          padding: 64px 22px 86px;
        }
        .camera-empty .emoji {
          width: auto;
          height: auto;
          margin-bottom: 12px;
          border-radius: 0;
          font-size: 30px;
        }
        .camera-empty h3 {
          max-width: 230px;
          font-size: 19px;
        }
        .camera-empty p {
          max-width: 220px;
          margin-top: 7px;
          font-size: 11px;
        }
      }
      .camera-meta {
        position: absolute;
        z-index: 4;
        top: 13px;
        left: 13px;
        right: 13px;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
      }
      .camera-caption {
        max-width: 74%;
        padding: 8px 10px;
        border-radius: 13px;
        color: #fff;
        background: rgba(25, 8, 16, 0.34);
        backdrop-filter: blur(10px);
      }
      .camera-caption b {
        display: block;
        font-size: 11px;
      }
      .camera-caption small {
        display: block;
        margin-top: 3px;
        font-size: 8px;
        opacity: 0.82;
      }
      .heart-main {
        width: 42px;
        height: 42px;
        padding: 0;
        border: 0;
        border-radius: 15px;
        color: #6b2943;
        background: rgba(255, 255, 255, 0.92);
        font-size: 20px;
      }
      .heart-main.liked {
        color: #fff;
        background: var(--pink);
      }
      .camera-controls {
        position: absolute;
        z-index: 5;
        left: 50%;
        bottom: 15px;
        width: min(274px, calc(100% - 24px));
        transform: translateX(-50%);
        display: grid;
        grid-template-columns: 34px 34px 52px 34px 34px;
        align-items: center;
        justify-content: center;
        gap: 12px;
      }
      /* Giữ nguyên hình học 5 cột ở cả hai trạng thái để nút chụp
         không đổi vị trí khi camera bật/tắt. */
      .camera-controls .shutter {
        grid-column: 3;
      }
      .camera-tool {
        width: 34px;
        height: 34px;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, 0.78);
        border-radius: 50%;
        color: #5b2940;
        background: rgba(255, 255, 255, 0.84);
        box-shadow: 0 6px 18px rgba(80, 28, 52, 0.12);
        display: inline-grid;
        place-items: center;
        font-size: 10px;
        font-weight: 900;
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, opacity 0.18s ease;
      }
      .camera-tool svg {
        width: 16px;
        height: 16px;
        display: block;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        pointer-events: none;
      }
      .camera-tool:active { transform: scale(0.9); }
      .camera-tool.camera-stop { color: var(--pink); }
      .camera-tool {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: scale(.76);
      }
      .camera-frame.camera-live .camera-tool {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: scale(1);
      }
      .camera-frame.camera-live .camera-tool {
        animation: cameraToolReveal 0.24s cubic-bezier(0.2, 0.75, 0.25, 1) both;
      }
      @keyframes cameraToolReveal {
        from { opacity: 0; transform: scale(0.78); }
        to { opacity: 1; transform: scale(1); }
      }
      .camera-tool.active {
        color: var(--pink);
        background: #fff;
      }
      .shutter {
        width: 50px;
        height: 50px;
        padding: 4px;
        border: 3px solid rgba(255, 255, 255, 0.96);
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.17);
      }
      .shutter:after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: linear-gradient(135deg, #ff9bc3, var(--pink));
      }
      .countdown {
        position: absolute;
        z-index: 8;
        inset: 0;
        display: none;
        place-items: center;
        color: #fff;
        background: rgba(30, 8, 18, 0.2);
        font-size: 82px;
        font-weight: 950;
        backdrop-filter: blur(3px);
      }
      .countdown.show {
        display: grid;
      }
      .flash {
        position: absolute;
        z-index: 9;
        inset: 0;
        pointer-events: none;
        opacity: 0;
        background: #fff;
      }
      .flash.burst {
        animation: flash 0.36s ease;
      }
      @keyframes flash {
        0% {
          opacity: 0;
        }
        35% {
          opacity: 0.98;
        }
        100% {
          opacity: 0;
        }
      }
      .upload-row {
        margin-top: 11px;
      }
      .recent {
        margin-top: 15px;
        padding-top: 14px;
        border-top: 1px solid var(--line);
      }
      .recent-head {
        margin-bottom: 9px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }
      .recent-head b {
        font-size: 13px;
      }
      .recent-head small {
        color: var(--muted);
        font-size: 9px;
      }
      .recent-history-btn {
        flex: 0 0 auto;
        min-height: 32px;
        padding: 7px 11px;
        border: 1px solid var(--line);
        border-radius: 11px;
        background: var(--surface-strong);
        box-shadow: 0 5px 14px rgba(143, 42, 87, 0.07);
        line-height: 1;
        transition:
          transform 0.18s ease,
          border-color 0.18s ease,
          background 0.18s ease;
      }
      .recent-history-btn:hover {
        border-color: rgba(255, 95, 158, 0.34);
        background: rgba(255, 95, 158, 0.08);
        transform: translateY(-1px);
      }
      .recent-history-btn:active {
        transform: scale(0.96);
      }
      .photo-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
      }
      .photo-card {
        position: relative;
        aspect-ratio: 1;
        overflow: hidden;
        isolation: isolate;
        border-radius: 17px;
        background: var(--soft);
        border: 1px solid rgba(255, 255, 255, 0.48);
      }
      .photo-card > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .photo-card:after {
        content: "";
        position: absolute;
        z-index: 1;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(
          to bottom,
          rgba(20, 5, 13, 0.22),
          transparent 35%,
          transparent 55%,
          rgba(20, 5, 13, 0.4)
        );
      }
      .photo-top {
        position: absolute;
        z-index: 3;
        top: 6px;
        left: 6px;
        right: 6px;
        display: flex;
        justify-content: space-between;
        gap: 4px;
      }
      .photo-actions {
        display: flex;
        gap: 4px;
      }
      .pill {
        min-height: 21px;
        padding: 4px 6px;
        border: 1px solid rgba(255, 255, 255, 0.24);
        border-radius: 999px;
        color: #fff;
        background: rgba(24, 10, 16, 0.52);
        font-size: 8px;
        font-weight: 900;
        backdrop-filter: blur(8px);
      }
      .pill.liked {
        background: rgba(255, 66, 138, 0.94);
      }
      .time-pill {
        max-width: 82px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .card-caption {
        position: absolute;
        z-index: 3;
        left: 7px;
        right: 7px;
        bottom: 7px;
        padding: 7px 9px;
        border-radius: 999px;
        color: #fff;
        background: linear-gradient(135deg, var(--pink), var(--pink2));
        font-size: 8px;
        font-weight: 850;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
      }

      /* Hero + stats */
      .hero {
        margin-top: 14px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
      }
      .hero-main {
        min-height: 180px;
        padding: 21px;
        border-radius: 28px;
      }
      .eyebrow {
        display: inline-flex;
        padding: 7px 10px;
        border-radius: 999px;
        color: var(--pink);
        background: rgba(255, 95, 158, 0.1);
        font-size: 10px;
        font-weight: 900;
      }
      .hero-main h2 {
        margin: 16px 0 7px;
        font-size: clamp(26px, 7vw, 46px);
        line-height: 1.03;
        letter-spacing: -0.04em;
      }
      .hero-main p {
        margin: 0;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.55;
      }
      .role-chip {
        margin-top: 16px;
        color: var(--muted);
        font-size: 11px;
      }
      .role-chip b {
        color: var(--text);
      }
      .stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 9px;
      }
      .stat {
        min-width: 0;
        padding: 14px 10px;
        border-radius: 19px;
        text-align: center;
      }
      .stat strong {
        display: block;
        font-size: 22px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .stat small {
        display: block;
        margin-top: 3px;
        color: var(--muted);
        font-size: 9px;
      }

      /* Timeline */
      .timeline-card {
        padding: 11px;
        border-radius: 27px;
        overflow: hidden;
        touch-action: pan-y;
        -webkit-user-select: none;
        user-select: none;
      }
      .timeline-toolbar {
        margin-bottom: 8px;
        padding: 3px 2px 8px;
        border-bottom: 1px solid var(--line);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }
      .timeline-info b {
        display: block;
        font-size: 13px;
      }
      .timeline-info small {
        display: block;
        margin-top: 3px;
        color: var(--muted);
        font-size: 9px;
      }
      .year-display {
        min-width: 70px;
        height: 38px;
        padding: 0 14px;
        border: 1px solid rgba(255, 95, 158, 0.28);
        border-radius: 12px;
        background: var(--solid);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--text);
        cursor: pointer;
        user-select: none;
        font-size: 13px;
        font-weight: 950;
        line-height: 1;
        box-shadow: 0 4px 14px rgba(255, 61, 137, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.4);
        transition:
          transform 0.18s ease,
          border-color 0.18s ease,
          background 0.18s ease,
          box-shadow 0.18s ease;
      }
      .year-display:hover {
        border-color: var(--pink);
        background: rgba(255, 95, 158, 0.14);
        box-shadow: 0 6px 20px rgba(255, 61, 137, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.6);
        transform: translateY(-1px);
      }
      .year-display:active {
        transform: scale(0.96);
        box-shadow: 0 2px 8px rgba(255, 61, 137, 0.18);
      }
      .year-display:focus-visible {
        outline: 3px solid rgba(255, 95, 158, 0.28);
        outline-offset: 2px;
      }
      .year-display strong {
        display: block;
        font-size: 13px;
        font-weight: 950;
        line-height: 1;
      }
      .month-nav {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr) 34px;
        align-items: center;
        gap: 6px;
      }
      .month-arrow {
        width: 34px;
        height: 38px;
        border: 1px solid var(--line);
        border-radius: 12px;
        color: var(--muted);
        background: var(--solid);
        font-size: 18px;
        font-weight: 900;
      }
      .month-tabs {
        display: flex;
        gap: 7px;
        overflow-x: auto;
        padding: 8px 10px 14px;
        margin-bottom: -6px;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        touch-action: pan-x;
        cursor: grab;
      }
      .month-tabs:active {
        cursor: grabbing;
      }
      .month-tabs::-webkit-scrollbar {
        display: none;
      }
      .month-tab {
        position: relative;
        min-width: 69px;
        height: 41px;
        padding: 0 9px;
        flex: 0 0 auto;
        border: 1px solid var(--line);
        border-radius: 14px;
        color: var(--muted);
        background: var(--solid);
        font-size: 10px;
        font-weight: 850;
        scroll-snap-align: center;
        transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
      }
      .month-tab.active {
        color: #fff;
        border-color: transparent;
        background: linear-gradient(135deg, var(--pink), var(--pink2));
        box-shadow: 0 3px 10px rgba(255, 61, 137, 0.22), 0 0 6px rgba(255, 95, 158, 0.14);
        transform: translateY(-2px);
      }
      .month-tab.has:after {
        content: "";
        position: absolute;
        top: 6px;
        right: 6px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--pink);
      }
      .month-tab.active.has:after {
        background: #fff;
      }
      .month-progress {
        margin: 3px 2px 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: var(--muted);
        font-size: 9px;
        font-weight: 800;
      }
      .dots {
        display: flex;
        gap: 3px;
      }
      .dot {
        width: 4px;
        height: 4px;
        border-radius: 999px;
        background: rgba(159, 112, 132, 0.3);
      }
      .dot.active {
        width: 15px;
        background: var(--pink);
      }
      .month-stage {
        will-change: transform, opacity;
        transition: transform 220ms cubic-bezier(.22,.8,.24,1), opacity 180ms ease;
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
        min-height: 285px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.48);
        border-radius: 22px;
        background: linear-gradient(
          145deg,
          rgba(255, 216, 231, 0.52),
          rgba(255, 151, 190, 0.13)
        );
        -webkit-user-select: none;
        user-select: none;
      }
      .month-stage img {
        -webkit-user-drag: none;
        user-drag: none;
        pointer-events: auto;
      }
      .month-stage.swipe-next {
        animation: monthSwipeNext 0.22s ease;
      }
      .month-stage.swipe-prev {
        animation: monthSwipePrev 0.22s ease;
      }
      @keyframes monthSwipeNext {
        from {
          opacity: 0.45;
          transform: translateX(18px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      @keyframes monthSwipePrev {
        from {
          opacity: 0.45;
          transform: translateX(-18px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      .month-shell {
        padding: 12px;
      }
      .month-head {
        margin-bottom: 11px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .month-head small {
        display: block;
        color: var(--pink);
        font-size: 8px;
        font-weight: 900;
        text-transform: uppercase;
      }
      .month-head h3 {
        margin: 3px 0 0;
        font-size: 18px;
      }
      .count {
        padding: 7px 9px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--solid);
        color: var(--muted);
        font-size: 9px;
        font-weight: 850;
      }
      .month-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
      }
      .memory,
      .add-memory {
        position: relative;
        aspect-ratio: 1;
        overflow: hidden;
        border-radius: 16px;
      }
      .memory {
        isolation: isolate;
        background: var(--soft);
        border: 1px solid rgba(255, 255, 255, 0.52);
      }
      .memory > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .memory:after {
        content: "";
        position: absolute;
        z-index: 1;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(
          to bottom,
          transparent 45%,
          rgba(20, 6, 13, 0.67)
        );
      }
      .memory-num {
        position: absolute;
        z-index: 3;
        top: 7px;
        left: 7px;
        min-width: 23px;
        height: 23px;
        padding: 0 6px;
        border-radius: 999px;
        background: rgba(25, 8, 16, 0.45);
        color: #fff;
        display: grid;
        place-items: center;
        font-size: 7px;
        font-weight: 900;
      }
      .memory-edit {
        position: absolute;
        z-index: 4;
        top: 7px;
        right: 7px;
        width: 28px;
        height: 28px;
        padding: 0;
        border: 0;
        border-radius: 9px;
        background: rgba(255, 255, 255, 0.92);
        color: #64283f;
      }
      .memory-caption {
        position: absolute;
        z-index: 3;
        left: 7px;
        right: 7px;
        bottom: 7px;
        padding: 6px 8px;
        border-radius: 10px;
        color: #fff;
        background: rgba(25, 8, 16, 0.43);
        font-size: 8px;
        font-weight: 800;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .add-memory {
        border: 1.5px dashed rgba(255, 95, 158, 0.38);
        background: linear-gradient(
          145deg,
          rgba(255, 255, 255, 0.7),
          rgba(255, 217, 232, 0.58)
        );
        color: var(--pink);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 7px;
      }
      .add-memory span {
        width: 44px;
        height: 44px;
        border-radius: 15px;
        display: grid;
        place-items: center;
        color: #fff;
        background: linear-gradient(135deg, var(--pink), var(--pink2));
        font-size: 25px;
      }
      .add-memory b {
        font-size: 10px;
      }
      .add-memory small {
        max-width: 110px;
        color: var(--muted);
        font-size: 8px;
        text-align: center;
      }
      .swipe {
        margin-top: 9px;
        color: var(--muted);
        font-size: 9px;
        text-align: center;
      }

      /* Minimal wheel: only wheel + X */
      .year-modal {
        padding: 16px;
      }
      .year-picker-card {
        position: relative;
        width: min(100%, 360px);
        padding: 14px;
        border-radius: 26px;
        overflow: hidden;
      }
      .year-close {
        position: absolute;
        z-index: 6;
        top: 10px;
        right: 10px;
        width: 34px;
        height: 34px;
        padding: 0;
        border: 0;
        border-radius: 12px;
        color: var(--text);
        background: var(--solid);
      }
      .year-wheel-shell {
        position: relative;
        height: 250px;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 20px;
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.5),
          rgba(255, 234, 243, 0.5)
        );
      }
      .year-wheel {
        position: absolute;
        z-index: 2;
        inset: 0;
        height: 100%;
        padding: 101px 0;
        overflow-y: auto;
        scroll-snap-type: y mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      .year-wheel::-webkit-scrollbar {
        display: none;
      }
      .year-option {
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        scroll-snap-align: center;
        scroll-snap-stop: always;
        color: var(--muted);
        font-size: 18px;
        font-weight: 750;
        opacity: 0.4;
        user-select: none;
      }
      .year-option.near {
        opacity: 0.7;
        font-size: 20px;
      }
      .year-option.selected {
        color: var(--pink);
        opacity: 1;
        font-size: 28px;
        font-weight: 950;
      }
      .year-highlight {
        position: absolute;
        z-index: 1;
        top: 50%;
        left: 13px;
        right: 13px;
        height: 48px;
        transform: translateY(-50%);
        border: 1px solid rgba(255, 95, 158, 0.2);
        border-radius: 14px;
        background: rgba(255, 95, 158, 0.08);
      }
      .year-fade {
        position: absolute;
        z-index: 3;
        left: 0;
        right: 0;
        height: 86px;
        pointer-events: none;
      }
      .year-fade.top {
        top: 0;
        background: linear-gradient(to bottom, var(--solid), transparent);
      }
      .year-fade.bottom {
        bottom: 0;
        background: linear-gradient(to top, var(--solid), transparent);
      }

      /* More */
      .tools {
        display: grid;
        grid-template-columns: 1fr;
        gap: 11px;
      }
      .tool {
        padding: 15px;
        border-radius: 21px;
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .tool-icon {
        width: 44px;
        height: 44px;
        flex: 0 0 auto;
        border-radius: 15px;
        display: grid;
        place-items: center;
        color: var(--pink);
        background: var(--soft);
        font-size: 19px;
      }
      .tool-copy {
        min-width: 0;
        flex: 1;
      }
      .tool-copy b {
        font-size: 12px;
      }
      .tool-copy p {
        margin: 3px 0 0;
        color: var(--muted);
        font-size: 10px;
      }
      .tiny {
        width: 34px;
        height: 34px;
        padding: 0;
        border: 0;
        border-radius: 11px;
        color: var(--text);
        background: var(--solid);
      }
      .switch {
        position: relative;
        width: 44px;
        height: 25px;
        border: 0;
        border-radius: 999px;
        background: rgba(154, 106, 127, 0.25);
      }
      .switch:after {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        width: 19px;
        height: 19px;
        border-radius: 50%;
        background: #fff;
        transition: 0.2s;
      }
      .switch.on {
        background: var(--pink);
      }
      .switch.on:after {
        left: 22px;
      }
      .request-list {
        display: grid;
        gap: 8px;
      }
      .request-item {
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.28);
      }
      .request-item b {
        font-size: 11px;
      }
      .request-item p {
        margin: 3px 0;
        color: var(--muted);
        font-size: 10px;
      }
      .request-item small {
        color: var(--muted);
        font-size: 8px;
      }

      /* Nav + modals */
      .bottom-nav {
        position: fixed;
        z-index: 40;
        left: 50%;
        bottom: max(11px, env(safe-area-inset-bottom));
        width: min(calc(100% - 22px), 540px);
        height: var(--nav);
        padding: 8px;
        border-radius: 25px;
        transform: translateX(-50%);
        display: grid;
        grid-template-columns: repeat(4, 1fr);
      }
      .nav-btn {
        border: 0;
        border-radius: 19px;
        color: var(--muted);
        background: transparent;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        font-size: 10px;
        font-weight: 850;
      }
      .nav-btn span {
        font-size: 19px;
      }
      .nav-btn.active {
        color: var(--pink);
        background: rgba(255, 95, 158, 0.1);
      }
      .modal {
        position: fixed;
        z-index: 100;
        inset: 0;
        padding: 16px;
        display: none;
        align-items: center;
        justify-content: center;
        background: rgba(43, 13, 28, 0.46);
      }
      .modal.open {
        display: flex;
      }
      .modal-card {
        width: min(100%, 520px);
        max-height: calc(100dvh - 32px);
        padding: 17px;
        overflow: auto;
        border-radius: 27px;
      }
      .modal-card.wide {
        width: min(100%, 760px);
      }
      .modal-head {
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }
      .modal-head h3 {
        margin: 0;
        font-size: 19px;
      }
      .modal-sub {
        margin-top: 2px;
        color: var(--muted);
        font-size: 10px;
      }
      .modal-head-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 0 0 auto;
      }
      .close,
      .delete-photo-button {
        width: 36px;
        height: 36px;
        padding: 0;
        border: 0;
        border-radius: 12px;
      }
      .close {
        color: var(--text);
        background: var(--solid);
      }
      .delete-photo-button {
        color: #fff;
        background: linear-gradient(135deg, #ff7188, #ff4267);
        box-shadow: 0 7px 16px rgba(255, 66, 103, 0.22);
      }
      .delete-photo-button .ui-filled-icon {
        color: #fff;
        fill: currentColor;
        opacity: 1;
      }
      .modal-actions {
        margin-top: 11px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 9px;
      }
      .modal-actions.three-actions {
        grid-template-columns: 0.82fr 1fr 1.15fr;
      }
      .save-only-button {
        color: var(--pink);
        background: var(--solid);
        border: 1px solid rgba(255, 95, 158, 0.28);
      }
      .detail-save-button {
        width: 100%;
        margin-top: 10px;
      }
      .photo-modal-actions {
        gap: 7px;
      }
      .photo-head-action {
        width: 36px;
        height: 36px;
        padding: 0;
        border: 1px solid var(--line);
        border-radius: 12px;
        display: inline-grid;
        place-items: center;
        transition: transform .16s ease, filter .16s ease, background .16s ease, border-color .16s ease;
      }
      .photo-head-action .ui-filled-icon {
        width: 18px;
        height: 18px;
        margin: 0;
      }
      .photo-download-button {
        color: var(--pink);
        background: rgba(255,95,158,.09);
        border-color: rgba(255,95,158,.18);
      }
      .photo-download-button:hover {
        background: rgba(255,95,158,.15);
        border-color: rgba(255,95,158,.28);
      }
      .photo-modal-actions .delete-photo-button {
        background: rgba(255,66,103,.12);
        color: #ff476d;
        border-color: rgba(255,66,103,.22);
        box-shadow: none;
      }
      .photo-modal-actions .delete-photo-button .ui-filled-icon {
        color: currentColor;
      }
      .photo-modal-actions .close {
        color: var(--text-soft);
        background: var(--solid);
      }
      .photo-head-action:hover {
        transform: translateY(-1px);
        filter: brightness(1.03);
      }
      .photo-head-action:active {
        transform: scale(.94);
      }
      body.dark .photo-download-button {
        background: rgba(255,95,158,.14);
        border-color: rgba(255,255,255,.08);
      }
      body.dark .photo-modal-actions .delete-photo-button {
        background: rgba(255,71,109,.14);
        border-color: rgba(255,71,109,.2);
      }
      @media (max-width: 430px) {
        .photo-modal-actions { gap: 6px; }
        .photo-head-action { width: 34px; height: 34px; border-radius: 11px; }
        .photo-head-action .ui-filled-icon { width: 17px; height: 17px; }
      }
      @media (max-width: 430px) {
        .music-control {
          width: 33px;
          min-width: 33px;
          height: 33px;
        }
        .music-track {
          height: 33px;
          padding-inline: 8px;
          gap: 8px;
        }
        .music-track-copy {
          min-width: 54px;
          max-width: 66px;
        }
        .music-track-copy small {
          display: block;
          margin-top: 2px;
          font-size: 7px;
        }
        .music-equalizer {
          gap: 1.5px;
        }
        .modal-actions.three-actions {
          grid-template-columns: 1fr 1fr;
        }
        .modal-actions.three-actions .save-only-button {
          grid-column: 1 / -1;
          grid-row: 1;
        }
      }
      .preview,
      .detail-photo,
      .month-view-photo {
        position: relative;
        width: 100%;
        overflow: hidden;
        border-radius: 21px;
        background: var(--soft);
      }
      .preview {
        aspect-ratio: 1 / 1;
      }
      .preview img,
      .detail-photo img {
        width: 100%;
        max-height: 430px;
        object-fit: cover;
      }
      .preview img {
        height: 100%;
        max-height: none;
      }
      .month-view-photo img {
        width: 100%;
        max-height: 510px;
        object-fit: contain;
      }
      .preview-caption,
      .detail-caption {
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: 10px;
        display: flex;
        justify-content: center;
      }
      .preview-caption span,
      .detail-caption span {
        max-width: 95%;
        padding: 7px 11px;
        border-radius: 999px;
        color: #fff;
        background: linear-gradient(135deg, var(--pink), var(--pink2));
        font-size: 11px;
        font-weight: 850;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .detail-top {
        position: absolute;
        top: 9px;
        left: 9px;
        right: 9px;
        display: flex;
        justify-content: space-between;
      }
      .detail-like,
      .detail-time {
        padding: 7px 9px;
        border: 1px solid rgba(255, 255, 255, 0.25);
        border-radius: 999px;
        color: #fff;
        background: rgba(23, 8, 15, 0.5);
        font-size: 9px;
        font-weight: 850;
      }
      .detail-like.liked {
        background: rgba(255, 68, 139, 0.95);
      }
      .comments {
        margin-top: 12px;
      }
      .comment-list {
        max-height: 220px;
        overflow: auto;
        display: grid;
        gap: 11px;
        padding: 2px 2px 2px 0;
      }
      .comment {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 8px;
        align-items: start;
      }
      .comment-avatar {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        display: block;
        flex: 0 0 auto;
        object-fit: cover;
        object-position: center;
        background: linear-gradient(135deg, var(--pink), var(--pink2));
        border: 2px solid rgba(255,255,255,.78);
        box-shadow: 0 4px 12px rgba(255,95,158,.22);
      }
      body.dark .comment-avatar {
        border-color: rgba(255,255,255,.22);
        box-shadow: 0 4px 14px rgba(0,0,0,.28), 0 0 0 1px rgba(255,95,158,.14);
      }
      .comment-main { min-width: 0; }
      .comment-bubble {
        width: fit-content;
        max-width: 100%;
        padding: 8px 11px 9px;
        border-radius: 16px;
        background: rgba(255, 255, 255, .48);
        box-shadow: inset 0 0 0 1px rgba(var(--pink-rgb), .05);
      }
      body.dark .comment-bubble {
        background: rgba(255, 255, 255, .07);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
      }
      .comment-head {
        display: flex;
        align-items: center;
        gap: 5px;
        min-width: 0;
        line-height: 1.25;
      }
      .comment b {
        color: var(--text);
        font-size: 10px;
        white-space: nowrap;
      }
      .comment-separator {
        color: var(--muted);
        font-size: 8px;
        line-height: 1;
      }
      .comment-time {
        color: var(--muted);
        font-size: 8px;
        font-weight: 700;
        white-space: nowrap;
      }
      .comment p {
        margin: 3px 0 0;
        color: var(--text);
        font-size: 10px;
        line-height: 1.42;
        overflow-wrap: anywhere;
      }
      .comment-list .empty {
        padding: 16px 12px;
        border: 0;
        background: transparent;
        text-align: center;
      }
      .comment-form {
        margin-top: 10px;
        display: grid;
        grid-template-columns: 1fr 42px;
        gap: 7px;
        align-items: center;
      }
      .comment-form .input {
        min-height: 42px;
        border-radius: 21px;
        padding-inline: 14px;
        background: rgba(255,255,255,.7);
      }
      body.dark .comment-form .input { background: rgba(255,255,255,.08); }
      .send {
        width: 42px;
        height: 42px;
        border: 0;
        border-radius: 50%;
        color: #fff;
        background: linear-gradient(135deg, var(--pink), var(--pink2));
        box-shadow: 0 5px 13px rgba(var(--pink-rgb), .2);
        transition: transform .16s ease, box-shadow .16s ease;
      }
      .send:hover { transform: translateY(-1px); box-shadow: 0 7px 16px rgba(var(--pink-rgb), .26); }
      .send:active { transform: scale(.96); }
      .history-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }
      .month-caption {
        margin-top: 10px;
        padding: 11px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: var(--solid);
        font-size: 11px;
      }
      .month-time {
        margin-top: 6px;
        color: var(--muted);
        font-size: 8px;
      }
      .editor-preview {
        position: relative;
        width: 100%;
        aspect-ratio: 1;
        padding: 0;
        overflow: hidden;
        border: 1.5px dashed rgba(255, 95, 158, 0.32);
        border-radius: 21px;
        background: linear-gradient(
          145deg,
          rgba(255, 216, 231, 0.7),
          rgba(255, 151, 190, 0.18)
        );
        cursor: pointer;
        touch-action: manipulation;
        -webkit-user-select: none;
        user-select: none;
      }
      .editor-preview:focus-visible {
        outline: 3px solid rgba(255, 95, 158, 0.2);
        outline-offset: 3px;
      }
      .editor-preview.is-cropping {
        border-style: solid;
        border-color: rgba(255, 255, 255, 0.52);
        background: #180d13;
        cursor: grab;
        touch-action: none;
      }
      .editor-preview.is-dragging {
        cursor: grabbing;
      }
      .editor-preview canvas {
        width: 100%;
        height: 100%;
        display: block;
      }
      .editor-empty {
        position: absolute;
        inset: 0;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: var(--muted);
        font-size: 10px;
        pointer-events: none;
      }
      .editor-empty span {
        width: 55px;
        height: 55px;
        margin-bottom: 10px;
        border-radius: 18px;
        display: grid;
        place-items: center;
        color: #fff;
        background: linear-gradient(135deg, var(--pink), var(--pink2));
        font-size: 28px;
      }
      .crop-grid,
      .crop-outline {
        position: absolute;
        inset: 0;
        pointer-events: none;
      }
      .crop-grid {
        z-index: 2;
        opacity: 0.34;
        background-image:
          linear-gradient(
            to right,
            transparent 33.15%,
            rgba(255, 255, 255, 0.74) 33.33%,
            rgba(255, 255, 255, 0.74) 33.55%,
            transparent 33.72%,
            transparent 66.48%,
            rgba(255, 255, 255, 0.74) 66.66%,
            rgba(255, 255, 255, 0.74) 66.88%,
            transparent 67.05%
          ),
          linear-gradient(
            to bottom,
            transparent 33.15%,
            rgba(255, 255, 255, 0.74) 33.33%,
            rgba(255, 255, 255, 0.74) 33.55%,
            transparent 33.72%,
            transparent 66.48%,
            rgba(255, 255, 255, 0.74) 66.66%,
            rgba(255, 255, 255, 0.74) 66.88%,
            transparent 67.05%
          );
      }
      .crop-outline {
        z-index: 3;
        border-radius: 20px;
        box-shadow:
          inset 0 0 0 2px rgba(255, 255, 255, 0.78),
          inset 0 0 34px rgba(0, 0, 0, 0.2);
      }
      .crop-tools {
        position: absolute;
        z-index: 5;
        top: 10px;
        right: 10px;
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .crop-tool {
        min-height: 31px;
        padding: 7px 10px;
        border: 1px solid rgba(255, 255, 255, 0.34);
        border-radius: 999px;
        color: #fff;
        background: rgba(29, 11, 20, 0.58);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        font-size: 9px;
        font-weight: 850;
      }
      .crop-hint {
        position: absolute;
        z-index: 4;
        left: 50%;
        bottom: 10px;
        max-width: calc(100% - 28px);
        padding: 7px 10px;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 999px;
        color: #fff;
        background: rgba(29, 11, 20, 0.55);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        font-size: 8px;
        font-weight: 800;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transform: translateX(-50%);
        pointer-events: none;
      }
      .preset-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
      }
      .preset {
        padding: 11px;
        border: 1px solid var(--line);
        border-radius: 14px;
        color: var(--text);
        background: var(--solid);
        font-size: 11px;
        font-weight: 850;
        text-align: left;
      }
      .preset.selected {
        color: var(--pink);
        border-color: var(--pink);
        background: rgba(255, 95, 158, 0.1);
      }
      .pin-screen {
        position: fixed;
        z-index: 200;
        inset: 0;
        padding: 17px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        background-color: #ff5ea5;
        background-image:
          linear-gradient(rgba(255, 255, 255, 0.13) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.13) 1px, transparent 1px),
          radial-gradient(circle at 14% 14%, rgba(255,255,255,.28), transparent 27%),
          radial-gradient(circle at 86% 82%, rgba(207,99,255,.34), transparent 31%),
          linear-gradient(135deg, #ff3f93 0%, #ff5ea5 34%, #ff86c1 68%, #cf63ff 100%);
        background-size: 42px 42px, 42px 42px, auto, auto, cover;
        background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
      }
      .pin-screen::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(57,10,40,.12));
      }
      .pin-card {
        position: relative;
        z-index: 1;
        width: min(100%, 400px);
        padding: 24px;
        border-radius: 30px;
        text-align: center;
        border-color: rgba(255,255,255,.52);
        background: rgba(255,255,255,.76);
        box-shadow: 0 24px 60px rgba(92,22,69,.24), inset 0 1px 0 rgba(255,255,255,.72);
      }
      body.dark .pin-card {
        background: rgba(46,25,37,.78);
        border-color: rgba(255,255,255,.14);
      }
      .pin-logo {
        width: 70px;
        height: 70px;
        margin: 0 auto 14px;
        border-radius: 24px;
        display: grid;
        place-items: center;
        color: #fff;
        background: linear-gradient(135deg, var(--pink), var(--pink2));
        font-size: 32px;
      }
      .pin-card h1 {
        margin: 0;
        font-size: 26px;
      }
      .pin-card p {
        margin: 7px 0 16px;
        color: var(--muted);
        font-size: 12px;
      }
      .pin-input {
        width: 100%;
        height: 60px;
        padding-left: 0.34em;
        border: 1px solid var(--line);
        border-radius: 19px;
        outline: 0;
        color: var(--text);
        background: var(--solid);
        font-size: 27px;
        font-weight: 900;
        letter-spacing: 0.34em;
        text-align: center;
      }
      .pin-error {
        min-height: 17px;
        margin-top: 7px;
        color: #ff526f;
        font-size: 10px;
      }
      .pin-hint {
        margin-top: 11px;
        color: var(--muted);
        font-size: 10px;
      }
      .pin-card h1 {
        color: #ff4f9a;
        background-image: linear-gradient(135deg, #ff3f93 0%, #ff5ea5 38%, #ff86c1 70%, #cf63ff 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 950;
        letter-spacing: -.035em;
      }
      .pin-code-wrap {
        position: relative;
        width: min(100%, 286px);
        height: 62px;
        margin: 18px auto 0;
      }
      .pin-code-boxes {
        position: absolute;
        inset: 0;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        pointer-events: none;
      }
      .pin-code-box {
        position: relative;
        border: 1px solid rgba(255,255,255,.52);
        border-radius: 18px;
        background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,255,255,.34));
        box-shadow: inset 0 1px 0 rgba(255,255,255,.76), 0 9px 22px rgba(92,22,69,.09);
        backdrop-filter: blur(16px) saturate(140%);
        -webkit-backdrop-filter: blur(16px) saturate(140%);
        transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
      }
      .pin-code-box.filled::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: linear-gradient(135deg, #ff5f9e, #cf63ff);
        box-shadow: 0 0 0 5px rgba(255,95,158,.10), 0 4px 12px rgba(255,61,137,.24);
        transform: translate(-50%,-50%) scale(1);
        animation: pinDotIn .2s cubic-bezier(.2,.85,.25,1.2) both;
      }
      .pin-code-wrap:focus-within .pin-code-box.active {
        border-color: rgba(255,95,158,.58);
        box-shadow: 0 0 0 4px rgba(255,95,158,.11), inset 0 1px 0 rgba(255,255,255,.82), 0 10px 24px rgba(92,22,69,.12);
        transform: translateY(-1px);
      }
      .pin-input-overlay {
        position: absolute;
        inset: 0;
        z-index: 2;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        outline: 0;
        opacity: 0;
        color: transparent;
        background: transparent;
        caret-color: transparent;
        letter-spacing: 0;
      }
      .pin-unlock-btn {
        width: auto;
        min-width: 128px;
        min-height: 42px;
        margin-inline: auto;
        padding: 9px 18px;
        border-radius: 14px;
        font-size: 11px;
        box-shadow: 0 9px 22px rgba(255,61,137,.22);
      }
      body.dark .pin-code-box {
        border-color: rgba(255,255,255,.12);
        background: linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.045));
        box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.16);
      }
      @keyframes pinDotIn {
        from { opacity: 0; transform: translate(-50%,-50%) scale(.55); }
        to { opacity: 1; transform: translate(-50%,-50%) scale(1); }
      }
      @media (max-width: 430px) {
        .pin-card { padding: 22px 18px; }
        .pin-code-wrap { width: min(100%, 252px); height: 58px; }
        .pin-code-boxes { gap: 8px; }
        .pin-code-box { border-radius: 16px; }
      }
      /* Màn hình chuyển tiếp sau khi đăng nhập — chữ đánh máy tối giản. */
      .memory-loading-screen {
        position: fixed;
        z-index: 230;
        inset: 0;
        display: none;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        background-color: #ff5ea5;
        background-image:
          linear-gradient(rgba(255,255,255,.13) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255,255,255,.13) 1px, transparent 1px),
          radial-gradient(circle at 14% 14%, rgba(255,255,255,.28), transparent 27%),
          radial-gradient(circle at 86% 82%, rgba(207,99,255,.34), transparent 31%),
          linear-gradient(135deg, #ff3f93 0%, #ff5ea5 34%, #ff86c1 68%, #cf63ff 100%);
        background-size: 42px 42px, 42px 42px, auto, auto, cover;
      }
      .memory-loading-screen.show { display: flex; }
      .memory-loading-screen::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(57,10,40,.14));
        pointer-events: none;
      }
      .memory-loading-content {
        position: relative;
        z-index: 2;
        width: min(88vw, 620px);
        display: grid;
        justify-items: center;
        gap: 18px;
        color: #fff;
        text-align: center;
      }
      .memory-loading-title {
        margin: 0;
        min-height: 1.25em;
        color: #fff;
        font-size: clamp(27px, 6vw, 48px);
        font-weight: 950;
        line-height: 1.15;
        letter-spacing: -.04em;
        text-shadow: 0 4px 22px rgba(91,20,68,.25);
      }
      .memory-loading-caret {
        display: inline-block;
        width: 3px;
        height: .9em;
        margin-left: 5px;
        border-radius: 999px;
        background: rgba(255,255,255,.92);
        vertical-align: -.07em;
        animation: memoryCaretBlink .72s steps(1,end) infinite;
      }
      @keyframes memoryCaretBlink { 50% { opacity: 0; } }
      .memory-loading-orbit {
        position: absolute;
        inset: 0;
        z-index: 1;
        overflow: hidden;
        pointer-events: none;
      }
      .memory-loading-word {
        position: absolute;
        left: var(--x);
        top: var(--y);
        color: rgba(255,255,255,var(--alpha));
        font-size: var(--size);
        font-weight: 900;
        letter-spacing: -.02em;
        white-space: nowrap;
        filter: blur(var(--blur));
        transform: translate(-50%,-50%) rotate(var(--rotate));
        animation: memoryWordFloat var(--duration) ease-in-out infinite alternate;
        animation-delay: var(--delay);
      }
      @keyframes memoryWordFloat {
        from { opacity: .24; transform: translate(-50%,-50%) rotate(var(--rotate)) translateY(8px) scale(.96); }
        to { opacity: .8; transform: translate(-50%,-50%) rotate(var(--rotate)) translateY(-10px) scale(1.04); }
      }
      .memory-loading-screen.leaving {
        animation: memoryScreenLeave .38s ease both;
      }
      @keyframes memoryScreenLeave {
        to { opacity: 0; transform: scale(1.015); filter: blur(4px); }
      }
      @media (prefers-reduced-motion: reduce) {
        .memory-loading-word,
        .memory-loading-caret { animation: none; }
      }

      .toast {
        position: fixed;
        z-index: 300;
        top: 20px;
        left: 50%;
        max-width: calc(100vw - 30px);
        padding: 10px 13px;
        border-radius: 13px;
        color: #fff;
        background: rgba(48, 17, 32, 0.92);
        font-size: 11px;
        font-weight: 800;
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, -18px);
        transition: 0.22s;
      }
      .toast.show {
        opacity: 1;
        transform: translate(-50%, 0);
      }
      @media (max-width: 390px) {
        .bottom-nav {
          padding-inline: 6px;
        }

        .nav-btn {
          gap: 2px;
          font-size: 9px;
        }

        .nav-btn span {
          font-size: 18px;
        }
      }

      @media (min-width: 720px) {
        .shell {
          /* Desktop vẫn phải chừa khoảng trống cho topbar fixed. */
          padding: 79px 22px 116px;
        }
        .photo-grid {
          grid-template-columns: repeat(4, minmax(0, 1fr));
        }
        .hero {
          grid-template-columns: 1.45fr 0.85fr;
        }
        .stats {
          grid-template-columns: 1fr;
        }
        .stat {
          display: flex;
          align-items: center;
          justify-content: space-between;
          text-align: left;
          padding: 15px 17px;
        }
        .tools {
          grid-template-columns: repeat(2, 1fr);
        }
        .month-grid {
          max-width: 760px;
          margin: auto;
        }
        .history-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        .modal,
        .year-modal {
          align-items: center;
        }
      }
      @media (min-width: 900px) {
        .camera-card {
          display: grid;
          grid-template-columns: minmax(340px, 0.78fr) minmax(460px, 1fr);
          align-items: start;
          gap: 16px;
          padding: 14px;
        }
        .lockluv-camera-column {
          min-width: 0;
        }
        .camera-frame {
          min-height: 0;
          width: 100%;
          aspect-ratio: 1 / 1;
        }
        .upload-row {
          margin-top: 10px;
        }
        .lockluv-recent-column {
          min-width: 0;
          margin-top: 0;
          padding-top: 0;
          border-top: 0;
          display: flex;
          flex-direction: column;
        }
        .lockluv-recent-column .recent-head {
          min-height: 38px;
          margin: 0 0 10px;
          padding: 0 2px 9px;
          border-bottom: 1px solid var(--line);
        }
        .lockluv-recent-column .photo-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          align-content: start;
          gap: 10px;
        }
        .lockluv-recent-column .photo-card {
          border-radius: 18px;
        }
        .lockluv-recent-column .recent-empty {
          min-height: 100%;
          aspect-ratio: auto;
          display: grid;
          place-items: center;
        }
      }
      @media (min-width: 1100px) {
        .camera-card {
          grid-template-columns: minmax(360px, 0.8fr) minmax(500px, 1fr);
          gap: 18px;
        }
      }


      /* LockLuv: 1 ảnh chính + lưới 4 ảnh phụ */
      .lockluv-gallery-head {
        margin: 0 0 11px;
        padding: 0 2px 10px;
        border-bottom: 1px solid var(--line);
      }
      .lockluv-gallery-layout {
        display: grid;
        gap: 10px;
        min-width: 0;
      }
      .lockluv-gallery-layout > * {
        min-width: 0;
      }

      @media (max-width: 899px) {
        .lockluv-gallery-layout {
          grid-template-columns: 1fr;
        }
        .lockluv-gallery-layout .lockluv-recent-column {
          margin-top: 4px;
        }
      }

      @media (min-width: 900px) {
        .camera-card {
          display: block;
          padding: 14px;
        }
        .lockluv-gallery-layout {
          grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
          aspect-ratio: 2.18 / 1;
          align-items: stretch;
        }
        .lockluv-camera-column,
        .lockluv-recent-column,
        .lockluv-recent-column .photo-grid {
          height: 100%;
          min-height: 0;
        }
        .lockluv-camera-column {
          display: flex;
          flex-direction: column;
        }
        .lockluv-camera-column .camera-frame {
          flex: 1 1 auto;
          height: 100%;
          aspect-ratio: auto;
          min-height: 0;
        }
        .lockluv-recent-column {
          margin: 0;
          padding: 0;
          border: 0;
        }
        .lockluv-recent-column .photo-grid {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          grid-template-rows: repeat(2, minmax(0, 1fr));
          gap: 10px;
          align-content: stretch;
        }
        .lockluv-recent-column .photo-card,
        .lockluv-recent-column .recent-empty {
          width: 100%;
          height: 100%;
          min-height: 0;
          aspect-ratio: auto;
          border-radius: 18px;
        }
      }

      @media (min-width: 1100px) {
        .lockluv-gallery-layout {
          grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
          gap: 12px;
        }
      }

      /* iOS PWA: cho nền phủ vào vùng giờ, Wi‑Fi và pin */
      :root {
        --ios-status-bg: #f3a5b8;
      }

      html {
        min-height: 100%;
        background: var(--ios-status-bg);
      }

      body {
        min-height: 100%;
        margin: 0;
        padding-top: env(safe-area-inset-top, 0px);
        padding-right: env(safe-area-inset-right, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        padding-left: env(safe-area-inset-left, 0px);
        background-color: var(--ios-status-bg);
        background-attachment: fixed;
      }

      @supports (padding-top: env(safe-area-inset-top)) {
        body::before {
          content: "";
          position: fixed;
          z-index: -1;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          background: inherit;
        }
      }


      /* Trạng thái xử lý thật hơn cho nút đăng / xoá ảnh. */
      .btn.is-loading,
      .delete-photo-button.is-loading {
        position: relative;
        pointer-events: none;
        cursor: wait;
        opacity: .86;
      }

      .btn.is-loading .button-label,
      .delete-photo-button.is-loading .button-label {
        opacity: 0;
      }

      .button-spinner {
        width: 16px;
        height: 16px;
        display: inline-block;
        border-radius: 50%;
        border: 2px solid currentColor;
        border-right-color: transparent;
        vertical-align: -3px;
        animation: actionSpinner .72s linear infinite;
      }

      @keyframes actionSpinner {
        to { transform: rotate(360deg); }
      }


      /* Trạng thái xử lý trực tiếp trên topbar. */
      .topbar.action-progress .music-player-bar {
        display: flex;
      }

      .topbar.action-progress:not(.action-done) .play-control {
        background: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
        color: var(--pink) !important;
        overflow: visible;
      }

      .topbar.action-progress .play-control .topbar-action-spinner {
        width: 17px;
        height: 17px;
        display: block;
        box-sizing: border-box;
        border-radius: 50%;
        border: 2.5px solid rgba(255, 95, 158, .22);
        border-top-color: var(--pink);
        border-right-color: var(--pink);
        background: transparent !important;
        box-shadow: none !important;
        animation: actionSpinner .68s linear infinite;
      }

      .topbar-action-check {
        width: 22px;
        height: 22px;
        display: block;
        color: var(--pink);
        background: transparent !important;
        border: 0;
        border-radius: 0;
        box-shadow: none !important;
        overflow: visible;
      }

      .topbar-action-check svg {
        width: 100%;
        height: 100%;
        display: block;
        overflow: visible;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      .topbar.action-progress.action-done .play-control {
        animation: topbarDonePop .36s cubic-bezier(.2,.9,.25,1.25) both;
      }

      @keyframes topbarDonePop {
        0% { transform: scale(.78); }
        70% { transform: scale(1.12); }
        100% { transform: scale(1); }
      }

      /* Topbar action polish: glass glow, richer motion and cleaner success state. */
      .topbar.action-progress {
        box-shadow: 0 14px 34px rgba(111, 62, 126, .16), 0 2px 10px rgba(255,255,255,.34) inset;
      }

      .topbar.action-progress .music-player-bar {
        position: relative;
        overflow: hidden;
      }

      .topbar.action-progress .music-player-bar::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(105deg, transparent 18%, rgba(255,255,255,.32) 48%, transparent 78%);
        transform: translateX(-115%);
        animation: topbarActionShimmer 1.35s ease-in-out infinite;
      }

      .topbar.action-progress.action-done .music-player-bar::after {
        animation: none;
        opacity: 0;
      }

      .topbar.action-progress .music-track-copy strong,
      .topbar.action-progress .music-track-copy small {
        animation: topbarCopyIn .38s cubic-bezier(.2,.8,.2,1) both;
      }

      .topbar.action-progress.action-done .play-control {
        background: linear-gradient(135deg, #ff7cab, #ff4f8a);
        box-shadow: 0 7px 18px rgba(255,79,138,.30);
      }

      .topbar.action-progress.action-done .music-track-copy strong {
        letter-spacing: .01em;
      }

      @keyframes topbarActionShimmer {
        0% { transform: translateX(-115%); }
        58%, 100% { transform: translateX(115%); }
      }

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

      /* =========================
         TOPBAR NOTIFICATION STATE
         Notification dùng chính music-player-bar, không tạo shape riêng.
      ========================= */
      .topbar {
        transition:
          height .24s ease,
          min-height .24s ease,
          border-radius .24s ease,
          box-shadow .24s ease;
      }

      .topbar.notify-mode .topbar-normal {
        display: none;
      }

      .topbar.notify-mode .music-player-bar {
        display: flex;
        transform-origin: 50% 50%;
        will-change: transform, opacity, filter;
      }

      /* Thông báo xuất hiện/biến mất mềm hơn thay vì bật tắt đột ngột. */
      .topbar.notify-mode.notify-enter .music-player-bar {
        animation: notifyBarEnter .42s cubic-bezier(.2,.85,.25,1) both;
      }

      .topbar.notify-mode.notify-exit .music-player-bar {
        animation: notifyBarExit .32s cubic-bezier(.4,0,.2,1) both;
        pointer-events: none;
      }

      @keyframes notifyBarEnter {
        0% {
          opacity: 0;
          transform: translateY(-10px) scale(.965);
          filter: blur(5px);
        }
        65% {
          opacity: 1;
          transform: translateY(1px) scale(1.008);
          filter: blur(0);
        }
        100% {
          opacity: 1;
          transform: translateY(0) scale(1);
          filter: blur(0);
        }
      }

      @keyframes notifyBarExit {
        0% {
          opacity: 1;
          transform: translateY(0) scale(1);
          filter: blur(0);
        }
        100% {
          opacity: 0;
          transform: translateY(-7px) scale(.975);
          filter: blur(4px);
        }
      }

      /* Khi báo tin, chính các thành phần của player đổi vai trò. */
      .topbar.notify-mode .music-control:not(.play-control) {
        display: none;
      }

      .topbar.notify-mode .music-control.play-control {
        width: 35px;
        min-width: 35px;
        pointer-events: none;
      }

      .topbar.notify-mode .music-track {
        flex:1;
        max-width:none;
        background:none !important;
        border:none !important;
        box-shadow:none !important;
        padding:0 !important;
        margin:0 !important;
      }

      .topbar.notify-mode .music-track-copy {
        min-width:0;
        max-width:none;
        flex:1;
        background:none !important;
        border:none !important;
        box-shadow:none !important;
        padding:0 !important;
        margin:0 !important;
      }

      .topbar.notify-mode .music-track-copy strong {
        font-size: 10.5px;
      }

      .topbar.notify-mode .music-track-copy small {
        display: block;
        margin-top: 3px;
        font-size: 8px;
      }

      .topbar.notify-mode .music-equalizer {
        display: none;
      }

      .music-player-bar.notify-success .play-control {
        background: linear-gradient(135deg, var(--pink), var(--pink2));
      }

      .music-player-bar.notify-timeline .play-control {
        background: linear-gradient(135deg, #a879ff, #8055ee);
      }

      .music-player-bar.notify-streak .play-control {
        background: linear-gradient(135deg, #ffab61, #ff7a35);
      }

      .music-player-bar.notify-warning .play-control {
        background: linear-gradient(135deg, #ff7188, #ff4267);
      }

      @media (max-width: 430px) {
        .topbar.notify-mode .music-control.play-control {
          width: 33px;
          min-width: 33px;
        }

        .topbar.notify-mode .music-track-copy strong {
          font-size: 10px;
        }

        .topbar.notify-mode .music-track-copy small {
          font-size: 7.5px;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .topbar,
        .topbar-normal,
        .music-player-bar {
          animation-duration: .01ms !important;
          transition-duration: .01ms !important;
        }
      }


      .topbar.notify-mode .music-track,
      .topbar.notify-mode .music-track-copy,
      .topbar.notify-mode .music-track-card{
        background:transparent !important;
        border:none !important;
        box-shadow:none !important;
        backdrop-filter:none !important;
      }
.toast { display: none !important; }

/* Caption popup — bottom sheet hiện đại, tinh tế và ưu tiên mobile. */
.caption-modal {
  padding: 14px;
  background: rgba(42, 16, 29, .48);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.caption-card {
  position: relative;
  width: min(100%, 470px);
  padding: 14px;
  border-radius: 30px;
  overflow: hidden;
  background: linear-gradient(155deg, rgba(255,255,255,.94), rgba(255,244,249,.86));
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 28px 70px rgba(93, 31, 59, .28), inset 0 1px 0 rgba(255,255,255,.8);
}
body.dark .caption-card {
  background: linear-gradient(155deg, rgba(67,39,52,.96), rgba(46,25,35,.94));
}
.caption-modal.open .caption-card {
  animation: captionSheetIn .38s cubic-bezier(.2,.86,.24,1) both;
}
@keyframes captionSheetIn {
  from { opacity: 0; transform: translateY(24px) scale(.975); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.caption-drag-handle {
  display: none;
  width: 42px;
  height: 5px;
  margin: 0 auto 11px;
  border-radius: 999px;
  background: rgba(130,78,101,.2);
}
.caption-head { margin-bottom: 12px; align-items: flex-start; }
.caption-head h3 { margin-top: 3px; font-size: 21px; letter-spacing: -.035em; }
.caption-kicker {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--pink);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.caption-close {
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(255,255,255,.72);
  box-shadow: 0 7px 18px rgba(95,35,62,.10);
}
.caption-preview {
  border-radius: 24px;
  box-shadow: 0 14px 34px rgba(88,27,54,.16);
  isolation: isolate;
}
.caption-preview img { transition: transform .35s ease; }
.caption-preview-shade {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(20,5,12,.08), transparent 42%, rgba(20,5,12,.35));
}
.caption-preview .preview-caption { z-index: 3; bottom: 13px; }
.caption-preview .preview-caption span:empty { display: none; }
.caption-preview-badge {
  position: absolute;
  z-index: 3;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px;
  color: #fff;
  background: rgba(24,8,16,.34);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 9px;
  font-weight: 900;
}
.caption-field {
  position: relative;
  display: block;
  margin-top: 12px;
}
.caption-field-label {
  display: block;
  margin: 0 0 7px 3px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.caption-field .input {
  height: 52px;
  padding: 13px 58px 13px 14px;
  border-radius: 17px;
  border-color: rgba(255,95,158,.16);
  background: rgba(255,255,255,.78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 8px 20px rgba(112,48,76,.06);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
body.dark .caption-field .input { background: rgba(255,255,255,.07); }
.caption-field .input:focus {
  border-color: rgba(255,95,158,.48);
  box-shadow: 0 0 0 4px rgba(255,95,158,.10), 0 9px 22px rgba(112,48,76,.08);
}
.caption-count {
  position: absolute;
  right: 13px;
  bottom: 17px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
}
.caption-count b { color: var(--pink); }
.caption-actions {
  margin-top: 11px;
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  gap: 9px;
}
.caption-action {
  min-height: 58px;
  padding: 9px 11px;
  border-radius: 18px;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  text-align: left;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.caption-action:active { transform: scale(.975); }
.caption-action-icon {
  width: 35px;
  height: 35px;
  flex: 0 0 auto;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 950;
}
.caption-action span:last-child { min-width: 0; display: flex; flex-direction: column; }
.caption-action b { font-size: 11px; }
.caption-action small { margin-top: 3px; font-size: 8px; opacity: .74; white-space: nowrap; }
.caption-action-save {
  color: var(--text);
  background: rgba(255,255,255,.72);
  box-shadow: 0 8px 20px rgba(96,37,64,.07);
}
body.dark .caption-action-save { background: rgba(255,255,255,.07); }
.caption-action-save .caption-action-icon { color: var(--pink); background: rgba(255,95,158,.10); }
.caption-action-post {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #ff79ab, var(--pink2));
  box-shadow: 0 12px 26px rgba(255,61,137,.26);
}
.caption-action-post .caption-action-icon { background: rgba(255,255,255,.18); }
.caption-action-post:hover { filter: brightness(1.03); box-shadow: 0 15px 30px rgba(255,61,137,.32); }
.caption-cancel {
  width: 100%;
  margin-top: 8px;
  padding: 8px;
  border: 0;
  color: var(--muted);
  background: transparent;
  font-size: 10px;
  font-weight: 850;
}
@media (max-width: 719px) {
  .caption-modal {
    align-items: center;
    justify-content: center;
    padding: max(10px, env(safe-area-inset-top)) 8px max(10px, env(safe-area-inset-bottom));
  }
  .caption-card {
    width: 100%;
    max-height: calc(100dvh - max(20px, env(safe-area-inset-top)) - max(20px, env(safe-area-inset-bottom)));
    padding: 12px 12px max(12px, env(safe-area-inset-bottom));
    border-radius: 29px 29px 24px 24px;
    margin: auto 0;
  }
  .caption-drag-handle { display: block; }
  .caption-preview { max-height: min(48dvh, 430px); }
  .caption-preview img { height: 100%; object-fit: cover; }
}
@media (max-width: 370px) {
  .caption-actions { grid-template-columns: 1fr; }
  .caption-action { min-height: 52px; }
  .caption-preview { max-height: 42dvh; }
}


      /* Nhấn giữ streak: màu được nạp đầy trong chính nút như thanh tiến trình. */
      #streakTopBtn {
        --streak-hold: 0%;
        position: relative;
        isolation: isolate;
        overflow: hidden;
        touch-action: none;
        -webkit-user-select: none;
        user-select: none;
      }
      #streakTopBtn::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset: 0;
        width: var(--streak-hold);
        border-radius: inherit;
        pointer-events: none;
        background: linear-gradient(90deg, rgba(255,95,158,.28), rgba(255,95,158,.62));
        opacity: 0;
        transition: opacity .12s ease;
      }
      #streakTopBtn > * { position:relative; z-index:1; }
      #streakTopBtn .streak-fire-emoji {
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width:22px;
        height:22px;
        font-size:20px;
        line-height:1;
        flex:0 0 auto;
        filter:drop-shadow(0 1px 1px rgba(120,50,0,.16));
      }
      #streakTopBtn.streak-holding::before { opacity: 1; }
      #streakTopBtn.streak-holding { transform: scale(.98); }
      #streakTopBtn.streak-hold-done { animation: streakHoldPop .34s cubic-bezier(.2,.9,.25,1.25); }
      @keyframes streakHoldPop {
        0% { transform: scale(.94); }
        65% { transform: scale(1.08); }
        100% { transform: scale(1); }
      }
      .streak-test-card { width:min(100%,330px); padding:15px; border-radius:24px; }
      .streak-test-card .modal-head { margin-bottom:10px; }
      .streak-test-copy { color:var(--muted); font-size:10px; line-height:1.45; }
      .streak-test-field { margin-top:12px; }
      .streak-test-field label { display:block; margin:0 0 6px 3px; color:var(--muted); font-size:9px; font-weight:900; }
      .streak-test-preview { margin-top:10px; padding:10px 12px; border:1px solid var(--line); border-radius:15px; background:rgba(255,95,158,.07); display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:10px; }
      .streak-test-preview strong { color:var(--pink); font-size:18px; }
      .streak-test-actions { margin-top:11px; display:grid; grid-template-columns:.8fr 1.2fr; gap:8px; }

/* Classic streak scene */
.streak-game-stage.streak-classic-decorated { isolation:isolate; }
.streak-classic-scene-decor { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; border-radius:inherit; }
.streak-game-stage.streak-classic-decorated > .streak-celestial-body,
.streak-game-stage.streak-classic-decorated > .streak-flower-wrap,
.streak-game-stage.streak-classic-decorated > .streak-watering-can,
.streak-game-stage.streak-classic-decorated > .droplets-container,
.streak-game-stage.streak-classic-decorated > .streak-stage-header { position:absolute; z-index:3; }
.streak-game-stage.streak-classic-decorated > .streak-stage-header { z-index:5; }
.streak-classic-cloud { position:absolute; left:-100px; width:58px; height:18px; border-radius:999px; background:rgba(255,255,255,.88); box-shadow:18px -9px 0 1px rgba(255,255,255,.88), 38px 0 0 0 rgba(255,255,255,.88); filter:drop-shadow(0 5px 6px rgba(84,116,135,.12)); animation:streakClassicCloudMove linear infinite; }
.streak-classic-cloud.cloud-one { top:38px; transform:scale(.72); animation-duration:19s; }
.streak-classic-cloud.cloud-two { top:78px; transform:scale(.5); opacity:.68; animation-duration:27s; animation-delay:-9s; }
.streak-classic-cloud.cloud-three { top:20px; transform:scale(.42); opacity:.52; animation-duration:34s; animation-delay:-19s; }
@keyframes streakClassicCloudMove { from { left:-110px; } to { left:calc(100% + 80px); } }
.streak-classic-grass { position:absolute; left:-2%; right:-2%; bottom:-2px; height:44px; transform-origin:50% 100%; background-repeat:repeat-x; }
.streak-classic-grass.grass-back { opacity:.48; z-index:1; background-image:repeating-linear-gradient(78deg, transparent 0 8px, rgba(73,137,73,.7) 9px 11px, transparent 12px 18px); animation:streakClassicGrassSway 2.8s ease-in-out infinite alternate; }
.streak-classic-grass.grass-front { height:34px; opacity:.74; z-index:2; background-image:repeating-linear-gradient(102deg, transparent 0 10px, rgba(47,112,58,.82) 11px 13px, transparent 14px 20px); animation:streakClassicGrassSway 2.2s ease-in-out -.7s infinite alternate-reverse; }
@keyframes streakClassicGrassSway { from { transform:skewX(1.8deg) translateX(0); } to { transform:skewX(-1.8deg) translateX(2px); } }
body.dark .streak-classic-cloud { background:rgba(239,246,255,.56); box-shadow:18px -9px 0 1px rgba(239,246,255,.56), 38px 0 0 0 rgba(239,246,255,.56); }
@media (prefers-reduced-motion:reduce){ .streak-classic-cloud,.streak-classic-grass{animation:none!important;} .streak-classic-cloud.cloud-one{left:8%;}.streak-classic-cloud.cloud-two{left:58%;}.streak-classic-cloud.cloud-three{left:33%;} }

      .settings-logout-head {
        align-items: center;
      }
      .settings-logout-btn {
        width: auto;
        min-width: 104px;
        flex: 0 0 auto;
      }
      @media (max-width: 560px) {
        .settings-logout-head {
          flex-wrap: wrap;
        }
        .settings-logout-head .settings-section-head-copy {
          min-width: calc(100% - 58px);
        }
        .settings-logout-btn {
          width: 100%;
          margin-top: 8px;
        }
      }


      /* Photobooth */
      .photobooth-tool { cursor: pointer; }
      .photobooth-tool:active { transform: scale(.99); }
      .booth-card { width:min(100%,760px); transition:max-width .2s ease,width .2s ease; }
      .booth-card.save-mode { width:min(100%,430px); }
      .booth-step { display:none; }
      .booth-flow { display:grid; grid-template-columns:1fr 1fr 1fr; align-items:start; gap:0; margin:2px 0 16px; padding:0 4px; }
      .booth-flow-step { position:relative; display:grid; justify-items:center; gap:6px; color:var(--muted); font-size:9px; font-weight:800; text-align:center; transition:color .2s ease; }
      .booth-flow-step:not(:last-child)::after { content:""; position:absolute; z-index:0; top:13px; left:calc(50% + 18px); width:calc(100% - 36px); height:2px; border-radius:999px; background:var(--line); transition:background .2s ease; }
      .booth-flow-step.done:not(:last-child)::after { background:linear-gradient(90deg,var(--pink),#ff9fc5); }
      .booth-flow-dot { position:relative; z-index:1; width:28px; height:28px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--muted); background:var(--solid); box-shadow:0 4px 12px rgba(85,35,59,.06); font-size:10px; font-variant-numeric:tabular-nums; transition:.2s ease; }
      .booth-flow-step.active { color:var(--text); }
      .booth-flow-step.active .booth-flow-dot { color:#fff; border-color:transparent; background:linear-gradient(135deg,#ff9cc3,var(--pink)); box-shadow:0 7px 18px rgba(255,95,158,.25); transform:scale(1.06); }
      .booth-flow-step.done { color:var(--text); }
      .booth-flow-step.done .booth-flow-dot { color:var(--pink); border-color:rgba(255,95,158,.28); background:rgba(255,95,158,.1); }
      .booth-flow-step.done .booth-flow-dot::before { content:"✓"; }
      .booth-flow-step.done .booth-flow-dot span { display:none; }
      .booth-step.active { display:block; animation:fade .2s ease; }
      .booth-layout-grid,.booth-theme-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
      .booth-choice { padding:12px; border:1px solid var(--line); border-radius:18px; color:var(--text); background:var(--solid); text-align:left; }
      .booth-choice.selected { border-color:var(--pink); box-shadow:0 0 0 3px rgba(255,95,158,.11); }
      .booth-layout-preview { width:100%; margin:0 auto 9px; padding:8px; border-radius:14px; background:rgba(255,95,158,.08); display:grid; align-content:start; gap:5px; }
      .booth-layout-preview span { display:block; width:100%; border-radius:7px; background:linear-gradient(145deg,#ffd4e5,#ff8dbc); box-shadow:inset 0 0 0 1px rgba(255,255,255,.42); }
      .booth-layout-preview[data-layout="1x2"] { max-width:112px; grid-template-columns:1fr; }
      .booth-layout-preview[data-layout="1x2"] span { aspect-ratio:1/1; }
      .booth-layout-preview[data-layout="1x4"] { max-width:88px; grid-template-columns:1fr; }
      .booth-layout-preview[data-layout="1x4"] span { aspect-ratio:3/2; }
      .booth-layout-preview[data-layout="2x3"] { max-width:176px; grid-template-columns:repeat(2,1fr); }
      .booth-layout-preview[data-layout="2x3"] span { aspect-ratio:3/2; }
      .booth-layout-preview[data-layout="2x4"] { max-width:176px; grid-template-columns:repeat(2,1fr); }
      .booth-layout-preview[data-layout="2x4"] span { aspect-ratio:3/2; }
      .booth-choice b { display:block; font-size:12px; }
      .booth-choice small { display:block; margin-top:3px; color:var(--muted); font-size:9px; }
      .booth-camera-shell { position:relative; overflow:hidden; width:100%; border-radius:24px; background:#180d13; aspect-ratio:3/2; contain:layout paint; }
      .booth-camera-shell.square { aspect-ratio:1; }
      .booth-video { width:100%; height:100%; object-fit:cover; transform:scaleX(-1); }
      .booth-camera-top { position:absolute; z-index:3; top:12px; left:12px; right:12px; display:flex; align-items:center; justify-content:space-between; gap:10px; pointer-events:none; }
      .booth-camera-chip { min-height:34px; padding:7px 11px; border:1px solid rgba(255,255,255,.26); border-radius:13px; color:#fff; background:rgba(21,12,18,.34); box-shadow:0 8px 24px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.16); backdrop-filter:blur(16px) saturate(130%); -webkit-backdrop-filter:blur(16px) saturate(130%); display:inline-flex; align-items:center; gap:7px; font-size:10px; font-weight:850; letter-spacing:.02em; }
      .booth-progress-chip::before { content:""; width:6px; height:6px; border-radius:50%; background:#ff87b8; box-shadow:0 0 0 4px rgba(255,135,184,.16); }
      .booth-progress-chip, .booth-timer-pill { min-width:72px; justify-content:center; }
      .booth-timer-pill { pointer-events:auto; cursor:pointer; font:inherit; transition:transform .16s ease,background .16s ease,border-color .16s ease; }
      .booth-timer-pill::before { content:none; display:none; }
      .booth-timer-pill:hover { background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.4); }
      .booth-timer-pill:active { transform:scale(.96); }
      .booth-timer-value { min-width:22px; text-align:center; font-variant-numeric:tabular-nums; }
      .booth-camera-controls { position:absolute; z-index:4; left:50%; bottom:14px; transform:translateX(-50%); display:flex; align-items:center; gap:26px; }
      .booth-round { width:42px; height:42px; padding:0; border:0; border-radius:50%; color:var(--pink); background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,243,248,.96)); box-shadow:0 10px 24px rgba(84,35,58,.14), inset 0 1px 0 rgba(255,255,255,.95); display:grid; place-items:center; transition:transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease; }
      .booth-round svg, .booth-camera-chip svg { width:18px; height:18px; display:block; fill:currentColor; stroke:none; }
      .booth-round:first-child { margin-right:12px; }
      .booth-round:last-child { margin-left:12px; }
      .booth-round:hover { transform:translateY(-1px); box-shadow:0 12px 26px rgba(84,35,58,.18), inset 0 1px 0 rgba(255,255,255,.98); }
      .booth-round:active { transform:scale(.96); }
      .booth-round.is-active { color:#fff; background:linear-gradient(135deg,#ff8eb9,var(--pink2)); box-shadow:0 12px 26px rgba(255,95,158,.30); }
      .booth-shutter { width:58px; height:58px; padding:5px; border:3px solid #fff; border-radius:50%; background:rgba(255,255,255,.18); }
      .booth-shutter:after { content:""; display:block; width:100%; height:100%; border-radius:50%; background:linear-gradient(135deg,#ff9bc3,var(--pink)); }
      .booth-countdown { position:absolute; z-index:6; inset:0; display:none; place-items:center; color:#fff; background:rgba(22,8,15,.24); font-size:80px; font-weight:950; backdrop-filter:none; -webkit-backdrop-filter:none; }
      .booth-countdown.show { display:grid; }
      .booth-flash-layer { position:absolute; z-index:7; inset:0; pointer-events:none; opacity:0; background:#fff; }
      .booth-flash-layer.burst { animation:boothFlashBurst .34s ease; }
      @keyframes boothFlashBurst { 0%{opacity:0} 35%{opacity:.96} 100%{opacity:0} }
      .booth-timer-pill { color:#fff; background:linear-gradient(135deg,#ff8eb9,var(--pink2)); border-color:transparent; box-shadow:0 8px 18px rgba(255,95,158,.22); font-weight:900; min-height:34px; padding:7px 11px; justify-content:center; }
      .booth-timer-pill .booth-timer-value { margin-left:0; }
      body.dark .booth-round { background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,243,248,.96)); }
      @media(max-width:560px){ .booth-camera-controls { gap:22px; } .booth-round:first-child { margin-right:10px; } .booth-round:last-child { margin-left:10px; } .booth-round { width:44px; height:44px; } .booth-progress-chip, .booth-timer-pill { min-width:72px; } .booth-timer-pill { min-height:34px; padding:7px 11px; } }
      .booth-theme-card { padding:9px; border:1px solid var(--line); border-radius:18px; background:var(--solid); }
      .booth-theme-card.selected { border-color:var(--pink); box-shadow:0 0 0 3px rgba(255,95,158,.11); }
      .booth-theme-card canvas { width:100%; aspect-ratio:9/16; object-fit:cover; display:block; border-radius:16px; background:#fff; }
      .booth-theme-card b { display:block; margin-top:8px; font-size:10px; text-align:center; }
      .booth-final { width:min(72vw,250px); margin:auto; }
      .booth-final canvas { width:100%; display:block; border-radius:18px; box-shadow:0 14px 34px rgba(74,30,52,.16); background:#fff; }
      .booth-save-actions { display:flex; justify-content:center; gap:8px; margin-top:14px; }
      .booth-action-btn { min-height:38px; padding:9px 14px; border:1px solid var(--line); border-radius:13px; color:var(--text); background:var(--solid); font-size:10px; font-weight:850; box-shadow:0 6px 16px rgba(78,34,54,.06); transition:transform .16s ease,border-color .16s ease,background .16s ease; }
      .booth-action-btn:active { transform:scale(.97); }
      .booth-action-btn.primary-soft { border-color:rgba(255,95,158,.24); color:#fff; background:linear-gradient(135deg,#ff9cc3,var(--pink)); box-shadow:0 8px 20px rgba(255,95,158,.2); }
      .booth-new-btn { display:block; width:max-content; margin:9px auto 0; padding:7px 10px; border:0; color:var(--muted); background:transparent; font-size:9px; font-weight:800; }
      .booth-status { margin:10px 2px 0; color:var(--muted); font-size:10px; text-align:center; }
      @media(max-width:430px){ .booth-layout-grid,.booth-theme-grid{grid-template-columns:1fr 1fr}.booth-card{padding:13px} }

/* LockLuv glass gallery — đồng bộ với card timeline */
#panel-lockluv .camera-card.glass {
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 30px;
  background: var(--card);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow: hidden;
}
body:not(.dark) #panel-lockluv .photo-card,
body:not(.dark) #panel-lockluv .recent-empty{
  background:rgba(255,255,255,.72);
}
body:not(.dark) #panel-lockluv .recent,
body:not(.dark) #panel-lockluv .lockluv-recent-column,
body:not(.dark) #panel-lockluv .lockluv-recent-column .photo-grid{
  background:transparent;
}
#panel-lockluv .lockluv-gallery-head{
  min-height:48px;
  margin:0 0 12px;
  padding:0 2px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.20);
}
#panel-lockluv .lockluv-gallery-head b{
  display:flex;align-items:center;gap:8px;font-size:14px;
}
#panel-lockluv .lockluv-gallery-head b::before{
  content:'✦';color:var(--pink);font-size:16px;
}
#panel-lockluv .recent-history-btn{
  min-height:36px;padding:0 14px;border-radius:14px;
  border:1px solid rgba(255,95,158,.14);
  background:rgba(255,95,158,.10);
}
@media (min-width:900px){
  #panel-lockluv .lockluv-gallery-layout{
    display:grid;
    grid-template-columns:minmax(0,1.02fr) minmax(0,1.18fr);
    grid-template-rows:minmax(0,1fr);
    gap:12px;
    height:clamp(390px,43vw,610px);
    aspect-ratio:auto;
    align-items:stretch;
  }
  #panel-lockluv .lockluv-gallery-layout>*{height:100%;min-height:0;}
  #panel-lockluv .lockluv-camera-column,
  #panel-lockluv .lockluv-recent-column,
  #panel-lockluv .lockluv-recent-column .photo-grid{height:100%;min-height:0;}
  #panel-lockluv .lockluv-camera-column .camera-frame{
    width:100%;height:100%;min-height:0;aspect-ratio:auto;
    border-radius:24px;overflow:hidden;
  }
  #panel-lockluv .lockluv-recent-column .photo-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(2,minmax(0,1fr));
    gap:12px;
  }
  #panel-lockluv .lockluv-recent-column .photo-card,
  #panel-lockluv .lockluv-recent-column .recent-empty{
    width:100%;height:100%;min-height:0;aspect-ratio:auto;border-radius:22px;overflow:hidden;
  }
  #panel-lockluv .camera-photo,
  #panel-lockluv .camera-video,
  #panel-lockluv .lockluv-recent-column .photo-card img{
    width:100%;height:100%;object-fit:cover;
  }
}
@media (max-width:899px){
  #panel-lockluv .camera-card.glass{padding:12px;border-radius:24px;}
  #panel-lockluv .lockluv-gallery-layout{display:grid;grid-template-columns:1fr;gap:10px;}
  #panel-lockluv .lockluv-camera-column .camera-frame{aspect-ratio:1/1;border-radius:20px;}
  #panel-lockluv .lockluv-recent-column .photo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  #panel-lockluv .lockluv-recent-column .photo-card{aspect-ratio:1/1;border-radius:18px;}
}
/* Hệ màu SVG dùng chung — khôi phục sau khi clean code. */
.ui-filled-icon {
  width: 1.15em;
  height: 1.15em;
  display: inline-block;
  flex: 0 0 auto;
  fill: currentColor;
  color: var(--pink, #ff5f9e);
  vertical-align: -0.16em;
}
.icon-btn .ui-filled-icon,
.nav-btn .ui-filled-icon,
.tool-icon .ui-filled-icon,
.tiny .ui-filled-icon,
.caption-action-icon .ui-filled-icon,
.delete-photo-button .ui-filled-icon,
.close .ui-filled-icon {
  width: 22px;
  height: 22px;
}
.tool-icon .ui-filled-icon { width: 26px; height: 26px; }
.nav-btn .ui-filled-icon { display: block; margin: 0 auto 4px; }
.camera-empty .emoji .ui-filled-icon { width: 44px; height: 44px; }
.caption-action-post .ui-filled-icon,
.delete-photo-button .ui-filled-icon {
  color: #fff;
  fill: currentColor;
}

/* Bottom bar 5 mục đồng bộ, không còn nút trung tâm nổi bật */
.bottom-nav.glass{
  width:min(calc(100% - 24px),660px);
  height:86px;
  padding:8px 10px;
  grid-template-columns:repeat(5,minmax(0,1fr));
  border:1px solid rgba(255,255,255,.34);
  border-radius:28px;
  background:linear-gradient(145deg,rgba(255,255,255,.19),rgba(255,255,255,.08));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 18px 42px rgba(38,8,24,.18);
  backdrop-filter:blur(24px) saturate(140%);
  -webkit-backdrop-filter:blur(24px) saturate(140%);
  overflow:hidden;
}
.bottom-nav .nav-btn{position:relative;border-radius:20px;gap:5px;font-size:10px;transition:.22s ease;}
.bottom-nav .nav-btn .ui-filled-icon{width:22px;height:22px;margin:0;color:currentColor;fill:currentColor;}
.bottom-nav .nav-btn.active{background:rgba(255,95,158,.13);color:var(--pink);}

/* Dark mode: dock dùng cùng hệ nền với topbar để tăng độ rõ. */
body.dark .bottom-nav.glass{
  border-color:rgba(255,255,255,.45);
  background:var(--card);
  box-shadow:var(--shadow);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
body.dark .bottom-nav .nav-btn{color:var(--muted);}
body.dark .bottom-nav .nav-btn.active{
  color:var(--pink);
  background:rgba(255,95,158,.16);
}

@media(max-width:560px){
  .bottom-nav.glass{height:76px;padding:7px 5px;border-radius:24px;}
  .bottom-nav .nav-btn{font-size:8px;}
  .bottom-nav .nav-btn .ui-filled-icon{width:20px;height:20px;}
}

/* Ảnh LockLuv vuông như Locket, hai mép trên/dưới vẫn thẳng hàng */
@media (min-width:900px){
  #panel-lockluv .lockluv-gallery-layout{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:auto;
    height:auto;
    aspect-ratio:auto;
    align-items:start;
  }
  #panel-lockluv .lockluv-gallery-layout > *,
  #panel-lockluv .lockluv-camera-column,
  #panel-lockluv .lockluv-recent-column{
    width:100%;
    height:auto;
    min-height:0;
  }
  #panel-lockluv .lockluv-camera-column .camera-frame{
    width:100%;
    height:auto;
    aspect-ratio:1 / 1;
  }
  #panel-lockluv .lockluv-recent-column .photo-grid{
    width:100%;
    height:auto;
    aspect-ratio:1 / 1;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(2,minmax(0,1fr));
  }
  #panel-lockluv .lockluv-recent-column .photo-card,
  #panel-lockluv .lockluv-recent-column .recent-empty{
    width:100%;
    height:100%;
    aspect-ratio:1 / 1;
  }
}

/* Desktop: topbar dài đúng bằng bottom bar */
@media (min-width: 720px){
  .topbar{
    width:min(calc(100% - 24px),660px);
    max-width:660px;
  }
}

.music-style-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:12px}
  .music-style-choice{min-height:76px;padding:10px;border:1px solid var(--line);border-radius:16px;color:var(--text);background:var(--solid);text-align:left;transition:.18s ease}
  .music-style-choice:active{transform:scale(.98)}
  .music-style-choice.selected{border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,95,158,.11);background:rgba(255,95,158,.09)}
  .music-style-choice b{display:block;font-size:11px}.music-style-choice small{display:block;margin-top:4px;color:var(--muted);font-size:8px;line-height:1.35}
  .music-style-preview{height:27px;margin-bottom:8px;display:flex;align-items:center;justify-content:center;gap:3px;overflow:hidden}
  .music-style-preview i{display:block;width:4px;height:18px;border-radius:999px;background:linear-gradient(180deg,var(--pink),var(--pink2))}
  .music-style-preview.eq6 i{width:6px;height:6px;border-radius:50%;transform:translateY(var(--y,0))}
  .music-style-preview.eq8 i:nth-child(1),.music-style-preview.eq8 i:nth-child(7){height:6px}.music-style-preview.eq8 i:nth-child(2),.music-style-preview.eq8 i:nth-child(6){height:12px}.music-style-preview.eq8 i:nth-child(3),.music-style-preview.eq8 i:nth-child(5){height:20px}.music-style-preview.eq8 i:nth-child(4){height:26px}
  .music-style-preview.eq10 i{width:5px;border-radius:2px;background:repeating-linear-gradient(to top,var(--pink) 0 3px,transparent 3px 5px)}
  .music-style-preview.gradient{border-radius:10px;background:linear-gradient(120deg,rgba(255,95,158,.7),rgba(126,96,255,.65),rgba(70,208,220,.62));background-size:220% 220%;animation:musicGradientPreview 5s ease infinite}
  @keyframes musicGradientPreview{50%{background-position:100% 50%}}
  .music-player-bar.visual-eq6 .music-equalizer span{width:6px;min-width:5px;height:6px;flex:0 0 6px;border-radius:50%;transform-origin:center!important}
  .music-player-bar.visual-eq10 .music-equalizer span{border-radius:2px;background:repeating-linear-gradient(to top,var(--pink) 0 3px,transparent 3px 5px)}
  .topbar.visual-gradient{--music-glow:0;background:linear-gradient(120deg,rgba(255,125,174,.42),rgba(142,112,255,.34),rgba(91,216,226,.34),rgba(255,125,174,.42));background-size:300% 300%;animation:musicPanelGradient 12s ease-in-out infinite;box-shadow:0 14px 38px rgba(142,43,86,calc(.14 + var(--music-glow)*.18)),inset 0 1px 0 rgba(255,255,255,.4)}
  .topbar.visual-gradient .music-track,.topbar.visual-gradient .music-control{background:rgba(255,255,255,.42);backdrop-filter:blur(16px) saturate(145%);-webkit-backdrop-filter:blur(16px) saturate(145%)}
  body.dark .topbar.visual-gradient .music-track,body.dark .topbar.visual-gradient .music-control{background:rgba(55,31,45,.46)}
  @keyframes musicPanelGradient{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
  @media(max-width:390px){.music-style-grid{grid-template-columns:1fr}}

/* Desktop equalizer: rộng rãi, có khung phổ riêng và chuyển động cân đối hơn. */
@media (min-width:720px){
  .topbar.music-mode .music-player-bar{
    gap:8px;
  }
  .topbar.music-mode .music-control{
    width:37px;
    min-width:37px;
    height:37px;
    border-radius:13px;
    transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
  }
  .topbar.music-mode .music-control:hover{
    transform:translateY(-1px);
    box-shadow:0 8px 18px rgba(143,42,87,.13);
  }
  .topbar.music-mode .music-track{
    position:relative;
    height:37px;
    padding:0 9px 0 12px;
    gap:12px;
    border:1px solid rgba(255,255,255,.46);
    background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(255,247,251,.64));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.76),0 7px 18px rgba(116,42,75,.08);
  }
  body.dark .topbar.music-mode .music-track{
    border-color:rgba(255,255,255,.09);
    background:linear-gradient(145deg,rgba(76,43,59,.88),rgba(52,29,40,.72));
  }
  .topbar.music-mode .music-track-copy{
    min-width:88px;
    max-width:108px;
    padding-right:11px;
    border-right:1px solid var(--line);
  }
  .topbar.music-mode .music-track-copy strong{font-size:11.5px;}
  .topbar.music-mode .music-track-copy small{font-size:8px;}
  .topbar.music-mode .music-equalizer{
    position:relative;
    height:25px;
    padding:3px 7px;
    gap:3px;
    border-radius:10px;
    background:linear-gradient(180deg,rgba(255,95,158,.055),rgba(255,95,158,.015));
    box-shadow:inset 0 0 0 1px rgba(255,95,158,.055);
    mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  }
  .topbar.music-mode .music-equalizer::after{
    content:"";
    position:absolute;
    left:7px;right:7px;top:50%;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,95,158,.17),transparent);
    pointer-events:none;
  }
  .topbar.music-mode .music-equalizer span{
    min-width:3px;
    max-width:5px;
    height:19px;
    border-radius:999px;
    background:linear-gradient(180deg,#ff9bc2 0%,var(--pink) 48%,var(--pink2) 100%);
    box-shadow:0 0 7px rgba(255,95,158,.16);
    transform-origin:center;
  }
  .topbar.music-mode .music-player-bar.visual-eq6 .music-equalizer{justify-content:space-around;}
  .topbar.music-mode .music-player-bar.visual-eq6 .music-equalizer span{
    width:7px;min-width:7px;max-width:7px;height:7px;flex:0 0 7px;
    box-shadow:0 2px 7px rgba(255,95,158,.26);
  }
  .topbar.music-mode .music-player-bar.visual-eq8 .music-equalizer span{
    flex:1 1 0;max-width:6px;
  }
  .topbar.music-mode .music-player-bar.visual-eq10 .music-equalizer span{
    min-width:4px;max-width:6px;border-radius:3px;
    background:repeating-linear-gradient(to top,var(--pink2) 0 3px,transparent 3px 5px);
    filter:drop-shadow(0 0 3px rgba(255,95,158,.16));
  }
}

.admin-role-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:2px}
  .admin-role-choice{min-height:64px;padding:11px 12px;border:1px solid var(--line);border-radius:17px;color:var(--text);background:var(--solid);display:flex;align-items:center;gap:10px;text-align:left;transition:.18s ease}
  .admin-role-choice:active{transform:scale(.98)}
  .admin-role-choice.selected{border-color:var(--pink);background:rgba(255,95,158,.10);box-shadow:0 0 0 3px rgba(255,95,158,.11)}
  .admin-role-avatar{width:42px;height:42px;flex:0 0 auto;border-radius:14px;display:block;object-fit:cover;object-position:center;background:linear-gradient(135deg,var(--pink),var(--pink2));border:2px solid rgba(255,255,255,.76);box-shadow:0 7px 16px rgba(255,95,158,.2)}
  body.dark .admin-role-avatar{border-color:rgba(255,255,255,.16);box-shadow:0 8px 18px rgba(0,0,0,.24),0 0 0 1px rgba(255,95,158,.12)}
  .admin-role-copy{min-width:0}.admin-role-copy b{display:block;font-size:12px}.admin-role-copy small{display:block;margin-top:3px;color:var(--muted);font-size:9px}
  @media(max-width:430px){.admin-role-grid{grid-template-columns:1fr}.admin-role-choice{min-height:58px}}

.settings-page-grid{display:grid;gap:12px;}
  .settings-section{padding:12px;border-radius:24px;}
  .settings-section-head{
    width:100%;
    min-height:58px;
    margin:0;
    padding:4px;
    border:0;
    color:var(--text);
    background:transparent;
    display:flex;
    align-items:center;
    gap:12px;
    text-align:left;
  }
  button.settings-section-head{cursor:pointer;}
  .settings-section-head-copy{min-width:0;flex:1;}
  .settings-section-head h3{margin:0;font-size:17px;letter-spacing:-.025em;}
  .settings-section-head p{margin:4px 0 0;color:var(--muted);font-size:10px;line-height:1.45;}
  .settings-current{
    display:inline-flex;
    max-width:150px;
    min-height:27px;
    padding:6px 9px;
    border:1px solid var(--line);
    border-radius:999px;
    color:var(--pink);
    background:rgba(255,95,158,.08);
    align-items:center;
    justify-content:center;
    font-size:8px;
    font-weight:900;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .settings-chevron{
    width:32px;
    height:32px;
    flex:0 0 auto;
    border:1px solid rgba(255,255,255,.46);
    border-radius:11px;
    color:var(--muted);
    background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(255,247,251,.62));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 6px 14px rgba(103,35,67,.08);
    display:grid;
    place-items:center;
    transition:transform .26s cubic-bezier(.2,.8,.2,1),color .22s ease,background .22s ease,box-shadow .22s ease,border-color .22s ease;
  }
  body.dark .settings-chevron{
    border-color:rgba(255,255,255,.08);
    background:linear-gradient(145deg,rgba(74,42,57,.84),rgba(50,28,39,.72));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 6px 14px rgba(0,0,0,.16);
  }
  .settings-chevron svg{
    width:15px;
    height:15px;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:2.1;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:transform .26s cubic-bezier(.2,.8,.2,1);
  }
  .settings-section.expanded .settings-chevron{
    color:var(--pink);
    border-color:rgba(255,95,158,.24);
    background:rgba(255,95,158,.10);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 7px 16px rgba(255,95,158,.12);
  }
  .settings-section.expanded .settings-chevron svg{
    transform:rotate(180deg);
  }
  .settings-section-body{
    display:grid;
    grid-template-rows:0fr;
    opacity:0;
    overflow:hidden;
    transition:grid-template-rows .28s cubic-bezier(.2,.8,.2,1),opacity .2s ease,margin-top .24s ease;
    margin-top:0;
  }
  .settings-section-body-inner{
    min-height:0;
    overflow:hidden;
  }
  .settings-section.expanded .settings-section-body{
    grid-template-rows:1fr;
    opacity:1;
    margin-top:10px;
  }
  .settings-section.expanded .settings-section-body-inner{
    overflow:visible;
  }
  .settings-music-style-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .settings-placeholder{min-height:88px;padding:16px;}
  .settings-placeholder .settings-section-head{padding:0;}
  @media(min-width:720px){
    .settings-page-grid{grid-template-columns:1fr;}
    .settings-music-style-grid{grid-template-columns:repeat(5,minmax(0,1fr));}
  }
  @media(max-width:560px){
    .settings-section{padding:10px;}
    .settings-section-head{gap:9px;}
    .settings-current{max-width:105px;}
  }
  @media(max-width:430px){
    .settings-music-style-grid{grid-template-columns:1fr;}
    .settings-current{max-width:92px;padding-inline:8px;}
    .settings-section-head h3{font-size:15px;}
    .settings-section-head p{font-size:9px;}
  }

/* Gradient Moving: giữ nền panel gradient, đổi nhịp equalizer sang trắng glass. */
.topbar.visual-gradient .music-equalizer{
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.035));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.topbar.visual-gradient .music-equalizer::after{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
}
.topbar.visual-gradient .music-player-bar.visual-gradient .music-equalizer span{
  background:linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.78) 52%,rgba(255,255,255,.48) 100%);
  border:1px solid rgba(255,255,255,.36);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 0 9px rgba(255,255,255,.24);
  filter:none;
}
body.dark .topbar.visual-gradient .music-player-bar.visual-gradient .music-equalizer span{
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.68));
  border-color:rgba(255,255,255,.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.62),0 0 10px rgba(255,255,255,.20);
}

/* Mobile: thu gọn thiết kế desktop, giữ đủ độ rõ và không làm chật topbar. */
@media (max-width:719px){
  .topbar.music-mode{
    padding:7px;
  }
  .topbar.music-mode .music-player-bar{
    gap:5px;
  }
  .topbar.music-mode .music-control{
    width:33px;
    min-width:33px;
    height:33px;
    border-radius:11px;
    box-shadow:0 5px 13px rgba(103,35,67,.09);
  }
  .topbar.music-mode .music-track{
    position:relative;
    height:33px;
    min-width:0;
    padding:0 7px 0 9px;
    gap:7px;
    border:1px solid rgba(255,255,255,.42);
    border-radius:11px;
    background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(255,247,251,.60));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.68),0 5px 13px rgba(103,35,67,.07);
  }
  body.dark .topbar.music-mode .music-track{
    border-color:rgba(255,255,255,.08);
    background:linear-gradient(145deg,rgba(73,41,56,.86),rgba(49,27,38,.72));
  }
  .topbar.music-mode .music-track-copy{
    min-width:48px;
    max-width:62px;
    padding-right:7px;
    border-right:1px solid var(--line);
  }
  .topbar.music-mode .music-track-copy strong{font-size:9.5px;}
  .topbar.music-mode .music-track-copy small{font-size:6.8px;margin-top:2px;}
  .topbar.music-mode .music-equalizer{
    position:relative;
    height:21px;
    min-width:0;
    padding:3px 4px;
    gap:2px;
    border-radius:8px;
    background:linear-gradient(180deg,rgba(255,95,158,.05),rgba(255,95,158,.012));
    box-shadow:inset 0 0 0 1px rgba(255,95,158,.045);
    mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  }
  .topbar.music-mode .music-equalizer::after{
    content:"";
    position:absolute;
    left:4px;right:4px;top:50%;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,95,158,.14),transparent);
    pointer-events:none;
  }
  .topbar.music-mode .music-equalizer span{
    min-width:2px;
    max-width:4px;
    height:15px;
    border-radius:999px;
    box-shadow:0 0 5px rgba(255,95,158,.13);
  }
  .topbar.music-mode .music-player-bar.visual-eq6 .music-equalizer{justify-content:space-around;gap:1px;}
  .topbar.music-mode .music-player-bar.visual-eq6 .music-equalizer span{
    width:5px;min-width:5px;max-width:5px;height:5px;flex:0 0 5px;
  }
  .topbar.music-mode .music-player-bar.visual-eq8 .music-equalizer span{
    flex:1 1 0;max-width:4px;
  }
  .topbar.music-mode .music-player-bar.visual-eq10 .music-equalizer span{
    min-width:3px;max-width:4px;border-radius:2px;
    background:repeating-linear-gradient(to top,var(--pink2) 0 2px,transparent 2px 4px);
  }
  /* Gradient Moving trên mobile: nền gradient + nhịp trắng glass như desktop. */
  .topbar.visual-gradient .music-equalizer{
    background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.035));
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  }
  .topbar.visual-gradient .music-equalizer::after{
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.26),transparent);
  }
  .topbar.visual-gradient .music-player-bar.visual-gradient .music-equalizer span{
    background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.52));
    border:1px solid rgba(255,255,255,.30);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.62),0 0 7px rgba(255,255,255,.20);
  }
}
@media (max-width:390px){
  .topbar.music-mode .music-track-copy{min-width:43px;max-width:52px;}
  .topbar.music-mode .music-equalizer span:nth-child(n+19){display:none;}
}

/* Card chọn texture nền — dạng compact: tên trái, preview nhỏ bên phải */
.background-style-grid{display:grid;grid-template-columns:1fr;gap:8px}
.background-style-choice{min-height:58px;padding:10px 11px;border:1px solid var(--line);border-radius:16px;color:var(--text);background:var(--solid);display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;transition:.18s ease}
.background-style-choice:active{transform:scale(.985)}
.background-style-choice.selected{border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,95,158,.11);background:rgba(255,95,158,.09)}
.background-style-copy{min-width:0;flex:1}
.background-style-copy b{display:block;font-size:11px;line-height:1.15}
.background-style-copy small{display:block;margin-top:3px;color:var(--muted);font-size:8px;line-height:1.32}
.background-style-icon{position:relative;flex:0 0 auto;width:62px;height:28px;display:flex;align-items:center;justify-content:center;gap:3px;overflow:hidden;color:var(--pink);border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,95,158,.11),0 3px 10px rgba(103,35,67,.06)}
.background-style-icon::before,.background-style-icon::after{content:"";position:absolute;pointer-events:none}

/* Mặc định */
.background-style-icon.icon-none{background:linear-gradient(90deg,rgba(255,95,158,.22),rgba(255,95,158,.08))}
.background-style-icon.icon-none::before{left:50%;top:50%;width:44px;height:14px;transform:translate(-50%,-50%);border-radius:999px;background:linear-gradient(90deg,#ff9fc4,#ffd7e6);box-shadow:0 1px 6px rgba(255,95,158,.12)}

/* Grain */
.background-style-icon.icon-grain{background:linear-gradient(135deg,rgba(255,95,158,.15),rgba(255,95,158,.05))}
.background-style-icon.icon-grain::before{left:50%;top:50%;width:46px;height:16px;transform:translate(-50%,-50%);border-radius:999px;background:linear-gradient(90deg,rgba(255,159,196,.95),rgba(255,216,231,.95));box-shadow:0 1px 6px rgba(255,95,158,.10)}
.background-style-icon.icon-grain::after{inset:5px 8px;border-radius:999px;opacity:.46;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 80 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' seed='8'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.82'/%3E%3C/svg%3E");background-size:50px 22px;mix-blend-mode:soft-light}

/* Aurora */
.background-style-icon.icon-aurora{background:linear-gradient(135deg,rgba(255,95,158,.12),rgba(126,96,255,.08))}
.background-style-icon.icon-aurora::before{left:8px;right:8px;top:5px;bottom:5px;border-radius:999px;background:radial-gradient(circle at 18% 36%,rgba(255,255,255,.88),transparent 24%),radial-gradient(circle at 82% 30%,rgba(159,114,255,.75),transparent 30%),radial-gradient(circle at 55% 72%,rgba(255,88,162,.72),transparent 31%),linear-gradient(90deg,rgba(255,168,202,.80),rgba(255,226,238,.75));background-size:140% 140%;animation:bgIconAurora 4.8s ease-in-out infinite alternate;box-shadow:0 1px 6px rgba(255,95,158,.12)}

/* Dots */
.background-style-icon.icon-dots{gap:4px;padding-inline:8px;flex-wrap:wrap}
.background-style-icon.icon-dots i{width:4px;height:4px;display:block;border-radius:50%;background:linear-gradient(180deg,var(--pink),var(--pink2));opacity:.92;box-shadow:0 0 0 3px rgba(255,95,158,.05)}

/* Silk */
.background-style-icon.icon-silk{background:linear-gradient(135deg,rgba(255,95,158,.14),rgba(255,221,232,.10))}
.background-style-icon.icon-silk::before{left:8px;right:8px;top:5px;bottom:5px;border-radius:999px;background:repeating-linear-gradient(118deg,transparent 0,transparent 6px,rgba(255,255,255,.42) 7px,rgba(255,255,255,.42) 9px),linear-gradient(90deg,#ffabc8,#ffdce8);box-shadow:0 1px 6px rgba(255,95,158,.10)}

/* Giờ đôi */
.background-style-icon.icon-doubletime{background:linear-gradient(135deg,rgba(255,95,158,.12),rgba(255,223,233,.08))}
.background-style-icon.icon-doubletime::before{content:"03:03";left:7px;top:4px;color:rgba(111,42,73,.62);font-size:11px;font-weight:1000;letter-spacing:-.07em;transform:rotate(-6deg)}
.background-style-icon.icon-doubletime::after{content:"15:15";right:6px;bottom:4px;color:rgba(111,42,73,.34);font-size:7px;font-weight:950;letter-spacing:-.06em;transform:rotate(6deg)}
body.dark .background-style-icon.icon-doubletime::before{color:rgba(255,218,233,.72)}
body.dark .background-style-icon.icon-doubletime::after{color:rgba(255,218,233,.38)}

@keyframes bgIconAurora{from{background-position:0% 0%}to{background-position:100% 100%}}

/* Texture thật trên toàn trang. */
body.bg-texture-none{background-image:linear-gradient(135deg,var(--bg),var(--bg2))}
body.bg-texture-grain{background-image:linear-gradient(135deg,var(--bg),var(--bg2));background-size:cover}
body.bg-texture-grain::after{content:"";position:fixed;z-index:0;inset:0;pointer-events:none;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.76' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.92'/%3E%3C/svg%3E");background-size:150px 150px;mix-blend-mode:soft-light}
body.dark.bg-texture-grain::after{opacity:.17;mix-blend-mode:screen}
body.bg-texture-aurora{background-image:radial-gradient(circle at 14% 16%,rgba(255,255,255,.48),transparent 25%),radial-gradient(circle at 84% 22%,rgba(186,117,255,.30),transparent 28%),radial-gradient(circle at 56% 84%,rgba(255,84,157,.28),transparent 30%),linear-gradient(135deg,var(--bg),var(--bg2));background-size:130% 130%,135% 135%,140% 140%,cover;animation:lockluvAurora 18s ease-in-out infinite alternate}
body.bg-texture-dots{background-image:radial-gradient(rgba(255,255,255,.20) 1px,transparent 1px),linear-gradient(135deg,var(--bg),var(--bg2));background-size:22px 22px,cover}
body.bg-texture-silk{background-image:repeating-linear-gradient(118deg,transparent 0,transparent 38px,rgba(255,255,255,.045) 39px,rgba(255,255,255,.045) 40px),linear-gradient(135deg,var(--bg),var(--bg2));background-size:auto,cover}
body.dark.bg-texture-dots{background-image:radial-gradient(rgba(255,255,255,.075) 1px,transparent 1px),linear-gradient(135deg,var(--bg),var(--bg2))}
body.dark.bg-texture-silk{background-image:repeating-linear-gradient(118deg,transparent 0,transparent 38px,rgba(255,255,255,.025) 39px,rgba(255,255,255,.025) 40px),linear-gradient(135deg,var(--bg),var(--bg2))}

/* Light mode polish: texture rõ hơn nhưng vẫn mềm và không cạnh tranh với nội dung. */
body:not(.dark).bg-texture-grain::after{
  opacity:.16;
  mix-blend-mode:soft-light;
  filter:contrast(1.14);
}
body:not(.dark).bg-texture-aurora{
  background-image:
    radial-gradient(circle at 12% 14%,rgba(255,255,255,.68),transparent 23%),
    radial-gradient(circle at 86% 20%,rgba(155,104,255,.38),transparent 29%),
    radial-gradient(circle at 62% 88%,rgba(255,71,145,.36),transparent 31%),
    radial-gradient(circle at 28% 72%,rgba(255,184,213,.34),transparent 27%),
    linear-gradient(135deg,#e997a7 0%,#ffd9e1 48%,#f8c7da 100%);
  background-size:130% 130%,138% 138%,142% 142%,135% 135%,cover;
}
body:not(.dark).bg-texture-dots{
  background-image:
    radial-gradient(rgba(128,55,87,.18) 1.15px,transparent 1.3px),
    radial-gradient(rgba(255,255,255,.24) 1px,transparent 1.2px),
    linear-gradient(135deg,#e99aa9,#ffd9e1);
  background-position:0 0,11px 11px,0 0;
  background-size:22px 22px,22px 22px,cover;
}
body:not(.dark).bg-texture-silk{
  background-image:
    repeating-linear-gradient(118deg,transparent 0,transparent 34px,rgba(124,54,84,.07) 35px,rgba(124,54,84,.07) 36px,transparent 37px,transparent 68px,rgba(255,255,255,.19) 69px,rgba(255,255,255,.19) 71px),
    linear-gradient(135deg,#e99aa9,#ffd9e1);
  background-size:auto,cover;
}
body:not(.dark).bg-texture-doubletime{
  background-color:#f3b3c2;
  background-image:
    linear-gradient(45deg,rgba(190,49,103,.105) 25%,transparent 25%,transparent 75%,rgba(190,49,103,.105) 75%),
    linear-gradient(45deg,rgba(190,49,103,.105) 25%,transparent 25%,transparent 75%,rgba(190,49,103,.105) 75%),
    linear-gradient(135deg,#e89aa9,#ffd9e1);
  background-position:0 0,18px 18px,0 0;
  background-size:36px 36px,36px 36px,cover;
}
body:not(.dark).bg-texture-doubletime .double-time-item{
  color:rgba(190,44,105,var(--alpha));
  text-shadow:none;
  filter:none;
}
body:not(.dark).bg-texture-doubletime .double-time-item.depth-near{
  color:rgba(176,30,92,var(--alpha));
  filter:none;
  text-shadow:none;
}
body:not(.dark).bg-texture-doubletime .double-time-item.depth-mid{
  color:rgba(203,58,119,var(--alpha));
}
body:not(.dark).bg-texture-doubletime .double-time-item.depth-far{
  color:rgba(220,91,145,var(--alpha));
}

/* Giảm độ trắng của glass trong light mode để texture vẫn nhìn thấy phía sau. */
body:not(.dark).bg-texture-grain .glass,
body:not(.dark).bg-texture-aurora .glass,
body:not(.dark).bg-texture-dots .glass,
body:not(.dark).bg-texture-silk .glass,
body:not(.dark).bg-texture-doubletime .glass{
  background:rgba(255,255,255,.68);
  border-color:rgba(255,255,255,.54);
  box-shadow:0 14px 38px rgba(120,45,78,.13),inset 0 1px 0 rgba(255,255,255,.48);
}

/* Preview light mode đồng bộ với texture thật. */
body:not(.dark) .background-style-icon.icon-grain::after{opacity:.58;filter:contrast(1.12)}
body:not(.dark) .background-style-icon.icon-dots{background:rgba(255,95,158,.055)}
body:not(.dark) .background-style-icon.icon-dots i{background:#b94b78;opacity:.72}
body:not(.dark) .background-style-icon.icon-silk::before{
  background:repeating-linear-gradient(118deg,transparent 0,transparent 6px,rgba(116,49,78,.18) 7px,rgba(116,49,78,.18) 8px,rgba(255,255,255,.38) 9px,rgba(255,255,255,.38) 10px),linear-gradient(90deg,#f29dbd,#ffd7e5)
}

/* Giờ đôi: các cặp HH:HH nằm sau nội dung; card glass sẽ tự blur chúng bằng backdrop-filter. */
.double-time-layer{position:fixed;z-index:0;inset:0;overflow:hidden;pointer-events:none;display:none;contain:strict;opacity:1;transition:opacity .42s ease;will-change:opacity}
.double-time-layer.is-shuffling{opacity:0}
body.bg-texture-doubletime .double-time-layer{display:block}
.double-time-item{position:absolute;left:var(--x);top:var(--y);font-size:var(--size);font-weight:950;line-height:1;letter-spacing:-.055em;color:rgba(106,40,71,var(--alpha));text-shadow:none;filter:none;transform:translate(-50%,-50%) rotate(var(--rotate));transform-origin:center;user-select:none;white-space:nowrap;opacity:var(--depth-opacity);will-change:transform}
.double-time-item.depth-near{font-weight:1000;text-shadow:none;filter:none}
.double-time-item.depth-mid{font-weight:930;text-shadow:none;filter:none}
.double-time-item.depth-far{font-weight:850;text-shadow:none;filter:none}
body.dark .double-time-item{color:rgba(255,205,225,var(--alpha));text-shadow:none;filter:none}
body.bg-texture-doubletime{background-image:linear-gradient(135deg,var(--bg),var(--bg2))}
.shell{position:relative;z-index:1}
@media(max-width:719px){.double-time-item{opacity:.86}}

/* Desktop: bong bóng suy nghĩ khi rê vào các cặp giờ đôi. */
.double-time-thought{
  position:fixed;
  z-index:28;
  max-width:190px;
  padding:9px 13px;
  border:1px solid rgba(255,255,255,.64);
  border-radius:18px 18px 18px 7px;
  color:#7b2d50;
  background:rgba(255,248,252,.92);
  box-shadow:0 12px 28px rgba(96,35,64,.18),inset 0 1px 0 rgba(255,255,255,.88);
  backdrop-filter:blur(14px) saturate(135%);
  -webkit-backdrop-filter:blur(14px) saturate(135%);
  font-size:12px;
  font-weight:900;
  line-height:1.25;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transform:translate(-8px,8px) scale(.92);
  transform-origin:left bottom;
  transition:opacity .16s ease,transform .2s cubic-bezier(.2,.85,.25,1);
}
.double-time-thought::before,.double-time-thought::after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:inherit;
  border:1px solid rgba(255,255,255,.58);
  box-shadow:0 5px 12px rgba(96,35,64,.10);
}
.double-time-thought::before{width:9px;height:9px;left:-7px;bottom:-5px;}
.double-time-thought::after{width:5px;height:5px;left:-13px;bottom:-11px;}
.double-time-thought.show{opacity:1;transform:translate(0,0) scale(1);}
body.dark .double-time-thought{
  color:#ffe4ef;
  background:rgba(67,36,51,.94);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 12px 30px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.08);
}
@media(max-width:719px){.double-time-thought{display:none!important;}}

@keyframes lockluvAurora{from{background-position:0% 0%,100% 0%,50% 100%,0 0}to{background-position:8% 5%,92% 9%,44% 91%,0 0}}
@media(min-width:720px){.background-style-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:430px){.background-style-choice{padding:9px 10px}.background-style-icon{width:56px;height:26px}.background-style-copy small{font-size:7.5px}}
@media(prefers-reduced-motion:reduce){body.bg-texture-aurora,.background-style-icon.icon-aurora::before{animation:none!important}.double-time-layer{transition-duration:.01ms!important}}

/* Light mode: tăng tương phản cho Gradient Moving để equalizer không chìm vào nền sáng. */
body:not(.dark) .topbar.visual-gradient{
  background:linear-gradient(120deg,
    rgba(255,92,151,.68) 0%,
    rgba(143,104,255,.58) 36%,
    rgba(68,195,219,.56) 68%,
    rgba(255,92,151,.68) 100%);
  background-size:300% 300%;
  border-color:rgba(255,255,255,.72);
  box-shadow:0 14px 38px rgba(142,43,86,calc(.18 + var(--music-glow)*.20)),inset 0 1px 0 rgba(255,255,255,.58);
}
body:not(.dark) .topbar.visual-gradient .music-track,
body:not(.dark) .topbar.visual-gradient .music-control{
  background:rgba(255,255,255,.56);
  border-color:rgba(255,255,255,.70);
  color:#5b2940;
}
body:not(.dark) .topbar.visual-gradient .music-equalizer{
  background:rgba(74,38,94,.18);
  box-shadow:inset 0 0 0 1px rgba(71,31,96,.20),0 5px 14px rgba(71,31,96,.10);
}
body:not(.dark) .topbar.visual-gradient .music-equalizer::after{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
}
body:not(.dark) .topbar.visual-gradient .music-player-bar.visual-gradient .music-equalizer span{
  background:linear-gradient(180deg,#fff 0%,#ffe6f1 48%,#ff9fc7 100%);
  border:1px solid rgba(116,55,105,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.94),0 0 8px rgba(113,48,104,.20);
  opacity:1;
}

#currentPhoto{cursor:pointer;}
#currentPhoto:focus-visible{outline:3px solid rgba(var(--pink-rgb),.72);outline-offset:-5px;}

/* Timer dùng đúng kích thước thực tế của chip tiến trình 01 / 02. */
#boothProgress,
#boothTimerBtn {
  box-sizing: border-box !important;
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 7px 11px !important;
  border-radius: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
  white-space: nowrap !important;
}
#boothTimerBtn::before {
  content: none !important;
  display: none !important;
}
#boothTimerBtn .booth-timer-value {
  min-width: 0 !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}
@media (max-width: 560px) {
  #boothProgress,
  #boothTimerBtn {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 7px 11px !important;
  }
}

/* Desktop typography: cỡ chữ chuẩn website, không ảnh hưởng mobile. */
@media (min-width:720px){
  body{font-size:16px;}

  .panel > .section-head:first-child{margin-top:18px;}
  .section-head{margin:28px 4px 15px;}
  .section-head h2{font-size:30px;line-height:1.15;letter-spacing:-.035em;}
  .section-head h3{font-size:24px;line-height:1.2;}
  .section-head p{margin-top:6px;font-size:14px;line-height:1.5;}
  .link{font-size:13px;}
  .locked{font-size:12px;line-height:1.45;}

  .timeline-card{padding:16px;border-radius:30px;}
  .timeline-toolbar{padding:5px 4px 13px;margin-bottom:10px;}
  .timeline-info b{font-size:17px;line-height:1.2;}
  .timeline-info small{margin-top:5px;font-size:12px;line-height:1.35;}
  .year-display{min-width:84px;height:44px;padding:0 18px;border-radius:14px;}
  .year-display strong{font-size:15px;}
  .month-nav{grid-template-columns:42px minmax(0,1fr) 42px;gap:8px;}
  .month-arrow{width:42px;height:44px;border-radius:14px;font-size:22px;}
  .month-tabs{gap:9px;padding:9px 10px 15px;margin-bottom:-6px;}
  .month-tab{min-width:86px;height:44px;padding:0 13px;border-radius:15px;font-size:12px;}
  .month-progress{margin:5px 4px 13px;font-size:11px;}
  .dot{width:5px;height:5px;}
  .dot.active{width:18px;}
  .month-shell{padding:18px;}
  .month-head{margin-bottom:16px;}
  .month-head small{font-size:11px;letter-spacing:.04em;}
  .month-head h3{margin-top:5px;font-size:25px;}
  .count{padding:9px 12px;border-radius:13px;font-size:11px;}
  .memory-num{min-width:27px;height:27px;font-size:9px;}
  .memory-caption{padding:8px 10px;font-size:10px;}
  .swipe{margin-top:12px;font-size:11px;}

  .tool{padding:18px;border-radius:23px;gap:14px;}
  .tool-icon{width:50px;height:50px;border-radius:17px;}
  .tool-copy b{font-size:15px;}
  .tool-copy p{margin-top:5px;font-size:12px;line-height:1.45;}
  .tiny{width:38px;height:38px;}

  .settings-section-head h3{font-size:19px;}
  .settings-section-head p{font-size:12px;}
  .settings-current{font-size:10px;}
  .music-style-choice b,.background-style-copy b{font-size:13px;}
  .music-style-choice small,.background-style-copy small{font-size:10px;}

  .bottom-nav .nav-btn{font-size:12px;gap:6px;}
  .bottom-nav .nav-btn .ui-filled-icon{width:24px;height:24px;}

  .modal-sub{font-size:12px;line-height:1.4;}
  .modal-head h3{font-size:22px;}
  .btn{font-size:13px;}
  .input{font-size:14px;}
}

/* Editorial clean header cho 4 page chính */
.panel > .section-head:first-child{
  margin: 10px 2px 18px;
  padding: 4px 0 2px;
}
.panel > .section-head:first-child .section-row{
  align-items:flex-end;
  gap:14px;
}
.panel > .section-head:first-child h2{
  margin:0;
  padding-block: .08em .12em;
  font-size: clamp(26px, 5vw, 32px);
  line-height: 1.18;
  letter-spacing: -.038em;
  font-weight: 900;
  color:#eb4d95;
  background-image: linear-gradient(135deg, #ff3f93 0%, #ff5ea5 34%, #ff86c1 68%, #cf63ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  overflow: visible;
}
body.dark .panel > .section-head:first-child h2{
  color:#ff98c7;
  background-image: linear-gradient(135deg, #ff9cca 0%, #ff6db2 34%, #ff92cb 68%, #dc8fff 100%);
}
.panel > .section-head:first-child p{
  margin:1px 0 0;
  max-width: 58ch;
  color: color-mix(in srgb, var(--text) 58%, transparent);
  font-size: 13px;
  line-height: 1.5;
}
body.dark .panel > .section-head:first-child p{
  color: rgba(255,255,255,.72);
}
.panel > .section-head:first-child .link,
.panel > .section-head:first-child .page-clean-action,
.panel > .section-head:first-child #clearTimelineBtn{
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(255,95,158,.18);
  border-radius: 999px;
  background: rgba(255,95,158,.08);
  color: var(--pink);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  transition: .18s ease;
}
.panel > .section-head:first-child .link:hover,
.panel > .section-head:first-child #clearTimelineBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,95,158,.30);
  background: rgba(255,95,158,.12);
}
.panel > .section-head:first-child .link:active,
.panel > .section-head:first-child #clearTimelineBtn:active{
  transform: scale(.98);
}
@media (min-width:720px){
  .panel > .section-head:first-child{
    margin: 14px 4px 20px;
    padding: 5px 0 3px;
  }
  .panel > .section-head:first-child h2{
    padding-block: .09em .14em;
    font-size: clamp(34px, 3.1vw, 42px);
    line-height: 1.16;
    letter-spacing: -.042em;
    font-weight: 880;
  }
  .panel > .section-head:first-child p{
    margin-top: 2px;
    font-size: 15px;
    line-height: 1.55;
  }
  .panel > .section-head:first-child .link,
  .panel > .section-head:first-child #clearTimelineBtn{
    min-height: 38px;
    padding-inline: 15px;
    font-size: 12px;
  }
}
@media (max-width:430px){
  .panel > .section-head:first-child{
    margin-bottom: 17px;
    padding-top: 3px;
  }
  .panel > .section-head:first-child h2{
    font-size: 27px;
    line-height: 1.2;
    padding-block: .08em .12em;
  }
  .panel > .section-head:first-child p{
    margin-top: 1px;
    font-size: 12px;
  }
  .panel > .section-head:first-child .section-row{align-items:center;}
  .panel > .section-head:first-child #clearTimelineBtn{min-height: 32px; padding-inline: 11px; font-size: 10px;}
}

/* Giờ đôi: line caro rất nhẹ, chữ giờ là yếu tố chính */
body:not(.dark).bg-texture-doubletime{
  background-color:#f2b2c1;
  background-image:
    linear-gradient(rgba(181,53,105,.085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(181,53,105,.085) 1px, transparent 1px),
    linear-gradient(135deg,#e99aa9 0%,#f7bcc8 48%,#ffd8e0 100%);
  background-size:42px 42px,42px 42px,cover;
  background-position:0 0,0 0,0 0;
}
body:not(.dark).bg-texture-doubletime .double-time-item{
  color:rgba(185,35,96,var(--alpha));
  opacity:calc(var(--depth-opacity) * 1.08);
  text-shadow:none;
  filter:none;
}
body:not(.dark).bg-texture-doubletime .double-time-item.depth-near{
  color:rgba(164,20,80,var(--alpha));
  opacity:calc(var(--depth-opacity) * 1.16);
}
body:not(.dark).bg-texture-doubletime .double-time-item.depth-mid{
  color:rgba(190,39,100,var(--alpha));
  opacity:calc(var(--depth-opacity) * 1.08);
}
body:not(.dark).bg-texture-doubletime .double-time-item.depth-far{
  color:rgba(211,72,128,var(--alpha));
  opacity:calc(var(--depth-opacity) * .96);
}
body.dark.bg-texture-doubletime{
  background-image:
    linear-gradient(rgba(255,170,207,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,170,207,.055) 1px, transparent 1px),
    linear-gradient(135deg,var(--bg),var(--bg2));
  background-size:42px 42px,42px 42px,cover;
  background-position:0 0,0 0,0 0;
}

html.dark-boot,
html.dark-boot body {
  background: #130910;
}

/* Timeline grid: số thứ tự chỉ là nhãn; bỏ nút bút chỉnh sửa ngoài thẻ ảnh. */
#panel-timeline .memory-num{pointer-events:auto;cursor:default;user-select:none;}
#panel-timeline .memory-edit{display:none!important;}

.request-page-grid{display:grid;grid-template-columns:1fr;gap:12px;}
.request-compose,.request-history-card{padding:14px;border-radius:26px;}
.request-page-card-head{margin-bottom:13px;padding:2px 2px 12px;border-bottom:1px solid var(--line);}
.request-page-card-head h3{margin:4px 0 0;font-size:18px;letter-spacing:-.025em;}
.request-page-card-head p{margin:4px 0 0;color:var(--muted);font-size:10px;line-height:1.45;}
.request-page-kicker{color:var(--pink);font-size:9px;font-weight:950;letter-spacing:.06em;text-transform:uppercase;}
.request-preset-grid{margin-bottom:10px;}
.request-note-field{display:block;margin-top:10px;}
.request-note-field>span{display:block;margin:0 0 7px 3px;color:var(--muted);font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.07em;}
.request-note-field textarea{min-height:105px;margin-bottom:10px;}
.request-history-card .request-list{gap:9px;}
.request-history-card .request-item{padding:12px 13px;border-radius:16px;background:rgba(255,255,255,.38);}
.request-history-card .request-item b{font-size:12px;}
.request-history-card .request-item p{margin:5px 0;font-size:10px;line-height:1.45;}
.request-history-card .request-item small{font-size:8px;}
.request-viewer-note{margin-bottom:10px;}
@media(min-width:820px){
  .request-page-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:start;}
  .request-compose,.request-history-card{padding:18px;border-radius:28px;}
  .request-page-card-head h3{font-size:22px;}
  .request-page-card-head p{font-size:12px;}
  .request-page-kicker{font-size:10px;}
}

/* Giữ topbar và dock ở đúng một tọa độ trên mọi page. */
:root{
  --app-chrome-width: min(calc(100vw - 24px), 660px);
  --app-top-gap: 10px;
  --app-dock-gap: 11px;
}
html{
  overflow-y: scroll;
  scrollbar-gutter: stable;
}
.topbar,
.bottom-nav{
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  width: var(--app-chrome-width) !important;
  max-width: 660px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transform: none !important;
  box-sizing: border-box;
}
.topbar{
  top: calc(env(safe-area-inset-top, 0px) + var(--app-top-gap)) !important;
}
.bottom-nav{
  bottom: max(var(--app-dock-gap), env(safe-area-inset-bottom, 0px)) !important;
}
/* Không để animation của page tác động tới hai thanh cố định. */
.topbar, .bottom-nav{
  translate: none !important;
}
@media (max-width: 719px){
  :root{ --app-chrome-width: calc(100vw - 24px); }
}
@media (max-width: 390px){
  :root{ --app-chrome-width: calc(100vw - 20px); }
}

.love-calendar-card{width:min(100%,430px);padding:16px;border-radius:28px;overflow:visible}
  .love-calendar-head{align-items:center;margin-bottom:14px}
  .love-calendar-title-wrap{min-width:0}
  .love-calendar-kicker{color:var(--pink);font-size:9px;font-weight:950;letter-spacing:.08em;text-transform:uppercase}
  .love-calendar-head h3{margin:3px 0 0;font-size:22px;letter-spacing:-.035em}
  .love-calendar-nav{display:grid;grid-template-columns:38px minmax(0,1fr) 38px;align-items:center;gap:8px;margin-bottom:10px}
  .love-calendar-month{height:38px;border:1px solid var(--line);border-radius:13px;background:var(--solid);display:grid;place-items:center;font-size:12px;font-weight:950}
  .love-calendar-arrow{width:38px;height:38px;padding:0;border:1px solid var(--line);border-radius:13px;color:var(--text);background:var(--solid);font-size:18px;font-weight:950}
  .love-calendar-weekdays,.love-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
  .love-calendar-weekdays{margin-bottom:6px;color:var(--muted);font-size:8px;font-weight:900;text-align:center}
  .love-calendar-weekdays span{padding:4px 0}
  .love-day{position:relative;aspect-ratio:1;border:0;border-radius:50%;color:var(--text);background:rgba(255,255,255,.44);display:grid;place-items:center;font-size:11px;font-weight:850;transition:transform .16s ease,background .16s ease,box-shadow .16s ease,color .16s ease;touch-action:none;user-select:none;-webkit-user-select:none}
  body.dark .love-day{background:rgba(255,255,255,.055)}
  .love-day:not(.empty):not(.past):active{transform:scale(.92)}
  .love-day.empty{visibility:hidden;pointer-events:none}
  .love-day.today{color:#fff;background:linear-gradient(135deg,#ff8fbb,var(--pink));box-shadow:0 7px 16px rgba(255,61,137,.24),inset 0 0 0 1px rgba(255,255,255,.42)}
  .love-day.past{opacity:.38;cursor:not-allowed}
  .love-day.selected{color:var(--pink);background:var(--solid);box-shadow:inset 0 0 0 3px var(--pink),0 0 0 2px rgba(255,255,255,.92),0 0 0 7px rgba(255,95,158,.34),0 0 18px rgba(255,95,158,.34),0 8px 18px rgba(255,61,137,.18);font-weight:950;animation:loveSelectedGlow 2.2s ease-in-out infinite}
  body.dark .love-day.selected{color:#fff;background:rgba(255,95,158,.16);box-shadow:inset 0 0 0 3px var(--pink),0 0 0 2px rgba(36,18,28,.96),0 0 0 7px rgba(255,95,158,.48),0 0 20px rgba(255,95,158,.34),0 8px 18px rgba(0,0,0,.24)}
  .love-day.today.selected{color:#fff;background:linear-gradient(135deg,#ff8fbb,var(--pink));box-shadow:inset 0 0 0 3px #fff,0 0 0 3px var(--pink),0 0 0 8px rgba(255,95,158,.34),0 0 20px rgba(255,95,158,.38),0 9px 20px rgba(255,61,137,.30)}
  @keyframes loveSelectedGlow{0%,100%{filter:brightness(1);transform:translateZ(0)}50%{filter:brightness(1.08);transform:translateZ(0) scale(1.025)}}
  .love-day.anniversary{overflow:visible;color:var(--pink);background:rgba(255,95,158,.09)}
  .love-day.anniversary .anniversary-heart{width:20px;height:20px;display:block;fill:currentColor;filter:drop-shadow(0 2px 4px rgba(255,95,158,.18))}
  .love-day.anniversary::after{content:"happy anniversary";position:absolute;z-index:20;left:50%;bottom:calc(100% + 9px);padding:7px 10px;border:1px solid rgba(255,255,255,.5);border-radius:12px;color:#fff;background:rgba(45,16,31,.88);box-shadow:0 9px 22px rgba(44,13,28,.2);font-size:8px;font-weight:900;white-space:nowrap;opacity:0;pointer-events:none;transform:translate(-50%,5px) scale(.96);transition:.16s ease}
  .love-day.anniversary:hover::after,.love-day.anniversary:focus-visible::after{opacity:1;transform:translate(-50%,0) scale(1)}
  .love-calendar-result{margin-top:12px;padding:13px 14px;border:1px solid rgba(255,95,158,.15);border-radius:17px;background:rgba(255,95,158,.07);display:flex;align-items:center;gap:11px}
  .love-calendar-result-icon{width:38px;height:38px;flex:0 0 auto;border-radius:13px;color:#fff;background:linear-gradient(135deg,var(--pink),var(--pink2));display:grid;place-items:center;font-size:18px}
  .love-calendar-result-copy{min-width:0}
  .love-calendar-result-copy b{display:block;font-size:12px}
  .love-calendar-result-copy p{margin:3px 0 0;color:var(--muted);font-size:9px;line-height:1.4}
  .love-calendar-hint{margin:10px 2px 0;color:var(--muted);font-size:8.5px;line-height:1.45;text-align:center}
  .love-day.holding::before{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--pink);border-top-color:transparent;animation:loveHoldSpin .72s linear infinite}
  @keyframes loveHoldSpin{to{transform:rotate(360deg)}}
  @media(max-width:430px){.love-calendar-card{padding:13px;border-radius:25px}.love-calendar-grid,.love-calendar-weekdays{gap:4px}.love-day{font-size:10px}.love-calendar-head h3{font-size:20px}}

  /* Đồng bộ hoàn chỉnh popup lịch trong dark mode. */
  body.dark .love-calendar-card{
    background:linear-gradient(155deg,rgba(64,34,48,.97),rgba(39,20,30,.96));
    border-color:rgba(255,255,255,.10);
    box-shadow:0 28px 70px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.06);
  }
  body.dark .love-calendar-month,
  body.dark .love-calendar-arrow{
    color:var(--text);
    background:linear-gradient(145deg,rgba(78,43,60,.92),rgba(52,28,40,.86));
    border-color:rgba(255,255,255,.09);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 6px 15px rgba(0,0,0,.16);
  }
  body.dark .love-calendar-arrow:hover{
    color:var(--pink);
    border-color:rgba(255,95,158,.28);
    background:rgba(255,95,158,.13);
  }
  body.dark .love-calendar-weekdays{color:rgba(255,229,240,.58)}
  body.dark .love-day{
    color:rgba(255,245,249,.88);
    background:rgba(255,255,255,.065);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.035);
  }
  body.dark .love-day:not(.empty):not(.past):not(.today):not(.selected):hover{
    color:#fff;
    background:rgba(255,95,158,.14);
    box-shadow:inset 0 0 0 1px rgba(255,95,158,.20),0 7px 16px rgba(0,0,0,.14);
  }
  body.dark .love-day.today{
    color:#fff;
    background:linear-gradient(135deg,#ff83b4,#ff3d88);
    box-shadow:0 0 0 1px rgba(255,255,255,.18),0 8px 19px rgba(255,61,136,.34),0 0 18px rgba(255,95,158,.20);
  }
  body.dark .love-day.selected{
    color:#fff;
    background:rgba(255,95,158,.14);
    box-shadow:inset 0 0 0 3px #ff67a5,0 0 0 2px rgba(30,13,22,.98),0 0 0 7px rgba(255,95,158,.42),0 0 22px rgba(255,95,158,.34),0 9px 20px rgba(0,0,0,.30);
  }
  body.dark .love-day.today.selected{
    color:#fff;
    background:linear-gradient(135deg,#ff83b4,#ff3d88);
    box-shadow:inset 0 0 0 3px #fff,0 0 0 3px #ff5f9e,0 0 0 8px rgba(255,95,158,.42),0 0 24px rgba(255,95,158,.44),0 10px 22px rgba(0,0,0,.34);
  }
  body.dark .love-day.anniversary{
    color:#ff8fbd;
    background:rgba(255,95,158,.12);
    box-shadow:inset 0 0 0 1px rgba(255,95,158,.12);
  }
  body.dark .love-day.anniversary::after{
    color:#fff7fb;
    background:rgba(30,13,22,.96);
    border-color:rgba(255,255,255,.12);
    box-shadow:0 12px 28px rgba(0,0,0,.38),0 0 18px rgba(255,95,158,.12);
  }
  body.dark .love-calendar-result{
    border-color:rgba(255,95,158,.20);
    background:linear-gradient(145deg,rgba(255,95,158,.13),rgba(255,95,158,.06));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  }
  body.dark .love-calendar-result-copy b{color:#fff5f9}
  body.dark .love-calendar-result-copy p,
  body.dark .love-calendar-hint{color:rgba(255,225,237,.64)}

/* Popup lịch: bỏ phụ đề/hint, đồng bộ title với header page và tăng tooltip anniversary. */
.love-calendar-kicker,.love-calendar-hint{display:none!important;}
.love-calendar-head h3{
  color:#eb4d95;
  background-image:linear-gradient(135deg,#ff3f93 0%,#ff5ea5 34%,#ff86c1 68%,#cf63ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight:900;
  line-height:1.15;
  padding-block:.04em .08em;
}
body.dark .love-calendar-head h3{
  color:#ff98c7;
  background-image:linear-gradient(135deg,#ff9cca 0%,#ff6db2 34%,#ff92cb 68%,#dc8fff 100%);
}
.love-day.anniversary::after{
  bottom:calc(100% + 12px);
  padding:10px 14px;
  border-radius:14px;
  font-size:11px;
  line-height:1;
  letter-spacing:.01em;
  box-shadow:0 12px 28px rgba(44,13,28,.24);
}
@media (min-width:720px){
  .love-calendar-card{width:min(100%,500px);}
  .love-calendar-head h3{font-size:28px;}
  .love-day.anniversary::after{
    bottom:calc(100% + 14px);
    padding:12px 16px;
    border-radius:15px;
    font-size:13px;
  }
}
@media (max-width:430px){
  .love-calendar-head h3{font-size:22px;}
  .love-day.anniversary::after{
    bottom:calc(100% + 10px);
    padding:9px 12px;
    border-radius:13px;
    font-size:10px;
  }
}

/* Lock screen: 4 nhóm nội dung được giãn đều và cân bằng theo trục dọc. */
.pin-card{
  min-height:372px;
  padding:28px 24px 26px;
  display:grid;
  grid-template-rows:auto auto auto auto;
  align-content:space-between;
  justify-items:center;
  gap:0;
}
.pin-logo{margin:0;}
.pin-copy{display:grid;justify-items:center;gap:7px;}
.pin-copy h1{margin:0;}
.pin-copy p{margin:0;}
.pin-code-wrap{margin:0;}
.pin-unlock-btn{
  margin:0 auto;
  min-width:128px;
  transform:translateY(2px);
}
.pin-error{
  position:absolute;
  left:24px;
  right:24px;
  bottom:7px;
  min-height:14px;
  margin:0;
  pointer-events:none;
}
@media(max-width:430px){
  .pin-card{min-height:350px;padding:24px 18px 23px;}
  .pin-error{left:18px;right:18px;bottom:6px;}
}

/* Dùng màu tiêu đề Timeline làm chuẩn cho toàn bộ page. */
.panel > .section-head:first-child h2 {
  color: #d92f7d;
  background-image: linear-gradient(135deg, #d92f7d 0%, #ee3e8f 36%, #f45ca5 68%, #a83ed2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 0 rgba(255,255,255,.08);
}
body.dark .panel > .section-head:first-child h2 {
  color: #ff8fc3;
  background-image: linear-gradient(135deg, #ff9cca 0%, #ff6db2 34%, #ff92cb 68%, #dc8fff 100%);
  text-shadow: none;
}

/* Timeline: ảnh nằm trực tiếp trên card chung, bỏ lớp nền phụ. */
#panel-timeline .month-stage{
  min-height:0;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
}
#panel-timeline .month-shell{
  padding:10px 0 0;
}
#panel-timeline .month-progress{
  position:relative;
  min-height:16px;
  justify-content:center;
}
#panel-timeline .month-progress .dots{
  margin-inline:auto;
}
#panel-timeline .month-progress #monthPosition{
  position:absolute;
  right:2px;
}
@media (min-width:720px){
  #panel-timeline .month-shell{padding:12px 0 0;}
}

/* Vệt ánh kim mảnh như bản cũ nhưng quét chậm để nhìn rõ; chừa mép phải tránh cắt ký tự cuối. */
.panel > .section-head:first-child h2{
  position:relative;
  width:max-content;
  max-width:calc(100% - .22em);
  padding-right:.22em;
  margin-right:-.22em;
  overflow:visible !important;
  isolation:isolate;
}
.panel > .section-head:first-child h2::after{
  content:attr(data-sweep-text);
  position:absolute;
  z-index:2;
  top:0;
  bottom:0;
  left:0;
  right:-.22em;
  padding-right:.22em;
  pointer-events:none;
  color:transparent;
  -webkit-text-fill-color:transparent;
  background-image:linear-gradient(
    105deg,
    transparent 0%,
    transparent 42%,
    rgba(255,255,255,.08) 46%,
    rgba(255,255,255,.28) 48.6%,
    rgba(255,255,255,.72) 50%,
    rgba(255,255,255,.28) 51.4%,
    rgba(255,255,255,.08) 54%,
    transparent 58%,
    transparent 100%
  );
  background-size:320% 100%;
  background-position:165% 0;
  background-repeat:no-repeat;
  -webkit-background-clip:text;
  background-clip:text;
  filter:drop-shadow(0 0 3px rgba(255,255,255,.10));
  opacity:.88;
  animation:pageHeaderMetalSweep 14s linear infinite;
  will-change:background-position;
}
@keyframes pageHeaderMetalSweep{
  0%,12%{background-position:165% 0;}
  72%{background-position:-165% 0;}
  100%{background-position:-165% 0;}
}
@media (prefers-reduced-motion:reduce){
  .panel > .section-head:first-child h2::after{animation:none;display:none;}
}

#loveTopBtn{min-width:68px;}
  #loveTopBtn .love-flip-card{position:relative;width:58px;height:26px;display:block;}
  #loveTopBtn .love-flip-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-start;gap:6px;opacity:0;transform:scale(.96);transition:opacity .7s ease,transform .7s ease;pointer-events:none;}
  #loveTopBtn .love-flip-front{opacity:1;transform:scale(1);}
  #loveTopBtn.show-flower .love-flip-front{opacity:0;transform:scale(.96);}
  #loveTopBtn.show-flower .love-flip-back{opacity:1;transform:scale(1);}
  #loveTopBtn .love-flip-face strong{font-variant-numeric:tabular-nums;white-space:nowrap;}
  #loveTopBtn .flower-icon{color:#ff7ea9;filter:drop-shadow(0 2px 5px rgba(255,95,158,.22));}
  @media(max-width:430px){#loveTopBtn{min-width:62px;}#loveTopBtn .love-flip-card{width:54px;}}
  @media(prefers-reduced-motion:reduce){#loveTopBtn .love-flip-face{transition-duration:.01ms!important}}

.love-info-card{width:min(100%,390px);padding:22px 22px 28px;border-radius:28px;text-align:center}
  .love-info-card .modal-head{justify-content:flex-end;margin-bottom:0}
  .love-info-icon{width:128px;height:128px;margin:2px auto 12px;display:grid;place-items:center;background:none;border:0;box-shadow:none}
  .love-info-icon svg{width:104px;height:104px;color:var(--pink);transform-origin:center;filter:drop-shadow(0 8px 16px rgba(255,92,153,.18));transition:filter .35s ease,transform .35s ease}
  .love-info-icon:hover svg,.love-info-icon:focus-visible svg{animation:loveIconHeartbeat 1.15s ease-in-out infinite;filter:drop-shadow(0 0 10px rgba(255,89,157,.7)) drop-shadow(0 0 24px rgba(209,91,255,.4))}
  .love-info-title{
    margin:0;
    font-size:27px;
    font-weight:950;
    letter-spacing:-.04em;
    color:#d92f7d;
    background-image:linear-gradient(135deg,#d92f7d 0%,#ee3e8f 36%,#f45ca5 68%,#a83ed2 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    text-shadow:0 1px 0 rgba(255,255,255,.08);
  }
  body.dark .love-info-title{
    color:#ff8fc3;
    background-image:linear-gradient(135deg,#ff9cca 0%,#ff6db2 34%,#ff92cb 68%,#dc8fff 100%);
    text-shadow:none;
  }
  .love-info-sub{margin:9px 0 0;color:var(--muted);font-size:14px;font-weight:650;line-height:1.55}
  @keyframes loveIconHeartbeat{0%,100%{transform:scale(1)}14%{transform:scale(1.12)}28%{transform:scale(1)}42%{transform:scale(1.08)}64%{transform:scale(1)}}
  @media(hover:none){.love-info-icon:active svg{animation:loveIconHeartbeat 1.15s ease-in-out infinite;filter:drop-shadow(0 0 10px rgba(255,89,157,.7)) drop-shadow(0 0 24px rgba(209,91,255,.4))}}
  @media(prefers-reduced-motion:reduce){.love-info-icon:hover svg,.love-info-icon:focus-visible svg,.love-info-icon:active svg{animation:none;transform:scale(1.05)}}

/* Timeline: đồng bộ chuyển động card và thanh tháng */
#monthStage {
  will-change: transform, opacity;
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
}
#monthTabs {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
#monthStage.swipe-next,
#monthStage.swipe-prev {
  animation-duration: 260ms !important;
  animation-timing-function: cubic-bezier(.22,.8,.24,1) !important;
}

/* Game giữ chuỗi cổ điển được chuyển nguyên từ app.css cũ */
    .streak-popup-backdrop {
      position: fixed;
      inset: 0;
      z-index: 2800;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
      background: rgba(61, 43, 43, 0.46);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      animation: photoManageFadeIn 0.2s ease both;
    }

    .streak-popup-card {
      width: min(440px, 100%);
      max-height: calc(100vh - 32px);
      max-height: calc(100dvh - 32px);
      overflow-y: auto;
      position: relative;
      padding: 28px 24px 24px;
      border-radius: 36px;
      text-align: center;
      background: rgba(255, 255, 255, 0.86);
      border: 1.5px solid rgba(255, 255, 255, 0.7);
      box-shadow:
        0 24px 70px rgba(var(--pink-rgb), 0.12),
        0 12px 30px rgba(61, 43, 43, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
      backdrop-filter: blur(25px);
      -webkit-backdrop-filter: blur(25px);
      animation: photoManagePop 0.34s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    body.dark .streak-popup-card {
      background: rgba(43, 43, 43, 0.82);
      border-color: rgba(255, 255, 255, 0.07);
      box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }

    .streak-popup-close {
      position: absolute;
      top: 14px;
      right: 14px;
      width: 34px;
      height: 34px;
      border: none;
      background: rgba(var(--pink-rgb), 0.08);
      color: var(--pink-dark);
      border-radius: 50%;
      cursor: pointer;
      display: grid;
      place-items: center;
      transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
      font-size: 20px;
      font-weight: bold;
    }

    .streak-popup-close:hover {
      background: var(--pink-soft);
      color: var(--pink-dark);
      transform: rotate(90deg) scale(1.08);
    }

    .streak-popup-title {
      color: var(--pink-dark, #e63f82);
      background: linear-gradient(135deg, var(--pink, #ff5f9e) 20%, var(--pink-dark, #e63f82) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      font-size: 23px;
      font-weight: 900;
      margin-bottom: 6px;
      margin-top: -6px;
      letter-spacing: -0.3px;
    }

    @supports not (-webkit-background-clip: text) {
      .streak-popup-title {
        background: none;
        color: var(--pink-dark, #e63f82);
        -webkit-text-fill-color: currentColor;
      }
    }

    .streak-popup-subtitle {
      color: var(--text-soft);
      font-size: 13.5px;
      font-weight: 800;
      line-height: 1.5;
      margin-bottom: 24px;
      padding: 0 10px;
    }

    .streak-game-stage {
      width: 100%;
      height: 235px;
      position: relative;
      overflow: hidden;
      margin-bottom: 20px;
      touch-action: none;
      background: linear-gradient(180deg, #dff4fb 0%, #f7eefa 55%, #d8e8b7 56%, #aecb84 100%);
      border: 1.5px solid rgba(var(--pink-rgb), 0.14);
      border-radius: 28px;
      padding: 12px;
      box-shadow:
        inset 0 3px 12px rgba(var(--pink-rgb), 0.04),
        0 8px 24px rgba(var(--pink-rgb), 0.03);
    }

    /* Hiệu ứng hào quang thở phía sau chậu cây */
    .streak-game-stage::before {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 20px;
      transform: translateX(-50%);
      width: 170px;
      height: 170px;
      background: radial-gradient(circle, rgba(var(--pink-rgb), 0.32) 0%, transparent 70%);
      z-index: 0;
      pointer-events: none;
      animation: streakGlow 4s ease-in-out infinite alternate;
    }

    @keyframes streakGlow {
      from {
        transform: translateX(-50%) scale(0.85);
        opacity: 0.75;
      }
      to {
        transform: translateX(-50%) scale(1.18);
        opacity: 1;
      }
    }

    /* Hiệu ứng lắc lư khi di chuột vào chậu cây */
    .streak-game-stage:hover .streak-flower-wrap svg {
      animation: plantWobble 0.6s ease-in-out;
    }

    @keyframes plantWobble {
      0% { transform: rotate(0deg); }
      25% { transform: rotate(-3deg) scale(1.02); }
      50% { transform: rotate(3deg) scale(1.02); }
      75% { transform: rotate(-1.5deg) scale(1.01); }
      100% { transform: rotate(0deg); }
    }

    /* Mặt trời / Mặt trăng theo chủ đề giao diện sáng / tối */
    .streak-celestial-body {
      position: absolute;
      top: 73px;          /* Dịch lên 13px để bù trừ padding cho căn giữa */
      left: 25px;         /* Dịch trái 13px để bù trừ padding cho căn giữa */
      width: 60px;        /* Mở rộng khung chứa để không bị clipping (cắt) bóng đổ drop-shadow */
      height: 60px;       /* Mở rộng khung chứa để không bị clipping (cắt) bóng đổ drop-shadow */
      background-size: 34px 34px; /* Giữ nguyên kích thước hiển thị thực tế của Mặt trời/Mặt trăng là 34px */
      background-repeat: no-repeat;
      background-position: center;
      z-index: 5;
      pointer-events: none;
      animation: celestialFloat 3s ease-in-out infinite alternate;
      /* Mặc định là Mặt trời (Giao diện sáng) */
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23fdcb6e" stroke="%23fdcb6e" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>');
      filter: drop-shadow(0 2px 8px rgba(253, 203, 110, 0.45));
    }

    /* Mặt trời (Giao diện hoàng hôn) */
    body.theme-3 .streak-celestial-body {
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23f43f5e" stroke="%23f43f5e" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>');
      filter: drop-shadow(0 2px 8px rgba(244, 63, 94, 0.5));
    }

    /* Mặt trăng (Giao diện tối & Đêm) */
    body.dark .streak-celestial-body,
    body.theme-5 .streak-celestial-body {
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffd54f"><path d="M12.3 22a9.5 9.5 0 0 1-9.5-9.5c0-3.7 2.1-7 5.4-8.6a.7.7 0 0 1 .9.8 7.3 7.3 0 0 0 10 10 .7.7 0 0 1 .8.9 9.5 9.5 0 0 1-7.6 6.4z"/></svg>');
      filter: drop-shadow(0 0 8px rgba(255, 213, 79, 0.75)) drop-shadow(0 0 15px rgba(255, 213, 79, 0.4));
    }

    @keyframes celestialFloat {
      from { transform: translateY(0); }
      to { transform: translateY(-4px); }
    }

    body.dark .streak-game-stage {
      background: linear-gradient(180deg, #26364d 0%, #48384d 55%, #485d3e 56%, #34462f 100%);
      border-color: rgba(255, 255, 255, 0.06);
      box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.2);
    }

    body.theme-3 .streak-game-stage {
      background: linear-gradient(180deg, rgba(255, 235, 240, 0.55) 0%, rgba(255, 255, 255, 0.8) 100%);
      border-color: rgba(var(--pink-rgb), 0.16);
      box-shadow: inset 0 3px 12px rgba(var(--pink-rgb), 0.02);
    }


    .streak-scenery { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
    .streak-cloud { position:absolute; width:54px; height:17px; border-radius:999px; background:rgba(255,255,255,.72); filter:blur(.1px); animation:streakCloudDrift 8s ease-in-out infinite alternate; }
    .streak-cloud::before,.streak-cloud::after { content:""; position:absolute; bottom:3px; border-radius:50%; background:inherit; }
    .streak-cloud::before { width:22px; height:22px; left:10px; }
    .streak-cloud::after { width:28px; height:28px; right:8px; }
    .streak-cloud.cloud-one { top:58px; left:18%; }
    .streak-cloud.cloud-two { top:88px; right:12%; transform:scale(.72); opacity:.7; animation-delay:-3s; }
    .streak-hill { position:absolute; bottom:35px; width:210px; height:90px; border-radius:50% 50% 0 0; background:rgba(102,145,72,.24); }
    .streak-hill.hill-one { left:-55px; transform:rotate(8deg); }
    .streak-hill.hill-two { right:-70px; bottom:26px; background:rgba(86,130,63,.2); transform:rotate(-7deg); }
    .streak-grass { position:absolute; left:0; right:0; bottom:0; height:46px; background:linear-gradient(180deg,rgba(98,139,66,.10),rgba(62,102,42,.22)); }
    .streak-grass::before { content:""; position:absolute; inset:-12px 0 auto; height:18px; background:repeating-linear-gradient(105deg,transparent 0 9px,rgba(67,113,44,.32) 10px 12px,transparent 13px 19px); }
    @keyframes streakCloudDrift { from{translate:-5px 0} to{translate:9px -2px} }
    body.dark .streak-scenery { opacity:.7; filter:saturate(.72) brightness(.72); }

    /* Vòng tiến độ quanh vật phẩm — tách riêng khỏi icon để luôn hiển thị rõ. */
    .streak-watering-can {
      overflow: visible;
      isolation: isolate;
    }

    /* Vòng tiến độ dùng nguyên SVG gốc từ app.js cũ. */
    .streak-watering-can > svg {
      display: block;
      width: 100%;
      height: 100%;
      overflow: visible;
      pointer-events: none;
    }

    .streak-stage-header {
      position: absolute;
      top: 12px;
      left: 12px;
      right: 12px;
      display: flex;
      align-items: center;
      gap: 12px;
      z-index: 8;
    }

    .streak-stage-badge {
      display: inline-block;
      font-size: 11px;
      font-weight: 900;
      color: var(--pink-dark);
      text-transform: uppercase;
      letter-spacing: 0.8px;
      background: rgba(var(--pink-rgb), 0.05);
      border: 1px solid rgba(var(--pink-rgb), 0.1);
      padding: 4px 10px;
      border-radius: 999px;
      line-height: 1;
      white-space: nowrap;
    }

    body.dark .streak-stage-badge {
      background: rgba(255, 139, 176, 0.08);
      border-color: rgba(255, 139, 176, 0.18);
      color: var(--pink-light);
    }

    .streak-stage-header .streak-cycle-progress {
      flex: 1;
      margin-bottom: 0 !important;
      padding: 0 !important;
      display: flex;
      align-items: center;
    }

    .streak-stage-header .streak-cycle-label {
      display: none !important;
    }

    .streak-stage-header .streak-cycle-bar {
      width: 100%;
      height: 6px;
      background: rgba(var(--pink-rgb), 0.06);
      border-radius: 999px;
      overflow: hidden;
      border: 1px solid rgba(var(--pink-rgb), 0.04);
    }

    body.dark .streak-stage-header .streak-cycle-bar {
      background: rgba(255, 255, 255, 0.05);
      border-color: rgba(255, 255, 255, 0.05);
    }

    .streak-flower-wrap {
      position: absolute;
      bottom: 25px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 82px;
      line-height: 1;
      user-select: none;
      pointer-events: none;
      transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .streak-flower-wrap.shake {
      animation: flowerShaking 0.15s ease-in-out infinite alternate;
    }

    .streak-flower-wrap.bloom {
      animation: flowerBlooming 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.5) forwards;
    }

    @keyframes flowerShaking {
      0% { transform: translateX(-52%) scale(1.02) rotate(-2deg); }
      100% { transform: translateX(-48%) scale(1.02) rotate(2deg); }
    }

    @keyframes flowerBlooming {
      0% { transform: translateX(-50%) scale(1); }
      50% { transform: translateX(-50%) scale(1.22) rotate(8deg); }
      100% { transform: translateX(-50%) scale(1.12) rotate(0deg); }
    }

    .streak-watering-can {
      position: absolute;
      top: 50px;
      right: 30px;
      width: 68px;
      height: 68px;
      cursor: grab;
      user-select: none;
      z-index: 10;
      transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      touch-action: none;
    }

    .streak-watering-can:hover {
      transform: translateY(-4px) scale(1.06);
    }

    .streak-watering-can:active {
      transform: scale(0.96);
      cursor: grabbing;
    }

    .streak-watering-can.tilting {
      transform: rotate(-35deg) scale(1.05);
    }

    .streak-watering-can-svg {
      display: block;
      width: 100%;
      height: 100%;
    }

    .droplets-container {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 5;
    }

    .droplet {
      position: absolute;
      width: 5px;
      height: 15px;
      background: linear-gradient(180deg, rgba(116, 185, 255, 0.95), rgba(9, 132, 227, 0.95));
      border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
      filter: drop-shadow(0 2px 4px rgba(9, 132, 227, 0.3));
      opacity: 0.9;
      animation: dropFalling 0.48s linear forwards;
    }
    .droplet.is-seed {
      background: linear-gradient(180deg, #f39c12, #d35400) !important;
      border-radius: 50% !important;
      filter: drop-shadow(0 1px 3px rgba(211, 84, 0, 0.4));
      width: 6px !important;
      height: 6px !important;
    }

    @keyframes dropFalling {
      0% {
        transform: translateY(0) scaleY(1);
        opacity: 0.85;
      }
      80% {
        opacity: 0.7;
      }
      100% {
        transform: translateY(120px) scaleY(0.4);
        opacity: 0;
      }
    }

    .streak-progress-bar {
      width: 100%;
      height: 14px;
      background: rgba(var(--pink-rgb), 0.08);
      border-radius: 999px;
      overflow: hidden;
      border: 1px solid rgba(var(--pink-rgb), 0.08);
      margin-bottom: 8px;
      position: relative;
    }

    body.dark .streak-progress-bar {
      background: rgba(255, 255, 255, 0.05);
      border-color: rgba(255, 255, 255, 0.05);
    }

    .streak-progress-fill {
      height: 100%;
      width: 0%;
      background: linear-gradient(135deg, var(--pink-light), var(--pink));
      border-radius: 999px;
      transition: width 0.12s linear;
    }

    .streak-game-help {
      font-size: 13px;
      font-weight: 800;
      color: var(--text-soft);
      line-height: 1.45;
      max-width: 320px;
      margin: 0 auto;
      text-align: center;
    }

    @media (max-width: 600px) {
      .streak-popup-backdrop {
        padding: 12px;
      }
      .streak-popup-card {
        width: min(400px, 94%);
        border-radius: 28px;
        padding: 24px 22px 20px;
      }
      .streak-popup-close {
        top: 10px;
        right: 10px;
        width: 32px;
        height: 32px;
      }
      .streak-popup-title {
        font-size: 21px;
        margin-top: -12px;
        margin-bottom: 4px;
      }
      .streak-popup-subtitle {
        font-size: 12.5px;
        margin-bottom: 32px;
      }
      .streak-game-stage {
        height: 220px;
        margin-bottom: 16px;
        background: linear-gradient(180deg, #dff4fb 0%, #f7eefa 55%, #d8e8b7 56%, #aecb84 100%);
        border: 1.5px solid rgba(255,255,255,.72);
        border-radius: 22px;
        padding: 12px;
        overflow: hidden;
        isolation: isolate;
        box-shadow:
          inset 0 3px 12px rgba(87,122,86,.08),
          0 8px 24px rgba(var(--pink-rgb), 0.05);
      }
      body.dark .streak-game-stage {
        background: linear-gradient(180deg, #26364d 0%, #48384d 55%, #485d3e 56%, #34462f 100%);
        border-color: rgba(255,255,255,.08);
      }
      .streak-stage-header {
        top: 10px;
        left: 10px;
        right: 10px;
        gap: 8px;
      }
      .streak-stage-badge {
        font-size: 10px;
        padding: 3px 8px;
      }
      .streak-stage-header .streak-cycle-bar {
        height: 10px;
      }
      .streak-flower-wrap {
        width: 140px;
        height: 140px;
        bottom: 24px;
        font-size: 130px;
      }
      .streak-flower-wrap > svg {
        width: 140px !important;
        height: 140px !important;
        max-width: none;
      }
      .streak-watering-can {
        width: 72px;
        height: 72px;
        top: 42px;
        right: 10px;
      }
      .streak-watering-can > svg,
      .streak-watering-can-svg {
        width: 72px !important;
        height: 72px !important;
        max-width: none;
      }
      .streak-progress-bar {
        height: 12px;
        margin-bottom: 10px;
      }
      .streak-game-help {
        font-size: 13px;
      }
    }


    @media (max-width: 360px) {
      .streak-flower-wrap {
        width: 124px;
        height: 124px;
        font-size: 116px;
        bottom: 20px;
      }
      .streak-flower-wrap > svg {
        width: 124px !important;
        height: 124px !important;
      }
      .streak-watering-can {
        width: 66px;
        height: 66px;
        top: 44px;
        right: 7px;
      }
      .streak-watering-can > svg,
      .streak-watering-can-svg {
        width: 66px !important;
        height: 66px !important;
      }
    }

    /* ✅ STREAK CYCLE PROGRESS BAR (TOP) - REFINED & MINIMAL */
    .streak-cycle-progress {
      width: 100%;
      margin-bottom: 18px;
      padding: 0;
      text-align: left;
    }
    .streak-cycle-label {
      font-size: 10px;
      font-weight: 700;
    }

    /* Ẩn thanh tiến trình sinh trưởng ở đầu khung game.
       Badge giai đoạn vẫn được giữ nguyên. */
    .streak-stage-header .streak-cycle-progress {
      display: none !important;
    }

    /* Safari/iOS: giữ nền game độc lập với texture của body và backdrop-filter. */
    @supports (-webkit-touch-callout: none) {
      .streak-popup-backdrop {
        background: rgba(61,43,43,.48);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
      }
      .streak-popup-card {
        background: rgba(255,255,255,.96);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        transform: translateZ(0);
      }
      body.dark .streak-popup-card {
        background: rgba(43,43,43,.96);
      }
      .streak-game-stage {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        background-color: #dff4fb;
      }
    }

/* Timeline: desktop hiển thị 4 cột ảnh; mobile giữ nguyên 2 cột. */
@media (min-width: 900px) {
  #panel-timeline .month-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: none;
    width: 100%;
    margin: 0;
    gap: 12px;
  }
}

/* Final polish: đồng bộ spinner hồng và loại bỏ nền lỗi quanh icon trạng thái. */
.topbar.action-progress:not(.action-done) .music-player-bar.notify-timeline .play-control {
  background: transparent !important;
  box-shadow: none !important;
}
.topbar.action-progress.action-done .play-control {
  border: 0 !important;
  color: var(--pink) !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.topbar.action-progress.action-done .music-player-bar.notify-timeline .play-control,
.topbar.action-progress.action-done .music-player-bar.notify-success .play-control {
  background: transparent !important;
  box-shadow: none !important;
}
.topbar.action-progress .play-control::before,
.topbar.action-progress .play-control::after,
.topbar-action-spinner::before,
.topbar-action-spinner::after,
.topbar-action-check::before,
.topbar-action-check::after {
  content: none !important;
  display: none !important;
}


/* Mobile streak trigger: cho phép tap ổn định, không bị gesture của trình duyệt nuốt. */
#streakTopBtn{
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

    #boothShutter:disabled {
      opacity: .45;
      cursor: not-allowed;
      transform: none !important;
    }

/* Hiệu ứng fade-in mượt mà cho Story và Timeline mới khi đồng bộ ngầm mỗi 5s */
@keyframes storyFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.94) translateY(10px);
    filter: brightness(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: brightness(1);
  }
}
.story-fade-in {
  animation: storyFadeIn 0.52s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}