/* ════════════════════════════════════════════════════════════════
   知否 · 前端原型样式 v3 — 珊瑚陶土暖调（配色提取自引导页参考图）
   ════════════════════════════════════════════════════════════════ */

:root{
  /* ── 核心色板（来自参考图） ── */
  --bg:#FAF6F0;           /* 奶油暖白底 */
  --card:#FFFFFF;         /* 纯白卡片 */
  --border:#F0E8DE;       /* 极浅暖灰分割线 */
  --soft:#FFF5F0;         /* 淡桃粉标签底 */
  --primary:#D4845E;      /* ★ 品牌主色：珊瑚陶土橙 */
  --primary-l:#E5A079;    /* 主色浅态 */
  --primary-d:#B86E45;    /* 主色深态（active） */
  --accent:#C47050;       /* 强调：深陶土 */
  --gold:#C4A882;         /* 金棕：英文副标 */
  --gray:#999999;         /* 次要文字 */
  --ink:#333333;          /* 正文/标题 */

  --tab-h:74px;
  --fs:1;

  /* 阴影统一走陶土色调，轻柔不喧宾夺主 */
  --sh-sm:0 2px 8px rgba(212,132,94,.08);
  --sh-md:0 4px 16px rgba(212,132,94,.12);
  --sh-lg:0 8px 24px rgba(212,132,94,.18);
}

*{margin:0;padding:0;box-sizing:border-box;}

body{
  background:var(--bg);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  min-height:100vh;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

/* 内容容器：桌面端 480 居中，移动端铺满 */
.app{
  position:relative;
  max-width:480px;
  margin:0 auto;
  min-height:100vh;
  background:var(--bg);
  font-size:calc(15px * var(--fs,1));
}

/* 滚动区：底部留出 Tab 高度，避免被遮挡 */
.screen{
  position:relative;z-index:10;
  height:calc(100vh - var(--tab-h) - env(safe-area-inset-bottom,0px));
  overflow-y:auto;
  padding:10px 20px 20px;
  -webkit-overflow-scrolling:touch;
}
.screen::-webkit-scrollbar{width:0;}

.overlay{
  position:absolute;inset:0;top:0;bottom:calc(var(--tab-h) + env(safe-area-inset-bottom,0px));
  background:var(--bg);z-index:20;
  overflow-y:auto;padding:10px 20px 20px;
  -webkit-overflow-scrolling:touch;
  font-size:calc(15px * var(--fs,1));
}
.overlay.hidden{display:none;}
.overlay::-webkit-scrollbar{width:0;}

/* ════════════════════════════════════════════════════════════
   品牌区（对齐参考图：珊瑚圆 Logo + 金棕英文副标 + 主标语）
   ════════════════════════════════════════════════════════════ */
.brand{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;margin:18px 0 16px;
}
.brand .logo-wrap{
  width:88px;height:88px;border-radius:50%;
  background:var(--primary);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sh-md);
  margin-bottom:12px;
}
.brand .logo{
  font-family:"Ma Shan Zheng","STKaiti","KaiTi",serif;
  font-size:2.4em;color:#fff;line-height:1;letter-spacing:3px;
}
.brand .en-sub{
  font-family:"Helvetica Neue",Arial,sans-serif;
  font-size:0.62em;letter-spacing:2.5px;color:var(--gold);
  font-weight:600;text-transform:uppercase;margin-bottom:8px;
}
.brand .slogan{
  font-size:1.12em;color:var(--ink);font-weight:600;line-height:1.5;
  letter-spacing:.5px;
}

/* ══════════════ 一级页头（返回 + 更新 + 排序 + 字号 横排） ════════════ */
.head{margin:8px 0 4px;}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;}
.head-row .grow{flex:1;}

/* 返回胶囊（回首页 / 回上层） */
.back-home,.back-btn{
  display:inline-flex;align-items:center;gap:4px;padding:9px 15px 9px 11px;
  border-radius:22px;background:#fff;border:1px solid var(--border);
  flex-shrink:0;box-shadow:var(--sh-sm);
  font-size:0.93em;color:var(--primary);font-weight:600;letter-spacing:1px;cursor:pointer;
}
.back-home:active,.back-btn:active{transform:scale(.96);}

/* 更新（刷新）按钮 */
.upd{
  width:38px;height:38px;border-radius:50%;background:var(--primary);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:var(--sh-md);cursor:pointer;
}
.upd:active{transform:scale(.94);}
.upd.spin svg{animation:spin .6s linear;}
@keyframes spin{to{transform:rotate(360deg);}}

/* 分段控件（排序 / 字号） */
.seg{display:inline-flex;align-items:center;background:#fff;border:1px solid var(--border);border-radius:20px;padding:3px;gap:2px;flex-shrink:0;}
.seg .s{font-size:0.8em;color:var(--gray);padding:6px 13px;border-radius:17px;white-space:nowrap;cursor:pointer;line-height:1;font-weight:600;}
.seg .s.on{background:var(--primary);color:#fff;}
.seg.font .s{padding:6px 11px;}

/* 搜索 */
.search{
  display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);
  border-radius:16px;padding:12px 15px;font-size:0.87em;color:var(--gray);
  margin-bottom:14px;box-shadow:var(--sh-sm);
}
.search input{border:0;outline:0;background:transparent;flex:1;font-size:1em;color:var(--ink);font-family:inherit;}

/* 快捷入口（对齐参考图胶囊：淡桃粉底 + 珊瑚图标） */
.quick{display:flex;gap:10px;margin-bottom:18px;}
.quick .q{
  flex:1;background:var(--soft);border:1px solid #FBE7DE;border-radius:18px;
  padding:14px 6px;text-align:center;box-shadow:none;cursor:pointer;transition:transform .15s;
}
.quick .q:active{transform:scale(.96);}
.quick .qi{
  width:30px;height:30px;margin:0 auto 7px;border-radius:50%;
  background:#fff;display:flex;align-items:center;justify-content:center;
}
.quick .q span{font-size:0.73em;color:var(--ink);font-weight:600;}

/* ══════════════ 卡片 ══════════════ */
.card{
  background:#fff;border:1px solid var(--border);border-radius:18px;
  padding:15px;margin-bottom:12px;position:relative;box-shadow:var(--sh-sm);cursor:pointer;
  transition:transform .15s;
}
.card:active{transform:scale(.99);}
.tagrow{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:8px;}
.pill{font-size:0.67em;color:var(--primary);background:var(--soft);padding:3px 10px;border-radius:20px;font-weight:600;flex-shrink:0;}
.card h3{font-size:1em;color:var(--ink);margin-bottom:4px;line-height:1.4;}
.card .meta{font-size:0.73em;color:var(--gray);}
.bar{height:7px;background:#F2ECE4;border-radius:6px;margin-top:10px;overflow:hidden;}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--primary-l));border-radius:6px;}
.progress-num{font-size:0.8em;color:var(--primary);font-weight:600;}
.dashi-date{font-size:0.67em;color:var(--accent);font-weight:700;letter-spacing:1px;flex-shrink:0;}
.word-en{font-family:"JetBrains Mono",monospace;font-size:0.87em;color:var(--primary);font-weight:700;}
.word-cn{font-size:0.87em;color:var(--ink);}
.word-bai{font-size:0.73em;color:var(--gray);margin-top:3px;line-height:1.5;}

/* ══════════════ 列表 ══════════════ */
.section-title{font-size:1em;color:var(--ink);font-weight:600;margin:4px 0 12px;display:flex;align-items:center;justify-content:space-between;}
.section-title .more{font-size:0.73em;color:var(--gray);font-weight:400;}
.list-item{
  background:#fff;border:1px solid var(--border);border-radius:16px;
  padding:14px;margin-bottom:10px;display:flex;align-items:flex-start;gap:12px;
  box-shadow:var(--sh-sm);position:relative;cursor:pointer;transition:transform .15s;
}
.list-item:active{transform:scale(.99);}
.li-main{flex:1;min-width:0;}
.li-title{font-size:1em;color:var(--ink);line-height:1.4;}
.li-sub{font-size:0.73em;color:var(--gray);margin-top:3px;line-height:1.5;}
.li-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0;}
.cat-tag{font-size:0.67em;color:var(--primary);background:var(--soft);padding:2px 8px;border-radius:20px;white-space:nowrap;}
.tool-logo{width:42px;height:42px;border-radius:12px;background:var(--soft);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}

/* 新内容角标 */
.new-badge{font-size:0.6em;color:#fff;background:var(--primary);padding:2px 7px;border-radius:20px;font-weight:700;letter-spacing:1px;flex-shrink:0;}

/* ══════════════ 详情 ══════════════ */
.detail-head{
  position:sticky;top:0;z-index:9;display:flex;align-items:center;gap:10px;
  margin:0 -20px 12px;padding:14px 20px;background:var(--bg);border-bottom:1px solid var(--border);
}
.back-btn::after{content:"返回";}
.detail-date{font-size:0.8em;color:var(--accent);font-weight:700;letter-spacing:1px;}
.detail-title{font-size:1.33em;color:var(--ink);line-height:1.4;margin-bottom:10px;font-weight:600;}
.detail-body{font-size:1em;color:#5a5249;line-height:1.7;margin-bottom:14px;}
.detail-source{font-size:0.73em;color:var(--gray);margin-bottom:16px;}
.three-col{background:#fff;border:1px solid var(--border);border-radius:18px;padding:16px;margin-bottom:14px;box-shadow:var(--sh-sm);}
.three-col .row{margin-bottom:14px;}
.three-col .row:last-child{margin-bottom:0;}
.three-col .lab{font-size:0.73em;color:var(--gray);margin-bottom:4px;letter-spacing:1px;}
.three-col .en{font-family:"JetBrains Mono",monospace;font-size:1.07em;color:var(--primary);font-weight:700;}
.three-col .zh{font-size:1.13em;color:var(--ink);font-weight:600;}
.three-col .plain{font-size:0.93em;color:#5a5249;line-height:1.7;}

/* 操作条（收藏 / 点赞） */
.action-bar{display:flex;gap:10px;margin:6px 0 16px;}
.act{
  flex:1;background:#fff;border:1px solid var(--border);border-radius:16px;padding:12px;
  text-align:center;font-size:0.87em;color:var(--ink);
  display:flex;align-items:center;justify-content:center;gap:6px;box-shadow:var(--sh-sm);cursor:pointer;
}
.act:active{transform:scale(.97);}
.act.on{border-color:var(--primary);color:var(--primary);background:var(--soft);}

/* 筛选 chips */
.filters{display:flex;gap:8px;overflow-x:auto;margin-bottom:14px;padding-bottom:2px;}
.filters::-webkit-scrollbar{height:0;}
.chip{flex-shrink:0;font-size:0.8em;color:var(--gray);background:#fff;border:1px solid var(--border);padding:7px 14px;border-radius:20px;white-space:nowrap;cursor:pointer;}
.chip.on{background:var(--primary);color:#fff;border-color:var(--primary);}

/* ══════════════ 我的 ══════════════ */
.mine-head{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--border);border-radius:20px;padding:18px;margin-bottom:14px;box-shadow:var(--sh-sm);}
.avatar-lg{width:54px;height:54px;border-radius:50%;background:var(--soft);display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0;}
.mine-name{font-size:1.13em;color:var(--ink);font-weight:600;}
.mine-tip{font-size:0.8em;color:var(--gray);margin-top:3px;}
.mine-menu{background:#fff;border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:var(--sh-sm);}
.menu-row{display:flex;align-items:center;gap:12px;padding:15px 16px;border-bottom:1px solid #F4EEE6;cursor:pointer;}
.menu-row:last-child{border-bottom:0;}
.menu-row .mi{width:32px;height:32px;border-radius:10px;background:var(--soft);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.menu-row .mt{flex:1;font-size:1em;color:var(--ink);}
.menu-row .ma{font-size:0.8em;color:var(--gray);}
.empty{text-align:center;color:var(--gray);font-size:0.87em;padding:40px 20px;line-height:1.7;}

/* ══════════════ 底部 Tab Bar：固定页面底部 ══════════════ */
.tabbar{
  position:fixed;left:50%;transform:translateX(-50%);bottom:0;
  width:100%;max-width:480px;height:calc(var(--tab-h) + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px);
  background:#fff;border-top:1px solid var(--border);
  display:flex;align-items:center;z-index:30;
}
.tab{flex:1;text-align:center;color:var(--gray);font-size:0.67em;cursor:pointer;transition:color .15s;}
.tab.active{color:var(--primary);}
.tab svg{display:block;margin:0 auto 4px;}

/* FAB + 印章 */
.fab{
  position:fixed;right:max(18px, calc(50% - 258px));bottom:calc(var(--tab-h) + 18px);
  z-index:28;width:52px;height:52px;border-radius:50%;
  background:var(--primary);box-shadow:var(--sh-lg);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.seal{
  position:fixed;right:max(14px, calc(50% - 262px));bottom:calc(var(--tab-h) + 14px);
  z-index:27;width:34px;height:34px;border-radius:8px;background:var(--accent);color:#fff;
  font-family:"Ma Shan Zheng",serif;font-size:1.2em;display:flex;align-items:center;justify-content:center;
  transform:rotate(-4deg);opacity:.92;pointer-events:none;
}

/* ══════════════ 新增表单 ══════════════ */
.form-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:16px;margin-bottom:14px;box-shadow:var(--sh-sm);}
.form-card label{display:block;font-size:0.8em;color:var(--gray);margin:10px 0 5px;}
.form-card input,.form-card textarea,.form-card select{width:100%;border:1px solid var(--border);border-radius:12px;padding:10px;font-size:0.93em;color:var(--ink);font-family:inherit;background:#FCF9F5;outline:0;}
.form-card textarea{resize:vertical;min-height:70px;}
.btn-primary{
  width:100%;background:var(--primary);color:#fff;border:0;border-radius:30px;padding:15px;
  font-size:1.02em;font-weight:600;margin-top:14px;font-family:inherit;cursor:pointer;
  box-shadow:var(--sh-md);
}
.btn-primary:active{background:var(--primary-d);}
.toast{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  background:rgba(51,51,51,.94);color:#fff;font-size:0.87em;padding:12px 20px;
  border-radius:12px;z-index:40;opacity:0;transition:opacity .25s;pointer-events:none;text-align:center;
}
.toast.show{opacity:1;}