/* 海春预约系统 - 共享样式（移动优先）；配色跟随官网所选皮肤(data-skin)
   皮肤系列（与官网 web/src/assets/css/themes/*.css 一一对应）：
   moyun 墨玉(默认) / zhuqi 朱漆 / xuanmo 宣墨 / cinnabar 朱砂 / classic 复古蓝 / modern 靛蓝 */
:root {
  /* 默认 = 经典蓝 classic：医疗蓝 + 淡蓝底（全端统一蓝色） */
  --p:#1f6ea5; --p2:#14557f; --card:#fff; --bg:#eef3f8; --line:#c3d2e0;
  --t:#1a2b3c; --m:#52657a; --ok:#2f7d4f; --warn:#8a6420; --bad:#9e2b25;
  --hdr-grad:linear-gradient(135deg,#2b7ab5,#14557f);
  --sel:#eaf3fb;
  --accent:#e07b39;
  --radius:2px;
  --font-serif:Georgia,"Noto Serif SC","Source Han Serif SC","Songti SC",SimSun,serif;
}
/* 皮肤通用庄重化：宋体标题、直角、细描边、去软阴影 */
:root[data-skin] h1, :root[data-skin] header.app h1,
:root[data-skin] .card h3, :root[data-skin] .list-item b,
:root[data-skin] .period-cell .p { font-family:var(--font-serif); letter-spacing:.02em; }
header.app h1 { border-bottom:1px solid rgba(255,255,255,.25); padding-bottom:2px; }

/* 朱漆 zhuqi：朱漆红 + 玄墨底 + 哑金，最厚重 */
:root[data-skin="zhuqi"] {
  --p:#7f1d1d; --p2:#641414; --card:#fbf8f2; --bg:#f4efe6; --line:#ded2c0;
  --t:#241a16; --m:#73625a; --warn:#8a6420; --bad:#7f1d1d;
  --hdr-grad:linear-gradient(135deg,#8f2424,#581010);
  --sel:#f7ece8; --accent:#8a6420;
}
/* 宣墨 xuanmo：白纸黑墨，最素雅克制 */
:root[data-skin="xuanmo"] {
  --p:#2f3b37; --p2:#202a26; --card:#fefdfa; --bg:#f9f7f1; --line:#e0dccd;
  --t:#1c1c1a; --m:#6f6f68; --ok:#2f6e46; --warn:#8a6420; --bad:#9e2b25;
  --hdr-grad:linear-gradient(135deg,#3d4a45,#202a26);
  --sel:#efeee6; --accent:#9e2b25;
}
/* 朱砂 cinnabar（官网旧默认，保留兼容） */
:root[data-skin="cinnabar"] {
  --p:#9d1f1f; --p2:#7f1515; --card:#fffdf8; --bg:#faf6ef; --line:#e8ddd0;
  --t:#2b1a1a; --m:#6f524c; --hdr-grad:linear-gradient(135deg,#b03030,#7f1515);
  --sel:#faf1ee; --accent:#9d1f1f;
}
/* 经典复古·蓝（旧，保留兼容） */
:root[data-skin="classic"] {
  --p:#1f6ea5; --p2:#14557f; --card:#fff; --bg:#eef3f8; --line:#c3d2e0;
  --t:#1a2b3c; --m:#52657a; --warn:#d97706;
  --hdr-grad:linear-gradient(135deg,#2b7ab5,#14557f);
  --sel:#eaf3fb;
}
/* 现代庄重·靛蓝（旧，保留兼容） */
:root[data-skin="modern"] {
  --p:#1e3a5f; --p2:#152b48; --card:#fff; --bg:#f4f6f8; --line:#dfe5ea;
  --t:#17222e; --m:#5f6a76; --warn:#8a6d3b;
  --hdr-grad:linear-gradient(135deg,#24476e,#152b48);
  --sel:#eef3f9;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif; background:var(--bg); color:var(--t); font-size:0.938rem; line-height:1.6; }
.wrap { max-width:760px; margin:0 auto; padding:0 14px 40px; }
/* 大屏(≥1280)再放宽一点，减少两侧空旷感 */
@media (min-width:1280px){ .wrap { max-width:820px; } }
header.app { background:var(--hdr-grad); color:#fff; padding:14px 16px; position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:10px; }
header.app .app-logo { width:30px; height:30px; border-radius:50%; background:#fff; padding:2px; object-fit:contain; flex:0 0 auto; }
header.app h1 { font-size:1.125rem; flex:1; }
header.app .sub { font-size:0.750rem; opacity:.85; }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px; margin-top:12px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.card h3 { font-size:0.938rem; margin-bottom:10px; border-left:3px solid var(--p); padding-left:8px; }
button { cursor:pointer; border:none; border-radius:var(--radius); padding:10px 14px; font-size:0.938rem; }
.btn-primary { background:var(--p); color:#fff; width:100%; }
.btn-primary:active { background:var(--p2); }
.btn-ghost { background:transparent; color:var(--p); border:1px solid var(--p); }
.btn-sm { padding:6px 10px; font-size:0.813rem; border-radius:var(--radius); }
.btn-danger { background:#fdf3f2; color:var(--bad); border:1px solid var(--bad); }
.btn-ok { background:#f2f7f2; color:var(--ok); border:1px solid var(--ok); }
input, select, textarea { width:100%; padding:10px; border:1px solid var(--line); border-radius:var(--radius); font-size:0.938rem; margin-top:6px; background:var(--card); color:var(--t); }
label { display:block; font-size:0.813rem; color:var(--m); margin-top:10px; }
.list-item { display:flex; justify-content:space-between; align-items:center; padding:12px 2px; border-bottom:1px solid var(--line); }
.list-item:last-child { border-bottom:none; }
.list-item b { font-size:0.938rem; }
.list-item .d { font-size:0.813rem; color:var(--m); margin-top:2px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.tabbar { display:flex; background:#fff; border-top:1px solid var(--line); position:fixed; bottom:0; left:0; right:0; z-index:20; }
.tabbar button { flex:1; background:none; color:var(--m); padding:10px 0 8px; font-size:0.750rem; }
.tabbar button.active { color:var(--p); font-weight:700; }
.badge { display:inline-block; padding:2px 8px; border-radius:2px; font-size:0.750rem; border:1px solid transparent; }
.badge.pending{background:#fdf6ec;color:#c2410c;border-color:#ecd9bd;} .badge.confirmed{background:#eff4f6;color:#1d4ed8;border-color:#c9d8e2;} .badge.completed{background:#f2f7f2;color:#15803d;border-color:#cfe0cf;} .badge.cancelled{background:#f4f4f1;color:#64748b;border-color:#dcdcd6;}
.hidden{display:none!important;}
.msg{position:fixed;left:50%;transform:translateX(-50%);bottom:64px;background:#1f2422;color:#fff;padding:8px 16px;border-radius:var(--radius);font-size:0.875rem;z-index:99;display:none;max-width:90%;}
.period-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px;}
.period-cell{border:1px solid var(--line);border-radius:var(--radius);padding:10px;text-align:center;background:var(--card);}
.period-cell.sel{border-color:var(--p);background:var(--sel);box-shadow:inset 0 0 0 1px var(--p);}
.period-cell .p{font-weight:600;} .period-cell .n{font-size:0.750rem;color:var(--m);}
table{width:100%;border-collapse:collapse;font-size:0.875rem;}
th,td{padding:8px;border-bottom:1px solid var(--line);text-align:left;}
/* 卡片极淡层次（庄重风不抢眼） */
.card{box-shadow:0 1px 2px rgba(31,36,34,.04);}
/* ================= 演示版角标（临时，正式上线前删除本段） =================
   纯 CSS 伪元素，不进 HTML 正文；患者端(有底部 tabbar)自动抬到 tabbar 上方 */
body::after{content:'演示版 · 内容待替换';position:fixed;left:12px;bottom:10px;z-index:200;
  padding:4px 12px;border-radius:2px;background:rgba(31,36,34,.72);color:#fff;
  font-size:0.688rem;letter-spacing:1px;line-height:1;pointer-events:none;}
:root[data-font] body::after{bottom:calc(64px + env(safe-area-inset-bottom,0px) + 10px);}

/* ================= 电脑端控制台（医生工作台 / 管理后台） =================
   说明：患者端为手机小程序；医生端与管理端为**电脑网页登录**，故放宽布局、列表表格化 */
body.console .wrap { max-width: 1240px; padding-bottom: 60px; }
@media (min-width:1600px){ body.console .wrap { max-width: 1440px; } }
body.console .card { padding: 18px 20px; }
body.console .card h3 { font-size: 1.063rem; }

/* 工作台表格（电脑端阅览） */
.wb-table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); }
.wb-table th, .wb-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; font-size: 0.938rem; }
.wb-table th { background: var(--sel); font-weight: 600; white-space: nowrap; }
.wb-table tr:last-child td { border-bottom: none; }
.wb-table tbody tr:hover td { background: var(--sel); }
.wb-table .ops { white-space: nowrap; }
.wb-table .ops button { width: auto; margin-right: 6px; }
.wb-table .note-cell { max-width: 220px; color: var(--m); font-size: 0.875rem; }
.wb-empty { padding: 28px; text-align: center; color: var(--m); }

/* 电脑端登录卡：居中收窄，避免铺满 */
body.console #loginCard { max-width: 460px; margin: 40px auto 0; }

/* 电脑端按钮/输入略放大，方便鼠标操作 */
body.console .btn-sm { padding: 8px 14px; font-size: 0.875rem; }
body.console input, body.console select, body.console textarea { font-size: 0.938rem; }