/* GOTON workbench — design tokens, base elements and shell.
   Every colour is a token so the light and dark themes stay in step.
   Theme selection: html[data-theme="light"|"dark"]; with no attribute the
   system preference decides. app.js writes the attribute before first paint. */

:root{
  color-scheme:light;

  /* Type */
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;

  /* Shape */
  --radius-xs:6px;
  --radius-sm:8px;
  --radius:10px;
  --radius-lg:14px;
  --radius-xl:18px;
  --pill:980px;

  /* Motion — Apple-style ease out, short and confident */
  --ease:cubic-bezier(.32,.72,0,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --fast:.16s;
  --normal:.24s;
  --slow:.38s;

  /* Surfaces */
  --bg:#fafafa;
  --bg-deep:#f4f4f5;
  --surface:#ffffff;
  --surface-elevated:#ffffff;
  --surface-2:#f4f4f5;
  --surface-3:#ececee;
  --sidebar-bg:#fafafa;
  --topbar-bg:rgba(250,250,250,.82);
  --field-bg:#ffffff;
  --field-bg-soft:#f4f4f5;
  --row-hover:#f7f7f8;
  --table-head-bg:transparent;
  --scrim:rgba(9,9,11,.32);

  /* Lines */
  --line:#e4e4e7;
  --line-soft:#efeff1;
  --line-strong:#d4d4d8;
  --field-line:#e4e4e7;
  --field-line-hover:#c8c8ce;

  /* Labels */
  --ink:#09090b;
  --ink-soft:#27272a;
  --secondary:#71717a;
  --quiet:#a1a1aa;
  --on-accent:#ffffff;

  /* Accent */
  --accent:#2563eb;
  --accent-hover:#1d4ed8;
  --accent-deep:#1e40af;
  --accent-soft:#eff4ff;
  --accent-soft-strong:#dbe6fe;
  --accent-border:#bfd2fd;
  --focus-ring:rgba(24,24,27,.14);
  --accent-shadow:rgba(9,9,11,.10);

  /* Status */
  --success:#15803d;
  --success-soft:#ecfdf3;
  --warning:#b45309;
  --warning-soft:#fffbeb;
  --warning-border:#fde68a;
  --danger:#dc2626;
  --danger-soft:#fef2f2;
  --danger-border:#fecaca;
  --info-soft:#fafafa;
  --info-border:#e4e4e7;
  --info-ink:#52525b;

  /* Components */
  --control-bg:#ffffff;
  --control-bg-hover:#f4f4f5;
  --nav-hover:#f0f0f2;
  --nav-active-bg:#ececee;
  --nav-active-ink:#09090b;
  --brand-tile:#18181b;
  --brand-tile-ink:#fafafa;
  --step-dot:#d4d4d8;
  --step-done:#71717a;
  --skeleton-a:#f0f0f2;
  --skeleton-b:#f7f7f8;
  --toast-bg:rgba(24,24,27,.94);
  --toast-ink:#fafafa;
  --toast-danger:rgba(185,28,28,.96);
  --rail-bg:#f4f4f5;
  --rail-active-bg:#ffffff;
  --rail-active-ink:#09090b;
  --tooltip-bg:rgba(24,24,27,.96);
  --tooltip-ink:#fafafa;
  --login-panel:#f0f1f4;
  --login-ring:rgba(120,130,150,.18);
  --upload-bg:#fafafa;
  --upload-line:#d4d4d8;
  --surface-fade:rgba(255,255,255,0);
  --surface-fade-strong:rgba(255,255,255,.94);

  /* Elevation */
  --shadow-soft:0 1px 2px rgba(9,9,11,.04);
  --shadow-1:0 1px 2px rgba(9,9,11,.04),0 4px 12px rgba(9,9,11,.04);
  --shadow-2:0 2px 6px rgba(9,9,11,.06),0 12px 32px rgba(9,9,11,.08);
  --shadow-3:0 10px 30px rgba(9,9,11,.10),0 32px 80px rgba(9,9,11,.16);
  --shadow-popover:0 4px 12px rgba(9,9,11,.06),0 16px 40px rgba(9,9,11,.10);
  --shadow:var(--shadow-1);
  /* RC6.7 按钮（客户 9/23：黑白搭配不好看、悬停要有反馈）：主按钮苹果蓝实底，次按钮浅灰填充，悬停都加深。
     --solid 只留给选中的页签计数、流程条当前步这类「状态」，不再用在按钮上。 */
  --btn-primary:#0071e3;--btn-primary-hover:#0062c4;--btn-primary-ink:#ffffff;
  --btn-bg:color-mix(in srgb,var(--ink) 5.5%,var(--surface));--btn-hover:color-mix(in srgb,var(--ink) 11%,var(--surface));
  --solid:#18181b;
  --solid-hover:#27272a;
  --solid-ink:#fafafa;
  /* 提醒徽标用系统红，和飞书/iOS 的未读红点是同一种红。 */
  --badge:#ff3b30;
  --badge-ink:#ffffff;
  /* 图表：dataviz 参考调色板前五位（已按本页底色跑过色觉校验：相邻色差 ≥9，深色全部 ≥3:1）。
     文字永远用墨色令牌，不用系列色。 */
  --series-1:#2a78d6;
  --series-2:#eb6834;
  --series-3:#1baf7a;
  --series-4:#eda100;
  --series-5:#e87ba4;
  --series-muted:#d4d4d8;
  --chart-grid:#efeff1;
  --chart-axis:#d4d4d8;
}

/* ------------------------------------------------------------------ 语义别名
   抄组件时统一用下面这套名字（和 shadcn/ui 的 token 语义一一对应），不要再往组件里
   写十六进制，也不要新造一套灰阶。这一层只是别名：改配色改上面的原始令牌，这里跟着走，
   日夜两套自动一致。圆角同理 —— 全站只有 --radius 这一套梯度，别在组件里写 px。 */
:root,:root[data-theme="dark"]{
  --background:var(--bg);
  --foreground:var(--ink);
  --card:var(--surface);
  --card-foreground:var(--ink);
  --popover:var(--surface-elevated);
  --popover-foreground:var(--ink);
  --primary:var(--solid);
  --primary-foreground:var(--solid-ink);
  --secondary-bg:var(--surface-2);
  --secondary-foreground:var(--ink-soft);
  --muted:var(--surface-2);
  --muted-foreground:var(--secondary);
  --subtle-foreground:var(--quiet);
  --border:var(--line);
  --border-strong:var(--line-strong);
  --input:var(--field-line);
  --input-bg:var(--field-bg);
  --ring:var(--focus-ring);
  --destructive:var(--danger);
  --destructive-foreground:var(--on-accent);
  --destructive-muted:var(--danger-soft);
  --positive:var(--success);
  --positive-muted:var(--success-soft);
  --caution:var(--warning);
  --caution-muted:var(--warning-soft);
  --accent-muted:var(--accent-soft);
  --overlay:var(--scrim);

  /* 登录页（画面做底 + 毛玻璃卡片）。日夜各一套，只在这里定义，组件里不写死颜色。 */
  --login-aurora:radial-gradient(44% 48% at 16% 22%,color-mix(in srgb,var(--accent) 34%,transparent),transparent 70%),
                 radial-gradient(40% 46% at 84% 18%,color-mix(in srgb,#8f7bff 30%,transparent),transparent 72%),
                 radial-gradient(48% 52% at 60% 86%,color-mix(in srgb,#2fbfa4 30%,transparent),transparent 74%),
                 linear-gradient(140deg,#eef1f6,#e3e8f1 46%,#edf0f5);
  --login-scrim:linear-gradient(105deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.5) 42%,rgba(255,255,255,.3) 72%,rgba(255,255,255,.48) 100%);
  --login-ink:#14151a;
  --login-ink-soft:rgba(20,21,26,.74);
  --login-ink-quiet:rgba(20,21,26,.52);
  --login-card-bg:rgba(255,255,255,.62);
  --login-card-line:rgba(255,255,255,.75);
  --login-card-shadow:0 26px 70px rgba(24,28,40,.18),inset 0 1px 0 rgba(255,255,255,.9);
  --login-card-solid:rgba(252,252,254,.95);
  --login-field-bg:rgba(255,255,255,.7);
  --login-field-line:rgba(20,21,26,.16);
  --login-field-line-hover:rgba(20,21,26,.3);
  --login-field-focus:rgba(20,21,26,.55);
  --login-focus-ring:rgba(20,21,26,.1);
  --login-hair:rgba(20,21,26,.14);
  --login-primary-bg:#15161a;
  --login-primary-ink:#fff;
  --login-ghost-bg:rgba(255,255,255,.55);
}

:root[data-theme="dark"]{
  color-scheme:dark;
  --login-aurora:radial-gradient(42% 46% at 18% 24%,color-mix(in srgb,var(--accent) 52%,transparent),transparent 68%),
                 radial-gradient(38% 44% at 82% 20%,color-mix(in srgb,#7b5cff 46%,transparent),transparent 70%),
                 radial-gradient(46% 50% at 62% 84%,color-mix(in srgb,#12a58c 44%,transparent),transparent 72%),
                 linear-gradient(140deg,#11131a,#1b1f2b 45%,#0d1016);
  --login-scrim:linear-gradient(105deg,rgba(8,9,12,.78) 0%,rgba(8,9,12,.58) 42%,rgba(8,9,12,.34) 72%,rgba(8,9,12,.5) 100%);
  --login-ink:#fff;
  --login-ink-soft:rgba(255,255,255,.76);
  --login-ink-quiet:rgba(255,255,255,.52);
  --login-card-bg:rgba(255,255,255,.1);
  --login-card-line:rgba(255,255,255,.18);
  --login-card-shadow:0 30px 80px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.22);
  --login-card-solid:rgba(18,20,26,.9);
  --login-field-bg:rgba(255,255,255,.1);
  --login-field-line:rgba(255,255,255,.2);
  --login-field-line-hover:rgba(255,255,255,.34);
  --login-field-focus:rgba(255,255,255,.62);
  --login-focus-ring:rgba(255,255,255,.14);
  --login-hair:rgba(255,255,255,.18);
  --login-primary-bg:#fff;
  --login-primary-ink:#15161a;
  --login-ghost-bg:rgba(255,255,255,.1);
  --bg:#0a0a0a;
  --bg-deep:#000000;
  --surface:#141414;
  --surface-elevated:#1a1a1a;
  --surface-2:#1c1c1c;
  --surface-3:#262626;
  --sidebar-bg:#101010;
  --topbar-bg:rgba(10,10,10,.78);
  --field-bg:#161616;
  --field-bg-soft:#1f1f1f;
  --row-hover:#1a1a1a;
  --table-head-bg:transparent;
  --scrim:rgba(0,0,0,.6);

  --line:#262626;
  --line-soft:#1f1f1f;
  --line-strong:#333333;
  --field-line:#2e2e2e;
  --field-line-hover:#404040;

  --ink:#fafafa;
  --ink-soft:#e5e5e5;
  --secondary:#a3a3a3;
  --quiet:#737373;
  --on-accent:#fff;

  --accent:#60a5fa;
  --accent-hover:#93c5fd;
  --accent-deep:#bfdbfe;
  --accent-soft:rgba(96,165,250,.14);
  --accent-soft-strong:rgba(96,165,250,.22);
  --accent-border:rgba(96,165,250,.4);
  --focus-ring:rgba(250,250,250,.16);
  --accent-shadow:rgba(0,0,0,.5);

  --success:#4ade80;
  --success-soft:rgba(74,222,128,.12);
  --warning:#fbbf24;
  --warning-soft:rgba(251,191,36,.12);
  --warning-border:rgba(251,191,36,.28);
  --danger:#f87171;
  --danger-soft:rgba(248,113,113,.12);
  --danger-border:rgba(248,113,113,.3);
  --info-soft:#141414;
  --info-border:#262626;
  --info-ink:#b4b4b4;

  --control-bg:#161616;
  --control-bg-hover:#222222;
  --nav-hover:#1c1c1c;
  --nav-active-bg:#262626;
  --nav-active-ink:#fafafa;
  --brand-tile:#fafafa;
  --brand-tile-ink:#111111;
  --step-dot:#3a3a3a;
  --step-done:#8a8a8a;
  --skeleton-a:#1a1a1a;
  --skeleton-b:#232323;
  --toast-bg:rgba(245,245,245,.96);
  --toast-ink:#111111;
  --toast-danger:rgba(220,38,38,.96);
  --rail-bg:#0a0a0a;
  --rail-active-bg:#262626;
  --rail-active-ink:#fafafa;
  --tooltip-bg:rgba(245,245,245,.96);
  --tooltip-ink:#111111;
  --login-panel:#121214;
  --login-ring:rgba(255,255,255,.07);
  --upload-bg:#141414;
  --upload-line:#3a3a3a;
  --surface-fade:rgba(20,20,20,0);
  --surface-fade-strong:rgba(20,20,20,.94);

  --shadow-soft:0 1px 2px rgba(0,0,0,.5);
  --shadow-1:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.32);
  --shadow-2:0 2px 6px rgba(0,0,0,.5),0 14px 38px rgba(0,0,0,.5);
  --shadow-3:0 12px 34px rgba(0,0,0,.6),0 42px 96px rgba(0,0,0,.66);
  --shadow-popover:0 4px 14px rgba(0,0,0,.45),0 18px 44px rgba(0,0,0,.5);
  --solid:#fafafa;--solid-hover:#e5e5e5;--solid-ink:#111111;
  --btn-primary:#0a84ff;--btn-primary-hover:#409cff;--btn-primary-ink:#ffffff;
  --badge:#ff453a;--badge-ink:#ffffff;
  --series-1:#3987e5;--series-2:#d95926;--series-3:#199e70;--series-4:#c98500;--series-5:#d55181;--series-muted:#3a3a3a;
  --chart-grid:#1f1f1f;--chart-axis:#333333;
}

/* No stored preference: follow the system. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0a0a0a;--bg-deep:#000000;--surface:#141414;--surface-elevated:#1a1a1a;--surface-2:#1c1c1c;--surface-3:#262626;
    --sidebar-bg:#101010;--topbar-bg:rgba(10,10,10,.78);--field-bg:#161616;--field-bg-soft:#1f1f1f;--row-hover:#1a1a1a;
    --table-head-bg:transparent;--scrim:rgba(0,0,0,.6);
    --line:#262626;--line-soft:#1f1f1f;--line-strong:#333333;--field-line:#2e2e2e;--field-line-hover:#404040;
    --ink:#fafafa;--ink-soft:#e5e5e5;--secondary:#a3a3a3;--quiet:#737373;
    --accent:#60a5fa;--accent-hover:#93c5fd;--accent-deep:#bfdbfe;--accent-soft:rgba(96,165,250,.14);
    --accent-soft-strong:rgba(96,165,250,.22);--accent-border:rgba(96,165,250,.4);--focus-ring:rgba(250,250,250,.16);
    --accent-shadow:rgba(0,0,0,.5);
    --success:#4ade80;--success-soft:rgba(74,222,128,.12);--warning:#fbbf24;--warning-soft:rgba(251,191,36,.12);
    --warning-border:rgba(251,191,36,.28);--danger:#f87171;--danger-soft:rgba(248,113,113,.12);--danger-border:rgba(248,113,113,.3);
    --info-soft:#141414;--info-border:#262626;--info-ink:#b4b4b4;
    --control-bg:#161616;--control-bg-hover:#222222;--nav-hover:#1c1c1c;--nav-active-bg:#262626;--nav-active-ink:#fafafa;
    --brand-tile:#fafafa;--brand-tile-ink:#111111;--step-dot:#3a3a3a;--step-done:#8a8a8a;--skeleton-a:#1a1a1a;--skeleton-b:#232323;
    --toast-bg:rgba(245,245,245,.96);--toast-ink:#111111;--toast-danger:rgba(220,38,38,.96);
    --rail-bg:#0a0a0a;--rail-active-bg:#262626;--rail-active-ink:#fafafa;--tooltip-bg:rgba(245,245,245,.96);--tooltip-ink:#111111;
    --login-panel:#121214;--login-ring:rgba(255,255,255,.07);--upload-bg:#141414;--upload-line:#3a3a3a;
    --login-aurora:radial-gradient(42% 46% at 18% 24%,color-mix(in srgb,var(--accent) 52%,transparent),transparent 68%),radial-gradient(38% 44% at 82% 20%,color-mix(in srgb,#7b5cff 46%,transparent),transparent 70%),radial-gradient(46% 50% at 62% 84%,color-mix(in srgb,#12a58c 44%,transparent),transparent 72%),linear-gradient(140deg,#11131a,#1b1f2b 45%,#0d1016);
    --login-scrim:linear-gradient(105deg,rgba(8,9,12,.78) 0%,rgba(8,9,12,.58) 42%,rgba(8,9,12,.34) 72%,rgba(8,9,12,.5) 100%);
    --login-ink:#fff;--login-ink-soft:rgba(255,255,255,.76);--login-ink-quiet:rgba(255,255,255,.52);
    --login-card-bg:rgba(255,255,255,.1);--login-card-line:rgba(255,255,255,.18);--login-card-solid:rgba(18,20,26,.9);
    --login-card-shadow:0 30px 80px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.22);
    --login-field-bg:rgba(255,255,255,.1);--login-field-line:rgba(255,255,255,.2);--login-field-line-hover:rgba(255,255,255,.34);
    --login-field-focus:rgba(255,255,255,.62);--login-focus-ring:rgba(255,255,255,.14);--login-hair:rgba(255,255,255,.18);
    --login-primary-bg:#fff;--login-primary-ink:#15161a;--login-ghost-bg:rgba(255,255,255,.1);
    --surface-fade:rgba(20,20,20,0);--surface-fade-strong:rgba(20,20,20,.94);
    --shadow-soft:0 1px 2px rgba(0,0,0,.5);
    --shadow-1:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.32);
    --shadow-2:0 2px 6px rgba(0,0,0,.5),0 14px 38px rgba(0,0,0,.5);
    --shadow-3:0 12px 34px rgba(0,0,0,.6),0 42px 96px rgba(0,0,0,.66);
    --shadow-popover:0 4px 14px rgba(0,0,0,.45),0 18px 44px rgba(0,0,0,.5);
    --solid:#fafafa;--solid-hover:#e5e5e5;--solid-ink:#111111;
    --btn-primary:#0a84ff;--btn-primary-hover:#409cff;--btn-primary-ink:#ffffff;
      --badge:#ff453a;--badge-ink:#ffffff;
      --series-1:#3987e5;--series-2:#d95926;--series-3:#199e70;--series-4:#c98500;--series-5:#d55181;--series-muted:#3a3a3a;
      --chart-grid:#1f1f1f;--chart-axis:#333333;
  }
}

/* 登录页只有夜间一套（老板 2026-09-25：登录页不给选白色，进了工作台再选日夜）。不管外观设成什么，登录页都用这组令牌。 */
.login-layout{color-scheme:dark;
  --login-art-bg:#050506;--login-art-dot:#f4f3ef;--login-card-dot:rgba(255,255,255,.36);
  --login-ink:#fff;--login-ink-soft:rgba(255,255,255,.76);--login-ink-quiet:rgba(255,255,255,.52);
  --login-primary-bg:#fff;--login-primary-ink:#15161a}

*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:14px/1.6 var(--font);letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-variant-numeric:tabular-nums;
  transition:background var(--normal) var(--ease-soft),color var(--normal) var(--ease-soft);
}
button,input,select,textarea{font:inherit;color:inherit}
button,a{touch-action:manipulation}
button{cursor:pointer}
button:disabled{cursor:wait;opacity:.45}
a{color:var(--accent);text-decoration:none}
[hidden]{display:none!important}
.seg label[hidden]{display:none!important}
h1,h2,h3,h4,p{margin:0}
h1{font-size:26px;line-height:1.3;letter-spacing:-.022em;font-weight:600}
h2{font-size:20px;line-height:1.32;letter-spacing:-.019em;font-weight:600}
h3{font-size:15px;letter-spacing:-.012em;font-weight:600}
::selection{background:var(--accent-soft-strong);color:var(--ink)}
::placeholder{color:var(--quiet)}

/* One focus treatment everywhere: a soft Apple-style ring, never on mouse clicks. */
:focus{outline:none}
:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring);border-radius:var(--radius-xs)}
.btn:focus-visible,.icon-button:focus-visible,.tab:focus-visible,.nav-item:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{box-shadow:0 0 0 3px var(--focus-ring)}

/* Scrollbars stay out of the way until used. */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--quiet) 34%,transparent);border-radius:var(--radius-xs);border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--quiet) 55%,transparent);background-clip:content-box}
*::-webkit-scrollbar-track{background:transparent}

.muted{color:var(--secondary);font-size:13px}
.fine{font-size:12px;color:var(--secondary);line-height:1.65}
.eyebrow{font-size:10px;font-weight:650;letter-spacing:.14em;color:var(--quiet);margin-bottom:8px;text-transform:uppercase}

/* ---------- Buttons ---------- */
.btn{
  border:1px solid transparent;border-radius:var(--radius-sm);
  background:var(--btn-bg);color:var(--ink);cursor:pointer;
  padding:6px 13px;font-weight:500;font-size:13px;letter-spacing:-.006em;min-height:34px;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;
  box-shadow:none;
  transition:background var(--fast) var(--ease-soft),border-color var(--fast) var(--ease-soft),
             transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease-soft),color var(--fast) var(--ease-soft);
}
.btn:hover{background:var(--btn-hover)}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.45;cursor:default;transform:none}
.btn.primary{background:var(--btn-primary);color:var(--btn-primary-ink);border-color:transparent}
.btn.primary:hover:not(:disabled){background:var(--btn-primary-hover)}
.btn.danger{color:var(--danger);background:var(--btn-bg)}
.btn.danger:hover:not(:disabled){background:var(--danger-soft)}
.btn.small{min-height:28px;padding:3px 10px;font-size:12px;border-radius:var(--radius-xs)}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none}
.btn.ghost:hover{background:var(--control-bg-hover)}
.btn.full{width:100%}
.text-button{border:0;background:none;padding:4px;color:var(--secondary);font:inherit;font-size:12px;cursor:pointer;border-radius:var(--radius-xs);transition:color var(--fast) var(--ease-soft)}
.text-button:hover{color:var(--accent)}
.icon-button{
  position:relative;border:0;background:transparent;color:var(--secondary);
  width:34px;height:34px;border-radius:var(--radius-sm);display:grid;place-items:center;font-size:17px;
  transition:background var(--fast) var(--ease-soft),color var(--fast) var(--ease-soft),transform var(--fast) var(--ease);
}
.icon-button:hover{background:var(--control-bg-hover);color:var(--ink)}
.icon-button:active{transform:scale(.93)}

.logo-tile{width:42px;height:42px;background:var(--brand-tile);color:var(--brand-tile-ink);display:grid;place-items:center;border-radius:var(--radius);font:600 24px/1 Georgia,serif;box-shadow:var(--shadow-1)}
.logo-tile.small{width:30px;height:30px;font-size:19px;border-radius:var(--radius-sm)}
.avatar{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:var(--surface-3);color:var(--secondary);font-size:11px;font-weight:600}

/* ---------- Shell ---------- */
.workspace{display:flex;min-height:100vh}
.sidebar{display:flex;flex-shrink:0;background:transparent;border:0;padding:0}

/* Level 1 — the icon rail. Hovering an icon slides its name out beside it. */
.railbar{
  width:64px;flex-shrink:0;background:var(--rail-bg);border-right:1px solid var(--line);
  height:100vh;position:sticky;top:0;display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 0 12px;z-index:30;
}
.side-brand{display:grid;place-items:center;padding:0 0 6px;color:var(--ink)}
.rail{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;min-height:0}
.rail-btn{
  width:40px;height:40px;border-radius:var(--radius);border:0;background:transparent;color:var(--secondary);
  display:grid;place-items:center;position:relative;cursor:pointer;
  transition:background var(--normal) var(--ease),color var(--normal) var(--ease),transform var(--fast) var(--ease);
}
.rail-btn>svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rail-btn:hover{background:var(--nav-hover);color:var(--ink)}
.rail-btn:active{transform:scale(.9)}
.rail-btn.active{background:var(--rail-active-bg);color:var(--rail-active-ink);box-shadow:var(--shadow-soft),0 0 0 1px var(--line)}
.rail-btn::after{
  content:attr(data-label);position:absolute;left:50px;top:50%;white-space:nowrap;
  background:var(--tooltip-bg);color:var(--tooltip-ink);font-size:12px;font-weight:500;padding:5px 11px;border-radius:var(--radius-sm);
  box-shadow:var(--shadow-popover);pointer-events:none;z-index:80;
  opacity:0;transform:translate(-8px,-50%) scale(.94);transform-origin:left center;
  transition:opacity var(--normal) var(--ease),transform var(--normal) var(--ease);
}
.rail-btn:hover::after,.rail-btn:focus-visible::after{opacity:1;transform:translate(0,-50%) scale(1)}

/* Level 2 — the group panel. */
.navpanel{
  width:234px;flex-shrink:0;background:var(--sidebar-bg);border-right:1px solid var(--line);
  height:100vh;position:sticky;top:0;display:flex;flex-direction:column;padding:14px 10px;min-width:0;
}
.navpanel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 6px 10px}
.navpanel-head strong{font-size:15px;font-weight:620;letter-spacing:-.014em}
.navpanel-search{
  display:flex;align-items:center;gap:7px;height:34px;padding:0 11px;margin-bottom:10px;
  border-radius:var(--pill);background:var(--field-bg-soft);border:1px solid transparent;color:var(--quiet);
  transition:background var(--fast) var(--ease-soft),border-color var(--fast) var(--ease-soft),box-shadow var(--fast) var(--ease-soft);
}
.navpanel-search:focus-within{background:var(--field-bg);border-color:var(--line-strong);box-shadow:0 0 0 3px var(--focus-ring)}
.navpanel-search input{border:0;background:transparent;width:100%;min-width:0;font-size:12.5px;outline:0;color:var(--ink)}
.navpanel-search input:focus-visible{box-shadow:none}
#navigation{flex:1;overflow-y:auto;min-height:0;padding-bottom:6px}
.nav-item{display:flex;align-items:center;gap:10px;margin:2px 0;padding:8px 11px;border-radius:var(--radius-sm);color:var(--secondary);font-size:13px;font-weight:500;position:relative;
  transition:background var(--fast) var(--ease-soft),color var(--fast) var(--ease-soft),transform var(--fast) var(--ease)}
.nav-item svg{width:17px;height:17px;opacity:.9;flex-shrink:0}
.nav-item:hover{background:var(--nav-hover);color:var(--ink)}
.nav-item:active{transform:scale(.985)}
.nav-item.active{background:var(--nav-active-bg);color:var(--nav-active-ink);font-weight:550}
.nav-item.active svg{opacity:1}
/* Level 3 — the sections inside a page. */
.nav-sub{margin:1px 0 8px 22px;padding-left:11px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:1px;animation:sub-in var(--normal) var(--ease)}
.nav-subitem{border:0;background:transparent;text-align:left;font:inherit;font-size:12.5px;color:var(--secondary);padding:6px 10px;border-radius:var(--radius-xs);cursor:pointer;
  transition:background var(--fast) var(--ease-soft),color var(--fast) var(--ease-soft)}
.nav-subitem:hover{background:var(--nav-hover);color:var(--ink)}
.nav-empty{padding:14px 10px;color:var(--quiet);font-size:12px}
@keyframes sub-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.sidebar-bottom{margin-top:auto;padding:12px 8px 0;border-top:1px solid var(--line);color:var(--quiet);flex-shrink:0}
.sidebar-bottom small{font-size:11px}
.connection{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--secondary);margin-bottom:4px}
.connection i{height:6px;width:6px;border-radius:50%;background:var(--success);box-shadow:0 0 0 3px color-mix(in srgb,var(--success) 18%,transparent)}
.shell{min-width:0;flex:1}

.topbar{
  height:60px;position:sticky;top:0;z-index:20;
  background:var(--topbar-bg);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line);padding:0 26px;display:flex;align-items:center;justify-content:space-between;gap:15px;
}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:10px}
.topbar-left{font-size:12px;color:var(--secondary)}
.topbar-right{font-size:12px}
.environment{background:var(--warning-soft);color:var(--warning);font-size:10px;font-weight:600;border-radius:var(--pill);padding:3px 9px}
.topbar select{max-width:142px;height:29px;border:1px solid var(--line);background:var(--field-bg);border-radius:var(--radius-xs);font-size:11px;color:var(--secondary);padding:0 6px}
.count-dot{position:absolute;right:1px;top:1px;min-width:15px;height:15px;background:var(--danger);border-radius:var(--pill);font-size:9px;color:#fff;line-height:15px;text-align:center;padding:0 3px;font-weight:600}
.mobile-only{display:none}

#main{padding:28px 32px 44px;max-width:1740px;margin:0 auto}
.page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}
.page-heading .muted{margin-top:6px;max-width:760px}
.main-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}

/* 第三级（页内分组）：分段控件。和第一级图标栏、第二级面板用同一种"选中＝实底中性色块"的语言。 */
.page-tabs{display:inline-flex;align-items:center;gap:2px;padding:3px;margin:-4px 0 18px;background:var(--surface-2);border-radius:var(--radius);max-width:100%}
.tab{
  border:0;background:transparent;padding:5px 12px;border-radius:var(--radius-sm);color:var(--secondary);font-size:13px;font-weight:500;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;
  transition:color var(--fast) var(--ease-soft),background var(--fast) var(--ease-soft),box-shadow var(--fast) var(--ease-soft);
}
.tab:hover{color:var(--ink)}
.tab.active{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-soft),0 0 0 1px var(--line-soft)}

.page-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:14px}
.search-box{
  display:flex;align-items:center;gap:8px;background:var(--field-bg-soft);border:1px solid transparent;
  border-radius:var(--radius-sm);height:37px;padding:0 12px;width:320px;max-width:100%;
  transition:background var(--fast) var(--ease-soft),border-color var(--fast) var(--ease-soft),box-shadow var(--fast) var(--ease-soft);
}
.search-box:focus-within{background:var(--field-bg);border-color:var(--line-strong);box-shadow:0 0 0 3px var(--focus-ring)}
.search-box span{font-size:19px;line-height:1;color:var(--quiet)}
.search-box input{border:0;background:transparent;min-width:0;width:100%;height:33px;font-size:13px;outline:0;color:var(--ink)}
.search-box input:focus-visible{box-shadow:none}
.filter-group{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.filter-group select{border:1px solid var(--field-line);border-radius:var(--radius-xs);background:var(--field-bg);color:var(--secondary);padding:7px 9px;font-size:12px;max-width:240px;transition:border-color var(--fast) var(--ease-soft)}
.filter-group select:hover{border-color:var(--field-line-hover)}

/* ---------- Panels & tables ---------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-soft)}
.panel-body{padding:22px}
.panel-head{padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.panel-head h3{font-size:14px;font-weight:600}
.panel-head p{font-size:11px;color:var(--secondary);margin-top:3px}
.panel-head+.panel-body{padding-top:0}
.table-scroll{overflow:auto;width:100%}
table{border-collapse:collapse;width:100%;text-align:left;white-space:nowrap}
th{
  font-size:12px;color:var(--secondary);font-weight:500;background:var(--table-head-bg);height:40px;
  border-bottom:1px solid var(--line);padding:0 14px;letter-spacing:0;
}
td{padding:11px 14px;font-size:13px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr{transition:background var(--fast) var(--ease-soft)}
tbody tr:hover{background:var(--row-hover)}
.num{text-align:right;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.row-title{font-weight:500;font-size:13px;color:var(--ink)}
.row-sub{font-size:12px;color:var(--secondary);margin-top:2px}
.link-button{color:var(--accent);font-size:12px;background:none;border:0;padding:3px 0;text-align:left;cursor:pointer;border-radius:var(--radius-xs);transition:opacity var(--fast) var(--ease-soft)}
.link-button:hover{text-decoration:underline;opacity:.82}

/* 状态徽标：描边 + 圆点，文字用墨色，颜色只在圆点上（shadcn Badge outline）。 */
.status{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-soft);background:var(--surface);border:1px solid var(--line);padding:1px 8px 1px 7px;border-radius:var(--radius-sm);white-space:nowrap;font-weight:500;line-height:20px}
.status::before{content:"";width:6px;height:6px;background:var(--quiet);border-radius:50%;flex:none}
.status.good::before{background:var(--success)}
.status.wait::before{background:var(--warning)}
.status.bad{color:var(--danger);border-color:var(--danger-border)}
.status.bad::before{background:var(--danger)}

/* ---------- Dashboard ---------- */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
.metric{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px 20px;min-width:0;
  box-shadow:var(--shadow-soft);
  transition:transform var(--normal) var(--ease),box-shadow var(--normal) var(--ease),border-color var(--fast) var(--ease-soft);
}
.metric p{font-size:12px;color:var(--secondary)}
.metric .value{font-size:26px;font-weight:600;line-height:1.2;letter-spacing:-.025em;margin:10px 0 6px;white-space:nowrap}
.metric small{font-size:11px;color:var(--quiet)}
.metric .unit{font-size:14px;font-weight:400;color:var(--secondary);margin-left:5px}
.dashboard-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:20px}

.task-row{display:flex;align-items:center;justify-content:space-between;padding:15px 22px;border-top:1px solid var(--line-soft);gap:16px;transition:background var(--fast) var(--ease-soft)}
.task-row:hover{background:var(--row-hover)}
.task-left{display:flex;align-items:center;gap:12px;min-width:0}
.task-icon{height:31px;width:31px;border-radius:var(--radius-sm);background:var(--surface-3);color:var(--secondary);display:grid;place-items:center;flex-shrink:0}
.task-text{min-width:0}
.task-text strong{font-size:12px;font-weight:560}
.task-text small{font-size:10px;color:var(--quiet);display:block;overflow:hidden;text-overflow:ellipsis;max-width:440px}
.task-meta{font-size:11px;color:var(--quiet);white-space:nowrap}

.summary-line{display:flex;justify-content:space-between;gap:20px;padding:11px 0;border-bottom:1px solid var(--line-soft);font-size:12px}
.summary-line:last-child{border-bottom:0}
.summary-line .label{color:var(--secondary)}
.summary-total{font-weight:600;border-top:1px solid var(--line);margin-top:5px;padding-top:15px}
.summary-total span:last-child{font-size:18px}

.callout{background:var(--info-soft);border:1px solid var(--info-border);border-radius:var(--radius);padding:11px 14px;font-size:13px;color:var(--info-ink);line-height:1.65;margin-bottom:16px}
.callout.warning{background:var(--warning-soft);color:var(--warning);border-color:var(--warning-border)}
.callout.danger{background:var(--danger-soft);color:var(--danger);border-color:var(--danger-border)}

.empty{padding:46px 25px;text-align:center;color:var(--quiet)}
.empty h3{font-size:15px;color:var(--secondary);margin:10px 0 6px}
.empty p{font-size:12px;max-width:460px;margin:auto}
.empty .btn{margin-top:18px}
.pagination{display:flex;justify-content:space-between;align-items:center;margin-top:16px;font-size:11px;color:var(--quiet)}
.pagination>div{display:flex;align-items:center;gap:8px}
.skeleton{height:250px;background:linear-gradient(90deg,var(--skeleton-a),var(--skeleton-b),var(--skeleton-a));background-size:200%;animation:shimmer 1.6s infinite;border-radius:var(--radius)}
.error{color:var(--danger);font-size:12px;line-height:1.7;white-space:pre-wrap}
.error:empty{display:none}
.loading-note{color:var(--secondary);font-size:12px}

/* ---------- Dialogs ---------- */
.overlay{
  position:fixed;inset:0;background:var(--scrim);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  z-index:100;display:flex;align-items:center;justify-content:center;padding:24px;
  animation:fade var(--fast) var(--ease-soft);
}
.dialog{
  background:var(--surface-elevated);border:1px solid var(--line);
  box-shadow:var(--shadow-3);border-radius:var(--radius-lg);
  width:760px;max-width:100%;max-height:calc(100dvh - 48px);
  display:flex;flex-direction:column;overflow:hidden;animation:pop var(--normal) var(--ease);
}
.dialog.wide{width:1080px}
.dialog-header{padding:22px 26px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.dialog-header h2{font-size:18px}
.dialog-header p{font-size:12px;color:var(--secondary);margin-top:5px}
.dialog-body{overflow:auto;padding:22px 26px;overscroll-behavior:contain}
.dialog-footer{display:flex;justify-content:flex-end;align-items:center;gap:9px;padding:15px 26px;border-top:1px solid var(--line);background:var(--surface-2)}
.dialog-footer .fine{margin-right:auto}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
.field{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:550;min-width:0}
.field.full{grid-column:1/-1}
.field input:not([type=checkbox]),.field select,.field textarea,.editable-input{
  border:1px solid var(--field-line);border-radius:var(--radius-sm);background:var(--field-bg);
  padding:9px 11px;color:var(--ink);font-size:13px;width:100%;min-width:0;
  transition:border-color var(--fast) var(--ease-soft),box-shadow var(--fast) var(--ease-soft),background var(--fast) var(--ease-soft);
}
.field input:not([type=checkbox]):hover,.field select:hover,.field textarea:hover{border-color:var(--field-line-hover)}
.field input:not([type=checkbox]):focus,.field select:focus,.field textarea:focus,.editable-input:focus{
  outline:none;border-color:var(--line-strong);box-shadow:0 0 0 3px var(--focus-ring);
}
.field textarea{min-height:76px;resize:vertical;line-height:1.6}
.field input[readonly]{background:var(--surface-2);color:var(--quiet)}
.field small{font-size:11px;color:var(--quiet);font-weight:400;line-height:1.55}
.field .optional{font-weight:400;color:var(--quiet)}
.field .check-label{display:flex;align-items:flex-start;gap:8px;font-weight:400;padding:9px 0;font-size:12px;color:var(--secondary)}
.section-label{grid-column:1/-1;font-size:12px;font-weight:650;color:var(--ink);letter-spacing:.01em;margin-top:7px;padding-bottom:8px;border-bottom:1px solid var(--line)}

/* Uploads accept a drop from the desktop; app.js toggles .dragover. */
.upload-field{
  border:1.5px dashed var(--upload-line);border-radius:var(--radius-sm);background:var(--upload-bg);
  padding:12px;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:54px;
  transition:border-color var(--fast) var(--ease-soft),background var(--fast) var(--ease-soft),transform var(--fast) var(--ease);
}
.upload-field:hover{border-color:var(--accent-border)}
.upload-field.dragover{border-color:var(--accent);background:var(--accent-soft);transform:scale(1.008)}
.upload-field .file-note{font-size:11px;color:var(--secondary);overflow:hidden;text-overflow:ellipsis;max-width:100%}
.upload-field input[type=file]{font-size:11px;background:transparent;border:none;padding:0;max-width:220px;color:var(--secondary)}
.upload-field input[type=file]::file-selector-button{
  font:inherit;font-size:11px;border:1px solid var(--line-strong);background:var(--control-bg);color:var(--ink);
  border-radius:var(--radius-xs);padding:5px 10px;margin-right:9px;cursor:pointer;
  transition:background var(--fast) var(--ease-soft),border-color var(--fast) var(--ease-soft);
}
.upload-field input[type=file]::file-selector-button:hover{background:var(--control-bg-hover);border-color:var(--field-line-hover)}
.form-error{margin-top:14px}

.drawer-overlay{align-items:stretch;justify-content:flex-end;padding:0;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.drawer.narrow{width:600px}
.drawer{width:920px;max-width:100%;height:100%;max-height:none;border-radius:0;border:none;border-left:1px solid var(--line);animation:slide var(--normal) var(--ease)}
.drawer .dialog-header{padding:25px 28px 20px}
.drawer .dialog-body{padding:22px 28px}
.drawer-tabs{display:flex;gap:19px;padding:0 28px;border-bottom:1px solid var(--line);overflow-x:auto;flex-shrink:0}
.drawer-actions{display:flex;flex-wrap:wrap;gap:8px;padding:16px 28px 0}

.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px 22px}
.detail-field small{display:block;color:var(--quiet);font-size:11px;margin-bottom:4px}
.detail-field div{font-size:13px;overflow-wrap:anywhere}

.steps{display:flex;margin:4px 0 22px;gap:0}
.step{flex:1;position:relative;text-align:center;padding-top:28px;font-size:11px;color:var(--quiet)}
.step::before{position:absolute;content:"";width:9px;height:9px;background:var(--step-dot);border:3px solid var(--surface);box-shadow:0 0 0 1px var(--step-dot);border-radius:50%;left:calc(50% - 7px);top:2px;z-index:2;transition:background var(--normal) var(--ease),box-shadow var(--normal) var(--ease)}
.step::after{position:absolute;content:"";height:1px;background:var(--line);width:100%;left:50%;top:9px}
.step:last-child::after{display:none}
.step.done{color:var(--accent-deep)}
.step.done::before{background:var(--step-done);box-shadow:0 0 0 1px var(--step-done)}
.step.current{color:var(--accent);font-weight:600}
.step.current::before{background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}

.timeline{border-left:1px solid var(--line);margin:10px 0 0 7px;padding-left:23px}
.timeline-item{position:relative;margin-bottom:22px}
.timeline-item::before{content:"";position:absolute;left:-27px;top:7px;width:7px;height:7px;border-radius:50%;background:var(--quiet);border:2px solid var(--surface);box-sizing:content-box}
.timeline-item strong{font-size:12px;font-weight:550}
.timeline-item p{font-size:11px;color:var(--quiet);margin-top:3px}

.hotel-search{width:100%;height:44px;margin-bottom:16px}
.hotel-results{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-height:54vh;overflow:auto}
.hotel-option{
  border:1px solid var(--line);border-radius:var(--radius);padding:15px 17px;text-align:left;background:var(--surface);
  display:flex;gap:14px;align-items:center;min-height:85px;color:var(--ink);
  transition:background var(--fast) var(--ease-soft),border-color var(--fast) var(--ease-soft),transform var(--fast) var(--ease);
}
.hotel-option:hover,.hotel-option:focus{background:var(--accent-soft);border-color:var(--accent-border)}
.hotel-option:active{transform:scale(.99)}
.hotel-monogram{display:grid;place-items:center;background:var(--surface-3);border-radius:var(--radius-sm);width:38px;height:38px;color:var(--secondary);font-size:18px;flex-shrink:0}
.hotel-option strong{font-size:13px;font-weight:560;display:block}
.hotel-option small{font-size:11px;color:var(--quiet);display:block;margin-top:4px}

.picker-trigger{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--field-line);border-radius:var(--radius-sm);background:var(--field-bg);padding:9px 11px;color:var(--ink);width:100%;font-size:13px;text-align:left;transition:border-color var(--fast) var(--ease-soft)}
.picker-trigger:hover{border-color:var(--field-line-hover)}
.picker-trigger .arrow{color:var(--quiet);margin-left:10px}
.picker-results{margin-top:4px}

.file-row{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}
.file-row .file-name{font-size:12px}
.file-row small{display:block;color:var(--quiet);font-size:10px}

.compact-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.compact-card{
  border:1px solid var(--line);border-radius:var(--radius);padding:17px;background:var(--surface);
  transition:transform var(--normal) var(--ease),box-shadow var(--normal) var(--ease),border-color var(--fast) var(--ease-soft);
}
.compact-card:hover{border-color:var(--line-strong);box-shadow:var(--shadow-1);transform:translateY(-1px)}
.compact-card small{font-size:11px;color:var(--secondary)}
.compact-card h3{font-size:14px;margin:4px 0 9px}
.card-actions{display:flex;gap:7px;margin-top:14px;flex-wrap:wrap;align-items:center}
.two-columns{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.space-top{margin-top:20px}
.row-actions{display:flex;gap:10px;justify-content:flex-end;align-items:center}
.pre-content{white-space:pre-wrap;word-break:break-word;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:15px;font:12px/1.7 var(--font-mono);max-height:400px;overflow:auto}
.source-grid td{max-width:420px;white-space:normal;word-break:break-word;font-size:11px}

#toast-root{position:fixed;bottom:25px;right:28px;z-index:500;display:flex;flex-direction:column;gap:10px;max-width:min(450px,calc(100vw - 32px))}
/* 提示条和铃铛下拉同一种卡片：浅底、细边框、左侧状态点。 */
.toast{
  background:var(--surface-elevated);color:var(--ink);padding:12px 16px 12px 30px;border-radius:var(--radius-lg);font-size:13px;line-height:1.55;
  border:1px solid var(--line);box-shadow:var(--shadow-popover);animation:toast-in var(--normal) var(--ease);white-space:pre-wrap;position:relative;
}
.toast::before{content:"";position:absolute;left:13px;top:18px;width:7px;height:7px;border-radius:50%;background:var(--success)}
.toast.error-toast{background:var(--surface-elevated);color:var(--ink);border-color:var(--danger-border)}
.toast.error-toast::before{background:var(--danger)}

/* ---------- 登录页「晨昏线 · 粒子」（2026-09-26 原型，替换 RC6.9.4 点云）黑白两色 ----------
   参照苹果、特斯拉、SpaceX 官网首屏：整屏一个有电影感的画面，一行大字，一个按钮。
   画面由 static/login.js 用 WebGL2 画（黑色太空、地球弧线、由粒子组成的日出的光）；这里管版面、文字、按钮，
   以及没有 WebGL 时用 CSS 渐变画的同一道弧线。弧线位置由 login.js 按视口写进 --lg-crest、--lg-r。 */
.login-layout{
  --lg-ink:#f5f5f7;--lg-ink-soft:rgba(245,245,247,.68);--lg-ink-quiet:rgba(245,245,247,.52);
  --lg-btn:#f5f5f7;--lg-btn-hover:#ffffff;--lg-btn-active:#dcdce1;--lg-btn-ink:#0a0a0a;
  --lg-crest:74vh;--lg-r:240vw;
  position:relative;min-height:100vh;min-height:100dvh;overflow:hidden;isolation:isolate;
  color:var(--lg-ink);color-scheme:dark;font-family:var(--font);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  /* 没有 WebGL 时（也是 WebGL 接手前的首帧）：黑白的地球弧线 + 正中一点白光 */
  background:
    radial-gradient(8% 5% at 50% var(--lg-crest),rgba(255,255,255,.55),rgba(255,255,255,0) 100%),
    radial-gradient(40% 13% at 50% var(--lg-crest),rgba(255,255,255,.1),rgba(255,255,255,0) 100%),
    radial-gradient(circle calc(var(--lg-r) + 40px) at 50% calc(var(--lg-crest) + var(--lg-r)),rgba(0,0,0,0) calc(var(--lg-r) - 1px),rgba(255,255,255,.75) calc(var(--lg-r) + 1px),rgba(255,255,255,.1) calc(var(--lg-r) + 6px),rgba(255,255,255,0) calc(var(--lg-r) + 40px)),
    radial-gradient(circle var(--lg-r) at 50% calc(var(--lg-crest) + var(--lg-r)),#050505 calc(var(--lg-r) - 1px),rgba(5,5,5,0) var(--lg-r)),
    #000;
}
.login-art{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;opacity:0;transition:opacity .3s linear}
.login-layout.gl-on .login-art{opacity:1}

.login-top,.login-foot{position:absolute;left:0;right:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px clamp(16px,4vw,56px);font-family:var(--font-mono)}
.login-top{top:0}
.login-foot{bottom:0;padding-top:14px;padding-bottom:18px;font-size:11.5px;color:var(--lg-ink-quiet)}
.wordmark{font-size:15px;font-weight:600;letter-spacing:.32em;color:var(--lg-ink)}
.wordmark span{font-size:10.5px;letter-spacing:.24em;margin-left:12px;font-weight:400;opacity:.66}
.login-foot a{color:var(--lg-ink-soft);text-decoration:none}
.login-foot a:hover{color:var(--lg-ink);text-decoration:underline}

/* 小字、大字、按钮一组，放在弧线上方 */
.login-cta{position:absolute;z-index:2;left:0;right:0;top:40%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;
  padding:0 20px;text-align:center}
.login-eyebrow{margin:0 0 14px;font-size:clamp(13px,1.15vw,16px);font-weight:500;letter-spacing:.24em;text-indent:.24em;color:var(--lg-ink-soft)}
.login-cta h1{margin:0;font-size:clamp(34px,4.4vw,64px);font-weight:600;letter-spacing:.06em;text-indent:.06em;line-height:1.12;white-space:pre;color:var(--lg-ink)}

/* 按钮：白色实心胶囊，黑字，左边一个镂空的飞书标。叠在现网 .btn 之上，逐项压掉 .btn 的底色、圆角、按下缩小和聚焦样式 */
.login-layout .login-feishu{position:relative;display:inline-flex;align-items:center;justify-content:center;margin-top:clamp(28px,3.4vw,44px);
  min-width:210px;height:50px;min-height:0;padding:0 30px 0 26px;border:0;border-radius:999px;
  font:600 17px/1 var(--font);letter-spacing:.06em;color:var(--lg-btn-ink);white-space:nowrap;
  background:var(--lg-btn);box-shadow:none;transform:none;
  transition:background-color .2s ease;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.login-layout .login-feishu:hover:not(:disabled){background:var(--lg-btn-hover);color:var(--lg-btn-ink)}
.login-layout .login-feishu:active{background:var(--lg-btn-active);transform:none}
.login-layout .login-feishu:focus-visible{border-radius:999px;box-shadow:0 0 0 2px #000,0 0 0 4px rgba(255,255,255,.9)}
.lg-inner{display:inline-flex;align-items:center;gap:10px}
.lg-logo{display:block;width:20px;height:20px;flex:none}
.lg-logo svg{display:block;width:100%;height:100%}
.lg-inner,.lg-spin{transition:opacity .12s linear,filter .12s linear,transform .2s cubic-bezier(.32,.72,0,1)}
.lg-spin{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;opacity:0;filter:blur(4px);transform:scale(.96);pointer-events:none}
.lg-spin svg{display:block;width:100%;height:100%}
.lg-spin circle{fill:none;stroke-width:2.4;stroke-linecap:round}
.lg-spin .track{stroke:rgba(0,0,0,.14)}
.lg-spin .arc{stroke:var(--lg-btn-ink);stroke-dasharray:16 100}
.login-layout.is-pending .lg-inner{opacity:0;filter:blur(4px);transform:scale(.96)}
.login-layout.is-pending .lg-spin{opacity:1;filter:none;transform:none;transition-delay:.06s}
.login-layout.is-pending .lg-spin svg{animation:lg-spin .9s linear infinite}
@keyframes lg-spin{to{transform:rotate(360deg)}}

.login-cta .error{margin-top:18px;font-size:13px;font-weight:500;line-height:1.5;color:var(--lg-ink)}
.login-cta .error.is-progress{color:var(--lg-ink-soft)}
.login-cta .fine{margin:10px auto 0;max-width:34ch;font-size:12px;line-height:1.65;color:var(--lg-ink-quiet)}
.login-layout .login-cta .fine.notice-strong{color:var(--lg-ink)!important}  /* 压掉 rc6.css 的 .notice-strong 蓝色 !important */
.login-cta .fine:empty,.login-cta .error:empty{display:none}

@media (max-width:640px){
  .login-top{padding:16px}
  .wordmark span{display:none}
  .login-eyebrow{letter-spacing:.16em;text-indent:.16em}
  .login-cta h1{letter-spacing:.04em;text-indent:.04em}
  .login-foot{flex-direction:column;gap:4px;padding-bottom:14px}
}
@media (max-height:520px){  /* 手机横屏、很矮的窗口：字和间距收紧，别压到左上字标 */
  .login-top{padding-top:12px;padding-bottom:12px}
  .login-cta{top:46%}
  .login-eyebrow{margin-bottom:8px;font-size:12px}
  .login-cta h1{font-size:28px}
  .login-layout .login-feishu{margin-top:20px;height:44px}
  .login-foot{padding-bottom:10px}
}
@media (prefers-reduced-motion:reduce){.login-art,.lg-inner,.lg-spin{transition:none}.lg-spin svg{animation-duration:1.6s}}

/* ---------- Motion ---------- */
@keyframes shimmer{to{background-position:-200%}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{transform:translateY(10px) scale(.985);opacity:0}to{transform:none;opacity:1}}
@keyframes slide{from{transform:translateX(26px);opacity:.4}to{transform:none;opacity:1}}
@keyframes toast-in{from{transform:translateY(12px) scale(.97);opacity:0}to{transform:none;opacity:1}}
@keyframes rise{from{transform:translateY(6px);opacity:.4}to{transform:none;opacity:1}}

/* ---------- Shared bits ---------- */
.modal-open{overflow:hidden}
.form-controls{display:flex;justify-content:flex-end;gap:9px;margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.required{color:var(--danger);font-size:11px}
.inline-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.inline-row>select{flex:1}
.attendance-row{display:grid;grid-template-columns:170px 1fr;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.attendance-row input:not([type=checkbox]){width:100%}
.wrap{white-space:normal;display:inline-block;max-width:460px;word-break:break-word;overflow-wrap:anywhere}
.detail-grid p{overflow-wrap:anywhere}
.form-grid>.callout{grid-column:1/-1}
.field select,.field input:not([type=checkbox]):not([type=file]),.field textarea{width:100%}
.field.full>.field.full{padding:0}
#period-filter{border:1px solid var(--field-line);border-radius:var(--radius-xs);padding:7px 9px;font-size:12px;background:var(--field-bg);color:var(--ink)}
.panel .panel{border:0;border-radius:0;box-shadow:none}
.panel .panel th{border-top:0}
.dialog .pre-content{margin-top:15px}
.dialog-footer .btn{margin-left:8px}
.empty+.fine{padding:0 10px}

.region-bar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:12px 0;max-height:130px;overflow:auto;border-bottom:1px solid var(--line);margin-bottom:12px}
.region-chip{border:0;background:transparent;color:var(--secondary);padding:6px 12px;border-radius:var(--pill);font:inherit;font-size:12px;cursor:pointer;white-space:nowrap;transition:background var(--fast) var(--ease-soft),color var(--fast) var(--ease-soft)}
.region-chip:hover{background:var(--surface-3);color:var(--ink)}
.region-chip.selected{background:var(--nav-active-bg);color:var(--nav-active-ink);font-weight:600}

.local-pager,.static-pager{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:14px 0;flex-wrap:wrap;color:var(--secondary);font-size:12px}
.static-pager{margin:0 2px}
.local-pager>span:first-child,.static-pager>span:first-child{margin-right:auto}
#pagination{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#pagination[hidden]{display:none}
#pagination>span:first-child{margin-right:auto}
#pagination input,.local-pager input,.static-pager input{width:60px;min-width:0;padding:6px 8px;border:1px solid var(--field-line);border-radius:var(--radius-xs);background:var(--field-bg);color:var(--ink);text-align:center}
#page-toolbar{gap:10px;flex-wrap:wrap}
.filter-extra{display:flex;gap:8px;flex-wrap:wrap}
.date-filters{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--quiet)}
.pager-controls{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}
.page-number{display:inline-flex!important;align-items:center;gap:6px;white-space:nowrap;width:auto!important;min-width:0!important;padding:0!important;color:var(--secondary);font-size:12px}
.date-filter{display:inline-flex;align-items:center;gap:6px;color:var(--secondary);font-size:12px;white-space:nowrap}
.date-filter input{border:1px solid var(--field-line);border-radius:var(--radius-xs);padding:6px 8px;background:var(--field-bg);color:var(--secondary);height:36px;font:inherit;max-width:142px}
.page-tabs{overflow-x:auto;flex-wrap:nowrap}
.page-tabs>.tab{white-space:nowrap;flex-shrink:0}
#navigation{overflow-y:auto;min-height:0}
tr[hidden]{display:none!important}
.local-pager .btn,.static-pager .btn{padding:6px 9px;font-size:12px}

.payroll-person{padding:20px;margin-top:18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2)}
.payroll-person .form-grid{grid-template-columns:repeat(4,1fr);gap:12px}
.payroll-person h3{margin-bottom:13px}
.payroll-person .inline-row{gap:10px;margin-bottom:14px;flex-wrap:wrap}
.payroll-person .inline-row h3{margin-right:auto}
.payroll-total{display:flex;gap:16px;justify-content:space-between;padding:12px 15px;background:var(--surface-3);border-radius:var(--radius-sm);margin-top:15px;font-size:12px}
.payroll-total strong{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}

/* ---------- Responsive ---------- */
@media(min-width:1650px){
  #main{padding-left:44px;padding-right:44px}
  .metrics{gap:20px}
  .metric{padding:24px}
  .metric .value{font-size:32px}
}
@media(max-width:1150px){
  .navpanel{width:206px}
  #main{padding:26px 22px}
  .topbar{padding:0 22px}
  .metric{padding:17px}
  .metric .value{font-size:24px}
  .dashboard-grid{grid-template-columns:1fr}
  .page-heading{align-items:flex-start}
  .main-actions{max-width:40%;flex-wrap:wrap;justify-content:flex-end}
  .topbar-right{gap:8px}
  #user-label{display:none}
  .login-intro h1{font-size:46px}
  .login-brand{padding:40px}
}
@media(max-width:780px){
  .sidebar{position:fixed;left:0;top:0;z-index:60;transform:translateX(-100%);transition:transform var(--normal) var(--ease);box-shadow:var(--shadow-3)}
  .sidebar.open{transform:none}
  .railbar,.navpanel{height:100dvh}
  .workspace.nav-collapsed .navpanel{display:flex}
  .mobile-only{display:grid}
  .topbar{padding:0 13px;height:55px;gap:5px}
  .topbar-left{gap:4px;font-size:10px}
  .topbar-right{gap:5px}
  #demo-role{max-width:95px;font-size:10px}
  .topbar .avatar{display:none}
  .environment{font-size:9px}
  #main{padding:20px 15px 32px}
  .page-heading{margin-bottom:18px;gap:9px}
  .page-heading h1{font-size:23px}
  .page-heading .muted{font-size:11px}
  .main-actions{max-width:50%;gap:5px}
  .main-actions .btn{font-size:11px;padding:7px 10px}
  .metrics{grid-template-columns:1fr 1fr;gap:11px}
  .metric{padding:16px 15px}
  .metric .value{font-size:24px}
  .metric p{font-size:11px}
  .metric small{font-size:10px}
  .page-toolbar{flex-wrap:wrap}
  .search-box{width:100%}
  .filter-group{width:100%;flex-wrap:wrap}
  .filter-group select{max-width:100%;flex:1}
  .dashboard-grid{gap:14px}
  .panel-head{padding:16px}
  .panel-body{padding:16px}
  .task-row{padding:13px 16px}
  .task-text small{max-width:220px}
  .task-meta{display:none}
  .overlay{padding:10px}
  .dialog{max-height:calc(100dvh - 20px);border-radius:var(--radius-lg)}
  .dialog-header,.dialog-body{padding:18px}
  .dialog-footer{padding:13px 18px}
  .form-grid{grid-template-columns:1fr;gap:15px}
  .field.full,.section-label{grid-column:auto}
  .drawer-overlay{padding:0}
  .drawer{border-radius:0;max-height:100dvh}
  .drawer .dialog-header,.drawer .dialog-body{padding:19px}
  .drawer-tabs{padding:0 19px;gap:16px}
  .drawer-actions{padding:13px 19px 0}
  .detail-grid{gap:17px 15px}
  .hotel-results{grid-template-columns:1fr;max-height:55vh}
  .two-columns,.compact-cards{grid-template-columns:1fr}
  .payroll-person .form-grid{grid-template-columns:1fr 1fr}
  .login-layout{grid-template-columns:1fr}
  .login-brand{display:none}
  .login-side{padding:30px;min-height:100dvh}
  .pagination{font-size:10px}
  .btn{min-height:37px}
  td{padding:13px 15px}
  .drawer h2{font-size:17px}
  .steps .step{font-size:10px}
  #toast-root{right:16px;bottom:16px}
  .attendance-row{grid-template-columns:1fr}
  .drawer-actions{flex-wrap:wrap}
  .form-controls{position:sticky;bottom:-18px;background:var(--surface-elevated);padding:14px 0}
  .pager-controls{gap:5px}
  .pager-controls .btn{font-size:10px;padding:5px 6px!important;min-height:30px}
  .date-filter input{max-width:130px}
  .page-number{font-size:10px}
  .date-filter{font-size:11px}
  .main-actions{max-width:50%}
}
@media(max-width:760px){
  .region-bar{max-height:105px}
  .local-pager,.static-pager,#pagination{gap:5px;font-size:11px}
  .local-pager .btn,.static-pager .btn,#pagination .btn{padding:6px 8px}
  .payroll-total{flex-direction:column;gap:5px}
  .filter-extra input[type=date]{width:125px}
  .dialog.wide{width:calc(100vw - 20px)}
  .payroll-person{padding:12px}
  .wrap{max-width:260px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* A same-page reload keeps the current rows on screen instead of flashing a skeleton. */
#content.is-refreshing{opacity:.55;transition:opacity var(--fast) var(--ease-soft)}
.upload-field{flex-wrap:wrap;cursor:pointer}
.upload-field .file-previews{width:100%;align-items:center}
.upload-field .file-previews img{width:54px;height:54px}
.upload-field .file-previews .file-note{max-width:100%}
/* 老版本手机内核（飞书安卓用系统 WebView、旧 iOS）不认 color-mix：按钮底色退回到现在实际显示的颜色（手机端排查 M13） */
@supports not (color:color-mix(in srgb,red,red)){
  :root{--btn-bg:#f1f1f2;--btn-hover:#e4e4e4}
  :root[data-theme="dark"]{--btn-bg:#212121;--btn-hover:#2d2d2d}
  @media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--btn-bg:#212121;--btn-hover:#2d2d2d}}
}