/* ============================================================
   fitness-v2 · 统一设计令牌（theme.css）
   v3.0.0  ·  漫画线稿风（手绘 Comic-Sketch）
   —— 用户拍板：整套系统改漫画线稿风
   铁律：
   · 全局统一 :root 变量，禁止裸色值（点缀例外见 .ink）
   · 不对手绘容器加 transform 倾斜/动画（r10 教训：交互失效）
   · 粗黑描边为主视觉，纸张米黄底，手写感标题，漫画对话框提示
   ============================================================ */
:root{
  /* 漫画线稿核心色 */
  --paper:#FBF6EA;        /* 米黄纸张背景 */
  --card:#FFFDF6;         /* 卡片（偏白略暖） */
  --ink:#1F1F1F;          /* 描边/文字 纯黑 */
  --ink-soft:#555;        /* 次级文字（手写灰） */
  --ink-faint:#9A948A;    /* 弱化文字 */
  --muted:#8A918C;        /* 旧 muted 保留兼容 */
  --line:2px;             /* 粗描边宽度 */

  /* 漫画点缀色 */
  --comic-red:#E5484D;    /* 警示/删除 漫画红 */
  --comic-blue:#185FA5;   /* 链接/信息 漫画蓝 */
  --comic-yellow:#F5B301; /* 高亮/警告 漫画黄 */
  --comic-red-bg:#FDEEEE;
  --comic-yellow-bg:#FFF6E3;

  /* 主色保留为绿色（健康主题），但以线稿方式呈现 */
  --primary:#1F1F1F;      /* 主要动作=黑色描边 */
  --primary-dark:#000;
  --accent:#0E8A63;       /* 强调绿（健康） */
  --accent-dark:#0A6B4C;
  --accent-soft:#E8F5EF;
  --link:#185FA5;

  /* 形状：手绘感用稍大圆角 + 粗边 */
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:22px;
  --shadow-card:3px 4px 0 rgba(31,31,31,.12);
  --shadow-float:6px 8px 0 rgba(31,31,31,.15);

  /* 动效 */
  --dur:.16s;
  --ease:cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{font-size:16px;}
body{
  font-family:-apple-system,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  background-color:var(--paper);
  /* 漫画稿纸纹理：淡网格 + 纸张噪点 */
  background-image:
    linear-gradient(rgba(31,31,31,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31,31,31,.035) 1px, transparent 1px);
  background-size:22px 22px;
  color:var(--ink);
  line-height:1.6;
  padding-bottom:90px;
  -webkit-font-smoothing:antialiased;
}
input,select,textarea,button{font-family:inherit;font-size:16px;}

/* 手写体标题字体（漫画感） */
.hand, h1, h2, h3, .metric .v, .timer .big, .today-sum .v{
  font-family:"Comic Sans MS","Chalkboard SE","ZCOOL KuaiLe","Kaiti SC","STKaiti","楷体",serif;
  letter-spacing:.5px;
}

/* 顶部栏：漫画横幅（黑描边 + 红色小旗标） */
header{
  background:var(--ink);
  color:#fff;
  padding:16px 16px 14px;
  padding-top:calc(16px + env(safe-area-inset-top,0px));
  position:sticky;top:0;z-index:20;
  box-shadow:var(--shadow-card);
  border-bottom:3px solid var(--comic-red);
}
header h1{font-size:20px;font-weight:600;}
header .sub{font-size:12px;opacity:.85;margin-top:2px;}

/* 卡片：白底 + 粗黑描边 + 手绘阴影 */
.card{
  background:var(--card);
  border:var(--line) solid var(--ink);
  border-radius:var(--radius-md);
  padding:16px;
  margin:14px 16px;
  box-shadow:var(--shadow-card);
  position:relative;
}
/* 卡片左上角手绘小标签角标（装饰，非交互） */
.card::before{
  content:"";
  position:absolute;top:-7px;left:14px;
  width:34px;height:12px;
  background:var(--comic-yellow);
  border:var(--line) solid var(--ink);
  border-radius:4px;
  transform:rotate(-3deg);
  z-index:1;
}
.card h3{font-size:16px;font-weight:600;margin-bottom:12px;color:var(--ink);}
.card h3::before{content:"✏️ "; }
.card .sub{font-size:12px;color:var(--ink-faint);margin-bottom:10px;line-height:1.6;}

/* 表单行：下划线式手写输入 */
.row{display:flex;align-items:center;margin-bottom:12px;gap:10px;}
.row label{font-size:13px;color:var(--ink-soft);flex-shrink:0;min-width:68px;font-weight:500;}
.row input,.row select,.row textarea{
  flex:1;padding:10px 12px;border:var(--line) solid var(--ink);
  border-radius:var(--radius-sm);font-size:16px;background:#fff;color:var(--ink);
}
.row input:focus,.row select:focus,.row textarea:focus{outline:none;box-shadow:0 0 0 3px var(--comic-yellow);}
.row textarea{min-height:72px;resize:vertical;}

/* 按钮：漫画粗黑边 */
.btn{display:block;width:100%;padding:14px;border:var(--line) solid var(--ink);border-radius:var(--radius-sm);font-size:16px;font-weight:600;cursor:pointer;text-align:center;transition:background var(--dur) var(--ease);background:#fff;color:var(--ink);}
.btn:active{box-shadow:none;transform:translate(2px,2px);}
.btn-primary{background:var(--ink);color:#fff;border-color:var(--ink);}
.btn-primary:active{background:var(--primary-dark);}
.btn-ghost{background:#fff;color:var(--ink);}
.btn-ghost:active{background:#F0EAE0;}
.btn-danger{background:var(--comic-red-bg);color:var(--comic-red);border-color:var(--comic-red);}
.btn-sm{padding:8px 14px;font-size:13px;display:inline-block;width:auto;}
.btn-add{display:block;width:100%;padding:12px;border:var(--line) dashed var(--ink);border-radius:var(--radius-sm);background:transparent;color:var(--ink);font-size:14px;cursor:pointer;margin-top:8px;}
.btn-add:active{background:#F0EAE0;}

/* 分组标签：漫画贴纸 */
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:14px;border:var(--line) solid var(--ink);background:#fff;color:var(--ink-soft);font-size:13px;cursor:pointer;transition:all var(--dur) var(--ease);box-shadow:2px 2px 0 rgba(31,31,31,.1);}
.chip.sel{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-dark);font-weight:600;box-shadow:2px 2px 0 var(--accent);}
.chip:active{box-shadow:none;transform:translate(2px,2px);}

/* 状态提示：漫画对话框 */
.tips{font-size:12px;color:var(--ink-faint);margin-top:4px;}
.warn-box{
  background:var(--comic-yellow-bg);
  border:var(--line) solid var(--ink);
  border-radius:var(--radius-sm);
  padding:11px 13px;
  font-size:13px;color:var(--ink);margin:8px 0;line-height:1.6;
  position:relative;
  box-shadow:2px 2px 0 rgba(31,31,31,.12);
}
/* 对话框小尾巴 */
.warn-box::after{
  content:"";position:absolute;top:100%;left:26px;
  border:8px solid transparent;border-top:8px solid var(--ink);
}
.danger-box{
  background:var(--comic-red-bg);
  border:var(--line) solid var(--comic-red);
  border-radius:var(--radius-sm);
  padding:11px 13px;font-size:13px;color:var(--comic-red);margin:8px 0;line-height:1.6;
  box-shadow:2px 2px 0 rgba(229,72,77,.15);
}

/* 底部固定操作条 */
.actionbar{
  position:fixed;bottom:0;left:0;right:0;
  background:var(--card);
  border-top:var(--line) solid var(--ink);
  padding:12px 16px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));
  display:flex;gap:10px;z-index:30;
}
.actionbar .btn{flex:1;}
.actionbar .btn-half{flex:1;}

/* 列表条目：手绘下划线 */
.entry{display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:1.5px solid var(--ink-soft);}
.entry:last-child{border-bottom:none;}
.entry .del{color:var(--comic-red);font-size:12px;padding:4px 8px;border:1.5px solid var(--comic-red);border-radius:6px;background:none;cursor:pointer;flex-shrink:0;}
.entry .del:active{background:var(--comic-red-bg);}
.entry .main{flex:1;}
.entry .main .t{font-size:15px;font-weight:500;}
.entry .main .d{font-size:12px;color:var(--ink-faint);}

/* 计时器 */
.timer{text-align:center;padding:24px 16px;}
.timer .big{font-size:56px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:2px;color:var(--ink);}
.timer .controls{display:flex;gap:10px;justify-content:center;margin-top:16px;flex-wrap:wrap;}

/* 弹层 */
.mask{position:fixed;inset:0;background:rgba(31,31,31,.5);z-index:100;display:flex;align-items:flex-end;justify-content:center;}
.modal{background:var(--card);width:100%;max-width:520px;border:var(--line) solid var(--ink);border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:20px 16px 24px;max-height:82vh;overflow-y:auto;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));box-shadow:var(--shadow-float);}
.modal h2{font-size:18px;font-weight:600;margin-bottom:12px;}
.modal .sub{font-size:12px;color:var(--ink-faint);margin-bottom:8px;line-height:1.6;}

/* 趋势图容器 */
.chart-box{width:100%;height:220px;position:relative;border:var(--line) solid var(--ink);border-radius:var(--radius-sm);background:#fff;padding:6px;}
.chart-legend{display:flex;gap:16px;justify-content:center;font-size:12px;color:var(--ink-faint);margin-top:6px;flex-wrap:wrap;}

/* ============================================================
   页面组件类（原各页面内联，统一提升到主题，全局手绘化）
   ============================================================ */

/* 顶部导航 tab：漫画书签 */
.nav-tabs{display:flex;background:var(--card);border-bottom:var(--line) solid var(--ink);margin:0;}
.nav-tabs a{flex:1;text-align:center;padding:12px 0;font-size:14px;color:var(--ink-faint);text-decoration:none;border-bottom:3px solid transparent;}
.nav-tabs a.on{color:var(--ink);font-weight:600;border-bottom:3px solid var(--comic-red);}

/* 指标卡网格 */
.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:8px;}
.metric{background:#fff;border:var(--line) solid var(--ink);border-radius:var(--radius-sm);padding:12px;text-align:center;box-shadow:2px 2px 0 rgba(31,31,31,.1);}
.metric .v{font-size:20px;font-weight:700;color:var(--accent-dark);}
.metric .l{font-size:11px;color:var(--ink-faint);margin-top:2px;}
.trend{font-size:12px;margin-top:2px;}
.up{color:var(--comic-red);} .down{color:var(--accent);} .flat{color:var(--ink-faint);}
.hl-sub{font-size:11px;color:var(--ink-faint);font-weight:400;}

/* 当日汇总 */
.today-sum{display:flex;gap:16px;background:#fff;border:var(--line) solid var(--ink);border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:10px;box-shadow:2px 2px 0 rgba(31,31,31,.1);}
.today-sum .item{flex:1;text-align:center;}
.today-sum .v{font-size:18px;font-weight:700;color:var(--accent-dark);}
.today-sum .l{font-size:11px;color:var(--ink-faint);}

/* 训练卡计时 */
.timer-card{text-align:center;padding:18px 16px;}
.timer-card .big{font-size:44px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink);}
.timer-card .label{font-size:12px;color:var(--ink-faint);margin-bottom:4px;}
.timer-row{display:flex;gap:10px;margin-top:10px;justify-content:center;flex-wrap:wrap;}
.rest-card{background:var(--comic-yellow-bg);border:var(--line) solid var(--ink);}
.rest-card .big{color:var(--comic-yellow);}
.btn-warn{background:var(--comic-yellow);color:#fff;border-color:var(--ink);}
.btn-warn:active{background:#d8941a;}
.btn-rest{background:var(--comic-yellow);color:#fff;border-color:var(--ink);}
.btn-muted{background:#F0EAE0;color:var(--ink-soft);border-color:var(--ink);}

/* 打卡字段 */
.wo-fields{flex:1;}
.wo-fields input,.wo-fields select{width:100%;padding:10px 11px;border:var(--line) solid var(--ink);border-radius:var(--radius-sm);font-size:15px;margin-top:6px;background:#fff;}
.wo-fields .flex{display:flex;gap:8px;align-items:center;margin-top:6px;}

/* 计划动作 */
.plan-act{display:flex;padding:8px 0;border-bottom:1.5px solid var(--ink-soft);font-size:14px;}
.plan-act:last-child{border-bottom:none;}
.plan-act .num{color:var(--ink-faint);width:22px;flex-shrink:0;}
.plan-act .mus{color:var(--accent-dark);font-weight:500;width:52px;flex-shrink:0;}
.plan-act .ex{flex:1;}
.plan-act .det{color:var(--ink-faint);font-size:12px;}
.risk-bad{background:var(--comic-red-bg);color:var(--comic-red);font-size:10px;padding:1px 7px;border-radius:8px;flex-shrink:0;border:1px solid var(--comic-red);}
.risk-cau{background:var(--comic-yellow-bg);color:#B87900;font-size:10px;padding:1px 7px;border-radius:8px;flex-shrink:0;border:1px solid var(--comic-yellow);}

/* 空状态 */
.empty-state{text-align:center;padding:40px 20px;color:var(--ink-faint);}
.empty-state .ic{font-size:40px;margin-bottom:12px;}

/* 食物条目 */
.food-entry{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap;}
.food-entry select,.food-entry input{padding:9px 10px;border:var(--line) solid var(--ink);border-radius:var(--radius-sm);font-size:14px;background:#fff;}
.food-entry .name{flex:1;min-width:120px;}
.food-entry .kcal{width:70px;}

/* 旁观者页 */
.spec-header{background:var(--ink);color:#fff;padding:20px 16px;text-align:center;border-bottom:3px solid var(--comic-blue);}
.spec-header h1{font-size:20px;}
.spec-header p{font-size:13px;opacity:.85;margin-top:4px;}
.recent{display:flex;padding:10px 0;border-bottom:1.5px solid var(--ink-soft);font-size:13px;}
.recent:last-child{border:none;}
.recent .d{color:var(--ink-faint);width:70px;flex-shrink:0;}
.recent .m{color:var(--comic-blue);font-weight:500;width:46px;flex-shrink:0;}
.recent .e{flex:1;}
.recent .w{color:var(--ink-faint);font-size:12px;}
.closed{text-align:center;padding:60px 30px;color:var(--ink-faint);}
.closed .ic{font-size:44px;margin-bottom:12px;}

/* 登录页 */
.login-box{width:88%;max-width:400px;background:var(--card);border:var(--line) solid var(--ink);border-radius:var(--radius-lg);padding:32px 24px;box-shadow:var(--shadow-float);}
.logo{text-align:center;margin-bottom:24px;}
.logo .ic{font-size:44px;}
.logo h1{font-size:22px;font-weight:700;color:var(--ink);margin-top:8px;}
.logo p{font-size:13px;color:var(--ink-faint);margin-top:4px;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:13px;color:var(--ink-faint);margin-bottom:6px;}
.field input{width:100%;padding:13px 14px;border:var(--line) solid var(--ink);border-radius:var(--radius-sm);font-size:16px;background:#fff;}
.field input:focus{outline:none;box-shadow:0 0 0 3px var(--comic-yellow);}
.login-btn{width:100%;padding:14px;border:var(--line) solid var(--ink);border-radius:var(--radius-sm);background:var(--ink);color:#fff;font-size:16px;font-weight:600;cursor:pointer;margin-top:8px;}
.login-btn:active{box-shadow:none;transform:translate(2px,2px);}
.err{color:var(--comic-red);font-size:13px;margin-top:10px;text-align:center;min-height:18px;}
.foot{text-align:center;font-size:12px;color:var(--ink-faint);margin-top:18px;}
.spec-link{color:var(--comic-blue);text-decoration:none;}

/* 分割线 & 间距 & 工具类 */
.divider{height:1.5px;background:var(--ink-soft);margin:14px 0;}
.mt8{margin-top:8px;} .mt16{margin-top:16px;} .mb16{margin-bottom:16px;}
.text-muted{color:var(--ink-faint);} .text-center{text-align:center;}
.flex{display:flex;align-items:center;gap:8px;}
.spacer{flex:1;}

/* 建档部位排序行：名称 + 分级下拉（手绘下划线分隔） */
.pri-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1.5px solid var(--ink-soft);}
.pri-row:last-child{border-bottom:none;}
.pri-name{font-size:15px;font-weight:500;color:var(--ink);}
.pri-level{flex:0 0 auto;padding:7px 10px;border:var(--line) solid var(--ink);border-radius:var(--radius-sm);font-size:14px;background:#fff;color:var(--ink);}

/* 建档/表单两列网格：label 在上、输入在下，短数字字段紧凑排列 */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;}
.grid2 .fld{display:flex;flex-direction:column;gap:4px;}
.grid2 .fld label{font-size:12px;color:var(--ink-soft);font-weight:500;}
.grid2 .fld input,.grid2 .fld select{width:100%;padding:10px 12px;border:var(--line) solid var(--ink);border-radius:var(--radius-sm);font-size:16px;background:#fff;color:var(--ink);}
.grid2 .fld input:focus,.grid2 .fld select:focus{outline:none;box-shadow:0 0 0 3px var(--comic-yellow);}
@media (max-width:340px){ .grid2{grid-template-columns:1fr;} }

/* 滚动条美化 */
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-thumb{background:var(--ink-faint);border-radius:3px;border:1px solid var(--paper);}

/* ============================================================
   移动端适配增强（手机优先，覆盖窄屏拥挤布局）
   ============================================================ */
@media (max-width:480px){
  /* 当日营养汇总：4 列太挤，降为 2 列 */
  .today-sum{flex-wrap:wrap;gap:10px 16px;}
  .today-sum .item{flex:1 1 38%;min-width:0;}

  /* 打卡字段：组/次/重量一行放不下时换行 */
  .wo-fields .flex{flex-wrap:wrap;}

  /* 计划动作行：允许 det 换行，避免溢出 */
  .plan-act{flex-wrap:wrap;gap:2px 8px;}
  .plan-act .ex{flex:1 1 100%;}
  .plan-act .det{margin-left:22px;}

  /* 食物录入行 */
  .food-entry .name{min-width:100%;}
  .food-entry .kcal{width:100%;}

  /* 建档部位排序行：select 不挤压名称 */
  .pri-row{flex-wrap:wrap;}
  .pri-name{flex:1 1 auto;}
  .pri-level{flex:0 0 auto;}

  /* 表单标签与输入在小屏更宽松 */
  .row{gap:8px;}
  .row label{min-width:62px;font-size:12.5px;}

  /* 卡片边距收窄，信息密度更高 */
  .card{margin:12px 12px;padding:14px;}

  /* 指标卡字号小幅收敛，避免数字溢出 */
  .metric .v{font-size:18px;}
}

/* 极窄屏兜底 */
@media (max-width:340px){
  .row label{min-width:56px;}
  .metric-grid,.metric-grid-3,.metric-grid-4{grid-template-columns:repeat(2,1fr);}
}