/* ================================================================
   挚谱融通 · 全站设计系统 (Design System)
   ================================================================
   这是全站唯一的设计真源(source of truth)。

   【为什么单独建这个文件】
   改造前全站有两套互相打架的设计语言：
     · 首页   —— 纯蓝 #0075de、圆角 6~14px、阴影克制、Inter
     · 内页   —— 蓝紫渐变、圆角 16px、阴影厚重(0 18px 44px)、无 Inter
   加上 staff.html 主色漂移到 #2383e2，视觉上「不像一个网站」。
   根因是样式变量各写各的、没有单一真源。

   【怎么用】
   在 style.css 或页面内联样式之前引入本文件：
       <link rel="stylesheet" href="assets/theme.css">
   页面内联的 :root 若与本文件冲突，以本文件为准
   （因此**不要再在页面里重写 --blue/--ink 等基础变量**）。

   【设计取向：克制、专业、可信】
   目标用户是准备交毕业论文的学生，页面要传达「可靠的专业服务」，
   而不是「花哨的玩具」。因此：
     · 主色单一（去掉蓝紫渐变，渐变只留给极少数强调场景）
     · 圆角统一到 8~12px（不再16~22px，避免圆润玩具感）
     · 阴影改为多层低透明度叠加（有层次但不发灰）
     · 中文正文行高 1.75，字阶固定 7 级，全站不得自行发明字号

   【色彩】
   主色沿用首页已验证的 #0075de；辅助色只用于状态标识，不用于装饰。

   ================================================================ */

:root{
  /* ---------- 主色 ---------- */
  --blue:        #0075de;   /* 品牌主色·按钮/链接/强调 */
  --blue-d:      #005bab;   /* 主色按下/悬停 */
  --blue-l:      #3d96e8;   /* 浅主色·次级强调 */
  --blue-wash:   #f2f8ff;   /* 主色底纹·区块背景 */
  --blue-badge:  #f2f9ff;   /* 标签底色 */
  --blue-tx:     #097fe8;   /* 标签文字色 */

  /* ---------- 中性色（文字）---------- */
  --ink:    rgba(0,0,0,.95); /* 主文字 */
  --ink2:   #615d59;         /* 次要文字·正文说明 */
  --ink3:   #a39e98;         /* 弱化文字·标签/占位 */

  /* ---------- 中性色（面）---------- */
  --bg:      #ffffff;        /* 页面底色（首页为白，全站统一） */
  --bg-alt:  #f8f9fb;        /* 交替区块底色 */
  --warm:    #f6f5f4;        /* 兼容旧变量，等同 --bg-alt */
  --line:    rgba(0,0,0,.10);/* 发丝边框 */
  --line-2:  rgba(0,0,0,.06);/* 更轻的分隔 */

  /* ---------- 功能色（仅表状态，不做装饰）---------- */
  --ok:     #1aae39;
  --orange: #dd5b00;
  --red:    #d93025;
  --violet: #5f3dc4;
  --warn:   #a06000;

  /* ---------- 圆角（全站收敛到 8~12px）---------- */
  --r-sm: 6px;
  --r:    10px;   /* 卡片/输入框 */
  --r-md: 12px;   /* 大卡片 */
  --r-lg: 16px;   /* 仅弹窗/抽屉 */
  --r-pill: 999px;/* 胶囊标签 */

  /* ---------- 阴影（多层低透明，有层次但不发灰）---------- */
  --sh:    rgba(0,0,0,.04) 0 4px 18px,
           rgba(0,0,0,.027) 0 2px 7.85px,
           rgba(0,0,0,.02) 0 .8px 2.93px,
           rgba(0,0,0,.01) 0 .175px 1.04px;
  --sh-lift: rgba(0,0,0,.07) 0 12px 32px,
             rgba(0,0,0,.05) 0 6px 14px,
             rgba(0,0,0,.03) 0 2px 6px;
  --shadow: var(--sh);/* 兼容旧变量 */

  /* ---------- 间距（8 的倍数，全站统一节奏）---------- */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px;
  --s5:24px; --s6:32px; --s7:48px; --s8:64px;

  /* ---------- 版心 ---------- */
  --max: 1120px;

  /* ---------- 字体 ---------- */
  /* 中文优先苹方/微软雅黑；Inter 用于数字与拉丁字母 */
  --font: 'Inter',-apple-system,BlinkMacSystemFont,'PingFang SC',
          'Hiragino Sans GB','Microsoft YaHei','Segoe UI',sans-serif;
  --font-num: 'Inter',-apple-system,'Segoe UI',sans-serif;

  /* ---------- 字阶（全站只允许这 7 级）---------- */
  --t-display: 60px;  /* 首屏主标题 */
  --t-h1:      42px;  /* 区块标题 */
  --t-h2:      28px;  /* 卡片标题 */
  --t-h3:      21px;  /* 小标题 */
  --t-body:    15px;  /* 正文 */
  --t-sm:      13.5px;/* 辅助文字 */
  --t-xs:      12px;  /* 标签 */

  /* ---------- 动效 ---------- */
  --ease: cubic-bezier(.2,.8,.3,1);
  --dur:  .22s;
}

/* ================================================================
   基元：全站通用原子类
   ================================================================ */

/* 数字统一用等宽数位，滚动/跳动时不抖动 */
.num, .tb-num, .hs b, .stat3 b{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* 发丝卡片：全站卡片的标准形态 */
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--sh);
}

/* 胶囊标签 */
.tag{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--t-xs);font-weight:600;letter-spacing:.125px;
  padding:5px 12px;border-radius:var(--r-pill);
  background:var(--blue-badge);color:var(--blue-tx);
}

/* 焦点可见性：键盘用户必须能看到焦点框（无障碍） */
:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:2px;
  border-radius:var(--r-sm);
}

/* 尊重系统的「减弱动态效果」设置 */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ================================================================
   兼容层：把 style.css 里旧变量映射到新系统
   —— 逐页改造成本高，先在此处一次性收敛，
      保证「只引theme.css」就能拿到统一视觉。
   ================================================================ */
:root{
  /* 旧 --grad 蓝紫渐变 → 收敛为纯蓝。
     渐变在克制体系里只保留给极少数强调场景（如生成中状态），
     大面积使用会让页面从「专业服务」滑向「互联网活动页」。 */
  --grad: linear-gradient(135deg,var(--blue),var(--blue-d));

  /* 旧变量别名 */
  --blue2:var(--blue-l);
  --deep:   var(--ink);
  --sub:    var(--ink2);
  --faint:  var(--ink3);
  --card:   #fff;
  --ok2:    var(--ok);
}

/* body 字体统一走 Inter + 中文栈，字号行高对齐首页 */
body{
  font-family:var(--font);
  line-height:1.75;
}

/* 旧的大圆角统一压回 10~16px，消除玩具感 */
.demo-card{ border-radius:var(--r-md) !important; }
.wb-card,
.result-card,
.loading-card,
.result-empty{ border-radius:var(--r-md) !important; }
.f-input,.f-textarea,.f-select{ border-radius:var(--r) !important; }
.gen-btn,.btn{ border-radius:var(--r) !important; }
.pill{ border-radius:var(--r-pill); }
.mini-btn{ border-radius:var(--r-sm); }

/* 按钮：全站统一为纯蓝实心 + 克制阴影 */
.btn-primary,.gen-btn{
  background:var(--blue) !important;
  box-shadow:0 1px 2px rgba(0,117,222,.3) !important;
  font-weight:600 !important;
  transition:var(--dur) var(--ease);
}
.btn-primary:hover,.gen-btn:hover{ background:var(--blue-d) !important; }

.btn-ghost{
  background:#fff !important;
  color:var(--ink) !important;
  border-color:transparent !important;
  background-image:none !important;
}
.btn-ghost:hover{ background:rgba(0,0,0,.05) !important; }

/* 顶栏 logo：去掉渐变方块，改为主色圆角方块（与首页一致） */
.logo-badge{
  background:var(--blue) !important;
  border-radius:6px !important;
  box-shadow:none !important;
}
.nav-cta{
  background:var(--blue) !important;
  border-radius:var(--r-sm) !important;
  box-shadow:none !important;
  font-weight:600 !important;
}
.nav-cta:hover{ background:var(--blue-d) !important; }

/* 区块标题字号对齐首页字阶 */
.sec-title{ font-size:var(--t-h1); font-weight:700; letter-spacing:-1.5px; line-height:1.08; }
.wb-title{ font-weight:700; letter-spacing:-.8px; }

/* 工作台页背景改为浅灰交替（首页为白底，此处需区分层次但同色系） */
.wb{ background:linear-gradient(180deg,#fbfcfd 0,var(--bg-alt) 260px); }

/* ================================================================
   收敛层：各页面「自造样式类」的统一处理
   ----------------------------------------------------------------
   扫描发现各页大量自造类名（staff 24 个 / worker 18 个 / login 9 个…），
   完全不受共享 CSS 管束，各写各的 —— 这是「不像一个网站」的真正根因。
   本层用低特异性选择器把它们的视觉收回到设计系统，
   而不改动类名本身，因此**零 JS/HTML 改动、零功能风险**。
   ================================================================ */

/* 登录页 */
body{ background:var(--bg-alt) !important; }
.auth-card{
  border-radius:var(--r-md) !important;
  box-shadow:var(--sh) !important;
}
.auth-btn{
  background:var(--blue) !important;
  border-radius:var(--r) !important;
  font-weight:600 !important;
  transition:var(--dur) var(--ease) !important;
}
.auth-btn:hover:not(:disabled){ background:var(--blue-d) !important; }
.auth-btn:disabled{ background:var(--blue) !important; opacity:.55 !important; }
.auth-tip{ background:var(--blue-wash) !important; border-radius:var(--r) !important; }
.auth-err,.auth-ok{ border-radius:var(--r-sm) !important; }
.auth-logo{ font-weight:700 !important; letter-spacing:-.4px; }
/* 品牌标识：与首页 .logo 的主色圆角方块保持一致 */
.auth-mark{
  display:inline-block;width:20px;height:20px;border-radius:6px;
  background:var(--blue);margin-right:8px;vertical-align:-3px;
}

/* ================================================================
   工具页骨架（无共享类、全靠内联 style 的页面，如 jianzhu）
   ----------------------------------------------------------------
   这类页面的问题：38px 巨型 emoji、硬编码颜色、无导航，
   看起来像「玩具」而非「专业服务」。
   提供语义化骨架，让各工具页把内联 style 换成 class 即可统一。
   ================================================================ */

/* 页面外壳：与其他页面同底色、同版心 */
.pg{
  max-width:760px;
  margin:0 auto;
  padding:var(--s6) 18px var(--s8);
}

/* 页头：与其他页面的 wb-head 对齐 */
.pg-head{ text-align:center; margin:var(--s2) 0 var(--s5); }
/* 品牌图标：从38px emoji 改为 40px 主色圆角方块容器 */
.pg-mark{
  width:40px;height:40px;border-radius:var(--r);background:var(--blue);
  display:flex;align-items:center;justify-content:center;font-size:21px;
  margin:0 auto var(--s3);
}
.pg-title{
  font-size:var(--t-h3);font-weight:700;letter-spacing:-.5px;
  color:var(--ink);margin:0 0 6px;
}
.pg-sub{
  color:var(--ink2);font-size:var(--t-sm);line-height:1.8;margin:0;
}

/* 标签切换组：mini-btn 在这里当 tab 用，需要更明确的选中态 */
.pg-tabs{ display:flex; gap:var(--s2); margin-bottom:var(--s3); flex-wrap:wrap; }
.pg-tabs .mini-btn{
  background:#fff;border:1px solid var(--line);color:var(--ink2);
  padding:8px 15px;border-radius:var(--r);font-size:var(--t-sm);font-weight:500;
}
.pg-tabs .mini-btn.on,
.pg-tabs .mini-btn.active{
  background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600;
}

/* 主内容卡：统一为发丝边框 + 克制阴影 + 12px 圆角 */
.pg-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:var(--s4);
  box-shadow:var(--sh);
}

/* 表单区
   ★ 用「父容器内不是最后一个」的语义，而不是 :last-child。
     踩过的坑：#fRoom 里连着放了两个 .pg-block，第二个既是 .pg-block:last-child
     （父级是 #fRoom），于是 margin 被清成 0，视觉上「设计风格」和
     「细节描述」两块粘连在一起 —— 截图能看出来，但根因是结构与选择器语义不匹配。 */
.pg-card .pg-block{ margin-bottom:var(--s4); }
.pg-card #fRoom > .pg-block:last-child,
.pg-card #fBld  > .pg-block:last-child{ margin-bottom:var(--s4); }
.pg-card .pg-label{
  display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;
  font-size:var(--t-sm);font-weight:600;color:var(--ink);
  margin:0 0 var(--s2);
}
.pg-area{
  width:100%;box-sizing:border-box;
  border:1px solid var(--line);border-radius:var(--r);
  padding:10px 12px;font-size:14px;font-family:inherit;
  background:#fbfdff;outline:none;transition:var(--dur) var(--ease);
  min-height:58px;resize:vertical;
}
.pg-area:focus{
  border-color:var(--blue);background:#fff;
  box-shadow:0 0 0 4px rgba(0,117,222,.09);
}

/* 操作行 */
.pg-actions{
  margin-top:var(--s4);display:flex;gap:var(--s2);
  align-items:center;flex-wrap:wrap;
}

/* ★ .btn-main 是 jianzhu.html 一直在用的主按钮类，
   但 style.css 里从未定义过它 —— 该按钮其实一直是「无样式的裸文字」。
   这里补齐定义（并纳入设计系统）。 */
.btn-main{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:12px 26px;border-radius:var(--r);
  background:var(--blue);color:#fff;border:none;
  font-size:var(--t-body);font-weight:600;font-family:inherit;
  cursor:pointer;transition:var(--dur) var(--ease);
  box-shadow:0 1px 2px rgba(0,117,222,.3);
}
.btn-main:hover{ background:var(--blue-d); }
.btn-main:active{ transform:translateY(1px); }
.btn-main:disabled{ opacity:.55; cursor:not-allowed; }

/* 底部说明：左对齐 + 限宽，避免居中长文本断行成两截难以阅读 */
.pg .pg-note{
  margin:var(--s5) auto 0;font-size:var(--t-xs);color:var(--ink3);
  line-height:1.85;text-align:left;max-width:560px;
}
.pg-back{
  display:inline-flex;align-items:center;gap:5px;
  font-size:var(--t-sm);color:var(--ink2);text-decoration:none;
  margin-top:var(--s3);
}
.pg-back:hover{ color:var(--ink); }

/* 代理中心 dist.html */
.ag-card{ border-radius:var(--r-md) !important; box-shadow:var(--sh) !important; }
.ag-btn,.ag-price{ border-radius:var(--r) !important; }
.ag-input{ border-radius:var(--r) !important; border-color:var(--line) !important; }
.ag-input:focus{ border-color:var(--blue) !important; box-shadow:0 0 0 4px rgba(0,117,222,.09) !important; }

/* 管理/订单后台（admin / orders 共用类名） */
.adm-card{ border-radius:var(--r-md) !important; box-shadow:var(--sh) !important; }
.adm-btn{ border-radius:var(--r-sm) !important; }

/* 我的论文my.html */
.my-wrap .oi-card,.oi-card{ border-radius:var(--r-md) !important; box-shadow:var(--sh) !important; }
.my-head{ border-bottom:1px solid var(--line) !important; }
.empty{
  border:1px dashed var(--line) !important;
  border-radius:var(--r-md) !important;
  background:var(--bg-alt) !important;
}

/* staff / worker / changepw 等内部页的通用容器 */
.wk-wrap,.staff-wrap{ max-width:var(--max) !important; }
.badge{
  background:var(--blue-badge) !important;
  color:var(--blue-tx) !important;
  border-radius:var(--r-pill) !important;
  font-weight:600 !important;
}
.danger{ background:#fdecec !important; color:#c92a2a !important; }
.hint,.err{ font-size:var(--t-xs) !important; }

/* 全站 emoji 图标块：降低视觉噪声，统一尺寸
   （工具页曾达 30 个 emoji，是「玩具感」的主要来源） */
.tool-ic,.mode-item .ic{
  border-radius:var(--r) !important;
}