/* ==========================================================
   拾光集 · Z&Y
   一块软木板上贴满了拍立得，胶带还带着毛边。
   风格规范见 docs/02-前端与UI设计.md
   ========================================================== */

/* ---------- 设计令牌 ---------- */
:root {
    /* 纸与板 */
    --cork: #e8c99b;
    --cork-deep: #d9b384;
    --paper: #fffdf4;
    --page: #fdf6e9;

    /* 墨线（唯一的深色） */
    --ink: #4a3b28;

    /* 品牌色：草莓牛奶 */
    --brand: #f27e7e;
    --brand-deep: #e06565;

    /* 和纸胶带四色 */
    --tape-pink: #f9c6c9;
    --tape-mint: #bfe3d0;
    --tape-lemon: #fbe3a3;
    --tape-sky: #c3ddf2;

    --shadow: 4px 4px 0 rgba(74, 59, 40, .22);
    --shadow-lift: 7px 9px 0 rgba(74, 59, 40, .18);

    /* 字体 */
    --font-round: "ZCOOL KuaiLe", "Yuanti SC", "YouYuan", "幼圆", ui-rounded, sans-serif;
    --font-note: "Kaiti SC", "KaiTi", "楷体", serif;
    --font-num: "Courier New", monospace;

    --header-h: 60px;

    /* 木框与留白：框宽 + 框与内容的间距 */
    --frame-w: 7px;
    --frame-gap: 8px;
    --inset: calc(var(--frame-w) + var(--frame-gap));
}

/* ---------- 重置 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* hidden 属性优先级最高：防止下面的 display:flex 把它盖掉 */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-round), -apple-system, sans-serif;
    color: var(--ink);
    min-height: 100dvh;
    /* 软木板：底色 + 两层斑点 + 一层压暗 */
    background-color: var(--cork);
    background-image:
        radial-gradient(rgba(74, 59, 40, .09) 1px, transparent 1.4px),
        radial-gradient(rgba(255, 252, 240, .35) 1px, transparent 1.6px),
        linear-gradient(rgba(74, 59, 40, .05), rgba(74, 59, 40, .05));
    background-size: 13px 13px, 23px 23px, 100% 100%;
}

body.no-scroll { overflow: hidden; }

img { max-width: 100%; }

button { font: inherit; color: inherit; }

/* ---------- 滚动条：软木暗槽 + 木色圆滑块，跟手账一个气质 ---------- */
html {
    overflow-x: hidden;          /* 横向滚轮轴不许出现 */
    scrollbar-gutter: stable;    /* 弹窗开关时竖直滚动条位置稳住，不闪 */
}

::-webkit-scrollbar { width: 10px; height: 10px; }

::-webkit-scrollbar-track {
    background: rgba(74, 59, 40, .08);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb {
    background: #c9a272;
    border-radius: 999px;
    border: 2px solid rgba(255, 253, 244, .85);
}

::-webkit-scrollbar-thumb:hover { background: #b08a5a; }

::-webkit-scrollbar-corner { background: transparent; }

/* Firefox 同一套配色 */
* {
    scrollbar-width: thin;
    scrollbar-color: #c9a272 rgba(74, 59, 40, .08);
}

/* ---------- 木框：一圈干净利落的实木细框 ---------- */
.board-frame {
    position: fixed;
    inset: 0;
    z-index: 60;
    pointer-events: none;
    border: var(--frame-w) solid #a97c50;
    /* 内侧一条极细的暗线，代替所有装饰 */
    box-shadow: inset 0 0 0 1px rgba(74, 59, 40, .15);
}

/* ---------- 顶栏：钉在木板上的纸条 ---------- */
.topbar {
    position: sticky;
    top: var(--inset);
    z-index: 40;
    margin: var(--inset) var(--inset) 0;
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 14px;
    box-shadow: var(--shadow);
}

.topbar-inner {
    max-width: 1280px;
    margin: 0 auto;
    height: var(--header-h);
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.logo-text {
    font-family: var(--font-round);
    font-size: 1.45rem;
    letter-spacing: .06em;
}

.logo-heart {
    width: 17px;
    height: 17px;
    fill: var(--brand);
    stroke: var(--ink);
    stroke-width: 1.6;
}

.topbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 桌面搜索框：手账纸条 */
.search-box {
    display: none;
    align-items: center;
    gap: 6px;
    background: var(--page);
    border: 2px solid var(--ink);
    border-radius: 999px;
    padding: 6px 12px;
}

.search-box .icon {
    width: 16px;
    height: 16px;
    stroke: var(--ink);
    stroke-width: 2.2;
    fill: none;
    stroke-linecap: round;
    flex-shrink: 0;
}

.search-box input {
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-note);
    font-size: .95rem;
    color: var(--ink);
    width: 150px;
}

.search-box input::placeholder { color: rgba(74, 59, 40, .45); }

/* 手机上的搜索行 */
.search-row {
    padding: 8px 14px 12px;
    border-top: 2px dashed var(--line, rgba(74, 59, 40, .18));
}

.search-row input {
    width: 100%;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--page);
    padding: 10px 16px;
    font-family: var(--font-note);
    font-size: 1rem;
    outline: none;
}

/* 麻绳吊星星（桌面才有地方挂） */
.hanging {
    display: none;
    position: relative;
    align-self: flex-start;
    height: var(--header-h);
    width: 30px;
    flex-shrink: 0;
    /* 绳子从悬挂点带着星星一起摆 */
    transform-origin: 50% 0;
    animation: hang-swing 4.2s ease-in-out infinite;
}

.hanging .string {
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 30px;
    background: var(--ink);
    transform: translateX(-50%);
}

.hanging .star {
    position: absolute;
    top: 28px;
    left: 50%;
    width: 22px;
    height: 22px;
    fill: var(--tape-lemon);
    stroke: var(--ink);
    stroke-width: 1.6;
    /* 星星挂在绳尾，比绳子慢半拍，像被甩着走 */
    transform-origin: 50% 0;
    animation: star-swing 4.2s ease-in-out infinite;
    animation-delay: .35s;
    animation-fill-mode: backwards;
}

/* 绳子的摆：整根绳从顶端荡起来 */
@keyframes hang-swing {
    0%, 100% { transform: rotate(-8deg); }
    50% { transform: rotate(8deg); }
}

/* 星星的摆：叠在绳尾上的小幅滞后摆动 */
@keyframes star-swing {
    0%, 100% { transform: translateX(-50%) rotate(-6deg); }
    50% { transform: translateX(-50%) rotate(6deg); }
}

/* ---------- 通用按钮：贴纸化 ---------- */
.btn {
    font-family: var(--font-round);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 9px 20px;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
    -webkit-tap-highlight-color: transparent;
}

.btn .icon {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2.2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 rgba(74, 59, 40, .24); }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 rgba(74, 59, 40, .24); }
.btn:disabled { opacity: .6; cursor: wait; }

.btn.primary { background: var(--brand); }
.btn.danger { background: var(--brand-deep); color: var(--paper); }
.btn.ghost { background: var(--paper); }

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--paper);
    box-shadow: var(--shadow);
    cursor: pointer;
}

.icon-btn .icon {
    width: 20px;
    height: 20px;
    stroke: var(--ink);
    stroke-width: 2.2;
    fill: none;
    stroke-linecap: round;
}

/* ---------- 和纸胶带（毛边靠 clip-path） ---------- */
.tape-pink, .tape-mint, .tape-lemon, .tape-sky {
    display: block;
    background-image:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .3) 0 5px, transparent 5px 11px);
    box-shadow: 0 1px 2px rgba(74, 59, 40, .18);
    clip-path: polygon(3% 10%, 0 34%, 2.5% 58%, 0 82%, 3% 100%, 96% 94%, 100% 72%, 97.5% 48%, 100% 24%, 96% 0, 6% 4%);
}

.tape-pink { background-color: var(--tape-pink); }
.tape-mint { background-color: var(--tape-mint); }
.tape-lemon { background-color: var(--tape-lemon); }
.tape-sky { background-color: var(--tape-sky); }

/* ---------- 手账横幅 ---------- */
.banner {
    max-width: 1280px;
    margin: 20px auto 6px;
    padding: 0 var(--inset);
    display: flex;
    justify-content: center;
}

.banner-paper {
    position: relative;
    background: var(--page);
    border: 2px solid var(--ink);
    border-radius: 3px;
    padding: 12px 26px;
    text-align: center;
    transform: rotate(-.6deg);
    box-shadow: var(--shadow);
}

.banner-tape {
    position: absolute;
    top: -10px;
    width: 64px;
    height: 20px;
}

.banner-tape-l { left: 14px; transform: rotate(-7deg); }
.banner-tape-r { right: 14px; transform: rotate(6deg); }

.banner-date {
    font-family: var(--font-num);
    font-size: .8rem;
    letter-spacing: .12em;
    color: rgba(74, 59, 40, .66);
}

.banner-line {
    font-family: var(--font-note);
    font-size: 1.02rem;
    margin-top: 3px;
}

/* 今天想对 YY 说的那句话（情话池按日期轮换） */
.banner-note {
    margin-top: 5px;
    font-family: var(--font-note);
    font-size: .9rem;
    color: var(--brand-deep);
}

.banner-note::before { content: '♡ '; }

/* ---------- 照片墙 ---------- */
.wall {
    max-width: 1280px;
    margin: 0 auto;
    padding: 10px var(--inset) 70px;
}

.month { margin-top: 30px; }

.month-tag {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    background: var(--tape-lemon);
    border: 2px dashed var(--ink);
    border-radius: 999px;
    padding: 6px 18px;
    font-family: var(--font-round);
    font-size: 1.02rem;
    transform: rotate(-1.5deg);
    box-shadow: 2px 2px 0 rgba(74, 59, 40, .18);
    margin-bottom: 16px;
}

.month-count {
    font-family: var(--font-num);
    font-size: .76rem;
    opacity: .72;
}

/* 瀑布流：纯 CSS columns */
.masonry {
    columns: 2;
    column-gap: 14px;
}

.cell {
    break-inside: avoid;
    margin: 0 0 14px;
    /* 入场：照片被钉上墙（A1） */
    opacity: 0;
    transform: translateY(26px) rotate(4deg);
    transition: opacity .5s ease, transform .55s cubic-bezier(.34, 1.56, .64, 1);
    transition-delay: var(--d, 0s);
}

.cell.in {
    opacity: 1;
    transform: none;
}

/* 轻微呼吸（A2）：随机相位，非常轻 */
.cell.sway { animation: sway 6s ease-in-out infinite alternate; animation-delay: 1.4s; }

@keyframes sway {
    from { transform: rotate(-.5deg); }
    to { transform: rotate(.5deg); }
}

/* ---------- 拍立得卡片 ---------- */
.photo-card {
    position: relative;
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 4px;
    padding: 8px 8px 10px;
    box-shadow: var(--shadow);
    transform: rotate(var(--tilt, 0deg));
    transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.photo-card:hover {
    transform: rotate(0deg) translateY(-6px);
    box-shadow: var(--shadow-lift);
}

.card-tape {
    position: absolute;
    top: -11px;
    left: 50%;
    width: 72px;
    height: 21px;
    z-index: 2;
    transform: translateX(-50%) rotate(var(--tape-rot, -4deg));
}

.photo-frame {
    position: relative;
    border: 1px solid rgba(74, 59, 40, .25);
    border-radius: 2px;
    overflow: hidden;
    background: #f0e7d4;
    line-height: 0;
}

/* 多图的图集：右下角贴张数角标 */
.img-count {
    position: absolute;
    right: 6px;
    bottom: 6px;
    z-index: 2;
    padding: 2px 8px;
    border: 1.5px solid var(--ink);
    border-radius: 999px;
    background: rgba(255, 253, 244, .92);
    font-family: var(--font-num);
    font-size: .68rem;
    line-height: 1.4;
    color: var(--ink);
}

.photo-frame img {
    width: 100%;
    height: auto;
    display: block;
}

.photo-caption { padding: 8px 3px 0; }

.photo-date {
    font-family: var(--font-num);
    font-size: .72rem;
    letter-spacing: .08em;
    color: rgba(74, 59, 40, .68);
}

.photo-title {
    font-family: var(--font-round);
    font-size: .98rem;
    margin-top: 2px;
    overflow-wrap: anywhere;
}

.photo-note {
    font-family: var(--font-note);
    font-size: .9rem;
    line-height: 1.45;
    color: rgba(74, 59, 40, .85);
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* 卡片上的小心思：喜欢数与留言数 */
.photo-meta {
    display: flex;
    gap: 12px;
    margin-top: 6px;
    font-family: var(--font-num);
    font-size: .74rem;
    color: rgba(74, 59, 40, .6);
}

.photo-meta .is-liked { color: var(--brand-deep); }

/* 空格子收起来，免得留出多余的间距 */
.photo-meta span:empty { display: none; }

/* ---------- 排序小标签 ---------- */
.sort-row {
    max-width: 1280px;
    margin: 20px auto 0;
    padding: 0 16px;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.sort-pill {
    font-family: var(--font-round);
    font-size: .9rem;
    padding: 7px 16px;
    border: 2px dashed var(--ink);
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    opacity: .65;
    transition: all .2s ease;
    -webkit-tap-highlight-color: transparent;
}

.sort-pill:hover { opacity: 1; transform: translateY(-2px); }

.sort-pill.is-active {
    background: var(--tape-lemon);
    border-style: solid;
    box-shadow: 2px 2px 0 rgba(74, 59, 40, .18);
    opacity: 1;
    transform: rotate(-1.5deg);
}

/* ---------- 空相册 ---------- */
.empty {
    max-width: 1280px;
    margin: 40px auto;
    padding: 0 16px;
    display: flex;
    justify-content: center;
}

.empty-card {
    position: relative;
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 4px;
    box-shadow: var(--shadow);
    padding: 34px 30px 30px;
    transform: rotate(-1.6deg);
    text-align: center;
}

.empty-tape {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%) rotate(-3deg);
    width: 84px;
    height: 22px;
}

.empty-line-1 { font-family: var(--font-round); font-size: 1.25rem; }
.empty-line-2 { font-family: var(--font-note); font-size: .98rem; margin-top: 8px; color: rgba(74, 59, 40, .8); }

.empty-arrow {
    width: 54px;
    margin-top: 12px;
    stroke: var(--ink);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    transform: rotate(20deg);
}

.no-result {
    max-width: 1280px;
    margin: 26px auto;
    padding: 0 16px;
    text-align: center;
    font-family: var(--font-note);
    color: rgba(74, 59, 40, .85);
}

/* ---------- 页脚 ---------- */
.footer {
    text-align: center;
    padding: 8px var(--inset) calc(34px + env(safe-area-inset-bottom));
    font-family: var(--font-note);
    color: rgba(74, 59, 40, .85);
}

.heart-mark { color: var(--brand-deep); }

.footer-sign {
    margin-top: 4px;
    font-family: var(--font-round);
    font-size: .85rem;
    color: rgba(74, 59, 40, .6);
}

/* 退出登录：页脚上一颗低调的小纸扣 */
.logout-btn {
    margin-top: 10px;
    font-family: var(--font-note);
    font-size: .78rem;
    color: rgba(74, 59, 40, .55);
    background: transparent;
    border: 1.5px dashed rgba(74, 59, 40, .3);
    border-radius: 999px;
    padding: 3px 14px;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, transform .2s ease;
}

.logout-btn:hover {
    color: var(--brand-deep);
    border-color: var(--brand-deep);
    transform: rotate(-2deg);
}

/* ---------- 弹窗通用 ---------- */
.overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(58, 45, 28, .45);
}

.modal {
    position: relative;
    width: min(440px, 100%);
    max-height: calc(100dvh - 36px);
    overflow-y: auto;
    background: var(--page);
    border: 2px solid var(--ink);
    border-radius: 10px;
    box-shadow: 6px 6px 0 rgba(74, 59, 40, .25);
    padding: 24px 18px 18px;
    animation: pop-in .3s cubic-bezier(.34, 1.56, .64, 1);
}

.modal.small { width: min(340px, 100%); text-align: center; }

.modal-tape {
    position: absolute;
    top: -12px;
    left: 50%;
    width: 94px;
    height: 24px;
    transform: translateX(-50%) rotate(-3deg);
}

@keyframes pop-in {
    from { transform: scale(.92); opacity: 0; }
}

.modal-title {
    font-family: var(--font-round);
    font-size: 1.25rem;
    text-align: center;
    margin-bottom: 14px;
}

.confirm-text {
    font-family: var(--font-note);
    font-size: 1.05rem;
    line-height: 1.7;
    margin: 6px 0 18px;
}

.confirm-text strong { color: var(--brand-deep); }

/* 撕掉确认要从灯箱里弹出来：层级必须压过灯箱（110），不然点不到按钮 */
#confirmOverlay { z-index: 120; }

.modal-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
}

/* ---------- 表单字段 ---------- */
.field { display: block; margin-top: 12px; }

.field > span {
    display: block;
    font-family: var(--font-round);
    font-size: .92rem;
    margin-bottom: 5px;
}

.field em {
    font-style: normal;
    font-size: .78rem;
    color: rgba(74, 59, 40, .5);
}

.field input,
.field textarea {
    width: 100%;
    border: 2px solid var(--ink);
    border-radius: 8px;
    background: var(--paper);
    padding: 9px 12px;
    font-family: var(--font-note);
    font-size: .98rem;
    color: var(--ink);
    outline: none;
    resize: vertical;
}

.field input:focus,
.field textarea:focus {
    box-shadow: 3px 3px 0 rgba(74, 59, 40, .2);
}

/* ---------- 上传区 ---------- */
.dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 26px 16px;
    border: 2px dashed var(--ink);
    border-radius: 12px;
    background: rgba(255, 253, 244, .65);
    cursor: pointer;
    text-align: center;
    transition: background .2s ease, border-color .2s ease;
    -webkit-tap-highlight-color: transparent;
}

.dropzone.drag,
.dropzone:hover {
    background: var(--tape-mint);
    border-style: solid;
}

.dz-icon {
    width: 38px;
    height: 38px;
    stroke: var(--ink);
    stroke-width: 1.8;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dz-text {
    font-family: var(--font-note);
    font-size: .95rem;
    line-height: 1.5;
}

.picked-count {
    margin-top: 10px;
    font-family: var(--font-round);
    font-size: .9rem;
    color: rgba(74, 59, 40, .75);
}

.preview-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.preview-item {
    position: relative;
    width: 62px;
    height: 62px;
    border: 2px solid var(--ink);
    border-radius: 6px;
    overflow: hidden;
    background: #f0e7d4;
}

.preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.preview-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: rgba(74, 59, 40, .82);
    color: var(--paper);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 上传进度：墨线槽 + 品牌色填充 */
.progress {
    margin-top: 14px;
    height: 16px;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--paper);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    width: 0%;
    background: repeating-linear-gradient(-45deg, var(--brand) 0 8px, var(--brand-deep) 8px 16px);
    transition: width .2s ease;
}

.progress-text {
    margin-top: 6px;
    text-align: center;
    font-family: var(--font-round);
    font-size: .9rem;
    color: rgba(74, 59, 40, .75);
}

/* ---------- 灯箱 ---------- */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: flex;
    flex-direction: column;
}

.lb-backdrop {
    position: absolute;
    inset: 0;
    /* 加深一档的软木板，没有纯黑 */
    background:
        radial-gradient(rgba(74, 59, 40, .14) 1px, transparent 1.4px) 0 0/13px 13px,
        rgba(48, 37, 22, .88);
}

.lb-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    width: 44px;
    height: 44px;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: var(--paper);
    box-shadow: var(--shadow);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lb-close .icon {
    width: 20px;
    height: 20px;
    stroke: var(--ink);
    stroke-width: 2.4;
    stroke-linecap: round;
}

.lb-main {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* 留言全部摊开后内容可能比屏幕高：整块一起滚，只有这一条主题滚动条 */
    overflow-y: auto;
}

.lb-stage {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 52px 14px 8px;
    min-height: 0;
}

/* 图集进度圆点 */
.lb-dots {
    display: flex;
    gap: 7px;
    justify-content: center;
}

.lb-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 1.5px solid var(--ink);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}

.lb-dot.on {
    background: var(--brand-deep);
    border-color: var(--brand-deep);
    transform: scale(1.2);
}

.lb-photo-wrap {
    position: relative;
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 4px;
    padding: 10px 10px 12px;
    box-shadow: 8px 10px 0 rgba(0, 0, 0, .35);
    max-width: min(86vw, 860px);
    animation: lb-in .38s cubic-bezier(.34, 1.56, .64, 1);
}

.lb-photo-wrap.slide-l { animation: slide-l .3s ease; }
.lb-photo-wrap.slide-r { animation: slide-r .3s ease; }

@keyframes lb-in {
    from { transform: scale(.82); opacity: 0; }
}

@keyframes slide-l {
    from { transform: translateX(42px); opacity: 0; }
}

@keyframes slide-r {
    from { transform: translateX(-42px); opacity: 0; }
}

.lb-tape {
    position: absolute;
    top: -13px;
    left: 50%;
    width: 88px;
    height: 23px;
    transform: translateX(-50%) rotate(-2.5deg);
}

.lb-photo-wrap img {
    display: block;
    max-width: 100%;
    /* 手机上：照片为主，下面留出信息区 */
    max-height: 56dvh;
    width: auto;
    height: auto;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* 揉成纸团（A7） */
.lb-photo-wrap.tearing {
    animation: tear .45s ease-in forwards;
}

@keyframes tear {
    to { transform: scale(.06) rotate(24deg); opacity: 0; }
}

.lb-side {
    background: var(--page);
    border-top: 2px solid var(--ink);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    /* 不限高不滚动：留言从头到尾直接全部展示 */
}

.lb-date {
    font-family: var(--font-num);
    font-size: .78rem;
    letter-spacing: .1em;
    color: rgba(74, 59, 40, .66);
}

.lb-title {
    font-family: var(--font-round);
    font-size: 1.12rem;
    margin-top: 3px;
    overflow-wrap: anywhere;
}

.lb-title:empty, .lb-note:empty { display: none; }

.lb-note {
    font-family: var(--font-note);
    font-size: .96rem;
    line-height: 1.6;
    margin-top: 4px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.lb-hint {
    font-family: var(--font-note);
    font-size: .82rem;
    color: rgba(74, 59, 40, .45);
    margin-top: 10px;
}

.lb-editor .field { margin-top: 8px; }

/* 编辑器里的图片网格：每张贴着的图都能单独撕掉 */
.edit-img-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 8px;
}

.edit-img-item {
    position: relative;
    aspect-ratio: 1;
    border: 2px solid var(--ink);
    border-radius: 6px;
    overflow: hidden;
    background: #f0e7d4;
}

.edit-img-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.edit-img-remove {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: rgba(74, 59, 40, .82);
    color: var(--paper);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}

.edit-img-remove:hover { background: var(--tape-pink); color: var(--ink); }

/* 二次确认态：第一次点 × 先点亮成红的，再点一下才真的撕 */
.edit-img-remove.arm {
    background: var(--brand-deep);
    color: var(--paper);
    transform: scale(1.15);
}

.btn-add-img {
    width: 100%;
    margin-top: 8px;
}

.edit-img-count {
    margin-top: 6px;
    font-family: var(--font-num);
    font-size: .74rem;
    color: rgba(74, 59, 40, .55);
}

/* 喜欢数小气泡 */
.heart-count {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--brand);
    color: var(--ink);
    font-family: var(--font-num);
    font-size: .68rem;
    font-weight: bold;
    line-height: 16px;
}

/* ---------- 留言 ---------- */
.lb-comments {
    margin-top: 14px;
    border-top: 2px dashed rgba(74, 59, 40, .18);
    padding-top: 12px;
}

.lb-comments-title {
    font-family: var(--font-round);
    font-size: .95rem;
    margin-bottom: 8px;
}

.lb-comment-count {
    font-family: var(--font-num);
    font-size: .74rem;
    color: rgba(74, 59, 40, .55);
}

.lb-comment-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 6px;
}

.lb-comment {
    position: relative;
    background: var(--paper);
    border: 1.5px solid rgba(74, 59, 40, .35);
    border-radius: 2px 10px 10px 10px;
    padding: 7px 34px 7px 10px;
    animation: comment-in .3s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes comment-in {
    from { transform: scale(.9); opacity: 0; }
}

.lb-comment-text {
    font-family: var(--font-note);
    font-size: .9rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.lb-comment-date {
    font-family: var(--font-num);
    font-size: .66rem;
    color: rgba(74, 59, 40, .5);
    margin-top: 3px;
}

.lb-comment-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: rgba(74, 59, 40, .45);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}

.lb-comment-remove:hover { background: var(--tape-pink); color: var(--ink); }

/* 二次确认态：第一次点 × 先点亮成红的，再点一下才真的撤回 */
.lb-comment-remove.arm {
    background: var(--brand-deep);
    color: var(--paper);
    transform: scale(1.12);
}

.lb-comment-empty {
    font-family: var(--font-note);
    font-size: .84rem;
    color: rgba(74, 59, 40, .45);
    margin-bottom: 6px;
}

.lb-comment-form {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.lb-comment-form input {
    flex: 1;
    min-width: 0;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--paper);
    padding: 8px 14px;
    font-family: var(--font-note);
    font-size: .92rem;
    color: var(--ink);
    outline: none;
}

.lb-comment-form input:focus { box-shadow: 2px 2px 0 rgba(74, 59, 40, .2); }

.btn-send {
    min-height: auto;
    padding: 7px 16px;
    font-size: .88rem;
}

.lb-tools {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
}

.lb-btn {
    position: relative;
    width: 46px;
    height: 46px;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: var(--paper);
    box-shadow: var(--shadow);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s ease, box-shadow .15s ease;
    -webkit-tap-highlight-color: transparent;
}

.lb-btn .icon {
    width: 21px;
    height: 21px;
    stroke: var(--ink);
    stroke-width: 2.1;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lb-btn:hover { transform: translateY(-2px); box-shadow: 4px 5px 0 rgba(74, 59, 40, .2); }
.lb-btn:active { transform: translateY(2px); box-shadow: 0 0 0 rgba(74, 59, 40, .2); }

.lb-btn.danger { background: var(--brand-deep); }
.lb-btn.danger .icon { stroke: var(--paper); }

.lb-btn.heart .icon { fill: transparent; transition: fill .15s ease; }
.lb-btn.heart.liked .icon { fill: var(--brand-deep); stroke: var(--brand-deep); }
.lb-btn.heart.pulse { animation: pulse .35s ease; }

@keyframes pulse {
    40% { transform: scale(1.18); }
}

.lb-editor-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
}

/* ---------- 提示条 ---------- */
.toast {
    position: fixed;
    left: 50%;
    top: calc(var(--inset) + var(--header-h) + 14px); /* 从顶栏下方落下来 */
    transform: translateX(-50%);
    z-index: 230;
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 999px;
    padding: 10px 22px;
    box-shadow: var(--shadow);
    font-family: var(--font-round);
    font-size: .95rem;
    white-space: nowrap;
    animation: toast-in .3s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes toast-in {
    from { transform: translate(-50%, -18px); opacity: 0; }
}

/* 上传成功时炸开的小星星 */
.toast .spark {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    fill: var(--tape-lemon);
    stroke: var(--ink);
    stroke-width: 1.4;
    pointer-events: none;
    animation: spark .7s ease-out forwards;
}

@keyframes spark {
    from { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    to { transform: translate(var(--sx), var(--sy)) scale(.2) rotate(120deg); opacity: 0; }
}

/* ---------- 心形迸开（A8） ---------- */
.burst-heart {
    position: fixed;
    z-index: 130;
    width: 30px;
    height: 30px;
    fill: var(--like, #e85d75);
    stroke: var(--ink);
    stroke-width: 1.4;
    pointer-events: none;
    animation: heart-float .9s ease-out forwards;
}

@keyframes heart-float {
    0% { transform: translate(-50%, -50%) scale(.4); opacity: 0; }
    25% { transform: translate(-50%, -70%) scale(1.15); opacity: 1; }
    100% { transform: translate(-50%, -190%) scale(.9); opacity: 0; }
}

/* ---------- 相册封面：打开网站先看到的这一页 ---------- */
.cover-stage {
    position: fixed;
    inset: 0;
    z-index: 200;                /* 盖住内部，密码门(210)再盖在它上面 */
    perspective: 1600px;
    perspective-origin: 6% 50%;  /* 视点贴近书脊，翻页更立体 */
}

/* 封面页盖着时锁住下面的滚动 */
body.cover-on {
    overflow: hidden;
}

/* 封面这「一页」：绕左侧装订线翻开 */
.album-cover {
    position: absolute;
    inset: 0;
    background-color: #a97c50;   /* 与木框同色，像木框长出来的一页 */
    /* 细密的纸纹斑点，让封面不那么空 */
    background-image:
        radial-gradient(rgba(255, 248, 230, .07) 1px, transparent 1.5px),
        radial-gradient(rgba(74, 59, 40, .08) 1px, transparent 1.6px);
    background-size: 15px 15px, 26px 26px;
    transform-origin: left center;
    transition: transform 1.05s cubic-bezier(.55, .06, .28, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    box-shadow: 26px 0 44px rgba(74, 59, 40, .28);
    overflow: hidden;
}

/* 烫金双线内框：经典相册封面 */
.album-cover::before {
    content: "";
    position: absolute;
    inset: 22px;
    border: 1.5px solid rgba(255, 243, 208, .5);
    border-radius: 4px;
    pointer-events: none;
}

.album-cover::after {
    content: "";
    position: absolute;
    inset: 30px;
    border: 1px solid rgba(74, 59, 40, .3);
    border-radius: 3px;
    pointer-events: none;
}

/* 封面顶部斜贴一条粉胶带，呼应里面的手账 */
.album-cover .cover-tape {
    position: absolute;
    top: 26px;
    left: 50%;
    width: 72px;
    height: 20px;
    transform: translateX(-50%) rotate(-4deg);
    opacity: .85;
    animation: cover-fade .6s ease .4s backwards;
}

/* 中央星星圆贴纸 */
.cover-sticker {
    width: 88px;
    height: 88px;
    display: grid;
    place-items: center;
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 50%;
    box-shadow: 3px 4px 0 rgba(74, 59, 40, .22);
    animation: cover-pop .55s cubic-bezier(.34, 1.56, .64, 1) .15s backwards;
}

.cover-sticker svg {
    width: 44px;
    height: 44px;
    fill: var(--tape-lemon);
    stroke: var(--ink);
    stroke-width: 1.4;
}

.cover-title {
    margin: 26px 0 0;
    font-family: var(--font-round);
    font-size: 44px;
    letter-spacing: 12px;
    text-indent: 12px;         /* 抵消最后一个字的字距，保证视觉居中 */
    color: #fff8e6;
    text-shadow: 2px 3px 0 rgba(74, 59, 40, .3);
    animation: cover-rise .6s cubic-bezier(.22, 1, .36, 1) .35s backwards;
}

.cover-sub {
    margin: 14px 0 0;
    font-family: var(--font-note);
    font-size: 14px;
    color: rgba(255, 248, 230, .75);
    animation: cover-rise .6s cubic-bezier(.22, 1, .36, 1) .55s backwards;
}

/* 封面上的两个人：ZWL 和 YY */
.cover-couple {
    margin: 10px 0 0;
    font-family: var(--font-round);
    font-size: 16px;
    letter-spacing: 2px;
    color: #fff8e6;
    text-shadow: 1px 2px 0 rgba(74, 59, 40, .25);
    animation: cover-rise .6s cubic-bezier(.22, 1, .36, 1) .65s backwards;
}

/* 封面中间那颗实心爱心：亮粉 + 白高光，一眼就看到 */
.cover-couple .heart-mark {
    color: #ff8f8f;
    font-size: 1.25em;
    margin: 0 2px;
    text-shadow:
        0 0 1px #fff8e6,
        1px 2px 0 rgba(74, 59, 40, .35);
    animation: heart-beat 1.6s ease-in-out .8s infinite;
}

/* 封面手工小装饰：数量克制、大小统一、分布四角，慢悠悠地飘 */
.cover-deco {
    position: absolute;
    pointer-events: none;
    animation: deco-float 4.8s ease-in-out infinite;
}

/* 和纸胶带：与照片墙同款材质，右上 / 左下各一条 */
.cover-deco.deco-tape {
    width: 64px;
    height: 18px;
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px rgba(255, 253, 244, .4), 1px 2px 0 rgba(74, 59, 40, .14);
    opacity: .85;
}

.cover-deco.deco-tape.mint {
    top: 10%;
    right: 21%;
    --rot: -14deg;
    background: var(--tape-mint);
    animation-delay: -1.2s;
}

.cover-deco.deco-tape.lemon {
    bottom: 9%;
    left: 15%;
    --rot: 11deg;
    width: 50px;
    height: 15px;
    background: var(--tape-lemon);
    animation-delay: -2.6s;
}

.cover-deco.deco-tape.sky {
    top: 54%;
    right: 8%;
    --rot: -10deg;
    width: 48px;
    height: 14px;
    background: var(--tape-sky);
    animation-delay: -2s;
}

/* 邮票贴纸：白纸 + 虚线齿孔 + 品牌粉票面，左上 */
.cover-deco.deco-stamp {
    top: 13%;
    left: 18%;
    --rot: -5deg;
    width: 46px;
    padding: 4px;
    background: var(--paper);
    border-radius: 3px;
    box-shadow: 2px 3px 0 rgba(74, 59, 40, .18);
    animation-delay: -3.9s;
}

.cover-deco.deco-stamp::before {
    content: "";
    display: block;
    height: 50px;
    background: linear-gradient(160deg, var(--brand) 0%, var(--brand-deep) 100%);
    border: 1px dashed rgba(255, 253, 244, .75); /* 齿孔感 */
}

/* 星星纸扣：白圆纸片上一颗柠檬金小星，左下 */
.cover-deco.deco-star {
    bottom: 24%;
    left: 7%;
    --rot: 8deg;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    background: var(--paper);
    border-radius: 50%;
    box-shadow: 2px 3px 0 rgba(74, 59, 40, .18);
    animation-delay: -1.7s;
}

.cover-deco.deco-star svg {
    width: 17px;
    height: 17px;
    fill: #d9a83f;
}

/* 迷你拍立得：白框 + 一小块暖色「照片」，左侧中部 */
.cover-deco.deco-polaroid {
    top: 38%;
    left: 7%;
    --rot: -7deg;
    width: 52px;
    padding: 4px 4px 13px;
    background: var(--paper);
    border-radius: 2px;
    box-shadow: 2px 3px 0 rgba(74, 59, 40, .2);
    animation-delay: -.6s;
}

.cover-deco.deco-polaroid::before {
    content: "";
    display: block;
    aspect-ratio: 1;
    background: linear-gradient(135deg, var(--tape-pink) 0%, var(--tape-lemon) 100%);
    border: 1px solid rgba(74, 59, 40, .12);
}

/* 心形贴纸：白圆纸片上一颗品牌粉的实心心，右上 */
.cover-deco.deco-heart {
    top: 24%;
    right: 11%;
    --rot: 6deg;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    background: var(--paper);
    border-radius: 50%;
    box-shadow: 2px 3px 0 rgba(74, 59, 40, .18);
    animation-delay: -3.4s;
}

.cover-deco.deco-heart svg {
    width: 19px;
    height: 19px;
    fill: var(--brand);
}

/* 颜文字便签：淡黄便利贴纸条，右下 */
.cover-deco.deco-kaomoji {
    bottom: 17%;
    right: 9%;
    padding: 6px 11px;
    background: var(--tape-lemon);
    border: 1px solid rgba(74, 59, 40, .28);
    border-radius: 2px;
    box-shadow: 2px 3px 0 rgba(74, 59, 40, .18);
    font-family: var(--font-note);
    font-size: 14px;
    color: var(--ink);
    transform: rotate(4deg);
    animation: none;
}

@keyframes deco-float {
    /* --rot 保留各自的倾斜角，飘动时不会把角度冲直 */
    0%, 100% { transform: rotate(var(--rot, 0deg)) translateY(0); }
    50% { transform: rotate(var(--rot, 0deg)) translateY(-7px); }
}

@keyframes heart-beat {
    0%, 100% { transform: scale(1); }
    18% { transform: scale(1.22); }
    36% { transform: scale(1); }
}

/* 「翻开这本相册」按钮：像一枚贴在封面上的纸扣 */
.cover-open-btn {
    margin-top: 44px;
    font-family: var(--font-round);
    font-size: 17px;
    letter-spacing: 3px;
    color: var(--ink);
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 999px;
    padding: 12px 34px;
    cursor: pointer;
    box-shadow: 4px 5px 0 rgba(74, 59, 40, .3);
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease, background .25s ease;
    animation: cover-rise .6s cubic-bezier(.22, 1, .36, 1) .75s backwards;
}

.cover-open-btn:hover {
    background: var(--tape-lemon);
    transform: translateY(-3px) rotate(-1.5deg);
    box-shadow: 6px 8px 0 rgba(74, 59, 40, .28);
}

.cover-open-btn:active {
    transform: translateY(0) scale(.97);
    box-shadow: 2px 3px 0 rgba(74, 59, 40, .3);
}

/* 封面元素的入场小动画 */
@keyframes cover-pop {
    from { transform: scale(0) rotate(-30deg); opacity: 0; }
    to { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes cover-rise {
    from { transform: translateY(22px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes cover-fade {
    from { opacity: 0; }
    to { opacity: .85; }
}

.album-cover.is-open {
    transform: rotateY(-104deg);
}

/* 减少动态效果：封面直接跳过，内部直接可见 */
@media (prefers-reduced-motion: reduce) {
    .cover-stage { display: none; }
    body.cover-on { overflow: auto; }
    .album-cover .cover-tape,
    .cover-sticker,
    .cover-title,
    .cover-sub,
    .cover-open-btn { animation: none; }
}

/* ---------- 密码门 ---------- */
.gate {
    position: fixed;
    inset: 0;
    z-index: 210;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    /* 深一档的软木板，把门后的世界先藏起来 */
    background:
        radial-gradient(rgba(74, 59, 40, .12) 1px, transparent 1.4px) 0 0/13px 13px,
        rgba(64, 50, 31, .72);
    animation: gate-in .4s ease;
}

@keyframes gate-in {
    from { opacity: 0; }
}

.gate.out { animation: gate-out .5s ease forwards; }

@keyframes gate-out {
    to { opacity: 0; transform: scale(1.05); }
}

.gate-panel {
    position: relative;
    width: min(320px, 100%);
    background: var(--page);
    border: 2px solid var(--ink);
    border-radius: 10px;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, .28);
    padding: 30px 22px 20px;
    text-align: center;
    animation: pop-in .38s cubic-bezier(.34, 1.56, .64, 1);
}

.gate.shake .gate-panel { animation: shake .4s ease; }

@keyframes shake {
    20% { transform: translateX(-7px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(3px); }
}

.gate-tape {
    position: absolute;
    top: -12px;
    left: 50%;
    width: 92px;
    height: 24px;
    transform: translateX(-50%) rotate(-3deg);
}

/* 门上挂的麻绳星星，和顶栏那颗同款同摆 */
.gate-hanging {
    position: absolute;
    top: 0;
    right: 22px;
    width: 26px;
    height: 44px;
    transform-origin: 50% 0;
    animation: hang-swing 4.2s ease-in-out infinite;
}

.gate-hanging .string {
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 26px;
    background: var(--ink);
    transform: translateX(-50%);
}

.gate-hanging .star {
    position: absolute;
    top: 24px;
    left: 50%;
    width: 18px;
    height: 18px;
    fill: var(--tape-lemon);
    stroke: var(--ink);
    stroke-width: 1.6;
    transform-origin: 50% 0;
    animation: star-swing 4.2s ease-in-out infinite;
    animation-delay: .35s;
    animation-fill-mode: backwards;
}

.gate-title {
    font-family: var(--font-round);
    font-size: 1.35rem;
}

.gate-sub {
    font-family: var(--font-note);
    font-size: .92rem;
    color: rgba(74, 59, 40, .7);
    margin-top: 5px;
}

.gate-dots {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 18px 0 16px;
}

.gate-dot {
    width: 13px;
    height: 13px;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: var(--paper);
    transition: background .18s ease, transform .18s ease;
}

.gate-dot.fill {
    background: var(--brand);
    transform: scale(1.15);
}

.gate-dot.wait { animation: dot-wait .8s ease infinite; }

@keyframes dot-wait {
    50% { transform: scale(.82); opacity: .55; }
}

.gate-pad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    max-width: 220px;
    margin: 0 auto;
}

.gate-key {
    font-family: var(--font-round);
    font-size: 1.15rem;
    min-height: 48px;
    border: 2px solid var(--ink);
    border-radius: 12px;
    background: var(--paper);
    box-shadow: 2px 2px 0 rgba(74, 59, 40, .2);
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
    -webkit-tap-highlight-color: transparent;
}

.gate-key:active {
    transform: translate(2px, 2px);
    box-shadow: 0 0 0 rgba(74, 59, 40, .2);
}

.gate-key-del { background: var(--tape-sky); }
.gate-key-ok { background: var(--brand); }

.gate-error {
    font-family: var(--font-note);
    font-size: .88rem;
    color: var(--brand-deep);
    margin-top: 14px;
    min-height: 1.2em;
    visibility: hidden;
}

.gate-error.show { visibility: visible; }

/* ---------- 入场动画（解锁 / 每次打开页面） ---------- */
.topbar,
.banner-paper,
.sort-row,
.footer {
    opacity: 0;
    transform: translateY(-16px);
    transition: opacity .55s ease, transform .6s cubic-bezier(.34, 1.56, .64, 1);
}

.banner-paper { transform: translateY(-16px) rotate(-.6deg); }
.sort-row { transition-delay: .16s; }
.footer { transform: translateY(12px); transition-delay: .22s; }

body.entered .topbar { opacity: 1; transform: none; }
body.entered .banner-paper { opacity: 1; transform: rotate(-.6deg); transition-delay: .1s; }
body.entered .sort-row { opacity: 1; transform: none; }
body.entered .footer { opacity: 1; transform: none; }

/* ==========================================================
   响应式：移动端优先，渐进增强
   ========================================================== */

/* 平板：木框稍宽，留白也跟着变大 */
@media (min-width: 640px) {
    :root {
        --frame-w: 10px;
        --frame-gap: 12px;
    }
    .search-box { display: flex; }
    .only-mobile { display: none; }
    .masonry { columns: 3; column-gap: 16px; }
    .cell { margin-bottom: 16px; }
    .lb-photo-wrap img { max-height: 64dvh; }
}

/* 桌面：灯箱变成左边照片右边手账纸 */
@media (min-width: 900px) {
    .hanging { display: block; }
    .masonry { columns: 4; }
    .lb-main {
        flex-direction: row;
        align-items: stretch;
        gap: 0;
    }
    .lb-stage {
        flex: 1;
        padding: 24px;
    }
    .lb-photo-wrap img { max-height: 78dvh; }
    .lb-side {
        width: 320px;
        flex-shrink: 0;
        border-top: none;
        border-left: 2px solid var(--ink);
        max-height: none;
        padding: 26px 20px;
        display: flex;
        flex-direction: column;
    }
    .lb-tools {
        margin-top: auto;
        padding-top: 20px;
    }
    .lb-hint { display: none; }
}

/* 大桌面 */
@media (min-width: 1200px) {
    .masonry { columns: 5; }
    .search-box input { width: 190px; }
}

/* 尊重系统的减少动态偏好 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .cell { opacity: 1; transform: none; }
}