/* ==========================================================================
   誉实科技 · 共享基础层
   内容：双主题色板 token / 布局 token / 主题切换器 / 右侧悬浮咨询组件
   两个页面（index.html / company.html）共用，改色只需改这里
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 布局与动效 token（不随主题变化）
   -------------------------------------------------------------------------- */
:root{
  --r-sm:6px; --r-lg:16px;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:120px;
  --maxw:1200px; --nav-h:72px;
  --spring:cubic-bezier(.34,1.42,.64,1);
  --spring-soft:cubic-bezier(.32,1.08,.56,1);
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}

/* --------------------------------------------------------------------------
   2. 深色主题色板（默认）
   -------------------------------------------------------------------------- */
:root{
  color-scheme: dark;

  --canvas:#080B11;
  --canvas-2:#0B1018;
  --surface:#101722;
  --surface-2:#161F2C;
  --band-bg:#0C121B;

  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --line-3:rgba(255,255,255,.22);

  --text:#E9EEF6;
  --text-2:#9BA8BA;
  --text-3:#66748A;

  --brand:#2B7FFF;
  --brand-hi:#4E96FF;
  --brand-deep:#1546B8;
  --brand-soft:rgba(43,127,255,.14);
  --teal:#12D3C2;
  --teal-ink:#5FE3D6;
  --teal-soft:rgba(18,211,194,.13);
  --warn:#F5A623;
  --danger:#FF6B6B;

  --grid-brand:rgba(43,127,255,.09);
  --grid-fine:rgba(255,255,255,.028);
  --glow-1:rgba(43,127,255,.26);
  --glow-2:rgba(18,211,194,.13);
  --glow-3:rgba(21,70,184,.18);

  --card-grad:linear-gradient(180deg,rgba(22,31,44,.72),rgba(16,23,34,.5));
  --panel-grad:linear-gradient(170deg,rgba(22,31,44,.85),rgba(11,16,24,.9));
  --form-grad:linear-gradient(175deg,rgba(22,31,44,.94),rgba(11,16,24,.96));
  --sheet-grad:linear-gradient(175deg,#131C28,#0B1119);
  --tbl-bg:rgba(16,23,34,.5);

  --input-bg:rgba(255,255,255,.04);
  --soft:rgba(255,255,255,.02);
  --soft-2:rgba(255,255,255,.06);

  --nav-glass:rgba(8,11,17,.72);
  --menu-bg:rgba(8,11,17,.94);
  --scrim:rgba(4,6,10,.7);
  --shadow-1:0 18px 40px -26px rgba(0,0,0,.6);
  --shadow-2:0 40px 80px -40px rgba(0,0,0,.9);
  --shadow-3:0 24px 60px -28px rgba(0,0,0,.85);

  --h1-a:#8FC0FF; --h1-b:#2B7FFF; --h1-c:#12D3C2;
  --icon-ink:#9CC4FF;
  --icon-ink-hi:#CFE1FF;

  /* 项目看板（随主题变化的产品界面卡） */
  --board-bg:linear-gradient(168deg,#111A26 0%,#0B121B 62%,#0A0F16 100%);
  --board-cell:rgba(255,255,255,.035);
  --board-cell-2:rgba(255,255,255,.055);
  --board-grid:rgba(255,255,255,.06);
  --board-glow:rgba(43,127,255,.16);
  --chip-warn-bg:rgba(245,166,35,.14);  --chip-warn-bd:rgba(245,166,35,.28);  --chip-warn-fg:#FFC46B;
  --chip-info-bg:rgba(43,127,255,.14);  --chip-info-bd:rgba(43,127,255,.30);  --chip-info-fg:#8FBBFF;
  --chip-ok-bg:rgba(18,211,194,.13);    --chip-ok-bd:rgba(18,211,194,.28);    --chip-ok-fg:#5FE3D6;

  /* 看板内的毛玻璃面板（KPI / 状态列表） */
  --glass-bg:rgba(255,255,255,.012);
  --glass-bg-hi:rgba(255,255,255,.032);
  --glass-gap:rgba(255,255,255,.052);
  --glass-bd:rgba(255,255,255,.10);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.13),inset 0 -1px 0 rgba(0,0,0,.14);
  --glass-shadow:0 10px 24px -20px rgba(0,0,0,.9),0 2px 6px -4px rgba(0,0,0,.45);
  --glass-blur:blur(14px) saturate(150%);

  /* 客户 logo 瓦片 */
  --logo-tile:#FFFFFF;
  --logo-tile-bd:rgba(255,255,255,.10);
}

/* --------------------------------------------------------------------------
   3. 浅色主题色板
   -------------------------------------------------------------------------- */
:root[data-theme="light"]{
  color-scheme: light;

  --canvas:#F5F6F8;
  --canvas-2:#EDF0F4;
  --surface:#FFFFFF;
  --surface-2:#F7F9FB;
  --band-bg:#E9EDF3;

  --line:rgba(13,20,32,.10);
  --line-2:rgba(13,20,32,.16);
  --line-3:rgba(13,20,32,.28);

  --text:#0F151D;
  --text-2:#4C5867;
  --text-3:#77839A;

  --brand:#2B7FFF;
  --brand-hi:#1A63D8;
  --brand-deep:#123F9E;
  --brand-soft:rgba(43,127,255,.10);
  --teal:#0FB3A5;
  --teal-ink:#0A7F76;
  --teal-soft:rgba(15,179,165,.10);
  --warn:#B87400;
  --danger:#D23C3C;

  --grid-brand:rgba(43,127,255,.10);
  --grid-fine:rgba(13,20,32,.045);
  --glow-1:rgba(43,127,255,.14);
  --glow-2:rgba(18,211,194,.10);
  --glow-3:rgba(21,70,184,.07);

  --card-grad:linear-gradient(180deg,#FFFFFF,#FBFCFE);
  --panel-grad:linear-gradient(170deg,#FFFFFF,#F5F8FB);
  --form-grad:linear-gradient(175deg,#FFFFFF,#F7F9FC);
  --sheet-grad:linear-gradient(175deg,#FFFFFF,#F6F9FC);
  --tbl-bg:#FFFFFF;

  --input-bg:#F3F6F9;
  --soft:rgba(13,20,32,.025);
  --soft-2:rgba(13,20,32,.06);

  --nav-glass:rgba(248,250,252,.80);
  --menu-bg:rgba(247,249,251,.96);
  --scrim:rgba(20,26,36,.42);
  --shadow-1:0 18px 40px -28px rgba(15,21,29,.26);
  --shadow-2:0 40px 80px -44px rgba(15,21,29,.32);
  --shadow-3:0 24px 60px -30px rgba(15,21,29,.24);

  --h1-a:#2B7FFF; --h1-b:#1A63D8; --h1-c:#0A7F76;
  --icon-ink:#1F63D6;
  --icon-ink-hi:#123F9E;

  /* 项目看板：浅色下同样用亮色玻璃卡，不再是深色孤岛 */
  --board-bg:linear-gradient(168deg,#FFFFFF 0%,#F8FAFD 58%,#F2F6FB 100%);
  --board-cell:rgba(43,127,255,.045);
  --board-cell-2:rgba(43,127,255,.075);
  --board-grid:rgba(13,20,32,.10);
  --board-glow:rgba(43,127,255,.10);
  --chip-warn-bg:rgba(245,166,35,.16);  --chip-warn-bd:rgba(200,124,10,.34);  --chip-warn-fg:#96600A;
  --chip-info-bg:rgba(43,127,255,.12);  --chip-info-bd:rgba(43,127,255,.30);  --chip-info-fg:#1A5FD0;
  --chip-ok-bg:rgba(15,179,165,.13);    --chip-ok-bd:rgba(10,127,118,.30);    --chip-ok-fg:#0A7F76;

  --glass-bg:rgba(255,255,255,.62);
  --glass-bg-hi:rgba(255,255,255,.88);
  --glass-gap:rgba(13,20,32,.07);
  --glass-bd:rgba(13,20,32,.06);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.98),inset 0 -1px 0 rgba(13,20,32,.04);
  --glass-shadow:0 12px 26px -20px rgba(15,21,29,.28),0 2px 6px -4px rgba(15,21,29,.09);
  --glass-blur:blur(14px) saturate(170%);

  --logo-tile:#FFFFFF;
  --logo-tile-bd:rgba(13,20,32,.10);
}

/* 主题切换时给一次性过渡（由 JS 加 .theme-anim 类，避免首屏闪动） */
html.theme-anim,
html.theme-anim body,
html.theme-anim *{
  /* 只过渡颜色类属性：box-shadow 不做插值，避免切换瞬间对上百个元素做阴影重绘 */
  transition:background-color .38s var(--ease-out),border-color .38s var(--ease-out),color .28s var(--ease-out) !important;
  transition-delay:0s !important;
}

/* --------------------------------------------------------------------------
   4. 主题切换入口（导航内）
   -------------------------------------------------------------------------- */
.theme{position:relative;flex:none}
.theme__btn{
  width:38px;height:38px;display:grid;place-items:center;border-radius:var(--r-sm);
  border:1px solid var(--line-2);color:var(--text-2);background:var(--soft);
  transition:color .24s var(--ease-out),background-color .24s var(--ease-out),border-color .24s var(--ease-out),transform .45s var(--spring);
}
.theme__btn:hover{color:var(--text);background:var(--soft-2);border-color:var(--line-3);transform:translateY(-1px)}
.theme__btn:active{transform:translateY(0) scale(.96)}
.theme__btn svg{width:17px;height:17px}
.theme__btn .i-moon,.theme__btn .i-auto{display:none}
:root[data-theme="dark"] .theme__btn .i-sun{display:none}
:root[data-theme="dark"] .theme__btn .i-moon{display:block}
:root[data-mode="auto"] .theme__btn .i-sun,
:root[data-mode="auto"] .theme__btn .i-moon{display:none}
:root[data-mode="auto"] .theme__btn .i-auto{display:block}

.theme__pop{
  position:absolute;right:0;top:calc(100% + 12px);width:212px;z-index:120;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:var(--shadow-3);padding:8px;
  opacity:0;transform:translateY(-8px) scale(.97);transform-origin:top right;pointer-events:none;
  transition:opacity .24s var(--ease-out),transform .46s var(--spring);
}
.theme__pop[data-open="true"]{opacity:1;transform:none;pointer-events:auto}
.theme__pop p{font-size:10px;letter-spacing:.14em;font-family:var(--mono);color:var(--text-3);padding:8px 10px 6px;text-transform:uppercase}
.theme__opt{
  width:100%;display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--r-sm);
  font-size:13px;color:var(--text-2);text-align:left;
  transition:background-color .2s var(--ease-out),color .2s;
}
.theme__opt svg{width:15px;height:15px;flex:none;opacity:.85}
.theme__opt i{font-style:normal;margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--text-3);opacity:0;transition:opacity .2s}
.theme__opt:hover{background:var(--soft-2);color:var(--text)}
.theme__opt[aria-checked="true"]{color:var(--text);background:var(--brand-soft)}
.theme__opt[aria-checked="true"] i{opacity:1;color:var(--brand-hi)}

/* 移动端菜单里的主题行 */
.theme-row{display:flex;align-items:center;gap:8px;margin-top:var(--s3)}
.theme-row > span{font-size:12px;color:var(--text-3);margin-right:auto}
.theme-chip{
  height:36px;padding:0 14px;border-radius:var(--r-sm);border:1px solid var(--line-2);
  font-size:12.5px;color:var(--text-2);background:var(--soft);
  transition:background-color .2s,border-color .2s,color .2s;
}
.theme-chip[aria-pressed="true"]{background:var(--brand-soft);border-color:var(--brand);color:var(--text)}

/* --------------------------------------------------------------------------
   5. 右侧悬浮快捷咨询组件
   -------------------------------------------------------------------------- */
.consult{
  position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:80;
  display:flex;align-items:center;
  font-family:var(--font);
}
.consult__rail{
  display:flex;flex-direction:column;gap:1px;
  background:var(--surface);border:1px solid var(--line-2);border-right:0;
  border-radius:var(--r-lg) 0 0 var(--r-lg);
  box-shadow:var(--shadow-3);overflow:hidden;
}
.consult__item{
  width:70px;padding:11px 2px 9px;display:flex;flex-direction:column;align-items:center;gap:5px;
  color:var(--text-2);background:var(--surface);position:relative;
  transition:background-color .24s var(--ease-out),color .24s var(--ease-out),transform .4s var(--spring);
}
.consult__item + .consult__item{border-top:1px solid var(--line)}
.consult__item svg{width:20px;height:20px}
.consult__item span{font-size:10.5px;letter-spacing:.01em;line-height:1;white-space:nowrap}
.consult__item:hover{background:var(--brand-soft);color:var(--brand-hi)}
.consult__item:active{transform:scale(.96)}
.consult__item--primary{color:var(--brand-hi)}
.consult__dot{
  position:absolute;top:9px;right:13px;width:6px;height:6px;border-radius:50%;
  background:var(--danger);box-shadow:0 0 0 2px var(--surface);
}
.consult__dot::after{
  content:"";position:absolute;inset:0;border-radius:50%;background:var(--danger);
  animation:consultPulse 2.4s infinite;
}
@keyframes consultPulse{0%{transform:scale(1);opacity:.6}70%{transform:scale(2.6);opacity:0}100%{opacity:0}}

/* 展开面板 */
.consult__panel{
  position:absolute;right:calc(100% - 1px);top:50%;
  width:256px;padding:20px;
  transform:translateY(-50%) translateX(10px) scale(.97);transform-origin:right center;
  opacity:0;pointer-events:none;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:var(--shadow-3);
  transition:opacity .26s var(--ease-out),transform .5s var(--spring);
}
.consult:hover .consult__panel,
.consult:focus-within .consult__panel,
.consult.is-pinned .consult__panel{
  opacity:1;transform:translateY(-50%) translateX(0) scale(1);pointer-events:auto;
}
.consult__eyebrow{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--brand-hi);text-transform:uppercase;margin-bottom:8px}
.consult__title{font-size:15px;font-weight:600;line-height:1.55;color:var(--text);display:flex;align-items:center;gap:6px}
.consult__title svg{width:15px;height:15px;color:var(--brand-hi);flex:none}
.consult__sub{font-size:11.5px;line-height:1.7;color:var(--text-3);margin-top:6px}
.consult__qr{position:relative;width:100%;aspect-ratio:1;margin:14px 0 10px;background:#fff;border-radius:var(--r-sm);border:1px solid var(--line-2);padding:9px;display:grid;place-items:center}
.consult__qr svg{width:100%;height:100%;display:block}
.consult__badge{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(150deg,#3D88FF,#12D3C2);color:#fff;font-size:13px;font-weight:600;
  border:2.5px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.consult__cap{font-size:11px;color:var(--text-3);text-align:center;margin-bottom:12px}
.consult__list{display:grid;gap:8px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:12px}
.consult__list li{display:flex;align-items:baseline;gap:8px;font-size:11.5px}
.consult__list span{color:var(--text-3);flex:none;width:56px}
.consult__list a,.consult__list b{color:var(--text);font-weight:500;font-variant-numeric:tabular-nums}
.consult__list a:hover{color:var(--brand-hi)}
.consult__cta{width:100%;height:40px!important;font-size:13px!important}
.consult__close{display:none}

/* 移动端 FAB（默认隐藏） */
.consult__fab{display:none}

/* ---- 移动端：改为右下角悬浮按钮 + 底部抽屉 ---- */
@media (max-width:767px){
  .consult{top:auto;bottom:calc(18px + env(safe-area-inset-bottom));right:16px;transform:none;display:block}
  .consult__rail{display:none}
  .consult__fab{
    display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
    background:linear-gradient(180deg,#3D88FF,#1F63E6);color:#fff;
    box-shadow:0 12px 28px -10px rgba(43,127,255,.8),inset 0 1px 0 rgba(255,255,255,.25);
    position:relative;transition:transform .45s var(--spring);
  }
  .consult__fab:active{transform:scale(.94)}
  .consult__fab svg{width:22px;height:22px}
  .consult__fab .consult__dot{top:2px;right:2px;box-shadow:0 0 0 2px #F5F6F8}
  .consult__panel{
    position:fixed;left:12px;right:12px;bottom:calc(80px + env(safe-area-inset-bottom));top:auto;width:auto;
    transform:translateY(16px) scale(.98);transform-origin:bottom center;
    border-radius:var(--r-lg);padding:20px;max-height:78svh;overflow:auto;
  }
  .consult.is-pinned .consult__panel{transform:translateY(0) scale(1)}
  .consult__close{
    display:grid;place-items:center;position:absolute;right:10px;top:10px;width:32px;height:32px;
    border-radius:var(--r-sm);border:1px solid var(--line);color:var(--text-2);background:var(--soft);
  }
  .consult__close svg{width:13px;height:13px}
  .consult__qr{width:168px;margin:14px auto 10px}
}

@media (prefers-reduced-motion:reduce){
  .consult__dot::after{animation:none}
  html.theme-anim,html.theme-anim body,html.theme-anim *{transition:none!important}
}

/* --------------------------------------------------------------------------
   6. 共享入场动效
   -------------------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .72s var(--ease-out),transform .82s var(--spring-soft);transition-delay:var(--d,0ms)}
.reveal.is-in{opacity:1;transform:none}
[data-stagger] > *{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease-out),transform .72s var(--spring-soft)}
[data-stagger] > *.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .reveal,[data-stagger] > *{opacity:1;transform:none;transition:none}
}

/* 离屏时暂停整棵子树的动画（由 app.js 的可见性观察器切换） */
.is-paused *{animation-play-state:paused!important}

/* 打印：隐藏一切浮层 */
@media print{
  .consult,.theme,.theme__pop{display:none!important}
}