/* app-brand.css — 招生站(Mandarin with Tóng)品牌皮,叠加在 app.css 之上。
   ————————————————————————————————————————————————————————————————
   目的:把登录/注册/找回/重置 + 所有登录后页面,统一换成 landing.html 那套
        暖米纸招生站视觉(暖米纸 #FAF6EF / 水墨 #211E1A /
        朱砂印章 #C1402C / 青瓷 #3F6B58 / 宋体印章 + 文学衬线标题)。
   做法:app.css 是编译后的 Tailwind v4 + DaisyUI「dim」深色主题,组件类(.btn/.input/
        .alert/.card)吃 DaisyUI 的 --color-* 令牌,外壳(.panel/.sidebar/.badge…)吃自定义
        --bg/--text/--primary… 令牌。这里**只重映射令牌 + 少量组件皮**,不动 app.css 本体,
        也不逐个重写组件,风险最小、全站一次到位。
   顺序:必须在 app.css 之后加载(head / app_head 里都放在其后)。 */

/* ============ 1. 令牌重映射:亮色 = 暖米纸(招生站默认皮) ============ */
:root{
  color-scheme: light;

  /* --- app.css 自定义令牌(外壳/表格/侧栏/徽章/品牌) --- */
  --chrome:#FFFDFA; --bg:#FAF6EF; --card-bg:#FFFDFA; --card-hover:#F4EEE1;
  --panel-border:#E7DECF; --bg-elev:#FBF7EF; --border:#E7DECF; --hairline:#F0E9DC;
  --text:#211E1A; --text-dim:#726B60; --text-mute:#9A8F7F;
  --primary:#C1402C; --primary-ink:#FFFFFF; --primary-hover:#A5341F;
  --accent:#3F6B58; --danger:#C1402C; --radius:14px;
  --band:linear-gradient(180deg,#211E1A,#2B2620);

  /* --- DaisyUI 令牌(.btn/.input/.alert/.card 吃这些) --- */
  --color-base-100:#FFFDFA; --color-base-200:#F4EEE1; --color-base-300:#E7DECF;
  --color-base-content:#211E1A;
  --color-primary:#C1402C; --color-primary-content:#FFFFFF;
  --color-secondary:#3F6B58; --color-secondary-content:#FFFFFF;
  --color-accent:#3F6B58; --color-accent-content:#FFFFFF;
  --color-neutral:#211E1A; --color-neutral-content:#FAF6EF;
  --color-info:#3F6B58; --color-info-content:#FFFFFF;
  --color-success:#3F6B58; --color-success-content:#FFFFFF;
  --color-warning:#C1402C; --color-warning-content:#FFFFFF;
  --color-error:#C1402C; --color-error-content:#FFFFFF;

  --radius-selector:.75rem; --radius-field:.55rem; --radius-box:.9rem;

  /* 招生站字体族(与 landing.css 对齐) */
  --brand-serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --brand-han:"Songti SC","STSong","Noto Serif SC","Source Han Serif SC",serif;
  --brand-shadow:26 24 20;
}

/* ============ 2. 令牌重映射:暗色 = 水墨夜(跟随系统 / [data-theme=dark]) ============ */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --chrome:#1E1A16; --bg:#15120F; --card-bg:#1E1A16; --card-hover:#282219;
    --panel-border:#322B23; --bg-elev:#1E1A16; --border:#322B23; --hairline:#282219;
    --text:#ECE5D9; --text-dim:#A39A8B; --text-mute:#8A8072;
    --primary:#E06B53; --primary-ink:#211E1A; --primary-hover:#EA7B63;
    --accent:#82B79D; --danger:#E06B53; --band:linear-gradient(180deg,#000,#000);

    --color-base-100:#1E1A16; --color-base-200:#282219; --color-base-300:#322B23;
    --color-base-content:#ECE5D9;
    --color-primary:#E06B53; --color-primary-content:#211E1A;
    --color-secondary:#82B79D; --color-secondary-content:#15120F;
    --color-accent:#82B79D; --color-accent-content:#15120F;
    --color-neutral:#ECE5D9; --color-neutral-content:#15120F;
    --color-info:#82B79D; --color-info-content:#15120F;
    --color-success:#82B79D; --color-success-content:#15120F;
    --color-warning:#E06B53; --color-warning-content:#211E1A;
    --color-error:#E06B53; --color-error-content:#211E1A;
    --brand-shadow:0 0 0;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --chrome:#1E1A16; --bg:#15120F; --card-bg:#1E1A16; --card-hover:#282219;
  --panel-border:#322B23; --bg-elev:#1E1A16; --border:#322B23; --hairline:#282219;
  --text:#ECE5D9; --text-dim:#A39A8B; --text-mute:#8A8072;
  --primary:#E06B53; --primary-ink:#211E1A; --primary-hover:#EA7B63;
  --accent:#82B79D; --danger:#E06B53; --band:linear-gradient(180deg,#000,#000);
  --color-base-100:#1E1A16; --color-base-200:#282219; --color-base-300:#322B23;
  --color-base-content:#ECE5D9;
  --color-primary:#E06B53; --color-primary-content:#211E1A;
  --color-secondary:#82B79D; --color-secondary-content:#15120F;
  --color-accent:#82B79D; --color-accent-content:#15120F;
  --color-neutral:#ECE5D9; --color-neutral-content:#15120F;
  --color-info:#82B79D; --color-info-content:#15120F;
  --color-success:#82B79D; --color-success-content:#15120F;
  --color-warning:#E06B53; --color-warning-content:#211E1A;
  --color-error:#E06B53; --color-error-content:#211E1A;
  --brand-shadow:0 0 0;
}

/* ============ 3. 排版:文学衬线标题 + 纸感正文 ============ */
body{
  background:var(--bg); color:var(--text);
  font-family:"Avenir Next","Segoe UI",-apple-system,system-ui,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.page-head h1, .auth-title, .app-content h1, .app-content h2:not(.panel-title){
  font-family:var(--brand-serif); font-weight:600; letter-spacing:-.01em;
}
.page-head h1{ font-size:clamp(1.5rem,3.2vw,2rem); }

/* 面板/卡片:换掉原深色重投影,给米纸一层柔和暖投影 */
.panel{ box-shadow:0 1px 2px rgba(var(--brand-shadow),.06); }
.card{ box-shadow:0 1px 2px rgba(var(--brand-shadow),.06); }
.panel-title{ font-family:var(--brand-serif); font-weight:600; font-size:1.05rem; letter-spacing:-.005em; }

/* ============ 4. 印章品牌标记(替代原 logo.png 背景) ============ */
.brand{ gap:.55rem; }
.brand-logo, .brand-seal{
  display:inline-grid; place-items:center; inline-size:2em; block-size:2em;
  color:#FBF7EF; background:var(--primary);
  border-radius:6px; font-weight:700; line-height:1; font-size:1.05rem;
  font-family:var(--brand-han);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 1px 0 rgba(var(--brand-shadow),.25);
  transform:rotate(-3deg); background-image:none;
}
.brand-name{ font-family:var(--brand-serif); font-weight:600; font-size:1.15rem; letter-spacing:.005em; }

/* ============ 5. 认证页(登录/注册/找回/重置)招生站皮 ============ */
.auth-body{ background:var(--bg); }
.auth-card.card{
  background:var(--card-bg); border:1px solid var(--panel-border);
  border-radius:16px; box-shadow:0 24px 60px -42px rgba(var(--brand-shadow),.7);
}
.auth-title{ font-size:1.5rem; }
.auth-foot a{ color:var(--accent); font-weight:600; text-decoration:none; }
.auth-foot a:hover{ text-decoration:underline; text-underline-offset:3px; }

/* ============ 6. 徽章 / 提示条 —— 覆盖原深色硬编码,贴合米纸 ============ */
.badge-green{ color:#2F5A49; background:color-mix(in srgb,var(--accent) 16%,transparent); }
.badge-blue{ color:#2F5A49; background:color-mix(in srgb,var(--accent) 16%,transparent); }
.badge-yellow{ color:#8A4B12; background:#F3E4C7; }
.badge-gray{ color:var(--text-dim); background:var(--hairline); }
.alert-ok{ color:#2F5A49; background:color-mix(in srgb,var(--accent) 12%,transparent); border:1px solid color-mix(in srgb,var(--accent) 45%,transparent); }
.alert-warn{ color:#8A4B12; background:#F6EAD2; border:1px solid #E3C98F; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .badge-green,
  :root:not([data-theme="light"]) .badge-blue{ color:#B7E0CD; }
  :root:not([data-theme="light"]) .badge-yellow{ color:#E7C088; background:#3A2E1B; }
  :root:not([data-theme="light"]) .alert-warn{ color:#E7C088; background:#332818; border-color:#5A4726; }
}
:root[data-theme="dark"] .badge-green,
:root[data-theme="dark"] .badge-blue{ color:#B7E0CD; }
:root[data-theme="dark"] .badge-yellow{ color:#E7C088; background:#3A2E1B; }
:root[data-theme="dark"] .alert-warn{ color:#E7C088; background:#332818; border-color:#5A4726; }

/* ============ 7. 登录后新外壳:招生站顶栏(app2-*),取代原左侧栏 dashboard ============ */
.app2{ min-height:100vh; display:flex; flex-direction:column; background:var(--bg); color:var(--text); }

.app2-nav{
  position:sticky; top:0; z-index:30;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter:saturate(1.2) blur(9px); backdrop-filter:saturate(1.2) blur(9px);
  border-bottom:1px solid var(--border);
}
.app2-nav-in{
  width:min(1120px,94vw); margin-inline:auto;
  display:flex; align-items:center; gap:1.1rem; padding-block:.7rem;
}
.app2-brand{ display:inline-flex; align-items:center; gap:.55rem; text-decoration:none; color:var(--text); flex-shrink:0; }
/* 品牌名不换行(修 1280 英文品牌折两行);顶栏内固定不被挤压。 */
.app2-brand .brand-name{ white-space:nowrap; flex-shrink:0; }
.app2-links{ display:flex; align-items:center; gap:.35rem; margin-left:.6rem; }
.app2-link{
  color:var(--text-dim); text-decoration:none; font-size:.95rem; font-weight:600;
  padding:.42rem .7rem; border-radius:8px; white-space:nowrap;
  transition:color .12s ease, background .12s ease;
}
.app2-link:hover{ color:var(--text); background:var(--card-hover); }
.app2-link.active{ color:var(--primary); background:color-mix(in srgb,var(--primary) 9%,transparent); }
.app2-right{ margin-left:auto; display:flex; align-items:center; gap:.85rem; }
.app2-right .btn{ white-space:nowrap; }  /* 「退出登录 / Log out」不折行 */
.app2-email{ color:var(--text-dim); font-size:.86rem; max-width:18ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* 中等宽度先把邮箱收掉,给导航 + 语言/退出留空间(邮箱在学员主页仍可见)。 */
@media (max-width:1100px){ .app2-email{ display:none; } }
.app2-burger{
  display:none; margin-left:auto; background:none; border:none; cursor:pointer;
  color:var(--text); padding:6px; border-radius:8px;
}
.app2-burger svg{ width:24px; height:24px; }

.app2-main{ flex:1; width:100%; }
.app2-wrap{ width:min(1120px,94vw); margin-inline:auto; padding:clamp(1.6rem,4vw,2.6rem) 0 3rem; }

.app2-foot{
  border-top:1px solid var(--border); background:var(--chrome); color:var(--text-dim);
}
.app2-foot-in{
  width:min(1120px,94vw); margin-inline:auto; padding-block:1.3rem;
  display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; align-items:center; justify-content:space-between; font-size:.85rem;
}
.app2-foot-in a{ color:var(--text-dim); text-decoration:none; margin-left:1.1rem; }
.app2-foot-in a:first-child{ margin-left:0; }
.app2-foot-in a:hover{ color:var(--primary); }

@media (max-width:1080px){
  .app2-burger{ display:inline-flex; }
  .app2-right{ order:3; }
  .app2-links{
    order:4; flex-basis:100%; margin:0; display:none;
    flex-direction:column; align-items:stretch; gap:.15rem; padding:.4rem 0 .6rem;
  }
  .app2.nav-open .app2-links{ display:flex; }
  .app2-nav-in{ flex-wrap:wrap; }
}

/* ============ 7b. 二级 tab(课程:约课/我的预约 · 账单:购买/订单) ============ */
.sub-tabs{
  display:flex; gap:.3rem; flex-wrap:wrap;
  margin:0 0 1.5rem; border-bottom:1px solid var(--border);
}
.sub-tab{
  padding:.62rem .95rem; margin-bottom:-1px;
  color:var(--text-dim); text-decoration:none; font-weight:600; font-size:.96rem;
  white-space:nowrap; border-bottom:2px solid transparent;
  transition:color .12s ease, border-color .12s ease;
}
.sub-tab:hover{ color:var(--text); }
.sub-tab.active{ color:var(--primary); border-bottom-color:var(--primary); }

/* ============ 8. 学员主页(home)组件 ============ */
.hi-hero{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:1.6rem 1.7rem; margin-bottom:1.4rem;
  background:
    radial-gradient(120% 140% at 88% -10%, color-mix(in srgb,var(--primary) 9%, var(--card-bg)) 0%, var(--card-bg) 55%);
  border:1px solid var(--panel-border); border-radius:16px;
}
.hi-hero .hi-seal{
  display:inline-grid; place-items:center; inline-size:3rem; block-size:3rem;
  font-family:var(--brand-han); font-weight:700; font-size:1.6rem; color:#FBF7EF;
  background:var(--primary); border-radius:10px; transform:rotate(-3deg);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); flex:0 0 auto;
}
.hi-hero>div{ min-width:0; }  /* 让邮箱在窄屏能收缩/换行而不撑破 */
.hi-hero-eyebrow{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--primary); font-weight:700; margin:0 0 .25rem; }
.hi-hero h1{ font-family:var(--brand-serif); font-weight:600; font-size:clamp(1.5rem,3.4vw,2.1rem); margin:0; letter-spacing:-.01em; overflow-wrap:anywhere; }
/* 邮箱独立一行:次要色小字、长邮箱按字符换行,不再塞进大号衬线 H1。 */
.hi-hero-email{ color:var(--text-dim); font-weight:600; font-size:.92rem; margin:.2rem 0 0; overflow-wrap:anywhere; }
.hi-hero-sub{ color:var(--text-dim); margin:.35rem 0 0; font-size:.95rem; }

.hi-strip{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 0;
  padding:16px 6px; margin:0 0 1.4rem;
  background:var(--card-bg); border:1px solid var(--panel-border); border-radius:14px;
}
.hi-strip .hi-item{ display:flex; flex-direction:column; gap:4px; padding:0 22px; min-width:0; }
.hi-strip .hi-label{ font-size:.76rem; color:var(--text-dim); }
/* 长邮箱按字符换行,别把整条 strip 撑出横向滚动(375 下会溢出)。 */
.hi-strip .hi-value{ font-size:1.05rem; font-weight:700; color:var(--text); overflow-wrap:anywhere; min-width:0; }
.hi-strip .hi-sep{ width:1px; align-self:stretch; background:var(--border); }
@media (max-width:640px){ .hi-strip .hi-sep{ display:none; } .hi-strip .hi-item{ padding:6px 16px; } }

.hi-quick{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1rem; margin-top:.2rem; }
.hi-card{
  display:flex; flex-direction:column; gap:.35rem;
  padding:1.2rem 1.3rem; text-decoration:none; color:var(--text);
  background:var(--card-bg); border:1px solid var(--panel-border); border-radius:14px;
  transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.hi-card:hover{ transform:translateY(-2px); border-color:var(--primary); box-shadow:0 18px 40px -34px rgba(var(--brand-shadow),.7); }
.hi-card .hi-ic{ width:26px; height:26px; color:var(--primary); }
.hi-card .hi-ic svg{ width:100%; height:100%; }
.hi-card b{ font-family:var(--brand-serif); font-weight:600; font-size:1.1rem; }
.hi-card span{ color:var(--text-dim); font-size:.88rem; }

.announcement{ padding:12px 0; border-bottom:1px solid var(--hairline); }
.announcement:last-child{ border-bottom:none; padding-bottom:0; }
.announcement:first-child{ padding-top:0; }
.announcement-title{ font-size:.95rem; font-weight:700; margin-bottom:6px; }
.announcement-body{ font-size:.9rem; line-height:1.7; color:var(--text-dim); white-space:pre-wrap; word-break:break-word; }

/* ============ 9. 预约 / 订单卡片(桌面横排 / 移动堆叠,全站统一) ============
   原先只在 bookings.html 内联;订单也改用同一套卡片,提到共享样式表统一维护。 */
.bk-list{ display:flex; flex-direction:column; gap:12px; }
.bk-bcard{ border:1px solid var(--panel-border, var(--border, #e5ddce)); border-radius:var(--radius, 12px);
  padding:14px 16px; background:var(--card-bg, #fff); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.bk-bwhen{ font-weight:700; font-size:1.02rem; overflow-wrap:anywhere; }
.bk-bmeta{ color:var(--text-dim, #6b6256); font-size:.9rem; margin-top:4px; }
.bk-bmeta .badge{ vertical-align:middle; }
.bk-bnote{ color:var(--text-mute, #999); font-size:.88rem; margin-top:6px; }
.bk-bright{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.bk-bactions{ display:flex; gap:8px; flex-wrap:wrap; }
.bk-cancel-err{ color:var(--danger, #c0392b); font-size:.85rem; }
.ord-total{ font-weight:800; font-size:1.05rem; color:var(--primary); }
/* 窄屏:右侧金额/操作块占满一行并左对齐,不再挤在右上角。 */
@media (max-width:560px){
  .bk-bcard{ gap:10px; }
  .bk-bright{ align-items:flex-start; width:100%; }
}