@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* DCT AI — Dale Carnegie 2026 品牌主题 (皇家蓝 + 白 + 干净卡片) */
:root{
  --bg:#F4F6FA;            /* 浅蓝灰底 */
  --bg-2:#FFFFFF;          /* 白 — 列表 / 面板背景 */
  --panel:rgba(255,255,255,0.72);
  --panel-solid:#ffffff;
  --border:rgba(22,51,95,0.12);
  --text:#16335F;          /* DC 深蓝墨(顶栏底色 + 主文字) */
  --text-dim:#5A6478;
  --text-faint:#9AA3B5;

  --accent:#1F4E96;        /* DC 皇家蓝 — 主操作色 */
  --accent-2:#2E6FD6;      /* 亮蓝 — 链接 / hover */
  --accent-3:#2E6FD6;
  --gold:#2E6FD6;          /* 原金色点缀 → 亮蓝(两段式 wordmark / 语言钮) */
  --purple:#7C6EFA;
  --coral:#E8613A;

  --warn:#D94444;
  --sunken:rgba(22,51,95,0.045);
  --shadow-sm:0 1px 2px rgba(22,51,95,.05),0 1px 3px rgba(22,51,95,.05);
  --shadow:0 2px 14px rgba(22,51,95,.08);
  --shadow-lg:0 24px 60px rgba(22,51,95,.18);
  --glow:var(--shadow);
  --radius:12px;
  --grad:linear-gradient(135deg,#2E6FD6,#1F4E96);
  --font:"Inter","PingFang SC","Microsoft YaHei","Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --serif:var(--font);  /* 统一:旧页标题不再用衬线,全平台 Inter */
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font);background:var(--bg);color:var(--text);
  background-image:
    radial-gradient(120% 80% at 50% -20%,rgba(184,150,90,.07),transparent 55%),
    linear-gradient(180deg,#F7F5F1 0%,#EFEBE4 100%);
  background-attachment:fixed;-webkit-font-smoothing:antialiased;}
a{color:var(--accent-2);text-decoration:none}

/* 衬线标题系统 */
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:.01em}
h1 em,h2 em,h3 em{font-style:italic;color:var(--gold)}
/* 金色 eyebrow 小标签 */
.eyebrow{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  display:flex;align-items:center;gap:10px}
.eyebrow::after{content:'';flex:1;max-width:32px;height:1px;background:var(--gold)}

/* 线条图标系统 (Feather/Lucide 风格,内联 SVG) */
.ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;vertical-align:middle;flex-shrink:0}
.ico-sm{width:14px;height:14px;stroke-width:1.9}
.ico-lg{width:22px;height:22px}
/* 在线/离线状态点 */
.statusdot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0;background:var(--text-faint)}
.statusdot.on{background:var(--accent);box-shadow:0 0 0 3px rgba(29,171,139,.18)}

/* 顶栏 — La Memoria 墨黑横栏 + 金色衬线字标 */
.topbar{height:56px;background:var(--text);
  border-bottom:1px solid rgba(0,0,0,.4);box-shadow:0 1px 0 rgba(255,255,255,.04);
  display:flex;align-items:center;justify-content:space-between;padding:0 22px;position:sticky;top:0;z-index:30}
.topbar .t{font-family:var(--serif);font-weight:400;letter-spacing:.02em;
  display:flex;align-items:center;gap:9px;font-size:19px;color:#E8D9B8}
.topbar .t .ico{width:19px;height:19px;color:var(--gold)}
.topbar .links{display:flex;align-items:center;position:absolute;left:50%;transform:translateX(-50%)}
.topbar .links a{margin-left:6px;font-size:13.5px;color:rgba(255,255,255,.62);transition:.2s;
  display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:9px}
.topbar .links a .ico{width:17px;height:17px}
.topbar .links a:hover{color:#fff;background:rgba(255,255,255,.10)}
.langtoggle{margin-left:10px;font-size:12px;font-weight:600;letter-spacing:.04em;color:#E8D9B8;
  background:transparent;border:1px solid rgba(232,217,184,.4);border-radius:8px;padding:5px 11px;transition:.18s}
.langtoggle:hover{background:var(--gold);border-color:var(--gold);color:var(--text)}
/* 顶栏右侧一组:语言钮 + 登出钮(跟工作台 /app 一致,都在右上角)。i18n.js 会把语言钮插到这个容器里。 */
.tb-right{display:flex;align-items:center;gap:10px;margin-left:auto}
.tb-right .langtoggle{margin-left:0}
.logout-btn{font-size:12px;font-weight:600;letter-spacing:.04em;color:#E8D9B8;background:transparent;border:1px solid rgba(232,217,184,.4);border-radius:8px;padding:5px 11px;cursor:pointer;transition:.18s}
.logout-btn:hover{background:rgba(232,217,184,.12);border-color:#E8D9B8}
/* 登出钮只在客户自助模式(html.self)显示;admin god-view 不显示 */
html:not(.self) .self-only{display:none}

/* 按钮 / 表单 */
button{cursor:pointer;border:0;border-radius:10px;font-weight:600;font-family:var(--font);transition:.2s;
  display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 6px 18px rgba(23,141,114,.28)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(23,141,114,.38)}
input,select,textarea{background:#fff;border:1px solid var(--border);color:var(--text);
  border-radius:10px;padding:9px 12px;font-size:14px;font-family:var(--font);outline:none;transition:.2s}
input::placeholder,textarea::placeholder{color:var(--text-faint)}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(29,171,139,.16)}

/* 玻璃面板 */
.glass{background:var(--panel);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.6);border-radius:var(--radius);box-shadow:var(--shadow)}

/* 状态徽章 — La Memoria 暖色分类 (浅 tint 底 + 深文字) */
.badge{padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600}
.s0{background:#E4F7F2;color:#147A63}                 /* teal */
.s1{background:#F3ECDD;color:#8A6B2E}                 /* 金/琥珀 */
.s2{background:#EEECFF;color:#5B4DD6}                 /* 紫 */
.s3{background:#EEECFF;color:#5B4DD6}                 /* 同事 — 紫 */
.s4{background:#E6F5EE;color:#1F7A4E}                 /* 学员 — 绿 */
.s5{background:#FCEAF1;color:#B23A78}                 /* 朋友 — 粉 */
.s6{background:#FEF0EB;color:#C24A24}                 /* 家人 — 珊瑚 */
.s7{background:var(--sunken);color:var(--text-faint)} /* 无效 */
.b-connected{background:#E4F7F2;color:#147A63}
.b-qr{background:#F3ECDD;color:#8A6B2E}
.b-reconnecting,.b-starting{background:#FEF0EB;color:#C24A24}
.b-logged_out{background:#FEEAEA;color:#C2353A}
.b-idle{background:var(--sunken);color:var(--text-faint)}

/* 滚动条 */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:rgba(28,26,23,.16);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:rgba(28,26,23,.28)}
::-webkit-scrollbar-track{background:transparent}
.muted{color:var(--text-dim)}

/* ===== Auth help center (signup / login pages) ===== */
.help{margin-top:22px;border-top:1px solid var(--border);padding-top:14px}
/* 求助入口:teal 小药丸,清楚读作「可点」(原灰字不显眼)。三页共用 */
.help>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:14px;font-weight:700;color:var(--accent-2);background:rgba(29,171,139,.06);
  border:1px solid rgba(29,171,139,.22);border-radius:10px;padding:13px 14px;transition:background .15s,border-color .15s}
.help>summary::-webkit-details-marker{display:none}
.help>summary .hlabel{display:flex;align-items:center;gap:8px}
.help>summary .ico{width:17px;height:17px;color:var(--accent)}
.help>summary .chev{color:var(--accent-2);transition:transform .2s}
.help[open]>summary .chev{transform:rotate(180deg)}
.help[open]>summary{margin-bottom:6px}
.help>summary:hover{background:rgba(29,171,139,.12);border-color:rgba(29,171,139,.4)}
.help-intro{font-size:12.5px;color:var(--text-faint);margin:2px 2px 6px}
.help-q{border-top:1px solid var(--border)}
.help-q:first-of-type{border-top:0}
.help-q>summary{list-style:none;cursor:pointer;display:flex;gap:10px;align-items:flex-start;
  font-size:13.5px;font-weight:600;color:var(--text);padding:11px 2px;line-height:1.45}
.help-q>summary::-webkit-details-marker{display:none}
.help-q>summary:hover{color:var(--accent-2)}
.help-q>summary .qx{flex:1}
.help-q>summary .qplus{color:var(--accent);font-size:18px;line-height:1.2;flex-shrink:0;transition:transform .2s}
.help-q[open]>summary .qplus{transform:rotate(45deg)}
.help-q .ans{font-size:13px;color:var(--text-dim);line-height:1.62;margin:0;padding:0 2px 13px}
.help-q .ans a{font-weight:600}
.help-wa{margin-top:16px;background:var(--bg-2);border:1px solid var(--border);border-radius:12px;padding:16px}
.help-wa .hw-lead{font-size:12.5px;color:var(--text-dim);line-height:1.55;margin:0 0 12px}
.help-wa .hw-lead b{color:var(--text)}
.help-wa-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;
  background:#25D366;color:#fff;font-size:14.5px;font-weight:700;padding:12px;border-radius:10px;
  box-shadow:0 6px 16px rgba(37,211,102,.28);transition:.18s}
.help-wa-btn:hover{filter:brightness(1.04);transform:translateY(-1px);color:#fff}
.help-hours{display:flex;align-items:flex-start;gap:8px;margin-top:11px;font-size:11.5px;color:var(--text-faint);line-height:1.5}
.help-hours .statusdot{margin-top:4px}
.help-hours .hw-live{color:var(--text-dim);font-weight:600}

/* ===== Parent-brand cross-sell (WINS Management AI) — light-bg version for /app ===== */
.app-promo{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:var(--bg-2);border:1px solid rgba(184,150,90,.28);border-radius:14px;padding:22px 24px}
.app-promo .ap-eyebrow{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);font-weight:700;margin-bottom:9px}
.app-promo .ap-line{font-family:var(--serif);font-size:19px;line-height:1.35;color:var(--text);max-width:46ch}
.app-promo .ap-line em{font-style:italic;color:var(--gold)}
.app-promo .ap-cta{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  background:transparent;color:var(--text);border:1px solid var(--gold);
  padding:12px 22px;border-radius:10px;font-weight:700;font-size:14.5px;font-family:var(--font);transition:.18s}
.app-promo .ap-cta:hover{background:var(--gold);border-color:var(--gold);color:var(--text);transform:translateY(-1px)}
/* IG follow links in /app footer */
.foot-ig{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:11px}
.foot-ig a{display:inline-flex;align-items:center;gap:6px;color:var(--text-dim);font-size:12px}
.foot-ig a:hover{color:var(--accent-2)}
.foot-ig svg{width:15px;height:15px}
@media(max-width:560px){
  .app-promo{flex-direction:column;align-items:flex-start;gap:16px}
  .app-promo .ap-cta{width:100%;justify-content:center}
}

/* ===== 手机:底部 tab 导航 + 顶栏自适应(共用) ===== */
.mnav{display:none}
@media(max-width:680px){
  .topbar{padding:0 16px}
  .topbar .t{font-size:17.5px}
  .topbar .links a{display:none}          /* 主导航下移到底部 tab,单手可达 */
  .topbar .links .langtoggle{margin-left:0}
  /* 底部 tab 栏 */
  .mnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;
    background:var(--text);border-top:1px solid rgba(255,255,255,.08);
    padding-bottom:env(safe-area-inset-bottom)}
  .mnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:8px 2px 7px;color:rgba(255,255,255,.55);font-size:11px;font-weight:600;
    text-decoration:none;transition:.15s;-webkit-tap-highlight-color:transparent}
  .mnav a .ico{width:23px;height:23px}
  .mnav a.active{color:var(--gold)}
  .mnav a:active{background:rgba(255,255,255,.06)}
  /* 普通滚动页:让出底部 tab 高度(收件箱自管高度,不吃这条) */
  body.mnav-on:not(.mnav-fixed){padding-bottom:62px}
}