/* ============================================================
   EARTH:ONLINE · 复古打字机 / 老档案室风格
   ============================================================ */
@font-face{
  font-family:'汇文明朝体';
  src:url('fonts/Huiwenmincho-improved.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
:root{
  --desk:#262a22;        /* 桌面（墨绿深木色） */
  --desk2:#1e2119;
  --paper:#f2e8cf;       /* 米黄纸 */
  --paper2:#e9dcba;      /* 纸稍深 */
  --paper-edge:#c9b489;
  --ink:#2f2a1c;         /* 墨色 */
  --ink-soft:#6d6244;
  --red:#a63a2b;         /* 印章红 */
  --red-dark:#5c1f16;
  --green:#5a7247;       /* 老式绿 */
  --blue:#3d5a80;        /* 打字机蓝 */
  --gold:#a8842f;
  --type:"汇文明朝体","Courier New","Courier","Noto Serif SC","Noto Serif CJK SC","SimSun",serif,"Noto Color Emoji","Apple Color Emoji","Segoe UI Emoji";
  --mono:"Courier New","Courier","汇文明朝体","Noto Serif SC",monospace,"Noto Color Emoji","Apple Color Emoji","Segoe UI Emoji";
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{min-height:100%;}
body{
  font-family:var(--type); color:var(--ink); font-size:14.5px; line-height:1.7;
  background:
    radial-gradient(ellipse at 30% 10%, rgba(255,250,235,.05), transparent 50%),
    repeating-linear-gradient(92deg, rgba(255,255,255,.012) 0 60px, transparent 60px 120px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 3px, transparent 3px 9px),
    linear-gradient(160deg, var(--desk), var(--desk2));
  min-height:100%;
}

/* ===== 顶部横幅 ===== */
.topbar{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 18px; background:rgba(20,22,16,.72); border-bottom:3px double var(--paper-edge);}
.brand{display:flex; flex-direction:column; line-height:1.2;}
.brand-main{font-family:var(--mono); font-size:19px; font-weight:700; letter-spacing:3px; color:var(--paper);}
.brand-sub{font-size:10px; letter-spacing:5px; color:var(--paper-edge);}
.header-right{display:flex; align-items:center; gap:16px;}
.hstat{font-size:13px; color:var(--paper-edge);}
.hstat b{font-family:var(--mono); color:var(--paper); font-size:15px;}
.date-stamp{font-family:var(--mono); color:var(--red); border:2px solid var(--red);
  padding:2px 10px; font-size:12px; letter-spacing:1px; border-radius:3px;
  transform:rotate(-2deg); background:rgba(166,58,43,.08);}

/* ===== 档案抽屉导航 ===== */
.tabs{display:flex; gap:5px; padding:14px 18px 0; flex-wrap:wrap;}
.tab{font-family:var(--type); background:var(--paper2); color:var(--ink); cursor:pointer;
  border:2px solid var(--ink); border-bottom:none; padding:7px 16px; font-size:13.5px;
  letter-spacing:1px; border-radius:7px 7px 0 0; position:relative; box-shadow:2px -2px 0 rgba(0,0,0,.25);}
.tab:hover{background:var(--paper);}
.tab.active{background:var(--paper); font-weight:700; z-index:2;}
.tab.active::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--paper);}

/* ===== 舞台 ===== */
.stage{padding:0 18px 18px; height:calc(100% - 116px); min-height:0;}
.view{display:none; height:100%; min-height:0;}
.view.active{display:block;}

/* ===== 纸张通用 ===== */
.sheet{background:var(--paper); color:var(--ink); border:2px solid var(--ink);
  box-shadow:5px 5px 0 rgba(0,0,0,.35), 10px 10px 0 rgba(0,0,0,.12);
  position:relative; padding:20px 22px; border-radius:3px;}
.sheet::after{content:""; position:absolute; inset:0; pointer-events:none; border-radius:3px;
  background:radial-gradient(rgba(90,70,30,.05) 1px, transparent 1.4px); background-size:4px 4px;}
.sheet-title{font-family:var(--mono); font-weight:700; letter-spacing:2px; font-size:13.5px;
  color:var(--blue); text-transform:uppercase;}
.sheet-head{display:flex; align-items:center; justify-content:space-between; gap:10px;
  border-bottom:1px dashed var(--paper-edge); padding-bottom:10px; margin-bottom:8px; flex-wrap:wrap;}

/* ===== 今日日志 ===== */
.editor-sheet{display:flex; flex-direction:column; height:100%; min-height:0;}
.mood-row{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.sheet-head .mood-row{flex-basis:100%; justify-content:flex-start; margin-top:2px;}
.mood-hint{font-size:10.5px; color:var(--ink-soft); letter-spacing:1px; margin-left:4px;}
.mood{background:transparent; border:1.5px solid var(--paper-edge); border-radius:3px;
  font-size:18px; padding:2px 7px; cursor:pointer; line-height:1.3;
  transition:transform .12s, border-color .15s, background .15s;}
.mood:hover{transform:translateY(-2px); border-color:var(--ink);}
.mood.sel{background:rgba(166,58,43,.14); border-color:var(--red); box-shadow:2px 2px 0 rgba(0,0,0,.2);}

#editor{flex:1; min-height:120px; resize:none; border:none; outline:none; background:transparent;
  color:var(--ink); padding:14px 4px; font-family:var(--type); font-size:16px; line-height:2.1;
  caret-color:var(--red); letter-spacing:.5px;
  background:repeating-linear-gradient(transparent 0 33px, rgba(61,90,128,.13) 33px 34px);}
#editor::placeholder{color:#a5976b;}

.media-strip{display:flex; gap:8px; padding:4px 2px 8px; flex-wrap:wrap;}
.media-strip .chip{display:flex; align-items:center; gap:6px; background:var(--paper2);
  border:1.5px solid var(--ink); border-radius:3px; padding:3px 8px; font-size:11.5px;
  font-family:var(--mono); box-shadow:2px 2px 0 rgba(0,0,0,.25);}
.media-strip .chip img{width:26px; height:26px; object-fit:cover; border-radius:2px;}
.media-strip .chip button{border:none; background:none; color:var(--red); font-size:14px; cursor:pointer; font-weight:700;}

.editor-bar{display:flex; align-items:center; gap:8px; padding-top:10px; border-top:1px dashed var(--paper-edge); flex-wrap:wrap;}
.spacer{flex:1;}

/* 复古盖章按钮 */
.btn{font-family:var(--type); background:var(--paper2); color:var(--ink); border:2px solid var(--ink);
  border-radius:3px; padding:6px 13px; font-size:13px; cursor:pointer; letter-spacing:1px;
  box-shadow:2.5px 2.5px 0 rgba(0,0,0,.4); transition:transform .06s, box-shadow .06s, background .15s;}
.btn:hover{background:var(--paper);}
.btn:active{transform:translate(2px,2px); box-shadow:1px 1px 0 rgba(0,0,0,.4);}
.btn.primary{background:var(--red); border-color:var(--red-dark); color:#f6eeda; font-weight:700;}
.btn.primary:hover{background:#b84533;}
.btn.big{padding:8px 20px; font-size:14px;}
.btn.small{padding:3px 9px; font-size:11.5px;}
.btn:disabled{opacity:.45; cursor:not-allowed;}
.file-btn{position:relative; overflow:hidden; display:inline-block;}

.rec-timer{color:var(--red); font-family:var(--mono); font-size:13.5px; animation:blink 1s steps(2) infinite;}
@keyframes blink{50%{opacity:.25;}}

/* ===== 表情面板（Emoji / 表情包切换） ===== */
.sticker-panel{border-top:1.5px dashed var(--paper-edge); margin-top:8px; padding-top:10px; max-height:170px; overflow-y:auto;}
.sp-title{display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--ink-soft); margin-bottom:8px; letter-spacing:1px;}
.sp-grid{display:flex; gap:7px; flex-wrap:wrap;}
.sp-grid .stk{border:1.5px solid var(--paper-edge); background:var(--paper2); border-radius:3px; padding:4px;
  font-size:21px; line-height:1; cursor:pointer; transition:transform .1s, border-color .15s;}
.sp-grid .stk img{width:34px; height:34px; object-fit:contain; display:block;}
.sp-grid .stk:hover{border-color:var(--ink); transform:scale(1.12);}

/* ===== 历史存档 ===== */
.archive-head{display:flex; align-items:baseline; justify-content:space-between;
  padding:6px 2px 10px; gap:10px; flex-wrap:wrap;}
.archive-head .sub{font-size:11px; color:var(--paper-edge); letter-spacing:1px;}
.timeline{height:calc(100% - 92px); overflow-y:auto; display:flex; flex-direction:column; gap:16px; padding:4px 6px 20px; overscroll-behavior:contain; touch-action:pan-y;}
.timeline:empty::after{content:"📡 还没有收到任何日志……在「今日日志」写下第一篇吧。"; color:var(--paper-edge); text-align:center; padding:60px 0; font-size:13px;}

.fax-card{position:relative; background:var(--paper); color:var(--ink); border:1.5px solid var(--ink);
  padding:16px 20px 18px; box-shadow:4px 4px 0 rgba(0,0,0,.35);
  animation:card-in .45s cubic-bezier(.2,.9,.3,1.05);}
.fax-card::before{content:""; position:absolute; top:-5px; left:-1px; right:-1px; height:8px;
  background:repeating-linear-gradient(90deg, transparent 0 6px, var(--paper-edge) 6px 12px);
  border:1px solid var(--ink); border-bottom:none; background-color:var(--paper);}
@keyframes card-in{from{opacity:0; transform:translateY(20px) rotate(.4deg);} to{opacity:1; transform:none;}}
.fax-head{display:flex; align-items:baseline; gap:12px; margin-bottom:8px; border-bottom:1px dashed var(--paper-edge); padding-bottom:6px;}
.fax-date{font-family:var(--mono); font-weight:700; color:var(--red); font-size:13px; letter-spacing:2px;}
.fax-time{font-family:var(--mono); color:var(--ink-soft); font-size:12px;}
.fax-mood{font-size:17px;}
.fax-body{font-size:15px; line-height:2; white-space:pre-wrap; word-break:break-word;}
.fax-body img{max-width:100%; max-height:260px; border-radius:2px; display:block; margin:8px 0;
  border:1.5px solid var(--paper-edge); box-shadow:3px 3px 0 rgba(0,0,0,.2);}
.fax-body audio{width:100%; margin:6px 0; height:36px; filter:sepia(.5) hue-rotate(20deg);}
.fax-tags{display:flex; gap:6px; margin-top:10px; flex-wrap:wrap;}
.fax-tag{font-size:10.5px; background:var(--paper2); color:var(--ink-soft); border:1px solid var(--paper-edge);
  border-radius:2px; padding:1px 8px; letter-spacing:1px;}

/* ===== 徽章 ===== */
.badge-grid{height:calc(100% - 46px); overflow-y:auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; padding:4px 6px 20px; overscroll-behavior:contain; touch-action:pan-y;}
.badge-card{background:var(--paper); border:2px solid var(--ink); text-align:center; padding:18px 10px 14px;
  box-shadow:4px 4px 0 rgba(0,0,0,.35); position:relative; transition:transform .15s;}
.badge-card:hover{transform:translateY(-3px);}
.badge-icon{font-size:36px; display:block; margin-bottom:8px;}
.badge-name{font-family:var(--mono); font-weight:700; font-size:13px; letter-spacing:1px; color:var(--blue);}
.badge-desc{font-size:11px; color:var(--ink-soft); margin-top:4px; line-height:1.5;}
.badge-card.locked{opacity:.38; filter:grayscale(1); border-style:dashed;}
.badge-card.locked .badge-name{color:var(--ink-soft);}
.badge-prog{font-family:var(--mono); font-size:10.5px; color:var(--red); margin-top:6px;}

/* 彩蛋：标题点击反馈 */
.brand-main{cursor:default; transition:transform .15s;}
.brand-main.poke{animation:brand-poke .3s ease;}
@keyframes brand-poke{0%{transform:scale(1);}40%{transform:scale(1.12);}100%{transform:scale(1);}}

/* ===== 成就卷宗 v0.8 ===== */
.ach-bar{height:10px; background:rgba(0,0,0,.18); border:1px solid var(--ink); border-radius:2px;
  margin:2px 6px 14px; overflow:hidden;}
.ach-bar-fill{height:100%; width:0; background:linear-gradient(90deg, var(--red), #d99a3d);
  transition:width .6s cubic-bezier(.25,1.4,.4,1);}
.ach-grid{height:calc(100% - 78px); overflow-y:auto; padding:2px 6px 20px; overscroll-behavior:contain; touch-action:pan-y;}
.ach-cat{margin-bottom:18px;}
.ach-cat-title{display:flex; align-items:baseline; gap:8px; border-bottom:2px dashed var(--paper-edge);
  padding-bottom:6px; margin-bottom:10px;}
.ach-cat-title b{font-family:var(--mono); font-size:13.5px; letter-spacing:1.5px; color:var(--red);}
.ach-cat-title span{font-size:10.5px; color:var(--ink-soft); letter-spacing:2px;}
.ach-cat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:12px;}
.ach-card{background:var(--paper); border:2px solid var(--ink); padding:14px 10px 12px; text-align:center;
  box-shadow:3px 3px 0 rgba(0,0,0,.3); position:relative; transition:transform .15s;}
.ach-card:hover{transform:translateY(-2px);}
.ach-card.locked{opacity:.5; filter:grayscale(1); border-style:dashed;}
.ach-card.locked .ach-name{color:var(--ink-soft);}
.ach-card.ach-hidden .ach-icon{filter:drop-shadow(0 0 3px rgba(0,0,0,.35));}
.ach-card.got{border-color:var(--red); background:linear-gradient(160deg, var(--paper), rgba(166,58,43,.08));}
.ach-card.got .ach-icon{animation:ach-got .5s ease;}
@keyframes ach-got{0%{transform:scale(.6) rotate(-8deg);}60%{transform:scale(1.15) rotate(3deg);}100%{transform:scale(1) rotate(0);}}
.ach-icon{font-size:30px; display:block; margin-bottom:6px;}
.ach-name{font-family:var(--mono); font-weight:700; font-size:12px; letter-spacing:.5px; color:var(--blue);}
.ach-desc{font-size:10.5px; color:var(--ink-soft); margin-top:4px; line-height:1.5;}
.ach-ok{font-family:var(--mono); font-size:10.5px; color:var(--red); margin-top:6px; letter-spacing:1px;}
.ach-lock{font-family:var(--mono); font-size:10.5px; color:var(--ink-soft); margin-top:6px; letter-spacing:1px;}

/* ===== 表情包库 ===== */
.sticker-vault{height:calc(100% - 46px); overflow-y:auto; padding:6px; overscroll-behavior:contain; touch-action:pan-y;}
.sticker-vault > .btn{margin-bottom:14px;}
.vault-grid{display:flex; gap:12px; flex-wrap:wrap;}
.vault-item{position:relative; background:var(--paper); border:2px solid var(--ink); border-radius:3px;
  padding:10px; box-shadow:3px 3px 0 rgba(0,0,0,.35);}
.vault-item img{width:64px; height:64px; object-fit:contain; display:block;}
.vault-item .del{position:absolute; top:-9px; right:-9px; width:22px; height:22px; border-radius:50%;
  background:var(--red); color:#f6eeda; border:2px solid var(--red-dark); font-size:12px; line-height:1;
  cursor:pointer; font-weight:700;}
.vault-empty{color:var(--paper-edge); text-align:center; padding:50px 0; font-size:13px;}

/* ===== 设置 ===== */
.settings-sheet{height:calc(100% - 20px); overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y;}
.set-row{display:flex; gap:14px; padding:10px 0; border-bottom:1px dashed var(--paper-edge); align-items:baseline; flex-wrap:wrap;}
.set-k{flex:0 0 90px; font-size:12.5px; color:var(--ink-soft); letter-spacing:1px;}
.set-v{font-family:var(--mono); font-size:12.5px; word-break:break-all;}
.set-v.muted{color:var(--ink-soft);}
.set-note{margin-top:18px; font-size:12px; color:var(--ink-soft); background:var(--paper2);
  border:1.5px solid var(--paper-edge); padding:10px 12px; line-height:1.8;}
.set-note b{color:var(--red);}
.set-actions{display:flex; gap:8px; flex-wrap:wrap;}
.changelog{margin-top:12px; background:var(--paper); border:1.5px dashed var(--ink); padding:14px 18px;
  font-size:12.5px; line-height:1.9; color:var(--ink);}
.changelog h3{font-family:var(--mono); color:var(--blue); font-size:13px; margin:14px 0 6px;
  border-bottom:1px dashed var(--paper-edge); padding-bottom:4px; letter-spacing:1px;}
.changelog h3:first-child{margin-top:0;}
.changelog li{margin-left:18px; margin-bottom:2px;}
.changelog .cl-quote{color:var(--ink-soft); font-style:italic; margin-bottom:6px;}

/* ===== 传真机动画（复古配色） ===== */
.fax{position:fixed; inset:0; z-index:100; background:rgba(15,16,12,.88);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;}
.fax.hidden{display:none;}
.fax-machine{position:relative; width:min(440px,88vw); height:150px; border-radius:10px;
  background:linear-gradient(180deg,#4a4636,#2e2b20); border:2px solid #6b6549;
  box-shadow:0 22px 60px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.14); overflow:hidden;}
.fax-lamp{position:absolute; top:12px; left:16px; width:10px; height:10px; border-radius:50%;
  background:#4a4636; transition:background .2s;}
.fax-lamp.on{background:var(--red); box-shadow:0 0 12px var(--red);}
.fax-slot{position:absolute; top:26px; left:16px; right:16px; height:10px; border-radius:5px;
  background:#14130e; border:1.5px solid #6b6549;}
.fax-paper{position:absolute; top:36px; left:28px; right:28px; height:96px; background:var(--paper);
  border-radius:2px; box-shadow:0 2px 10px rgba(0,0,0,.5); overflow:hidden;
  transform:translateY(-112px); opacity:0;}
.fax-paper.slide{animation:paper-in .55s cubic-bezier(.2,.8,.3,1) forwards;}
@keyframes paper-in{0%{transform:translateY(-112px); opacity:0;} 60%{opacity:1;} 100%{transform:translateY(0); opacity:1;}}
.fax-paper::after{content:""; position:absolute; top:0; bottom:0; left:0; width:3px;
  background:repeating-linear-gradient(180deg, #b9ad92 0 4px, transparent 4px 8px); opacity:.6;}
.fax-print{position:absolute; inset:10px 14px; font-family:var(--mono); font-size:10.5px;
  color:#4a4436; line-height:1.55; white-space:pre-wrap; opacity:0;}
.fax-print.typing{opacity:1;}
.fax-stamp{position:absolute; right:14px; bottom:10px; font-size:11px; font-weight:700;
  color:var(--red); border:2px solid var(--red); border-radius:3px; padding:1px 7px;
  transform:rotate(-12deg) scale(2); opacity:0; background:rgba(246,238,218,.85);}
.fax-stamp.hit{animation:stamp .35s cubic-bezier(.3,1.4,.5,1) forwards;}
@keyframes stamp{0%{transform:rotate(-12deg) scale(2); opacity:0;} 70%{transform:rotate(-12deg) scale(.9); opacity:1;} 100%{transform:rotate(-12deg) scale(1); opacity:1;}}
.fax-label{position:absolute; bottom:8px; left:0; right:0; text-align:center; font-size:9px;
  letter-spacing:4px; color:#8a8366;}
.fax-msg{color:var(--paper-edge); font-size:13.5px; min-height:20px; text-align:center; letter-spacing:1px;}

/* Toast（复古） */
.toast{position:fixed; top:64px; right:18px; z-index:120; background:var(--paper); color:var(--ink);
  border:2px solid var(--ink); border-left:6px solid var(--green); border-radius:2px; padding:10px 16px;
  font-size:13px; font-family:var(--type); box-shadow:4px 4px 0 rgba(0,0,0,.45);
  animation:toast-in .25s cubic-bezier(.2,.9,.3,1.2);}
.toast.out{animation:toast-out .3s ease-in forwards;}
@keyframes toast-in{from{opacity:0; transform:translateX(30px);} to{opacity:1; transform:none;}}
@keyframes toast-out{to{opacity:0; transform:translateY(-14px);}}

/* 滚动条（复古） */
::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-track{background:rgba(255,255,255,.04);}
::-webkit-scrollbar-thumb{background:var(--paper-edge); border-radius:0; border:1px solid var(--ink);}

/* ===== 首页：档案室前台（移动优先重设计） ===== */
.home-grid{height:100%; min-height:0; overflow-y:auto; overflow-x:hidden; display:flex;
  flex-direction:column; gap:14px; padding:6px 4px 24px; overscroll-behavior:contain; touch-action:pan-y;}
/* 统计：手机 2×2 网格，宽屏一行 4 个 */
.stat-row{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:10px 0 12px;}
.stat{text-align:center; background:var(--paper2); border:1.5px solid var(--paper-edge);
  border-radius:3px; padding:12px 4px 10px; box-shadow:2px 2px 0 rgba(0,0,0,.2);}
.stat b{font-family:var(--mono); font-size:24px; color:var(--red); display:block; line-height:1.2;}
.stat span{font-size:11px; color:var(--ink-soft); letter-spacing:1px;}
/* 邮戳：窄屏不旋转（避免被裁切），宽屏保留斜戳趣味 */
.postmark{font-family:var(--mono); color:var(--red); border:2px solid var(--red); border-radius:50%;
  min-width:0; text-align:center; padding:8px 11px; font-size:11px; letter-spacing:1px;
  background:rgba(166,58,43,.06); line-height:1.35; flex-shrink:0; transform:none;}
.quick-mood{display:flex; align-items:center; gap:5px; flex-wrap:wrap;}
.quick-mood .qm-label{font-size:11px; color:var(--ink-soft); letter-spacing:1px; margin-right:4px;}

.quick-input{width:100%; border:none; outline:none; background:transparent; color:var(--ink);
  font-family:var(--type); font-size:15px; padding:10px 4px; caret-color:var(--red); letter-spacing:.5px;
  border-bottom:1.5px solid var(--paper-edge);}
.quick-input::placeholder{color:#a5976b;}
.quick-bar{display:flex; align-items:center; gap:10px; padding-top:10px; flex-wrap:wrap;}
.quick-mood-sel{font-size:11.5px; color:var(--ink-soft); letter-spacing:1px;}

/* 功能入口：窄屏 3 列（2 行排满 6 个），宽屏自动扩展 */
.entry-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(86px,100%),1fr)); gap:9px;}
.entry-card{font-family:var(--type); background:var(--paper2); color:var(--ink); cursor:pointer;
  border:2px solid var(--ink); border-radius:3px; padding:12px 4px 10px; font-size:12px; text-align:center;
  letter-spacing:1px; box-shadow:2.5px 2.5px 0 rgba(0,0,0,.35); transition:transform .12s, background .15s;
  display:flex; flex-direction:column; align-items:center; gap:5px; min-width:0;}
.entry-card:hover{background:var(--paper); transform:translateY(-2px);}
.entry-card:active{transform:translate(2px,2px); box-shadow:1px 1px 0 rgba(0,0,0,.35);}
.entry-card .ec-ic{font-size:22px;}
.entry-card.soon{opacity:.5; cursor:default; border-style:dashed;}
.entry-card.soon:hover{background:var(--paper2); transform:none;}

.more-link{font-size:11.5px; color:var(--red); cursor:pointer; letter-spacing:1px; border-bottom:1px dashed var(--red);}
.home-recent{display:flex; flex-direction:column; gap:10px; padding-top:4px;}
.home-recent:empty::after{content:"还没有收件。在「快速记录」或「今日日志」写下第一篇吧。"; color:var(--paper-edge);
  text-align:center; padding:24px 0; font-size:12.5px;}
.mini-card{background:var(--paper2); border:1.5px solid var(--paper-edge); border-left:4px solid var(--green);
  padding:9px 12px; border-radius:2px; box-shadow:2px 2px 0 rgba(0,0,0,.15);}
.mini-card .mc-head{display:flex; gap:10px; align-items:baseline; font-size:11px; color:var(--ink-soft); margin-bottom:3px; flex-wrap:wrap;}
.mini-card .mc-date{font-family:var(--mono); color:var(--red); font-weight:700;}
.mini-card .mc-body{font-size:13px; line-height:1.7; overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.mini-card .mc-body img{height:20px; width:auto; vertical-align:middle; margin:0 2px; border-radius:2px;}
.mini-card .mc-body audio{width:80px; height:22px; vertical-align:middle;}

/* ===== 徽章解锁通知（右上角） ===== */
.badge-toast{position:fixed; top:64px; right:18px; z-index:140; display:flex; gap:10px; align-items:center;
  background:var(--paper); color:var(--ink); border:2px solid var(--ink); border-right:6px solid var(--gold);
  border-radius:2px; padding:10px 16px 10px 12px; font-family:var(--type);
  box-shadow:4px 4px 0 rgba(0,0,0,.5); max-width:min(320px,86vw);
  opacity:0; transform:translateX(60px) rotate(1.5deg) scale(.85); pointer-events:none;}
.badge-toast.show{animation:bt-in .4s cubic-bezier(.25,1.5,.4,1) forwards;}
.badge-toast.out{animation:bt-out .35s ease-in forwards;}
/* 隐藏成就：暗金羊皮纸风格 */
.badge-toast.golden{background:linear-gradient(150deg, #3a2c14, #57401c 55%, #2e2310);
  color:#f0d9a8; border:2px solid #d9a94d; border-right:6px solid #e6b860;
  box-shadow:4px 4px 0 rgba(0,0,0,.55), inset 0 0 18px rgba(230,184,96,.12);}
.badge-toast.golden .bt-name{color:#f5d78a;}
.badge-toast.golden .bt-desc{color:#cdb078;}
.badge-toast.golden .bt-stamp{background:#e6b860; color:#2e2310;}
@keyframes bt-in{0%{opacity:0; transform:translateX(60px) rotate(1.5deg) scale(.85);}
  100%{opacity:1; transform:none;}}
@keyframes bt-out{to{opacity:0; transform:translateY(-16px) rotate(-1deg);}}
.bt-icon{font-size:30px; line-height:1;}
.bt-name{font-weight:700; font-size:13.5px; color:var(--blue); letter-spacing:1px;}
.bt-desc{font-size:11.5px; color:var(--ink-soft); margin-top:2px;}
.bt-stamp{position:absolute; top:-8px; right:-6px; font-size:9px; color:var(--red); border:1.5px solid var(--red);
  border-radius:2px; padding:0 4px; transform:rotate(8deg); background:var(--paper);}

/* ===== 传真卡片删除按钮 ===== */
.fax-del{position:absolute; top:10px; right:12px; font-family:var(--type); font-size:10.5px;
  color:var(--red); background:transparent; border:1.5px solid var(--red); border-radius:2px;
  padding:2px 8px; cursor:pointer; letter-spacing:1px; opacity:.75; transition:all .15s;}
.fax-del:hover{opacity:1; background:rgba(166,58,43,.08);}
.fax-del.arm{background:var(--red); color:#f6eeda; font-weight:700;}
.fax-head{padding-right:64px;}

/* ===== 响应式 ===== */
/* 宽屏增强：首页两列、统计一行、邮戳旋转 */
@media (min-width:900px){
  .home-grid{grid-template-columns:1fr 1fr; gap:18px; padding:6px 8px 24px;}
  .stat-row{grid-template-columns:repeat(4,1fr);}
  .postmark{transform:rotate(-4deg); padding:6px 8px;}
}
/* 手机（≤820px）：纵向滚动为主，压缩间距 */
@media (max-width:820px){
  html,body{overflow-x:hidden;}
  body{overflow:auto;}
  .stage{height:auto; min-height:calc(100vh - 116px); padding:0 10px 16px;}
  .view{height:auto;}
  .editor-sheet{min-height:70vh;}
  .timeline,.badge-grid,.sticker-vault{height:auto; max-height:none;}
  .sheet{padding:16px 14px;}
  .home-grid{grid-template-columns:1fr;}
  .badge-toast{top:auto; bottom:18px; right:12px; left:12px; max-width:none;}
}
/* 小屏手机（≤520px）：压缩顶栏与标签页 */
@media (max-width:520px){
  .topbar{padding:8px 10px; gap:8px;}
  .brand-main{font-size:16px; letter-spacing:2px;}
  .brand-sub{font-size:9px; letter-spacing:3px;}
  .header-right{gap:8px;}
  .hstat{display:none;}
  .date-stamp{font-size:10.5px; padding:2px 7px;}
  .tabs{padding:10px 10px 0; gap:4px;}
  .tab{padding:5px 8px; font-size:12px;}
  .stage{min-height:calc(100vh - 104px);}
}


/* ===== 待办系统 v0.5（每日委托 + 世界任务） ===== */
.todos-tabs{display:flex; gap:6px; padding:4px 2px 10px; flex-wrap:wrap;}
.ttab{font-family:var(--type); background:var(--paper2); color:var(--ink); border:2px solid var(--ink);
  border-radius:3px; padding:5px 14px; font-size:12.5px; cursor:pointer; letter-spacing:1px;
  box-shadow:2px 2px 0 rgba(0,0,0,.25);}
.ttab.active{background:var(--red); color:#f6eeda; font-weight:700;}
.todos-body{height:calc(100% - 92px); overflow-y:auto; padding:2px 4px 20px;}

/* 每日委托 */
.d-new{display:flex; gap:8px; padding:8px 0 12px; flex-wrap:wrap;}
.d-new input[type=text]{flex:1; min-width:140px; font-family:var(--type); background:var(--paper2);
  border:1.5px solid var(--ink); border-radius:3px; padding:7px 10px; font-size:13.5px; color:var(--ink);}
.d-new input[type=text]::placeholder{color:#a5976b;}
.d-new input[type=text]:focus{outline:none; border-color:var(--red);}
.d-list{display:flex; flex-direction:column; gap:8px;}
.drow{display:flex; align-items:center; gap:10px; background:var(--paper2); border:1.5px solid var(--paper-edge);
  border-radius:3px; padding:9px 12px; box-shadow:2px 2px 0 rgba(0,0,0,.18);}
.drow .d-ic{font-size:19px; width:26px; text-align:center;}
.drow .d-name{flex:1; font-size:14px; letter-spacing:.5px; word-break:break-word;}
.drow.done .d-name{color:var(--ink-soft); text-decoration:line-through;}
.drow .d-del{background:none; border:none; color:var(--red); font-size:15px; cursor:pointer; opacity:.6;}
.drow .d-del:hover{opacity:1;}
.cbox{appearance:none; -webkit-appearance:none; width:20px; height:20px; flex:0 0 20px; cursor:pointer;
  border:2px solid var(--ink); border-radius:3px; background:var(--paper);
  display:inline-flex; align-items:center; justify-content:center; font-size:13px; color:transparent;
  transition:background .15s, transform .15s; box-shadow:2px 2px 0 rgba(0,0,0,.2);}
.cbox:checked{background:var(--red); color:#fff; border-color:var(--red-dark);}
.cbox:checked::after{content:"✓";}
.cbox:active{transform:scale(.85);}

/* 世界任务 */
.q-new{background:var(--paper2); border:1.5px dashed var(--ink); border-radius:3px;
  padding:12px; margin-bottom:12px;}
.q-new input[type=text], .q-new textarea{width:100%; font-family:var(--type); background:var(--paper);
  border:1.5px solid var(--ink); border-radius:3px; padding:7px 10px; font-size:13px; color:var(--ink);
  box-sizing:border-box;}
.q-new textarea{min-height:64px; resize:vertical;}
.q-new .qn-row{display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; align-items:center;}
.q-new .qn-row input{flex:1; min-width:140px;}
.q-new label{font-size:11.5px; color:var(--ink-soft); letter-spacing:1px;}
.q-list{display:flex; flex-direction:column; gap:12px;}
.qcard{position:relative; background:var(--paper); color:var(--ink); border:2px solid var(--ink);
  border-radius:3px; padding:14px 16px; box-shadow:4px 4px 0 rgba(0,0,0,.35);}
.qcard.overdue{border-style:dashed; border-color:var(--red); background:rgba(166,58,43,.06);}
.qcard.finished{opacity:.72;}
.qc-head{display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap;}
.qc-title{flex:1; font-family:var(--mono); font-weight:700; font-size:15px; letter-spacing:1px; color:var(--blue); word-break:break-word;}
.qc-ic{font-size:22px;}
.ddl{font-family:var(--mono); font-size:11px; font-weight:700; border:1.5px solid; border-radius:3px;
  padding:2px 8px; letter-spacing:1px; white-space:nowrap;}
.ddl.ok{color:#3d6b35; border-color:#3d6b35; background:rgba(61,107,53,.1);}
.ddl.warn{color:#a3821a; border-color:#a3821a; background:rgba(163,130,26,.1);}
.ddl.over{color:var(--red); border-color:var(--red); background:rgba(166,58,43,.12);}
.ddl.none{color:var(--ink-soft); border-color:var(--paper-edge);}
.qc-sub{display:flex; gap:12px; margin-top:8px; font-size:11px; color:var(--ink-soft); letter-spacing:1px; flex-wrap:wrap;}
.qc-sub .ovd-mark{color:var(--red); font-weight:700;}
.qc-subtasks{display:flex; flex-direction:column; gap:5px; margin:10px 0 4px; padding-left:2px;}
.qst{display:flex; align-items:center; gap:8px; font-size:13px;}
.qst .stx{flex:1; word-break:break-word;}
.qst.done .stx{color:var(--ink-soft); text-decoration:line-through;}
.qst .cbox{width:16px; height:16px; flex-basis:16px; font-size:11px;}
.qc-actions{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; align-items:center;}
.qc-actions .btn{padding:3px 10px; font-size:11px;}
.qc-actions .qdel{margin-left:auto; color:var(--red); background:transparent; border:1.5px solid var(--red);}
.qc-actions .qdel:hover{background:rgba(166,58,43,.08);}
.qc-outcome{margin-top:10px; border-top:1px dashed var(--paper-edge); padding-top:8px;
  font-size:12.5px; line-height:1.8; color:var(--ink); word-break:break-word;}
.qc-outcome b{color:var(--red); font-family:var(--mono); letter-spacing:1px;}
.qc-post{font-size:11px; color:var(--ink-soft); margin-top:6px;}
.qc-lock{position:absolute; top:10px; right:12px; font-size:10px; color:var(--red);
  border:1.5px solid var(--red); border-radius:2px; padding:1px 6px; transform:rotate(6deg);
  background:var(--paper); letter-spacing:1px;}

/* 首页今日委托 */
#home-todos .ht-sec{font-size:11px; color:var(--ink-soft); letter-spacing:2px; margin:8px 0 6px; font-family:var(--mono);}
#home-todos .ht-sec:first-child{margin-top:2px;}
.ht-daily{display:flex; flex-direction:column; gap:6px;}
.ht-drow{display:flex; align-items:center; gap:8px; background:var(--paper2); border:1.5px solid var(--paper-edge);
  border-radius:3px; padding:7px 10px; box-shadow:1.5px 1.5px 0 rgba(0,0,0,.15);}
.ht-drow .d-name{font-size:13px;}
.ht-drow .cbox{width:17px; height:17px; flex-basis:17px; font-size:11px;}
.ht-quest{display:flex; flex-direction:column; gap:8px;}
.ht-q{display:flex; flex-direction:column; gap:6px; background:var(--paper2); border-left:4px solid var(--green);
  border-radius:2px; padding:8px 10px; box-shadow:1.5px 1.5px 0 rgba(0,0,0,.15);}
.ht-q.urgent{border-left-color:#c9a227;}
.ht-q.overdue{border-left-color:var(--red); background:rgba(166,58,43,.07);}
.ht-q .qt{flex:1; font-size:13px; word-break:break-word;}
.ht-q .qt .qt-t{font-weight:700;}
.ht-q .qt small{display:block; color:var(--ink-soft); font-size:10.5px; letter-spacing:.5px; margin-top:1px;}
.ht-q .qc-subtasks{margin-top:1px; gap:5px;}
.ht-q .qc-subtasks .qst{font-size:12px; padding:3px 6px; background:rgba(0,0,0,.05); border-radius:2px;}
.ht-progress{display:flex; align-items:center; gap:8px;}
.ht-progress .pr-track{flex:1; height:6px; background:rgba(0,0,0,.14); border-radius:3px; overflow:hidden;}
.ht-progress .pr-fill{height:100%; background:var(--green); border-radius:3px; transition:width .35s;}
.ht-q.urgent .pr-fill{background:#c9a227;}
.ht-q.overdue .pr-fill{background:var(--red);}
.ht-progress .pr-txt{font-family:var(--mono); font-size:10.5px; color:var(--ink-soft); min-width:30px; text-align:right;}
.ht-empty{color:var(--paper-edge); text-align:center; padding:14px 0; font-size:12.5px;}
.ht-foot{display:flex; justify-content:space-between; gap:8px; margin-top:10px; padding-top:8px;
  border-top:1px dashed var(--paper-edge); font-size:11px; color:var(--ink-soft); flex-wrap:wrap;}
.ht-foot b{font-family:var(--mono); color:var(--red);}
.reward{display:inline-block; animation:reward-pop .5s ease-out forwards; pointer-events:none;}
@keyframes reward-pop{0%{transform:scale(.3) rotate(-10deg); opacity:0;} 50%{transform:scale(1.25) rotate(4deg); opacity:1;} 100%{transform:scale(1) rotate(0); opacity:1;}}

/* 存档分类 */
.archive-filters{display:flex; gap:6px; padding:2px 2px 10px; flex-wrap:wrap;}
.afilter{font-family:var(--type); background:transparent; color:var(--ink-soft); border:1.5px solid var(--paper-edge);
  border-radius:3px; padding:3px 12px; font-size:12px; cursor:pointer; letter-spacing:1px;}
.afilter.active{background:var(--red); color:#f6eeda; border-color:var(--red-dark); font-weight:700;}
/* 待办归档卡片变体 */
.fax-card.k-daily{border-left:6px solid var(--green);}
.fax-card.k-quest{border-left:6px solid var(--gold);}
.fax-card .k-tag{display:inline-block; font-size:10px; letter-spacing:1px; border:1.5px solid;
  border-radius:2px; padding:0 6px; margin-right:8px; transform:rotate(-2deg); vertical-align:middle;}
.fax-card.k-daily .k-tag{color:#3d6b35; border-color:#3d6b35;}
.fax-card.k-quest .k-tag{color:#a3821a; border-color:#a3821a;}
.fax-quest-detail{font-size:12px; color:var(--ink-soft); margin-top:6px; line-height:1.7; word-break:break-word;}

/* 超时弹窗 */
.modal{position:fixed; inset:0; z-index:200; background:rgba(15,16,12,.82);
  display:flex; align-items:center; justify-content:center; padding:16px;}
.modal.hidden{display:none;}
.modal-card{background:var(--paper); color:var(--ink); border:2px solid var(--ink); border-radius:3px;
  width:min(520px, 94vw); max-height:92vh; overflow-y:auto; padding:20px 22px;
  box-shadow:6px 6px 0 rgba(0,0,0,.5), 0 0 0 4px rgba(166,58,43,.35);}
.modal-title{font-family:var(--mono); font-weight:700; font-size:16px; letter-spacing:2px; color:var(--red);
  border-bottom:2px solid var(--red); padding-bottom:8px; margin-bottom:10px;}
.ovd-q{font-size:14.5px; font-weight:700; margin-bottom:14px; word-break:break-word;}
.ovd-opt{border:1.5px dashed var(--paper-edge); border-radius:3px; padding:12px; margin-bottom:12px;}
.ovd-opt-t{display:flex; align-items:baseline; gap:8px; margin-bottom:8px; flex-wrap:wrap;}
.ovd-opt-t b{color:var(--blue); font-family:var(--mono); letter-spacing:1px; font-size:13px;}
.ovd-opt-t span{font-size:11px; color:var(--ink-soft);}
.ovd-opt input, .ovd-opt textarea{width:100%; box-sizing:border-box; font-family:var(--type);
  background:var(--paper2); border:1.5px solid var(--ink); border-radius:3px; padding:8px 10px;
  font-size:13.5px; color:var(--ink); margin-bottom:8px;}
.ovd-opt textarea{min-height:70px; resize:vertical;}
.ovd-later{width:100%; opacity:.8;}

/* 子任务完成时间 + 完成时间轴（v0.5.1） */
.qst .st-time{margin-left:auto; font-family:var(--mono); font-size:10px; color:var(--ink-soft); letter-spacing:.5px; white-space:nowrap;}
.qc-timeline{margin-top:8px; padding-top:8px; border-top:1px dashed var(--paper-edge);}
.tl-title{font-size:10.5px; color:var(--ink-soft); letter-spacing:2px; font-family:var(--mono); margin-bottom:6px;}
.tl-item{display:flex; align-items:center; gap:8px; position:relative; padding-left:14px; padding-bottom:7px; font-size:12px; line-height:1.5;}
.tl-item::before{content:''; position:absolute; left:3px; top:7px; bottom:-2px; width:1.5px; background:var(--paper-edge);}
.tl-item:last-child::before{height:0;}
.tl-dot{position:absolute; left:0; top:3px; width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 2.5px rgba(61,107,53,.22);}
.tl-txt{flex:1; word-break:break-word;}
.tl-time{font-family:var(--mono); font-size:10px; color:var(--ink-soft); white-space:nowrap;}

/* ===== v0.6：归档按天折叠 / 热力图 / 心情日历 ===== */
/* 归档按天分组 */
.fax-day{margin-bottom:10px;}
.fax-day-head{display:flex; align-items:center; gap:10px; cursor:pointer; background:var(--paper2);
  border:1.5px solid var(--ink); border-radius:2px; padding:6px 10px; box-shadow:1.5px 1.5px 0 rgba(0,0,0,.15);
  font-family:var(--mono); user-select:none;}
.fax-day-head:hover{transform:translateY(-1px);}
.fax-day-head.open{background:var(--ink); color:var(--paper);}
.fax-day-head.open .fax-day-mood{color:var(--paper);}
.fax-day-date{font-size:13px; font-weight:700; letter-spacing:1px;}
.fax-day-mood{font-size:12px; letter-spacing:2px; flex:1;}
.fax-day-count{font-size:10.5px; color:var(--ink-soft); letter-spacing:1px;}
.fax-day-head.open .fax-day-count{color:var(--paper-soft);}
.fax-day-arrow{font-size:12px; transition:transform .2s;}
.fax-day-body{border-left:2px dashed var(--paper-edge); margin:4px 0 4px 10px; padding:6px 0 2px 12px;}
.fax-day-body .fax-card{margin-bottom:8px;}

/* 字数热力图（GitHub 风格，列=周，7 行=周日→周六） */
.heatmap-wrap{overflow-x:auto; padding:4px 0;}
.heatmap{display:grid; grid-auto-flow:column; grid-template-rows:repeat(7, 1fr);
  grid-auto-columns:1fr; gap:3px; width:100%;}
.hm{width:100%; aspect-ratio:1; border-radius:2px; background:var(--paper-edge);}
.hm-1{background:#cdd9b8;}
.hm-2{background:#8fb06e;}
.hm-3{background:#4f7d45;}
.hm-4{background:#2c4d2c;}
.heatmap-legend{display:flex; align-items:center; gap:4px; margin-top:6px; justify-content:flex-start;
  font-size:10px; color:var(--ink-soft); font-family:var(--mono); letter-spacing:1px;}
.heatmap-legend .hm{width:10px; aspect-ratio:1;}

/* 心情日历 */
.cal-nav{display:flex; align-items:center; gap:6px;}
.cal-nav button{background:var(--paper2); color:var(--ink); border:1.5px solid var(--ink); border-radius:2px;
  width:22px; height:22px; font-size:13px; cursor:pointer; line-height:1;}
.cal-nav button:active{transform:scale(.92);}
#cal-title{font-size:12px; font-family:var(--mono); letter-spacing:1px; min-width:76px; text-align:center;}
.calendar{display:grid; grid-template-columns:repeat(7, 1fr); gap:3px; font-family:var(--mono);}
.cal-head{display:contents;}
.cal-head span{font-size:9.5px; color:var(--ink-soft); text-align:center; padding:2px 0; letter-spacing:1px;}
.cal-cell{display:flex; flex-direction:column; align-items:center; justify-content:center; height:38px;
  border:1px solid transparent; border-radius:2px; font-size:10.5px; position:relative;}
.cal-cell b{font-weight:700;}
.cal-cell em{font-size:11px; line-height:1; margin-top:1px; font-style:normal;
  font-family:"Noto Color Emoji","Apple Color Emoji","Segoe UI Emoji","Android Emoji",sans-serif;}
.cal-cell i{font-size:8.5px; color:var(--ink-soft); font-style:normal; line-height:1;}
.cal-cell.has{background:var(--paper2); border-color:var(--paper-edge);}
.cal-cell.today{outline:2px solid var(--red); outline-offset:1px; background:var(--paper2);}
.cal-cell.blank{visibility:hidden;}

/* ===== 云同步面板（Web 版） ===== */
#sync-fab{position:fixed; right:16px; bottom:18px; z-index:200; width:52px; height:52px; border-radius:50%;
  background:var(--red,#a63a2b); color:#fff; font-size:24px; border:2px solid var(--ink,#1a1a1a);
  box-shadow:3px 3px 0 rgba(0,0,0,.4); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:transform .15s;}
#sync-fab:active{transform:translate(2px,2px); box-shadow:1px 1px 0 rgba(0,0,0,.4);}
/* 设置页内卡片：覆盖浮动定位，改为静态区块 */
#view-settings #sync-panel{position:static; width:auto; opacity:1; transform:none; pointer-events:auto; margin:4px 0 16px; border:2px solid var(--ink,#1a1a1a); box-shadow:4px 4px 0 rgba(0,0,0,.25); border-radius:0;}
#view-settings #sync-panel .sync-body{max-height:none; overflow:visible;}
#sync-panel{position:fixed; right:14px; bottom:80px; z-index:201; width:min(330px,88vw);
  background:var(--paper,#f2e9d8); border:2px solid var(--ink,#1a1a1a); box-shadow:4px 4px 0 rgba(0,0,0,.5);
  font-family:var(--type,sans-serif); font-size:13px; color:var(--ink,#1a1a1a);
  opacity:0; transform:translateY(16px) scale(.96); pointer-events:none; transition:opacity .18s, transform .18s;}
#sync-panel.show{opacity:1; transform:none; pointer-events:auto;}
.sync-head{background:var(--red,#a63a2b); color:#fff; font-weight:700; letter-spacing:1.5px; padding:10px 14px;}
.sync-body{padding:12px 14px 14px; display:flex; flex-direction:column; gap:9px;}
.sync-field{display:flex; flex-direction:column; gap:4px; font-size:11.5px; color:#555;}
.sync-field input,.sync-field select{border:2px solid var(--ink,#1a1a1a); background:#fff; padding:7px 8px; font-size:12.5px; font-family:var(--mono,monospace);}
.sync-row{display:flex; align-items:center; gap:7px; font-size:12.5px;}
.sync-status{font-family:var(--mono,monospace); font-size:11.5px; padding:6px 8px; background:rgba(0,0,0,.06); border:1px dashed rgba(0,0,0,.25); min-height:16px;}
.sync-btns{display:flex; gap:7px; flex-wrap:wrap;}
.sync-btn{flex:1; min-width:88px; background:var(--paper2,#e8dcc4); border:2px solid var(--ink,#1a1a1a); color:var(--ink,#1a1a1a);
  font-family:var(--type,sans-serif); font-size:12px; padding:7px 4px; cursor:pointer; box-shadow:2px 2px 0 rgba(0,0,0,.3);}
.sync-btn:active{transform:translate(1px,1px); box-shadow:1px 1px 0 rgba(0,0,0,.3);}
.sync-tip{font-size:10.5px; color:#777; line-height:1.55;}