/* ============================================================
   复古手账皮肤：牛皮纸 / 邮戳 / 拍立得
   加载在 styles.css 之后，只改视觉，不改功能。
   ============================================================ */

:root{
  --paper:#f7efdd;
  --paper-2:#efe3ca;
  --card:#fdf8ec;
  --line:#ddcbaa;
  --line-soft:#eee3cd;
  --ink:#2f2a21;
  --ink-2:#6d5e49;
  --ink-3:#9b896f;

  --pink:#c08a8b;
  --pink-soft:#f0e0d8;
  --coral:#a35648;
  --coral-soft:#f1e1d3;
  --butter:#c3a05a;
  --butter-soft:#f4ead0;
  --mint:#42604f;
  --mint-soft:#e4e8d9;
  --sky:#5d6f78;
  --sky-soft:#e4e6e0;
  --lilac:#776670;
  --lilac-soft:#e9e0dc;

  --accent:#8a3d3f;
  --danger:#a1463c;
  --wine:#7c3a3d;
  --wine-deep:#5e2b2f;
  --forest:#2f4a3c;
  --ochre:#c2a05b;
  --kraft:#d8c098;
  --ink-line:rgba(74,55,38,.28);

  --shadow:0 2px 0 rgba(88,66,42,.12), 0 10px 22px rgba(88,66,42,.10);
  --shadow-soft:0 1px 0 rgba(88,66,42,.10), 0 5px 12px rgba(88,66,42,.07);

  --round:"LXGW WenKai","Kaiti SC","STKaiti","KaiTi","PingFang SC","Microsoft YaHei",serif;
  --serif:"Songti SC","STSong","SimSun",Georgia,"Times New Roman",serif;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  --grain-full:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='1040'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='480' height='1040' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  --torn-edge:polygon(0% 2.2%,2% 0.8%,5% 1.8%,9% 0.4%,14% 1.5%,19% 0.2%,25% 1.3%,32% 0.5%,39% 1.7%,46% 0.3%,54% 1.4%,62% 0.2%,70% 1.3%,78% 0.4%,86% 1.5%,93% 0.3%,97% 1.2%,100% 2.4%,99.2% 8%,100% 15%,99.3% 22%,100% 30%,99.1% 38%,100% 46%,99.3% 54%,100% 62%,99.1% 70%,100% 78%,99.3% 86%,100% 93%,99.4% 97.5%,97% 99.4%,93% 98.2%,88% 99.5%,83% 98.1%,77% 99.6%,71% 98.3%,65% 99.5%,59% 98.2%,53% 99.4%,47% 98.1%,41% 99.6%,35% 98.3%,29% 99.5%,23% 98.2%,17% 99.4%,11% 98.1%,6% 99.5%,2% 98.3%,0% 99.4%,0.8% 93%,0% 86%,0.9% 78%,0% 70%,0.8% 62%,0% 54%,0.9% 46%,0% 38%,0.8% 30%,0% 22%,0.9% 15%,0% 8%);
}

html{background:#f0e3c9;}
body{color:var(--ink);background:transparent;}

/* 纸张底色：暖白纤维 + 轻微晕影 */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-color:#f8f1e1;
  background-image:
    linear-gradient(to right, rgba(120,90,50,.07) 1px, rgba(255,255,255,0) 1px),
    linear-gradient(to bottom, rgba(120,90,50,.07) 1px, rgba(255,255,255,0) 1px),
    radial-gradient(ellipse at 50% -12%, rgba(255,252,242,.92), rgba(255,252,242,0) 62%),
    radial-gradient(ellipse at 102% 104%, rgba(116,86,48,.09), rgba(116,86,48,0) 54%),
    radial-gradient(ellipse at -8% 58%, rgba(150,118,72,.05), rgba(150,118,72,0) 46%);
  background-size:20px 20px,20px 20px,auto,auto,auto;
  background-repeat:repeat,repeat,no-repeat,no-repeat,no-repeat;
  box-shadow:inset 0 0 100px rgba(116,86,48,.08);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--grain-full);
  background-size:100% 100%;
  background-repeat:no-repeat;
  opacity:.08;
}

/* 原来的马卡龙小装饰全部退场，换成纸页上的铅笔划线 */
.bg-decor{display:block;}
.bg-decor .deco{display:none;}
.deco-bow{display:none;}
.bg-decor::before{
  content:"";position:absolute;right:-26px;top:154px;width:172px;height:64px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='172' height='64' viewBox='0 0 172 64'%3E%3Cg fill='none' stroke='%235b4a35' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M6 14c22-9 38-8 54-2s30 8 52-1 40-7 54 2'/%3E%3Cpath d='M14 29c20-6 34-4 49 1s31 6 49-1 31-5 43 1'/%3E%3Cpath d='M24 44c16-5 27-3 40 1s29 4 43-1 27-4 38 1'/%3E%3C/g%3E%3C/svg%3E") no-repeat;
  opacity:.16;transform:rotate(-7deg);
}
.bg-decor::after{
  content:"";position:absolute;left:-16px;bottom:150px;width:76px;height:24px;
  background:rgba(208,190,154,.5);transform:rotate(28deg);
  clip-path:polygon(2% 8%,100% 0,96% 94%,0 100%);
}

/* ---------- 顶栏 ---------- */
.topbar{
  padding:calc(var(--safe-t) + 15px) 20px 13px;
  background:none;border:0;box-shadow:none;isolation:isolate;
}
.topbar::after{display:none;}
.topbar::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='44' viewBox='0 0 96 44'%3E%3Cg fill='none' stroke='%237a5a3f' stroke-opacity='.2' stroke-width='1'%3E%3Cpath d='M2 8c8-6 16 6 24 0s16 6 24 0 16 6 24 0 16 6 20 0'/%3E%3Cpath d='M2 18c8-6 16 6 24 0s16 6 24 0 16 6 24 0 16 6 20 0'/%3E%3Cpath d='M2 28c8-6 16 6 24 0s16 6 24 0 16 6 24 0 16 6 20 0'/%3E%3Cpath d='M2 38c8-6 16 6 24 0s16 6 24 0 16 6 24 0 16 6 20 0'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg,#fbf4e6 0%,#f5ebd7 100%);
  background-position:right 66px top calc(var(--safe-t) + 20px),0 0;
  background-size:96px 44px,auto;
  background-repeat:no-repeat,no-repeat;
  clip-path:var(--torn-edge);
  filter:drop-shadow(0 2px 3px rgba(90,70,45,.10));
}
.topbar-text h1{
  font-family:var(--sans);
  font-size:26px;font-weight:800;letter-spacing:.01em;
  color:#2c261e;
  text-shadow:0 1px 0 rgba(255,255,255,.55);
}
.topbar-text p{margin:7px 0 0 1px;font-size:12.5px;color:#75644d;letter-spacing:.05em;}
.brand-emoji{
  width:36px;height:36px;border-radius:3px;
  font-size:18px;
  background:linear-gradient(160deg,#eee0c0,#ddc8a2);
  border:1px solid #c4ad86;
  box-shadow:2px 2px 0 rgba(90,65,35,.12);
  transform:rotate(-7deg);
  clip-path:polygon(4% 4%,94% 0,100% 90%,82% 100%,0 94%);
  animation:none;
}
.round-btn{
  width:45px;height:45px;
  background:transparent;
  border:1.4px solid rgba(91,71,49,.55);
  box-shadow:inset 0 0 0 3px #f4ebd7, inset 0 0 0 4px rgba(91,71,49,.30), 0 2px 0 rgba(90,70,45,.10);
  transform:rotate(-5deg);
}
.round-btn svg{stroke:#5b4731;stroke-width:1.5;}
.round-btn:active{transform:scale(.93) rotate(-8deg);}

/* ---------- 信封封面卡 ---------- */
.hero{
  position:relative;
  margin:10px 1px 4px;
  padding:27px 22px 22px;
  background:none;
  border:0;
  box-shadow:none;
  transform:rotate(-.35deg);
  overflow:visible;
  isolation:isolate;
}
.hero-paper-back{
  position:absolute;inset:-2px;z-index:0;
  background:#f1e3c8;
  clip-path:var(--torn-edge);
  filter:drop-shadow(0 2px 1px rgba(90,65,35,.12)) drop-shadow(0 10px 16px rgba(90,65,35,.14));
}
.hero-paper{
  position:absolute;inset:0;z-index:1;
  background:
    var(--grain),
    radial-gradient(120% 90% at 18% 0%, rgba(255,250,235,.62), rgba(255,250,235,0) 60%),
    repeating-linear-gradient(0deg, rgba(118,88,52,.022) 0 2px, rgba(255,255,255,0) 2px 5px),
    linear-gradient(150deg,#e9d9ba 0%,#ddc7a2 48%,#d3ba92 100%);
  background-size:180px 180px,auto,auto,auto;
  background-repeat:repeat,no-repeat,no-repeat,no-repeat;
  clip-path:var(--torn-edge);
}
.hero-flap{
  position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;
  opacity:.85;
}
.hero-fold{
  position:absolute;left:0;right:0;top:63%;height:1px;pointer-events:none;z-index:2;
  background:linear-gradient(90deg,rgba(96,70,42,0) 0%,rgba(96,70,42,.26) 7%,rgba(96,70,42,.26) 93%,rgba(96,70,42,0) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.35);
}
.hero-tape{
  position:absolute;left:-12px;top:-4px;width:96px;height:28px;z-index:2;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.13) 0 5px,rgba(255,255,255,0) 5px 10px),
    rgba(226,210,176,.62);
  border-left:1px dashed rgba(120,90,55,.16);
  box-shadow:0 1px 2px rgba(90,60,30,.10);
  transform:rotate(-37deg);
  clip-path:polygon(2% 0,100% 6%,97% 100%,0 92%);
}
.hero-tape2{
  position:absolute;left:-20px;bottom:15px;width:72px;height:23px;z-index:2;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 5px,rgba(255,255,255,0) 5px 10px),
    rgba(220,202,166,.58);
  border-top:1px dashed rgba(120,90,55,.16);
  box-shadow:0 1px 2px rgba(90,60,30,.08);
  transform:rotate(34deg);
  clip-path:polygon(3% 8%,100% 0,96% 94%,0 100%);
}
.hero-tape3{
  position:absolute;right:-14px;top:8px;width:68px;height:21px;z-index:2;
  background:rgba(222,204,168,.52);
  border-bottom:1px dashed rgba(120,90,55,.14);
  transform:rotate(35deg);
  clip-path:polygon(0 6%,97% 0,100% 92%,4% 100%);
}
.hero-crease{
  position:absolute;left:64%;top:6%;bottom:5%;width:34px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.20) 42%,rgba(90,60,30,.07) 52%,rgba(255,255,255,0) 72%);
  transform:rotate(1.4deg);
}
.hero-stamp{
  position:absolute;right:12px;top:12px;width:66px;height:84px;padding:5px;z-index:3;
  background-color:#f0e5c9;
  background-image:radial-gradient(circle at 3px 3px, rgba(255,255,255,0) 2.05px, #f0e5c9 2.35px);
  background-size:7px 7px;
  box-shadow:0 2px 4px rgba(60,40,20,.20);
  transform:rotate(3.5deg);
}
.stamp-inner{
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  width:100%;height:100%;
  padding:4px 3px;
  background:linear-gradient(160deg,#59674f 0%,#3e4b3d 100%);
  border:1px solid #2f3a2d;
  box-shadow:inset 0 0 0 1px rgba(233,218,184,.18);
  color:#eadbb9;
}
.stamp-top{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  font-family:Georgia,"Times New Roman",serif;font-size:5.5px;
  letter-spacing:.08em;opacity:.82;
}
.stamp-top b{font-weight:400;}
.stamp-portrait{
  width:35px;height:35px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid rgba(233,218,184,.55);
  background:rgba(255,250,236,.06);
}
.stamp-bottom{font-family:var(--round);font-size:5px;letter-spacing:.08em;opacity:.78;}
.stamp-emoji{font-size:20px;line-height:1.1;filter:sepia(.32) saturate(.78) contrast(.95);}
.hero-buddy.stamp-emoji{
  position:static;right:auto;bottom:auto;
  display:block;width:auto;height:auto;border-radius:0;
  background:none;border:0;box-shadow:none;animation:none;
  font-size:20px;line-height:1.1;filter:sepia(.32) saturate(.78) contrast(.95);
}
.hero-postmark{
  position:absolute;right:8px;bottom:7px;width:76px;height:76px;
  opacity:.82;transform:rotate(-13deg);pointer-events:none;z-index:3;
}
.hero-postmark svg{width:100%;height:100%;display:block;}
.pm-ring{fill:none;stroke:#9c4a42;}
.pm-text{font-family:Georgia,"Times New Roman",serif;font-size:7px;letter-spacing:1.5px;fill:#9c4a42;}
.pm-year{font-family:Georgia,"Times New Roman",serif;font-size:11.5px;fill:#9c4a42;}
.pm-sub{font-family:var(--round);font-size:6.5px;letter-spacing:.18em;fill:#9c4a42;}
.hero-waves{
  position:absolute;right:70px;bottom:32px;width:60px;height:22px;
  opacity:.5;pointer-events:none;z-index:3;
}
.hero-waves svg{width:100%;height:100%;display:block;}
.hero-label,.hero-num,.hero-line{position:relative;z-index:3;}
.hero-label{
  position:relative;display:inline-block;margin-top:16px;padding:5px 13px 4px;
  border-radius:2px 8px 3px 7px;
  border:1px solid rgba(74,58,40,.30);
  background:linear-gradient(180deg,#f7ecd4,#f0e2c6);
  box-shadow:1px 2px 0 rgba(90,60,30,.12),0 0 0 3px rgba(236,221,190,.28);
  color:#3b3125;
  font-family:Georgia,"Times New Roman",serif;
  font-size:10.5px;letter-spacing:.2em;
  transform:rotate(-1.2deg);
}
.hero-label::before{
  content:"";position:absolute;left:-10px;top:-7px;width:36px;height:12px;
  background:rgba(214,195,158,.55);
  border-left:1px dashed rgba(120,90,55,.16);
  border-right:1px dashed rgba(120,90,55,.16);
  transform:rotate(-7deg);pointer-events:none;
}
.hero-num{display:flex;align-items:baseline;gap:9px;margin-top:9px;font-family:var(--serif);}
.hero-num b{
  font-family:Georgia,"Times New Roman",var(--serif);
  font-size:62px;line-height:.88;font-weight:400;letter-spacing:-.02em;
  color:#2f4a3c;text-shadow:none;
}
.hero-num i{font-style:normal;font-size:13.5px;color:#5d4d3a;font-family:var(--round);letter-spacing:.04em;}
.hero-line{
  margin:16px 0 0;padding-right:86px;
  font-size:12.8px;line-height:1.95;color:#5b4a36;letter-spacing:.02em;
}
.hero:active .hero-paper{filter:brightness(.985);}
.hero-open-hint{color:#816848;opacity:.72;letter-spacing:.08em;}
.hero-peek{
  border-color:#d3bd94;background:#fffaf0;
  box-shadow:0 7px 18px rgba(66,45,25,.2);
}
.letter-panel{
  background-color:#f7efdd;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='42' viewBox='0 0 110 42'%3E%3Cg fill='none' stroke='%237a5a3f' stroke-opacity='.11' stroke-width='1'%3E%3Cpath d='M0 10h110M0 30h110'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(circle at 18% 0%,rgba(255,252,241,.75),transparent 48%);
  background-size:110px 42px,auto;
}
.letter-panel::before{
  content:"";position:absolute;left:38px;top:0;bottom:0;width:1px;pointer-events:none;
  background:rgba(156,74,66,.13);
}
.letter-body{position:relative;z-index:1;}
.letter-close{color:#6d5239;}
.letter-memory:nth-child(2){transform:rotate(-.25deg);}
.letter-memory:nth-child(3){transform:rotate(.22deg);}
.letter-question{box-shadow:inset 0 0 0 1px rgba(120,90,55,.08);}

/* ---------- 记录展示页 ---------- */
.detail-panel{
  background-color:#f8f0de;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='42' viewBox='0 0 110 42'%3E%3Cg fill='none' stroke='%237a5a3f' stroke-opacity='.08' stroke-width='1'%3E%3Cpath d='M0 10h110M0 30h110'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(circle at 16% 0%,rgba(255,252,241,.7),transparent 50%);
  background-size:110px 42px,auto;
}
.detail-head{background:rgba(249,241,224,.96);border-bottom:1px dashed rgba(105,80,50,.24);}
.detail-heading{color:#5b4731;letter-spacing:.08em;}
.detail-head .text-btn{color:#826848;}
.detail-head .text-btn.is-primary{color:#7c3a3d;}
.detail-type{
  padding:5px 10px;border:1px solid rgba(120,90,55,.22);
  background:rgba(255,250,238,.68);color:#6e5a43;
}
.detail-title{font-family:var(--serif);font-size:34px;letter-spacing:.01em;}
.detail-photo{border-color:#fffaf0;box-shadow:0 5px 16px rgba(80,55,35,.18);}
.detail-photo:nth-child(odd){rotate:-.45deg;}
.detail-photo:nth-child(even){rotate:.45deg;}
.detail-note{
  background:rgba(255,251,241,.86);
  border-color:rgba(120,90,55,.24);
  box-shadow:0 5px 14px rgba(80,55,35,.08);
}
.detail-place{background:rgba(235,221,193,.36);border-color:#bfa77e;}
.nowrap{white-space:nowrap;}

/* ---------- 标题与分类 ---------- */
.view{padding:0 20px 124px;}
.section{margin-top:29px;}
.section-head{position:relative;margin-bottom:14px;align-items:flex-end;}
.section-head h2{
  position:relative;padding-bottom:7px;
  font-family:var(--round);font-size:17.5px;font-weight:700;
  letter-spacing:.06em;color:#33291f;
}
.section-head h2::after{
  content:"";position:absolute;left:0;right:-8px;bottom:0;height:5px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='5' viewBox='0 0 60 5'%3E%3Cpath d='M0 3c6-3 12 3 18 0s12 3 18 0 12 3 18 0' fill='none' stroke='%237c3a3d' stroke-width='1'/%3E%3C/svg%3E") repeat-x;
  opacity:.55;
}
.section-head span{font-family:var(--round);font-size:12px;color:#8a755a;letter-spacing:.04em;padding-bottom:3px;}
.section-head .text-btn{color:var(--wine);font-size:12.5px;}
.section-head .head-scribble{
  position:absolute;right:96px;top:-10px;
  font-family:"Segoe Script","Bradley Hand","Snell Roundhand",cursive;
  font-size:11px;letter-spacing:.08em;color:#a58d6c;opacity:.5;
  transform:rotate(-6deg);pointer-events:none;padding:0;
}

.type-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;}
.type-card{
  position:relative;z-index:0;isolation:isolate;
  display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;gap:0;
  min-height:94px;padding:7px 5px 6px;
  background:none;border:0;box-shadow:none;
  color:var(--tile-ink,#f7edd8);text-align:left;
  overflow:visible;
  transition:transform .18s ease;
}
.type-card::before{
  content:"";position:absolute;inset:-2px;z-index:-1;pointer-events:none;
  background:#f8efdc;
  clip-path:var(--torn-edge);
  filter:drop-shadow(0 1px 1px rgba(70,45,25,.16)) drop-shadow(0 4px 6px rgba(70,45,25,.10));
}
.type-card::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,0) 58%,rgba(70,45,25,.06)),
    var(--tile,#7c3a3d);
  clip-path:var(--torn-edge);
}
.type-card:active{transform:scale(.95) !important;}
.type-card .tc-top{display:flex;align-items:flex-start;justify-content:center;position:relative;z-index:1;}
.type-card .dot{
  width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;font-size:14px;
  background:linear-gradient(150deg,#f7eeda,#e9dcc0);
  border:1px solid rgba(60,40,25,.28);
  box-shadow:0 0 0 2px rgba(247,238,218,.22), 0 1px 2px rgba(40,25,15,.16);
  filter:sepia(.22) saturate(.8) contrast(.96);
}
.type-card .dot > *{filter:sepia(.12) saturate(.92);}
.tc-tag{
  margin-top:2px;
  padding:2px 5px 1px;
  background:#f1e5cb;
  border:1px solid rgba(90,65,40,.22);
  border-radius:2px;
  box-shadow:1px 1px 0 rgba(60,40,20,.12);
  color:#6d573d;
  font-family:Georgia,"Times New Roman",serif;
  font-size:6.2px;letter-spacing:.09em;line-height:1.2;
  transform:rotate(-6deg);
}
.tc-bottom{display:block;position:relative;z-index:1;margin-top:auto;text-align:center;}
.type-card .t-count{
  display:block;
  font-family:Georgia,"Times New Roman",var(--serif);
  font-size:22px;line-height:1;font-weight:400;
  color:var(--tile-ink,#f7edd8);letter-spacing:-.01em;
  text-shadow:0 1px 0 rgba(30,18,10,.14);
}
.type-card .t-name{
  display:block;margin-top:2px;
  font-family:var(--round);font-size:9.5px;line-height:1.2;
  color:var(--tile-ink,#f7edd8);opacity:.92;letter-spacing:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* 分类拼图里空出的两格，放一张拍立得 */
.type-memo{
  grid-column:span 2;position:relative;
  display:flex;align-items:flex-end;justify-content:flex-end;
  min-height:108px;padding:2px 5px 2px 0;
  background:none;border:0;box-shadow:none;text-align:left;
}
.memo-card{
  position:relative;display:block;
  width:64%;max-width:156px;
  padding:5px 5px 21px;
  background:linear-gradient(170deg,#fdf9ed,#f8f0dc);
  border:1px solid rgba(90,65,40,.18);
  box-shadow:0 7px 13px rgba(70,45,25,.14);
  transform:rotate(2.6deg);
  transition:transform .18s ease;
}
.type-memo:active .memo-card{transform:rotate(1deg) scale(.97);}
.memo-photo{
  display:block;width:100%;aspect-ratio:4/3;
  object-fit:cover;
  background:#e4d6ba;
  filter:sepia(.14) contrast(.97) saturate(.86);
}
.memo-photo.is-empty{
  position:relative;display:grid;place-items:center;
  font-family:Georgia,var(--serif);font-size:27px;color:#7b6647;
  background:
    repeating-linear-gradient(0deg, rgba(120,90,55,.10) 0 1px, rgba(255,255,255,0) 1px 19px),
    #ecdfc2;
  filter:none;
}
.memo-photo.is-empty::before{
  content:"";position:absolute;inset:8px;border:1px dashed rgba(120,90,55,.32);
}
.memo-photo.is-empty::after{
  content:"POST CARD";position:absolute;left:13px;bottom:9px;
  font-family:Georgia,"Times New Roman",serif;font-size:7px;letter-spacing:.18em;color:#7b6647;
}
.memo-cap{
  position:absolute;left:0;right:0;bottom:6px;
  padding:0 5px;text-align:center;
  font-family:var(--round);font-size:9.5px;color:#6c583f;
  letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.memo-tape{
  position:absolute;top:-8px;left:50%;width:44px;height:14px;
  transform:translateX(-50%) rotate(-4deg);
  background:rgba(220,202,164,.78);
  border-left:1px dashed rgba(120,90,55,.18);
  border-right:1px dashed rgba(120,90,55,.18);
}

/* ---------- 记录卡片 ---------- */
.entry-list{gap:11px;}
.entry{
  position:relative;z-index:0;isolation:isolate;
  padding:13px 12px 14px;
  --note-a:#fdf6e4;
  --note-b:#f8ecd0;
  background:none;border:0;box-shadow:none;
}
.entry::before{
  content:"";position:absolute;inset:-2px;z-index:-1;pointer-events:none;
  background:#f6ecd7;
  clip-path:var(--torn-edge);
  filter:drop-shadow(0 1px 1px rgba(88,66,42,.13)) drop-shadow(0 5px 8px rgba(88,66,42,.08));
}
.entry::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,rgba(120,90,50,.032) 0 1px,rgba(255,255,255,0) 1px 26px),
    linear-gradient(170deg,var(--note-a),var(--note-b));
  clip-path:var(--torn-edge);
}
.entry-tape{
  position:absolute;left:18px;top:-6px;width:40px;height:12px;z-index:3;
  background:rgba(220,202,166,.66);
  border-left:1px dashed rgba(120,90,55,.15);
  border-right:1px dashed rgba(120,90,55,.15);
  transform:rotate(-2deg);pointer-events:none;
}
.entry:nth-child(odd){transform:rotate(-.35deg);}
.entry:nth-child(even){--note-a:#fcf3df;--note-b:#f6e8cc;transform:rotate(.28deg);}
.entry:active{transform:scale(.985) rotate(0);}
.entry-cover{
  border-radius:2px;border:2px solid #fffdf6;
  box-shadow:0 2px 5px rgba(70,50,30,.18);
  background:#e7d9bd;
}
.entry-cover img{filter:sepia(.1) saturate(.9) contrast(.98);}
.entry-title{font-family:var(--round);font-size:15.5px;color:#33291f;}
.entry-sub{color:#7b6a53;}
.entry-meta{color:#94816a;}
.tag{background:#eadfc6;color:#7a5a3c;border-radius:2px;padding:2px 7px;}
.stars-mini{color:#b8862f;}

/* ---------- 底部导航 ---------- */
.tabbar{
  background:none;border:0;box-shadow:none;
  isolation:isolate;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.tabbar::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:rgba(244,236,219,.97);
  clip-path:var(--torn-edge);
  filter:drop-shadow(0 -2px 4px rgba(90,70,45,.08));
}
.tab{color:#9b8970;font-size:10.5px;}
.tab{position:relative;z-index:1;}
.tab svg{opacity:.82;}
.tab.is-active{color:var(--wine);}
.tab.is-active svg{opacity:1;transform:translateY(-2px);}
.tab.is-active::before{
  top:2px;width:44px;height:28px;border-radius:14px;
  background:#efd8d1;
  border:1px solid rgba(138,61,63,.20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
}

/* ---------- 新建按钮：像一枚酒红火漆印 ---------- */
.fab{
  background:radial-gradient(circle at 34% 28%,#8f4a4c,#713235 72%);
  border:2px solid #f3e9d3;
  box-shadow:0 0 0 1px rgba(92,45,47,.55), 0 8px 16px rgba(90,50,45,.30);
  animation:none;
}
.fab svg{fill:#f7efdc;width:25px;height:25px;}

/* ---------- 搜索 / 筛选 ---------- */
.archive-tools{position:relative;}
.archive-search{
  position:relative;display:flex;align-items:center;
  min-height:54px;margin:9px 1px 0;padding:0 13px 0 15px;
  overflow:hidden;
  border:1px solid #c7aa7b;border-radius:3px 7px 4px 6px;
  background-color:#fcf5e6;
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.52),rgba(255,255,255,0) 58%),
    repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 29px,rgba(120,90,50,.07) 29px 30px),
    radial-gradient(120% 100% at 100% 100%,rgba(190,150,90,.10),rgba(190,150,90,0) 56%);
  background-size:auto,auto,auto;
  box-shadow:0 2px 0 rgba(88,66,42,.12), 0 7px 14px rgba(88,66,42,.08);
  transform:rotate(-.12deg);
}
.archive-search::before{
  content:"";position:absolute;left:7px;top:9px;bottom:9px;width:1px;
  background:rgba(120,90,50,.18);
}
.archive-search::after{
  content:"";position:absolute;right:-1px;bottom:-1px;width:16px;height:16px;
  border-radius:0 0 6px 0;pointer-events:none;
  background:linear-gradient(135deg,rgba(0,0,0,0) 0 47%,#dec9a3 48% 52%,#fbf4e4 53%);
}
.archive-search:focus-within{
  border-color:#9f7850;
  box-shadow:0 0 0 3px rgba(138,61,63,.09), 0 2px 0 rgba(88,66,42,.12), 0 7px 14px rgba(88,66,42,.08);
}
.archive-search-icon{
  flex:0 0 auto;width:18px;height:18px;fill:none;stroke:#8e714c;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.archive-search .search{
  flex:1 1 auto;min-width:0;width:auto;
  padding:14px 8px 13px 10px;
  border:0;border-radius:0;background:transparent;box-shadow:none;outline:none;
  color:#3c3023;font-size:16px;font-family:var(--round);
  -webkit-appearance:none;appearance:none;
}
.archive-search .search::-webkit-search-cancel-button,
.archive-search .search::-webkit-search-decoration{-webkit-appearance:none;appearance:none;}
.archive-search .search::placeholder{color:#9c8768;opacity:.9;}
.archive-search .search:focus{border:0;box-shadow:none;}
.archive-search-mark{
  flex:0 0 auto;margin-left:6px;padding:2px 1px 1px 5px;
  color:#a18862;font-family:var(--round);font-size:10px;
  letter-spacing:.12em;transform:rotate(-4deg);opacity:.72;
}
.sticker-row{
  align-items:center;gap:8px;margin:13px 0 13px;
  padding:7px 2px 4px;
}
.sticker-filter{
  position:relative;flex:0 0 auto;display:block;
  border:1px solid #cbb28c;border-radius:999px;
  background:linear-gradient(180deg,rgba(253,247,234,.97),rgba(242,231,209,.96));
  box-shadow:
    0 0 0 2.5px rgba(255,250,239,.64),
    0 2px 0 rgba(88,66,42,.12),
    0 5px 9px rgba(88,66,42,.07);
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.sticker-filter:nth-child(2){background:linear-gradient(180deg,rgba(252,248,235,.97),rgba(239,234,213,.96));}
.sticker-filter:nth-child(3){background:linear-gradient(180deg,rgba(253,245,235,.97),rgba(243,228,213,.96));}
.sticker-filter:focus-within{
  border-color:#a88056;
  box-shadow:0 0 0 3px rgba(138,61,63,.08), 0 2px 0 rgba(88,66,42,.12), 0 5px 9px rgba(88,66,42,.07);
}
.sticker-filter.is-set{
  border-color:#b89569;
  background:linear-gradient(180deg,#fdf7e9,#f0e0c2);
  box-shadow:
    0 0 0 2.5px rgba(255,250,239,.78),
    0 3px 0 rgba(116,82,42,.15),
    0 7px 12px rgba(88,66,42,.10);
}
.sticker-tape{
  position:absolute;left:50%;top:-5px;width:30px;height:9px;
  border-radius:1px;pointer-events:none;opacity:0;
  background:
    repeating-linear-gradient(90deg,rgba(184,151,108,.9) 0 4px,rgba(218,195,160,.8) 4px 7px);
  border-left:1px dashed rgba(95,70,42,.10);
  border-right:1px dashed rgba(95,70,42,.10);
  box-shadow:0 1px 2px rgba(80,55,30,.12);
  transform:translateX(-50%) rotate(-2.5deg) scaleY(.65);
  transition:opacity .16s ease,transform .16s ease;
}
.sticker-filter.is-set .sticker-tape{
  opacity:.96;transform:translateX(-50%) rotate(-2.5deg) scaleY(1);
}
.filter,.filter-select,.seg-btn,.view-switch button{
  border:1px solid #cfbb98;border-radius:4px;
  background:#f8f0dd;color:#6d5e49;
  box-shadow:0 1px 0 rgba(88,66,42,.08);
}
.sticker-filter .filter-select{
  padding:8px 23px 8px 12px;border:0;border-radius:999px;
  background-color:transparent;box-shadow:none;
  color:#6d5a40;font-size:12.5px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1.2l4 4 4-4' stroke='%238f7047' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;background-size:9px 6px;
}
.sticker-filter.is-set .filter-select{color:#563d24;font-weight:700;}
.filter.is-on,.seg-btn.is-on,.view-switch button.is-on{
  background:var(--wine);border-color:var(--wine);color:#f8efdb;
  box-shadow:0 2px 0 rgba(80,40,40,.18);
}
.view-switch{border:1px solid #cfbb98;background:#f3e9d3;border-radius:5px;}
.view-switch button.is-on{border-color:var(--wine);}
.filter-sep{background:#d8c6a4;}
.result-bar{color:#9b896f;}
.result-bar .text-btn{color:var(--wine);}

/* 最近记录 / 全部记录：用深一点的彩色纸边把便签从底色里托出来 */
.recent-list .entry:nth-child(5n+1){--edge:#a96f61;--tape:rgba(193,144,121,.78);--note-a:#fdf4e4;--note-b:#f3e1c9;}
.recent-list .entry:nth-child(5n+2){--edge:#a17d46;--tape:rgba(188,159,111,.78);--note-a:#fcf5e1;--note-b:#f1e3c2;}
.recent-list .entry:nth-child(5n+3){--edge:#6d8668;--tape:rgba(151,171,137,.76);--note-a:#f7f4e1;--note-b:#e9e4c9;}
.recent-list .entry:nth-child(5n+4){--edge:#70878d;--tape:rgba(153,173,178,.76);--note-a:#f5f4e5;--note-b:#e7e5d1;}
.recent-list .entry:nth-child(5n+5){--edge:#8d6d7b;--tape:rgba(177,150,161,.76);--note-a:#fbf1e5;--note-b:#ecddcf;}
.recent-list .entry::before{
  inset:-3px;background:var(--edge,#a96f61);
  filter:drop-shadow(0 1px 1px rgba(88,66,42,.18)) drop-shadow(0 5px 9px rgba(88,66,42,.12));
}
.recent-list .entry-tape{background:var(--tape,rgba(193,144,121,.78));}

/* 全部记录：旧纸便签叠一层彩色纸边和更暖的泛黄纸色 */
.archive-list{gap:13px;}
.archive-list .entry:nth-child(5n+1){--edge:#a96f61;--tape:rgba(193,144,121,.78);--note-a:#fdf4e2;--note-b:#f3e1c6;}
.archive-list .entry:nth-child(5n+2){--edge:#a17d46;--tape:rgba(188,159,111,.78);--note-a:#fcf4dd;--note-b:#f1e1bd;}
.archive-list .entry:nth-child(5n+3){--edge:#6d8668;--tape:rgba(151,171,137,.76);--note-a:#f7f3df;--note-b:#e9e2c5;}
.archive-list .entry:nth-child(5n+4){--edge:#70878d;--tape:rgba(153,173,178,.76);--note-a:#f5f3e3;--note-b:#e7e3cd;}
.archive-list .entry:nth-child(5n+5){--edge:#8d6d7b;--tape:rgba(177,150,161,.76);--note-a:#fbf0e3;--note-b:#ecdbcd;}
.archive-list .entry::before{
  inset:-3px;
  background:var(--edge,#a96f61);
  filter:drop-shadow(0 1px 1px rgba(88,66,42,.19)) drop-shadow(0 7px 12px rgba(88,66,42,.14));
}
.archive-list .entry::after{
  background:
    radial-gradient(120% 100% at 100% 100%,rgba(178,125,51,.12),rgba(178,125,51,0) 58%),
    repeating-linear-gradient(0deg,rgba(120,90,50,.034) 0 1px,rgba(255,255,255,0) 1px 26px),
    linear-gradient(170deg,var(--note-a),var(--note-b));
  background-size:auto,auto,auto;
}
.archive-list .entry-tape{
  background:var(--tape,rgba(193,144,121,.78));
  box-shadow:0 1px 2px rgba(88,66,42,.10);
}
.archive-list .entry-cover{
  box-shadow:
    0 0 0 3px rgba(255,252,243,.62),
    0 3px 7px rgba(70,50,30,.22);
}

/* ---------- 列表 / 相册墙 / 时间轴 ---------- */
.wall-img{
  border:4px solid #fffdf6;border-radius:3px;
  box-shadow:0 3px 8px rgba(80,55,35,.16);
}
.wall-tag{background:rgba(251,245,230,.94);border-radius:2px;color:#6d5e49;}
.wall-cap{color:#7b6a53;}
.timeline-page{padding-top:3px;}
.tl-group{position:relative;}
.tl-month{
  position:relative;display:inline-flex;align-items:center;gap:9px;
  margin:23px 0 16px 2px;padding:6px 13px 6px 7px;
  border:1px solid #2e3f34;border-radius:2px 8px 3px 7px;
  background:linear-gradient(180deg,#4f6655,#354b3d);
  color:#fbf2df;
  box-shadow:
    0 0 0 3px rgba(255,250,239,.40),
    1px 3px 0 rgba(58,40,25,.18),
    0 7px 13px rgba(73,49,30,.13);
  transform:rotate(-.65deg);
}
.tl-group:nth-child(4n+2) .tl-month{
  border-color:#4b292c;background:linear-gradient(180deg,#744749,#522f32);
}
.tl-group:nth-child(4n+3) .tl-month{
  border-color:#4d3b21;background:linear-gradient(180deg,#7c6339,#5a4628);
}
.tl-group:nth-child(4n+4) .tl-month{
  border-color:#2e4149;background:linear-gradient(180deg,#4e6871,#344c55);
}
.tl-month::before{
  content:"";position:absolute;left:34px;top:-6px;width:44px;height:12px;
  background:rgba(231,213,180,.68);
  border-left:1px dashed rgba(120,90,55,.16);
  border-right:1px dashed rgba(120,90,55,.16);
  transform:rotate(-3deg);pointer-events:none;
}
.tl-group:first-child .tl-month{margin-top:7px;}
.tl-month-no{
  flex:0 0 auto;display:grid;place-items:center;
  width:27px;height:27px;border:1px solid rgba(251,242,223,.66);border-radius:50%;
  color:#fbf2df;font-family:Georgia,"Times New Roman",serif;
  font-size:12px;line-height:1;letter-spacing:.04em;
  background:rgba(255,255,255,.045);
  box-shadow:inset 0 0 0 2px rgba(251,242,223,.07);
  transform:rotate(5deg);
}
.tl-month-name{
  color:#fbf2df;text-shadow:0 1px 0 rgba(40,25,15,.18);
  font-family:var(--round);font-size:13.5px;font-weight:700;letter-spacing:.03em;
}
.tl-month em{
  font-style:normal;font-family:var(--round);font-size:11px;
  color:rgba(251,242,223,.74);letter-spacing:.05em;
}
.tl-list{
  position:relative;padding-left:23px;
}
.tl-list::before{
  content:"";position:absolute;left:5px;top:9px;bottom:10px;width:2px;
  background:repeating-linear-gradient(180deg,#c0a77e 0 7px,rgba(0,0,0,0) 7px 12px);
  opacity:.72;
}
.tl-item{position:relative;margin-bottom:14px;}
.tl-item::before{
  content:"";position:absolute;left:-22px;top:27px;
  width:9px;height:9px;border-radius:50%;
  background:var(--wine);border:2px solid #f7efdc;box-sizing:content-box;
  box-shadow:0 2px 4px rgba(100,60,50,.22);
}
.tl-group:nth-child(4n+1) .tl-item::before{background:#40594a;border-color:#f6ecd9;}
.tl-group:nth-child(4n+2) .tl-item::before{background:#744749;border-color:#f6ecd9;}
.tl-group:nth-child(4n+3) .tl-item::before{background:#7c6339;border-color:#f6ecd9;}
.tl-group:nth-child(4n+4) .tl-item::before{background:#4e6871;border-color:#f6ecd9;}
.tl-item::after{
  content:"";position:absolute;left:-12px;top:35px;width:13px;
  border-top:1px dashed rgba(178,148,105,.68);pointer-events:none;
}
.timeline-page .entry{--note-a:#fcf3df;--note-b:#f2e2c3;}
.timeline-page .tl-item:nth-child(odd) .entry{transform:rotate(-.30deg);}
.timeline-page .tl-item:nth-child(even) .entry{
  --note-a:#fbf1d8;--note-b:#f0ddba;
  transform:rotate(.26deg);
}
.timeline-page .tl-group:nth-child(4n+1) .entry{--edge:#6d8668;--tape:rgba(151,171,137,.76);--note-a:#f6f2de;--note-b:#e8e1c5;}
.timeline-page .tl-group:nth-child(4n+2) .entry{--edge:#a96f61;--tape:rgba(193,144,121,.78);--note-a:#fcf3df;--note-b:#f2e0c6;}
.timeline-page .tl-group:nth-child(4n+3) .entry{--edge:#a17d46;--tape:rgba(188,159,111,.78);--note-a:#fbf3dd;--note-b:#f0e0bd;}
.timeline-page .tl-group:nth-child(4n+4) .entry{--edge:#70878d;--tape:rgba(153,173,178,.76);--note-a:#f4f2e2;--note-b:#e6e2cd;}
.timeline-page .entry::before{
  inset:-3px;background:var(--edge,#a96f61);
  filter:drop-shadow(0 1px 1px rgba(88,66,42,.18)) drop-shadow(0 6px 11px rgba(88,66,42,.13));
}
.timeline-page .entry::after{
  background:
    radial-gradient(120% 100% at 100% 100%,rgba(178,125,51,.11),rgba(178,125,51,0) 58%),
    repeating-linear-gradient(0deg,rgba(120,90,50,.034) 0 1px,rgba(255,255,255,0) 1px 26px),
    linear-gradient(170deg,var(--note-a),var(--note-b));
  background-size:auto,auto,auto;
}
.timeline-page .entry-tape{background:var(--tape,rgba(193,144,121,.78));}
.timeline-page .entry-cover{
  box-shadow:
    0 0 0 3px rgba(255,252,243,.62),
    0 3px 7px rgba(70,50,30,.22);
}

/* ---------- 面板 / 我的 ---------- */
.panel{
  background:linear-gradient(170deg,#fcf7e9,#f8f0de);
  border:1px solid rgba(110,85,55,.20);
  border-radius:10px;
  box-shadow:0 2px 0 rgba(88,66,42,.08);
}
.mine-page .panel{
  background-color:#fcf6e7;
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,0) 54%),
    radial-gradient(120% 100% at 100% 100%,rgba(178,125,51,.08),rgba(178,125,51,0) 58%),
    repeating-linear-gradient(0deg,rgba(120,90,50,.028) 0 1px,rgba(255,255,255,0) 1px 30px);
  background-size:auto,auto,auto;
  border:1px solid #d2bb94;
  border-radius:4px 10px 5px 8px;
  box-shadow:
    0 0 0 3px rgba(255,250,239,.54),
    0 2px 0 rgba(88,66,42,.09),
    0 7px 13px rgba(88,66,42,.08);
}
.mine-page{position:relative;}
.mine-page .section:not(.mine-summary-section) .panel{position:relative;}
.mine-page .section:not(.mine-summary-section) .panel::before{
  content:"";position:absolute;left:10px;top:0;bottom:0;z-index:0;
  border-left:1px dashed rgba(124,58,61,.22);pointer-events:none;
}
.mine-page .section:not(.mine-summary-section) .panel::after{
  content:"";position:absolute;right:25px;top:0;width:42px;height:8px;z-index:2;
  border-radius:0 0 2px 2px;pointer-events:none;opacity:.72;
  background:repeating-linear-gradient(90deg,rgba(205,184,147,.76) 0 5px,rgba(226,210,177,.72) 5px 9px);
  border-left:1px dashed rgba(120,90,55,.14);
  border-right:1px dashed rgba(120,90,55,.14);
  transform:rotate(1.5deg);
}
.mine-page .mine-summary-panel{
  overflow:visible;position:relative;
  background:linear-gradient(168deg,#fdf7e8,#f4e6c9);
}
.mine-summary-panel::before{
  content:"";position:absolute;left:38px;top:-6px;width:52px;height:12px;
  background:rgba(214,195,158,.62);
  border-left:1px dashed rgba(120,90,55,.16);
  border-right:1px dashed rgba(120,90,55,.16);
  transform:rotate(-2.5deg);pointer-events:none;
}
.mine-ledger-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:10px;
  padding:15px 16px 0;
}
.mine-ledger-head span{
  font-family:var(--round);font-size:11px;font-weight:700;
  color:#6b5338;letter-spacing:.18em;
}
.mine-ledger-head em{
  font-style:normal;font-family:Georgia,"Times New Roman",serif;
  font-size:8px;color:#9b7e57;letter-spacing:.12em;opacity:.75;
  transform:translateY(-1px);
}
.mine-page .stat-line{padding:13px 8px 19px;gap:0;}
.mine-page .stat-line div + div{border-left:1px dashed rgba(124,58,61,.17);}
.mine-page .stat-line b{
  font-size:27px;line-height:1;letter-spacing:-.02em;
  text-shadow:0 1px 0 rgba(255,255,255,.45);
}
.mine-page .stat-line span{font-family:var(--round);letter-spacing:.06em;}
.mine-page .type-index .row{padding:12px 15px 12px 18px;}
.mine-page .type-index .row:nth-child(even){background:rgba(120,90,50,.018);}
.mine-page .type-index .row b{
  flex:0 0 auto;display:grid;place-items:center;
  width:28px;height:28px;border-radius:50%;
  border:1px solid rgba(124,58,61,.42);
  background:rgba(250,242,226,.46);
  color:var(--wine);font-family:Georgia,"Times New Roman",var(--serif);
  font-size:14px;line-height:1;transform:rotate(-3deg);
  box-shadow:inset 0 0 0 2px rgba(124,58,61,.055);
}
.mine-page .row .chev{
  flex:0 0 auto;display:grid;place-items:center;
  width:22px;height:22px;border:1px solid rgba(124,58,61,.20);border-radius:50%;
  font-size:14px;line-height:1;
}
.row{border-bottom:1px dashed var(--line-soft);}
.row:active{background:#f2e7d0;}
.row .chev{color:var(--wine);}
.row small{color:#9b896f;}
.stat-line b{color:var(--wine);font-family:Georgia,var(--serif);font-weight:400;}
.stat-line span{color:#9b896f;}
.hint{color:#9b896f;}
.empty{
  border:1px dashed #cdb996;border-radius:10px;
  background:rgba(252,247,233,.72);color:#9b896f;
}
.empty b{color:#6d5e49;}
.notice{
  background:linear-gradient(150deg,#f8eed6,#f1e2c2);
  border:1px solid #d6c09a;border-radius:9px;
  box-shadow:0 2px 0 rgba(88,66,42,.08);
}
.notice-body b{color:#5b4731;}
.notice-body p{color:#7b6a53;}
.footer-buddy .fb-emoji{
  background:#eee1c5;border:1px solid #d2bd97;border-radius:4px;
  box-shadow:2px 2px 0 rgba(88,66,42,.12);transform:rotate(-4deg);animation:none;
}

/* ---------- 编辑面板 ---------- */
.sheet-panel,.share-panel{
  background:var(--paper);
  background-image:
    url("paper-noise.png"),
    linear-gradient(180deg,#f4ebd7,#f0e5ce);
  background-size:128px 128px,auto;
  border-radius:0;
}
.sheet-head,.share-head{
  position:relative;
  background:linear-gradient(180deg,#f8f0dd,#f2e7d1);
  border-bottom:1px dashed #d8c6a4;
  box-shadow:0 2px 6px rgba(90,70,45,.04);
}
.sheet-head::before,.share-head::before{
  content:"";position:absolute;left:50%;top:50%;width:86px;height:22px;
  transform:translate(-50%,-50%) rotate(-1.6deg);
  background:rgba(214,195,158,.38);
  border-left:1px dashed rgba(120,90,55,.16);
  border-right:1px dashed rgba(120,90,55,.16);
  pointer-events:none;
}
.sheet-title{
  position:relative;z-index:1;padding-bottom:4px;
  color:var(--wine);
}
.sheet-title::after{
  content:"";position:absolute;left:18%;right:18%;bottom:0;height:4px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='5' viewBox='0 0 60 5'%3E%3Cpath d='M0 3c6-3 12 3 18 0s12 3 18 0 12 3 18 0' fill='none' stroke='%237c3a3d' stroke-width='1'/%3E%3C/svg%3E") repeat-x;
  opacity:.45;
}
.sheet-body{background:linear-gradient(180deg,rgba(120,90,50,.045),rgba(120,90,50,0) 84px);}
.sheet-foot{
  background:rgba(244,235,217,.9);
  border-top:1px dashed #d8c6a4;
}
.text-btn.is-primary{color:var(--wine);}
.field-label{color:#8a755a;letter-spacing:.05em;}
.field input,.field textarea{
  border:1px solid #d2bf9c;border-radius:7px;
  background:rgba(253,248,237,.96);
  box-shadow:inset 0 1px 2px rgba(100,75,45,.05);
}
.field input:focus,.field textarea:focus{
  border-color:#a97163;box-shadow:0 0 0 3px rgba(138,61,63,.10);
}
.chip{
  border:1px solid #cfbb98;border-radius:4px;
  background:#f8f0dd;color:#6d5e49;
}
#typeChips .chip{flex:0 0 auto;white-space:nowrap;}
#typeChips .chip.is-on{background:var(--wine) !important;color:#f8efdb;border-color:var(--wine);}
.field-tip{color:#b09a7c;}
.mini-btn{
  border:1px solid #cfbb98;border-radius:4px;
  background:#f8f0dd;color:var(--wine);box-shadow:none;
}
.mini-btn:active{background:#efe2c8;}
.share-btn{
  background:var(--wine);border:1px solid var(--wine-deep);border-radius:4px;
  color:#f8efdb;box-shadow:0 2px 0 rgba(80,40,40,.20);
}
.share-btn:active{background:var(--wine-deep);}
.danger-btn{
  background:transparent;border:1px dashed #c9958b;border-radius:4px;
  color:var(--danger);box-shadow:none;
}
.danger-btn:active{background:#f6e3dd;}
.photo-tile,.photo-add{border:3px solid #fffdf6;border-radius:3px;box-shadow:0 2px 6px rgba(80,55,35,.14);}
.photo-add{border-style:dashed;border-color:#cdb996;background:rgba(252,247,233,.6);color:#8a755a;}
.photo-add::before{
  content:"";position:absolute;left:50%;top:8px;width:44px;height:13px;
  transform:translateX(-50%) rotate(-4deg);
  background:rgba(214,195,158,.5);
  border-left:1px dashed rgba(120,90,55,.16);
  border-right:1px dashed rgba(120,90,55,.16);
}
.format-sample{background:#f8f0dd;border:1px dashed #cdb996;border-radius:7px;}
.star{color:#d3c09f;}
.star.is-on{color:#b8862f;text-shadow:0 1px 3px rgba(184,134,47,.3);}
.trow{border-bottom:1px dashed var(--line-soft);}
.trow .t-emoji{background:#efe2c8;border-radius:4px;box-shadow:none;border:1px solid #d2bd97;}
.trow .t-act,.emoji-sugg button{border:1px solid #cfbb98;border-radius:4px;background:#f8f0dd;}
.t-drag{color:#8f7654;}
.trow.is-dragging{background:#fbf2df;box-shadow:0 8px 22px rgba(82,57,35,.2);}
#tEmoji{border:1px solid #cfbb98;border-radius:7px;background:#fdf8ed;}
.swatch{border:3px solid #fffdf6;box-shadow:0 2px 5px rgba(80,55,35,.16);}
.tray.is-light .sticker,.tray.is-light .tray-cat{border:1px solid #cfbb98;border-radius:4px;background:#f8f0dd;}
.tray.is-light .tray-cat.is-on{background:var(--wine);border-color:var(--wine);color:#f8efdb;}

/* 新的一页：摊开的手账内页 */
#sheet .sheet-panel{
  background-color:#f6eddb;
  background-image:
    repeating-linear-gradient(0deg,rgba(0,0,0,0) 0 31px,rgba(120,90,50,.045) 31px 32px),
    url("paper-noise.png"),
    linear-gradient(180deg,#f8f0de,#f2e7d1);
  background-size:auto,128px 128px,auto;
}
#sheet .sheet-body{
  background-image:
    linear-gradient(90deg,rgba(0,0,0,0) 0 31px,rgba(124,58,61,.09) 31px 32px,rgba(0,0,0,0) 32px),
    repeating-linear-gradient(0deg,rgba(0,0,0,0) 0 31px,rgba(120,90,50,.04) 31px 32px);
}
#sheet .field-label{
  display:inline-block;padding:3px 9px 2px;
  border:1px solid rgba(163,127,84,.26);border-radius:2px 6px 2px 5px;
  background:rgba(239,225,198,.72);color:#6e583e;
  font-weight:700;letter-spacing:.08em;
  box-shadow:1px 1px 0 rgba(88,66,42,.09);
  transform:rotate(-.8deg);
}
#sheet .field-tip{font-weight:400;letter-spacing:0;}
#sheet .field input{
  padding:11px 6px 10px;
  border:0;border-bottom:1.5px solid #c4aa80;border-radius:0;
  background:rgba(253,248,237,.42);box-shadow:none;
}
#sheet .field input:focus{
  border-bottom-color:var(--wine);
  background:rgba(253,248,237,.74);
  box-shadow:0 2px 0 -1px rgba(124,58,61,.20);
}
#sheet .field input::-webkit-calendar-picker-indicator{
  opacity:.68;filter:sepia(.55) saturate(.7);
}
#sheet .field textarea{
  min-height:168px;padding:10px 12px;line-height:32px;
  border:1px solid #d2bf9c;border-radius:3px;
  background-color:rgba(253,248,237,.46);
  background-image:repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 31px,rgba(120,90,50,.11) 31px 32px);
  box-shadow:none;
}
#sheet .field textarea:focus{
  border-color:#b08d68;background-color:rgba(253,248,237,.70);
  box-shadow:0 0 0 3px rgba(138,61,63,.08);
}
#typeChips .chip:nth-child(5n+1){background:#f2ded4;border-color:#d4ac9e;color:#714a3f;}
#typeChips .chip:nth-child(5n+2){background:#f3e8cb;border-color:#d6c08d;color:#70572f;}
#typeChips .chip:nth-child(5n+3){background:#e7e8d8;border-color:#b9c3a6;color:#536147;}
#typeChips .chip:nth-child(5n+4){background:#e5eaeb;border-color:#b1c1c5;color:#4d6269;}
#typeChips .chip:nth-child(5n+5){background:#eee1e3;border-color:#c8b0b7;color:#704d59;}
#typeChips .chip{
  box-shadow:0 2px 0 rgba(88,66,42,.10);
  transform:rotate(-.45deg);
}
#typeChips .chip:nth-child(even){transform:rotate(.35deg);}
#typeChips .chip.is-on{
  background:var(--wine) !important;border-color:var(--wine) !important;color:#f8efdb !important;
  box-shadow:0 3px 0 rgba(80,40,40,.20);
  transform:rotate(-1deg) translateY(-1px) scale(1.02);
}
#sheet .photo-tile:nth-child(odd){rotate:-.7deg;}
#sheet .photo-tile:nth-child(even){rotate:.55deg;}
#sheet .photo-tile.is-cover{box-shadow:0 0 0 3px #c99558,0 3px 9px rgba(80,55,35,.2);}
#sheet .photo-tile.is-dragging{transform:scale(.94);rotate:0deg;opacity:.74;}
.photo-grip,.photo-cover{background:rgba(86,61,43,.78);}
.photo-cover.is-on{background:rgba(124,58,61,.92);color:#f8edda;}
#sheet .photo-add{
  border:1px dashed #bfa67e;border-radius:2px;
  background:rgba(253,248,237,.52);
  box-shadow:0 3px 8px rgba(80,55,35,.10), inset 0 0 0 5px rgba(255,252,244,.42);
}
#sheet .photo-add::after{
  content:"MEMORY";position:absolute;left:0;right:0;bottom:9px;
  font-family:Georgia,"Times New Roman",serif;font-size:7px;
  letter-spacing:.18em;color:#a38b68;
}

.viewer-crop{
  border:1px solid rgba(255,238,205,.32);
  background:rgba(92,52,45,.58);
  letter-spacing:.04em;
}
.cropper{
  background:
    radial-gradient(circle at 50% 38%, rgba(112,74,58,.34), transparent 42%),
    rgba(27,21,18,.975);
}
.crop-head{border-bottom-color:rgba(221,193,151,.22);}
.crop-title{color:#f1dfbd;letter-spacing:.08em;}
.crop-text.is-primary{color:#e6bd80;}
.crop-frame{
  border:2px solid #e7d2aa;
  box-shadow:0 20px 55px rgba(0,0,0,.48), 0 0 0 5px rgba(255,246,224,.05);
}
.crop-grid{opacity:.78;}
.crop-tool{
  color:#f2e0bc;background:rgba(118,71,59,.32);
  border-color:rgba(231,210,170,.25);
}
.crop-help{color:rgba(231,210,170,.62);}
#sheet .star{color:#cdbb98;text-shadow:none;}
#sheet .star.is-on{color:#a87525;text-shadow:0 1px 0 rgba(255,248,226,.9);}
#sheet .mini-btn{border-style:dashed;box-shadow:0 1px 0 rgba(88,66,42,.08);}

/* ---------- 分享 / 地图 / 回顾 / 弹窗 ---------- */
.share-action{
  border:1px solid #cfbb98;border-radius:4px;background:#f8f0dd;color:#6d5e49;
}
.share-action.is-primary{background:var(--wine);border-color:var(--wine);color:#f8efdb;}
.share-preview img{border:4px solid #fffdf6;border-radius:3px;box-shadow:0 10px 22px rgba(70,45,25,.18);}
.map-wrap{border:3px solid #fffdf6;border-radius:6px;}
.map-btn{border-radius:4px;background:rgba(253,248,237,.95);color:#6d5e49;}
.map-pick-center{
  background:rgba(253,248,237,.97);color:#654d36;
  border-color:#bfa77e;box-shadow:0 4px 13px rgba(70,45,25,.2);
}
.map-crosshair{border-color:rgba(124,58,61,.78);}
.map-crosshair::before,.map-crosshair::after{background:rgba(124,58,61,.8);}
.map-pin{border-color:var(--wine);}
.map-pin.is-pick{border-color:var(--forest);}
.rev-year b{color:var(--wine);font-family:Georgia,var(--serif);font-weight:400;}
.rev-stats div{background:#fbf5e6;border:1px solid #d8c6a4;border-radius:9px;box-shadow:none;}
.rev-stats b{color:var(--wine);font-family:Georgia,var(--serif);font-weight:400;}
.rev-bar .rb-track{background:#efe3c9;border-radius:2px;}
.rev-month i{background:linear-gradient(180deg,#9c5350,#7c3a3d);border-radius:2px 2px 0 0;}
.dialog-panel{
  background:#fbf5e6;border:1px solid #cdb996;border-radius:9px;
  box-shadow:0 18px 44px rgba(70,45,25,.26);
}
.dialog-panel h2{color:#33291f;}
.dialog-actions{border-top:1px dashed #d8c6a4;}
.dialog-actions button:first-child{border-right:1px dashed #d8c6a4;}
.toast{
  background:rgba(251,245,230,.98);color:var(--wine);
  border:1px solid #cdb996;border-radius:4px;
  box-shadow:0 8px 20px rgba(90,60,40,.18);
}

/* 小屏微调 */
@media (max-width:360px){
  .view{padding-left:15px;padding-right:15px;}
  .hero{padding:24px 18px 20px;}
  .hero-num b{font-size:54px;}
  .type-card{min-height:90px;padding:6px 4px;}
  .type-card .t-count{font-size:20px;}
  .type-card .t-name{font-size:9px;}
  .hero-line{padding-right:76px;}
}