/* ============================================================
   浮念 Fuyu — 公共样式（被所有子页面共享引用）
   包含：设计变量、手机外框、状态栏、屏幕容器、
        topbar、icon-btn、底部 TabBar、通用勾选框、公共动画
   各子页面专属样式写在各自的 <style> 中。
   ============================================================ */
:root{
  /* Brand */
  --tomato:#FF6B5B;          /* 番茄红 - 主色 */
  --tomato-deep:#E8503F;
  --tomato-soft:#FFE5E1;
  --amber:#FFB23B;           /* 强调 */
  --mint:#5BD3B5;            /* 浮念 */
  --mint-soft:#E1F8F2;
  --ink-1:#1A1620;           /* 主文字 */
  --ink-2:#5A5563;           /* 次文字 */
  --ink-3:#9A95A2;           /* 辅助 */
  --line:#F0EDF2;
  --line-strong:#E5E0EA;
  --bg:#FAF8FB;              /* 页面背景 */
  --surface:#FFFFFF;
  --surface-2:#F5F2F7;
  --tabbar-h:84px;
  --safe-top:env(safe-area-inset-top,0);
  --safe-bot:env(safe-area-inset-bottom,0);
  --shadow-sm:0 1px 2px rgba(26,22,32,.04),0 2px 8px rgba(26,22,32,.04);
  --shadow-md:0 4px 16px rgba(26,22,32,.06),0 8px 32px rgba(26,22,32,.06);
  --shadow-lg:0 12px 40px rgba(232,80,63,.18);
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;background:var(--bg);color:var(--ink-1);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",Arial,sans-serif;
  font-feature-settings:"kern","tnum";
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease,color .25s ease;
}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,textarea{font:inherit;color:inherit;background:none;border:0;outline:0}
a{color:inherit;text-decoration:none}

/* ========== 桌面布局：手机外框（公共组件） ========== */
.desktop{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;gap:40px;
  padding:40px 20px;
  background:
    radial-gradient(1200px 600px at 10% -10%, #FFE5E1 0%, transparent 60%),
    radial-gradient(900px 500px at 100% 0%, #E1F8F2 0%, transparent 55%),
    var(--bg);
}
@media (max-width:780px){
  .desktop{background:var(--bg);padding:0}
}
.phone{
  position:relative;
  width:390px;height:844px;
  background:var(--bg);
  border-radius:48px;
  box-shadow:0 30px 80px rgba(26,22,32,.18),0 0 0 12px #1A1620,0 0 0 13px #2A2530;
  overflow:hidden;
}
@media (max-width:780px){
  .phone{width:100vw;height:100vh;border-radius:0;box-shadow:none}
  .desktop{padding:0}
}

/* 状态栏（公共组件） */
.statusbar{
  position:absolute;top:0;left:0;right:0;height:54px;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 28px 0;color:var(--ink-1);font-weight:600;font-size:15px;
  z-index:10;pointer-events:none;
}
.statusbar .right{display:flex;align-items:center;gap:6px}
.battery{
  width:24px;height:12px;border:1.5px solid currentColor;border-radius:3px;position:relative;
  display:flex;align-items:center;padding:1.5px;
}
.battery::after{content:"";position:absolute;right:-3px;top:3px;width:2px;height:4px;background:currentColor;border-radius:0 1px 1px 0}
.battery i{display:block;height:100%;width:80%;background:currentColor;border-radius:1px}

/* 灵动岛 */
.dynamic-island{
  position:absolute;top:11px;left:50%;transform:translateX(-50%);
  width:120px;height:34px;background:#000;border-radius:20px;z-index:20;
}

/* 屏幕容器 */
.screen-wrap{
  position:absolute;inset:0;
  padding-top:54px;
  padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0));
  overflow:hidden;
}
.screen{
  position:absolute;inset:54px 0 calc(var(--tabbar-h) + env(safe-area-inset-bottom,0)) 0;
  overflow-y:auto;overflow-x:hidden;
  padding:0 20px 24px;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}
.screen::-webkit-scrollbar{display:none}

/* ========== 顶部导航（公共组件） ========== */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 0 14px;position:relative;
  background:linear-gradient(var(--bg) 70%,transparent);
  z-index:5;
}
.topbar h1{font-size:28px;font-weight:800;margin:0;letter-spacing:-.5px}
.topbar .sub{color:var(--ink-3);font-size:13px;margin-top:2px}
.topbar .right-actions{display:flex;gap:8px}
.icon-btn{
  width:38px;height:38px;border-radius:50%;background:var(--surface);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-sm);color:var(--ink-1);
}
.icon-btn:active{transform:scale(.92)}
.icon-btn svg{width:18px;height:18px}

/* ========== 底部 TabBar（公共组件，由 shared.js 注入） ========== */
.tabbar{
  position:absolute;left:0;right:0;bottom:0;height:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0));
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid var(--line);
  display:flex;align-items:flex-start;justify-content:space-around;
  padding:8px 12px env(safe-area-inset-bottom,8px);
  z-index:30;
}
.tab{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:6px 0 0;color:var(--ink-3);
  font-size:11px;font-weight:500;
  position:relative;
  transition:color .2s;
}
.tab .dot{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:0;transition:opacity .2s}
.tab.active{color:var(--tomato)}
.tab.active .dot{opacity:1}
.tab svg{width:24px;height:24px}

/* 中间"添加"——正圆 CTA 按钮（浮起、主色、仅图标） */
.tab.cta{
  flex:0 0 auto;
  width:56px;height:56px;
  margin-top:-20px;                 /* 向上浮起，露出半球 */
  padding:0;                         /* 覆盖 .tab 的 padding:6px 0 0 */
  background:var(--tomato);
  color:#fff;
  border-radius:50%;
  box-shadow:var(--shadow-lg);
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;
  transition:transform .18s ease, box-shadow .18s ease;
}
.tab.cta svg{
  width:24px;height:24px;
  display:block;                     /* 去掉 inline 基线对齐的偏差 */
  stroke-width:2.6;                  /* 略加粗，在 56 圆里更协调 */
}
.tab.cta .dot{display:none}
.tab.cta:active{transform:translateY(-20px) scale(.92)}
.tab.cta.active{background:var(--tomato-deep)}
.tab.cta.active:active{transform:translateY(-20px) scale(.92)}

/* ========== 通用勾选框（公共组件） ========== */
.checkbox{
  width:22px;height:22px;border-radius:50%;border:2px solid var(--line-strong);
  flex-shrink:0;margin-top:2px;display:flex;align-items:center;justify-content:center;
  transition:all .2s;
}
.checkbox.checked{background:var(--tomato);border-color:var(--tomato);color:#fff}
.checkbox.checked::after{content:"✓";font-size:13px;font-weight:800}
.checkbox.chk-sm{width:16px;height:16px;margin-top:1px}
.checkbox.chk-sm::after{font-size:10px}

/* ========== 通用工具类 ========== */
.divider{height:1px;background:var(--line);margin:18px -20px}
.spacer-l{height:80px}

/* ========== 浮念卡片（fuyu / search 共用外观） ========== */
.bubble-card{
  position:relative;margin-bottom:10px;
  background:var(--tomato-soft);
  border-radius:var(--r-md);overflow:hidden;
  animation:slideIn .3s ease backwards;
}
.bubble-inner{
  position:relative;z-index:1;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:14px 14px 14px 18px;
  box-shadow:var(--shadow-sm);
  transition:transform .25s cubic-bezier(.4,0,.2,1);
}
.bubble-inner::before{
  content:"";position:absolute;left:6px;top:14px;bottom:14px;width:3px;
  background:var(--mint);border-radius:2px;
}
.bubble-card .row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bubble-card .text{font-size:15px;line-height:1.5;color:var(--ink-1);font-weight:500}
.bubble-card .meta{display:flex;align-items:center;gap:8px;margin-top:8px}
.tag{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11px;padding:3px 8px;border-radius:99px;
  background:var(--surface-2);color:var(--ink-2);font-weight:500;
}
.tag.mint{background:var(--mint-soft);color:#1F8A6E}
.tag.tomato{background:var(--tomato-soft);color:var(--tomato-deep)}
.tag.amber{background:#FFF1D6;color:#A06800}
.time{
  color:var(--ink-3);font-size:11px;font-weight:500;
  white-space:nowrap;font-variant-numeric:tabular-nums;
  letter-spacing:-.2px;
}
.section-title{
  display:flex;align-items:center;justify-content:space-between;
  margin:18px 0 10px;font-size:13px;font-weight:600;color:var(--ink-2);
  text-transform:uppercase;letter-spacing:.5px;
}
.section-title .count{
  background:var(--surface-2);color:var(--ink-2);
  padding:2px 8px;border-radius:99px;font-size:11px;
}

/* 浮念入场动画（公共 keyframes，具体元素动画在各页定义） */
@keyframes slideIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

/* ========== 底部添加面板（bottom sheet，全站共享） ========== */
/* 关键：mask 和 sheet 是 .phone 的两个独立子元素（不再嵌套），
   sheet 的 containing block 始终是 .phone，不会被 mask 位置干扰。 */
.sheet-mask{
  position:absolute;left:0;right:0;top:0;bottom:0;
  z-index:1000;
  background:rgba(26,22,32,.45);
  opacity:0;transition:opacity .3s ease;
  pointer-events:none;
  border-radius:48px;                 /* 跟 .phone 圆角一致，遮罩边沿与手机框贴合 */
}
.phone.sheet-open .sheet-mask{opacity:1;pointer-events:auto}
.sheet{
  position:absolute;left:8px;right:8px;
  bottom:calc(var(--tabbar-h) + 10px + env(safe-area-inset-bottom,0px));
  z-index:1001;
  background:var(--surface);
  border-radius:24px;
  transform:translateY(120%);
  transition:transform .34s cubic-bezier(.32,.72,0,1);
  display:flex;flex-direction:column;
  max-height:calc(100% - var(--tabbar-h) - 20px - env(safe-area-inset-bottom,0px));   /* 相对 .phone */
  box-shadow:0 12px 40px rgba(0,0,0,.28);
  overflow:hidden;
  pointer-events:auto;
}
.phone.sheet-open .sheet{transform:translateY(0)}
.sheet .grab{
  width:36px;height:5px;border-radius:99px;
  background:var(--line-strong);
  margin:10px auto 4px;flex:0 0 auto;
}

/* 双 tab（今天 / 浮念） */
.add-tabs{
  display:flex;align-items:center;
  padding:6px 24px 0;
  border-bottom:1px solid var(--line);
  background:var(--surface);
}
.add-tabs .tb{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:10px 0 12px;
  font-size:16px;font-weight:600;color:var(--ink-3);
  background:none;border:0;cursor:pointer;position:relative;
}
.add-tabs .tb.on{color:var(--ink-1);font-weight:700}
.add-tabs .tb.on::after{
  content:"";position:absolute;left:50%;bottom:-1px;
  width:64px;height:3px;background:var(--ink-1);
  border-radius:99px;transform:translateX(-50%);
}
/* 输入区 */
.add-input{
  display:flex;align-items:center;gap:12px;
  padding:20px 20px 16px;
  background:var(--surface);
}
.add-input .avatar{
  width:36px;height:36px;border-radius:50%;
  background:#fff;border:1.5px solid var(--ink-1);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;color:var(--ink-1);
  flex:0 0 auto;cursor:pointer;
}
.add-input .field{
  flex:1;display:flex;align-items:center;gap:8px;
  border-bottom:1px solid var(--line);
  padding:8px 4px 10px;
}
.add-input .field .bar{
  width:3px;height:18px;background:var(--mint);
  border-radius:99px;flex:0 0 auto;
  opacity:0;transition:opacity .2s;
}
.add-input .field.focus .bar{opacity:1}
.add-input .field input{
  flex:1;background:transparent;border:0;outline:0;
  font-size:15px;color:var(--ink-1);
  font-family:inherit;padding:0;
}
.add-input .field input::placeholder{color:var(--ink-3)}
.add-input .send{
  width:36px;height:36px;border:0;background:transparent;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--ink-3);
  flex:0 0 auto;border-radius:50%;
  transition:background .15s,color .15s;
}
.add-input .send.on{color:var(--mint)}
.add-input .send:active{background:var(--surface-2)}
.add-input .send svg{width:24px;height:24px;transform:rotate(45deg) translate(-2px,2px)}

/* 提示行 */
.add-hint{
  margin:4px 20px 8px;font-size:11px;color:var(--ink-3);
  display:flex;align-items:center;gap:6px;
}
.add-hint .dot{width:4px;height:4px;background:var(--mint);border-radius:50%}

/* 分类选择面板（点击头像弹出，覆盖键盘） */
.cat-panel{
  margin-top:auto;background:var(--surface);
  border-top:1px solid var(--line);
  padding:8px 20px 16px;max-height:60%;overflow-y:auto;
}
.cat-panel[hidden]{display:none}
.sheet .cat-panel{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  max-height:72%;background:var(--surface);
}
.cat-new{
  display:inline-flex;align-items:center;gap:4px;
  padding:10px 0 12px;font-size:15px;font-weight:700;color:#3D7AC9;
  cursor:pointer;border:0;background:transparent;
}
.cat-new:active{opacity:.7}
.cat-new .plus{font-size:18px;font-weight:600;line-height:1}
.cat-list{display:flex;flex-direction:column}
.cat-it{
  display:flex;align-items:center;gap:14px;
  padding:14px 0;border-bottom:1px dashed var(--line);
  cursor:pointer;background:transparent;border-left:0;border-right:0;border-top:0;
  width:100%;text-align:left;
}
.cat-it:last-child{border-bottom:0}
.cat-it:active{background:var(--surface-2)}
.cat-it .ic{
  width:32px;height:32px;border-radius:50%;
  background:#fff;border:1.5px solid var(--ink-1);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;color:var(--ink-1);flex:0 0 auto;
}
.cat-it .nm{font-size:16px;color:var(--ink-2);font-weight:500;flex:1}
.cat-it.on .nm{color:var(--ink-1);font-weight:600}
.cat-it .chk{width:22px;height:22px;color:var(--ink-1);opacity:0;transition:opacity .15s}
.cat-it.on .chk{opacity:1}
.cat-foot{font-size:11px;color:var(--ink-3);text-align:center;padding:10px 0 4px;line-height:1.4}

/* iOS 风格键盘占位（仅视觉，无交互） */
.kbd{
  margin-top:auto;background:#D2D4DA;
  padding:6px 3px;border-top:1px solid #B8B9BF;
  display:flex;flex-direction:column;gap:6px;flex:0 0 auto;
}
.kbd .kb-row{display:flex;gap:5px;padding:0 3px}
.kbd .key{
  flex:1;height:42px;background:#fff;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:500;color:var(--ink-1);
  box-shadow:0 1px 0 rgba(0,0,0,.15);position:relative;
}
.kbd .key .hint{position:absolute;top:3px;right:6px;font-size:9px;color:var(--ink-3);font-weight:600}
.kbd .key.dark{background:#ABB0BC;color:#fff;font-size:14px}
.kbd .key.gray{background:#ABB0BC;color:#fff;font-size:15px}
.kbd .key.gray2{background:#8E94A3;color:#fff}
.kbd .key.empty{background:transparent;box-shadow:none}
.kbd .key .ico{width:20px;height:20px;display:flex;align-items:center;justify-content:center}
.kbd .key .ico svg{width:20px;height:20px}
.kbd .key.space{flex:5}
.kbd .key.tiny{font-size:11px;font-weight:600}
.kbd .bar-top{display:flex;align-items:center;justify-content:space-between;padding:6px 18px 0;font-size:12px;color:var(--ink-2)}
.kbd .bar-top .globe{font-size:18px}
.kbd .bar-top .ai-dot{width:6px;height:6px;background:var(--mint);border-radius:50%;display:inline-block;margin-right:4px;vertical-align:middle}