/* ============================================================
   jQuery 4 自适应求职简历页面 · 全局样式（墨蓝 × 香槟金 · 精英版）
   ------------------------------------------------------------------
   主题说明：
   · 墨蓝作为基调色，香槟金仅作「细线 / 圆点 / 微光」等克制的点睛，
     避免大面积跳色，营造低调精致的质感。
   · 模块标题采用「短线 + 中文标题 + 向右渐隐的金色细线」的编辑式版式。
   · 还原经典风格：把本文件替换为 static/css/style-classic.css 即可。
   ============================================================ */

/* ==========================================================================
   1. 基础重置 & 全局变量
   ========================================================================== */
:root{
  /* 主色调：墨蓝 + 香槟金 */
  --c-primary:        #1b2a44;  /* 墨蓝 · 主色 */
  --c-primary-deep:   #0f1a2c;  /* 墨蓝 · 最深（头部渐变起点） */
  --c-primary-light:  #2c4060;  /* 墨蓝 · 浅 */
  --c-gold:           #c6a86b;  /* 香槟金 · 点缀 */
  --c-gold-deep:      #8f6c3d;  /* 深金 · 正文级点缀（保证对比度） */
  --c-text:           #2f3540;  /* 正文 */
  --c-text-sub:       #4d5666;  /* 次要文字 */
  --c-text-mute:      #8a92a1;  /* 辅助文字 */
  --c-bg:             #eef1f6;  /* 页面底色 */
  --c-card:           #ffffff;  /* 卡片底色 */
  --c-block:          #f6f8fb;  /* 卡片内浅色块 */
  --c-block-warm:     #faf8f3;  /* 暖白浅色块（标签用） */
  --c-border:         #e5e9f0;  /* 分割线 / 描边 */
  --radius:           6px;      /* 卡片圆角（克制的小圆角更显利落） */
  --shadow:           0 1px 2px rgba(15,26,44,.03), 0 12px 28px -20px rgba(15,26,44,.14);
  --shadow-hover:     0 2px 4px rgba(15,26,44,.05), 0 16px 34px -18px rgba(15,26,44,.2);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ font-size:16px; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  padding:0;
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
              "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size:15px;
  line-height:1.78;
  color:var(--c-text);
  background:
    radial-gradient(1200px 520px at 78% -12%, rgba(198,168,107,.10), transparent 62%),
    radial-gradient(900px 480px at -10% 8%, rgba(27,42,68,.05), transparent 60%),
    var(--c-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden; /* 禁止横向滚动条 */
}

h1,h2,h3,h4,p,ul,ol,figure{ margin:0; }
ul,ol{ padding:0; list-style:none; }
a{ color:var(--c-gold-deep); text-decoration:none; }
a:hover,a:focus-visible{ text-decoration:underline; }
img{ max-width:100%; border:0; }
b,strong{ font-weight:600; }

/* ==========================================================================
   2. 页面骨架
   ========================================================================== */
.page{
  width:100%;
  max-width:1000px;
  margin:0 auto;
  padding:32px 20px 48px;
  opacity:0;
  transition:opacity .32s ease;
}
.page.is-ready{ opacity:1; }          /* 载入完成，淡入显示（避免闪屏） */

.resume{ width:100%; }

/* ==========================================================================
   3. 通用卡片（各简历模块）
   ========================================================================== */
.r-card{
  background:var(--c-card);
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px 32px 26px;
  margin:0 0 22px;               /* 模块之间留出更宽的"呼吸带"，强化分节感知 */
  transition:box-shadow .25s ease;
}
.r-card:last-child{ margin-bottom:0; }
.r-card:hover{ box-shadow:var(--shadow-hover); }

/* 模块页眉：序号徽章 + 标题 + 英文 + 眉线。眉线让每个模块自带明确的"页眉带"，跨卡阅读时一眼可分属 */
.card-title{
  position:relative;
  display:flex;
  align-items:center;
  font-size:17px;
  font-weight:700;
  letter-spacing:2px;
  color:var(--c-primary);
  padding:0 0 13px;
  margin:0 0 18px;
  border-bottom:1px solid rgba(198,168,107,.26);
}
/* 模块序号徽章：香槟金描边小方章，作为模块开始的强锚点 */
.card-no{
  flex:0 0 auto;
  margin:0 12px 0 0;
  padding:0 8px;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:1.5px;
  line-height:20px;
  color:var(--c-gold-deep);
  background:rgba(198,168,107,.13);
  border:1px solid rgba(198,168,107,.6);
  border-radius:3px;
  align-self:center;
}
.card-title::after{
  content:"";
  flex:1 1 auto;
  min-width:28px;
  height:1px;
  margin:0 16px 0 0;
  align-self:center;
  background:linear-gradient(90deg, rgba(198,168,107,.55), rgba(198,168,107,0));
}
.card-title .card-title-en{
  order:3;                     /* 让标题右侧的渐隐细线插在中文与英文之间 */
  font-size:10.5px;
  font-weight:400;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--c-text-mute);
  padding-left:14px;
}

/* ==========================================================================
   3.1 五大模块：同主题的低饱和彩色描边（半透明 → 弱冲击、易分区）
   色系沿「藏青蓝 → 黛青 → 香槟金 → 靛蓝紫 → 雾蓝灰」分区提点，白底上仅作克制的描边
   ========================================================================== */
#sec-skills{ border-color:rgba(52,84,140,.5); }              /* 01 专业技能 · 藏青蓝 */
#sec-skills .card-title{ border-bottom-color:rgba(52,84,140,.3); }
#sec-project{ border-color:rgba(35,118,126,.5); }            /* 02 项目经验 · 黛青 */
#sec-project .card-title{ border-bottom-color:rgba(35,118,126,.3); }
#sec-opensource{ border-color:rgba(178,145,88,.5); }         /* 03 开源项目 · 香槟金 */
#sec-opensource .card-title{ border-bottom-color:rgba(178,145,88,.3); }
#sec-work{ border-color:rgba(101,94,172,.5); }               /* 04 工作经历 · 靛蓝紫 */
#sec-work .card-title{ border-bottom-color:rgba(101,94,172,.3); }
#sec-summary{ border-color:rgba(102,116,138,.5); }           /* 05 自我评价 · 雾蓝灰 */
#sec-summary .card-title{ border-bottom-color:rgba(102,116,138,.3); }

/* ==========================================================================
   4. 个人信息模块
   ========================================================================== */
.r-header{
  position:relative;
  display:flex;
  align-items:center;
  padding:32px 34px;
  margin:0 0 16px;
  border-radius:var(--radius);
  color:#fff;
  background:linear-gradient(118deg, var(--c-primary-deep) 0%, var(--c-primary) 52%, #263957 100%);
  box-shadow:var(--shadow);
  overflow:hidden;
}
/* 装饰光晕（左上微光 + 右上圆环），纯 CSS，不影响 PDF 渲染 */
.r-header::before{
  content:"";
  position:absolute;
  right:-90px;
  top:-110px;
  width:300px;
  height:300px;
  border-radius:50%;
  background:radial-gradient(circle at center, rgba(198,168,107,.16), rgba(198,168,107,0) 62%);
  pointer-events:none;
}
.r-header::after{
  content:"";
  position:absolute;
  right:-72px;
  top:-72px;
  width:236px;
  height:236px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.09);
  background:transparent;
  pointer-events:none;
}

/* 头像：内圈细白 + 外圈香槟金晕环，呈现“双环描金”质感 */
.avatar{
  position:relative;
  flex:0 0 auto;
  width:126px;
  height:126px;
  margin:0 30px 0 0;
  border-radius:50%;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 0 0 4px rgba(198,168,107,.5);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  cursor:pointer;                 /* 彩蛋入口：示意可点击 */
}
/* 桌面悬停：光环微亮 + 轻微上浮，暗示“此处有戏” */
@media (hover:hover){
  .avatar:hover{ box-shadow:0 0 0 5px rgba(198,168,107,.72), 0 6px 18px -4px rgba(0,0,0,.28); }
}
.avatar:focus-visible{
  outline:2px solid rgba(198,168,107,.85);
  outline-offset:3px;
}
.avatar img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:50%; }
.avatar-txt{ font-size:52px; font-weight:700; color:#fff; letter-spacing:4px; text-shadow:0 1px 8px rgba(0,0,0,.18); }

.profile{ flex:1 1 auto; min-width:0; }

.profile-name{
  display:flex;
  align-items:baseline;
  font-size:30px;
  line-height:1.32;
  font-weight:700;
  letter-spacing:4px;
  margin:0 0 8px;
}
.profile-name::after{
  content:"";
  flex:0 0 auto;
  width:44px;
  height:2px;
  margin:0 0 5px 16px;
  background:linear-gradient(90deg, var(--c-gold), rgba(198,168,107,0));
}
.profile-role{
  display:inline-flex;
  align-items:center;
  font-size:13px;
  line-height:26px;
  letter-spacing:1.2px;
  padding:0 14px;
  margin:0 0 16px;
  border-radius:13px;
  color:#f0e2c6;
  background:rgba(198,168,107,.16);
  border:1px solid rgba(198,168,107,.55);
  font-size: 15px;
}

/* 信息列表（网格布局 + PDF 降级为 flex） */
.meta-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  column-gap:30px;
  row-gap:2px;
}
.meta-item{
  display:flex;
  align-items:flex-start;
  font-size:13.5px;
  line-height:1.9;
  min-width:0;
}
/* 跨整行的条目（如证书资质） */
.meta-grid .meta-span{ grid-column:1 / -1; }
.meta-label{
  flex:0 0 auto;
  min-width:56px;
  margin:0 10px 0 0;
  color:rgba(255,255,255,.62);
  font-size:12.5px;
  letter-spacing:1px;
}
.meta-value{
  flex:1 1 auto;
  min-width:0;
  color:rgba(255,255,255,.94);
  word-break:break-all;
}
.meta-value a{ color:#fff; text-decoration:underline; text-underline-offset:2px; text-decoration-color:rgba(198,168,107,.7); }
.meta-value a:hover{ color:#efe6d2; }
/* 信息区关键词（如搜索昵称「码刀攻城」）高亮：香槟金描边胶囊 */
.kw{
  display:inline-block;
  font-weight:700;
  font-size:15px;
  letter-spacing:1px;
  line-height:1.7;
  padding:0 8px;
  margin:0 1px;
  border-radius:4px;
  color:#fff;
  background:rgba(198,168,107,.2);
  border:1px solid rgba(198,168,107,.6);
}
/* 个人博客下的备注行 */
.kw-note{
  display:block;
  margin-top:3px;
  font-size:12.5px;
  line-height:1.7;
  color:rgba(255,255,255,.8);
}
.kw-note .kw{
  font-size:12.5px;
  padding:0 6px;
  line-height:1.6;
  background:rgba(198,168,107,.16);
  border-color:rgba(198,168,107,.45);
}

/* ==========================================================================
   5. 经历 / 项目条目
   ========================================================================== */
.item{ padding:0 0 20px; margin:0 0 20px; border-bottom:1px dashed var(--c-border); }
.item:last-child{ padding-bottom:0; margin-bottom:0; border-bottom:0; }

.item-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
}
.item-title{
  font-size:16.5px;
  font-weight:700;
  letter-spacing:.6px;
  color:var(--c-primary);
  margin:0 14px 0 0;
}
.item-time{
  flex:0 0 auto;
  font-size:12.5px;
  letter-spacing:.6px;
  color:var(--c-text-mute);
  font-variant-numeric:tabular-nums;
}
.item-sub{
  margin:4px 0 9px;
  font-size:13.5px;
  letter-spacing:.5px;
  color:var(--c-gold-deep);
  font-weight:500;
}

.item-list li{
  position:relative;
  padding:0 0 0 18px;
  margin:0 0 5px;
  font-size:14px;
  color:var(--c-text-sub);
}
.item-list li::before{
  content:"";
  position:absolute;
  left:1px;
  top:11px;
  width:6px;
  height:1px;
  background:var(--c-gold);
  box-shadow:0 0 0 2.5px rgba(198,168,107,.18);
  border-radius:1px;
}
.item-list li:last-child{ margin-bottom:0; }
.item-list b{ color:var(--c-primary); font-weight:700; }

/* 项目标签组 */
.tag-row{ margin:10px 0 0; }
.tag-row .tag{
  display:inline-block;
  font-size:11.5px;
  line-height:22px;
  letter-spacing:.8px;
  padding:0 10px;
  margin:0 6px 6px 0;
  border-radius:3px;
  color:var(--c-gold-deep);
  background:var(--c-block-warm);
  border:1px solid #ecdfc8;
}
/* 高亮标签：用于突出"下载量 / 关键指标"等硬数据 */
.tag-row .tag-strong{
  color:#fff;
  font-weight:600;
  background:linear-gradient(135deg, var(--c-gold), var(--c-gold-deep));
  border-color:var(--c-gold-deep);
  padding:0 12px;
}

/* ==========================================================================
   6. 专业技能模块
   ========================================================================== */
.skills-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  column-gap:14px;
  row-gap:14px;
  align-items:stretch;
}
.skill-box{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:14px 18px 12px;
  border-radius:var(--radius);
  background:linear-gradient(180deg, #fbfcfe 0%, var(--c-block) 100%);
  border:1px solid var(--c-border);
  overflow:hidden;
}
/* 顶部 1px 金色描边，衬托“条目卡”的精致感 */
.skill-box::before{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  top:0;
  height:1px;
  background:linear-gradient(90deg, var(--c-gold), rgba(198,168,107,0) 70%);
}
.skill-box h3{
  display:flex;
  align-items:center;
  font-size:13.5px;
  font-weight:700;
  letter-spacing:1.5px;
  color:var(--c-primary);
  margin:0 0 2px;
}
/* 标题前的香槟金小菱形 */
.skill-box h3::before{
  content:"";
  flex:0 0 auto;
  width:7px;
  height:7px;
  margin:0 9px 0 1px;
  border-radius:2px;
  background:linear-gradient(135deg, var(--c-gold), var(--c-gold-deep));
  transform:rotate(45deg);
}
.skill-desc{
  flex:1 1 auto;
  font-size:12.5px;
  line-height:1.9;
  text-align:justify;
  color:var(--c-text-sub);
  margin:0;
}
.skill-box .tag-row{ margin:9px 0 0; }
.skill-box .tag{ font-size:11px; line-height:20px; }

/* ==========================================================================
   7. 自我评价模块
   ========================================================================== */
.summary-text{
  font-size:14px;
  color:var(--c-text-sub);
  text-align:justify;
  margin:0 0 12px;
  line-height:2;
}
.summary-text:last-child{ margin-bottom:0; }

/* ==========================================================================
   8. 悬浮工具栏（导出 PDF / 使用说明）—— 不参与 PDF 导出
   ========================================================================== */
.toolbar{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:60;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
}
.tbtn{
  -webkit-appearance:none;
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 20px;
  margin:6px 0 0;
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  letter-spacing:1px;
  border:1px solid transparent;
  border-radius:2px;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, opacity .18s ease;
}
.tbtn-primary{
  color:#fff;
  background:linear-gradient(120deg, var(--c-primary-deep), var(--c-primary) 60%, var(--c-primary-light));
  box-shadow:0 4px 16px rgba(15,26,44,.3);
}
.tbtn-primary:hover{ background:linear-gradient(120deg, #141f33, #22314e 60%, #334a6e); box-shadow:0 6px 20px rgba(15,26,44,.36); }
.tbtn-primary:active{ transform:translateY(1px) scale(.98); }
.tbtn-ghost{
  color:var(--c-primary);
  background:rgba(255,255,255,.95);
  border-color:var(--c-border);
  box-shadow:0 2px 10px rgba(15,26,44,.1);
}
.tbtn-ghost:hover{ background:#fff; border-color:var(--c-gold); color:var(--c-gold-deep); }
.tbtn:focus-visible{ outline:2px solid var(--c-gold); outline-offset:2px; }
.tbtn[disabled]{ opacity:.65; cursor:not-allowed; transform:none; }

/* 按钮内小图标（CSS 绘制，无外部依赖） */
.tbtn-ico{
  display:inline-block;
  width:14px;
  height:14px;
  margin:0 8px 0 0;
  border:2px solid currentColor;
  border-radius:2px;
  position:relative;
}
.tbtn-ico::after{
  content:"";
  position:absolute;
  left:1px; right:1px; bottom:1px;
  height:5px;
  background:currentColor;
  opacity:.85;
}

/* ==========================================================================
   9. 使用说明面板
   ========================================================================== */
.help-panel{
  position:fixed;
  right:22px;
  bottom:130px;
  z-index:59;
  width:340px;
  max-width:calc(100vw - 44px);
  max-height:66vh;
  overflow-y:auto;
  padding:18px 20px;
  border-radius:var(--radius);
  background:#fff;
  border:1px solid var(--c-border);
  box-shadow:0 10px 34px rgba(15,26,44,.18);
  display:none;
}
.help-panel h3{
  font-size:15px;
  font-weight:700;
  letter-spacing:1px;
  color:var(--c-primary);
  margin:0 0 10px;
}
.help-panel ol{ padding:0 0 0 18px; list-style:decimal; }
.help-panel li{
  font-size:13.5px;
  line-height:1.85;
  color:var(--c-text-sub);
  margin:0 0 8px;
}
.help-panel code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12.5px;
  padding:1px 5px;
  border-radius:3px;
  background:var(--c-block);
  color:var(--c-primary-light);
}
.help-close{
  position:absolute;
  right:12px;
  top:12px;
  width:26px;
  height:26px;
  line-height:24px;
  text-align:center;
  font-size:18px;
  color:var(--c-text-mute);
  background:transparent;
  border:0;
  cursor:pointer;
  border-radius:50%;
}
.help-close:hover{ background:var(--c-block); color:var(--c-text); }

/* ==========================================================================
   10. 加载遮罩 & 轻提示
   ========================================================================== */
.loading-mask{
  position:fixed;
  left:0; top:0; right:0; bottom:0;
  z-index:90;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(15,26,44,.48);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
}
.loading-box{
  min-width:180px;
  padding:24px 30px;
  text-align:center;
  color:#fff;
  border-radius:8px;
  background:linear-gradient(140deg, var(--c-primary-deep), var(--c-primary) 65%, var(--c-primary-light));
  box-shadow:0 14px 40px rgba(0,0,0,.28);
}
.spinner{
  width:34px;
  height:34px;
  margin:0 auto 12px;
  border:2px solid rgba(255,255,255,.22);
  border-top-color:var(--c-gold);
  border-right-color:rgba(198,168,107,.55);
  border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.loading-text{ font-size:14px; letter-spacing:1px; }

.toast{
  position:fixed;
  left:50%;
  bottom:90px;
  z-index:100;
  transform:translateX(-50%);
  max-width:82vw;
  padding:11px 18px;
  font-size:13.5px;
  line-height:1.6;
  color:#fff;
  text-align:center;
  border-radius:2px;
  background:rgba(15,26,44,.94);
  box-shadow:0 6px 20px rgba(0,0,0,.2);
  display:none;
}
.toast.is-error{ background:rgba(150,58,46,.94); }
.toast.is-ok{ background:rgba(34,104,88,.94); }

/* ==========================================================================
   11. 彩蛋弹层（点击头像弹出 code.jpg）
   ========================================================================== */
.lightbox{
  position:fixed;
  left:0; top:0; right:0; bottom:0;
  z-index:120;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:26px;
  background:rgba(10,17,30,.6);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}
.lightbox.is-open{
  opacity:1;
  visibility:visible;
}
.lightbox img{
  display:block;
  width:auto;
  height:auto;
  max-width:min(88vw, 860px);
  max-height:82vh;
  border-radius:14px;               /* 大圆角，与图片柔和呼应 */
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.65);            /* 内圈：细白描边（同头像） */
  box-shadow:0 0 0 5px rgba(198,168,107,.5),         /* 外圈：淡金光环（同头像） */
             0 24px 70px rgba(0,0,0,.45);            /* 落地投影 */
  transform:translateY(14px) scale(.96);
  transition:transform .32s cubic-bezier(.22,.78,.32,1.02);
  user-select:none;
  -webkit-user-drag:none;
}
.lightbox.is-open img{ transform:translateY(0) scale(1); }
.lightbox-close{
  position:absolute;
  right:18px;
  top:18px;
  z-index:2;
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 0 2px;
  font-size:20px;
  line-height:1;
  color:#fff;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.34);
  border-radius:50%;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.lightbox-close:hover{
  background:rgba(255,255,255,.28);
  transform:rotate(90deg);
}

/* ==========================================================================
   12. 响应式适配（平板 / 手机）
   ========================================================================== */

/* ---- 大屏：工具栏移至右上角，避免遮挡正文 ---- */
@media (min-width:1240px){
  .toolbar{ top:24px; right:24px; bottom:auto; }
  .help-panel{ top:76px; right:24px; bottom:auto; }
}

/* ---- 平板及以下：信息区单列 ---- */
/* 注：技能卡在 ≤768px 由下方手机断点收敛为单列 */

/* ---- 手机：全部单列排版，触控区域放大 ---- */
@media (max-width:768px){
  html{ font-size:15px; }
  body{ font-size:14.5px; }
  .page{ padding:16px 12px 30px; }

  .r-header{
    flex-direction:column;
    align-items:flex-start;
    padding:24px 20px;
  }
  .avatar{ width:92px; height:92px; margin:0 auto 18px; box-shadow:0 0 0 3px rgba(198,168,107,.5); }
  .avatar-txt{ font-size:40px; }
  .profile-name{ font-size:24px; letter-spacing:3px; }
  .meta-grid{ grid-template-columns:repeat(1, minmax(0, 1fr)); }

  .r-card{ padding:20px 18px 22px; margin:0 0 16px; }
  .card-title{ font-size:16px; padding:0 0 12px; margin:0 0 15px; }
  .card-title .card-title-en{ display:none; }

  .item-head{ flex-direction:column; align-items:flex-start; }
  .item-title{ font-size:15.5px; margin-bottom:2px; }
  .item-time{ font-size:12px; }

  .skills-grid{ grid-template-columns:repeat(1, minmax(0, 1fr)); }
  .skill-box{ margin:0 0 10px; }
  .skill-box:last-child{ margin-bottom:0; }

  .toolbar{ right:14px; bottom:calc(14px + env(safe-area-inset-bottom)); }
  .tbtn{ min-height:46px; padding:0 18px; font-size:14.5px; }
  .help-panel{
    right:12px; left:12px; bottom:120px;
    width:auto; max-width:none; max-height:60vh;
  }
  .toast{ bottom:calc(120px + env(safe-area-inset-bottom)); }
}

/* ---- 超小屏（320px）兜底 ---- */
@media (max-width:359px){
  .page{ padding:10px 8px 24px; }
  .profile-name{ font-size:22px; letter-spacing:1px; }
  .r-card{ padding:16px 14px 18px; }
  .tbtn{ padding:0 14px; font-size:14px; }
}

/* ==========================================================================
   12. 打印 / 导出 PDF 专用样式
   ========================================================================== */
@media print{
  body{ background:#fff; }
  .page{ padding:0; margin:0; max-width:none; opacity:1; }
  .toolbar,.help-panel,.loading-mask,.toast{ display:none !important; }
  .r-card{ box-shadow:none; margin:0 0 10px; }
  .r-header{ box-shadow:none; }
  .avatar,.r-header::after,.r-header::before{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .r-header{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}

/* 导出进行中：隐藏悬浮 UI，避免被截取 */
body.is-exporting .toolbar,
body.is-exporting .help-panel{ visibility:hidden; }

/* PDF 渲染降级：html2canvas 对 CSS Grid 支持有限，
   导出时在克隆文档中把 grid 容器统一降级为 flex，保证 PDF 与网页排版一致 */
.pdf-mode .grid-fallback{
  display:flex !important;
  flex-wrap:wrap !important;
  column-gap:0 !important;
  row-gap:0 !important;
}
.pdf-mode .grid-fallback > li{
  flex:0 0 100% !important;
  max-width:100% !important;
}
@media (min-width:768px){
  .pdf-mode .meta-grid > li{
    flex:0 0 50% !important;
    max-width:50% !important;
    padding-right:22px !important;
  }
  .pdf-mode .meta-grid > li.meta-span{
    flex:0 0 100% !important;
    max-width:100% !important;
    padding-right:0 !important;
  }
  .pdf-mode .skills-grid > li{
    flex:0 0 50% !important;
    max-width:50% !important;
    padding-right:12px !important;
  }
}
@media (max-width:767px){
  .pdf-mode .skill-box{ margin:0 0 10px !important; }
}