/* ==========================================================================
   暖心小屋 · 纸上童话（Cartoon Paper）设计系统
   1. 画布：淡抹茶格子桌布 + 奶油纸卡
   2. 线稿：暖棕铅笔线，圆头、有呼吸感
   3. 颜色：水彩感的低饱和糖果色，边框与阴影都是暖调
   ========================================================================== */
:root{
  /* ---- 纸与布 ---- */
  --bg-cloth:#EEF5E6;            /* 桌布底色：抹茶青 */
  --bg-paper:#FFFBF3;            /* 卡纸底色：奶油白 */
  --bg-paper-2:#FFF6E9;          /* 暖一点的纸 */
  --bg-cloth-line:rgba(139,178,124,.30);
  --bg-cloth-line2:rgba(139,178,124,.16);
  /* ---- 铅笔线条 ---- */
  --ink:#4B3F35;                 /* 主线条（暖棕，不用纯黑） */
  --ink-soft:rgba(75,63,53,.16);
  --ink-line:rgba(75,63,53,.13);
  --tx-1:#4B3F35;
  --tx-2:#665748;
  --tx-3:#7E6C58;
  /* ---- 水彩糖果色 ---- */
  --c-coral:#FFA878;             /* 蜜桃橘 */
  --c-sun:#FFD35C;               /* 蛋黄酥 */
  --c-butter:#FFEDB8;            /* 淡奶油黄 */
  --c-mint:#8FD9C2;              /* 薄荷 */
  --c-leaf:#A4CE7B;              /* 嫩草绿 */
  --c-grape:#BCA6EA;             /* 葡萄紫 */
  --c-bubble:#FF9EBB;            /* 泡泡粉 */
  --c-sky:#9ED1F2;               /* 天空蓝 */
  --c-clay:#E58C66;              /* 陶土红 */
  --brand:var(--c-coral);
  --brand-ink:var(--ink);
  /* ---- 形状 ---- */
  --r-card:30px 26px 32px 24px / 26px 32px 24px 30px;   /* 手撕纸边：不规则圆角 */
  --r-card-alt:26px 32px 24px 30px / 32px 24px 30px 26px;
  --r-panel:30px 28px 30px 28px / 28px 30px 28px 30px;
  --r-ctl:16px;
  --r-pill:999px;
  --pad-main:34px;
  --gap-card:20px;
  /* ---- 字体：圆体优先，自带童趣 ---- */
  --font-round:"Yuanti SC","圆体-简","STYuanti","Hiragino Maru Gothic ProN",ui-rounded,"SF Pro Rounded","PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --font-num:"Yuanti SC","STYuanti",ui-rounded,"SF Pro Rounded","PingFang SC",system-ui,sans-serif;
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);
  --ease-smooth:cubic-bezier(.4,0,.2,1);
  /* ---- 贴纸感阴影（暖调、不发灰） ---- */
  --sh-stick:0 4px 0 rgba(75,63,53,.13), 0 12px 22px rgba(75,63,53,.07);
  --sh-stick-lg:0 7px 0 rgba(75,63,53,.14), 0 18px 30px rgba(75,63,53,.10);
  --sh-btn:0 3px 0 rgba(75,63,53,.22);
  --card-border:2px solid var(--ink);
  /* 语义状态色（软软的粉彩） */
  --s-danger-bg:#FFDFD6; --s-danger-ink:#A6412A; --s-danger-line:#F0AC96;
  --s-warn-bg:#FFEFBF;   --s-warn-ink:#8A5F12;   --s-warn-line:#EBCE83;
  --s-note-bg:#DCEBFB;   --s-note-ink:#2C5F92;   --s-note-line:#A8C9EA;
  --s-ok-bg:#DDF3E7;     --s-ok-ink:#2F7355;     --s-ok-line:#9FD7B8;
  --c-low:#C06440;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background-color:var(--bg-cloth);
  color:var(--tx-1);
  font:600 15px/1.72 var(--font-round);
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  overflow:hidden;
}
/* 桌布：十字格子 + 交点小圆点，模仿野餐布 */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-color:var(--bg-cloth);
  background-image:
    radial-gradient(circle at 9px 9px, rgba(139,178,124,.36) 1.6px, transparent 2px),
    repeating-linear-gradient(0deg, var(--bg-cloth-line) 0 1.5px, transparent 1.5px 18px),
    repeating-linear-gradient(90deg, var(--bg-cloth-line) 0 1.5px, transparent 1.5px 18px),
    radial-gradient(ellipse at 84% 8%, rgba(255,211,92,.30), transparent 46%),
    radial-gradient(ellipse at 8% 94%, rgba(158,209,242,.26), transparent 48%);
  background-size:18px 18px, 18px 18px, 18px 18px, 100% 100%, 100% 100%;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none;-webkit-tap-highlight-color:transparent}
::selection{background:var(--c-butter);color:var(--ink)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ic{display:block;flex:none}
/* 线稿加一点点手抖感：圆头、稍粗 */
svg.ic{stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* ========================= 2b. 卡纸上的涂鸦（太阳 / 云 / 小花 / 草叶） ========================= */
.doodles{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.doodles svg{position:absolute}
.doodle-sun{top:-34px;left:41%;width:136px;height:136px;animation:sway 9s ease-in-out infinite}
.doodle-cloud-a{top:20px;left:20%;width:98px;height:50px;opacity:.45;animation:drift 16s ease-in-out infinite}
.doodle-cloud-b{bottom:16%;right:4%;width:88px;height:46px;opacity:.45;animation:drift 21s ease-in-out infinite reverse}
.doodle-leaf{bottom:-14px;left:-12px;width:120px;height:104px;opacity:.5}
.doodle-flower{bottom:-8px;right:24%;width:96px;height:76px;opacity:.5}
.doodle-stars{top:26%;left:2%;width:96px;height:96px;opacity:.3}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(14px,-6px)}}
@keyframes sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@media(prefers-reduced-motion:reduce){.doodles svg{animation:none!important}}
/* ========================= 3. 布局：桌布上的两张卡纸 ========================= */
.app{display:flex;height:100vh;height:100dvh;position:relative;z-index:1;gap:16px;padding:16px}
.sidebar{
  width:246px;flex:none;height:100%;display:flex;flex-direction:column;
  padding:22px 0 16px;border:2px solid var(--ink);border-radius:var(--r-panel);
  background:var(--bg-paper);position:relative;box-shadow:var(--sh-stick);
}
/* 侧栏纸面上的横向格线，像一页手账纸 */
.sidebar::after{
  content:"";position:absolute;inset:auto 12px 12px;top:96px;pointer-events:none;
  background-image:repeating-linear-gradient(180deg,var(--ink-line) 0 1px,transparent 1px 34px);
  opacity:.55;
}
.brand{padding:0 20px 18px;display:flex;align-items:center;gap:12px}
.brand .dot{
  width:42px;height:42px;flex:none;display:grid;place-items:center;
  border-radius:26px 22px 26px 22px / 22px 26px 22px 26px;
  background:var(--c-butter);border:2px solid var(--ink);box-shadow:0 3px 0 rgba(75,63,53,.2);
}
.brand h1{font-size:19px;font-weight:800;letter-spacing:.04em;line-height:1.2}
.brand .sub{font-size:11px;font-weight:700;color:var(--tx-3);letter-spacing:.06em;margin-top:2px}
.nav{flex:1;overflow-y:auto;padding:6px 14px;display:flex;flex-direction:column;gap:8px}
.nav::-webkit-scrollbar{width:0}
.tab{
  display:flex;align-items:center;gap:12px;min-height:52px;padding:0 15px;
  border-radius:20px 24px 20px 24px / 24px 20px 24px 20px;
  border:2px solid transparent;
  color:var(--tx-2);font-size:15px;font-weight:800;text-align:left;width:100%;
  transition:transform .2s var(--ease-bounce),background .2s var(--ease-smooth),box-shadow .2s,color .2s;
}
.tab:hover{background:var(--bg-paper-2);transform:translateX(2px)}
.tab.active{
  background:var(--c-butter);color:var(--ink);border-color:var(--ink);
  box-shadow:0 3px 0 rgba(75,63,53,.22);transform:translateX(3px) rotate(-.6deg);
}
.tab .glyph{
  width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:var(--r-pill);
  background:rgba(255,255,255,.7);border:2px solid transparent;transition:all .2s var(--ease-bounce);
}
.tab.active .glyph{background:var(--c-sun);border-color:var(--ink)}
.side-foot{margin-top:12px;padding:14px 14px 0;border-top:2px dashed var(--ink-line)}
.main{
  flex:1;min-width:0;display:flex;flex-direction:column;position:relative;overflow:hidden;
  border:2px solid var(--ink);border-radius:var(--r-panel);background:var(--bg-paper);
  box-shadow:var(--sh-stick);
}
.main>*{position:relative;z-index:1}
.topbar{
  padding:26px var(--pad-main) 12px;display:flex;align-items:flex-end;
  justify-content:space-between;gap:14px;flex:none;
}
.topbar h2{
  font-size:28px;font-weight:800;line-height:1.2;letter-spacing:.03em;position:relative;display:inline-block;
}
/* 标题下方的蜡笔波浪线 */
.topbar h2::after{
  content:"";position:absolute;left:2px;right:6px;bottom:-7px;height:7px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M0 5 C 10 1, 20 8, 30 4 S 50 1, 60 5 S 80 8, 90 4 S 110 1, 120 5' fill='none' stroke='%23FFA878' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size:120px 8px;background-repeat:repeat-x;
}
.topbar .sub{font-size:12.5px;font-weight:700;color:var(--tx-3);margin-top:12px}
.tb-left{min-width:0;padding-bottom:6px}
.tb-right{display:flex;align-items:center;gap:10px}
.actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.topbar .settings-mobile{display:none}
.iconbtn.on{background:var(--c-butter)}
.view{flex:1;overflow-y:auto;padding:10px var(--pad-main) 44px;overscroll-behavior:contain}
.view::-webkit-scrollbar{width:8px}
.view::-webkit-scrollbar-thumb{background:var(--ink-line);border-radius:99px}
.view-inner{animation:pop .34s var(--ease-bounce)}
@keyframes pop{from{opacity:0;transform:scale(.985) translateY(8px)}to{opacity:1;transform:none}}
.tabbar{display:none}
/* ========================= 4. 卡片 ========================= */
.card{
  position:relative;background:var(--bg-paper);border:var(--card-border);border-radius:var(--r-card);
  padding:22px 22px 20px;box-shadow:var(--sh-stick);
  transition:transform .24s var(--ease-bounce),box-shadow .24s var(--ease-smooth);
}
.card+.card{margin-top:var(--gap-card)}
/* 每张卡左上角的「贴纸胶带」，让纸卡像被贴在相册里 */
.card::before{
  content:"";position:absolute;top:-9px;left:26px;width:64px;height:18px;
  background-image:linear-gradient(45deg,var(--c-butter) 25%,transparent 25%,transparent 50%,var(--c-butter) 50%,var(--c-butter) 75%,transparent 75%);
  background-size:8px 8px;background-color:rgba(255,237,184,.85);
  border:2px solid var(--ink);border-radius:4px;transform:rotate(-3deg);
  box-shadow:0 2px 0 rgba(75,63,53,.12);
}
.card:nth-of-type(even)::before{left:auto;right:26px;transform:rotate(3deg);background-color:rgba(158,209,242,.6)}
.card h3{font-size:15.5px;font-weight:800;letter-spacing:.03em;margin-bottom:14px;display:flex;align-items:center;gap:8px;justify-content:space-between}
.card h3 .h-l{display:flex;align-items:center;gap:8px}
.card h3 .h-l svg{color:var(--ink)}
.card h3 .count{font-size:12px;font-weight:800;color:var(--tx-3)}
.hint{font-size:12.5px;font-weight:700;color:var(--tx-3);line-height:1.7}
.divider{height:0;border-top:2px dashed var(--ink-line);margin:16px 0}
/* ========================= 5. 按钮 ========================= */
.btn{
  min-height:46px;padding:0 22px;border-radius:var(--r-pill);
  border:2px solid var(--ink);background:var(--bg-paper);color:var(--ink);
  font-size:14px;font-weight:800;display:inline-flex;align-items:center;gap:8px;justify-content:center;
  box-shadow:var(--sh-btn);
  transition:transform .18s var(--ease-bounce),box-shadow .18s var(--ease-smooth),background .18s;
}
.btn:hover{transform:translateY(-3px) rotate(-1deg);box-shadow:0 6px 0 rgba(75,63,53,.22)}
.btn:active{transform:translateY(1px) rotate(0);box-shadow:0 1px 0 rgba(75,63,53,.22)}
.btn.primary{background:var(--c-sun)}
.btn.mint{background:var(--c-mint)}
.btn.sun{background:var(--c-butter)}
.btn.ghost{box-shadow:none;border-style:dashed;background:transparent}
.btn.sm{min-height:40px;padding:0 16px;font-size:13px}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn .ic.btn-spin{animation:btnspin .8s linear infinite}
@keyframes btnspin{to{transform:rotate(360deg)}}
.iconbtn{
  width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:var(--r-pill);
  border:2px solid var(--ink);background:var(--bg-paper);box-shadow:var(--sh-btn);
  transition:transform .18s var(--ease-bounce),box-shadow .18s,background .18s;
}
.iconbtn:hover{transform:translateY(-2px) rotate(-3deg);box-shadow:0 5px 0 rgba(75,63,53,.22)}
.iconbtn:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(75,63,53,.22)}
.iconbtn.plain{width:40px;height:40px;box-shadow:none;border-color:transparent;background:transparent;color:var(--tx-3)}
.iconbtn.plain:hover{background:var(--bg-paper-2);color:var(--ink);border-color:var(--ink-line)}
/* ========================= 6. 表单 ========================= */
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field>span{font-size:12px;font-weight:800;color:var(--tx-2);letter-spacing:.04em}
.field input,.field select,.field textarea{
  width:100%;min-height:48px;padding:11px 15px;font-size:16px;font-weight:700;
  background:#FFFDF8;border:2px solid var(--ink);border-radius:var(--r-ctl);
  outline:none;transition:border-color .16s,box-shadow .16s,background .16s;
}
.field textarea{min-height:78px;resize:vertical;line-height:1.7}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--c-clay);background:#FFFEF9;box-shadow:0 0 0 4px rgba(255,211,92,.35);
}
.field input::placeholder,.field textarea::placeholder{color:var(--tx-3);font-weight:600}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:15px;align-items:end}
.form-grid .wide{grid-column:1/-1}
.field-note{font-size:11.5px;font-weight:700;color:var(--tx-3);margin-top:8px;line-height:1.6}
.grid{display:grid;gap:var(--gap-card)}
/* ========================= 7. 数字磁贴 ========================= */
.tiles{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:var(--gap-card)}
.tile{
  position:relative;overflow:hidden;text-align:left;background:var(--bg-paper);
  border:var(--card-border);border-radius:var(--r-card-alt);
  padding:16px 18px 15px;box-shadow:var(--sh-stick);
  transition:transform .22s var(--ease-bounce),box-shadow .22s;
}
.tile:hover{transform:translateY(-4px) rotate(-1.2deg);box-shadow:var(--sh-stick-lg)}
.tile:active{transform:translateY(1px)}
.tile::after{
  content:"";position:absolute;right:-18px;bottom:-22px;width:76px;height:76px;border-radius:50%;
  background:var(--c-butter);opacity:.55;
}
.tile:nth-child(1)::after{background:var(--c-butter)}
.tile:nth-child(2)::after{background:var(--c-mint)}
.tile:nth-child(3)::after{background:var(--c-bubble)}
.tile .tk{font-size:12px;font-weight:800;color:var(--tx-2);display:flex;align-items:center;gap:6px;position:relative;z-index:1}
.tile .tv{font-size:34px;font-weight:800;line-height:1.1;font-family:var(--font-num);margin-top:8px;font-variant-numeric:tabular-nums;position:relative;z-index:1}
.tile .tv .u{font-size:13px;font-family:var(--font-round);margin-left:4px;color:var(--tx-2)}
.tile.warn .tv{color:var(--c-low)}
.tile.ok .tv{color:var(--s-ok-ink)}
.tile .cap{font-size:12px;font-weight:700;color:var(--tx-3);margin-top:3px;position:relative;z-index:1}
/* ========================= 8. 徽章 / 筛选豆 ========================= */
.badge{
  display:inline-flex;align-items:center;gap:4px;padding:3px 12px;border-radius:var(--r-pill);
  font-size:11.5px;font-weight:800;white-space:nowrap;border:1.5px solid transparent;
}
.b-danger{background:var(--s-danger-bg);color:var(--s-danger-ink);border-color:var(--s-danger-line)}
.b-warn{background:var(--s-warn-bg);color:var(--s-warn-ink);border-color:var(--s-warn-line)}
.b-note{background:var(--s-note-bg);color:var(--s-note-ink);border-color:var(--s-note-line)}
.b-ok{background:var(--s-ok-bg);color:var(--s-ok-ink);border-color:var(--s-ok-line)}
.b-plain{background:#F4F1EA;color:var(--tx-2);border-color:var(--ink-line)}
.chips{display:flex;gap:9px;flex-wrap:wrap}
.chip{
  min-height:40px;padding:0 16px;border-radius:var(--r-pill);border:2px solid var(--ink);
  background:var(--bg-paper);font-size:13px;font-weight:800;color:var(--tx-2);
  display:inline-flex;align-items:center;gap:6px;
  box-shadow:0 2px 0 rgba(75,63,53,.16);
  transition:all .18s var(--ease-bounce);
}
.chip:hover{transform:translateY(-2px)}
.chip.on{background:var(--c-mint);color:var(--ink);box-shadow:0 3px 0 rgba(75,63,53,.22)}
.chip:active{transform:translateY(1px)}
/* ========================= 9. 行列表 ========================= */
.rows{display:flex;flex-direction:column;gap:11px}
.row{
  position:relative;display:flex;align-items:center;gap:12px;padding:13px 15px;
  border:2px solid var(--ink-line);border-radius:var(--r-ctl);background:#FFFDF8;
  transition:border-color .18s,transform .18s var(--ease-bounce),background .18s;
}
.row:hover{border-color:var(--ink-soft);transform:translateX(2px)}
.row .grow{flex:1;min-width:0}
.row .n{font-size:15px;font-weight:800;line-height:1.4;word-break:break-word}
.row .m{font-size:12.5px;font-weight:700;color:var(--tx-3);margin-top:2px}
.row.done{background:#F7F5EF}
.row.done .n{text-decoration:line-through;color:var(--tx-3)}
.check{
  width:46px;height:46px;flex:none;border-radius:var(--r-pill);border:2px solid var(--ink);
  background:var(--bg-paper);box-shadow:0 3px 0 rgba(75,63,53,.2);display:grid;place-items:center;color:var(--tx-3);
  transition:all .2s var(--ease-bounce);
}
.check:hover{color:var(--s-ok-ink);background:var(--s-ok-bg);transform:translateY(-3px) rotate(-6deg);box-shadow:0 5px 0 rgba(75,63,53,.2)}
.check:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(75,63,53,.2)}
.group-head{
  font-size:12.5px;font-weight:800;color:var(--tx-2);letter-spacing:.05em;
  display:flex;align-items:center;gap:10px;margin:18px 0 10px;
}
.group-head:first-child{margin-top:0}
.group-head .line{flex:1;height:0;border-top:2px dotted var(--ink-soft)}
/* ========================= 10. 库存物品卡 ========================= */
.items{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:15px}
.item{
  position:relative;border:2px solid var(--ink);border-radius:var(--r-card);background:var(--bg-paper);
  padding:16px 17px;box-shadow:var(--sh-stick);
  display:flex;flex-direction:column;gap:11px;overflow:hidden;
  transition:transform .22s var(--ease-bounce),box-shadow .22s;
}
.item::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:var(--c-mint);
  border-right:2px solid var(--ink);
}
.item:nth-child(3n)::before{background:var(--c-butter)}
.item:nth-child(3n+1)::before{background:var(--c-bubble)}
.item:hover{transform:translateY(-4px) rotate(-.8deg);box-shadow:var(--sh-stick-lg)}
.item.low{border-color:var(--c-low);box-shadow:0 4px 0 rgba(192,100,64,.3)}
.item.low::before{background:var(--c-coral)}
.item-top{display:flex;align-items:flex-start;gap:8px}
.item-name{flex:1;font-size:16px;font-weight:800;line-height:1.4;word-break:break-word}
.item-meta{font-size:12px;font-weight:700;color:var(--tx-3);display:flex;flex-wrap:wrap;gap:4px 10px}
.item-qty{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.stepper{display:flex;align-items:center;gap:10px}
.step-btn{
  width:44px;height:44px;border-radius:var(--r-pill);border:2px solid var(--ink);
  background:var(--bg-paper-2);display:grid;place-items:center;
  box-shadow:0 3px 0 rgba(75,63,53,.2);transition:transform .18s var(--ease-bounce),box-shadow .18s,background .18s;
}
.step-btn:hover{background:var(--c-butter);transform:translateY(-2px);box-shadow:0 5px 0 rgba(75,63,53,.2)}
.step-btn:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(75,63,53,.2)}
.qty{font-size:26px;font-weight:800;font-family:var(--font-num);min-width:46px;text-align:center;font-variant-numeric:tabular-nums}
.qty .u{font-size:12px;font-family:var(--font-round);color:var(--tx-2);margin-left:3px}
.levels{display:flex;gap:7px;flex-wrap:wrap}
.lv{
  min-height:40px;padding:0 14px;border-radius:var(--r-pill);border:2px solid var(--ink-line);
  background:var(--bg-paper);font-size:12.5px;font-weight:800;color:var(--tx-2);transition:all .18s var(--ease-bounce);
}
.lv:hover{transform:translateY(-2px);border-color:var(--ink-soft)}
.lv.on{background:var(--c-mint);border-color:var(--ink);color:var(--ink);box-shadow:0 3px 0 rgba(75,63,53,.2)}
.lv.on.danger{background:var(--s-danger-bg);color:var(--s-danger-ink)}
.item-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:auto}
.item-acts{display:flex;gap:6px}
/* ========================= 11. 空状态 / 快速输入 / 英雄区 ========================= */
.empty{padding:38px 18px 34px;text-align:center}
.empty .big{
  width:88px;height:88px;margin:0 auto 16px;border-radius:44% 56% 46% 54% / 54% 46% 56% 44%;
  background:var(--bg-paper-2);border:2px solid var(--ink);display:grid;place-items:center;color:var(--ink);
  box-shadow:0 4px 0 rgba(75,63,53,.14);animation:sway 6s ease-in-out infinite;
}
.empty .et{font-size:15.5px;font-weight:800;color:var(--tx-1)}
.empty .es{font-size:12.5px;font-weight:700;color:var(--tx-3);margin-top:6px;line-height:1.7}
.empty .btn{margin-top:18px}
.quick{display:flex;gap:11px;align-items:stretch;flex-wrap:wrap}
.quick input{
  flex:1;min-width:180px;min-height:52px;padding:0 18px;font-size:16px;font-weight:700;
  background:#FFFDF8;border:2px solid var(--ink);border-radius:var(--r-pill);outline:none;
  transition:box-shadow .18s,border-color .18s;
}
.quick input:focus{box-shadow:0 0 0 4px rgba(255,211,92,.4);border-color:var(--c-clay)}
.quick input::placeholder{color:var(--tx-3)}
.hero{
  position:relative;overflow:hidden;border:var(--card-border);border-radius:var(--r-panel);
  background:linear-gradient(180deg,#FFF6E4,#FFFBF3);
  padding:20px 22px;margin-bottom:var(--gap-card);box-shadow:var(--sh-stick);
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.hero::after{
  content:"";position:absolute;right:-30px;bottom:-46px;width:132px;height:132px;border-radius:50%;
  background:var(--c-butter);opacity:.7;
}
.hero .face{
  width:56px;height:56px;flex:none;border-radius:50% 46% 52% 48% / 48% 52% 46% 50%;
  background:var(--c-sun);border:2px solid var(--ink);box-shadow:0 3px 0 rgba(75,63,53,.2);
  display:grid;place-items:center;font-size:22px;position:relative;z-index:1;
}
.hero .ht{font-size:16px;font-weight:800;line-height:1.6;position:relative;z-index:1}
.hero .hs{font-size:12.5px;font-weight:700;color:var(--tx-2);margin-top:4px;line-height:1.7;position:relative;z-index:1}
.signature{
  text-align:center;padding:26px 0 8px;
  font-size:11px;font-weight:700;letter-spacing:.2em;text-indent:.1em;
  color:var(--tx-3);
}
.stat-line{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 0}
.stat-line+.stat-line{border-top:2px dotted var(--ink-line)}
.stat-line .k{font-size:13.5px;font-weight:700;color:var(--tx-2)}
.stat-line .v{font-size:19px;font-weight:800;font-family:var(--font-num);font-variant-numeric:tabular-nums}
/* ========================= 12. 弹层与吐司 ========================= */
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center}
.modal-scrim{position:absolute;inset:0;background:rgba(75,63,53,.4);backdrop-filter:blur(2px)}
.modal-panel{
  position:relative;width:100%;max-width:540px;max-height:88vh;overflow-y:auto;
  background:var(--bg-paper);border:2px solid var(--ink);
  border-radius:32px 32px 0 0;
  padding:22px 22px calc(22px + env(safe-area-inset-bottom));
  box-shadow:0 -8px 0 rgba(75,63,53,.08);
  animation:slideUp .34s var(--ease-bounce);
}
.modal-panel::before{
  content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:52px;height:6px;border-radius:99px;background:var(--ink-line);
}
@keyframes slideUp{from{transform:translateY(28px);opacity:0}to{transform:none;opacity:1}}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0 16px}
.modal-head h3{font-size:18px;font-weight:800}
.modal-foot{display:flex;gap:11px;flex-wrap:wrap;margin-top:18px}
.modal-foot .btn{flex:1;min-width:130px}
.modal-sub{font-size:12.5px;font-weight:700;color:var(--tx-3);margin:-6px 0 14px;line-height:1.7}
.toast{
  position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);
  background:var(--ink);color:#FFFBF3;border-radius:var(--r-pill);
  padding:13px 24px;font-size:13.5px;font-weight:800;opacity:0;pointer-events:none;z-index:95;
  transition:all .32s var(--ease-bounce);max-width:86vw;text-align:center;
  box-shadow:0 6px 18px rgba(75,63,53,.24);
  user-select:text;-webkit-user-select:text;
}
.toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
/* ========================= 12b. 同步与登录状态 ========================= */
.sync-status{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;
  border-radius:var(--r-pill);font-size:12px;background:var(--bg-paper-2);
}
.sync-status.synced{color:var(--s-ok-ink);background:var(--s-ok-bg)}
.sync-status.syncing{color:var(--s-warn-ink);background:var(--s-warn-bg)}
.sync-status.error{color:var(--s-danger-ink);background:var(--s-danger-bg)}
.auth-badge{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;
  border-radius:var(--r-pill);font-size:12px;background:var(--c-mint);color:var(--tx-1);
}
.hint.sm{font-size:11.5px}
/* ========================= 13. 覆盖与修正 ========================= */
/* 涂鸦层：绝对定位铺满卡纸，永远压在内容下方（不干扰点击与阅读） */
.main>*:not(.doodles){position:relative;z-index:1}
.doodles{position:absolute;inset:0;height:auto;z-index:0}
/* 桌面端隐藏下拉把手（抽屉只属于手机） */
@media(min-width:768px){.modal-panel::before{display:none}}
/* 卡纸标题的小图标 = 一颗彩色圆扣 */
.card h3 .h-l svg{
  width:17px;height:17px;padding:5px;box-sizing:content-box;border-radius:50%;
  border:2px solid var(--ink);background:var(--c-butter);
}
.card:nth-of-type(3n+2) h3 .h-l svg{background:var(--c-mint)}
.card:nth-of-type(3n) h3 .h-l svg{background:var(--c-sky)}
.card:nth-of-type(4n) h3 .h-l svg{background:var(--c-bubble)}
/* 内容区留一点呼吸，别贴着卡纸边 */
.view-inner{padding-bottom:6px}
@media(max-width:767px){
  .card h3 .h-l svg{width:15px;height:15px;padding:4px}
}
/* ========================= 14. 响应式 ========================= */
@media(max-width:1279px){:root{--pad-main:26px}}
@media(max-width:1023px){
  .app{gap:10px;padding:10px}
  .sidebar{width:78px;padding-top:20px}
  .brand{justify-content:center;padding:0 0 16px}
  .brand h1,.brand .sub,.tab .label,.side-foot .label{display:none}
  .tab{justify-content:center;padding:0}
  .nav{padding:0 10px}
  .doodle-flower{display:none}
}
@media(max-width:767px){
  :root{--pad-main:15px;--gap-card:15px}
  body{font-size:15px}
  /* 手机顶栏拥挤，只留一朵云当装饰 */
  .doodle-sun{display:none}
  .doodle-cloud-a{left:46%;top:4px;width:76px;height:40px;opacity:.45}
  .doodle-stars{display:none}
  .app{gap:0;padding:8px 8px 0}
  .sidebar{display:none}
  .topbar{padding:20px var(--pad-main) 10px;align-items:center}
  .topbar h2{font-size:22px}
  .topbar .sub{display:none}
  .actions{flex-wrap:nowrap}
  .settings-mobile{display:grid}
  .topbar .settings-mobile{display:grid}
  .view{padding-bottom:24px}
  .tiles{grid-template-columns:repeat(3,1fr);gap:11px}
  .tile{padding:13px 12px;border-radius:20px 22px 20px 22px / 22px 20px 22px 20px}
  .tile .tk{font-size:11px}
  .tile .tv{font-size:25px}
  .tile .cap{display:none}
  .items{grid-template-columns:1fr}
  .card{padding:18px 16px 16px}
  .modal-panel{max-height:92vh}
  .modal{align-items:flex-end}
  .tabbar{
    display:flex;flex:none;position:relative;z-index:60;
    background:var(--bg-paper);border-top:2px dashed var(--ink-line);
    padding:8px 6px calc(8px + env(safe-area-inset-bottom));
  }
  .tabbar button{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:58px;border-radius:var(--r-ctl);color:var(--tx-3);
    font-size:11.5px;font-weight:800;transition:all .18s var(--ease-bounce);
  }
  .tabbar button.active{color:var(--ink)}
  .tabbar button.active .glyph{
    background:var(--c-sun);border-color:var(--ink);box-shadow:0 2px 0 rgba(75,63,53,.22);color:var(--ink);
    transform:translateY(-2px) rotate(-6deg);
  }
  .tabbar .glyph{
    width:38px;height:32px;border-radius:var(--r-pill);display:grid;place-items:center;
    border:2px solid transparent;transition:all .2s var(--ease-bounce);
  }
}
@media(min-width:768px){
  .modal{align-items:center}
  .modal-panel{border-radius:32px;margin:0 16px;box-shadow:0 14px 40px rgba(75,63,53,.2)}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}