/* ===================================================
   灵感本 · 样式
   设计目标：简单、好认、拇指好点。
   颜色分两套（白天 / 夜里），靠 html 上的 data-theme 切换。
   =================================================== */

:root{
  /* 白天 */
  --bg:#f4f4f8;
  --card:#ffffff;
  --text:#16161a;
  --sub:#8b8b95;
  --line:#e9e9ef;
  --accent:#5b5bd6;
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 4px 14px rgba(0,0,0,.03);

  /* 高亮四种颜色 */
  --hl-yellow:#ffe9a8;
  --hl-red:#ffd6d0;
  --hl-green:#c8eed3;
  --hl-blue:#cfe4fb;

  /* iPhone 刘海 / 底部小横条留白 */
  --safe-top:env(safe-area-inset-top, 0px);
  --safe-bottom:env(safe-area-inset-bottom, 0px);

  /* 正文字号，设置里可调 */
  --fs:17px;
}

html[data-theme="dark"]{
  /* 夜里。主色要提亮，不然深底上发闷。 */
  --bg:#121216;
  --card:#1c1c22;
  --text:#e8e8ee;
  --sub:#81818d;
  --line:#2b2b34;
  --accent:#7b7bf0;
  --shadow:0 1px 3px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);

  /* 夜里高亮要压暗，不然刺眼 */
  --hl-yellow:#6b5f1f;
  --hl-red:#6b2c2c;
  --hl-green:#245c33;
  --hl-blue:#24445f;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html,body{
  margin:0; padding:0;
  background:var(--bg);
  color:var(--text);
}

body{
  /* 用系统自带的苹方，iPhone 上最好看 */
  font-family:-apple-system, BlinkMacSystemFont, "PingFang SC",
              "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size:var(--fs);
  line-height:1.7;
  /* 关键：防止 iOS 双击屏幕放大 */
  touch-action:manipulation;
  -webkit-text-size-adjust:100%;
  overscroll-behavior-y:none;
}

/* ---------- 顶栏 ---------- */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(var(--safe-top) + 10px) 16px 10px;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.app-title{
  margin:0; font-size:19px; font-weight:600; letter-spacing:.5px;
}
.topbar-actions{ display:flex; gap:6px; }
.icon-btn{
  width:38px; height:38px; border:none; border-radius:10px;
  background:transparent; color:var(--text); font-size:19px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.icon-btn:active{ background:var(--line); }

/* ---------- 分类标签 ---------- */
.tabs{
  display:flex; gap:8px;
  padding:10px 16px 2px;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.tabs::-webkit-scrollbar{ display:none; }
.tab{
  flex:0 0 auto;
  padding:7px 16px; border-radius:999px;
  border:1px solid var(--line); background:var(--card);
  color:var(--sub); font-size:15px; font-family:inherit;
  cursor:pointer;
}
.tab.is-on{
  background:var(--accent); border-color:var(--accent);
  color:#fff; font-weight:600;
}

/* ---------- 搜索 ---------- */
.searchbar{ padding:10px 16px 4px; }
.searchbar input{
  width:100%; padding:11px 14px;
  border:1px solid var(--line); border-radius:12px;
  background:var(--card); color:var(--text);
  /* 16px 起步：小于 16 时 iOS 一聚焦就放大整页 */
  font-size:16px; font-family:inherit;
  outline:none;
}
.searchbar input::placeholder{ color:var(--sub); }

/* ---------- 列表 ---------- */
.list{
  padding:8px 16px calc(var(--safe-bottom) + 110px);
  display:flex; flex-direction:column; gap:12px;
}

/* 一张卡片 = 一条笔记 */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
  overflow:hidden;
}

/* 收起时只露这一行 */
.card-head{
  display:flex; align-items:flex-start; gap:8px;
  padding:14px 14px 12px;
  cursor:pointer;
}
.card-preview{
  flex:1; min-width:0;
  font-size:var(--fs);
  /* 收起时只显示一行，超出的打点 */
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;
  overflow:hidden;
  word-break:break-word;
}
.card-preview.is-empty{ color:var(--sub); font-style:normal; }
.card-star{
  flex:0 0 auto; width:28px; height:28px;
  border:none; background:transparent; cursor:pointer;
  font-size:17px; line-height:1; color:var(--sub);
  display:flex; align-items:center; justify-content:center;
}
.card-star.is-on{ color:var(--accent); }

/* 展开后才出现的东西 */
.card-body-wrap{ display:none; }
.card.is-open .card-body-wrap{ display:block; }
.card.is-open .card-preview{ display:none; }

/* 可编辑的正文区 */
.card-body{
  padding:2px 14px 8px;
  font-size:var(--fs);
  outline:none;
  word-break:break-word;
  white-space:pre-wrap;
  min-height:1.7em;
}
.card-body:empty::before{
  content:"想到啥写啥…";
  color:var(--sub);
}

/* 行内高亮 */
.hl-yellow{ background:var(--hl-yellow); border-radius:3px; }
.hl-red   { background:var(--hl-red);    border-radius:3px; }
.hl-green { background:var(--hl-green);  border-radius:3px; }
.hl-blue  { background:var(--hl-blue);   border-radius:3px; }

/* 卡片底部：日期 + 颜色按钮 */
.card-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:4px 12px 12px;
}
.card-meta{
  font-size:13px; color:var(--sub); white-space:nowrap;
}
.colors{ display:flex; gap:8px; align-items:center; }
.color-dot{
  width:26px; height:26px; border-radius:50%;
  border:1px solid rgba(0,0,0,.12);
  cursor:pointer; padding:0;
}
html[data-theme="dark"] .color-dot{ border-color:rgba(255,255,255,.15); }
.color-dot[data-c="yellow"]{ background:var(--hl-yellow); }
.color-dot[data-c="red"]   { background:var(--hl-red);    }
.color-dot[data-c="green"] { background:var(--hl-green);  }
.color-dot[data-c="blue"]  { background:var(--hl-blue);   }
.color-dot:active{ transform:scale(.9); }

/* 展开后右上角的小工具 */
.card-tools{
  display:flex; gap:4px; align-items:center;
}
.mini-btn{
  border:none; background:transparent; color:var(--sub);
  font-size:14px; font-family:inherit; padding:6px 8px;
  border-radius:8px; cursor:pointer;
}
.mini-btn:active{ background:var(--line); }
.mini-btn.danger{ color:#e5484d; }

/* ---------- 空状态 ---------- */
.empty{
  text-align:center; color:var(--sub);
  padding:80px 30px;
}
.empty p{ margin:6px 0; }
.empty-sub{ font-size:15px; }

/* ---------- 右下角新建按钮 ---------- */
.fab{
  position:fixed; z-index:30;
  right:20px; bottom:calc(var(--safe-bottom) + 22px);
  width:58px; height:58px; border-radius:50%;
  border:none; background:var(--accent); color:#fff;
  font-size:30px; line-height:1;
  box-shadow:0 6px 18px rgba(91,91,214,.35);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  padding-bottom:3px;
}
.fab:active{ transform:scale(.94); }

/* ---------- 底部菜单 ---------- */
.sheet-mask{
  position:fixed; inset:0; z-index:50;
  background:rgba(0,0,0,.35);
  display:flex; align-items:flex-end;
  animation:fade .18s ease;
}
.sheet-mask[hidden]{ display:none; }
@keyframes fade{ from{opacity:0} to{opacity:1} }

.sheet{
  width:100%;
  background:var(--card);
  border-radius:20px 20px 0 0;
  padding:8px 16px calc(var(--safe-bottom) + 18px);
  animation:up .22s ease;
}
@keyframes up{ from{transform:translateY(100%)} to{transform:translateY(0)} }

.sheet-handle{
  width:38px; height:4px; border-radius:2px;
  background:var(--line); margin:6px auto 14px;
}
.sheet-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:6px 0 14px;
}
.sheet-label{ color:var(--sub); font-size:15px; }
.segs{
  display:flex; border:1px solid var(--line); border-radius:10px; overflow:hidden;
}
.segs button{
  border:none; background:transparent; color:var(--sub);
  font-family:inherit; font-size:15px; padding:7px 14px; cursor:pointer;
}
.segs button.is-on{ background:var(--accent); color:#fff; font-weight:600; }

.sheet-btn{
  display:block; width:100%;
  padding:14px; margin-top:8px;
  border:1px solid var(--line); border-radius:12px;
  background:var(--card); color:var(--text);
  font-family:inherit; font-size:16px; text-align:center;
  cursor:pointer;
}
.sheet-btn:active{ background:var(--line); }
.sheet-tip{
  margin:14px 4px 0; font-size:13px; color:var(--sub); line-height:1.6;
}