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

/* U Plus Realty — Leads Management 主题 (靛蓝 #333183 + 青蓝 #00B5F0 · 稳重专业) */
:root{
  --bg:#FFFFFF;            /* 白底 */
  --bg-2:#F3F6FB;          /* 浅灰蓝 — 列表 / 面板背景(brand Alt Section) */
  --panel:rgba(255,255,255,0.82);
  --panel-solid:#ffffff;
  --border:#E2E8F0;        /* brand Divider */
  --text:#1F2937;          /* brand Heading 墨蓝黑 */
  --text-dim:#6B7280;      /* brand Body */
  --text-faint:#9CA3AF;

  --accent:#00B5F0;        /* 青蓝 — 交互 / 数据高亮 (brand Accent) */
  --accent-2:#333183;      /* 靛蓝 — 主品牌色 / 链接 / 深色操作 (brand Primary) */
  --accent-3:#00B5F0;
  --gold:#00B5F0;          /* eyebrow / 点缀 → 统一用青蓝 accent */
  --purple:#7C6EFA;
  --coral:#E8613A;

  --warn:#EF4444;          /* brand Error */
  --success:#10B981;       /* brand Success */
  --warning:#F59E0B;       /* brand Warning */
  --sunken:rgba(31,41,55,0.045);
  --shadow-sm:0 1px 2px rgba(31,41,55,.05),0 1px 3px rgba(31,41,55,.05);
  --shadow:0 2px 14px rgba(31,41,55,.08);
  --shadow-lg:0 24px 60px rgba(51,49,131,.18);
  --glow:var(--shadow);
  --radius:12px;
  --grad:linear-gradient(135deg,#333183,#00B5F0);   /* brand 渐层 */
  --font:"Noto Sans SC","PingFang SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",sans-serif;
  --serif:var(--font);      /* U Plus 无衬线体系:标题也用 sans */
}
*{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(0,181,240,.06),transparent 55%),
    linear-gradient(180deg,#FFFFFF 0%,#F3F6FB 100%);
  background-attachment:fixed;-webkit-font-smoothing:antialiased;}
a{color:var(--accent-2);text-decoration:none}

/* 标题系统(sans) */
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:.005em}
h1 em,h2 em,h3 em{font-style:normal;color:var(--accent)}
/* eyebrow 小标签 → 青蓝 */
.eyebrow{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);
  display:flex;align-items:center;gap:10px}
.eyebrow::after{content:'';flex:1;max-width:32px;height:1px;background:var(--accent)}

/* 线条图标系统 (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(--success);box-shadow:0 0 0 3px rgba(16,185,129,.18)}

/* 顶栏 — U Plus 靛蓝横栏 + 白字标 */
.topbar{height:56px;background:var(--accent-2);
  border-bottom:1px solid rgba(0,0,0,.12);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;
  /* PWA 加到主屏(standalone+viewport-fit=cover):靛蓝栏向上填满刘海区,内容下移到刘海下方,防走位 */
  padding-top:env(safe-area-inset-top,0px);
  padding-left:max(22px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right))}
.topbar .t{font-family:var(--font);font-weight:700;letter-spacing:.01em;
  display:flex;align-items:center;gap:9px;font-size:18px;color:#fff}
.topbar .t .ico{width:19px;height:19px;color:#fff}
.topbar .t img{height:24px;width:auto;display:block}
.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,.72);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,.12)}
.langtoggle{margin-left:10px;font-size:12px;font-weight:600;letter-spacing:.04em;color:#fff;
  background:transparent;border:1px solid rgba(255,255,255,.4);border-radius:8px;padding:5px 11px;transition:.18s}
.langtoggle:hover{background:var(--accent);border-color:var(--accent);color:#fff}
/* 顶栏右侧一组:语言钮 + 登出钮。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:#fff;background:transparent;border:1px solid rgba(255,255,255,.4);border-radius:8px;padding:5px 11px;cursor:pointer;transition:.18s}
.logout-btn:hover{background:rgba(255,255,255,.14);border-color:#fff}
/* 登出钮只在客户自助模式(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(51,49,131,.28)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(51,49,131,.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(0,181,240,.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)}

/* 状态徽章 — 浅 tint 底 + 深文字 */
.badge{padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600}
.s0{background:#E1F5FE;color:#0369A1}                 /* 青蓝 */
.s1{background:#EEF0FB;color:#333183}                 /* 靛蓝 */
.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:#E6F5EE;color:#147A63}
.b-qr{background:#EEF0FB;color:#333183}
.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(31,41,55,.16);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:rgba(31,41,55,.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}
/* 求助入口:青蓝小药丸,清楚读作「可点」。三页共用 */
.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(0,181,240,.07);
  border:1px solid rgba(0,181,240,.24);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(0,181,240,.13);border-color:rgba(0,181,240,.42)}
.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}

/* ===== 品牌横幅(可选,浅底) ===== */
.app-promo{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:var(--bg-2);border:1px solid rgba(0,181,240,.28);border-radius:14px;padding:22px 24px}
.app-promo .ap-eyebrow{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);font-weight:700;margin-bottom:9px}
.app-promo .ap-line{font-family:var(--font);font-size:19px;line-height:1.35;color:var(--text);max-width:46ch}
.app-promo .ap-line em{font-style:normal;color:var(--accent)}
.app-promo .ap-cta{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  background:transparent;color:var(--accent-2);border:1px solid var(--accent-2);
  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(--accent-2);border-color:var(--accent-2);color:#fff;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;padding-top:env(safe-area-inset-top,0px);
    padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
  .topbar .t{font-size:16.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(--accent-2);border-top:1px solid rgba(255,255,255,.10);
    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,.62);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:#fff}
  .mnav a.active .ico{color:var(--accent)}
  .mnav a:active{background:rgba(255,255,255,.08)}
  /* 普通滚动页:让出底部 tab 高度(收件箱自管高度,不吃这条) */
  body.mnav-on:not(.mnav-fixed){padding-bottom:calc(62px + env(safe-area-inset-bottom))}
}