/* ============================================================
   爪爪宫殿 · paw.css — 可移植设计系统（design tokens + 组件）
   语言：复古票据 / 信笺纸墨；6 个时间世界（莫兰迪 / 中国传统色）
   配套：assets.css（猫狗 logo + infinity 花边 mask）、icons.css（图标 mask）
   字体（预览）：Cormorant Garamond / Playfair Display / Pinyon Script /
                Noto Serif SC / Special Elite；生产可换 仿宋/文楷
   ============================================================ */

:root{
  --en:'Cormorant Garamond',serif;
  --display:'Playfair Display',serif;     /* 大号斜体数字 */
  --cn:'Noto Serif SC','LXGW WenKai',serif;
  --type:'Special Elite',monospace;       /* 票据小字段 */
  --script:'Pinyon Script',cursive;       /* 花体标题 */
  --ease:cubic-bezier(.22,.7,.2,1);
  --maxw:412px;
}

/* ===== 6 个时间世界：整套配色（含票券纸色 card / 花纹色 orn / 墨色 ink）===== */
[data-t="cream"]{ --bg1:#F1ECE1; --bg2:#E7DFCF; --glow:rgba(205,188,150,.2); --on-bg:#4A4234; --on-bg-soft:#8A8069; --mote:rgba(250,245,234,.8);
  --card:#FAF6EC; --card-2:#F2ECDD; --orn:#937A58; --ink:#3E382C; --ink-soft:#76705C; --ink-faint:#A89E87; }
[data-t="dawn"]{ --bg1:#E6EAEE; --bg2:#D4DDE4; --glow:rgba(120,150,170,.2); --on-bg:#39444C; --on-bg-soft:#6E7C84; --mote:rgba(228,236,242,.8);
  --card:#EFF1F0; --card-2:#E2E8EA; --orn:#5A6E7A; --ink:#34404A; --ink-soft:#647480; --ink-faint:#94A0A8; }
[data-t="leaf"]{ --bg1:#E4E9DD; --bg2:#D3DCC8; --glow:rgba(140,165,120,.2); --on-bg:#3C4733; --on-bg-soft:#6C7A5E; --mote:rgba(232,238,222,.8);
  --card:#EEF1E7; --card-2:#E3E8D9; --orn:#5E7050; --ink:#36402E; --ink-soft:#647058; --ink-faint:#95A088; }
[data-t="dusk"]{ --bg1:#E9D6CE; --bg2:#D7B0A6; --glow:rgba(178,110,100,.24); --on-bg:#4E3A38; --on-bg-soft:#866963; --mote:rgba(248,228,222,.85);
  --card:#F4E8E3; --card-2:#EBD9D2; --orn:#9E5B57; --ink:#412E2C; --ink-soft:#7C5E5A; --ink-faint:#A98C87; }
[data-t="clay"]{ --bg1:#E9D3C4; --bg2:#D9B49E; --glow:rgba(190,120,85,.24); --on-bg:#4E3528; --on-bg-soft:#8A6550; --mote:rgba(250,232,220,.82);
  --card:#F6E8DD; --card-2:#EDD7C7; --orn:#A35E40; --ink:#43301F; --ink-soft:#7C5C46; --ink-faint:#A98B73; }
[data-t="navy"]{ --bg1:#2A323C; --bg2:#1B222B; --glow:rgba(110,135,160,.2); --on-bg:#DEE6EC; --on-bg-soft:#9AAAB6; --mote:rgba(224,234,242,.8);
  --card:#E9EDEF; --card-2:#DBE2E5; --orn:#5E7588; --ink:#36404A; --ink-soft:#647480; --ink-faint:#93A0A8; }

/* ===== 基底 ===== */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
body{font-family:var(--cn); color:var(--on-bg); min-height:100dvh; padding:0 0 142px; display:flex; justify-content:center;
  position:relative; overflow-x:hidden; background:linear-gradient(170deg,var(--bg1),var(--bg2)); background-attachment:fixed;
  transition:background 1s var(--ease), color .8s var(--ease);}
.app{width:100%; max-width:var(--maxw); padding:42px 20px 0; position:relative; z-index:2;}

/* ===== 动态背景（轻量：仅 transform/opacity）===== */
.bg{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
.glow{position:absolute; width:120%; height:60%; left:-10%; top:-10%; will-change:transform;
  background:radial-gradient(closest-side, var(--glow), transparent 72%); animation:pawDrift 32s ease-in-out infinite alternate;}
@keyframes pawDrift{0%{transform:translate3d(-4%,-2%,0);}100%{transform:translate3d(9%,7%,0);}}
.mote{position:absolute; bottom:-12px; border-radius:50%; background:var(--mote); opacity:0; will-change:transform,opacity; animation:pawFloat linear infinite;}
@keyframes pawFloat{0%{transform:translate3d(0,0,0);opacity:0;}14%{opacity:.7;}86%{opacity:.5;}100%{transform:translate3d(16px,-104vh,0);opacity:0;}}
.star{position:absolute; width:2px; height:2px; border-radius:50%; background:#fff; opacity:.14; will-change:opacity; animation:pawTw ease-in-out infinite; display:none;}
[data-t="navy"] .star{display:block;}
@keyframes pawTw{0%,100%{opacity:.12;}50%{opacity:.75;}}

/* ===== 顶部时间切换 ===== */
.topbar{display:flex; justify-content:flex-end; margin-bottom:4px;}
.switch{display:flex; background:rgba(255,255,255,.18); border:1px solid rgba(120,100,80,.2); border-radius:999px; padding:3px;}
.switch button{border:0; background:transparent; cursor:pointer; width:25px; height:24px; border-radius:999px; color:var(--on-bg-soft); opacity:.55; transition:.3s; display:grid; place-items:center;}
.switch button .ic{font-size:15px;}
.switch button.on{background:rgba(255,255,255,.34); opacity:1; color:var(--on-bg);}

/* ===== 刊头：猫狗 logo + 字标 + infinity 花边 ===== */
.masthead{text-align:center; margin-bottom:16px;}
.logo{width:46px; height:66px; margin:0 auto; background:var(--on-bg);}     /* mask 由 assets.css 提供 */
.wordmark{font-family:var(--en); font-size:15px; letter-spacing:6px; text-transform:uppercase; color:var(--on-bg-soft); margin-top:10px;}
.infsvg{display:block; margin:9px auto 0; width:100px; height:auto; color:var(--on-bg-soft);}

/* 通用问候 */
.greet{text-align:center; margin-bottom:18px;}
.greet .en{font-family:var(--en); font-style:italic; font-size:18px; color:var(--on-bg-soft);}
.greet .zh{font-family:var(--cn); font-size:23px; color:var(--on-bg); margin-top:2px; letter-spacing:1px;}

/* ===== 票券通用：双线套框 + 角星芒 ===== */
.frame{border:1px solid var(--orn); border-radius:5px; position:relative;}
.frame::before{content:""; position:absolute; inset:3px; border:1px solid var(--orn); opacity:.34; border-radius:3px; pointer-events:none;}
.sp{position:absolute; font-family:var(--en); font-size:11px; color:var(--orn); opacity:.78; z-index:2;}
.s-tl{top:7px;left:8px;} .s-tr{top:7px;right:8px;} .s-bl{bottom:7px;left:8px;} .s-br{bottom:7px;right:8px;}

/* 通用卡：卡面（不挖洞）—— 习惯券等 */
.tk{position:relative; background:var(--card); color:var(--ink); border-radius:8px; margin-top:16px; padding:3px;
  box-shadow:0 20px 36px -28px rgba(20,14,8,.4);}

/* 段标签（小号打字机体）*/
.lab{font-family:var(--type); font-size:8.5px; letter-spacing:2px; text-transform:uppercase; color:var(--ink-faint); text-align:center;}
.hhead{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;}
.hhead .lab{margin:0;}
.hed,.aplus{width:22px; height:22px; border-radius:50%; border:1px solid var(--ink-faint); background:transparent; color:var(--ink-soft); font-size:14px; line-height:1; cursor:pointer; display:grid; place-items:center; opacity:.8; transition:.3s;}
.hed:hover,.aplus:hover{color:var(--orn); border-color:var(--orn); opacity:1;}

/* ===== 登机牌主票（横向：左存根 + 竖排撕线 + 上下缺口）===== */
.pass{position:relative; display:flex; background:var(--card); color:var(--ink); border:1px solid var(--orn); border-radius:6px;
  box-shadow:0 22px 40px -26px rgba(20,14,8,.4); --tx:60px; --notch:11px;
  -webkit-mask:radial-gradient(circle var(--notch) at var(--tx) 0,#0000 97%,#000) no-repeat, radial-gradient(circle var(--notch) at var(--tx) 100%,#0000 97%,#000) no-repeat;
  -webkit-mask-composite:source-in;
  mask:radial-gradient(circle var(--notch) at var(--tx) 0,#0000 97%,#000) no-repeat, radial-gradient(circle var(--notch) at var(--tx) 100%,#0000 97%,#000) no-repeat;
  mask-composite:intersect;}
.pass .stub{width:60px; flex-shrink:0; background:var(--orn); display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:20px 0;}
.pass .stub .vt{writing-mode:vertical-rl; font-family:var(--en); font-size:13px; letter-spacing:5px; text-transform:uppercase; color:var(--card);}
.pass .stub .no{writing-mode:vertical-rl; font-family:var(--type); font-size:8.5px; letter-spacing:1px; color:rgba(255,255,255,.6);}
.pass .tear{position:absolute; left:60px; top:9px; bottom:9px; border-left:2px dotted var(--ink-faint); opacity:.7;}
.pass .body{flex:1; padding:18px 18px 16px; position:relative; text-align:center;}
.pass .sp{color:var(--orn);}
.pass .ttl{font-family:var(--script); font-size:36px; color:var(--orn); line-height:1; margin-bottom:2px;}
.pass .subln{font-family:var(--type); font-size:8px; letter-spacing:3px; text-transform:uppercase; color:var(--ink-faint);}
.pass .count{display:flex; align-items:baseline; justify-content:center; gap:9px; margin:12px 0 6px;}
.pass .count .cnum{font-family:var(--display); font-weight:500; font-style:italic; font-size:50px; color:var(--orn); line-height:1; font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1;}
.pass .count .cday{font-family:var(--en); font-style:italic; font-size:21px; color:var(--ink-soft); letter-spacing:.4px;}
.pass .csec{font-family:var(--en); font-style:italic; font-size:14px; color:var(--ink-soft); letter-spacing:.3px;}
.pass .csec b{font-weight:500; font-style:italic; color:var(--orn); font-variant-numeric:lining-nums;}
.pass .csec .s{color:var(--orn); opacity:.7; margin:0 6px; font-style:normal;}
.pass .quote{font-family:var(--cn); font-size:14px; line-height:1.85; margin:12px 6px 0; padding-top:11px; border-top:1px dashed var(--ink-faint); color:var(--ink);}
.pass .by{font-family:var(--en); font-style:italic; font-size:12.5px; color:var(--orn); margin-top:6px;}

/* ===== 收据小票：上下扇贝撕口 + 虚线分节 ===== */
.receipt{position:relative; background:var(--card); color:var(--ink); margin-top:16px; padding:18px 20px 20px;
  box-shadow:0 22px 40px -28px rgba(20,14,8,.4);
  -webkit-mask:radial-gradient(circle 7px at 50% 0,#0000 95%,#000) 0 0/18px 100% repeat-x, radial-gradient(circle 7px at 50% 100%,#0000 95%,#000) 0 0/18px 100% repeat-x;
  -webkit-mask-composite:source-in;
  mask:radial-gradient(circle 7px at 50% 0,#0000 95%,#000) 0 0/18px 100% repeat-x, radial-gradient(circle 7px at 50% 100%,#0000 95%,#000) 0 0/18px 100% repeat-x;
  mask-composite:intersect;}
.receipt .r-title{font-family:var(--type); font-size:9px; letter-spacing:3px; text-transform:uppercase; color:var(--ink-faint); text-align:center; padding-bottom:14px;}
.dash{border-top:1px dashed var(--ink-faint); opacity:.7; margin:14px -4px;}
.r-foot{display:flex; align-items:center; justify-content:center; gap:14px; margin-top:14px;}
.r-foot .k{font-family:var(--type); font-size:8.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-faint);}
.r-foot .seal{width:40px; height:40px; border-radius:50%; border:1.3px solid var(--orn); color:var(--orn); display:grid; place-items:center; transform:rotate(-9deg); opacity:.82;}
.r-foot .seal .paw{width:20px; height:20px; color:var(--orn);}
/* 爪印封蜡：统一用猫爪 icon（mask 取 currentColor，自动跟随各页 .paw 的色/尺寸与主题流转）*/
.paw{background:currentColor; -webkit-mask:url("assets/icons/cat-paw.svg") center/contain no-repeat; mask:url("assets/icons/cat-paw.svg") center/contain no-repeat;}

/* ===== 邮票横滑（纪念日等）===== */
.anniv{margin-top:16px;}
.ahead{display:flex; justify-content:space-between; align-items:center; margin:0 2px 11px;}
.ahead .l{font-family:var(--type); font-size:8.5px; letter-spacing:2px; text-transform:uppercase; color:var(--on-bg-soft);}
.ahead .aplus{border-color:var(--on-bg-soft); color:var(--on-bg-soft); width:24px; height:24px; font-size:15px;}
.stamprack{display:flex; gap:11px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding:2px 0 4px;}
.stamprack::-webkit-scrollbar{height:0;}
.stamp{flex:0 0 calc((100% - 22px) / 3); scroll-snap-align:start; position:relative; background:var(--card); padding:6px; border-radius:3px; box-shadow:0 14px 26px -22px rgba(20,14,8,.45);
  background-image:radial-gradient(circle at 4px 4px, var(--bg2) 2.4px, transparent 2.6px); background-size:8px 8px; background-position:-4px -4px;}
.stamp .in{background:var(--card-2); padding:13px 8px 12px; text-align:center;}
.stamp .ic{font-size:16px; color:var(--orn);}
.stamp .dn{font-family:var(--display); font-style:italic; font-weight:500; font-size:28px; color:var(--orn); line-height:1; margin-top:4px; font-variant-numeric:lining-nums;}
.stamp .du{font-family:var(--type); font-size:7px; letter-spacing:2px; color:var(--ink-faint); margin-top:1px;}
.stamp .nm{font-family:var(--cn); font-size:12.5px; color:var(--ink); margin-top:9px;}
.stamp .dt{font-family:var(--en); font-style:italic; font-size:11px; color:var(--ink-soft); margin-top:1px;}
.stamp .edit{position:absolute; top:11px; right:13px; color:var(--ink-faint); font-size:12px; opacity:.5; cursor:pointer; z-index:2; line-height:1;}
.stamp .edit:hover{color:var(--orn); opacity:1;}

/* ===== 习惯环（可横滑）===== */
.habits-grid{display:flex; gap:10px; margin-top:4px; overflow-x:auto; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; padding-bottom:2px;}
.habits-grid::-webkit-scrollbar{height:0;}
.habit{flex:0 0 calc((100% - 30px) / 4); scroll-snap-align:start; text-align:center;}
.habit .ring{width:42px; height:42px; margin:0 auto; border-radius:50%; display:grid; place-items:center; position:relative; background:conic-gradient(var(--orn) var(--p,70%), var(--card-2) 0);}
.habit .ring::before{content:""; position:absolute; inset:3.5px; border-radius:50%; background:var(--card);}
.habit .ring .ic{position:relative; font-size:16px; color:var(--orn);}
.habit .nm{font-family:var(--cn); font-size:11px; color:var(--ink-soft); margin-top:7px;}

/* ===== 通用：大数字 / 字段 / 进度（监控等页复用）===== */
.bignum{font-family:var(--display); font-style:italic; font-weight:500; color:var(--orn); line-height:1; font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1;}
.field .k{font-family:var(--type); font-size:8px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-faint);}
.field .v{font-family:var(--en); font-size:16px; color:var(--ink); margin-top:1px;}
.stat{flex:1; text-align:center;}
.stat .v{font-family:var(--display); font-style:italic; font-weight:500; font-size:22px; color:var(--ink); line-height:1; font-variant-numeric:lining-nums;}
.stat .k{font-family:var(--type); font-size:7.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-faint); margin-top:5px;}
.livebadge{display:inline-flex; align-items:center; gap:5px; font-family:var(--type); font-size:8px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-soft);}
.livedot{width:6px; height:6px; border-radius:50%; background:var(--orn); animation:pawPulse 2s ease-in-out infinite;}
@keyframes pawPulse{0%,100%{opacity:.35; transform:scale(.85);}50%{opacity:1; transform:scale(1.1);}}

/* ===== 二级页通用头（返回 + 标题 + 动作）===== */
.subtop{display:flex; align-items:center; gap:13px; padding:44px 0 6px;}
.subtop .back{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; color:var(--on-bg-soft); text-decoration:none; font-family:var(--en); font-size:24px; line-height:1; border:1px solid color-mix(in srgb, var(--orn) 30%, transparent);}
.subtop .stitle{flex:1;}
.subtop .stitle .zh{font-family:var(--cn); font-size:19px; color:var(--on-bg); letter-spacing:2px;}
.subtop .stitle .en{font-family:var(--en); font-style:italic; font-size:12px; color:var(--on-bg-soft); margin-top:1px;}
.subtop .sact{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; color:var(--on-bg-soft); cursor:pointer; font-size:18px; border:1px solid color-mix(in srgb, var(--orn) 30%, transparent);}
.subtop .sact:hover{color:var(--orn); border-color:var(--orn);}
.subinf{display:block; margin:8px auto 18px; width:120px; height:auto; color:var(--on-bg-soft); opacity:.7;}
.empty{text-align:center; font-family:var(--en); font-style:italic; font-size:15px; color:var(--ink-faint); padding:40px 0;}

/* ===== 页脚 ===== */
.foot{text-align:center; margin-top:20px; padding-bottom:6px;}
.foot .infsvg{width:96px; opacity:.55; margin-bottom:8px;}
.foot .t{font-family:var(--en); font-style:italic; font-size:15px; color:var(--on-bg-soft);}

/* ===== 底部 TAB ===== */
.tabbar{position:fixed; bottom:0; left:0; right:0; display:flex; justify-content:center; padding:16px 18px calc(13px + env(safe-area-inset-bottom)); z-index:50; background:linear-gradient(180deg, transparent, var(--bg2) 42%);}
.tabbar-inner{width:100%; max-width:var(--maxw); display:flex; justify-content:space-around; padding:11px 6px; background:var(--card); border-radius:11px; box-shadow:0 16px 30px -18px rgba(20,14,8,.4);}
.tab{display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--ink-faint); flex:1; text-decoration:none;}
.tab .ic{font-size:23px;} .tab span{font-family:var(--cn); font-size:10px;} .tab.on{color:var(--orn);}

@media (prefers-reduced-motion: reduce){ .glow,.mote,.star,.livedot{animation:none !important;} .mote{opacity:.3;} }