/* ============================================================
   绘美慧 · 综评档案平台 —— Apple 风格主题（与门户/UIP 同一设计语言）
   基准：门户 style.css 的设计令牌
   —— #f5f5f7 底 / #1d1d1f 墨 / #1c3a6e 蓝金品牌 / 磨砂导航 /
      胶囊按钮 / 柔和分层卡片 / 8pt 间距节奏
   类名与旧版完全兼容，模板零改动。
   ============================================================ */
:root{
  /* 中性色（Apple 灰阶） */
  --bg:#f5f5f7;
  --card:#ffffff;
  --ink:#1d1d1f;
  --ink2:#6e6e73;
  --line:rgba(0,0,0,.08);
  --hairline:rgba(0,0,0,.06);

  /* 品牌色（绘美慧蓝金，克制使用） */
  --brand:#1c3a6e;
  --brand-hover:#264f8f;
  --brand-soft:#edf3fa;
  --gold:#c39a4f;
  --gold-soft:#f8f1e2;

  /* 语义色 */
  --ok:#1a7f37;
  --ok-soft:#e8f5ee;
  --warn:#9a5b00;
  --warn-soft:#fdf1de;
  --danger:#c0392b;
  --danger-soft:#fdeeee;

  /* 形状与质感 */
  --radius:18px;
  --radius-sm:12px;
  --pill:980px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.04),0 2px 8px rgba(0,0,0,.04);
  --shadow:0 2px 8px rgba(0,0,0,.05),0 8px 24px rgba(0,0,0,.06);
  --ring:0 0 0 3px rgba(28,58,110,.16);
  --ease:cubic-bezier(.2,0,0,1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font:15px/1.7 -apple-system,BlinkMacSystemFont,"SF Pro SC","SF Pro Text",
       "PingFang SC","Segoe UI","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
a{color:var(--brand);text-decoration:none;transition:color .15s var(--ease)}
a:hover{color:var(--brand-hover);text-decoration:none}
:focus-visible{outline:none;box-shadow:var(--ring)}

/* ============ 顶栏：与政策工作台统一（白底 54px） ============ */
.hd{
  position:sticky;top:0;z-index:30;
  background:#fff;
  border-bottom:1px solid var(--line);
}
.hd-in{padding:0 20px;height:54px;display:flex;align-items:center;justify-content:flex-start;gap:16px}
.brand{display:flex;align-items:center;gap:10px;min-width:0;flex:none}
.brand .logo{width:30px;height:30px;border-radius:50%;display:block;flex:none;object-fit:cover;box-shadow:0 1px 3px rgba(28,58,110,.18)}
.bntxt{line-height:1.25;min-width:0}
.bntxt b{display:block;font-size:14px;font-weight:500;color:var(--brand);white-space:nowrap}
.bntxt small{font-size:11px;color:var(--ink2);white-space:nowrap}
.nav{display:flex;gap:14px;font-size:14px;flex:none;margin-left:auto}
.nav a{color:var(--ink2)}
.nav a:hover{color:var(--brand)}
/* 站内搜索（与政策工作台一致：紧跟导航、最宽 400px） */
.sbox{flex:1 1 auto;max-width:400px;min-width:160px;display:flex;align-items:center;gap:8px;
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:7px 12px;background:rgba(120,120,128,.08);height:36px}
.sbox input{flex:1;min-width:0;border:0;background:transparent;outline:none;font-size:13px;color:var(--ink);font-family:inherit}
.sbox svg{flex:0 0 auto;opacity:.5}
.sbox:focus-within{border-color:var(--brand);background:#fff;box-shadow:0 0 0 3px rgba(28,58,110,.16)}

/* 顶部主导航（桌面端显示；手机端由底部 tabbar 接管） */
.nav-main{display:none;gap:2px;height:100%;flex:none}
.nav-main a{display:flex;align-items:center;padding:0 14px;font-size:13.5px;font-weight:500;color:var(--ink2);
  border-bottom:2px solid transparent;white-space:nowrap;transition:color .15s var(--ease),border-color .15s var(--ease)}
.nav-main a:hover{color:var(--brand)}
.nav-main a.on{color:var(--brand);border-bottom-color:var(--brand);font-weight:600}

/* ============ 主区 / 页脚 ============ */
.mn{max-width:1040px;margin:0 auto;padding:24px 16px 40px}
.ft{max-width:900px;margin:0 auto;padding:0 16px 28px;color:var(--ink2);font-size:12px}
.ft p{margin:4px 0}
.ft-b{color:#98989d}

/* ============ 卡片：去边框，柔和分层 ============ */
.card{
  background:var(--card);border:none;border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:22px;margin-bottom:16px;
}
.card h1,.card h2{margin:0 0 10px;font-size:18px;font-weight:700;letter-spacing:-.02em}
.card h3{margin:16px 0 8px;font-size:14px;font-weight:600;color:var(--ink2)}
.muted{color:var(--ink2);font-size:13px}

/* ============ 入口磁贴 ============ */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.tile{
  display:block;background:var(--card);border:none;border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:18px;
  transition:box-shadow .2s var(--ease),transform .2s var(--ease);
}
.tile:hover{box-shadow:var(--shadow);transform:translateY(-2px);text-decoration:none}
.tile .t{font-weight:600;color:var(--ink)}
.tile .d{color:var(--ink2);font-size:13px;margin-top:4px}

/* ============ 表单：Apple 填充式输入 ============ */
label{display:block;font-size:13px;font-weight:500;color:var(--ink2);margin:14px 0 5px}
input[type=text],input[type=tel],input[type=password],select,textarea{
  width:100%;padding:11px 14px;border:1px solid transparent;border-radius:var(--radius-sm);
  font-size:16px;background:rgba(120,120,128,.10);color:var(--ink);
  transition:background .15s var(--ease),box-shadow .15s var(--ease);
}
input::placeholder,textarea::placeholder{color:#aeaeb2}
input:hover,select:hover,textarea:hover{background:rgba(120,120,128,.14)}
/* 16px 可避免 iOS Safari/微信内置浏览器聚焦输入框时整页自动放大 */
input:focus,select:focus,textarea:focus{
  outline:none;background:#fff;border-color:var(--brand);box-shadow:var(--ring);
}
textarea{min-height:70px}

/* ============ 按钮：胶囊 ============ */
.btn{
  display:inline-block;padding:10px 22px;border:0;border-radius:var(--pill);
  background:var(--brand);color:#fff;font-size:15px;font-weight:600;cursor:pointer;
  margin-top:14px;letter-spacing:-.01em;
  transition:filter .15s var(--ease),transform .15s var(--ease),box-shadow .15s var(--ease);
}
.btn:hover{background:var(--brand-hover);transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(28,58,110,.28);text-decoration:none}
.btn:active{transform:translateY(0) scale(.97);box-shadow:none}
.btn.ghost{background:#fff;color:var(--brand);border:1px solid rgba(28,58,110,.35)}
.btn.ghost:hover{background:var(--brand-soft);border-color:var(--brand);box-shadow:none}
.btn.sm{padding:7px 14px;font-size:13px;margin-top:0}

.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ============ 标签：胶囊 + 品牌浅底 ============ */
.tag{
  display:inline-block;padding:3px 10px;border-radius:var(--pill);
  font-size:12px;font-weight:500;background:var(--brand-soft);color:var(--brand);
}
.tag.ok{background:var(--ok-soft);color:var(--ok)}
.tag.warn{background:var(--warn-soft);color:var(--warn)}
.tag.gray{background:#f5f5f7;color:var(--ink2)}

/* 身份识别码：等宽 + 拉开字距，人工核对时不容易看串行 */
.code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:1.5px;font-size:13px;color:var(--ink);white-space:nowrap}
code.code{padding:1px 6px;border-radius:6px;background:#f5f5f7}

/* ============ 表格：发丝线 + 行悬停 ============ */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:9px 10px;border-bottom:1px solid var(--hairline);text-align:left}
th{color:var(--ink2);font-weight:500;font-size:12px;letter-spacing:.02em}
tbody tr:hover td{background:#fafafc}

/* ============ 提示条 ============ */
.err{background:var(--danger-soft);color:var(--danger);border-radius:var(--radius-sm);
  padding:10px 14px;font-size:14px;margin-bottom:12px}
.note{background:var(--warn-soft);color:var(--warn);border-radius:var(--radius-sm);
  padding:10px 14px;font-size:13px;margin-bottom:12px}
.alert{background:var(--danger-soft);color:var(--danger);border-radius:var(--radius-sm);
  padding:10px 14px;font-size:14px;margin-bottom:12px}
.dev{background:var(--warn-soft);color:var(--warn);border-radius:var(--radius-sm);
  padding:8px 14px;font-size:13px;margin-bottom:12px}

/* ============ 孩子卡片 ============ */
.kid{
  border:none;border-radius:var(--radius);padding:16px;margin-bottom:10px;
  background:var(--card);box-shadow:var(--shadow-sm);
}
.kid .n{font-weight:600}

/* ============ 底部 tab：磨砂 ============ */
.tabbar{
  position:sticky;bottom:0;left:0;right:0;z-index:30;
  display:flex;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom)
}
.tab{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;padding:8px 0 10px;font-size:12px;color:var(--ink2);
  transition:color .15s var(--ease);
}
.tab:hover{text-decoration:none;color:var(--brand)}
.tab .ti{
  width:26px;height:26px;line-height:26px;text-align:center;border-radius:9px;
  background:var(--brand-soft);color:var(--brand);font-size:13px;font-weight:600;
  transition:background .15s var(--ease),color .15s var(--ease);
}
.tab.on{color:var(--brand);font-weight:600}
.tab.on .ti{background:var(--brand);color:#fff}
.mn{padding-bottom:72px}

/* 桌面端：导航收到顶部，隐藏小程序式底部标签栏 */
@media (min-width:768px){
  .tabbar{display:none}
  .nav-main{display:flex;align-items:center}
  .mn{padding-bottom:56px}
}

/* ============ 卡片网格：赛事卡 / 模板卡 ============ */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.ecard{
  display:block;background:var(--card);border:none;border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-sm);
  transition:box-shadow .2s var(--ease),transform .2s var(--ease);
}
.ecard:hover{box-shadow:var(--shadow);transform:translateY(-2px);text-decoration:none}
.ecard .cov{height:120px;background:var(--brand-soft);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:600;color:var(--brand)}
.ecard .cov img{width:100%;height:100%;object-fit:cover;display:block}
.ecard .bd{padding:13px 14px}
.ecard .nm{font-weight:600;color:var(--ink);font-size:15px}
.ecard .mt{color:var(--ink2);font-size:12px;margin-top:4px}

/* 筛选胶囊 */
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.chip{
  padding:5px 13px;border-radius:var(--pill);border:1px solid transparent;
  background:rgba(120,120,128,.10);font-size:13px;color:var(--ink2);
  transition:background .15s var(--ease),color .15s var(--ease);
}
.chip:hover{background:var(--brand-soft);color:var(--brand);text-decoration:none}
.chip.on{background:var(--brand);color:#fff}

/* ============ 提示/指南块 ============ */
.guide{white-space:pre-wrap;background:#fafafc;border-radius:var(--radius-sm);
  padding:14px;font-size:14px;line-height:1.8;box-shadow:inset 0 0 0 1px var(--hairline)}

/* 表格里的文字型操作按钮 */
.linkbtn{background:none;border:none;padding:0;margin-left:8px;color:var(--brand);
  font-size:13px;cursor:pointer;font-family:inherit}
.linkbtn:hover{text-decoration:underline}
.linkbtn.danger{color:var(--danger)}

/* 参与类型（标签）多选：胶囊式，选中高亮 */
.pick{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 2px}
.pick label{
  display:inline-flex;align-items:center;gap:6px;padding:7px 14px;
  border:1px solid transparent;border-radius:var(--pill);background:rgba(120,120,128,.10);
  font-size:14px;color:var(--ink2);cursor:pointer;user-select:none;
  transition:background .15s var(--ease);
}
.pick label:hover{background:var(--brand-soft)}
.pick input{margin:0;accent-color:var(--brand)}
.pick label.on{background:var(--brand-soft);color:var(--brand);font-weight:600}

/* 列表页的标签筛选条 */
.tagbar{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:10px 0 2px}
.tagbar .lb{font-size:13px;color:var(--ink2);margin-right:2px}

/* ===== 模板库瀑布流：证书按原始比例展示，竖高横矮不裁切 ===== */

/* ===== 手机端适配：家长/机构端以手机操作为主 ===== */
/* 多列表格在窄屏内横向滑动，不再撑破卡片边界 */
table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
/* 长网址/单号/连续字母数字在窄屏内自动折行，不出边界 */
td,th,.guide,.cat-p,.g-line{overflow-wrap:anywhere}
@media (max-width:640px){
  .hd-in{padding:0 12px;height:50px}
  .bntxt small{display:none}
  .sbox{display:none}
  .mn{padding:16px 10px 72px}
  .card{padding:16px 14px;border-radius:var(--radius-sm)}
  .ft{padding:0 10px 24px}
  th,td{padding:7px 8px}
  table{font-size:13px}
  .card h1,.card h2{font-size:16px}
  .btn{padding:11px 18px}
  .btn.sm{padding:9px 14px;font-size:14px}  /* 触屏点击区加大 */
  .chip{padding:7px 13px;font-size:14px}    /* 标签胶囊同理 */
  /* 手机上返回顶部更省事：长页面双击底部 tab 即可，无需额外控件 */
}

/* ===== 以下为本机 2026-11-04 组件（searchbar / 模板网格 / 手机端密排）===== */

/* 关键词搜索条：赛事活动 / 档案模板 共用一套（2026-11-04 统一） */
.searchbar{display:flex;gap:8px;align-items:center;margin:12px 0 4px}
.searchbar input[type=text],.searchbar input[type=search]{
  flex:1 1 auto;min-width:0;width:auto;padding:9px 12px;
  border:1px solid var(--line);border-radius:8px;font-size:16px;
  background:#fff;color:#1f2328;-webkit-appearance:none;appearance:none
}
.searchbar .btn{margin-top:0;padding:9px 16px;font-size:14px;
  white-space:nowrap;flex:0 0 auto}
.searchbar .hint{margin:6px 0 0;font-size:13px;color:var(--ink2)}

/* ===== 模板库卡片网格（2026-11-04 改：瀑布流 → 规整网格，一行固定两个） =====
   旧方案 column-count 多列瀑布流：证书竖横比例不同，列底参差 → 看起来"一行只有一个框"，
   页面还特别长。改成 grid + 缩略图区统一高度（contain 不裁切），行行对齐。 */
.masonry{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
         gap:12px;align-items:stretch}
@media (max-width:640px){.masonry{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.mcard{display:flex;flex-direction:column;background:var(--card);
       border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.mcard:hover{border-color:var(--brand);text-decoration:none}
.mcard .thumb{height:172px;background:var(--brand-soft);display:flex;
              align-items:center;justify-content:center;overflow:hidden;padding:6px}
.mcard .thumb img{max-width:100%;max-height:100%;width:auto;height:auto;
                  object-fit:contain;display:block}
.mcard .ph{font-size:22px;font-weight:600;color:var(--brand)}
.mcard .bd{padding:10px 12px;display:flex;flex-direction:column;gap:4px;flex:1}
.mcard .nm{font-weight:600;color:var(--ink);font-size:14px;line-height:1.35;
           display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
           overflow:hidden}
.mcard .ev{font-size:12px;color:var(--ink2);line-height:1.4;
           display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
           overflow:hidden}
.mcard .bd .chips{margin:auto 0 0;padding-top:6px}
@media (max-width:640px){
  .mcard .thumb{height:158px}
  .mcard .bd{padding:9px 10px}
}

/* ===== 手机端适配（2026-10-30）：家长/机构端以手机操作为主 ===== */
/* 多列表格在窄屏内横向滑动，不再撑破卡片边界 */
table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
/* 长网址/单号/连续字母数字在窄屏内自动折行，不出边界 */
td,th,.guide,.cat-p,.g-line{overflow-wrap:anywhere}
@media (max-width:640px){
  .hd-in{padding:10px 12px}
  .mn{padding:14px 10px 72px}
  .card{padding:14px 12px}
  .ft{padding:0 10px 24px}
  th,td{padding:7px 8px}
  table{font-size:13px}
  .card h1,.card h2{font-size:16px}
  .btn{padding:10px 16px}
  .btn.sm{padding:9px 14px;font-size:14px}  /* 触屏点击区加大 */
  .chip{padding:7px 13px;font-size:14px}    /* 标签胶囊同理 */
  /* 手机上返回顶部更省事：长页面双击底部 tab 即可，无需额外控件 */
}

/* ===== 手机端表格重排（2026-11-04 阳仔定）：不再左右拖动，改成卡片 =====
 * 由 static/js/mobile_tables.js 打 class：
 *   table.kv    → key-value 表（学生详情的基本信息/邮寄地址）
 *   table.stack → 多列数据表（总后台机构/学生列表）
 * 只在窄屏生效，电脑端表格原样不变。 */
@media (max-width:640px){
  /* 一、key-value：标签固定窄列，值占余下宽度并自动折行 */
  table.kv{display:block;overflow:visible;border:none;background:none}
  table.kv tr{display:grid;grid-template-columns:78px minmax(0,1fr);
    gap:10px;align-items:start;padding:6px 0;
    border-bottom:1px dashed var(--line)}
  table.kv tr:first-child{border-top:none}
  table.kv tr:last-child{border-bottom:none;padding-bottom:0}
  table.kv th{display:block;width:auto!important;padding:0;border:none;
    background:none;color:var(--ink2);font-weight:400;font-size:12.5px;
    line-height:1.6;text-align:left}
  table.kv td{display:block;padding:0;border:none;font-size:13.5px;
    line-height:1.6;min-width:0;overflow-wrap:anywhere}

  /* 二、数据表：一条记录一行，字段内联密排（2026-11-04 阳仔定：
     机构/学生一多卡片太占屏，改成一行一条 + 小字段，信息密度优先） */
  table.stack{display:block;overflow:visible;border:none;background:none;font-size:12.5px}
  table.stack tr{display:block;padding:6px 2px;
    border-bottom:1px solid var(--line)}
  table.stack tr:first-child{display:none}   /* 表头行隐藏，列名已下放 */
  table.stack tr:last-child{border-bottom:none}
  table.stack td{display:inline;padding:0 9px 0 0;border:none;
    font-size:12.5px;line-height:1.75;color:var(--ink)}
  /* 列名小字灰放前面：年级:六年级 */
  table.stack td[data-label]::before{content:attr(data-label)":";
    color:var(--ink2);font-size:11.5px}
  /* 标题格（姓名/机构名）：加粗、无列名 */
  table.stack td.t{font-weight:600;font-size:13.5px;margin-right:10px}
  table.stack td.t::before{content:none}
  /* 整行按钮格：不带列名，自然跟在末尾 */
  table.stack td.nolabel::before{content:none}
  /* 空值 / 占位符格直接不渲染，省行 */
  table.stack td.nil{display:none}
  table.stack td:empty{display:none}
}