/**
 * 患者中心样式（account.css）
 *
 * 规范来源：.ai/INTERFACE-PHASE1.md §0 / §4 + .ai/CONVENTIONS.md「输出转义 / 代码风格」。
 *
 * 设计口径：
 * - **与主站（Flatsome）一致**：森林绿主色 / 浅灰边框 / 8px 圆角 / 轻阴影 —— 取值与主插件
 *   `public/assets/css/single.css` 的设计 token **同值不依赖**（本插件不读它的样式，所以自带一份
 *   `--unithmemd-patient-*`；它只在自己的医院页入队，患者页面上并不存在）。
 * - token 定义在 `.unithmemd-patient` 上、**不写 `:root`**：只在这一块生效，不往主站全局塞变量。
 * - **移动优先**：基础样式 = 手机（单栏 / 满宽按钮 / 输入 16px 防 iOS 聚焦缩放 / 触控目标 ≥ 48px），
 *   桌面只用 `min-width` 增强 —— 本文件**没有任何 max-width 媒体查询**，不会踩「后写的顶层规则
 *   盖掉媒体查询」的顺序坑。
 * - 零 `!important`：样式在 `wp_enqueue_scripts` 优先级 99 入队（排在主题之后），同优先级后写胜出即可。
 *
 * 与脚本的契约（`assets/js/account.js` 只加类名 / 属性，视觉全在这里）：
 *   `.unithmemd-patient__strength` + `is-weak|is-medium|is-strong`（密码强度）
 *   `.unithmemd-patient__hint--match` + `is-match|is-mismatch`（两次密码一致性）
 *   `[hidden]`（JS 动态节点默认隐；凡自己写了 `display` 的节点必须显式再声明一条 `[hidden]` 规则）
 *
 * @package unithmed-patient
 */

/* -------------------------------------------------------------------------
 * 1. 设计 token（作用域 = `.unithmemd-patient`，不污染主站全局）
 * ---------------------------------------------------------------------- */
.unithmemd-patient {
    --unithmemd-patient-primary: #1a9d5e;
    --unithmemd-patient-primary-hover: #157a4a;
    --unithmemd-patient-primary-light: #e8f6ee;
    --unithmemd-patient-dark: #333333;
    --unithmemd-patient-medium: #636363;
    --unithmemd-patient-light: #999999;
    --unithmemd-patient-bg: #f4f4f4;
    --unithmemd-patient-border: #e5e5e5;
    --unithmemd-patient-white: #ffffff;
    --unithmemd-patient-danger: #dc2626;
    --unithmemd-patient-warning: #d97706;
    --unithmemd-patient-shadow-sm: 0 1px 3px rgba( 0, 0, 0, 0.08 );
    --unithmemd-patient-shadow-md: 0 4px 12px rgba( 0, 0, 0, 0.10 );
    --unithmemd-patient-radius-sm: 8px;
    --unithmemd-patient-radius-md: 12px;
    --unithmemd-patient-font: 'Manrope', 'Roboto', system-ui, -apple-system, sans-serif;

    /* 页面壳：浅灰底带 + 居中卡片（只给 <main>，绝不改主题的 body / 页头页脚） */
    padding: 32px 0 56px;
    background: var(--unithmemd-patient-bg);
    font-family: var(--unithmemd-patient-font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--unithmemd-patient-dark);
}

/* 盒模型局部重置（Flatsome 的 width 计算口径各家不同，这里一次钉死） */
.unithmemd-patient,
.unithmemd-patient *,
.unithmemd-patient *::before,
.unithmemd-patient *::after {
    box-sizing: border-box;
}

/* 容器：手机满宽（左右 16px 留白），桌面收成一张表单的宽度 */
.unithmemd-patient__container {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: 0 16px;
}

/* -------------------------------------------------------------------------
 * 2. 标题与提示横幅（横幅由 layout.php 输出，D 批的 Auth 只给文案）
 * ---------------------------------------------------------------------- */
.unithmemd-patient__title {
    margin: 0 0 20px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.25;
    color: #000000;
    text-align: center;
}

.unithmemd-patient__notice,
.unithmemd-patient__error {
    margin: 0 0 20px;
    padding: 12px 14px;
    font-size: 15px;
    line-height: 1.5;
    background: var(--unithmemd-patient-white);
    border: 1px solid var(--unithmemd-patient-border);
    border-left-width: 4px;
    border-radius: var(--unithmemd-patient-radius-sm);
}

.unithmemd-patient__notice {
    color: #0f5c37;
    background: var(--unithmemd-patient-primary-light);
    border-left-color: var(--unithmemd-patient-primary);
}

.unithmemd-patient__error {
    color: #991b1b;
    background: #fef2f2;
    border-left-color: var(--unithmemd-patient-danger);
}

/* -------------------------------------------------------------------------
 * 3. 表单卡片（三条表单页共用；登录页的第二条表单 = 重发，弱化一档）
 * ---------------------------------------------------------------------- */
.unithmemd-patient__form {
    margin: 0 0 24px;
    padding: 20px 16px;
    background: var(--unithmemd-patient-white);
    border: 1px solid var(--unithmemd-patient-border);
    border-radius: var(--unithmemd-patient-radius-md);
    box-shadow: var(--unithmemd-patient-shadow-sm);
}

/* 重发表单不是主行动：去掉阴影、压低层级，避免和登录表单抢注意力 */
.unithmemd-patient__form--resend {
    padding: 18px 16px;
    box-shadow: none;
}

/* -------------------------------------------------------------------------
 * 4. 字段与输入（触控目标 ≥ 48px；输入 16px = iOS 聚焦不缩放，也不触发整页放大）
 * ---------------------------------------------------------------------- */
.unithmemd-patient__field {
    margin: 0 0 16px;
}

.unithmemd-patient__field label {
    display: block;
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--unithmemd-patient-dark);
}

.unithmemd-patient__field input[type="email"],
.unithmemd-patient__field input[type="password"],
.unithmemd-patient__field input[type="text"] {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.4;
    color: var(--unithmemd-patient-dark);
    background: var(--unithmemd-patient-white);
    border: 1px solid var(--unithmemd-patient-border);
    border-radius: var(--unithmemd-patient-radius-sm);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.unithmemd-patient__field input[type="email"]:focus,
.unithmemd-patient__field input[type="password"]:focus,
.unithmemd-patient__field input[type="text"]:focus {
    border-color: var(--unithmemd-patient-primary);
    box-shadow: 0 0 0 3px rgba( 26, 157, 94, 0.15 );
    outline: none;
}

/* 勾选行（同意条款 / 保持登录）：整行可点，文字与方框基线对齐 */
.unithmemd-patient__field--agree,
.unithmemd-patient__field--remember {
    margin: 0 0 14px;
}

.unithmemd-patient__field--agree label,
.unithmemd-patient__field--remember label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    cursor: pointer;
}

.unithmemd-patient__field--agree input[type="checkbox"],
.unithmemd-patient__field--remember input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    min-height: 0;
    margin: 3px 0 0;
    accent-color: var(--unithmemd-patient-primary);
}

.unithmemd-patient__field--agree a,
.unithmemd-patient__field--remember a {
    color: var(--unithmemd-patient-primary);
    text-decoration: underline;
}

/* 蜜罐：与模板里的内联样式同一套值（CSS 是「万一内联被主题过滤掉」的第二道保险）。
 * 只挪出视口，**不用 display:none / visibility:hidden** —— 那两种写法部分爬虫会识别并跳过。 */
.unithmemd-patient__field--honeypot {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* -------------------------------------------------------------------------
 * 5. 说明文字 / 页脚链接
 * ---------------------------------------------------------------------- */
.unithmemd-patient__intro {
    margin: 0 0 20px;
    font-size: 15px;
    color: var(--unithmemd-patient-medium);
}

.unithmemd-patient__hint {
    display: block;
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--unithmemd-patient-medium);
}

.unithmemd-patient__hint--portal {
    margin-top: 14px;
}

.unithmemd-patient__hint a {
    color: var(--unithmemd-patient-primary);
    text-decoration: underline;
}

.unithmemd-patient__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 18px 0 0;
    font-size: 14px;
}

.unithmemd-patient__links a {
    color: var(--unithmemd-patient-primary);
    text-decoration: none;
}

.unithmemd-patient__links a:hover,
.unithmemd-patient__links a:focus-visible {
    text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * 6. 按钮（手机满宽 = 拇指友好；桌面在媒体查询里收成自动宽度）
 * ---------------------------------------------------------------------- */
.unithmemd-patient__submit {
    margin: 20px 0 0;
}

.unithmemd-patient__button {
    display: inline-block;
    width: 100%;
    min-height: 48px;
    padding: 13px 24px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--unithmemd-patient-white);
    background: var(--unithmemd-patient-primary);
    border: 1px solid var(--unithmemd-patient-primary);
    border-radius: var(--unithmemd-patient-radius-sm);
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.unithmemd-patient__button:hover {
    background: var(--unithmemd-patient-primary-hover);
    border-color: var(--unithmemd-patient-primary-hover);
}

.unithmemd-patient__button:focus-visible {
    outline: 3px solid rgba( 26, 157, 94, 0.35 );
    outline-offset: 2px;
}

/* 倒计时期间由 JS 置 disabled；禁用态只压透明度，不留「点了没反应」的错觉 */
.unithmemd-patient__button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.unithmemd-patient__button--secondary {
    color: var(--unithmemd-patient-primary);
    background: transparent;
    border-color: var(--unithmemd-patient-primary);
}

.unithmemd-patient__button--secondary:hover {
    color: var(--unithmemd-patient-white);
    background: var(--unithmemd-patient-primary);
    border-color: var(--unithmemd-patient-primary);
}

/* -------------------------------------------------------------------------
 * 7. 脚本增强节点（assets/js/account.js 动态创建；JS 关掉时这些节点根本不存在）
 *    结构 / 状态类在这里定死，脚本只加类名与文本 —— 显示效果全归 CSS。
 * ---------------------------------------------------------------------- */
.unithmemd-patient__strength {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--unithmemd-patient-medium);
}

.unithmemd-patient__strength-track {
    flex: 0 0 96px;
    height: 6px;
    overflow: hidden;
    background: var(--unithmemd-patient-border);
    border-radius: 999px;
}

.unithmemd-patient__strength-fill {
    display: block;
    width: 0;
    height: 100%;
    background: var(--unithmemd-patient-danger);
    transition: width 0.2s, background-color 0.2s;
}

.unithmemd-patient__strength.is-weak .unithmemd-patient__strength-fill {
    width: 33%;
    background: var(--unithmemd-patient-danger);
}

.unithmemd-patient__strength.is-medium .unithmemd-patient__strength-fill {
    width: 66%;
    background: var(--unithmemd-patient-warning);
}

.unithmemd-patient__strength.is-strong .unithmemd-patient__strength-fill {
    width: 100%;
    background: var(--unithmemd-patient-primary);
}

/* 两次密码一致性：只说「一样 / 不一样」，不复述密码内容 */
.unithmemd-patient__hint--match.is-match {
    color: var(--unithmemd-patient-primary);
}

.unithmemd-patient__hint--match.is-mismatch {
    color: var(--unithmemd-patient-danger);
}

/*
 * JS 动态节点默认隐藏：这些节点自己写了 display（flex / block），
 * 浏览器默认的 `[hidden] { display: none }` 会被盖掉 ⇒ 必须显式再声明一次
 * （属性选择器多算一个 (0,0,1,0)，稳定压过 `.unithmemd-patient__strength` 这类单类规则）。
 */
.unithmemd-patient [hidden] {
    display: none;
}

/* -------------------------------------------------------------------------
 * 8. 空壳占位（Render::placeholder()：内容模板还没落地的路由；D 批后仅剩兜底用途）
 * ---------------------------------------------------------------------- */
.unithmemd-patient__placeholder {
    margin: 0 0 24px;
    padding: 24px 16px;
    text-align: center;
    background: var(--unithmemd-patient-white);
    border: 1px solid var(--unithmemd-patient-border);
    border-radius: var(--unithmemd-patient-radius-md);
}

.unithmemd-patient__placeholder-text {
    margin: 0 0 12px;
    font-size: 15px;
    color: var(--unithmemd-patient-medium);
}

.unithmemd-patient__placeholder-link {
    margin: 0;
    font-size: 14px;
}

.unithmemd-patient__placeholder-link a {
    color: var(--unithmemd-patient-primary);
    text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * 9. 桌面增强（移动优先：只用 min-width，绝不反向覆盖）
 * ---------------------------------------------------------------------- */
@media (min-width: 768px) {
    .unithmemd-patient {
        padding: 48px 0 72px;
    }

    .unithmemd-patient__container {
        max-width: 560px;
        padding: 0 24px;
    }

    .unithmemd-patient__title {
        margin: 0 0 24px;
        font-size: 30px;
    }

    .unithmemd-patient__form {
        padding: 32px 36px;
        box-shadow: var(--unithmemd-patient-shadow-md);
    }

    .unithmemd-patient__form--resend {
        padding: 24px 36px;
    }

    /* 桌面不再是「拇指点按」场景：按钮收成正常宽度，别拉出一整行绿条 */
    .unithmemd-patient__submit {
        text-align: left;
    }

    .unithmemd-patient__button {
        width: auto;
        min-width: 220px;
    }

    .unithmemd-patient__links {
        justify-content: space-between;
    }
}

/* -------------------------------------------------------------------------
 * 10. 尊重「减少动效」偏好（所有过渡关掉；本文件不含动画 / 关键帧）
 * ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .unithmemd-patient *,
    .unithmemd-patient *::before,
    .unithmemd-patient *::after {
        transition: none;
    }
}

/* ==========================================================================
   B2 批：账户壳（黑白灰卡片风）
   追加于既有 446 行之后；不改动既有任何规则。
   区块：A 头部下拉 / B 标题行 + 标题 / C 卡片网格 / D 横幅 / E 空态 / F 表格
         / G 面包屑 / H 断点（移动优先）/ I 时间线（2026-10-08 视觉微调批追加）
   B2.9 批（2026-10-08）：头像并入 §B 的标题行（§A 不再是浮层）、头像 28 → 48px、
   `--account` 的 `min-height` 80 → 100vh；§B 新增 `__header` 规则。
   B2.10 批（2026-10-08）：§A 圆头像里放图标（底提亮 + inline-flex 居中 + `svg` 28px）。
   ========================================================================== */

/* ---- §A 头部用户区（标题行内的头像 + 下拉） ---- */
/* B2.9 批（2026-10-08）：头像搬进 §B 那条 `.unithmemd-patient__header` 行（标题左 / 头像右）
   ⇒ 它**不再是浮层**：`position: absolute` / `top` / `right` / `z-index` 一起删掉
   （「跟主题 header 抢层」这件事连同那个坐标系一起消失）。
   只留 `position: relative` —— 规则体里那个 `absolute` 的 `.unithmemd-patient__menu` 是它的子元素，
   少了这条声明，下拉的包含块会一路退到 §H 的 `.unithmemd-patient--account`（外面还有视窗那一层）
   ⇒ 弹到页面右上角。它本身不是视觉改动：relative 不动静态流里的位置。
   其余三条（`display: flex` / `justify-content: flex-end` / `margin: 0`）是行内 flex 子项的既有值，一字不动。
   历史：B2.7 批 `top` 14px → 90px；B2.8 批 `position: fixed → absolute`、`top` → 24px ——
   都写作于「主题 header 是 fixed 且 z-index 高，头像 fixed 会被挡」的年代；B2.9 批起这个矛盾已不存在。 */
.unithmemd-patient__header-user {
    position: relative;
    display: flex;
    justify-content: flex-end;
    margin: 0;
}

/* B2.9 批：头像盒 32px → 48px（与下面那条圆的 48px 同值；用户要求「头像放大」）。
   盒宽仍是自适应的（圆 + 三角 + 左右 6px 内边距）。 */
.unithmemd-patient__avatar {
    width: auto;
    min-width: 48px;
    min-height: 48px;
    padding: 0 6px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ▾ 小三角：B2.9 批随头像同步放大（间距 4px → 6px、两腰 4px → 5px、高 5px → 6px，与 48px 圆保持比例）。
   按钮盒仍是自适应宽（width:auto + min-width:48px + 左右各 6px 内边距）⇒ 48px 圆 + 6px 间距 + 10px 三角
   = 64px 全在盒内，不溢出、不需要 shrink 兜底；圆上仍保留 flex-shrink: 0，防止空盒在窄容器里被压小。 */
.unithmemd-patient__avatar::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 6px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #6b7280;
    vertical-align: middle;
}

/* B2.9 批：28px → 48px（与上面 `.unithmemd-patient__avatar` 的 min-width / min-height 同值）。
   B2.10 批（2026-10-08）：圆里加线条人像（模板侧 `Unithmemd_Patient_Icons::user()`）——
   `display: block` → **inline-flex + 居中**（icon 落在圆心，不靠行高凑）、底 `#d1d5db` → `#f3f4f6`
   （提亮一档，灰底上的描边人像才看得清）、`color: #111` 给 `stroke="currentColor"` 定色。
   尺寸仍是 48px，`flex-shrink: 0` 照旧。 */
.unithmemd-patient__avatar-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #f3f4f6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #111;
    flex-shrink: 0;
}

/* B2.10 批：圆里那个图标（`Icons::user()` 自带 24×24）—— 撑到 28px，留 10px 环边不贴壁。
   写成子选择器而不是改 `svg` 的 width / height 属性：常量串是全站共用的一份（改属性会牵动别处）。 */
.unithmemd-patient__avatar-circle svg {
    width: 28px;
    height: 28px;
}

/* B2.9 批：`top` 44px → 56px —— 头像盒从 32px 长到 48px，44px 会压在圆上（锚点见 §A 的
   `.unithmemd-patient__header-user { position: relative }`）；56px = 48px 头像盒 + 8px 间隙。
   其余（absolute / right / min-width / 配色 / 圆角 / 阴影 / padding / z-index）不动。 */
.unithmemd-patient__menu {
    position: absolute;
    top: 56px;
    right: 0;
    min-width: 120px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 6px;
    z-index: 20;
}

.unithmemd-patient__menu[hidden] {
    display: none;
}

.unithmemd-patient__menu form {
    margin: 0;
}

.unithmemd-patient__menu button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #111;
    font-size: 15px;
    font-family: inherit;
    line-height: 1.4;
    cursor: pointer;
    min-height: 44px;
}

.unithmemd-patient__menu button:hover {
    background: #f3f4f6;
}

/* ---- §B 标题行（B2.9 批：标题左 + 头像右同行）+ 页面标题 ---- */
/* B2.9 批（2026-10-08，用户要求「头像跟标题同行」）：`.unithmemd-patient__header` 是外框
   `templates/account/layout.php` 里包住 `<h1 class="…__title">` 与 `…__header-user` 的那一层，
   一个 flex 行 —— `space-between` ⇒ 一个靠左一个靠右；`center` ⇒ 48px 头像与标题中线对齐；
   `gap: 16px` 是两者之间的最小间距（标题很长时也不会贴到头像）。
   **行下方那 32px 间距只在这一条里写一次**（`margin: 0 0 32px`）：标题自己不再留底边距 —— 包括
   §H 的 ≥641px 那档（那儿原来还写着 `margin-bottom: 32px`，B2.9 批删掉；否则平板 / 桌面会在行内
   多垫一段，把 48px 头像顶到行中间、行高从 58px 涨到 90px）。 */
.unithmemd-patient__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 32px;
}

.unithmemd-patient__title {
    margin: 0;
    font-size: 32px;
    line-height: 1.2;
    font-weight: 700;
    color: #111;
    text-align: left;
}

/* ---- §C 卡片网格 ---- */
.unithmemd-patient__cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 0 0 32px;
}

.unithmemd-patient__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 180px;
    padding: 28px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    color: inherit;
    text-decoration: none;
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.unithmemd-patient__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.05);
}

.unithmemd-patient__card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: #111;
    margin: 0 0 4px;
}

.unithmemd-patient__card-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: #111;
}

.unithmemd-patient__card-text {
    font-size: 14px;
    line-height: 1.5;
    color: #6b7280;
}

.unithmemd-patient__card-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: #f59e0b;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
}

/* ---- §D 健康档案横幅 ---- */
.unithmemd-patient__banner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* 状态胶囊初始 `hidden`（无记录）时不能被 `display: inline-block` 盖掉 */
.unithmemd-patient__banner [hidden] {
    display: none;
}

.unithmemd-patient__banner-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #111;
    flex-shrink: 0;
}

.unithmemd-patient__banner-title {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.3;
    color: #111;
}

.unithmemd-patient__banner-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.unithmemd-patient__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 10px 20px;
    border: 0;
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
}

.unithmemd-patient__btn--primary {
    background: #111;
    color: #fff;
}

.unithmemd-patient__btn--primary:hover {
    background: #000;
}

.unithmemd-patient__btn--ghost {
    background: #fff;
    color: #111;
    border: 1px solid #e5e7eb;
}

.unithmemd-patient__btn--ghost:hover {
    background: #f9fafb;
}

/* ---- §E 空态 ---- */
.unithmemd-patient__empty {
    padding: 48px 24px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    text-align: center;
}

.unithmemd-patient__empty-text {
    margin: 0 0 8px;
    font-size: 16px;
    line-height: 1.5;
    color: #6b7280;
}

.unithmemd-patient__empty-text:last-child {
    margin-bottom: 0;
}

/* ---- §F 表格（Appointments 桌面） ---- */
.unithmemd-patient__table-wrap {
    display: none;
    overflow-x: auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.unithmemd-patient__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.unithmemd-patient__table th {
    padding: 12px 16px;
    background: #f3f4f6;
    color: #111;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.unithmemd-patient__table td {
    padding: 12px 16px;
    border-bottom: 1px solid #f3f4f6;
    color: #111;
}

.unithmemd-patient__table-empty {
    text-align: center;
    color: #6b7280;
    padding: 40px 16px;
}

/* 窄屏（≤640）：表格换成卡片列表 —— ≥641px 由 §H 换回表格 */
.unithmemd-patient__row-cards {
    display: block;
    padding: 48px 24px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    text-align: center;
}

/* ---- §G 面包屑 ---- */
.unithmemd-patient__breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    font-size: 14px;
    color: #6b7280;
}

.unithmemd-patient__breadcrumb a {
    color: inherit;
    text-decoration: none;
}

.unithmemd-patient__breadcrumb a:hover {
    text-decoration: underline;
}

.unithmemd-patient__breadcrumb-sep {
    color: #9ca3af;
}

/* ---- §H 断点（移动优先） ---- */

/* 账户壳：最小高度 + 定位参照（B2.7 批起，B2.8 / B2.9 批调整）。
   - `min-height`：`70vh`（B2.7 批）→ `80vh`（B2.8 批：70vh 底部仍有空白）→ **`100vh`**（B2.9 批，
     2026-10-08：用户要求内容区满视窗）。内容不够高时撑起视窗，避免底部大片空白；
   - `position: relative`（B2.8 批）：当初是给 §A 那个 `absolute` 头像当定位参照；B2.9 批头像已改**行内**
     （§A 不再是浮层）⇒ 这条**保留但当前没有消费方**（无害：不动任何观感；`__menu` 的锚点在 §A 自己身上）。
   只作用于接管页（`<main>` 上有 `--account` 修饰类）；六条 `/patient-*` 的表单页不带这个修饰类。
   顶层规则（不在任何媒体查询里）⇒ 三档断点都生效；不改别的选择器。 */
.unithmemd-patient--account {
    position: relative;
    min-height: 100vh;
}

.unithmemd-patient--account .unithmemd-patient__container {
    max-width: 100%;
    margin: 0 auto;
    padding: 32px 16px 48px;
}

/* 平板及以上：≥641px */
@media (min-width: 641px) {
    /* B2.9 批：只留字号（`margin-bottom: 32px` 删掉 —— 行间距归 §B 的 `__header`，
       在这儿再写一条会把 48px 头像顶到标题行的中间）。 */
    .unithmemd-patient__title {
        font-size: 48px;
    }

    .unithmemd-patient__cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .unithmemd-patient__banner {
        flex-direction: row;
        align-items: center;
        gap: 20px;
    }

    .unithmemd-patient__banner-title {
        flex: 1;
    }

    .unithmemd-patient__banner-actions {
        flex-direction: row;
        width: auto;
    }

    .unithmemd-patient__btn {
        width: auto;
    }

    .unithmemd-patient__table-wrap {
        display: block;
    }

    .unithmemd-patient__row-cards {
        display: none;
    }
}

/* 桌面及以上：≥1025px */
@media (min-width: 1025px) {
    .unithmemd-patient__container {
        max-width: 1100px;
        padding: 40px 20px 64px;
    }

    .unithmemd-patient__title {
        font-size: 48px;
    }

    .unithmemd-patient__cards {
        grid-template-columns: repeat(3, 1fr);
    }

    .unithmemd-patient--account .unithmemd-patient__container {
        max-width: 1600px;
        padding: 48px 20px 64px;
    }
}

/* ---- §I 时间线（健康档案横幅下方） ----
   基础态 = 移动端（日期与正文可换行、左右 20px 内边距）；
   ≥641px 起恢复桌面排布（日期列定宽 100px、不换行、左右 28px）。
   原型里是写死的假数据；阶段 2 正式模板输出空，等阶段 5 才填。 */

/* 注意：§I 的桌面覆盖在文件末尾的 @media (min-width: 641px) 块
   （§I 是后追加区块，断点分散在尾部，判据 10 按去重算不受影响） */
.unithmemd-patient__timeline {
    margin: 0;
    padding: 8px 20px 20px;
    background: #fff;
    border-radius: 0 0 12px 12px;
}

.unithmemd-patient__timeline-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 0;
    border-bottom: 1px solid #f3f4f6;
}

.unithmemd-patient__timeline-item:last-child {
    border-bottom: 0;
}

.unithmemd-patient__timeline-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: #111;
    border-radius: 2px;
    flex-shrink: 0;
}

.unithmemd-patient__timeline-date {
    font-size: 15px;
    font-weight: 500;
    color: #111;
    flex-shrink: 0;
}

.unithmemd-patient__timeline-text {
    flex: 1;
    font-size: 15px;
    color: #111;
}

.unithmemd-patient__btn--small {
    min-height: 32px;
    padding: 6px 16px;
    font-size: 14px;
    border-radius: 16px;
    background: #111;
    color: #fff;
    width: auto;
}

/* 平板及以上：≥641px —— 时间线恢复桌面排布（日期列定宽、单行不换行） */
@media (min-width: 641px) {
    .unithmemd-patient__timeline {
        padding: 8px 28px 28px;
    }

    .unithmemd-patient__timeline-item {
        flex-wrap: nowrap;
        gap: 16px;
    }

    .unithmemd-patient__timeline-date {
        min-width: 100px;
    }
}

/* ==========================================================================
   §WC：WC endpoint 页（B4 批，2026-10-08）—— **外框接管**，只补 WC 正文自己的样式
   - B3 批那时是「WC 原生页 + 隐藏侧栏 + Back 链接」；**B4 批**起患者视角下由
     `templates/account/layout.php` 接管 6 个展示类 endpoint（`Account::context()` = `wc-endpoint`）
     ⇒ 原来那两条（隐藏 WC 原生侧栏 / 内容区铺满）**整条删除**：我们的外框里既没有 WC 的侧栏，
     也没有 `.woocommerce-MyAccount-content` 那层容器 —— 隐藏与铺满都成了没有对象的规则。
   - 现在这一段只做一件事：给外框里那块 `.unithmemd-patient__wc-content`（WC 自己的 endpoint
     内容的落点）把排版接上我们的口径（按钮 / 字段）。
   - 命名空间纪律（[E1] 红线）：选择器**一律以 `.unithmemd-patient` 打头**，本段**不出现**任何
     `.woocommerce-*` 选择器（不许裸写 .woocommerce-*：那会连同主题与兄弟插件的账户页一起改）。
     `.unithmemd-patient-page--wc-account` 仍是 `Render::filter_body_class()` 挂在 <body> 上的标记，
     B4 起它只服务下面那条 Back 链接（WC **自己**渲染账户页的场合：非患者视角）。
   - 移动优先：基础态即可用，≥641px 只加一点桌面留白（[E1] 红线：全文件零 max-width 媒体查询）。
   - 追加于既有 446 行之后；不改动既有任何规则。
   ========================================================================== */

/* Back 链接（`Account::render_wc_back_link()` 注入）：B4 起只在「WC 自己渲染的账户页」上出现
   —— 我们的外框接管 wc-endpoint 之后，那条链接在方法里第一行就早退了（外框自带卡片导航）。 */
.unithmemd-patient-page--wc-account .wc-endpoint-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 24px;
    padding: 8px 16px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    color: #111;
    text-decoration: none;
    font-size: 14px;
    transition: background 150ms ease;
}

.unithmemd-patient-page--wc-account .wc-endpoint-back:hover {
    background: #f3f4f6;
}

/* 尊重「减少动效」偏好（与 §C 那条同一纪律：新增的过渡也要能关掉） */
@media (prefers-reduced-motion: reduce) {
    .unithmemd-patient-page--wc-account .wc-endpoint-back {
        transition: none;
    }
}

/* 平板及以上：≥641px —— 桌面端把链接与下方内容的间距放宽一档（与账户壳同一断点） */
@media (min-width: 641px) {
    .unithmemd-patient-page--wc-account .wc-endpoint-back {
        margin: 0 0 28px;
    }
}

/* WC 内容放进我们的 layout：这块就是 WC endpoint 内容的落点（外框那个
   `<div class="unithmemd-patient__wc-content">`）—— 本身不加声明，只当**挂点**：
   WC 的内容照旧继承账户壳的容器宽度 / 字号 / 行高（§A / §H），下面两条元素级规则挂在它里面。 */
.unithmemd-patient__wc-content {
    /* 挂点（故意留空：要覆盖 WC 内容时从这里往下加，别去碰 WC 的类名） */
}

/* WC 表单按钮：对齐我们的口径（黑按钮；触屏目标 44px） */
.unithmemd-patient__wc-content .button,
.unithmemd-patient__wc-content button[type="submit"],
.unithmemd-patient__wc-content input[type="submit"] {
    background: #111;
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 15px;
    font-family: inherit;
    cursor: pointer;
    min-height: 44px;
}

.unithmemd-patient__wc-content .button:hover,
.unithmemd-patient__wc-content button[type="submit"]:hover,
.unithmemd-patient__wc-content input[type="submit"]:hover {
    background: #000;
}

/* WC 表单字段：与 §C 的输入框同观感（边框 / 圆角 / 内边距 / 宽度 100% + border-box） */
.unithmemd-patient__wc-content input[type="text"],
.unithmemd-patient__wc-content input[type="email"],
.unithmemd-patient__wc-content input[type="password"],
.unithmemd-patient__wc-content input[type="tel"],
.unithmemd-patient__wc-content input[type="url"],
.unithmemd-patient__wc-content input[type="number"],
.unithmemd-patient__wc-content select,
.unithmemd-patient__wc-content textarea {
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
}

/* ==========================================================================
   §J：子页与当前页标记（B5 批，2026-10-08）—— ① 手机档卡片横向滚动；② 当前页卡片黑框
   - ① 的开关是 <main> 上的 `.unithmemd-patient--subpage`（`templates/account/layout.php`：
     除 `overview` 之外的每个上下文都带）⇒ 账户**首页**那张卡片网格一个字都没变；子页
     （四条自有子路径 + B4 批接管的 WC endpoint）在手机档把卡片排成一行、可横向拖，
     `scroll-snap` 让停下时每屏对着一张卡。
   - ② 是 `.unithmemd-patient__card--active`（当前页对应的那张卡，见外框里那张 slug 映射表）——
     §C 的卡片本来**没有** border，加 2px 会连带把卡片撑大约 4px（`box-sizing` 是 content-box）；
     若实测有可见位移，把这条换成 `box-shadow: 0 0 0 2px #111;` 即可（两者择一，别都留）。
   - 命名空间纪律（[E1] 红线）：选择器**一律以 `.unithmemd-patient` 打头**；本段零 `!important`、
     零 `max-width` 媒体查询（下面两个断点都是 `min-width`，与 §H / §WC 同口径）。
   - 追加于既有 446 行之后（本段接在 §WC 后面，既有规则一条都未动）。
   ========================================================================== */

/* 当前页对应的卡片加黑框（B5 批，2026-10-08） */
.unithmemd-patient__card--active {
    border: 2px solid #111;
}

/* 子页（手机档）：卡片横排、可横向拖 + 吸附对齐（基础态，无需媒体查询） */
.unithmemd-patient--subpage .unithmemd-patient__cards {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding-bottom: 8px;
    /* 让最后一卡能贴边 */
    scroll-padding-left: 0;
}

.unithmemd-patient--subpage .unithmemd-patient__card {
    flex: 0 0 70%;
    scroll-snap-align: start;
    min-height: 180px;
}

/* 平板及以上：≥641px —— 回到网格（两列），横拖与吸附一并关掉 */
@media (min-width: 641px) {
    .unithmemd-patient--subpage .unithmemd-patient__cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        overflow-x: visible;
        scroll-snap-type: none;
        gap: 24px;
    }

    .unithmemd-patient--subpage .unithmemd-patient__card {
        flex: none;
    }
}

/* 桌面：≥1025px —— 三列（与 §H 的断点口径一致） */
@media (min-width: 1025px) {
    .unithmemd-patient--subpage .unithmemd-patient__cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==========================================================================
   §B8：阶段 1 表单页视觉修正（B8 批，2026-10-09）
   —— 只动两条：① 标题与表单的间距；② 提交按钮 绿底白字 → 白底 + 黑框 + 黑字
   ==========================================================================
 *
 * 服务对象 = **六条 `/patient-*` 表单页**（`templates/layout.php` 那层 `<main>` 上带
 * `.unithmemd-patient--{register,login,verify,lostpassword,resend,logout}`）——
 * 阶段 2 的账户壳（`--account`，标题行由 `templates/account/layout.php` 自己那份出）**一点不受影响**。
 *
 * ① 标题那条为什么**不写裸选择器**：§B 段（账户壳标题行）里已经有一条**裸的**
 * `.unithmemd-patient__title`，它的 `text-align: left` 就是账户壳的左对齐口径，`verify-phase2.js`
 * 判据 18 正盯着它。文件末尾再开一条裸的，同优先级后写胜出 ⇒ 那条 `text-align` 会被这里「清空」
 * （判据 18 当场变红），而表单页标题本来也不是账户壳那种左对齐排版。⇒ 这里用**六条路由类**限定
 * 作用域，选择器照旧一律以 `.unithmemd-patient` 打头（[E1] 红线不破，也用不着 `!important`）。
 *
 * ② 按钮那条为什么带 `.unithmemd-patient__form` 这一层：模板里是
 * `<p class="…__submit"><button type="submit" class="…__button">`（三条表单页一致），主题（Flatsome）
 * **不会**给我们这个按钮补 `.button` 类 ⇒ 主选自家 `__button`；另两条（`button[type="submit"]` /
 * `input[type="submit"]`）兜住「模板以后换成裸 button」，`.button` 兜住「谁给按钮补了主题类」。
 * 四条都比 §6 那条单类规则（0,1,0）更具体（0,2,x）⇒ 后写 + 更具体，两层保险都赢。
 * `__submit`（包住按钮的那层 `<p>`）**不进选择器**：给包住按钮的段落加边框 = 画出套在按钮外面的框。
 * 颜色走字面量 `#111` / `#fff`（与 §J「当前页黑框」/ §WC 黑按钮同一套「黑白件」取值），不新增 token。
 * ====================================================================== */

/* ① 标题与表单的间距：基础档 20px / 桌面档 24px 都偏紧 ⇒ 六条表单页统一 32px */
.unithmemd-patient--login .unithmemd-patient__title,
.unithmemd-patient--register .unithmemd-patient__title,
.unithmemd-patient--lostpassword .unithmemd-patient__title,
.unithmemd-patient--verify .unithmemd-patient__title,
.unithmemd-patient--resend .unithmemd-patient__title,
.unithmemd-patient--logout .unithmemd-patient__title {
    margin-bottom: 32px;
}

/* ② 提交按钮：白底 + 黑框 + 黑字（替代 §6 那条绿底白字；44px 触屏目标与 §WC 黑按钮同一档） */
.unithmemd-patient__form .unithmemd-patient__button,
.unithmemd-patient__form .button,
.unithmemd-patient__form button[type="submit"],
.unithmemd-patient__form input[type="submit"] {
    background: #fff;
    color: #111;
    border: 2px solid #111;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 15px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    min-height: 44px;
    text-transform: none;
    transition: background 150ms ease, color 150ms ease;
}

/* hover 反相（黑底白字）：比「把绿色调深一点」更能说明这颗按钮按下去了 */
.unithmemd-patient__form .unithmemd-patient__button:hover,
.unithmemd-patient__form .button:hover,
.unithmemd-patient__form button[type="submit"]:hover,
.unithmemd-patient__form input[type="submit"]:hover {
    background: #111;
    color: #fff;
}

/* 尊重「减少动效」偏好：本节新加的过渡也要能关掉（§10 那条在文件更前面，同优先级后写胜出
   ⇒ 不在这里再声明一次，新过渡就会绕过 §10） */
@media (prefers-reduced-motion: reduce) {
    .unithmemd-patient__form .unithmemd-patient__button,
    .unithmemd-patient__form .button,
    .unithmemd-patient__form button[type="submit"],
    .unithmemd-patient__form input[type="submit"] {
        transition: none;
    }
}

/* ==========================================================================
   §3-A My quotes 列表（3-A 批，2026-10-09；追加于既有 446 行之后）
   --------------------------------------------------------------------------
   本段只加三件事 —— 桌面表格「Action」列的文本按钮 / 窄屏卡片 / 卡片里的两行文案：

   ① `.unithmemd-patient__quote-action`：桌面表格那一列「View」的样式。它现在是**纯文字占位**
      （3-A.1 批才换成指向详情页的链接），所以只做「灰字 → hover 变黑」这一档，不画边框、
      不画底色 —— 画了就成了按钮，用户会去点一个还没接路由的东西。
      本段**零 `transition`**：不引入新动效，也就用不着 §10 的 `prefers-reduced-motion` 覆盖
      （与 §B8 那批不同，那一批加了过渡所以补了一条覆盖规则）。
   ② `.unithmemd-patient__row-card`：窄屏（≤640px）每一条报价的卡片。外层容器是 §F 的
      `__row-cards`（白底 / 圆角 / 阴影 / 大内边距，原本是给「空态一句话」用的母版）——
      它给的三件东西这里照用（§H 的 `≥641px` 把整块 `display: none` ⇒ 桌面只剩表格），
      卡片自己再补一条 `border`：白底叠白底，只靠阴影分不出「一张卡」的边界。
   ③ `__row-card-line` + 卡片间距：卡片里两行（医院名 / 「日期 · 金额 · 状态」）。
      容器那条 `text-align: center` 是空态母版留下的 ⇒ 卡片自己声明 `left` 压回来
      （**不改** §F 那条规则：appointments 的空态还靠它居中）。

   红线照旧（[E1]）：选择器一律以 `.unithmemd-patient` 打头、零 `!important`、零 `max-width`
   媒体查询；本段**不新增 token**（灰 `#6b7280` / 黑 `#111` / 线 `#e5e7eb` 都是文件里已有的字面量）。
   ========================================================================== */

/* ① 桌面表格「Action」列：文本按钮（灰字 / hover 变黑） */
.unithmemd-patient__quote-action {
    color: #6b7280;
    font-weight: 600;
    cursor: pointer;
}

.unithmemd-patient__quote-action:hover {
    color: #111;
}

/* ② 窄屏卡片（只有 ≤640px 看得见：外层 `__row-cards` 在 ≥641px 是 `display: none`） */
.unithmemd-patient__row-card {
    padding: 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    text-align: left;
}

/* 卡片之间留 12px（`+` 只作用于「第二张起」，首张不带多余上边距） */
.unithmemd-patient__row-card + .unithmemd-patient__row-card {
    margin-top: 12px;
}

/* ③ 卡片里的两行：次要信息一行灰字；医院名（`strong`）显式给黑字，不受主题影响 */
.unithmemd-patient__row-card-line {
    font-size: 14px;
    line-height: 1.5;
    color: #6b7280;
}

.unithmemd-patient__row-card-line strong {
    color: #111;
}

/* ==========================================================================
   §3-B：我的收藏（3-B 批，2026-10-09；**3-B.2 批视觉重构**，同日）—— 接在 §3-A（报价）之后，
   同一套命名与口径；服务对象 = `templates/account/favorites.php` 输出的 DOM。四块：
     ① **分档条**：`__tabs`（flex 容器 + 底边一条 1px 灰线）+ `__tab`（**下划线式**：透明底 +
        2px 透明下边框、`margin-bottom: -1px` 贴住容器底边）+ hover（灰下划线）/ 当前档
        （黑字 + 黑下划线）。零 JS：换档 = 两条普通链接（`?type=` + 整页刷新），当前档只靠
        `__tab--active` 区分，所以 `--active` 写在 `:hover` **之后**、并且用双类写法
        （`.tab.tab--active`，0-2-0）压过 `.tab:hover`（同为 0-2-0）—— 否则鼠标停在当前档上
        会变成「灰底下划线」。
     ② **医院档**：`__fav-hospitals`（纵向列表）+ `__fav-hosp`（**横向卡**：窄屏竖排 ⇒ ≥641px
        横排：缩略图 + 正文 + 取消按钮推到最右）+ `__fav-hosp-thumb`（窄屏通栏 96px 高 ⇒
        ≥641px 收成 56×56；图缺时兜底图标居中）+ `__fav-hosp-title`（`<a>` / `<span>` 两形态）
        + `__fav-hosp-meta`（城市，14px 灰字）。
     ③ **翻译档**：`__fav-interpreters`（网格：窄屏一列 ⇒ ≥641px 两列 ⇒ ≥1025px 三列）+
        `__fav-interp`（**头像卡**：头像圆 / 名字 / 语种 / 动作行）+ `__fav-interp-avatar`
        （56px 圆，没头像时画**首字母**）+ `__fav-interp-name` / `__fav-interp-lang` /
        `__fav-interp-actions`（`View profile` 主按钮 + 取消按钮并排居中）。
     ④ **两个按钮**：`__fav-interp-view`（白底黑边黑字 → hover 反色）与 `__fav-remove-btn`
        （白底灰边灰字 → hover 转黑）—— 都是即时变色。
   口径：全部 `.unithmemd-patient` 前缀（不裸写 `a` / `button` / `form`）、**零 `!important`**、
   零 `max-width` 媒体查询、**零 `transition`**（不引入新动效 ⇒ 用不着 §10 的
   `prefers-reduced-motion` 覆盖，与 §3-A 同款；hover 即时变色）。
   ========================================================================== */

/* ① 分档条 —— 下划线式 Tab：容器底边一条灰线，间距 20px，下方 16px 接列表 */
.unithmemd-patient__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 0 0 16px;
    padding: 0;
    border-bottom: 1px solid #e5e7eb;
}

/* 一个 Tab：透明底 + 2px 透明下边框；`margin-bottom: -1px` 让下划线压住容器的灰线 */
.unithmemd-patient__tab {
    display: inline-block;
    margin-bottom: -1px;
    padding: 8px 0;
    font-size: 14px;
    line-height: 1.5;
    color: #6b7280;
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.unithmemd-patient__tab:hover {
    color: #111;
    border-bottom-color: #d1d5db;
}

/* 当前档：黑字 + 黑下划线。双类写法 + 排在 `:hover` 之后 ⇒ 鼠标停在当前档上也不会被 hover 规则改色 */
.unithmemd-patient__tab.unithmemd-patient__tab--active {
    color: #111;
    font-weight: 600;
    border-bottom-color: #111;
}

/* ② 医院档列表 —— 纵向排（窄屏一张卡占一行），卡片间距 12px */
.unithmemd-patient__fav-hospitals {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 医院卡：窄屏**竖排**（缩略图通栏在上、正文在中、取消按钮在下）；白底灰边圆角与 §3-A 同款 */
.unithmemd-patient__fav-hosp {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    text-align: left;
}

/* 缩略图框：窄屏通栏 96px 高（≥641px 由媒体查询收成 56×56）；图缺时兜底图标居中 */
.unithmemd-patient__fav-hosp-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 96px;
    overflow: hidden;
    color: #6b7280;
    background: #f3f4f6;
    border-radius: 8px;
}

/* 有特色图时由 `wp_get_attachment_image( … )` 输出的 `<img>` 铺满整块 */
.unithmemd-patient__fav-hosp-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 正文列（横排时吃满中间）：`flex: 1 1 auto` + `min-width: 0` 让长标题换行而不是把卡片撑破 */
.unithmemd-patient__fav-hosp-body {
    flex: 1 1 auto;
    min-width: 0;
}

/* 标题：16px 600 黑字（`<a>` 与 `<span>` 两种形态共用）；默认不带下划线 */
.unithmemd-patient__fav-hosp-title {
    display: block;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 600;
    color: #111;
    text-decoration: none;
}

/* 只有「真的是链接」的标题（渲染成 `<a href>` ⇒ 命中 `[href]`）才在 hover 时出下划线 */
.unithmemd-patient__fav-hosp-title[href]:hover {
    text-decoration: underline;
}

/* 城市 / 一行小字：14px 灰字，与标题拉开 4px（没有城市时整块不渲染，不留空行） */
.unithmemd-patient__fav-hosp-meta {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.5;
    color: #6b7280;
}

/* ③ 翻译档网格 —— 窄屏一列，≥641px 两列、≥1025px 三列（见文件末尾两段媒体查询） */
.unithmemd-patient__fav-interpreters {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 翻译者卡：竖排居中（头像 / 名字 / 语种 / 动作行）；白底灰边圆角与医院卡同款 */
.unithmemd-patient__fav-interp {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    text-align: center;
}

/* 头像圆：56px；没有头像时圆里画**首字母**（居中 + 字重） */
.unithmemd-patient__fav-interp-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    overflow: hidden;
    font-size: 20px;
    line-height: 1;
    font-weight: 600;
    color: #6b7280;
    background: #f3f4f6;
    border-radius: 999px;
}

/* 有头像时由 `wp_get_attachment_image( … )` 输出的 `<img>` 铺满圆（与容器同尺寸） */
.unithmemd-patient__fav-interp-avatar img {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: cover;
}

/* 名字：16px 600 黑字；允许折行（居中卡里不撑破） */
.unithmemd-patient__fav-interp-name {
    display: block;
    max-width: 100%;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 600;
    color: #111;
    text-decoration: none;
    overflow-wrap: break-word;
}

/* 同标题：只有真的是链接才在 hover 时出下划线 */
.unithmemd-patient__fav-interp-name[href]:hover {
    text-decoration: underline;
}

/* 语种：14px 灰字（没有语种时这一格整块不渲染，不留空行） */
.unithmemd-patient__fav-interp-lang {
    display: block;
    font-size: 14px;
    line-height: 1.5;
    color: #6b7280;
}

/* 动作行：`View profile` + 取消按钮并排、居中（间距交给这里，`<form>` 自身不留边距） */
.unithmemd-patient__fav-interp-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
}

/* 主按钮（View profile）：白底黑边黑字 → hover 反色（黑底白字） */
.unithmemd-patient__fav-interp-view {
    padding: 8px 16px;
    font-size: 14px;
    line-height: 1.5;
    color: #111;
    text-decoration: none;
    background: #fff;
    border: 1px solid #111;
    border-radius: 8px;
}

.unithmemd-patient__fav-interp-view:hover {
    color: #fff;
    background: #111;
}

/* ④ 取消收藏表单：横排时贴卡片右侧（`<form>` 自身不留边距，间距交给卡片的 gap） */
.unithmemd-patient__fav-remove {
    flex: 0 0 auto;
    margin: 0;
}

/* 取消按钮：白底灰边灰字 → hover 转黑（即时变色，无 transition） */
.unithmemd-patient__fav-remove-btn {
    padding: 8px 16px;
    font-size: 14px;
    line-height: 1.5;
    color: #6b7280;
    cursor: pointer;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.unithmemd-patient__fav-remove-btn:hover {
    color: #111;
    border-color: #111;
}

/* 平板及以上：≥641px —— 医院卡改**横排**（缩略图收成 56×56、取消按钮推到最右）+ 翻译档两列 */
@media (min-width: 641px) {
    .unithmemd-patient__fav-hosp {
        flex-direction: row;
        align-items: center;
        gap: 16px;
    }

    .unithmemd-patient__fav-hosp-thumb {
        flex: 0 0 auto;
        width: 56px;
        height: 56px;
    }

    .unithmemd-patient__fav-hosp .unithmemd-patient__fav-remove {
        margin-left: auto;
    }

    .unithmemd-patient__fav-interpreters {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 桌面：≥1025px —— 翻译档三列（断点与 §J 的 `--subpage` 回网格一致） */
@media (min-width: 1025px) {
    .unithmemd-patient__fav-interpreters {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==========================================================================
   §B8.4 报价 / 预约表格的观感收口（B8.4 批，2026-10-09；**追加在文件末尾**）
   --------------------------------------------------------------------------
   用户视角的三条反馈：字太细、字号太小、序号列「跑出表格」（错位）。落到 CSS 上是四件事：

   ① **字体栈统一**（改用系统 UI 字体栈，不再依赖主题有没有加载 Manrope）：
      先把 token `--unithmemd-patient-font` 换成新栈 —— 文件里凡是用 `var( … )` 取字体的规则
      跟着一起换；再在末尾补一条顶层 `.unithmemd-patient` 把 `font-family` 落到壳上。
      只动这一处就够：六条表单页 / 账户壳 / 表格 / 卡片全在 `.unithmemd-patient` 里。
   ② **表格字号 / 字重**：§F（Appointments 桌面表格；报价页复用同一套类）是 14px + 常规字重，
      在灰底上发虚 ⇒ 正文 15px / 字重 500；表头 13px / 字重 600 / 大写 + 0.03em 字距
      （表头小一号 + 大写之后视觉上是「标签」，不与正文抢注意力）。
   ③ **序号列（`#`）**：§F 那列没有列宽，序号被挤到列里看着像「跑出去」⇒ 固定 60px + 左对齐 +
      左侧内边距与表头对齐；`th` / `td` 两条选择器**同体** —— 只写 `td` 的话表头那格仍按内容宽
      撑开，上下两格宽度不一致正是「错位」的来源。
   ④ **行分隔线与 hover**：§F 的 `border-bottom` 是 `#f3f4f6`，与表头底色同值 ⇒ 行与行看不出
      分界；加深到 `#e5e7eb`（文件里已有的线色），并给 `<tr>` 加 hover 浅灰底 `#f9fafb`
      （文件里已有的 hover 底色）；最后一行不画线（容器底部是 12px 圆角）。

   为什么追加在末尾、而不是改 §F（`:757`–`:802`）：§F 那条 `__row-cards` 的 `text-align: center`
   是**空态母版**的口径（§H 的 `≥641px` 用它居中），动它要连带算别的页面；本段一律用
   「`.unithmemd-patient` + `__table` 族」两级选择器（0,2,0）压过 §F 的单类规则（0,1,0），
   同优先级后写胜出 —— 与 §B8 批压过 §6 的处置同一套路，§F 的取值原样留在那里当兜底。

   红线照旧（[E1]）：选择器一律以 `.unithmemd-patient` 打头、零 `!important`、零 `max-width`
   媒体查询；本段**零 `transition`**（hover 只换底色，不引新动效 ⇒ 用不着 §10 的
   `prefers-reduced-motion` 覆盖，与 §3-A / §3-B 同款）；本段**不新增 token**
   （线 `#e5e7eb` / 灰 `#f9fafb` / 黑 `#111` 都是文件里已有的字面量）。
   ========================================================================== */

/* ① 字体栈：token 换值 + 同一规则里落到壳上（避免「token 换了、用的人没换」） */
.unithmemd-patient {
    --unithmemd-patient-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-family: var(--unithmemd-patient-font);
}

/* ② 表格字号 14px → 15px */
.unithmemd-patient .unithmemd-patient__table {
    font-size: 15px;
}

/* ③ 表头：13px / 600 / 大写 + 字距（内边距与 §F 同档，只调字号与字重） */
.unithmemd-patient .unithmemd-patient__table th {
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* ④ 正文格：内边距加大 + 字重 500 + 行分隔线加深（§F 那条与表头底色同值、看不见） */
.unithmemd-patient .unithmemd-patient__table td {
    padding: 14px 16px;
    font-weight: 500;
    border-bottom: 1px solid #e5e7eb;
}

/* ⑤ 末行不画线（容器底部是 12px 圆角，贴边的线会显得「多一条」） */
.unithmemd-patient .unithmemd-patient__table tbody tr:last-child td {
    border-bottom: 0;
}

/* ⑥ 序号列（`#`）：固定 60px + 左对齐 + 左内边距与表头对齐（`th` / `td` 同体） */
.unithmemd-patient .unithmemd-patient__table th:first-child,
.unithmemd-patient .unithmemd-patient__table td:first-child {
    width: 60px;
    min-width: 60px;
    padding-left: 16px;
    text-align: left;
    white-space: nowrap;
}

/* ⑦ 行 hover：浅灰底（纯颜色切换、零过渡 —— 触屏上抬手即恢复，不参与动效偏好） */
.unithmemd-patient .unithmemd-patient__table tbody tr:hover td {
    background: #f9fafb;
}

/* ==========================================================================
   §B8.5 窄屏报价卡片补信息 + 手机端子页自动滑到当前卡（B8.5 批，2026-10-10；
   **追加在文件末尾**）
   --------------------------------------------------------------------------
   用户视角的两条反馈，一条补 DOM、一条补行为，样式上只有**一件**事要做：

   ① `.unithmemd-patient__row-card-actions`（本段唯一一条规则）：窄屏卡片第四行的动作行 ——
      里面只有一个 `<span class="unithmemd-patient__quote-action">View</span>`（B8.5 批在
      `templates/account/quotes.php` 的 `__row-cards` 里补的那一行）。它复用 §3-A 那条文本按钮的
      观感（灰字 → hover 变黑），本段只补「一行 + 贴右」：`margin-top: 8px` 与卡片其余行拉开一点，
      `display: flex` + `justify-content: flex-end` 让它在卡片右下角，与桌面表格「Action」那一列的
      位置感一致。**不新增 token**（8px / flex-end 都是文件里已有的量级与取值）。

   ② 手机端「载入即滚到当前卡」是**脚本**的活（`assets/js/account-header.js` 的
      `placeActiveCard()`：只设容器 `scrollLeft`），CSS 一个字都不用改 —— §J 那句
      `scroll-snap-align: start` 正好与脚本算出的目标位置同口径，吸附不会把它拉回去；
      桌面 / 平板档容器变成网格（`overflow-x: visible`）⇒ 脚本自己在
      `scrollWidth <= clientWidth` 时早退，本段也无需任何断点。

   为什么追加在末尾、而不是改 §3-A（`:1402`–`:1459`）：§3-A 那六条规则的选择器清单被
   `verify-phase2.js` 的判据 125 **精确**钉着（`QA_SELS`，多一条就假红），而本段服务的是
   B8.5 批新增的那一行 DOM —— 各批的样式各归各段，§3-A 六条一个字未动、继续当兜底。
   同理，本段也不进 §B8.4（那一族是 `__table` 族 + 壳上的字体栈）。

   红线照旧（[E1]）：选择器一律以 `.unithmemd-patient` 打头、零 `!important`、零 `max-width`
   媒体查询；本段**零 `transition`**（hover 只换个颜色，不引新动效 ⇒ 用不着 §10 的
   `prefers-reduced-motion` 覆盖，与 §3-A / §3-B / §B8.4 同款）。
   ========================================================================== */

/* ① 卡片底部的动作行：行内右对齐（里面的 `__quote-action` 用 §3-A 的观感，不重复声明颜色） */
.unithmemd-patient__row-card-actions {
    margin-top: 8px;
    display: flex;
    justify-content: flex-end;
}

/* ==========================================================================
   §B8.6 手机端列表卡片：字号 / 字重与桌面表格对齐（B8.6 + 4a 批，2026-10-10；
   **追加于既有 1858 行（§B8.5 段尾）之后**）
   --------------------------------------------------------------------------
   由来：同一个列表，PC 上已经是 **15px / 字重 500**（§B8.4 收口的那一档），窄屏卡片却还是
   14px / 常规字重（§3-A 的 `:1451`）—— 同一份数据在小屏上「变小变细」，看起来像两个产品。
   本段只做一件事：把窄屏卡片的正文拉回与表格同档。

   ① `.unithmemd-patient .unithmemd-patient__row-card-line` 是本段**唯一**一条顶层规则
      （选择器两级 = 0-2-0）：§3-A 那条单类规则（`:1451`）**一个字没动**，本段靠
      「追加 + 更高特异性」压过它（与 §B8.4 压过 §F 是同一手法）。取值：
      `font-size: 15px` / `font-weight: 500` / `line-height: 1.5` —— 前两项与 §B8.4 的
      `__table` / `td` **逐字相同**（`:1785` 的 15px + `:1800` 的 500），行高 1.5 是文件里
      15px 正文的既有档位。`padding` 不用补：卡片容器（§3-A 的 `__row-card`，`:1436`）本来就是
      `16px` 内边距，不比表格格的 `14px 16px`（§B8.4 `:1799`）小 ⇒ 再加一条只会多一个空声明。

   ② 颜色**故意不动**：卡片第二 / 第三行仍是灰字 `#6b7280`、第一行 `<strong>` 仍是黑字 ——
      那是 §3-A 的分工（主行 = 陪诊者 / 医院，其余是次要信息），本段要修的是「变小变细」，
      不是配色；`<strong>` 自带的加粗照旧（比 500 更重，不在「变细」之列）。

   ③ 断点：那条 14px 只在**基础档**（手机）生效；`@media (min-width: 641px)` 里没有任何
      `__row-card*` 覆盖（`:882` 那一段只把 `__row-cards` 整块 `display: none` ⇒ 桌面只剩表格）
      ⇒ 本段不需要媒体查询、也不需要 `!important`（[E1] 两条红线都没动）。

   ④ 引用方：4a 批新落的 `templates/account/inquiries.php` 的 `__row-cards` 直接吃到本段；
      `templates/account/quotes.php` 的窄屏卡片（B8.5 批）**同一个类**，一并被拉齐 ——
      两页同一把尺子，这正是本段想留下的效果（报价页窄屏也顺带修正）。

   段界：本段**不进 §3-A**（`:1402`–`:1459` 那六条规则的选择器清单被 [3-A] 判据逐条钉着）、
   也不进 §B8.4（那一族是 `__table` 族 + 壳上的字体栈）、不进 §B8.5（那一族是
   `__row-card-actions`）—— 各批的样式各归各段，既有各段一个字未改。
   红线照旧：[E1] 选择器一律以 `.unithmemd-patient` 打头、零 `!important`、零 `max-width`
   媒体查询；本段零 `transition`（不引新动效）、不新增 token（15px / 500 / 1.5 都是文件里
   已有的量级与取值）。
   ========================================================================== */

/* ① 窄屏卡片正文：与 §B8.4 的表格正文同档（15px / 500），行高 1.5 */
.unithmemd-patient .unithmemd-patient__row-card-line {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
}

/* ==========================================================================
   §3-A.1 报价明细展开行 / 展开区 + 隐藏按钮（3-A.1 + 3-A.2 批，2026-10-10；
   **追加于既有 1901 行（§B8.6 段尾）之后**）
   --------------------------------------------------------------------------
   由来：`/my-account/quotes/` 那一页的 `View` 从「纯文字占位」变成**真按钮**（`<button>`），
   并且切出一块明细来 —— 桌面是主行下面那条 `<tr class="unithmemd-patient__quote-detail">`，
   窄屏是卡片里的 `__row-card-detail`。按钮化是这次观感的主要风险：`<button>` 自带 UA 的
   `border` / `background` / `padding` / 字号，不收拾就是一个灰底小方块（与 §3-A 想要的那颗
   「纯文字、灰→黑」相去甚远）⇒ 本段第一条规则就是**按钮复位**。

   为什么复位规则的选择器是 `.unithmemd-patient .unithmemd-patient__quote-action`（两级）：
   §3-A 那条单类规则（`:1403` 区）被 `verify-phase2.js` 判据 125 **精确**钉着
   （`QA_SELS` 里恰好六条、`.unithmemd-patient__quote-action` 全表只此一条）—— 就地改它会把
   一条历史断言逼着改；两级选择器是**另一个**字符串 ⇒ §3-A 六条一个字未动，本段靠
   「追加 + 更高特异性」只补那几条复位声明（颜色仍由 §3-A 提供：灰字 → hover 黑）。
   同理，本段所有规则都**不碰**既有六条 / §B8.4 / §B8.5 / §B8.6 的选择器。

   表格里那条明细行要吃掉 §B8.4 给表格格的 `padding: 14px 16px`（内边距由
   `__quote-detail-inner` 自己带）：两条选择器**特异性相同**（0-2-1），本段在文件更后面
   ⇒ 后写胜出（与 §B8.4 压过 §F 是同一套机制）。

   红线照旧（[E1]）：选择器一律以 `.unithmemd-patient` 打头、零 `!important`、零 `max-width`
   媒体查询；本段**零 `transition`**（开 / 关只切 `hidden`，不引新动效 ⇒ 用不着 §10 的
   `prefers-reduced-motion` 覆盖，与 §3-A / §3-B / §B8.4 / §B8.5 / §B8.6 同款）；
   本段**不新增 token**（颜色 / 间距全部是文件里已有的字面量：`#f9fafb` / `#e5e7eb` /
   `#6b7280` / `#111` / `16px` / `8px` / `12px`；`Delete` 那颗按钮直接照 §3-B 的
   `__fav-remove-btn`（灰字 + 浅框 → hover 黑）—— 同一个「移除」语义在两页不该长两个样）。
   B11.1 批唯一的两处**新字面量**是 `#fafbfc`（⑥⑦ 那张小表的表头极浅底）与 `#eef2f7`
   （§B11 正文里 `<code>` 的底）—— 各只出现一次、只服务那一处观感，仍**零**
   `--unithmemd-patient-*` 自定义属性（判据按「零自定义属性」量，与既有各段同一把尺子）。

   **B11.1 批（2026-10-11）**：本段从 10 条加到 **14 条**顶层规则 —— ⑥⑦⑧ 按原型与 §B8.4 的
   大表对齐（表字号 14px → 15px、表头 `12px 16px` + 大写 + `0.03em` 字距 + `#fafbfc` 底 +
   下框线、正文格 **16px** 行高 + `vertical-align: top` + `font-weight: 500` + 下框线换成浅一档的
   `#f3f4f6`、表格补 24px 下外边距），⑨–⑫ 是新增的**列宽与换行**四条（项目名 40%、其余各 20%；
   项目名可换行 + 右侧 24px 间距、三列数字 `nowrap`），旧 ⑨⑩ 顺延为 ⑬⑭（那两条一字未动）。
   取值的单一事实来源：本段（判据 203）+ B11.1 的增量（判据 211）。

   **B13.3.2 批（2026-10-16）**：本段 ② 补 `td:first-child` 那半边、⑥ 补 `table-layout: fixed`、
   ⑪ 补 `overflow-wrap: break-word`（**3 条**规则就地加选择器 / 加声明 ⇒ 顶层规则数仍 **14 条**）。
   与 B13.3.1 批（§B13.3）**同一个根因**：明细那格虽然 `colspan="8"`、**仍是本行的第一个 `td`**
   ⇒ 被 §B8.4 ⑥（0,3,1）钉上 `width` / `min-width: 60px` / `padding-left: 16px` /
   `white-space: nowrap`，而 ② 原来那条只有 **0,2,1** ⇒ 四条全漏进明细（`nowrap` 还是**继承**
   属性 ⇒ 一路传进小表与 `Services` / `Message` 的正文）。② 拉平为**同为 0,3,1 且位置在后**
   ⇒ 四条一起归零；⑥ 的 `fixed` 让 ⑨–⑫ 的百分比列宽真正生效（`auto` 下 `40%` 只是建议值）、
   ⑪ 的 `overflow-wrap` 才落得下去。**§B8.4 一字未动**。上面「两条选择器特异性相同（0-2-1）」
   那句从此只对**除第一个 `td` 以外**的格子成立。
   断言：判据 203 逐条取值 +4（`td:first-child` 那半边的 `width` / `min-width` / `padding` /
   `white-space`）+ 两条**加严**（与 §B8.4 ⑥ 特异性相等 + 位置在后）+ ⑥ 的 `table-layout`，
   判据 211 加 `overflow-wrap`；**判据条数不变**（仍 267–278、合计 1026 断言）。
   ========================================================================== */

/* ① `View` / `Hide` 那颗按钮的复位（UA 的边框 / 底色 / 内边距全退掉，只留 §3-A 的字色） */
.unithmemd-patient .unithmemd-patient__quote-action {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
}

/* ② 桌面那条明细行：内边距归零（改由 `-inner` 承担；内边距在 `td` 上会与 §B8.4 的 14px 叠加）。
      **B13.3.2 批（2026-10-16）**：明细那格虽然 `colspan="8"`、**仍是本行的第一个 `td`** ⇒ 同时命中
      §B8.4 ⑥ `.unithmemd-patient .unithmemd-patient__table td:first-child`（特异性 **0,3,1**），
      原来那条（只写 `td`、**0,2,1**）连 `padding-left: 16px` 都压不住（灰底左边多缩进 16px），
      `width` / `min-width: 60px` 与**继承**下来的 `white-space: nowrap` 也一起漏进明细
      （`nowrap` 是继承属性 ⇒ 一路传进小表与 `Services` / `Message` 的正文）。
      补齐 `td:first-child` 那半边 ⇒ 与 §B8.4 ⑥ **同为 0,3,1**、本段**位置在后**（后写胜出）⇒
      §B8.4 压下来的四条一起归零；**§B8.4 一字未动**（与 B13.3.1 批同一套修法）。 */
.unithmemd-patient .unithmemd-patient__quote-detail td,
.unithmemd-patient .unithmemd-patient__quote-detail td:first-child {
    width: auto;
    min-width: 0;
    padding: 0;
    white-space: normal;
}

/* ③ 明细内容区：浅灰底 + 16px 内边距（与 §3-A 的卡片同一档内边距、同一档圆角） */
.unithmemd-patient__quote-detail-inner {
    padding: 16px;
    background: #f9fafb;
    border-radius: 8px;
}

/* ④ 明细里的小标题（Treatments / Services / Message / Contact）：与 §B8.4 的表头同观感 */
.unithmemd-patient__quote-detail-heading {
    margin: 16px 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: #111;
}

/* ⑤ 第一块标题不带上外边距（贴住内容区顶部，不要多出 16px 的空白） */
.unithmemd-patient__quote-detail-heading:first-child {
    margin-top: 0;
}

/* ⑥ 明细里那张小表（Procedure / Price / Qty / Subtotal）：撑满宽度、不画外围框。
      **B11.1 批（2026-10-11）改过这一条与 ⑦⑧**（用户反馈「行太矮 / 列挤 / PROCEDURE 与
      PRICE 粘一起」⇒ 表格整体放大一档、松一档，与 §B8.4 的大表 **同观感**：字号 14px → **15px**、
      表头内边距拉到 `12px 16px`、正文格内边距拉到 **16px**、多一条 24px 下外边距把表格与
      下一节（Services / Message / Contact）分开）。
      **B13.3.2 批（2026-10-16）补 `table-layout: fixed`**：⑨–⑫ 的列宽是百分比，只有 `fixed`
      才按声明分栏（默认的 `auto` 下 `width: 40%` 只是「建议值」—— 长项目名会把那一列撑宽、
      把右侧三列压扁，⑪ 的 `overflow-wrap: break-word` 也就无处生效）。 */
.unithmemd-patient__quote-detail-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 15px;
    margin: 0 0 24px;
}

/* ⑦ 小表表头：13px / 600 / 灰字（与 §B8.4 的大表头 `th` **逐字同档**：`12px 16px` 内边距 +
      大写 + `0.03em` 字距）、加一层极浅底 `#fafbfc` 与一条下框线 ⇒ 表头成「一条」而不是
      「第一行」。`letter-spacing` / `text-transform` 取自 §B8.4（`:1793` 一带），不是新档位。 */
.unithmemd-patient__quote-detail-table th {
    padding: 12px 16px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #6b7280;
    background: #fafbfc;
    border-bottom: 1px solid #e5e7eb;
}

/* ⑧ 小表正文格：行与行之间一条浅线。**B11.1 批**把线从 `border-top: #e5e7eb`（与表头下框线
      同深度 ⇒ 表头下面双双线）换成 `border-bottom: #f3f4f6`（浅一档，只做行与行的分隔）；
      行高从 6px 松到 **16px**，并补 `vertical-align: top` / `font-weight: 500` / `line-height: 1.5`
      —— 与 §B8.4 的大表正文格同一套（那边是 `14px 16px`，明细小表窄一档、行高一致）。 */
.unithmemd-patient__quote-detail-table td {
    padding: 16px;
    vertical-align: top;
    font-weight: 500;
    color: #111;
    border-bottom: 1px solid #f3f4f6;
    line-height: 1.5;
}

/* ⑨⑩ 列宽（**B11.1 批**新增；原型的四列比例：项目名 40%，单价 / 数量 / 小计各 20%）。
      表头与正文格同一套比例 —— `border-collapse: collapse` 下两行都写才稳。 */
.unithmemd-patient__quote-detail-table th:nth-child(1),
.unithmemd-patient__quote-detail-table td:nth-child(1) {
    width: 40%;
}

.unithmemd-patient__quote-detail-table th:nth-child(2),
.unithmemd-patient__quote-detail-table td:nth-child(2),
.unithmemd-patient__quote-detail-table th:nth-child(3),
.unithmemd-patient__quote-detail-table td:nth-child(3),
.unithmemd-patient__quote-detail-table th:nth-child(4),
.unithmemd-patient__quote-detail-table td:nth-child(4) {
    width: 20%;
}

/* ⑪ 项目名那列允许换行（长名称不再把右侧三列挤成一条），右侧留 24px 间距 ——
     「PROCEDURE 与 PRICE 粘一起」的正解是**两列之间要有空气**，不是把整列写死 `nowrap`。
     **B13.3.2 批（2026-10-16）补 `overflow-wrap: break-word`**：项目名里带括号 / 连写的长串
     （`Wisdom Tooth Removal (Extraction) (1pc)` 这类）按词内断行，配合 ⑥ 的
     `table-layout: fixed` 才把 40% 那一列真正钉住。 */
.unithmemd-patient__quote-detail-table td:nth-child(1) {
    white-space: normal;
    padding-right: 24px;
    overflow-wrap: break-word;
}

/* ⑫ 单价 / 数量 / 小计三列不换行（数字被折行最难读）；余下的宽度由 ⑨⑩ 的比例分配 */
.unithmemd-patient__quote-detail-table td:nth-child(2),
.unithmemd-patient__quote-detail-table td:nth-child(3),
.unithmemd-patient__quote-detail-table td:nth-child(4) {
    white-space: nowrap;
}

/* ⑬ 服务项 / 联系方式的列表（紧凑一点：明细块不是正文，行距按 1.5 走） */
.unithmemd-patient__quote-detail-list {
    margin: 0;
    padding-left: 18px;
    font-size: 14px;
    line-height: 1.5;
    color: #111;
}

/* ⑭ 留言那一段（`<p>`；上下留白靠 ④ 的 margin，这里只把段落自身的外边距清掉） */
.unithmemd-patient__quote-detail-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #111;
}

/* ==========================================================================
   §B10 「我的咨询」的平台回复（B10 批，2026-10-11；**追加于既有 2005 行（§3-A.1 段尾）之后**）
   --------------------------------------------------------------------------
   由来：门户后台回一条咨询 ⇒ 患者在 `/my-account/inquiries/` 那条记录下面**看得见回话**。
   数据侧在 `Unithmemd_Patient_Inquiries::get_replies_for_inquiries()`（一次批量查询，按
   `inquiry_id` 附到每行的 `replies` 键上，见类注释的 B10 段），本段只管画。

   两套版式共用**同一份 DOM**：桌面渲染成一整行 `<tr class="…__inquiry-replies-row">` +
   `<td colspan="6">`（与 §3-A.1 报价明细那条 `<tr>` 同一手法），窄屏渲染在卡片末尾
   （`__row-card` 里面）—— 由 §H 的断点决定谁可见，零 JS（账户页零 JS 主线）。

   十一条规则（①–⑪）：
   ① `.__inquiry-replies-row td`：内边距归零（改由 ② 自己承担）—— §B8.4 给表格格的
      `padding: 14px 16px`（`:1799`）会和 ② 的内边距叠成双层空白；两条选择器特异性同为 0-2-1，
      本段在文件更后面 ⇒ 后写胜出（与 §3-A.1 的 `__quote-detail td` 压过 §B8.4 是同一机制）。
      §B8.4 ⑦ 的整行 hover（`background: #f9fafb`）落在这一行上，只是把 `td` 底色刷成与 ② **同值**的
      灰 ⇒ 看起来没有变化（不为它多写一条规则）。
   ② `.__inquiry-replies`：回复区容器 —— 浅灰底 + 16px 内边距 + 8px 圆角（`#f9fafb` / 16px / 8px
      与 §3-A.1 的 `__quote-detail-inner` 同一档），把「我的问题」与「平台回话」在视觉上分成两块。
   ③ `.__inquiry-reply + .__inquiry-reply`：**第二条起**画一条浅线 + 12px 上间距（线色与 §B8.4 的行线
      同值 `#e5e7eb`）—— 单条回复不画线、不带多余上边距。
   ④ `.__inquiry-reply-header`：一行 flex（头像 / 名字 / 勋章 / 时间），`flex-wrap: wrap` 让窄屏
      放不下时**换行**而不是把那个圆挤出容器；`gap: 8px` 是文件里既有的间距档位。
   ⑤ `.__inquiry-reply-avatar`（28px 圆盘）+ ⑥ `…-avatar svg`（`Icons::user()` 自带 24×24 ⇒ 缩到
      16px、留 6px 环边）：写法照抄 §A 那颗 `__avatar-circle`（`inline-flex` + 居中 +
      `background: #f3f4f6` + `color: #111` 给 `stroke="currentColor"` 定色），只是小一号 ——
      不引外部图片、不猜门户的静态资源路径（线上路径跟域名 / 版本走，猜错就是一个 404）。
   ⑦ `.__inquiry-reply-name`：14px / 600 / 黑（`#111`）—— 与 §B8.4 的表头同一档字号加粗，名字要压得住正文。
   ⑧ `.__inquiry-reply-badge`：认证勋章 —— 16px 蓝底（`#1d9bf0`）圆 + 白 `✓`（字形在模板里，
      样式只给底）。这是本段**唯一一个新颜色**：品牌蓝是**语义色**（平台官方回话），与
      `--unithmemd-patient-*` 那套中性色 token 不同类 ⇒ 按字面量写在规则里（§3-A–§3-B / §B8.4–§B8.6
      的「不新增 token」约束的是中性色那一族，不得凭空造 token，与此不冲突）。
   ⑨ `.__inquiry-reply-time`：13px / 灰（`#6b7280`）/ `margin-left: auto` 贴右 —— 字号与 §B8.4 的表头
      同档；贴右是为了让「谁说的」靠左、「什么时候」靠右，一眼分得开。
   ⑩ `.__inquiry-reply-content`：回复正文 —— 14px / 1.5 / 黑。`white-space: pre-wrap` 把原文里的换行
      还回来：管理员可能分行写，过了模板的 `esc_html()` 之后换行会被 HTML 吃掉（`pre-wrap` 保留换行
      与连续空格，且照常自动折行 —— 不是 `pre`，长句不会顶出容器）。
   ⑪ `.unithmemd-patient__row-card .…__inquiry-replies`（只对窄屏卡片生效的上间距）：卡片里回复块紧跟
      在 `__row-card-actions`（§B8.5）后面，不隔开就贴在一起；桌面那一版**不加**这一层间距
      （表格行自带 `14px 16px` 内边距，再加就成了空档）⇒ 两级选择器只匹配卡片里的那一份。

   段界：本段**不进 §3-A / §3-B / §B8.4 / §B8.5 / §B8.6 / §3-A.1**（那几段的选择器清单被各批判据逐条
   钉着），既有各段一个字未改。

   红线照旧（[E1]）：选择器一律以 `.unithmemd-patient` 打头、零 `!important`、零 `max-width`
   媒体查询；本段**零 `transition`**（回复区是静态内容，不引新动效 ⇒ 用不着 §10 的
   `prefers-reduced-motion` 覆盖，与 §3-A / §3-B / §B8.4–§B8.6 同款）；颜色只新增 ⑧ 那一个品牌蓝，
   其余取值（`#f9fafb` / `#f3f4f6` / `#e5e7eb` / `#111` / `#6b7280` / `#fff` / 8px / 12px / 16px /
   13px / 14px）都是文件里已有的字面量；两个新用法（⑨ 的 `margin-left: auto` 与 ⑩ 的
   `white-space: pre-wrap`）已在对应规则里写明理由。
   ========================================================================== */

/* ① 回复那一整行：内边距归零（改由 ② 承担 —— 留在 `td` 上会与 §B8.4 的 14px 叠加） */
.unithmemd-patient .unithmemd-patient__inquiry-replies-row td {
    padding: 0;
}

/* ② 回复区容器：浅灰底 + 16px 内边距 + 8px 圆角（与 §3-A.1 的明细块同一档） */
.unithmemd-patient__inquiry-replies {
    padding: 16px;
    background: #f9fafb;
    border-radius: 8px;
}

/* ③ 多条回复之间才画线（`+` 只作用于「第二条起」；单条不画线、不带多余上边距） */
.unithmemd-patient__inquiry-reply + .unithmemd-patient__inquiry-reply {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
}

/* ④ 回复头一行：头像 / 名字 / 勋章 / 时间（窄屏放不下就换行，不挤坏那个 28px 的圆） */
.unithmemd-patient__inquiry-reply-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* ⑤ 头像盘：28px 圆 + 居中（写法照 §A 的 `__avatar-circle`，只是小一号） */
.unithmemd-patient__inquiry-reply-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f3f4f6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #111;
    flex-shrink: 0;
}

/* ⑥ 盘里那颗图标（`Icons::user()` 自带 24×24）缩到 16px：写子选择器、不动常量串里的属性 */
.unithmemd-patient__inquiry-reply-avatar svg {
    width: 16px;
    height: 16px;
}

/* ⑦ 名字：14px / 600 / 黑（与 §B8.4 的表头同档字号加粗，压得住下面的正文） */
.unithmemd-patient__inquiry-reply-name {
    font-size: 14px;
    font-weight: 600;
    color: #111;
}

/* ⑧ 认证勋章：16px 蓝底圆（品牌蓝 `#1d9bf0`）+ 白 `✓`（字形在模板里，样式只给底） */
.unithmemd-patient__inquiry-reply-badge {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #1d9bf0;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    flex-shrink: 0;
}

/* ⑨ 时间：13px 灰字，`margin-left: auto` 贴右（「谁说的」靠左、「什么时候」靠右） */
.unithmemd-patient__inquiry-reply-time {
    margin-left: auto;
    font-size: 13px;
    color: #6b7280;
}

/* ⑩ 正文：14px / 1.5 / 黑；`pre-wrap` 把管理员分行写的换行还回来（转义之后换行会被 HTML 吃掉） */
.unithmemd-patient__inquiry-reply-content {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.5;
    color: #111;
    white-space: pre-wrap;
}

/* ⑪ 窄屏卡片里给回复区留一层上间距（桌面那一版不加：表格行自带 14px 内边距，再加就成空档） */
.unithmemd-patient__row-card .unithmemd-patient__inquiry-replies {
    margin-top: 12px;
}

/* ==========================================================================
   §B11 「我的报价」的平台回复（B11 批，2026-10-11；**追加于既有 2146 行（§B10 段尾）之后**）
   --------------------------------------------------------------------------
   由来：Queeny 在医院插件后台回一条报价 ⇒ 患者在 `/my-account/quotes/` 展开那块明细里**看得见回话**。
   数据侧在 `Unithmemd_Patient_Quotes::get_replies_for_quotes()`（一条批量查询，按 `quote_id` 附到每行
   的 `replies` 键上，见类注释的 B11 段），本段只管画。

   与 §B10 的关系：**两块回复区的观感必须同形**（同一个平台客服、同一个页面族），所以尺寸 / 字重 /
   灰阶 / 品牌蓝都取 §B10 那几个既有字面量；但**类名各自一套**（`__quote-reply*` vs `__inquiry-reply*`），
   段落也独立 —— 两块回复区的 DOM 挂在不同容器里（一个是表格 <tr>，一个是明细块里的 <div>），
   共用一套类名只会让以后改一处必须先读两处上下文。

   位置：两块回复区都渲染在**手风琴展开区内部**（桌面 `__quote-detail-inner`、窄屏 `__row-card-detail`），
   所以本段**不需要** §B10 ⑪ 那种「窄屏卡片单独补间距」的两级选择器 —— 展开区本来就带 16px 内边距。

   规则（①–⑪；**B11.1 批（2026-10-11）在本段就地重定尺寸与排布** —— 用户反馈「头像 / 名字 /
   时间都太小」⇒ 头像 28px → **40px**、名字 14px → **15px**、正文 14px → **15px** 并加一个浅底
   色块（回复正文与上面的表格在视觉上分得开）、勋章 16px → 18px；原先那条「第二条起画分隔线」的
   兄弟选择器**退场** —— 同一件事（把两条回复分开）只留一种做法：③ 的 20px 下间距 + ⑨ 的底块，
   不再「线 + 间距」双份）：
   ① `.__quote-replies`：与明细块里其它小节分开的一条浅线 + 上间距（「Treatments / Services / Message /
      Contact」之后多一段「Replies」，靠这条线而不靠空行；线色与 §B8.4 / §3-A.1 同值）；
   ② `.__quote-replies h3` / `h4`：本段的小标题比明细块里其它小标题**大一档**（18px / 700）——
      回复是这个展开区里「后到的、要看的」内容，与上面那几节静态明细不是一个层级；
      模板里用的是 `h4.__quote-detail-heading`，本条特异性更高且在文件更后面 ⇒ 后写胜出，
      而 §3-A.1 ⑤ 的 `:first-child { margin-top: 0 }` 仍压住 ② 的 `margin` ⇒ 贴顶不留空；
   ③ `.__quote-reply`：每条回复的下间距（B11.1 起由它代替「第二条起画线」，单条回复也一样留白）；
   ④ `.__quote-reply-header`：头像 / 名字 / 勋章 / 时间一行排开（`gap: 10px` + 10px 下间距），
      窄屏放不下就换行（不把那个 40px 的圆挤出容器 —— `flex-wrap: wrap` 是 B11.1 **保留**的既有
      安全声明：原型片段里没写，这里不删，删了窄屏就没有兜底）；
   ⑤ `.__quote-reply-avatar`：40px 圆 —— 运营头像是一张**方图**（393×400），所以圆角 + `object-fit: cover`
      裁成圆盘，且宽高写死在规则里（`<img>` 上的 `width` / `height` 属性只防抖；B11.1 把属性同步到
      40，防抖期不留 28 → 40 的一次跳变）；
   ⑥ `.__quote-reply-name`（15px / 600 / #111）、⑦ `.__quote-reply-badge`（**18px 蓝底圆** `#1d9bf0`
      + 白 `✓` + `flex-shrink: 0` —— 原型那份片段把勋章当**图标**写（只给宽高与 `color`），
      但本插件的 DOM 是一个 `✓` 字形 `<span>`，照那样写会退化成「没有圆底的蓝勾」⇒ 这里保留圆底，
      只把尺寸从 16px 加到 18px）、⑧ `.__quote-reply-time`（13px `#6b7280` + `margin-left: auto` 贴右）、
      ⑨ `.__quote-reply-content`（15px / 1.6 / #111 + 浅底 `#f9fafb` + 10px 圆角 + `padding: 14px 16px`
      + `margin-left: 50px` 与头像（40 + 10）对齐 + `white-space: pre-wrap` + `word-break: break-word`）：
      B11.1 起正文是一块**可读的卡片**，不再只是裸文字。
      **注意**：展开区自己的底也是 `#f9fafb`（§3-A.1 ③）⇒ 桌面上这块底与容器同色，只靠内边距与圆角
      成形；要更强对比就把 ⑨ 的 `background` 换成 `#f3f4f6` 或 `#fff`（一处改动）；
   ⑩ `.__quote-reply-content a` / ⑪ `.__quote-reply-content code`：正文里被 `make_clickable()` 转成
      链接的 URL 与管理员写的行内代码各自的观感（链接品牌蓝 `#1d9bf0` + 下划线、代码 `#eef2f7` 底）。
      **这两条必须有**：模板侧正文走 `esc_html()` ⇒ `make_clickable()` ⇒ `wp_kses_post()`
      （判据 216 / 217），正文里出现 `<a href>` 是**常态**，样式不给就是一颗浏览器默认蓝链接。

   与 §B10 的关系（B11.1 之后）：**两块回复区仍是同一套骨架**（头部一行 flex、贴右时间、转义后的
   正文原样换行），但**尺寸各按本页重定** —— B11.1 把「报价展开区」这一份整体放大（40px 头像 /
   15px 名字与正文 / 18px 勋章），§B10 那一段**一字未动**。所以判据 210 里原先那组「跨段取值逐对
   同值」的比较**已按设计退场**，换成逐条钉本段自己的取值（判据 210 + 211）—— 这不是放宽：
   每个取值仍被精确钉着，只是不再要求与另一页相等。

   [E1] 红线：一律以 `.unithmemd-patient` 打头、零 `!important`、零 `max-width` 媒体查询（本段不引断点：
   两块回复区在两种版式里长得一样）；本段零 `transition`（回复区是静态内容，不做动效）；
   不新增 token（不留 `--unithmemd-patient` 自定义属性；B11.1 只新引一个**字面量** `#eef2f7`（⑪））。
   ========================================================================== */

/* ① 回复区：与明细块上方那几节之间一条浅线（同一块浅灰底里分层靠线，不靠空行；B11.1 起间距各 +8 / +4px） */
.unithmemd-patient__quote-replies {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
}

/* ② 小标题：比明细块里其它小标题大一档（B11.1 批新增；`h4` 与 `h3` 都写 —— 模板现在用 `h4`，
      留 `h3` 是为了以后换成更高层级的标题时样式不掉） */
.unithmemd-patient__quote-replies h3,
.unithmemd-patient__quote-replies h4 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 16px;
    color: #111;
}

/* ③ 每条回复的下间距（B11.1 批起**代替**「第二条起画分隔线」：块自身留白，单条与多条一视同仁） */
.unithmemd-patient__quote-reply {
    margin: 0 0 20px;
}

/* ④ 头部一行：头像 / 名字 / 勋章 / 时间（`flex-wrap` 保留 ⇒ 窄屏换行，不把 40px 的圆挤出容器；
      B11.1 起 gap 10px、下留 10px） */
.unithmemd-patient__quote-reply-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
}

/* ⑤ 运营头像盘（B11.1 起 **40px**）：方图裁圆 + 定尺寸；宽高与模板里 `<img>` 的 `width` / `height`
      属性同值（属性只防抖，尺寸的单一来源是这里）。想要「图片没来时也是个灰圆」就在下面补一行
      `background: #f3f4f6`（原型那份片段没给，本段照原型留空）。 */
.unithmemd-patient__quote-reply-avatar {
    display: block;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

/* ⑥ 名字：平台口径（写死在模板里）；B11.1 起 15px */
.unithmemd-patient__quote-reply-name {
    font-size: 15px;
    font-weight: 600;
    color: #111;
}

/* ⑦ 认证勋章：品牌蓝圆底 + 白 ✓（✓ 字形在模板里，样式只给底）。B11.1 起 **18px** ——
      原型那份片段把勋章当**图标**写（只给 `width` / `height` / `color`），而本插件的 DOM 是
      `<span>✓</span>`：`display: inline-flex` / 圆角 / 底色 / 白字这四条必须留着，否则
      `width` / `height` 会在行内元素上失效、退化成「一颗没有圆底的蓝勾」。 */
.unithmemd-patient__quote-reply-badge {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #1d9bf0;
    color: #fff;
    font-size: 13px;
    line-height: 1;
}

/* ⑧ 时间贴右：谁说的靠左、什么时候靠右 */
.unithmemd-patient__quote-reply-time {
    margin-left: auto;
    font-size: 13px;
    color: #6b7280;
}

/* ⑨ 正文（B11.1 起是一块**浅底卡片**）：左边缘与头像对齐（40px 头像 + 10px gap = **50px**），
      行距 1.6；管理员分行写的换行照原样显示（`pre-wrap`），长串（URL / 无空格串）强制折行。
      **已知观感**：展开区自己的底也是 `#f9fafb`（§3-A.1 ③）⇒ 桌面上这块底与容器同色，只靠
      内边距与圆角成形；要更强对比就把下面这行 `background` 换成 `#f3f4f6` / `#fff`（一处改动）。 */
.unithmemd-patient__quote-reply-content {
    margin: 0 0 0 50px;
    padding: 14px 16px;
    background: #f9fafb;
    border-radius: 10px;
    font-size: 15px;
    line-height: 1.6;
    color: #111;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ⑩ 正文里的链接：模板侧走 `esc_html()` ⇒ `make_clickable()` ⇒ `wp_kses_post()`（判据 216 / 217），
      所以正文里出现 `<a href>` 是**常态** —— 不给样式就是一颗浏览器默认蓝链接。
      品牌蓝与勋章同值，`underline` 明确「可点」 */
.unithmemd-patient__quote-reply-content a {
    color: #1d9bf0;
    text-decoration: underline;
}

/* ⑪ 正文里的行内代码：`<code>` 默认等宽字体没有底 ⇒ 给一层浅底（`#eef2f7`）与圆角内边距 */
.unithmemd-patient__quote-reply-content code {
    background: #eef2f7;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ==========================================================================
   §B11.3 未读小点（列表页逐条）+ 气泡改色（B11.3 批，2026-10-11；
   **追加于既有 2370 行（§B11 段尾）之后**）
   --------------------------------------------------------------------------
   用户口径三件事：① 气泡那颗红 `#dc2626` 太刺眼 ⇒ 换成橘黄 `#f59e0b`；
   ② 只有账户首页那张大卡片有提示、列表页每条什么也看不出来 ⇒ 每条报价补一颗小点；
   ③ 「打开整页 = 全已读」太粗 ⇒ 改成「点开哪一条、哪一条才已读」（DOM / JS 那半在
      `templates/account/quotes.php` + `assets/js/account-quotes.js`，本段只管观感）。

   本段一共三条规则，逐条说明：

   ① `.unithmemd-patient__quote-dot`（基础规则，两套版式共用）：8px 圆点 + 橘黄。
      `display: inline-block` 是**必须**的（`<span>` 默认是行内盒，宽高对它不生效 ——
      少了这一条会看到「一个有颜色的小方块」都不算，而是一个 0×0 的隐形元素）；
      `vertical-align: middle` 让它在表格那一列与卡片第一行里都与旁边的文字齐腰。

   ② 桌面表格那两列的**定宽**（`__quote-dot-col` 16px / `__quote-num-col` 60px）：
      小点列插在 `#` **之前**，于是 `#` 不再是 `:first-child` —— §3-A.1 ⑥ 那条
      `.unithmemd-patient .unithmemd-patient__table td:first-child { width: 60px; … }`
      会落到小点列上。本段按**类名**（`th.…` / `td.…`，与那条同为 (0-3-1)、本段在文件更后面
      ⇒ 后写胜出）把两列的宽度各归各位：小点列 16px、`#` 列仍是原来的 60px + 16px 左内边距。
      为什么带 `.unithmemd-patient` 前缀：`.unithmemd-patient__table` 是三条子页共用的表格类，
      不带前缀的 `td:nth-child(2)` 会把预约 / 咨询那两张表的第二列一起改成 60px ——
      类名只出现在报价页的 DOM 里，这几条**天然只对报价页生效**。

   ③ `.…__row-card-line .…__quote-dot`：窄屏卡片里小点排在医院名**之前**，
      与后面那个 `<strong>` 之间留 8px（桌面那一列不需要 —— 它有自己的 16px 内边距）。

   气泡改色**不在本段**：`.unithmemd-patient__card-badge`（§C，一行 `background`）就地改值，
   规则位置 / 其余十二条取值一字未动 —— 段落位置也不动（它属于 §C 那套卡片观感）。
   本段零 `!important`、零 `max-width` 媒体查询（与全表同一条纪律）。
   ========================================================================== */
.unithmemd-patient .unithmemd-patient__table th.unithmemd-patient__quote-dot-col,
.unithmemd-patient .unithmemd-patient__table td.unithmemd-patient__quote-dot-col {
    width: 16px;
    min-width: 16px;
    padding: 0 0 0 16px;
    text-align: left;
    white-space: nowrap;
}

.unithmemd-patient .unithmemd-patient__table th.unithmemd-patient__quote-num-col,
.unithmemd-patient .unithmemd-patient__table td.unithmemd-patient__quote-num-col {
    width: 60px;
    min-width: 60px;
    padding-left: 16px;
    text-align: left;
    white-space: nowrap;
}

.unithmemd-patient__quote-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f59e0b;
    vertical-align: middle;
}

.unithmemd-patient__row-card-line .unithmemd-patient__quote-dot {
    margin-right: 8px;
}

/* ==========================================================================
   §B12.2 「我的报价」回复的附件（B12.2 批，2026-10-12；**追加于既有 2518 行（§B11.4 段尾）之后**）
   --------------------------------------------------------------------------
   由来：兄弟插件 B12.1 批给「报价回复」加了附件（`quote_replies.attachments` 那一列 JSON）——
   患者在 `/my-account/quotes/` 展开一条报价时，回复下面要看得见这些附件（图片看缩略图、
   其它文件看文件名 + 大小 + 下载）。数据侧在类里的 `parse_attachments()`（本段只管画）。

   位置：两块分别渲染在 §B11 每条回复的 `__quote-reply` 里、正文 `__quote-reply-content` **之后**
   ⇒ 本段的 `margin-left: 50px` 与 §B11 ⑨ 那个 50px **同值**（头像 40px + gap 10px）：
   附件与正文左边缘对齐（挂同一条竖线上）。

   本段八条规则，逐条说明：

   ① `.__quote-reply-attachments`（附件那一行）：`display: flex` + `flex-wrap: wrap` + `gap: 8px`
      —— 窄屏放不下自动换行（与 §B11 ④ 同一手法，**不引断点**）；`margin: 12px 0 0 50px` 是它与
      上面正文之间的呼吸（只加上边距：整体下间距仍由 §B11 ③ 那条 20px 收尾）。

   ② `.__quote-reply-attachment`（一个附件块；图片与文件共用外壳）：`inline-flex` + 8px 间距 +
      `padding: 8px 12px` + 白底 + `1px solid #e5e7eb` 描边 + 8px 圆角 —— 观感与 §B11 ⑨ 的正文块
      同族（浅块 + 细描边），但底色用 **#fff**（正文那一块是 `#f9fafb`，附件压在它外面、白底才分得开）；
      `color: #111` + `text-decoration: none` 抹掉浏览器默认蓝链接 —— 这个 `<a>` 是**块**，
      不是正文里的行内链接（后者由 §B11 ⑩ 管）。

   ③ `.__quote-reply-attachment:hover`：只改描边色（`#e5e7eb` → `#111`）—— 一个像素级的反馈，
      不位移、不变底色。**本段零 `transition`**：与 §B10 / §B11 / §B11.3 / §B11.4 同一条纪律
      （静态内容不做动效）；同时避开一个坑 —— 本段在文件**最后**，若给 `transition` 就得再补一条
      `prefers-reduced-motion` 覆盖（§10 那条 `.unithmemd-patient *` 特异性相同但更靠前，后写胜出
      会把它的 `transition: none` 盖掉）。

   ④ `.__quote-reply-attachment--image`（图片那一档）：`padding: 0` + `overflow: hidden` + 写死
      60px 见方 —— 缩略图是**小方块**，与 §B11 ⑤ 那个 40px 头像同一档视觉量级（附件是「小样」，
      不抢正文的位置）；`overflow: hidden` 是圆角的**必须**件（少了它 img 的直角会顶出 8px 圆角）。

   ⑤ `.__quote-reply-attachment--image img`：`width` / `height` 铺满 + `object-fit: cover`
      （方图裁满，不留白边）+ `display: block`（去掉行内图片基线那 4px 缝 —— 少了它 60px 的方块
      底下会露一条底色）。

   ⑥ `.__quote-reply-attachment-icon`（文件那一档的图标，模板里是一段 PDF 形状的 `<svg>`）：
      `inline-flex` 居中 + `color: #dc2626`（**PDF 红** —— 本段唯一一处红：「红 = 文件」是通用语义，
      与 §B11.3 那颗未读小点的橘黄不冲突）+ `flex-shrink: 0`（窄屏先挤文件名，不把图标压扁）。

   ⑦ `.__quote-reply-attachment-name`（文件名）：`font-weight: 500` —— 比正文轻一档、比后面那颗
      大小重一档（三者层次：正文 400 / 文件名 500 / 大小 400 + 灰）。

   ⑧ `.__quote-reply-attachment-size`（大小）：`12px` / `#6b7280`（与 §B11 ⑧ 那颗时间**同值** ——
      同一个页面里「次要信息」只用一种灰）。

   为什么不引断点 / 不用 `!important`：本段全是「一行 flex + 一个定宽方块」，窄屏由 `flex-wrap`
   自己处理（[E1] 红线：选择器一律以 `.unithmemd-patient` 打头、零 `!important`、零 `max-width`
   媒体查询）；也不新增 token（不留 `--unithmemd-patient` 自定义属性）。

   与 §B11 的关系：**不改 §B11 一个字**（那 11 条规则的选择器与取值一字未动）—— 本段只新增八个类，
   不覆盖既有任何一条（`__quote-reply-attachment*` 是家族里的**新名字**，与 `-content` / `-header` /
   `-avatar` / `-name` / `-badge` / `-time` 都不重叠）。
   ========================================================================== */

/* ① 附件那一行：flex 换行 + 与正文本体左对齐（50px 与 §B11 ⑨ 同值） */
.unithmemd-patient__quote-reply-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 0 50px;
}

/* ② 一个附件块（图片 / 文件共用外壳） */
.unithmemd-patient__quote-reply-attachment {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    color: #111;
    text-decoration: none;
    font-size: 13px;
}

/* ③ hover 只改描边色（零 transition —— 静态内容不做动效） */
.unithmemd-patient__quote-reply-attachment:hover {
    border-color: #111;
}

/* ④ 图片那一档：60px 方块（`overflow: hidden` 保住圆角） */
.unithmemd-patient__quote-reply-attachment--image {
    padding: 0;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    width: 60px;
    height: 60px;
}

/* ⑤ 缩略图本体：铺满 + `cover`（方图裁满，不留白边） */
.unithmemd-patient__quote-reply-attachment--image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ⑥ 文件那一档的 PDF 图标（红 = 文件） */
.unithmemd-patient__quote-reply-attachment-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #dc2626;
    flex-shrink: 0;
}

/* ⑦ 文件名 */
.unithmemd-patient__quote-reply-attachment-name {
    font-weight: 500;
}

/* ⑧ 大小（与 §B11 ⑧ 那颗时间同一种灰） */
.unithmemd-patient__quote-reply-attachment-size {
    color: #6b7280;
    font-size: 12px;
}

/* ==========================================================================
   §B13.3 预约页：状态徽章（四档配色）+ 明细行 / 卡片明细（B13.3 批 S3 步，2026-10-14；
   **追加于既有 2639 行（§B12.2 段尾）之后**）
   —— **B13.3.1 批（2026-10-16，上线后热修）**：明细小表两列分栏（70% / 30%）+ 价格右对齐 +
   拆掉 §B8.4 ⑥ 那句 `td:first-child` 继承下来的 `white-space: nowrap`（来龙去脉见下面 ④）
   --------------------------------------------------------------------------
   服务对象 = `templates/account/appointments.php` 输出的 DOM。列表骨架（`.unithmemd-patient__table`
   / `.unithmemd-patient__row-cards`）仍归 §F / §3-A / §B8.4 / §B8.5 / §B8.6，本段只补这一页
   **自己**的三件东西：

   ① 状态徽章（`__badge` 本体 + 四个修饰档）：`Status` 那一格（桌面表格）与卡片里那一行
      （`__row-card-line`）从纯文字换成一颗浅底小药丸 —— 几何只写一遍（基类），**只有颜色**分四档：
        - `--pending`  琥珀（`#fef3c7` 底 / `#92400e` 字）：申请表已提交、还没付定金；
        - `--paid`     绿（`#dcfce7` / `#166534`）：定金已付、等医院确认；
        - `--cancelled` 红（`#fee2e2` / `#991b1b`）：WC 订单被取消；
        - `--other`    灰（复用文件里已有的 `#f3f4f6` / `#6b7280`）：**未登记状态** ——
          `Unithmemd_Patient_Appointments::status_class()` 把将来新增的第四种状态收敛到这一档，
          颜色至少是「中性」，而不是「没有配色」。
      四档的**含义**单一事实来源在 `status_label()` 的注释里（PHP 侧），本段只管色值。

   ② 桌面明细行（`__appointment-detail`）：主行下面那条 `<tr>`（`colspan="10"`）默认 `hidden`，
      `View` 展开 / `Hide` 收起。内边距在那一格上归零（若吃 §B8.4 正文格的 `14px 16px`，
      留白会与 `-inner` 的 16px 叠成 30px）；真正的留白 / 浅灰底由 `-inner` 带 ——
      **与 §3-A.1 ③ / ④ / ⑤ 逐字同档**（`16px` + `#f9fafb` + `8px` 圆角；标题 `16px 0 8px` /
      `14px` / `600` / `#111`）：两页的明细块是同一件事，长得一样是刻意的。

   ③ 卡片明细（`__row-card-detail`，窄屏）：外层只补一条 `margin-top: 12px`（与 §B10 ⑪ 给回复块
      留缝同一条理由 —— 卡片里的两块要分得开）；块内**仍用 ② 的那几条类名**（`-inner` /
      `-heading` / `-list`），只有 `Treatments` 的排版不同（桌面那张小表 vs 窄屏 `-list` 一行
      一项）。宽 / 窄两份 DOM 同时存在，`hidden` 由脚本切（渐进增强：无 JS 时两块都不显示、
      列表与空态照常可读）。

   ④ **B13.3.1 批（2026-10-16，上线后的样式热修）**：桌面 `Treatments` 小表的两列不再「粘」在一起 ——
      现象是项目名一长（`Wisdom Tooth Removal (Extraction) (1pc)`）价格 `81USD` 就紧贴在名字后面、
      两列看不出分栏。**根因不在本段的小表三条**，而在 §B8.4 ⑥：它写的是
      `.unithmemd-patient .unithmemd-patient__table td:first-child`（特异性 0,3,1），而明细那一格虽然
      `colspan="10"`、**仍是本行的第一个 `td`** ⇒ 被钉上 `width / min-width: 60px`、
      `padding-left: 16px` 与 **`white-space: nowrap`**；`nowrap` 是继承属性，会一路传进明细里那张
      小表的每个格子 ⇒ 项目名不能换行、一路顶过去把价格列挤成零宽（本段原来那条 ③ 是 0,2,1，
      连 `padding-left: 16px` 都没压住 —— 灰底左边还多缩进 16px）。
      修法两件、全在本段内（**§B8.4 一字未动**）：③ 把 `td:first-child` 那半边补进选择器、把 §B8.4 ⑥
      压下来的四条一起归零（拉成同为 0,3,1、位置在后 ⇒ 后写胜出，与 §3-A 那条「同优先级后写胜出」
      同一口径）；小表补 ⑩⑪ 两条列规则（70% / 30% + `table-layout: fixed` + 价格右对齐 + 换行口径，
      照 §3-A.1 ⑨–⑫ 的路子 —— 那边 B11.1 批已经因为「PROCEDURE 与 PRICE 粘一起」走过一遍同样的路）。

   取值来源（[E1] 红线照旧）：小表三条（`-table` / `-table th` / `-table td`）照 §3-A.1 ⑥⑦⑧
   逐字抄，**只去掉**表头那层极浅底 `#fafbfc` —— 那个字面量被判据 211 钉成「全表只出现一次」，
   只服务报价明细那张小表；这里表头落在 `-inner` 的 `#f9fafb` 上，不铺底色也读得清。
   **B13.3.1 批**再加两条（⑩⑪）：列宽 70% / 30%（配 ⑦ 的 `table-layout: fixed`）、价格列
   `text-align: right` + `white-space: nowrap`、项目名列 `padding-right: 24px` + `overflow-wrap: break-word`
   —— 逐条与 §3-A.1 ⑨–⑫ 同档（`70% / 30%` 是两列版的 `40% / 20%`），**不引新档位**。
   选择器一律以 `.unithmemd-patient` 打头、零 `!important`、零 `max-width` 媒体查询、零 `:root`；
   本段**零 `transition`**（开 / 关只切 `hidden`，不引新动效 ⇒ 不必再写 §10 那套
   `prefers-reduced-motion` 覆盖，与 §3-A.1 / §B10 同款）、零自定义属性。
   ========================================================================== */

/* ① 徽章本体：一颗浅底小药丸（几何只写这一遍，四档只改 ② 那两组色值） */
.unithmemd-patient__badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}

/* ② 四档配色（含义见段头 ①；未登记状态收敛到 `--other` 灰档） */
.unithmemd-patient__badge--pending {
    color: #92400e;
    background: #fef3c7;
}

.unithmemd-patient__badge--paid {
    color: #166534;
    background: #dcfce7;
}

.unithmemd-patient__badge--cancelled {
    color: #991b1b;
    background: #fee2e2;
}

.unithmemd-patient__badge--other {
    color: #6b7280;
    background: #f3f4f6;
}

/* ③ 桌面明细行那一格：内边距归零 + 把 §B8.4 ⑥ 压在它身上的那四条一并归零（与 §3-A.1 ② 同一处置
      —— 留白交给 ④ 的 `-inner`，不与 §B8.4 正文格的 `14px 16px` 叠加）。
      ⚠️ **B13.3.1 批**补 `td:first-child` 那半边：这一格虽然 `colspan="10"`，但它**仍是本行的第一个
      `td`** ⇒ `.unithmemd-patient .unithmemd-patient__table td:first-child`（§B8.4 ⑥，特异性 0,3,1）
      照样命中它 —— `width / min-width: 60px`、`padding-left: 16px`、`white-space: nowrap` 就那样压在
      原来是 0,2,1 的这条上（连 `padding-left` 都没压住：灰底左边一直多缩进 16px；`white-space` 是
      继承属性 ⇒ 还会一路传进明细里那张小表，项目名不能换行、把价格列挤成零宽 —— 线上
      「(1pc)81USD」粘一起的根因）。同一个 `td:first-child` 把特异性拉平（0,3,1）、位置在 §B8.4 之后
      ⇒ 后写胜出（与 §3-A 那条「同优先级后写胜出」同一口径，**§B8.4 一字未动**）；§B8.4 ⑥ 里那句
      `text-align: left` **留着**（明细里的字本来就要左对齐，只有价格列由 ⑪ 单独右对齐）。 */
.unithmemd-patient .unithmemd-patient__appointment-detail td,
.unithmemd-patient .unithmemd-patient__appointment-detail td:first-child {
    padding: 0;
    width: auto;
    min-width: 0;
    white-space: normal;
}

/* ④ 明细内容区：浅灰底 + 16px 内边距（与 §3-A.1 ③ 逐字同档） */
.unithmemd-patient__appointment-detail-inner {
    padding: 16px;
    background: #f9fafb;
    border-radius: 8px;
}

/* ⑤ 明细里的小标题（`Treatments` / `Patient details`）：与 §3-A.1 ④ 逐字同档 */
.unithmemd-patient__appointment-detail-heading {
    margin: 16px 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: #111;
}

/* ⑥ 第一块标题不带上外边距（贴住内容区顶部；与 §3-A.1 ⑤ 同一处置） */
.unithmemd-patient__appointment-detail-heading:first-child {
    margin-top: 0;
}

/* ⑦ 明细里那张两列小表（Treatment / Indicative price）：与 §3-A.1 ⑥ 逐字同档
      （撑满宽度、`collapse`、15px、24px 下外边距把表格与下一段 `Patient details` 分开）。
      **B13.3.1 批**补 `table-layout: fixed`：列宽从「内容说了算」改成「⑩⑪ 写死说了算」——
      自动布局下长内容能反过来支配列宽（项目名把价格列挤成零宽就是这么来的）；固定布局下
      第一行（表头）那两列的比例就是最终宽度，名字再长也只在自己那列里换行。 */
.unithmemd-patient__appointment-detail-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 15px;
    margin: 0 0 24px;
}

/* ⑧ 小表表头：与 §3-A.1 ⑦ 逐字同档，**只去掉** `background: #fafbfc`（见段头「取值来源」） */
.unithmemd-patient__appointment-detail-table th {
    padding: 12px 16px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #6b7280;
    border-bottom: 1px solid #e5e7eb;
}

/* ⑨ 小表正文格：与 §3-A.1 ⑧ 逐字同档（16px / `top` / `500` / 1.5 / `#f3f4f6` 行线）。 */
.unithmemd-patient__appointment-detail-table td {
    padding: 16px;
    vertical-align: top;
    font-weight: 500;
    color: #111;
    border-bottom: 1px solid #f3f4f6;
    line-height: 1.5;
}

/* ⑩ 小表第一列（项目名）：70% + 与价格列之间留 24px 空气 + 长串也能断开 ——
      「项目名与价格粘一起」的正解是**两列之间要有空气 + 名字能换行**，不是把整列写死 `nowrap`
      （与 §3-A.1 ⑨⑪ 同一条口径；那边 B11.1 批已按这个路子修过「PROCEDURE 与 PRICE 粘一起」）。
      表头与正文格同一套比例：`table-layout: fixed` 靠**第一行**定宽，`border-collapse: collapse`
      下两行都写才稳（§3-A.1 ⑨⑩ 同一理由）。 */
.unithmemd-patient__appointment-detail-table th:first-child,
.unithmemd-patient__appointment-detail-table td:first-child {
    width: 70%;
    padding-right: 24px;
    overflow-wrap: break-word;
}

/* ⑪ 小表第二列（指示价）：30% + **右对齐** + 不换行 —— 两列合起来正好 100%（余量不再参与分配
      ⇒ 名字再长也改不了这一栏的宽度）；数字右对齐才好逐行比大小，也与表头 `INDICATIVE PRICE`
      落在同一条右边界上（「数字被折行最难读」与 §3-A.1 ⑫ 同一条理由）。 */
.unithmemd-patient__appointment-detail-table th:last-child,
.unithmemd-patient__appointment-detail-table td:last-child {
    width: 30%;
    text-align: right;
    white-space: nowrap;
}

/* ⑫ 明细里的项目清单（窄屏那份 `Treatments`）：与 §3-A.1 ⑬ 逐字同档 ——
      明细块不是正文，行距按 1.5 走，`padding-left` 给项目符号留位。 */
.unithmemd-patient__appointment-detail-list {
    margin: 0;
    padding-left: 18px;
    font-size: 14px;
    line-height: 1.5;
    color: #111;
}

/* ⑬ 窄屏卡片里那块明细与上面那行（`View` 按钮）留 12px 缝；块内留白 / 底色仍由 ④ 承担
      （`-inner` 与桌面那份**同一个类名** ⇒ 这一条只补「卡片里两块之间的间距」） */
.unithmemd-patient__row-card .unithmemd-patient__row-card-detail {
    margin-top: 12px;
}

/* ==========================================================================
 * §B13.4 预约明细里的医生（B13.4 批，2026-10-16）
 * ──────────────────────────────────────────────────────────────────────────
 *   追加于既有 2870 行（§B13.3 段尾）之后。
 *   用途：`/my-account/appointments/` 每条预约的明细块里多一段 `Doctor` —— 头像 + 姓名
 *   （数据侧那一半在 `includes/class-patient-appointments.php` 的 `doctor_name()` /
 *   `doctor_avatar_url()`，版式那一半在 `templates/account/appointments.php` 的两套版式里）。
 *   这一段只有三条规则，因为「空」这件事已经在上游解决了：
 *     · 没选医生 ⇒ 类里回空串 ⇒ 模板**整段不渲染**（不是空态、不是 `—`）⇒ 这里不必写
 *       「没有医生时长什么样」；
 *     · 附件被删 ⇒ 同样回空串 ⇒ 模板连 `<img>` 都不输出（这里只管「有图时怎么摆」）。
 *
 *   取值来源（[E1] 红线照旧）：
 *     · ① 容器的 15px / 500 / `#111` 取明细正文那一档（§B13.3 ⑨ 小表正文格）；
 *     · ② 头像的 40px 圆盘 + `object-fit: cover` + `flex-shrink: 0` 与 §B11 ⑤（回复区的
 *       翻译者头像）**逐字同档** —— 两处是同一件事（一行里放一张人脸小图），没理由长得不一样；
 *     · ③ 姓名的 `min-width: 0` 是 flex 子项能缩到内容宽以下的前提（不加就等于没写
 *       `overflow-wrap`），与 §B13.3 ⑩ 那条「名字能换行」同一条理由。
 *   选择器一律以 `.unithmemd-patient` 打头、零 `!important`、零 `max-width` 媒体查询、
 *   零 `transition`、零自定义属性、零 `:root`、零 `#fafbfc`（与 §B13.3 同一套红线）。
 * ========================================================================== */

/* ① 一行两件：头像 + 姓名（缝 12px；文字取明细正文那一档） */
.unithmemd-patient__appointment-doctor {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    color: #111;
}

/* ② 头像一个 40px 圆盘（与 §B11 ⑤ 回复头像逐字同档）—— 方图裁成圆、窄屏不挤扁 */
.unithmemd-patient__appointment-doctor-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* ③ 姓名（长名字在窄屏也断得开、也不把卡片顶宽 —— 与 §B13.3 ⑩ 同一条理由） */
.unithmemd-patient__appointment-doctor-name {
    min-width: 0;
    overflow-wrap: break-word;
}

/* ==========================================================================
 * §B14 预约明细里的陪诊者（B14.0 批，2026-10-16）
 * ──────────────────────────────────────────────────────────────────────────
 *   追加于既有 2918 行（§B13.4 段尾）之后。
 *   用途：`/my-account/appointments/` 每条预约的明细块里多一段 `Interpreter` —— 头像 + 姓名
 *   （数据侧那一半在 `includes/class-patient-appointments.php` 的 `has_interpreter()` /
 *   `interpreter_name()` / `interpreter_avatar_url()`，版式那一半在
 *   `templates/account/appointments.php` 的两套版式里）。
 *   这一段与 §B13.4（医生那一段）是**同一件事的第二个实例**，所以只有三条规则、取值逐条同档 ——
 *   这里不另立口径，唯一的差别是判定方法（`has_interpreter()` 而不是「名字空不空」）：
 *     · 没有陪诊者 ⇒ 类里回 `false` ⇒ 模板**整段不渲染**（不是空态、不是 `—`）⇒ 这里不必写
 *       「没有陪诊者时长什么样」；
 *     · 头像取不到（没上传 / 附件被删）⇒ 回空串 ⇒ 模板连 `<img>` 都不输出（这里只管「有图时怎么摆」）。
 *
 *   取值来源（[E1] 红线照旧）：
 *     · ① 容器的 15px / 500 / `#111` 取明细正文那一档（§B13.3 ⑨ 小表正文格），与 §B13.4 ①
 *       里那个容器**逐字同档**（两段并排显示，字号 / 缝 / 颜色不一样立刻能看出来）；
 *     · ② 头像的 40px 圆盘 + `object-fit: cover` + `flex-shrink: 0` 与 §B13.4 ② / §B11 ⑤
 *       同档（三处是同一件事：一行里放一张人脸小图）；
 *     · ③ 姓名的 `min-width: 0` + `overflow-wrap` 与 §B13.4 ③ 同档（flex 子项能缩到内容宽以下
 *       的前提，不加就等于没写 `overflow-wrap`）。
 *   选择器一律以 `.unithmemd-patient` 打头、零 `!important`、零 `max-width` 媒体查询、
 *   零 `transition`、零自定义属性、零 `:root`、零 `#fafbfc`（与 §B13.3 / §B13.4 同一套红线）。
 * ========================================================================== */

/* ① 一行两件：头像 + 姓名（缝 12px；文字取明细正文那一档 —— 与 §B13.4 ① 逐字同档） */
.unithmemd-patient__appointment-interpreter {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    color: #111;
}

/* ② 头像一个 40px 圆盘（与 §B13.4 ② / §B11 ⑤ 逐字同档）—— 方图裁成圆、窄屏不挤扁 */
.unithmemd-patient__appointment-interpreter-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* ③ 姓名（长名字在窄屏也断得开、也不把卡片顶宽 —— 与 §B13.4 ③ 同一条理由）
      ⚠️ 这一条也是`assets/css/account.css` 的**新末条**：判据 210 / 252 / 263 / 276 / 282 那颗
      「文件末尾」的钉子跟着换到这里（又追加了一段就得换一次）。 */
.unithmemd-patient__appointment-interpreter-name {
    min-width: 0;
    overflow-wrap: break-word;
}

/* ==========================================================================
 * §B15 健康档案 / 四步向导（B15 批，2026-10-20）
 * ──────────────────────────────────────────────────────────────────────────
 *   用途：账户首页 `templates/account/overview.php` 原地手风琴（B15.1 批；面板模板
 *   `templates/account/health.php`，独立路由 `/my-account/health/` 已取消）—— 顶部隐私说明、
 *   四段进度、每步一块白卡、最后的成功页。版式照定稿原型 `jiankang.html`，取值与
 *   §B13.3 / §B13.4 / §B14 同档（#111 / #666 / #009E5F / #ebebeb / #f8fafc）。
 *
 *   渐进增强：没有 JS 时四步**全部平铺**（脚本一启动才挂 `.unithmemd-patient__health--js`，
 *   由本段最后两条把非当前步收起来）—— 不白屏、也不把内容藏在需要脚本才展开的壳里。
 *
 *   B15.1 批起本页不再独立：账户首页横幅下方的 `.unithmemd-patient__health-accordion`
 *   用 `grid-template-rows: 0fr → 1fr` 做原地展开 / 收起（`hidden` 由脚本在过渡结束后补上）。
 *   展开态的内层是一张白卡（圆角 + 淡阴影），与上方横幅同宽、视觉上连成一块。
 *
 *   红线（[E1] 照旧）：选择器一律以 `.unithmemd-patient` 打头、零 `!important`、
 *   零 `:root`、零自定义属性、零 `max-width` 媒体查询（移动优先）。
 *   本段唯一允许的 `transition` 就是手风琴的高度 / 透明度过渡（B15.1 需求）。
 * ========================================================================== */

/* ① 手风琴壳：0fr → 1fr 的高度过渡（内层 min-height:0 + overflow:hidden 才裁得住） */
.unithmemd-patient__health-accordion {
    display: grid;
    grid-template-rows: 0fr;
    margin-top: 0;
    opacity: 0;
    transition: grid-template-rows 0.34s ease, opacity 0.24s ease, margin-top 0.34s ease;
}

.unithmemd-patient__health-accordion[hidden] {
    display: none;
}

.unithmemd-patient__health-accordion.is-open {
    grid-template-rows: 1fr;
    margin-top: 16px;
    opacity: 1;
}

.unithmemd-patient__health-accordion-inner {
    min-height: 0;
    overflow: hidden;
}

/* 展开态是一张与上方横幅同宽的白卡；步进卡本身不再重复描边 / 阴影 */
.unithmemd-patient__health-accordion-inner .unithmemd-patient__health {
    max-width: none;
    padding: 22px;
    background: #fff;
    border: 1px solid #ebebeb;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
}

.unithmemd-patient__health-accordion-inner .unithmemd-patient__health-card {
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0;
}

/* ② 外层：与账户页其它内容同一个 900px 阅读宽度，居中 */
.unithmemd-patient__health {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 16px;
    color: #111;
}

/* ①-a `hidden` 必须真的收起来：本段多条规则自带 display，会盖掉浏览器默认的 `[hidden]` */
.unithmemd-patient__health [hidden] {
    display: none;
}

/* ② 顶部隐私说明：浅绿底、圆角；窄屏自动折行（不写 max-width 媒体查询） */
.unithmemd-patient__health-intro {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    background: #e6f4ea;
    border: 1px solid #cfe8d8;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 24px;
}

.unithmemd-patient__health-intro-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ffffff;
    color: #009E5F;
    flex-shrink: 0;
}

.unithmemd-patient__health-intro-icon svg {
    width: 18px;
    height: 18px;
}

.unithmemd-patient__health-intro-body {
    flex: 1 1 240px;
    min-width: 0;
}

.unithmemd-patient__health-intro-title {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
    color: #111;
}

.unithmemd-patient__health-intro-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #555;
}

.unithmemd-patient__health-intro-dismiss {
    border: 1px solid #009E5F;
    background: transparent;
    color: #007f4c;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    align-self: center;
}

.unithmemd-patient__health-intro-dismiss:hover,
.unithmemd-patient__health-intro-dismiss:focus {
    background: #ffffff;
}

/* ③ 标题 / 副标题 */
.unithmemd-patient__health-heading {
    margin-bottom: 22px;
}

.unithmemd-patient__health-title {
    margin: 0 0 8px;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.25;
}

.unithmemd-patient__health-subtitle {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #666;
}

/* ④ 四段进度：一条灰底线 + 一条绿色进度线，四个圆点压在线上 */
.unithmemd-patient__health-progress {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 22px;
}

.unithmemd-patient__health-progress::before {
    content: "";
    position: absolute;
    top: 15px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #eee;
    z-index: 1;
}

.unithmemd-patient__health-progress-line {
    position: absolute;
    top: 15px;
    left: 0;
    width: 0;
    height: 2px;
    background: #009E5F;
    z-index: 2;
}

.unithmemd-patient__health-step {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: #fff;
    padding: 0 8px;
    flex: 1;
}

.unithmemd-patient__health-step-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #eee;
    color: #999;
    font-size: 14px;
    font-weight: 600;
}

.unithmemd-patient__health-step-label {
    font-size: 13px;
    color: #999;
    font-weight: 500;
    text-align: center;
}

.unithmemd-patient__health-step.is-active .unithmemd-patient__health-step-circle {
    background: #111;
    color: #fff;
}

.unithmemd-patient__health-step.is-active .unithmemd-patient__health-step-label {
    color: #111;
    font-weight: 600;
}

.unithmemd-patient__health-step.is-done .unithmemd-patient__health-step-circle {
    background: #009E5F;
    color: #fff;
}


/* ⑤ 每步一块白卡（内边距与原型一致；窄屏靠 flex-wrap 自然收敛） */
.unithmemd-patient__health-card {
    background: #fff;
    border: 1px solid #ebebeb;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    margin-bottom: 24px;
}

.unithmemd-patient__health-section-title {
    margin: 20px 0 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
    font-size: 18px;
    font-weight: 600;
    color: #009E5F;
}

.unithmemd-patient__health-section-title:first-child {
    margin-top: 0;
}

.unithmemd-patient__health-desc {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.6;
    color: #666;
}

/* ⑥ 两列 / 三列：移动优先（窄屏自动一整行，768px 起并排） */
.unithmemd-patient__health-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
}

.unithmemd-patient__health-col-4,
.unithmemd-patient__health-col-6,
.unithmemd-patient__health-col-8,
.unithmemd-patient__health-col-12 {
    flex: 1 1 100%;
    min-width: 0;
}

@media (min-width: 768px) {
    .unithmemd-patient__health-col-4 {
        flex: 1 1 30%;
    }

    .unithmemd-patient__health-col-6 {
        flex: 1 1 45%;
    }

    .unithmemd-patient__health-col-8 {
        flex: 1 1 62%;
    }
}

/* ⑦ 表单控件（与原型同一档：10/12 内边距、6px 圆角、聚焦绿边） */
.unithmemd-patient__health-label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.unithmemd-patient__health-req {
    color: #dc3545;
}

.unithmemd-patient__health input[type="text"],
.unithmemd-patient__health input[type="date"],
.unithmemd-patient__health input[type="email"],
.unithmemd-patient__health input[type="tel"],
.unithmemd-patient__health input[type="number"],
.unithmemd-patient__health select,
.unithmemd-patient__health textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    color: #111;
    background: #fff;
    box-sizing: border-box;
}

.unithmemd-patient__health input:focus,
.unithmemd-patient__health select:focus,
.unithmemd-patient__health textarea:focus {
    border-color: #009E5F;
    outline: 2px solid rgba(0, 158, 95, 0.18);
    outline-offset: 0;
}

.unithmemd-patient__health textarea {
    resize: vertical;
    min-height: 80px;
}

/* ⑧ 复选 / 单选：一行流式排列，窄屏折行 */
.unithmemd-patient__health-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 4px 0 10px;
}

.unithmemd-patient__health-checks label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: #333;
    cursor: pointer;
}

.unithmemd-patient__health-checks input {
    margin: 0;
}

/* ⑨ 步骤按钮：左 Back / 右 Next（原型那一条分隔线照搬） */
.unithmemd-patient__health-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.unithmemd-patient__health-btn {
    padding: 12px 28px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
}

.unithmemd-patient__health-btn--primary {
    background: #009E5F;
    color: #fff;
    border-color: #009E5F;
}

.unithmemd-patient__health-btn--primary:hover,
.unithmemd-patient__health-btn--primary:focus {
    background: #007f4c;
    border-color: #007f4c;
}

.unithmemd-patient__health-btn--ghost {
    background: #fff;
    color: #111;
    border-color: #ddd;
}

.unithmemd-patient__health-btn--ghost:hover,
.unithmemd-patient__health-btn--ghost:focus {
    border-color: #111;
}

.unithmemd-patient__health-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ⑩ 保存提示 / 错误（两处都靠 `hidden` 切换，脚本只改 textContent） */
.unithmemd-patient__health-save {
    min-height: 20px;
    margin: 0 0 12px;
    font-size: 13px;
    color: #007f4c;
}

.unithmemd-patient__health-error {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fdecea;
    color: #b71c1c;
    font-size: 14px;
}


/* ⑪ 上传框（原型那条虚线框） */
.unithmemd-patient__health-upload {
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    background: #f8fafc;
    margin: 10px 0 20px;
}

.unithmemd-patient__health-upload-icon {
    font-size: 24px;
    margin-bottom: 8px;
}

.unithmemd-patient__health-upload-title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 600;
    color: #334155;
}

.unithmemd-patient__health-upload-hint {
    margin: 0 0 10px;
    font-size: 12px;
    color: #64748b;
}

.unithmemd-patient__health-upload input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.unithmemd-patient__health-upload-button {
    display: inline-block;
    background: #009E5F;
    color: #fff;
    padding: 8px 20px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}

.unithmemd-patient__health-upload-button:hover,
.unithmemd-patient__health-upload-button:focus {
    background: #007f4c;
}

.unithmemd-patient__health-upload-status {
    margin: 8px 0 0;
    font-size: 13px;
    color: #007f4c;
}

/* ⑫ 附件列表：一条一行，窄屏靠 flex-wrap 折行 */
.unithmemd-patient__health-file-list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    border: 1px solid #ebebeb;
    border-radius: 10px;
}

.unithmemd-patient__health-file {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
}

.unithmemd-patient__health-file:last-child {
    border-bottom: 0;
}

.unithmemd-patient__health-file-name {
    flex: 1 1 180px;
    min-width: 0;
    overflow-wrap: break-word;
    font-weight: 500;
}

.unithmemd-patient__health-file-size {
    color: #666;
    font-size: 13px;
}

.unithmemd-patient__health-file-link,
.unithmemd-patient__health-file-remove {
    background: transparent;
    border: 0;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    color: #007f4c;
    cursor: pointer;
    text-decoration: underline;
}

.unithmemd-patient__health-file-remove {
    color: #b71c1c;
}

/* ⑬ 授权勾选：一整块浅底（原型那个浅灰圆角块） */
.unithmemd-patient__health-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #f8fafc;
    padding: 15px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.unithmemd-patient__health-consent input {
    margin-top: 2px;
}

/* ⑭ 成功页（只读状态：pending / approved） */
.unithmemd-patient__health-success {
    text-align: center;
    padding: 60px 20px;
    background: #fff;
    border: 1px solid #ebebeb;
    border-radius: 16px;
}

.unithmemd-patient__health-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: #e6f4ea;
    color: #009E5F;
    font-size: 26px;
    font-weight: 700;
}

.unithmemd-patient__health-success-title {
    margin: 0 0 15px;
    font-size: 24px;
    font-weight: 600;
    color: #009E5F;
}

.unithmemd-patient__health-success-text {
    margin: 0 auto 10px;
    max-width: 560px;
    font-size: 15px;
    line-height: 1.6;
    color: #666;
}

/* ⑮ 状态胶囊（概览横幅与成功页共用；三种状态各一档色） */
.unithmemd-patient__status-pill {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    background: #eee;
    color: #555;
}

.unithmemd-patient__status-pill--pending {
    background: #fff4d6;
    color: #8a5a00;
}

.unithmemd-patient__status-pill--approved {
    background: #e6f4ea;
    color: #007f4c;
}

.unithmemd-patient__status-pill--rejected {
    background: #ffe8e8;
    color: #b42318;
}

/* 退回修改：患者端在表单上方展示协调员可见备注 */
.unithmemd-patient__health-returned {
    margin: 0 0 20px;
    padding: 18px 20px;
    border: 1px solid #f0c2c2;
    border-left: 4px solid #d92d20;
    border-radius: 12px;
    background: #fff6f6;
}

.unithmemd-patient__health-returned-title {
    margin: 0 0 6px;
    color: #b42318;
    font-size: 17px;
    font-weight: 700;
}

.unithmemd-patient__health-returned-text {
    margin: 0;
    color: #6b2b2b;
    font-size: 14px;
    line-height: 1.6;
}

.unithmemd-patient__health-returned-note {
    margin: 12px 0 0;
    padding: 10px 14px;
    border-radius: 8px;
    background: #ffffff;
    color: #4a1f1f;
    font-size: 14px;
    line-height: 1.65;
    white-space: normal;
}

/* ⑯ 有脚本时才收起非当前步（没有脚本 ⇒ 四步平铺，内容不丢） */
.unithmemd-patient__health--js .unithmemd-patient__health-card {
    display: none;
}

.unithmemd-patient__health--js .unithmemd-patient__health-card.is-active {
    display: block;
}

/* ⑰ 健康记录 Step 4：推荐协调员 / 全部协调员 / 资料弹窗 */
.unithmemd-patient__health-coordinators {
    margin: 4px 0 24px;
    padding: 16px;
    border: 1px solid var(--unithmemd-patient-border);
    border-radius: var(--unithmemd-patient-radius-md);
    background: linear-gradient(180deg, #f7fcf9 0%, #ffffff 100%);
}

.unithmemd-patient__health-coordinators-title {
    margin: 0 0 6px;
    color: #14532d;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
}

.unithmemd-patient__health-coordinators-desc {
    margin: 0;
    color: var(--unithmemd-patient-medium);
    font-size: 13px;
    line-height: 1.6;
}

.unithmemd-patient__health-coordinator-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.unithmemd-patient__health-coordinators-empty {
    margin: 14px 0 0;
    padding: 14px 16px;
    border: 1px dashed var(--unithmemd-patient-border);
    border-radius: var(--unithmemd-patient-radius-sm);
    color: var(--unithmemd-patient-medium);
    font-size: 13px;
}

.unithmemd-patient__health-coordinator {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border: 2px solid var(--unithmemd-patient-border);
    border-radius: var(--unithmemd-patient-radius-md);
    background: var(--unithmemd-patient-white);
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.unithmemd-patient__health-coordinator:hover {
    border-color: #b7e4c7;
    box-shadow: var(--unithmemd-patient-shadow-md);
    transform: translateY(-2px);
}

.unithmemd-patient__health-coordinator:focus-visible {
    outline: 3px solid rgba(26, 157, 94, 0.25);
    outline-offset: 2px;
}

.unithmemd-patient__health-coordinator.is-selected {
    border-color: var(--unithmemd-patient-primary);
    background: #f6fdf9;
    box-shadow: 0 0 0 3px rgba(26, 157, 94, 0.12);
}

.unithmemd-patient__health-coordinator.is-selected::after {
    content: "\2713";
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--unithmemd-patient-primary);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.unithmemd-patient__health-coordinator-avatar {
    display: flex;
    flex: 0 0 55px;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--unithmemd-patient-primary-light);
    color: var(--unithmemd-patient-primary);
    font-size: 19px;
    font-weight: 700;
    object-fit: cover;
}

.unithmemd-patient__health-coordinator-info {
    flex: 1 1 130px;
    min-width: 0;
}

.unithmemd-patient__health-coordinator-name {
    margin: 0 0 2px;
    color: var(--unithmemd-patient-dark);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}

.unithmemd-patient__health-coordinator-city {
    margin: 0 0 6px;
    color: var(--unithmemd-patient-medium);
    font-size: 12px;
    line-height: 1.4;
}

.unithmemd-patient__health-coordinator-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.unithmemd-patient__health-coordinator-tag {
    padding: 2px 7px;
    border-radius: 999px;
    background: #eef6f1;
    color: #2f6d4a;
    font-size: 11px;
    line-height: 1.6;
    white-space: nowrap;
}

.unithmemd-patient__health-coordinator-view {
    margin-left: auto;
    align-self: flex-end;
    padding: 2px 0;
    border: 0;
    background: none;
    color: #0f766e;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.unithmemd-patient__health-coordinator-view:hover {
    color: #115e59;
}

.unithmemd-patient__health-coordinators-more-wrap {
    margin-top: 16px;
    text-align: center;
}

.unithmemd-patient__health-coordinators-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 22px;
    border: 1px dashed #9bd3b2;
    border-radius: 999px;
    background: var(--unithmemd-patient-white);
    color: var(--unithmemd-patient-primary);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.unithmemd-patient__health-coordinators-more-btn:hover {
    border-color: var(--unithmemd-patient-primary);
    background: var(--unithmemd-patient-primary-light);
}

.unithmemd-patient__health-coordinators-more-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

.unithmemd-patient__health-coordinators-more {
    display: grid;
    grid-template-rows: 0fr;
    margin-top: 0;
    opacity: 0;
    transition: grid-template-rows 0.28s ease, opacity 0.2s ease, margin-top 0.28s ease;
}

.unithmemd-patient__health-coordinators-more.is-open {
    grid-template-rows: 1fr;
    margin-top: 18px;
    opacity: 1;
}

.unithmemd-patient__health-coordinators-more-inner {
    min-height: 0;
    overflow: hidden;
}

.unithmemd-patient__health-coordinators-status {
    min-height: 20px;
    margin: 10px 0 0;
    color: var(--unithmemd-patient-medium);
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}

.unithmemd-patient__health-coordinator-modal {
    position: fixed;
    z-index: 99999;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

.unithmemd-patient__health-coordinator-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
}

.unithmemd-patient__health-coordinator-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(520px, 100%);
    max-height: calc(100vh - 24px);
    padding: 22px 18px;
    overflow-y: auto;
    border-radius: 16px;
    background: var(--unithmemd-patient-white);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.24);
}

.unithmemd-patient__health-coordinator-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f2f5f3;
    color: #4b5563;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.unithmemd-patient__health-coordinator-modal-close:hover {
    background: #e6ece8;
    color: var(--unithmemd-patient-dark);
}

.unithmemd-patient__health-coordinator-modal-head {
    display: flex;
    gap: 14px;
    align-items: center;
    padding-right: 34px;
}

.unithmemd-patient__health-coordinator-modal-avatar {
    flex: 0 0 auto;
}

.unithmemd-patient__health-coordinator-modal-avatar .unithmemd-patient__health-coordinator-avatar {
    width: 64px;
    height: 64px;
    flex-basis: 64px;
    font-size: 22px;
}

.unithmemd-patient__health-coordinator-modal-title {
    min-width: 0;
}

.unithmemd-patient__health-coordinator-modal-title h3 {
    margin: 0 0 2px;
    color: var(--unithmemd-patient-dark);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}

.unithmemd-patient__health-coordinator-modal-title p {
    margin: 0;
    color: var(--unithmemd-patient-medium);
    font-size: 13px;
    line-height: 1.5;
}

.unithmemd-patient__health-coordinator-modal-tags {
    margin-top: 14px;
}

.unithmemd-patient__health-coordinator-modal-meta {
    margin: 8px 0 0;
    color: var(--unithmemd-patient-medium);
    font-size: 12px;
    line-height: 1.6;
}

.unithmemd-patient__health-coordinator-modal-section {
    margin: 18px 0 4px;
    color: var(--unithmemd-patient-dark);
    font-size: 14px;
    font-weight: 700;
}

.unithmemd-patient__health-coordinator-modal-bio {
    margin: 0;
    color: #4b5563;
    font-size: 14px;
    line-height: 1.7;
    white-space: pre-line;
}

.unithmemd-patient__health-coordinator-modal-link {
    display: inline-flex;
    margin-top: 16px;
    color: #0f766e;
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.unithmemd-patient__health-coordinator-modal-link:hover {
    color: #115e59;
}

@media (min-width: 560px) {
    .unithmemd-patient__health-coordinators {
        padding: 20px;
    }

    .unithmemd-patient__health-coordinator-modal {
        padding: 20px;
    }

    .unithmemd-patient__health-coordinator-modal-dialog {
        max-height: calc(100vh - 40px);
        padding: 26px;
    }
}