/* CSS migration map (2026-07-06)
   Current strategy:
   1. Legacy layout rules above are kept for compatibility.
   2. New color work must use --color-* semantic tokens.
   3. New component color work must use --component-* aliases.
   4. Do not add hard-coded brand colors to page-level CSS.
   5. Business semantic colors are allowed only through --color-success / --color-warning / --color-danger / --color-info.
*/

/* === LEGACY CSS START: layout + historical component rules. Avoid adding new colors here. === */
/* ═══════════════════════════════════════════
   INSPIRIA Admin Dashboard — Styles
   Design: 风格.md v1.0
   ═══════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   1. DESIGN TOKENS
   ═══════════════════════════════════════════ */
:root {
  /* ── 主色系 - 深绿科技风 ── */
  --green-900: #0f2a1d; --green-800: #1a4d3a; --green-700: #1e6b4e;
  --green-600: #2d8a5e; --green-500: #3fb87a; --green-400: #5cc99a;
  --green-300: #8dd4b2; --green-200: #b9e8cf; --green-100: #daf0e4;
  --green-50:  #f0faf4;

  /* Brand / Semantic (mapped to green) */
  --primary: #1e6b4e;
  --primary-hover: #2d8a5e;
  --primary-light: #daf0e4;
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #dc2626;
  --info: #2563eb;

  /* Neutral */
  --sidebar-bg: #0F2B1D;
  --sidebar-dark: #0A2116;
  --sidebar-border: #223C2F;
  --sidebar-active-bg: #174B35;
  --brand-green: #40B87A;
  --brand-green-light: #2FCB84;
  --danger-red: #F04A4B;
  --body-bg: #f0faf4;
  --card-bg: #ffffff;
  --card-border: #e5e7eb;
  --topbar-bg: #ffffff;
  --topbar-border: #e5e7eb;

  /* Text */
  --text-primary: var(--color-text);
  --text-secondary: var(--color-text-secondary);
  --text-muted: #d1d5db;
  --sidebar-text: #B9C0BC;
  --sidebar-text-muted: #8EA099;
  --sidebar-text-group: #6F8277;
  --sidebar-text-disabled: #4E6759;
  --sidebar-active: #ffffff;
  --white: #ffffff;

  /* Neutral grays (primitive scale for token migration) */
  --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb;
  --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280;
  --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827;

  /* Typography */
  --font-sans: -apple-system, "PingFang SC", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "Menlo", "Consolas", monospace;

  /* Spacing */
  --sp-xs: 4px; --sp-sm: 8px; --sp-md: 12px; --sp-lg: 16px;
  --sp-xl: 20px; --sp-2xl: 24px; --sp-3xl: 32px; --sp-4xl: 40px;

  /* Radius */
  --radius-btn: 8px; --radius-search: 8px;
  --radius-badge: 10px; --radius-input: 8px;

  /* Shadow */
  --shadow-sm:     0 1px 3px color-mix(in srgb,var(--shadow-color) 8%,transparent);
  --shadow-card:   0 2px 8px color-mix(in srgb,var(--shadow-color) 8%,transparent);
  --shadow-md:     0 4px 16px color-mix(in srgb,var(--shadow-color) 10%,transparent);
  --shadow-float:  0 4px 12px color-mix(in srgb,var(--shadow-color) 8%,transparent);
  --shadow-popup:  0 8px 32px color-mix(in srgb,var(--shadow-color) 12%,transparent);
  --shadow-modal:  0 16px 48px color-mix(in srgb,var(--shadow-color) 16%,transparent);

  /* Layout */
  --sidebar-w: 240px;
  --sidebar-collapsed-w: 70px;
  --topbar-h: 56px;

  /* Transitions */
  --fast: 150ms ease-out;
  --normal: 250ms ease-in-out;
  --smooth: 300ms cubic-bezier(.4,0,.2,1);
}

/* ═══════════════════════════════════════════
   2. RESET & BASE
   ═══════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;min-width:0}
html,body{margin:0;padding:0;min-height:100vh}
body{
  font-family:var(--font-sans);
  font-size:13px;font-weight:400;line-height:1.5;
  color:var(--text-primary);background:var(--body-bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4{margin:0;color:var(--text-primary)}
h1{font-size:20px;font-weight:700;line-height:1.3}
h2{font-size:16px;font-weight:600;line-height:1.35}
h3{font-size:14px;font-weight:600;line-height:1.4}
strong{font-size:0.93em}
button{font-size:0.85em}
a{color:var(--primary);text-decoration:none}
button,input,select,textarea{font-family:inherit}
.hidden{display:none!important}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--sidebar-border);border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:var(--raw-4a6278)}

/* Sidebar scrollbar matches sidebar bg */
aside::-webkit-scrollbar-track{background:var(--sidebar-bg)}
aside::-webkit-scrollbar-thumb{background:var(--sidebar-border)}
aside::-webkit-scrollbar-thumb:hover{background:var(--raw-4a6278)}

/* Main content scrollbar */
main::-webkit-scrollbar-thumb{background:var(--green-200)}
main::-webkit-scrollbar-thumb:hover{background:var(--raw-a0aab4)}

/* ═══════════════════════════════════════════
   3. LOGIN SCREEN
   ═══════════════════════════════════════════ */
.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px;background:linear-gradient(135deg,var(--green-50),var(--white),var(--green-100));overflow:hidden}
.login-screen::before,.login-screen::after{content:"";position:fixed;pointer-events:none;z-index:0}
.login-screen::before{width:520px;height:260px;right:-120px;top:-42px;background:linear-gradient(145deg,color-mix(in srgb, var(--green-700) 18%, transparent),color-mix(in srgb, var(--white) 0%, transparent));border-radius:0 0 0 240px}
.login-screen::after{width:680px;height:210px;left:-160px;bottom:-60px;background:linear-gradient(20deg,color-mix(in srgb, var(--green-700) 12%, transparent),color-mix(in srgb, var(--white) 78%, transparent));border-radius:50% 50% 0 0}
.login-shell{
  position:relative;
  z-index:1;
  width:min(1180px,100%);
  min-height:680px;
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(360px,.75fr);
  background:color-mix(in srgb, var(--white) 72%, transparent);
  border:1px solid color-mix(in srgb, var(--white) 88%, transparent);
  border-radius:28px;
  box-shadow:0 28px 70px color-mix(in srgb, var(--raw-233140) 16%, transparent);
  overflow:hidden;
}
.login-visual{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:680px;padding:72px 58px 42px;color:var(--white);background:linear-gradient(135deg,var(--green-900),var(--green-800),var(--green-700));overflow:hidden}
.login-visual::before{content:"";position:absolute;inset:auto -80px -118px -90px;height:240px;background:color-mix(in srgb, var(--white) 6%, transparent);border-radius:50% 50% 0 0}
.login-visual::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 25% 24%,color-mix(in srgb, var(--white) 8%, transparent),transparent 30%);opacity:.6}
.login-visual-copy,
.login-feature-row{
  position:relative;
  z-index:1;
}
.login-kicker{
  display:inline-flex;
  width:max-content;
  padding:7px 12px;
  margin-bottom:22px;
  border-radius:999px;
  background:color-mix(in srgb, var(--white) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--white) 25%, transparent);
  color:var(--raw-bdf5d8);
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
}
.login-visual h1{max-width:680px;color:var(--white);font-size:36px;line-height:1.2;font-weight:700;text-shadow:0 4px 18px color-mix(in srgb, var(--raw-000000) 22%, transparent)}
.login-visual p{max-width:660px;margin:20px 0 0;color:color-mix(in srgb, var(--white) 78%, transparent);font-size:16px;line-height:1.7;font-weight:400}
.login-service-tags{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:34px;
}
.login-service-tags span{display:inline-flex;align-items:center;min-height:44px;padding:0 24px;border-radius:999px;background:color-mix(in srgb, var(--white) 14%, transparent);color:var(--white);box-shadow:0 8px 20px color-mix(in srgb, var(--raw-000000) 12%, transparent);font-weight:700}
.login-service-tags span::before{content:"";width:10px;height:10px;margin-right:10px;border-radius:50%;background:var(--green-400);box-shadow:0 0 0 5px color-mix(in srgb, var(--green-400) 14%, transparent)}
.login-feature-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.login-feature-card{
  min-height:104px;
  padding:22px;
  border-radius:22px;
  background:color-mix(in srgb, var(--raw-f6fff8) 92%, transparent);
  border:1px solid color-mix(in srgb, var(--white) 78%, transparent);
  box-shadow:0 12px 34px color-mix(in srgb, var(--raw-003e25) 18%, transparent);
  color:var(--green-700);
}
.login-feature-card strong{
  display:block;
  font-size:18px;
  margin-bottom:8px;
}
.login-feature-card span{
  color:var(--raw-2f7355);
  font-weight:600;
  line-height:1.45;
}
.login-panel{display:flex;align-items:center;justify-content:center;padding:46px;background:linear-gradient(180deg,color-mix(in srgb, var(--white) 96%, transparent),var(--green-50))}
.login-card{width:100%;max-width:400px;background:color-mix(in srgb, var(--white) 94%, transparent);border:1px solid var(--green-100);border-radius:var(--card-system-radius);box-shadow:var(--shadow-lg);padding:44px 40px;text-align:left}
.login-logo{width:48px;height:48px;margin:0 0 22px;border-radius:var(--radius-md);background:linear-gradient(135deg,var(--green-500),var(--green-400));display:grid;place-items:center;color:var(--white);font-size:22px;font-weight:900;box-shadow:0 4px 12px color-mix(in srgb, var(--green-500) 35%, transparent)}
.login-title-block span{
  display:block;
  margin-bottom:8px;
  color:var(--green-500);
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.login-title-block h2{
  margin:0;
  color:var(--raw-1d3b31);
  font-size:26px;
  font-weight:900;
}
.login-title-block p{
  margin:12px 0 26px;
  color:var(--raw-65766e);
  font-size:14px;
  line-height:1.7;
}
.login-field{
  display:block;
  margin-bottom:16px;
}
.login-field span{
  display:block;
  margin-bottom:8px;
  color:var(--raw-334d43);
  font-size:13px;
  font-weight:800;
}
.login-field input{
  width:100%;
  height:46px;
  border:1px solid var(--raw-d8e6de);
  border-radius:8px;
  background:var(--color-surface-soft);
  color:var(--raw-1f3a30);
  padding:0 14px;
  font-size:14px;
  transition:border-color var(--fast),box-shadow var(--fast),background var(--fast);
}
.login-field input:focus{outline:none;border-color:var(--green-500);background:var(--white);box-shadow:0 0 0 4px color-mix(in srgb, var(--green-500) 13%, transparent)}
.login-submit{width:100%;height:50px;margin-top:4px;border-radius:var(--radius-sm)!important;background:linear-gradient(135deg,var(--green-700),var(--green-600))!important;box-shadow:0 4px 14px color-mix(in srgb, var(--green-600) 30%, transparent);font-weight:600;font-size:16px}
#loginMsg{
  min-height:20px;
  margin:14px 0 0;
  color:var(--danger);
  font-size:13px;
  font-weight:700;
}
.login-version{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--raw-e7f1eb);
  color:var(--raw-8a9b94);
  font-size:12px;
  line-height:1.5;
}

@media(max-width:980px){
  .login-screen{
    padding:18px;
    overflow:auto;
  }
  .login-shell{
    grid-template-columns:1fr;
    min-height:auto;
  }
  .login-visual{
    min-height:430px;
    padding:42px 28px 28px;
  }
  .login-visual h1{font-size:32px}
  .login-visual p{font-size:17px}
  .login-feature-row{grid-template-columns:1fr}
  .login-feature-card{min-height:auto}
  .login-panel{padding:28px}
}
@media(max-width:560px){
  .login-screen{padding:0;background:linear-gradient(135deg,var(--green-900),var(--green-800),var(--green-700));overflow:auto}
  .login-shell{display:flex!important;flex-direction:column!important;border-radius:0;min-height:100vh;box-shadow:none;background:transparent}
  .login-visual{min-height:auto;padding:40px 24px 20px;display:block}
  .login-visual h1{font-size:24px}
  .login-visual p{font-size:13px;margin-top:8px}
  .login-visual-copy h1{font-size:24px!important;white-space:normal!important}
  .login-service-tags{gap:6px;margin-top:14px}
  .login-service-tags span{min-height:30px;padding:0 12px;font-size:11px}
  .login-feature-row{display:none}
  .login-panel{padding:0 16px 40px;background:transparent;width:100%}
  .login-card{max-width:100%;padding:28px 20px;border-radius:var(--card-system-radius);box-shadow:0 8px 32px color-mix(in srgb, var(--green-900) 12%, transparent)}
  .login-captcha-row{flex-direction:column!important;gap:8px!important}
  .login-captcha-btn{flex:0 0 auto!important;width:100%!important;font-size:13px!important;height:44px!important}
  .login-captcha-input-wrap .login-input-icon{flex:0 0 36px!important;font-size:17px!important}
  .login-input-wrap{height:44px!important}
  .login-input-wrap input{font-size:14px!important}
  .login-submit{height:48px!important;font-size:16px!important}
  .login-footer{position:relative!important;color:color-mix(in srgb, var(--white) 70%, transparent)!important;text-align:center;padding:0 0 24px!important;font-size:12px!important}
  .login-field>span,.login-card-brand strong{color:var(--color-primary-text)!important}
  .login-title-block h2{color:var(--color-primary-text)!important}
}
[data-theme="blue"] .login-field>span{color:var(--color-primary-text)!important}
[data-theme="blue"] .login-title-block h2{color:var(--color-primary-text)!important}
[data-theme="blue"] .login-card-brand strong{color:var(--color-primary-text)!important}
[data-theme="blue"] .login-subtitle{color:var(--raw-6b7a99)!important}
[data-theme="blue"] .login-scope{color:var(--raw-6b7a99)!important}

/* ═══════════════════════════════════════════
   4. APP LAYOUT
   ═══════════════════════════════════════════ */
.app{
  display:grid;
  grid-template-columns:var(--sidebar-w) 1fr;
  min-height:100vh;
  width:100%;
  max-width:100vw;
}
.app.sidebar-collapsed{grid-template-columns:var(--sidebar-collapsed-w) 1fr}

/* ── Sidebar ── */
aside{
  background:var(--sidebar-bg);
  color:var(--sidebar-text);
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  z-index:100;
  display:flex;
  flex-direction:column;
}

/* Sidebar Brand */
.sidebar-brand{display:flex;align-items:center;gap:12px;padding:20px;min-height:72px;border-bottom:1px solid var(--sidebar-border)}
.sidebar-brand-icon{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--brand-green-light),var(--brand-green));display:grid;place-items:center;color:var(--white);font-size:18px;font-weight:800;flex-shrink:0;box-shadow:0 4px 12px color-mix(in srgb, var(--raw-40b87a) 30%, transparent)}
.sidebar-brand-text h1{font-size:16px;font-weight:700;color:var(--sidebar-active);margin:0;line-height:1.3}
.sidebar-brand-text span{font-size:12px;color:var(--sidebar-text-muted);display:block;margin-top:2px}

/* Sidebar User Profile */
.sidebar-user{display:flex;align-items:center;gap:12px;padding:16px 20px;min-height:72px;border-top:1px solid var(--sidebar-border);margin-top:auto}
.sidebar-avatar{width:40px;height:40px;border-radius:999px;background:var(--brand-green);display:grid;place-items:center;color:var(--white);font-size:16px;font-weight:700;flex-shrink:0}
.sidebar-user-info{flex:1;min-width:0}
.sidebar-user-name{font-size:14px;font-weight:700;color:var(--sidebar-active);line-height:1.3}
.sidebar-user-role{font-size:12px;color:var(--sidebar-text-muted);margin-top:2px;line-height:1.3}
.sidebar-user-email{font-size:11px;color:var(--sidebar-text-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-logout-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:72px;
  height:26px;
  margin-top:10px;
  border:1px solid color-mix(in srgb, var(--white) 14%, transparent);
  border-radius:999px;
  background:color-mix(in srgb, var(--white) 8%, transparent);
  color:var(--sidebar-active);
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition:background var(--fast),border-color var(--fast),transform var(--fast);
}
.sidebar-logout-btn:hover{
  background:color-mix(in srgb, var(--white) 14%, transparent);
  border-color:color-mix(in srgb, var(--white) 24%, transparent);
  transform:translateY(-1px);
}
.sidebar-divider{height:1px;background:var(--sidebar-border);flex-shrink:0;margin:8px 24px}

/* Sidebar Navigation */
.nav{
  flex:1;
  overflow-y:auto;
  padding:var(--sp-md) 0 var(--sp-md) var(--sp-sm);
}
.nav-title{font-size:14px;font-weight:700;color:var(--sidebar-text-group);letter-spacing:0.5px;padding:0 16px;margin:8px 10px 4px;height:44px;display:flex;align-items:center;gap:8px;justify-content:space-between;border:1px solid var(--sidebar-border);border-radius:8px;text-align:left;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;transition:background .25s ease,border-color .25s ease;position:relative;box-sizing:border-box}
.nav-title.expanded{height:44px}
.nav-title::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brand-green);border-radius:8px 0 0 8px;opacity:.6;transition:opacity .25s}
.nav-title:hover::before{opacity:1}
.nav-title.expanded::after{opacity:.7}
.nav-title::after{content:"\25B8";font-size:14px;opacity:.5;transition:transform .3s ease,opacity .25s;flex-shrink:0}
.nav-title:hover::after{opacity:.8}
.nav-section-items{overflow:hidden;max-height:0;opacity:0;transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .25s ease,padding .25s ease;padding:0}
.nav-section-items.expanded{max-height:600px;opacity:1;padding:4px 0}
.nav button{
  display:flex;align-items:center;width:calc(100% - 20px);
  margin:2px 10px;
  border:none;background:transparent;
  color:var(--sidebar-text);
  padding:0 14px;height:44px;font-size:13px;font-weight:500;
  text-align:left;cursor:pointer;
  gap:10px;border-radius:8px;
  position:relative;transition:all .25s ease;
  -webkit-tap-highlight-color:transparent;line-height:1.3;box-sizing:border-box;
}
.nav button:hover{background:color-mix(in srgb, var(--white) 6%, transparent);color:var(--sidebar-active)}
.nav button::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%) scaleY(0);width:3px;height:60%;background:var(--brand-green-light);border-radius:0 3px 3px 0;transition:transform .25s ease}
.nav button:hover::before{transform:translateY(-50%) scaleY(1)}
.nav button:active{transform:scale(.98);background:color-mix(in srgb, var(--white) 8%, transparent)}
.nav button.active{color:var(--sidebar-active);font-weight:700;background:var(--sidebar-active-bg);border-radius:10px;height:46px}
.nav button.active::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:20px;background:var(--brand-green-light);border-radius:0 2px 2px 0}
.nav button .nav-badge{margin-left:auto;min-width:22px;height:22px;border-radius:999px;background:var(--danger-red);color:var(--white);font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;padding:0 7px}
.nav small{
  display:block;
  color:var(--sidebar-text);
  margin:var(--sp-lg) var(--sp-lg);
  line-height:1.6;
  font-size:12px;
  background:color-mix(in srgb, var(--white) 3%, transparent);
  border:1px solid var(--sidebar-border);
  border-radius:var(--radius-card);
  padding:var(--sp-md);
}

/* ── Main Content ── */
main{
  min-height:100vh;
  background:var(--body-bg);
  padding:0 var(--sp-2xl) var(--sp-4xl);
  overflow-x:hidden;
}

/* ── Hamburger ── */
.hamburger{
  display:none;
  border:none;background:transparent;
  font-size:22px;color:var(--text-secondary);
  cursor:pointer;padding:6px 8px;border-radius:var(--radius-btn);
  transition:background var(--fast);
}
.hamburger:hover{background:var(--body-bg)}

/* ── Sidebar overlay (mobile) ── */
.sidebar-overlay{
  display:none;
  position:fixed;inset:0;
  background:color-mix(in srgb, var(--raw-000000) 35%, transparent);
  z-index:99;
}

/* ── TopBar ── */
.topbar{
  position:sticky;
  top:0;z-index:50;
  height:var(--topbar-h);
  background:var(--topbar-bg);
  border-bottom:1px solid var(--topbar-border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 var(--sp-2xl);
  gap:var(--sp-lg);
}
.topbar-left{
  display:flex;
  align-items:center;
  gap:var(--sp-xl);
  flex:1;
  min-width:0;
}
.topbar-logo{
  display:flex;
  align-items:center;
  gap:var(--sp-sm);
  font-size:16px;font-weight:700;
  color:var(--text-primary);
  letter-spacing:0.5px;
  white-space:nowrap;
}
.topbar-logo::before{
  content:"";
  display:block;
  width:24px;height:24px;
  border-radius:6px;
  background:var(--primary);
  flex-shrink:0;
}
.topbar-breadcrumb{display:flex;align-items:center;gap:6px;flex:1;min-width:0}
.topbar-breadcrumb .crumb{color:var(--text-secondary);font-size:13px;white-space:nowrap}
.topbar-breadcrumb .crumb.active{color:var(--text-primary);font-weight:600}
.topbar-breadcrumb .crumb-sep{color:var(--card-border);font-size:12px}
.topbar-search{
  position:relative;
  width:340px;
  flex-shrink:1;
}
.topbar-search input{
  width:100%;
  height:36px;
  border:1px solid var(--card-border);
  border-radius:var(--radius-search);
  background:var(--body-bg);
  padding:0 var(--sp-lg) 0 36px;
  font-size:13px;
  color:var(--text-primary);
  outline:none;
  transition:border-color var(--fast),box-shadow var(--fast);
}
.topbar-search input::placeholder{color:var(--text-muted);font-size:13px}
.topbar-search input:focus{border-color:var(--green-500);box-shadow:0 0 0 3px color-mix(in srgb, var(--green-500) 15%, transparent)}
.topbar-search::before{
  content:"🔍";
  position:absolute;
  left:12px;top:50%;
  transform:translateY(-50%);
  font-size:14px;
  opacity:0.5;
  pointer-events:none;
}
.topbar-right{
  display:flex;
  align-items:center;
  align-self:center;
  gap:var(--sp-xs);
}
.topbar-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}
.topbar-actions .theme-select{
  flex:0 0 148px;
  width:148px;
  min-width:148px;
  height:35px;
  padding:0 34px 0 14px;
  border-radius:8px;
  border:1px solid color-mix(in srgb, var(--white) 18%, transparent);
  background:var(--green-900,var(--raw-0f2b1d));
  color:var(--white);
  font-size:14px;
  font-weight:600;
  line-height:1.8;
  cursor:pointer;
}
.topbar-actions .theme-select option{
  color:var(--color-text);
  background:var(--white);
  font-size:15px;
  line-height:1.8;
  padding:10px 12px;
}
.alert-bell-btn{cursor:pointer;transition:background .2s}
.alert-bell-btn:hover{background:var(--raw-2a3d8f)!important}
.alert-bell-btn .alert-badge-count{position:absolute;top:-2px;right:-2px;min-width:18px;height:18px;border-radius:999px;background:var(--danger-red);color:var(--white);font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;line-height:1}
#newBtn{font-size:15px;font-weight:600;padding:10px 20px}

/* ── Page Header ── */
.page-header{
  padding: var(--sp-2xl) 0 0;
  display:flex;
  align-items:flex-start;
  gap:var(--sp-md);
}
body[data-active-page="dashboard"] .page-header,
body[data-active-page="mydashboard"] .page-header{
  display:none;
}
.page-header h2{
  font-size:24px;font-weight:700;
  color:var(--text-primary);
  margin:0;
}
.page-header p{
  margin:4px 0 0;
  color:var(--text-secondary);
  font-size:13px;
  line-height:1.5;
}
.back-btn{
  flex-shrink:0;
  margin-top:2px;
  padding:6px 12px;
  font-size:12px;
}

/* ═══════════════════════════════════════════
   5. BUTTONS
   ═══════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:7px 14px;border:1px solid var(--card-border);
  border-radius:var(--radius-btn);background:var(--card-bg);
  color:var(--text-primary);font-size:12px;font-weight:500;
  cursor:pointer;white-space:nowrap;
  transition:background var(--fast),border-color var(--fast),color var(--fast),box-shadow var(--fast);
  line-height:1.35;max-width:100%;
}
.btn:hover{background:var(--body-bg);border-color:var(--green-300)}
.btn.primary{
  background:linear-gradient(135deg,var(--green-700),var(--green-600));
  color:var(--white);border-color:transparent;font-weight:600;
  box-shadow:0 2px 8px color-mix(in srgb, var(--green-700) 25%, transparent);
}
.btn.primary:hover{
  background:linear-gradient(135deg,var(--green-600),var(--green-500));
  border-color:transparent;box-shadow:0 4px 12px color-mix(in srgb, var(--green-700) 35%, transparent);
}
.btn.success{
  background:linear-gradient(135deg,var(--color-success-text),var(--color-success));
  color:var(--white);border-color:transparent;font-weight:700;
  box-shadow:0 2px 8px color-mix(in srgb, var(--raw-059669) 25%, transparent);
}
.btn.success:hover{
  background:linear-gradient(135deg,var(--color-success),var(--color-success));
  border-color:transparent;box-shadow:0 4px 12px color-mix(in srgb, var(--raw-059669) 35%, transparent);
}
.btn.warning{
  background:linear-gradient(135deg,var(--color-warning-text),var(--color-warning));
  color:var(--white);border-color:transparent;font-weight:700;
  box-shadow:0 2px 8px color-mix(in srgb, var(--raw-d97706) 25%, transparent);
}
.btn.warning:hover{
  background:linear-gradient(135deg,var(--color-warning),var(--color-warning));
  border-color:transparent;box-shadow:0 4px 12px color-mix(in srgb, var(--raw-d97706) 35%, transparent);
}
.form-actions .btn.warning{
  background:linear-gradient(135deg,var(--color-warning-text),var(--color-warning))!important;
  color:var(--white)!important;
  border:1px solid var(--color-warning-text)!important;
  font-weight:700!important;
  box-shadow:0 2px 8px color-mix(in srgb, var(--raw-92400e) 32%, transparent)!important;
}
.form-actions .btn.warning:hover{
  background:linear-gradient(135deg,var(--color-warning-text),var(--color-warning-text))!important;
  border-color:var(--raw-78350f)!important;
}
.form-actions .btn.success{
  background:linear-gradient(135deg,var(--color-success-text),var(--color-success))!important;
  color:var(--white)!important;
  border:1px solid var(--raw-064e3b)!important;
  font-weight:700!important;
  box-shadow:0 2px 8px color-mix(in srgb, var(--raw-065f46) 28%, transparent)!important;
}
.form-actions .btn.success:hover{
  background:linear-gradient(135deg,var(--color-success-text),var(--raw-0d9488))!important;
  border-color:var(--raw-14532d)!important;
}
.btn.sm{
  min-height:30px;
  padding:5px 10px;
  font-size:12px;
}
.btn.danger{
  background:linear-gradient(135deg,var(--red-600),var(--red-500));
  color:var(--white);border-color:transparent;font-weight:600;
  box-shadow:0 2px 8px color-mix(in srgb, var(--raw-dc2626) 25%, transparent);
}
.btn.danger:hover{
  background:linear-gradient(135deg,var(--red-500),var(--red-400));
  border-color:transparent;box-shadow:0 4px 12px color-mix(in srgb, var(--raw-dc2626) 35%, transparent);
}
.form-actions .btn.danger{
  background:linear-gradient(135deg,var(--color-danger),var(--color-danger-text))!important;
  color:var(--white)!important;
  border:1px solid var(--color-danger-text)!important;
  font-weight:700!important;
  box-shadow:0 2px 8px color-mix(in srgb, var(--raw-b91c1c) 32%, transparent)!important;
}
.form-actions .btn.danger:hover{
  background:linear-gradient(135deg,var(--color-danger-text),var(--color-danger-text))!important;
  border-color:var(--raw-7f1d1d)!important;
  box-shadow:0 4px 12px color-mix(in srgb, var(--raw-b91c1c) 38%, transparent)!important;
}
.btn.danger:disabled{
  background:var(--color-surface-soft);color:var(--color-text-muted);border-color:var(--color-border);
  box-shadow:none;cursor:not-allowed;
}
.action-link,.link-btn{
  border:none;
  background:transparent;
  color:var(--primary);
  font-size:12px;font-weight:600;
  cursor:pointer;
  padding:0;
  text-decoration:none;
  transition:color var(--fast);
}
.action-link:hover,.link-btn:hover{
  color:var(--primary-hover);
  text-decoration:underline;
}
.action-link:disabled{
  color:var(--text-muted);
  cursor:not-allowed;
  text-decoration:none;
}
/* 操作列图标按钮（纯图标，无边框） */
.action-icon{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:6px;
  border:none;background:transparent;
  color:var(--text-secondary);cursor:pointer;
  transition:all var(--fast);
}
.action-icon:hover{
  background:var(--green-50);
  color:var(--green-600);
}
.action-icon svg{flex-shrink:0;pointer-events:none;}
.action-icon:active{transform:scale(0.95);}
/* "+" 图标按钮 - 生成合同专用 */
.action-icon-plus{
  background:var(--green-50);
  color:var(--green-600);
}
.action-icon-plus:hover{
  background:var(--green-100);
  color:var(--green-700);
}
.action-icon-plus:active{transform:scale(0.95);}
.action-icon-plus:disabled{
  opacity:.5;
  cursor:not-allowed;
}
/* 操作列图标按钮 - 统一标准 */
.action-link.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:6px;
  padding:0;transition:all var(--fast);
  background:var(--color-surface-soft);
  color:var(--primary);
  border:1px solid transparent;
}
.action-link.icon-btn:hover{
  background:var(--green-50);
  color:var(--primary-hover);
  text-decoration:none;
  border-color:var(--green-200);
  box-shadow:0 2px 8px color-mix(in srgb, var(--raw-22c55e) 15%, transparent);
}
.action-link.icon-btn:hover svg{stroke:var(--primary-hover);}
.action-link.icon-btn svg{flex-shrink:0;pointer-events:none;}
.action-link.icon-btn:active{transform:scale(0.95);}
.action-link.icon-btn:disabled,
.action-link.icon-btn.is-disabled{
  opacity:.45;
  cursor:not-allowed;
  box-shadow:none;
  background:var(--color-surface-soft);
}
.danger-link{color:var(--danger)!important}

/* 表格中的文字型操作，压缩成更轻的排版 */
.table-wrap .action-link:not(.icon-btn),
.project-actions-cell .action-link:not(.icon-btn),
.procurement-actions .action-link:not(.icon-btn),
.procurement-action-menu .action-link,
.vendor-action-cell .action-link:not(.icon-btn),
.supplier-table .vendor-action-cell .action-link:not(.icon-btn),
.customer-action-cell .action-link:not(.icon-btn),
.finance-main-actions .action-link:not(.icon-btn),
.finance-expanded-actions .action-link:not(.icon-btn),
.target-actions .action-link:not(.icon-btn){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:20px;
  padding:0 2px;
  font-size:12px;
  line-height:1.2;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
}
.table-wrap .action-link:not(.icon-btn):hover,
.project-actions-cell .action-link:not(.icon-btn):hover,
.procurement-actions .action-link:not(.icon-btn):hover,
.procurement-action-menu .action-link:hover,
.vendor-action-cell .action-link:not(.icon-btn):hover,
.supplier-table .vendor-action-cell .action-link:not(.icon-btn):hover,
.customer-action-cell .action-link:not(.icon-btn):hover,
.finance-main-actions .action-link:not(.icon-btn):hover,
.finance-expanded-actions .action-link:not(.icon-btn):hover,
.target-actions .action-link:not(.icon-btn):hover{
  text-decoration:none;
}
.close{
  border:none;
  background:var(--body-bg);
  border-radius:var(--radius-btn);
  padding:8px 12px;
  cursor:pointer;
  font-size:14px;
  color:var(--text-secondary);
  transition:background var(--fast);
}
.close:hover{background:var(--border, var(--color-border))}

/* ═══════════════════════════════════════════
   6. CARDS
   ═══════════════════════════════════════════ */
.card{
  background:var(--card-bg);border:1px solid var(--card-border);
  border-radius:var(--radius-card);box-shadow:var(--shadow-sm);
  padding:var(--sp-2xl);overflow:hidden;
  transition:transform .2s,box-shadow .2s;
}
.card:hover{box-shadow:var(--shadow-md)}

/* ── Section Title ── */
.section-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--sp-md);
  margin-bottom:8px;
  min-width:0;
  flex-wrap:wrap;
}
.section-title h3{
  font-size:14.5px;font-weight:600;
  color:var(--text-primary);
  margin:0;
  line-height:1.35;
}
.section-title span{
  font-size:11.5px;color:var(--text-secondary);
  line-height:1.45;
}
.total-count-badge{
  font-size:11px;color:var(--text-secondary);background:var(--gray-100);
  padding:2px 10px;border-radius:999px;white-space:nowrap;
}
.contract-payment-title{
  align-items:flex-start;
}
.contract-payment-actions{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
}
.contract-payment-actions select{
  width:150px;
  height:42px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--input-bg);
  color:var(--text-primary);
  font-size:14px;
  font-weight:700;
  padding:0 36px 0 14px;
}
.register-payment-cta{
  min-width:132px;
  height:46px;
  padding:0 20px;
  border:none;
  border-radius:14px;
  background:linear-gradient(135deg,var(--primary),var(--primary-hover));
  color:var(--white);
  font-size:17px;
  font-weight:800;
  letter-spacing:0;
  box-shadow:0 10px 22px color-mix(in srgb, var(--raw-087b55) 24%, transparent);
}
.register-payment-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 28px color-mix(in srgb, var(--raw-087b55) 28%, transparent);
}

/* ═══════════════════════════════════════════
   7. KPI CARDS (with bottom colored left border)
   ═══════════════════════════════════════════ */
.kpi{
  position:relative;
  overflow:hidden;
}
.kpi .label{
  font-size:12px;color:var(--text-secondary);
  font-weight:500;
}
.kpi .value{
  font-size:28px;font-weight:700;
  color:var(--text-primary);
  margin:8px 0 4px;
  line-height:1.25;
  font-family:var(--font-mono);
}
.kpi .value.procurement-amount-value{
  font-size:20px;
  line-height:1.2;
  white-space:normal;
  word-break:break-all;
}
.kpi .hint{
  font-size:12px;color:var(--text-secondary);
  margin-top:2px;
}
.kpi .kpi-icon{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:8px;
  background:color-mix(in srgb, var(--raw-08b955) 8%, transparent);color:var(--green-700);
  margin-bottom:6px;
}
.kpi:nth-child(2) .kpi-icon{background:color-mix(in srgb, var(--raw-2563eb) 8%, transparent);color:var(--color-info)}
.kpi:nth-child(3) .kpi-icon{background:color-mix(in srgb, var(--raw-f59e0b) 8%, transparent);color:var(--color-warning)}
.kpi:nth-child(4) .kpi-icon{background:color-mix(in srgb, var(--raw-7c3aed) 8%, transparent);color:var(--color-info-text)}

/* Bottom accent strip */
.kpi::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:4px;background:var(--green-500)}
.grid.kpis .card:nth-child(2)::after,.kpis .card:nth-child(2)::after{background:var(--info,var(--color-info))}
.grid.kpis .card:nth-child(3)::after,.kpis .card:nth-child(3)::after{background:var(--warning)}
.grid.kpis .card:nth-child(4)::after,.kpis .card:nth-child(4)::after{background:var(--color-info-text)}
.grid.kpis .card:nth-child(5)::after,.kpis .card:nth-child(5)::after{background:var(--danger)}

/* KPI clickable */
.dashboard-click{
  cursor:pointer;
  transition:transform var(--fast),box-shadow var(--fast);
}
.dashboard-click:hover{
  transform:translateY(-1px);
  box-shadow:var(--card-system-shadow-hover);
}

/* KPI large (dashboard hero) */
.kpi-large{
  min-height:138px;
  padding:var(--sp-xl) var(--sp-2xl);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.kpi-large .value{
  font-size:36px;
  font-family:var(--font-mono);
}
.kpi-small{
  min-height:92px;
  padding:var(--sp-lg) var(--sp-xl);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.kpi-small .value{font-size:24px}

/* 跟进提醒KPI卡片 */
.followup-kpi{
  background:linear-gradient(135deg,color-mix(in srgb,var(--color-warning-soft) 56%,var(--white) 44%),var(--color-warning-soft));
  border:1px solid color-mix(in srgb,var(--color-warning) 34%,var(--white) 66%);
  position:relative;
  overflow:hidden;
}
.followup-kpi .label{
  color:var(--color-primary);
  font-weight:600;
}
.followup-kpi .value{
  color:var(--color-warning-text);
  font-size:28px;
  font-weight:700;
}
.followup-kpi .hint{
  color:var(--color-warning-text);
}
.followup-kpi::before{
  content:"";
  position:absolute;
  top:-50%;
  right:-20%;
  width:100px;
  height:200px;
  background:radial-gradient(circle,color-mix(in srgb, var(--raw-fb923c) 20%, transparent) 0%,transparent 70%);
  pointer-events:none;
}

/* Amount card (dark highlight) */
.kpi-amount-card{background:linear-gradient(135deg,var(--green-900),var(--green-800),var(--green-700));color:var(--white);border-color:transparent}
.kpi-amount-card .label,.kpi-amount-card .hint{color:color-mix(in srgb, var(--white) 65%, transparent)}
.kpi-amount-card .value{color:var(--white)}
.kpi-amount-card::after{background:linear-gradient(90deg,var(--green-500),var(--green-300))}

/* KPI topline & badge */
.kpi-topline{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:4px;
}
.kpi-badge{display:inline-flex;align-items:center;padding:2px 10px;border-radius:var(--radius-badge);font-size:11px;font-weight:600;line-height:1.4;background:var(--green-100);color:var(--green-700);white-space:nowrap}
.kpi-badge.success{background:var(--green-100);color:var(--green-700)}
.kpi-badge.warning{background:color-mix(in srgb,var(--color-warning-soft) 56%,var(--white) 44%);color:var(--raw-c2410c)}

/* Glow progress */
.glow-progress{
  height:10px;
  background:var(--color-border);
  border-radius:999px;
  overflow:hidden;
  margin:10px 0 6px;
}
.glow-progress i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--green-700),var(--green-500));transition:width .35s ease}

/* Mini spark dots */
.mini-spark{
  display:flex;
  gap:6px;
  margin:10px 0 6px;
}
.mini-spark i{
  width:18px;height:8px;
  border-radius:4px;
  background:var(--color-border);
}
.mini-spark i.active{background:linear-gradient(90deg,var(--warning),var(--color-info))}

/* ═══════════════════════════════════════════
   8. TAGS
   ═══════════════════════════════════════════ */
.tag{display:inline-flex;align-items:center;padding:3px 10px;border-radius:var(--radius-badge);font-size:11px;font-weight:600;line-height:1.5;white-space:nowrap;background:var(--green-100);color:var(--green-700)}
.tag.green{background:var(--green-100);color:var(--green-700)}
.tag.red{background:color-mix(in srgb,var(--color-danger-soft) 52%,var(--white) 48%);color:var(--color-danger-text)}
.tag.orange{background:color-mix(in srgb,var(--color-warning-soft) 56%,var(--white) 44%);color:var(--raw-c2410c)}
.tag.blue{background:color-mix(in srgb,var(--color-info-soft) 55%,var(--white) 45%);color:var(--color-info-text)}
.tag.teal{background:var(--raw-ecfdf5);color:var(--color-success-text)}
.tag.purple{background:var(--color-info-soft);color:var(--color-info-text)}
.tag-button{
  border:0;
  cursor:pointer;
  font-family:inherit;
}
.tag-button:hover{filter:brightness(.96)}
.drill-card{
  cursor:pointer;
  transition:transform var(--fast),box-shadow var(--fast),border-color var(--fast);
}
.drill-card:hover{
  transform:translateY(-1px);
  border-color:var(--primary);
  box-shadow:var(--shadow-float);
}

.purchase-quote-row td{
  background:var(--color-surface-soft)!important;
  padding:0 16px 16px;
}
.purchase-quote-detail{
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--white);
  overflow:hidden;
  box-shadow:0 8px 22px color-mix(in srgb, var(--gray-900) 6%, transparent);
}
.quote-detail-title{
  padding:12px 14px;
  font-weight:700;
  color:var(--text-primary);
  background:var(--color-surface-soft);
  border-bottom:1px solid var(--border);
}
.purchase-quote-detail table th,
.purchase-quote-detail table td{
  padding:10px 12px;
  vertical-align:top;
}

/* ═══════════════════════════════════════════
   9. TABLES
   ═══════════════════════════════════════════ */
table{
  width:100%;border-collapse:separate;border-spacing:0;font-size:13px;
}
thead th{
  position:sticky;top:0;background:var(--gray-50,var(--color-surface-soft));
  color:var(--text-primary);font-weight:600;text-align:left;
  padding:10px 14px;border-bottom:1px solid var(--card-border);
  white-space:nowrap;z-index:1;font-size:12px;
}
tbody td{
  padding:10px 14px;border-bottom:1px solid var(--card-border,var(--gray-200));vertical-align:top;text-align:left;
  line-height:1.38;
}
tbody tr:nth-child(even){background:var(--color-surface-soft)}
tbody tr:hover{background:var(--green-50,var(--color-primary-faint))}
.table-wrap{
  overflow:auto;
  max-height:560px;
  border:1px solid var(--card-border);
  border-radius:var(--radius-card);
  background:var(--card-bg);
}
.compact-table{max-height:380px}
.compact-table table{font-size:12.5px}
.compact-table th,.compact-table td{padding:7px 9px;line-height:1.4}

/* Cell helpers */
.table-actions{display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:flex-start}
.cell-main{display:block;font-weight:600;color:var(--text-primary);line-height:1.35}
.cell-sub{display:block;margin-top:2px;font-size:12px;line-height:1.3;color:var(--text-secondary)}
.cell-subtext{margin-top:3px;font-size:12px;color:var(--text-secondary)}
.nowrap{white-space:nowrap}
.num{text-align:left;font-variant-numeric:tabular-nums;white-space:nowrap}
.next-action-cell{min-width:300px;max-width:420px;line-height:1.45}
.next-action-cell.muted .next-action-main{color:var(--text-secondary);font-weight:500}
.next-action-main{
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-weight:600;
  color:var(--text-primary);
  word-break:break-word;
}
.next-action-main.clickable{
  cursor:pointer;
}
.next-action-main.clickable:hover{
  color:var(--green-700);
  text-decoration:underline;
  text-underline-offset:3px;
}
.next-action-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
.next-action-meta .cell-sub{display:inline;margin-top:0}

/* 跟进状态增强样式 */
.next-action-meta .tag.red.overdue{
  background:color-mix(in srgb,var(--color-danger-soft) 52%,var(--white) 48%);
  color:var(--color-danger);
  border:1px solid color-mix(in srgb,var(--color-danger) 42%,var(--white) 58%);
  font-weight:700;
  padding:2px 8px;
  animation:pulse-red 2s infinite;
}
.next-action-meta .tag.orange.today{
  background:color-mix(in srgb,var(--color-warning-soft) 48%,var(--white) 52%);
  color:var(--color-warning);
  border:1px solid var(--raw-fcd34d);
  font-weight:700;
  padding:2px 8px;
}
.next-action-meta .tag.blue.urgent{
  background:color-mix(in srgb,var(--color-info-soft) 55%,var(--white) 45%);
  color:var(--color-info);
  border:1px solid color-mix(in srgb,var(--color-info) 34%,var(--white) 66%);
  font-weight:600;
  padding:2px 8px;
}
.next-action-meta .tag.red.long-no-followup{
  background:color-mix(in srgb,var(--color-danger-soft) 52%,var(--white) 48%);
  color:var(--color-danger);
  border:1px solid color-mix(in srgb,var(--color-danger) 42%,var(--white) 58%);
  font-weight:700;
  padding:2px 8px;
}
@keyframes pulse-red{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--raw-dc2626) 40%, transparent)}
  50%{box-shadow:0 0 0 4px color-mix(in srgb, var(--raw-dc2626) 0%, transparent)}
}
.next-action-meta .action-link{
  color:var(--color-info);
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  border:none;
  background:none;
  padding:2px 6px;
  border-radius:4px;
  transition:all .2s;
}
.next-action-meta .action-link:hover{
  background:var(--color-info-soft);
  color:var(--color-info-text);
}

/* Sortable headers */
.sortable{cursor:pointer;user-select:none;transition:background var(--fast)}
.sortable:hover{background:var(--green-50)}
.sort-arrow{font-size:10px;margin-left:4px;opacity:0.4}
.sortable.asc .sort-arrow::before{content:"▲";opacity:1}
.sortable.desc .sort-arrow::before{content:"▼";opacity:1}

/* ===== Table cell defaults ===== */
.table-wrap td{overflow:visible}
/* ── 资料库表格紧凑布局 ── */
.file-library-table{table-layout:fixed;width:730px;min-width:730px;max-width:none}
.file-library-table thead th{font-size:11px;padding:4px 4px 4px 6px;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.file-library-table tbody td{padding:4px 4px 4px 6px;font-size:12px;line-height:1.3}
.file-library-table tbody tr:nth-child(even){background:var(--color-surface-soft)}
.file-library-table tbody tr:hover{background:var(--color-primary-faint)}
/* 列宽分配 — 资料库共9列 */
.file-library-table .col-index{width:28px;text-align:center;padding-left:4px!important;padding-right:2px!important}
.file-library-table .col-actions{width:46px;text-align:center;padding-left:2px!important;padding-right:2px!important}
.file-library-table .col-name{width:245px;word-break:break-word;overflow-wrap:anywhere;padding-left:6px!important;padding-right:6px!important}
.file-library-table .col-project{width:112px;word-break:break-word;overflow-wrap:anywhere;padding-left:6px!important;padding-right:4px!important}
.file-library-table .col-type{width:70px;white-space:normal;word-break:break-word;overflow-wrap:anywhere;text-align:left;padding-left:4px!important;padding-right:4px!important}
.file-library-table .col-version{width:40px;text-align:center;padding-left:2px!important;padding-right:2px!important}
.file-library-table .col-uploader{width:52px;white-space:nowrap;text-align:left;padding-left:4px!important;padding-right:4px!important}
.file-library-table .col-date{width:72px;white-space:nowrap;padding-left:4px!important;padding-right:4px!important}
.file-library-table .col-note{width:60px;word-break:break-word;overflow-wrap:anywhere;padding-left:4px!important;padding-right:6px!important}
/* 操作按钮紧凑 */
.file-library-table .action-link.icon-btn{padding:2px 4px;margin:0 1px}
/* 上传时间紧凑 */
.file-library-table .col-date time{font-size:11.5px}
.table-wrap .cell-main,
.table-wrap td > strong{white-space:normal;word-break:break-word;overflow-wrap:anywhere}
.table-wrap .cell-sub{white-space:normal;word-break:break-word;overflow-wrap:anywhere}
.table-wrap .tag,
.table-wrap .pa-status,
.table-wrap .bullet-status{
  padding:2px 8px;
  border-radius:999px;
  font-size:10.5px;
  line-height:1.25;
}
.table-wrap .tag + .tag{
  margin-left:4px;
}
.table-wrap thead th:nth-child(1),
.table-wrap tbody td:nth-child(1){
  padding-left:10px;
  padding-right:6px;
}
.table-wrap thead th:nth-child(2),
.table-wrap tbody td:nth-child(2){
  padding-left:8px;
  padding-right:8px;
}

/* Task reminder table stays scan-friendly in the narrow dashboard panel. */
.task-command-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.task-single-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
.task-table-wrap{max-height:560px}
.task-table{min-width:1180px;table-layout:fixed}
.task-table th,.task-table td{
  padding:10px 10px;
  vertical-align:top;
}
.task-table th:nth-child(1),.task-table td:nth-child(1){width:48px}
.task-table th:nth-child(2),.task-table td:nth-child(2){width:72px}
.task-table th:nth-child(3),.task-table td:nth-child(3){width:230px}
.task-table th:nth-child(4),.task-table td:nth-child(4){width:110px}
.task-table th:nth-child(5),.task-table td:nth-child(5){width:120px}
.task-table th:nth-child(6),.task-table td:nth-child(6){width:170px}
.task-table th:nth-child(7),.task-table td:nth-child(7){width:340px}
.task-table td{
  white-space:normal;
  word-break:break-word;
}
.task-table td:first-child{
  white-space:normal;
  overflow:visible;
}
.task-table .task-actions{
  display:flex;
  gap:2px;
  align-items:center;
  flex-wrap:nowrap;
  justify-content:center;
}
.task-table td > strong,
.task-table .cell-sub{
  display:block;
  white-space:normal;
  word-break:break-word;
  overflow:visible;
  text-overflow:clip;
}
.task-table .cell-sub{margin-top:2px}

/* Project table */
.project-table{min-width:1180px;table-layout:fixed;font-size:13px}
.project-table th,.project-table td{vertical-align:top;padding:10px 4px;text-align:left}
.project-table th:nth-child(1),.project-table td:nth-child(1){width:44px}
.project-table th:nth-child(2),.project-table td:nth-child(2){width:64px;text-align:center}
.project-table th:nth-child(3),.project-table td:nth-child(3){width:150px}
.project-table th:nth-child(4),.project-table td:nth-child(4){width:150px}
.project-table th:nth-child(5),.project-table td:nth-child(5){width:170px}
.project-table th:nth-child(6),.project-table td:nth-child(6){width:90px}
.project-table th:nth-child(7),.project-table td:nth-child(7){width:90px}
.project-table th:nth-child(8),.project-table td:nth-child(8){width:96px}
.project-table th:nth-child(9),.project-table td:nth-child(9){width:210px;line-height:1.55;word-break:break-word;white-space:normal}
.project-table th:nth-child(10),.project-table td:nth-child(10){width:132px;word-break:break-word;white-space:normal}
.project-table .project-actions-cell .table-actions{justify-content:center}
.project-cell-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.key-focus-region,
.key-region-row{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-top:8px;
}
.key-region-label{
  flex:none;
  min-width:34px;
  font-size:12px;
  font-weight:700;
  color:var(--text-primary);
  line-height:1.6;
}
.key-region-value{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.key-focus-region .tag,
.key-region-value .tag{
  min-height:22px;
  padding:0 10px;
  font-size:11px;
}
.metric-bar-row{
  display:grid;
  gap:8px;
  padding:10px 0 12px;
}
.metric-bar-row + .metric-bar-row{
  border-top:1px solid color-mix(in srgb, var(--gray-400) 18%, transparent);
}
.metric-bar-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:13px;
  color:var(--text-secondary);
}
.metric-bar-head strong{
  color:var(--text-primary);
  font-size:16px;
}
.metric-bar-head span{
  white-space:nowrap;
}
.metric-bar-track{
  position:relative;
  height:12px;
  border-radius:999px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--gray-900) 8%, transparent), color-mix(in srgb, var(--gray-900) 14%, transparent));
  overflow:hidden;
}
.metric-bar-track i{
  position:absolute;
  inset:0 auto 0 0;
  display:block;
  border-radius:999px;
  background:linear-gradient(90deg, var(--color-primary) 0%, var(--raw-22c55e) 52%, var(--raw-60a5fa) 100%);
  box-shadow:0 6px 14px color-mix(in srgb, var(--raw-10b981) 22%, transparent);
}
.project-table-wrap{max-height:640px;overflow:auto}
.finance-table{min-width:1120px;table-layout:fixed}
.finance-table th,.finance-table td{vertical-align:top;text-align:left!important}
.finance-table .num{text-align:left!important}
.finance-table th:nth-child(1),.finance-table td:nth-child(1){width:48px}
.finance-table th:nth-child(2),.finance-table td:nth-child(2){width:96px}
.finance-table th:nth-child(3),.finance-table td:nth-child(3){width:220px}
.finance-table th:nth-child(4),.finance-table td:nth-child(4){width:100px}
.finance-table th:nth-child(5),.finance-table td:nth-child(5){width:160px}
.finance-table th:nth-child(6),.finance-table td:nth-child(6){width:100px}
.finance-table th:nth-child(7),.finance-table td:nth-child(7){width:110px}
.finance-table th:nth-child(8),.finance-table td:nth-child(8){width:120px}
.finance-table th:nth-child(9),.finance-table td:nth-child(9){width:120px}
.finance-table th:nth-child(10),.finance-table td:nth-child(10){width:120px}
.finance-action-cell{white-space:normal}
.finance-main-actions{display:flex;gap:8px;align-items:flex-start;justify-content:flex-start;flex-wrap:wrap;white-space:nowrap}
.finance-action-more{position:relative;display:inline-flex}
.finance-action-more summary{
  list-style:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border-radius:5px;
  cursor:pointer;
}
.finance-action-more summary::-webkit-details-marker{display:none}
.finance-action-more summary:hover{background:var(--primary-bg);color:var(--primary-hover)}
.finance-action-menu{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  z-index:30;
  min-width:112px;
  padding:8px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--card-bg);
  box-shadow:0 12px 28px color-mix(in srgb, var(--gray-900) 14%, transparent);
  display:grid;
  gap:6px;
}
.finance-action-menu .action-link{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  padding:2px 4px;
  border-radius:6px;
  width:100%;
}
.finance-action-menu .action-link:hover{background:var(--primary-light)}
.finance-table-wrap{max-height:520px;overflow:auto}
.key-hero{
  display:grid;
  grid-template-columns:minmax(280px,.85fr) minmax(0,1.45fr);
  gap:20px;
  align-items:stretch;
  padding:22px 24px;
  background:linear-gradient(135deg,var(--green-50) 0%,var(--white) 55%,var(--color-primary-faint) 100%);
  border:1px solid var(--card-border);
  border-radius:16px;
  box-shadow:0 8px 24px color-mix(in srgb, var(--green-700) 6%, transparent);
  position:relative;
  overflow:hidden;
}
.key-hero::before{
  content:"";
  position:absolute;
  top:-30px;
  right:-30px;
  width:200px;
  height:200px;
  border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--green-500) 12%, transparent), transparent 70%);
  pointer-events:none;
}
.key-hero-copy h3{
  margin:0;
  font-size:24px;
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--text-primary);
  font-weight:700;
}
.key-hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  color:var(--green-700);
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.key-hero-eyebrow::before{
  content:"";
  display:inline-block;
  width:18px;
  height:2px;
  border-radius:2px;
  background:var(--green-500);
}
.key-hero-copy p{
  margin:10px 0 0;
  max-width:560px;
  color:var(--text-secondary);
  font-size:13px;
  line-height:1.65;
}
.key-hero-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}
.key-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:28px;
  padding:5px 12px;
  border-radius:999px;
  background:color-mix(in srgb, var(--green-500) 8%, transparent);
  color:var(--green-700);
  border:1px solid color-mix(in srgb, var(--green-500) 22%, transparent);
  font-size:12px;
  line-height:1.3;
  font-weight:500;
  transition:all var(--fast);
}
.key-chip:hover{
  background:color-mix(in srgb, var(--green-500) 14%, transparent);
  transform:translateY(-1px);
}
.key-chip::before{
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--green-500);
}
.key-hero-metrics{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.key-metric{
  position:relative;
  min-height:124px;
  padding:16px 16px 18px;
  border-radius:14px;
  background:var(--white);
  border:1px solid color-mix(in srgb, var(--green-700) 8%, transparent);
  box-shadow:0 4px 14px color-mix(in srgb, var(--green-700) 5%, transparent);
  overflow:hidden;
  transition:transform var(--fast), box-shadow var(--fast), border-color var(--fast);
}
.key-metric:hover{
  transform:translateY(-1px);
  box-shadow:var(--card-system-shadow-hover);
  border-color:var(--color-primary-border);
}
.key-metric::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  border-radius:0 0 14px 14px;
  background:linear-gradient(90deg,var(--green-500),var(--green-600));
}
.key-metric:nth-child(2)::after{
  background:linear-gradient(90deg,var(--color-info),var(--color-info-text));
}
.key-metric:nth-child(3)::after{
  background:linear-gradient(90deg,var(--color-warning),var(--color-warning));
}
.key-metric:nth-child(4)::after{
  background:linear-gradient(90deg,var(--color-info),var(--color-info-text));
}
.key-metric .metric-icon{
  position:absolute;
  top:14px;
  right:14px;
  width:34px;
  height:34px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:color-mix(in srgb, var(--green-500) 8%, transparent);
  color:var(--green-700);
}
.key-metric:nth-child(2) .metric-icon{background:color-mix(in srgb, var(--raw-3b82f6) 8%, transparent);color:var(--color-info)}
.key-metric:nth-child(3) .metric-icon{background:color-mix(in srgb, var(--raw-f59e0b) 8%, transparent);color:var(--color-warning)}
.key-metric:nth-child(4) .metric-icon{background:color-mix(in srgb, var(--raw-8b5cf6) 8%, transparent);color:var(--color-info-text)}
.key-metric span{
  display:block;
  color:var(--text-secondary);
  font-size:12px;
  font-weight:600;
  line-height:1.3;
  letter-spacing:.01em;
}
.key-metric strong{
  display:block;
  margin-top:10px;
  font-size:28px;
  line-height:1.1;
  color:var(--text-primary);
  font-family:var(--font-mono);
  font-weight:700;
  white-space:normal;
  word-break:break-word;
}
.key-metric em{
  display:block;
  margin-top:6px;
  font-style:normal;
  color:var(--text-muted);
  font-size:11px;
  line-height:1.4;
}

/* ── Key Project Table ── */
.key-project-table-wrap{
  max-height:620px;
  overflow:auto;
  border-radius:10px;
}
.key-project-table{
  min-width:1520px;
  table-layout:fixed;
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
.key-project-table thead th{
  position:sticky;
  top:0;
  z-index:5;
  text-align:left;
  vertical-align:middle;
  padding:12px 12px;
  background:linear-gradient(180deg,var(--color-surface-soft),var(--color-surface-soft));
  color:var(--text-secondary);
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  border-bottom:2px solid var(--card-border);
}
.key-project-table tbody td{
  text-align:left;
  vertical-align:top;
  padding:14px 12px;
  border-bottom:1px solid color-mix(in srgb, var(--gray-400) 12%, transparent);
  font-size:13px;
  transition:background var(--fast);
}
.key-project-table tbody tr:hover td{
  background:color-mix(in srgb, var(--green-500) 4%, transparent);
}
.key-project-table th:nth-child(1),.key-project-table td:nth-child(1){width:52px}
.key-project-table th:nth-child(2),.key-project-table td:nth-child(2){width:88px;text-align:center}
.key-project-table th:nth-child(3),.key-project-table td:nth-child(3){width:240px}
.key-project-table th:nth-child(4),.key-project-table td:nth-child(4){width:240px}
.key-project-table th:nth-child(5),.key-project-table td:nth-child(5){width:170px}
.key-project-table th:nth-child(6),.key-project-table td:nth-child(6){width:150px}
.key-project-table th:nth-child(7),.key-project-table td:nth-child(7){width:150px}
.key-project-table th:nth-child(8),.key-project-table td:nth-child(8){width:240px}
.key-project-table th:nth-child(9),.key-project-table td:nth-child(9){width:110px}
.key-project-table .cell-main{
  color:var(--text-primary);
  font-weight:600;
  line-height:1.4;
  word-break:break-word;
}
.key-project-table .cell-sub{
  margin-top:3px;
  color:var(--text-secondary);
  font-size:12px;
  line-height:1.45;
  word-break:break-word;
}
.key-project-table .key-region-row{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:4px;
}
.key-project-table .key-region-row .key-region-label{
  font-size:10px;
  font-weight:700;
  color:var(--text-muted);
  min-width:28px;
  letter-spacing:.04em;
}
.key-project-table .cell-tags{
  margin-top:4px;
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}
.key-project-table .key-priority-cell .tag{
  margin-bottom:6px;
}
.key-project-table .table-actions{
  display:flex;
  gap:4px;
  justify-content:center;
  flex-wrap:wrap;
}
.key-project-table .table-actions .icon-btn{
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid transparent;
  background:transparent;
  color:var(--text-secondary);
  cursor:pointer;
  transition:all var(--fast);
}
.key-project-table .table-actions .icon-btn:hover{
  background:var(--green-50);
  color:var(--green-700);
  border-color:var(--green-200);
}
.key-project-table .table-actions .icon-btn svg{
  stroke-width:2;
}

/* ── Priority Bars ── */
.card #keyPriorityBars{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-height:240px;
  padding:4px 0;
}
.metric-bar-row{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.metric-bar-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:0 4px;
}
.metric-bar-head strong{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  height:22px;
  padding:0 6px;
  border-radius:6px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
}
.metric-bar-head strong.s-priority{background:color-mix(in srgb, var(--raw-dc2626) 10%, transparent);color:var(--color-danger)}
.metric-bar-head strong.a-priority{background:color-mix(in srgb, var(--raw-f59e0b) 12%, transparent);color:var(--color-warning)}
.metric-bar-head strong.b-priority{background:color-mix(in srgb, var(--raw-3b82f6) 10%, transparent);color:var(--color-info)}
.metric-bar-head strong.c-priority{background:color-mix(in srgb, var(--gray-500) 12%, transparent);color:var(--gray-600)}
.metric-bar-head strong.unset-priority{background:color-mix(in srgb, var(--gray-400) 10%, transparent);color:var(--color-text-secondary)}
.metric-bar-head span{
  color:var(--text-secondary);
  font-size:12px;
  font-weight:500;
}
.metric-bar-track{
  position:relative;
  height:14px;
  border-radius:8px;
  background:color-mix(in srgb, var(--gray-400) 12%, transparent);
  overflow:hidden;
}
.metric-bar-track i{
  display:block;
  height:100%;
  border-radius:8px;
  background:linear-gradient(90deg,var(--green-400),var(--green-600));
  transition:width .5s ease-out;
}
.metric-bar-track i.s-priority{background:linear-gradient(90deg,color-mix(in srgb,var(--color-danger) 42%,var(--white) 58%),var(--color-danger))}
.metric-bar-track i.a-priority{background:linear-gradient(90deg,var(--raw-fdba74),var(--color-warning))}
.metric-bar-track i.b-priority{background:linear-gradient(90deg,color-mix(in srgb,var(--color-info) 34%,var(--white) 66%),var(--color-info))}
.metric-bar-track i.c-priority{background:linear-gradient(90deg,var(--gray-400),var(--gray-600))}
.metric-bar-track i.unset-priority{background:linear-gradient(90deg,var(--gray-300),var(--color-text-secondary))}

/* ── Focus List Cards ── */
.key-focus-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.key-focus-card{
  display:block;
  width:100%;
  text-align:left;
  appearance:none;
  border:1px solid var(--card-border);
  border-radius:14px;
  background:linear-gradient(180deg,var(--white) 0%,var(--color-surface-soft) 100%);
  box-shadow:0 4px 14px color-mix(in srgb, var(--gray-900) 4%, transparent);
  padding:14px 16px;
  color:inherit;
  cursor:pointer;
  transition:transform var(--fast), box-shadow var(--fast), border-color var(--fast);
}
.key-focus-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px color-mix(in srgb, var(--green-700) 10%, transparent);
  border-color:color-mix(in srgb, var(--green-500) 32%, transparent);
}
.key-focus-card:focus-visible{
  outline:2px solid var(--green-500);
  outline-offset:2px;
}
.key-focus-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.key-focus-head strong{
  font-size:15px;
  color:var(--text-primary);
  line-height:1.4;
  font-weight:600;
}
.key-focus-sub{
  margin-top:5px;
  color:var(--text-secondary);
  font-size:12px;
  line-height:1.5;
}
.key-focus-region{
  margin-top:8px;
  display:flex;
  align-items:center;
  gap:6px;
}
.key-focus-region .key-region-label{
  font-size:10px;
  font-weight:700;
  color:var(--text-muted);
  min-width:28px;
  letter-spacing:.04em;
}
.key-focus-region .key-region-value{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}
.key-focus-foot{
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:var(--text-secondary);
  font-size:11px;
}
.key-focus-foot strong{
  color:var(--text-primary);
}
.key-hero .tag{
  border-radius:999px;
}
.wide-table-wrap table{min-width:1320px}

/* Customer table */
.customer-table-wrap{max-height:620px;overflow:auto}
.customer-table{
  min-width:1280px;
  table-layout:fixed;
  width:100%;
}
.customer-table th,.customer-table td{
  vertical-align:top;
  text-align:left;
  padding:10px 8px;
}
.customer-table th:nth-child(1),.customer-table td:nth-child(1){width:48px}
.customer-table th:nth-child(2),.customer-table td:nth-child(2){width:92px;text-align:center}
.customer-table th:nth-child(3),.customer-table td:nth-child(3){width:220px}
.customer-table th:nth-child(4),.customer-table td:nth-child(4){width:190px}
.customer-table th:nth-child(5),.customer-table td:nth-child(5){width:180px}
.customer-table th:nth-child(6),.customer-table td:nth-child(6){width:180px}
.customer-table th:nth-child(7),.customer-table td:nth-child(7){width:150px;text-align:center}
.customer-table th:nth-child(8),.customer-table td:nth-child(8){width:100px;text-align:center}
.customer-table .action-link{display:inline-flex;vertical-align:middle}
.customer-table-compact th,.customer-table-compact td{text-align:left}
.customer-table-compact{min-width:1500px;table-layout:auto}
.customer-table-compact th:nth-child(1),.customer-table-compact td:nth-child(1){width:48px;min-width:48px}
.customer-table-compact th:nth-child(2),.customer-table-compact td:nth-child(2){width:96px;min-width:96px}
.customer-table-compact th:nth-child(3),.customer-table-compact td:nth-child(3){min-width:200px}
.customer-table-compact th:nth-child(4),.customer-table-compact td:nth-child(4){min-width:140px}
.customer-table-compact th:nth-child(5),.customer-table-compact td:nth-child(5){min-width:180px}
.customer-table-compact th:nth-child(6),.customer-table-compact td:nth-child(6){min-width:130px}
.customer-table-compact th:nth-child(7),.customer-table-compact td:nth-child(7){min-width:160px}
.customer-table-compact th:nth-child(8),.customer-table-compact td:nth-child(8){min-width:220px}

.quote-table{
  min-width:1280px;
  table-layout:fixed;
  width:100%;
}
.quote-table th,.quote-table td{
  vertical-align:top;
  text-align:left;
  padding:10px 8px;
}
.quote-table th:nth-child(1),.quote-table td:nth-child(1){width:48px}
.quote-table th:nth-child(2),.quote-table td:nth-child(2){width:100px;text-align:center}
.quote-table th:nth-child(3),.quote-table td:nth-child(3){width:220px}
.quote-table th:nth-child(4),.quote-table td:nth-child(4){width:290px}
.quote-table th:nth-child(5),.quote-table td:nth-child(5){width:104px}
.quote-table th:nth-child(6),.quote-table td:nth-child(6){width:92px;text-align:center}
.quote-table th:nth-child(7),.quote-table td:nth-child(7){width:108px;text-align:center}
.quote-table th:nth-child(8),.quote-table td:nth-child(8){width:92px;text-align:center}
.quote-table th:nth-child(9),.quote-table td:nth-child(9){width:108px;text-align:center}
.quote-table .action-link{display:inline-flex;vertical-align:middle}
.quote-table td:nth-child(2){
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  flex-wrap:wrap;
  min-height:48px;
}
.quote-table td:nth-child(2) .btn.small{
  min-height:28px;
  padding:4px 8px;
  font-size:12px;
  line-height:1;
}
.sales-contract-table{
  min-width:1120px;
  table-layout:fixed;
  width:100%;
}
.sales-contract-table th,.sales-contract-table td{
  vertical-align:top;
}
.sales-contract-table th:nth-child(1),.sales-contract-table td:nth-child(1){width:48px}
.sales-contract-table th:nth-child(2),.sales-contract-table td:nth-child(2){width:150px;text-align:center}
.sales-contract-table th:nth-child(3),.sales-contract-table td:nth-child(3){width:210px}
.sales-contract-table th:nth-child(4),.sales-contract-table td:nth-child(4){width:260px}
.sales-contract-table th:nth-child(5),.sales-contract-table td:nth-child(5){width:130px}
.sales-contract-table th:nth-child(6),.sales-contract-table td:nth-child(6){width:120px}
.sales-contract-table th:nth-child(7),.sales-contract-table td:nth-child(7){width:96px;text-align:center}
.sales-contract-table th:nth-child(8),.sales-contract-table td:nth-child(8){width:86px;text-align:center}
.sales-contract-table .task-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:5px;
}
.sales-contract-table .task-actions .btn.small,
.sales-contract-table .task-actions .icon-btn{
  min-height:28px;
}
.sales-contract-table .task-actions .btn.small{
  min-width:52px;
  padding:4px 9px;
}
.sales-contract-table .task-actions .btn.danger{
  background:var(--color-danger);
  border-color:var(--color-danger);
  color:var(--white);
}

/* ═══════════════════════════════════════════════════════════
   SALES STATS - REDESIGNED
   ═══════════════════════════════════════════════════════════ */
.sales-stats-hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:20px 22px;
  border-radius:14px;
  background:linear-gradient(135deg,var(--green-50) 0%,var(--white) 60%,var(--color-primary-faint) 100%);
  border:1px solid var(--card-border);
  box-shadow:0 6px 18px color-mix(in srgb, var(--green-700) 5%, transparent);
  position:relative;
  overflow:hidden;
}
.sales-stats-hero::before{
  content:"";
  position:absolute;
  top:-40px;right:-40px;
  width:160px;height:160px;
  border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--green-500) 12%, transparent), transparent 70%);
  pointer-events:none;
}
.sales-stats-hero h3{
  margin:0;
  font-size:22px;
  line-height:1.2;
  letter-spacing:-.01em;
  font-weight:700;
  color:var(--text-primary);
}
.sales-stats-hero .stats-hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
  color:var(--green-700);
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.sales-stats-hero .stats-hero-eyebrow::before{
  content:"";
  display:inline-block;
  width:16px;height:2px;
  border-radius:2px;
  background:var(--green-500);
}
.sales-stats-hero .stats-hero-copy p{
  margin:6px 0 0;
  color:var(--text-secondary);
  font-size:12px;
  line-height:1.55;
  max-width:680px;
}
.stats-hero-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.stats-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 12px;
  border-radius:999px;
  background:color-mix(in srgb, var(--green-500) 8%, transparent);
  color:var(--green-700);
  border:1px solid color-mix(in srgb, var(--green-500) 22%, transparent);
  font-size:11px;
  font-weight:600;
  line-height:1.3;
  white-space:nowrap;
}

/* KPI rows */
.stats-kpi-row{
  display:grid;
  gap:12px;
}
.stats-kpi-row.primary{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.stats-kpi-row.secondary{
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:12px;
}
.stats-kpi-row.registration-stats-kpis{
  grid-template-columns:repeat(5,minmax(0,1fr));
}
.registration-stats-table{min-width:1080px}
.registration-stats-table .stat-muted{white-space:nowrap}
.registration-row-click{cursor:pointer}
.registration-row-click:hover{background:var(--table-row-hover,color-mix(in srgb, var(--raw-22a05e) 5%, transparent))}
.stats-kpi-row.registration-stats-kpis .stats-kpi:nth-child(2) .stats-kpi-icon,
.stats-kpi-row.registration-stats-kpis .stats-kpi:nth-child(5) .stats-kpi-icon{background:color-mix(in srgb, var(--raw-f59e0b) 8%, transparent);color:var(--color-warning)}
.stats-kpi-row.registration-stats-kpis .stats-kpi:nth-child(4) .stats-kpi-icon{background:color-mix(in srgb, var(--raw-22a05e) 8%, transparent);color:var(--green-700)}
.stats-kpi-row.alert{
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:12px;
  gap:10px;
}
/* Fix grid item overflow */
.stats-kpi-row > *{
  min-width:0;
}

/* KPI card */
.stats-kpi{
  position:relative;
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:16px 16px 18px;
  border-radius:12px;
  background:var(--white);
  border:1px solid var(--card-border);
  cursor:pointer;
  transition:transform var(--fast), box-shadow var(--fast), border-color var(--fast);
  overflow:hidden;
}
.stats-kpi:hover{
  transform:translateY(-1px);
  box-shadow:var(--card-system-shadow-hover);
  border-color:var(--color-primary-border);
}
.stats-kpi::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:3px;
  border-radius:0 0 12px 12px;
  background:linear-gradient(90deg,var(--green-400),var(--green-600));
}
.stats-kpi:nth-child(2)::after{background:linear-gradient(90deg,var(--color-info),var(--color-info-text))}
.stats-kpi:nth-child(3)::after{background:linear-gradient(90deg,var(--color-info),var(--color-info-text))}
.stats-kpi:nth-child(4)::after{background:linear-gradient(90deg,var(--color-warning),var(--color-warning))}

.stats-kpi-icon{
  width:38px;height:38px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:color-mix(in srgb, var(--green-500) 8%, transparent);
  color:var(--green-700);
  flex-shrink:0;
}
.stats-kpi:nth-child(2) .stats-kpi-icon{background:color-mix(in srgb, var(--raw-3b82f6) 8%, transparent);color:var(--color-info)}
.stats-kpi:nth-child(3) .stats-kpi-icon{background:color-mix(in srgb, var(--raw-8b5cf6) 8%, transparent);color:var(--color-info-text)}
.stats-kpi:nth-child(4) .stats-kpi-icon{background:color-mix(in srgb, var(--raw-f59e0b) 8%, transparent);color:var(--color-warning)}

.stats-kpi .stats-kpi-content{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  flex:1;
}
.stats-kpi-label{
  display:block;
  color:var(--text-secondary);
  font-size:11px;
  font-weight:600;
  line-height:1.3;
  letter-spacing:.01em;
}
.stats-kpi strong{
  display:block;
  font-size:22px;
  line-height:1.15;
  color:var(--text-primary);
  font-family:var(--font-mono);
  font-weight:700;
  white-space:normal;
  word-break:break-word;
}
.stats-kpi em{
  display:block;
  margin-top:2px;
  font-style:normal;
  color:var(--text-muted);
  font-size:10px;
  line-height:1.3;
}

/* Secondary row */
.stats-kpi-row.secondary .stats-kpi{
  padding:12px 14px 14px;
  flex-direction:row;
  align-items:center;
  gap:10px;
}
.stats-kpi-row.secondary .stats-kpi-icon{
  width:32px;height:32px;
  border-radius:8px;
}
.stats-kpi-row.secondary .stats-kpi strong{
  font-size:19px;
  line-height:1.15;
}
.stats-kpi-row.secondary .stats-kpi .stats-kpi-label{
  font-size:10px;
}
.stats-kpi-row.secondary .stats-kpi:nth-child(1) .stats-kpi-icon{background:color-mix(in srgb, var(--green-500) 8%, transparent);color:var(--green-700)}
.stats-kpi-row.secondary .stats-kpi:nth-child(2) .stats-kpi-icon{background:color-mix(in srgb, var(--raw-3b82f6) 8%, transparent);color:var(--color-info)}
.stats-kpi-row.secondary .stats-kpi:nth-child(3) .stats-kpi-icon{background:color-mix(in srgb, var(--raw-8b5cf6) 8%, transparent);color:var(--color-info-text)}
.stats-kpi-row.secondary .stats-kpi:nth-child(4) .stats-kpi-icon{background:color-mix(in srgb, var(--raw-f59e0b) 8%, transparent);color:var(--color-warning)}
.stats-kpi-row.secondary .stats-kpi em{
  margin-top:1px;
  font-size:10px;
}

/* Alert row */
.stats-kpi-row.alert .stats-kpi{
  padding:14px 14px 16px;
  flex-direction:column;
  gap:4px;
  background:linear-gradient(180deg,var(--white),var(--raw-fff8f0));
  border-color:color-mix(in srgb, var(--raw-f59e0b) 20%, transparent);
}
.stats-kpi-row.alert .stats-kpi.warn{
  background:linear-gradient(180deg,var(--white),var(--raw-fff8f0));
}
.stats-kpi-row.alert .stats-kpi::after{
  background:linear-gradient(90deg,var(--raw-fbbf24),var(--color-warning));
}
.stats-kpi-row.alert .stats-kpi strong{
  font-size:22px;
}
.stats-kpi-row.alert .stats-kpi em{
  color:var(--color-warning-text);
}
.stats-kpi-row.alert .stats-kpi:not(.warn)::after{
  background:linear-gradient(90deg,var(--green-400),var(--green-600));
}
.stats-kpi-row.alert .stats-kpi:not(.warn){
  background:var(--white);
  border-color:var(--card-border);
}
.stats-kpi-row.alert .stats-kpi:not(.warn) em{
  color:var(--text-muted);
}

/* Stats tables */
.stats-table-wrap{
  max-height:420px;
  overflow:auto;
  border-radius:10px;
}
.stats-table{
  border-collapse:separate;
  border-spacing:0;
}
.stats-table thead th{
  position:sticky;
  top:0;
  z-index:3;
  text-align:left;
  vertical-align:middle;
  padding:10px 10px;
  background:linear-gradient(180deg,var(--color-surface-soft),var(--color-surface-soft));
  color:var(--text-secondary);
  font-size:10px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  border-bottom:2px solid var(--card-border);
}
.stats-table tbody td{
  text-align:left;
  vertical-align:middle;
  padding:10px 10px;
  border-bottom:1px solid color-mix(in srgb, var(--gray-400) 12%, transparent);
  font-size:12px;
  color:var(--text-primary);
  transition:background var(--fast);
}
.stats-table tbody tr:hover td{
  background:color-mix(in srgb, var(--green-500) 4%, transparent);
}
.stats-table tbody tr:nth-child(even) td{
  background:color-mix(in srgb, var(--gray-50) 50%, transparent);
}
.stats-table tbody tr:nth-child(even):hover td{
  background:color-mix(in srgb, var(--green-500) 4%, transparent);
}
.stats-table strong{
  color:var(--text-primary);
  font-family:var(--font-mono);
  font-weight:600;
}

/* Stats bars */
.stats-bars{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:240px;
  padding:4px 0;
}
.stats-bars .metric-bar-row{
  display:flex;
  flex-direction:column;
  gap:5px;
}
.stats-bars .metric-bar-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:0 4px;
}
.stats-bars .metric-bar-head strong{
  font-size:12px;
  color:var(--text-primary);
  font-weight:600;
}
.stats-bars .metric-bar-head span{
  color:var(--text-secondary);
  font-size:11px;
  font-family:var(--font-mono);
}
.stats-bars .metric-bar-track{
  position:relative;
  height:12px;
  border-radius:6px;
  background:color-mix(in srgb, var(--gray-400) 12%, transparent);
  overflow:hidden;
}
.stats-bars .metric-bar-track i{
  display:block;
  height:100%;
  border-radius:6px;
  background:linear-gradient(90deg,var(--green-400),var(--green-600));
  transition:width .5s ease-out;
}

/* Sales owner table widths */
.sales-owner-table{min-width:960px;table-layout:fixed;width:100%}
.sales-owner-table th:nth-child(1),.sales-owner-table td:nth-child(1){width:48px}
.sales-owner-table th:nth-child(2),.sales-owner-table td:nth-child(2){width:150px}
.sales-owner-table th:nth-child(3),.sales-owner-table td:nth-child(3){width:80px;text-align:center}
.sales-owner-table th:nth-child(4),.sales-owner-table td:nth-child(4){width:80px;text-align:center}
.sales-owner-table th:nth-child(5),.sales-owner-table td:nth-child(5){width:auto}
.sales-owner-table th:nth-child(6),.sales-owner-table td:nth-child(6){width:auto}
.sales-owner-table th:nth-child(7),.sales-owner-table td:nth-child(7){width:auto}

/* Sales product table widths */
.sales-product-table{min-width:860px;table-layout:fixed;width:100%}
.sales-product-table th:nth-child(1),.sales-product-table td:nth-child(1){width:48px}
.sales-product-table th:nth-child(2),.sales-product-table td:nth-child(2){width:170px}
.sales-product-table th:nth-child(3),.sales-product-table td:nth-child(3){width:76px;text-align:center}
.sales-product-table th:nth-child(4),.sales-product-table td:nth-child(4){width:auto}
.sales-product-table th:nth-child(5),.sales-product-table td:nth-child(5){width:auto}
.sales-product-table th:nth-child(6),.sales-product-table td:nth-child(6){width:auto}

/* Sales closed table widths */
.sales-closed-table{min-width:680px;table-layout:fixed;width:100%}
.sales-closed-table th:nth-child(1),.sales-closed-table td:nth-child(1){width:48px}
.sales-closed-table th:nth-child(2),.sales-closed-table td:nth-child(2){width:200px}
.sales-closed-table th:nth-child(3),.sales-closed-table td:nth-child(3){width:110px}
.sales-closed-table th:nth-child(4),.sales-closed-table td:nth-child(4){width:auto}
.sales-closed-table th:nth-child(5),.sales-closed-table td:nth-child(5){width:100px}

/* ═══════════════════════════════════════════════════════════ */

.sales-owner-table{
  min-width:1040px;
  table-layout:fixed;
  width:100%;
}
.sales-owner-table th,.sales-owner-table td{
  vertical-align:top;
  text-align:left;
  padding:8px 10px;
}
.sales-owner-table th:nth-child(1),.sales-owner-table td:nth-child(1){width:48px}
.sales-owner-table th:nth-child(2),.sales-owner-table td:nth-child(2){width:148px}
.sales-owner-table th:nth-child(3),.sales-owner-table td:nth-child(3){width:90px;text-align:center}
.sales-owner-table th:nth-child(4),.sales-owner-table td:nth-child(4){width:90px;text-align:center}
.sales-owner-table th:nth-child(5),.sales-owner-table td:nth-child(5){width:108px}
.sales-owner-table th:nth-child(6),.sales-owner-table td:nth-child(6){width:100px}
.sales-owner-table th:nth-child(7),.sales-owner-table td:nth-child(7){width:108px}
.sales-owner-table th:nth-child(8),.sales-owner-table td:nth-child(8){width:108px}

.sales-product-table{
  min-width:960px;
  table-layout:fixed;
  width:100%;
}
.sales-product-table th,.sales-product-table td{
  vertical-align:top;
  text-align:left;
  padding:8px 10px;
}
.sales-product-table th:nth-child(1),.sales-product-table td:nth-child(1){width:48px}
.sales-product-table th:nth-child(2),.sales-product-table td:nth-child(2){width:180px}
.sales-product-table th:nth-child(3),.sales-product-table td:nth-child(3){width:90px;text-align:center}
.sales-product-table th:nth-child(4),.sales-product-table td:nth-child(4){width:108px}
.sales-product-table th:nth-child(5),.sales-product-table td:nth-child(5){width:100px}
.sales-product-table th:nth-child(6),.sales-product-table td:nth-child(6){width:108px}
.sales-product-table th:nth-child(7),.sales-product-table td:nth-child(7){width:108px}

.sales-closed-table{
  min-width:920px;
  table-layout:fixed;
  width:100%;
}
.sales-closed-table th,.sales-closed-table td{
  vertical-align:top;
  text-align:left;
  padding:8px 10px;
}
.sales-closed-table th:nth-child(1),.sales-closed-table td:nth-child(1){width:48px}
.sales-closed-table th:nth-child(2),.sales-closed-table td:nth-child(2){width:220px}
.sales-closed-table th:nth-child(3),.sales-closed-table td:nth-child(3){width:140px}
.sales-closed-table th:nth-child(4),.sales-closed-table td:nth-child(4){width:180px}
.sales-closed-table th:nth-child(5),.sales-closed-table td:nth-child(5){width:108px}
.sales-closed-table th:nth-child(6),.sales-closed-table td:nth-child(6){width:108px}
.customer-manage-card .section-title{align-items:center}
.customer-manage-card .section-title h3{display:flex;align-items:center;gap:8px}
.customer-manage-card .section-title h3::before{content:"";display:inline-block;width:4px;height:18px;background:linear-gradient(180deg,var(--color-primary),var(--color-primary-hover));border-radius:2px}
.customer-manage-filters{grid-template-columns:1.6fr 1fr 1fr 1fr auto;gap:10px}
.customer-manage-filters input,.customer-manage-filters select{padding:9px 12px;border:1px solid var(--color-border);border-radius:8px;font-size:13px;transition:all .2s}
.customer-manage-filters input:focus,.customer-manage-filters select:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb, var(--raw-08b955) 12%, transparent);outline:none}
.customer-manage-table-wrap{max-height:650px;overflow:auto;border-radius:10px;border:1px solid var(--color-border)}
.customer-manage-table-wrap table{min-width:1280px;table-layout:fixed;border-collapse:separate;border-spacing:0}
.customer-manage-table-wrap thead{position:sticky;top:0;z-index:2;background:linear-gradient(180deg,var(--color-surface-soft),var(--color-surface-soft))}
.customer-manage-table-wrap th{background:var(--color-surface-soft);color:var(--color-text-secondary);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.04em;padding:12px 14px;border-bottom:2px solid var(--color-border);white-space:nowrap}
.customer-manage-table-wrap td{padding:12px 14px;border-bottom:1px solid var(--color-surface-soft);font-size:13px;color:var(--color-text-secondary);transition:background .15s}
.customer-manage-table-wrap tbody tr:nth-child(even){background:var(--color-surface-soft)}
.customer-manage-table-wrap tbody tr:hover{background:color-mix(in srgb, var(--green-500) 5%, transparent)}
.customer-manage-table-wrap tbody tr:nth-child(even):hover{background:color-mix(in srgb, var(--green-500) 8%, transparent)}
.customer-manage-table-wrap .customer-unit-name{font-weight:600;color:var(--color-text)}
.customer-manage-table-wrap th:nth-child(1),.customer-manage-table-wrap td:nth-child(1){width:48px}
.customer-manage-table-wrap th:nth-child(2),.customer-manage-table-wrap td:nth-child(2){width:110px}
.customer-manage-table-wrap th:nth-child(3),.customer-manage-table-wrap td:nth-child(3){width:280px}
.customer-manage-table-wrap th:nth-child(4),.customer-manage-table-wrap td:nth-child(4){width:120px}
.customer-manage-table-wrap th:nth-child(5),.customer-manage-table-wrap td:nth-child(5){width:100px}
.customer-manage-table-wrap th:nth-child(6),.customer-manage-table-wrap td:nth-child(6){width:80px}
.customer-manage-table-wrap th:nth-child(7),.customer-manage-table-wrap td:nth-child(7){width:180px}
.customer-manage-table-wrap th:nth-child(8),.customer-manage-table-wrap td:nth-child(8){width:140px}
.customer-manage-table-wrap th:nth-child(9),.customer-manage-table-wrap td:nth-child(9){width:110px}
.customer-pending-row{background:color-mix(in srgb,var(--color-warning-soft) 48%,var(--white) 52%)}
.vendor-manage-filters{grid-template-columns:1.6fr 1fr 1fr 1fr auto;gap:10px}
.vendor-manage-filters input,.vendor-manage-filters select{padding:9px 12px;border:1px solid var(--color-border);border-radius:8px;font-size:13px;transition:all .2s}
.vendor-manage-filters input:focus,.vendor-manage-filters select:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb, var(--raw-08b955) 12%, transparent);outline:none}
.vendor-manage-table-wrap{border-radius:10px;border:1px solid var(--color-border);overflow:auto;max-height:620px}
.vendor-manage-card .section-title{align-items:center}
.vendor-manage-card .section-title h3{display:flex;align-items:center;gap:8px}
.vendor-manage-card .section-title h3::before{content:"";display:inline-block;width:4px;height:18px;background:linear-gradient(180deg,var(--color-primary),var(--color-primary-hover));border-radius:2px}
.vendor-manage-card .section-title .filter-result-count{margin-left:0;margin-right:auto}
.dept-source-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  background: var(--color-surface-soft);
  color: var(--color-text-secondary);
  font-size: 10px;
  border-radius: 4px;
  vertical-align: middle;
}
.dept-project-item {
  background: var(--raw-fafafa);
  border-left: 3px solid var(--color-border);
}
.dept-project-item:hover {
  background: var(--color-info-soft) !important;
  border-left-color: var(--color-info);
}
.search-select-group + .search-select-group {
  border-top: 1px solid var(--color-border);
  margin-top: 4px;
  padding-top: 4px;
}
.search-select-group-title {
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-surface-soft);
}
.filter-result-count{display:flex;align-items:center;color:var(--color-text-secondary);font-size:12px;margin-left:8px;padding-left:8px;border-left:1px solid var(--color-border);font-weight:500;white-space:nowrap}
.filter-result-count.has-results{color:var(--color-primary);font-weight:600}
.customer-dept-list{display:flex;flex-direction:column;gap:10px}
.customer-dept-item{display:flex;align-items:flex-start;justify-content:space-between;padding:12px 14px;background:var(--color-surface-soft);border-radius:8px;border:1px solid var(--color-border)}
.customer-dept-item .dept-info{flex:1}
.customer-dept-item .dept-name{font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:4px}
.customer-dept-item .dept-secondary{font-weight:400;color:var(--text-secondary)}
.customer-dept-item .dept-contact{font-size:12px;color:var(--text-secondary);margin-bottom:2px}
.customer-dept-item .dept-email{font-size:12px;color:var(--color-primary-hover);margin-bottom:2px}
.customer-dept-item .dept-note{font-size:12px;color:var(--color-text-muted);margin-top:4px;padding-top:4px;border-top:1px dashed var(--color-border)}
.customer-dept-item .dept-actions{display:flex;gap:8px;margin-left:16px}
.customer-dept-item .dept-actions .action-link{font-size:12px}
.customer-project-table th,.customer-project-table td{text-align:left}
.customer-project-table table{min-width:1320px;table-layout:fixed}
.customer-project-table th:nth-child(9),.customer-project-table td:nth-child(9){width:320px;min-width:320px;line-height:1.55}
.customer-money-cell{white-space:nowrap}
.customer-action-next-cell{color:var(--text-primary);min-width:220px;line-height:1.6;word-break:break-word;white-space:normal}
.customer-action-cell{white-space:nowrap}
.customer-action-cell .action-link:not(.icon-btn){margin-right:2px}
.customer-company-cell{min-width:140px}
.customer-contact-cell{font-size:12px;line-height:1.5;max-width:180px}
.customer-profile-cell{font-size:12px;line-height:1.5;max-width:200px}
.customer-risk-cell{min-width:90px}
.project-actions-cell{white-space:normal}
.project-code-link{color:var(--primary,var(--raw-2563eb));text-decoration:none;font-weight:600;cursor:pointer}
.project-code-link:hover{text-decoration:underline}
.project-actions-cell .table-actions{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:center;
  justify-content:flex-start;
  min-width:40px;
}
.project-actions-cell .action-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  padding:0;
  border-radius:6px;
  background:var(--color-surface-soft);
  text-decoration:none;
}
.project-actions-cell .action-link:hover{
  background:var(--green-50);
  text-decoration:none;
}
.project-form-related-tools{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;
  padding:14px;
}
.project-form-contact-tools{
  grid-column:1 / -1;
  padding:0;
}
.project-form-related-tools > div{
  border:1px solid var(--card-border);
  border-radius:8px;
  background:var(--white);
  padding:12px;
}
.project-form-related-tools strong{
  display:block;
  margin-bottom:6px;
  color:var(--text-primary);
}
.project-form-related-tools p{
  margin:0 0 10px;
  min-height:38px;
  color:var(--text-secondary);
  font-size:12px;
  line-height:1.5;
}
.project-followup-tools{
  display:grid;
  grid-template-columns:minmax(280px,1fr) minmax(0,1.25fr) minmax(220px,.7fr);
  gap:12px;
  padding:12px;
  align-items:start;
}
.project-followup-summary,
.project-followup-editor,
.project-followup-hint{
  border:1px solid var(--card-border);
  border-radius:10px;
  background:var(--white);
  padding:12px;
}
.project-followup-editor{
  grid-column:1 / span 2;
}
.project-followup-summary strong,
.project-followup-editor strong,
.project-followup-hint strong{
  display:block;
  margin-bottom:6px;
  color:var(--text-primary);
}
.project-followup-summary p,
.project-followup-editor p,
.project-followup-hint p{
  margin:0 0 10px;
  color:var(--text-secondary);
  font-size:12px;
  line-height:1.5;
}
.project-followup-preview{
  margin-top:10px;
  max-height:320px;
  overflow:auto;
  padding-right:4px;
}
.project-followup-submit-row{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-start;
  margin-top:10px;
  flex-wrap:wrap;
}
.project-followup-hint{
  background:linear-gradient(180deg,var(--white),var(--green-50));
}
.project-followup-editor .inline-form-grid{
  gap:10px;
}
.project-followup-editor .inline-form-grid .field-lite,
.project-followup-editor .inline-form-grid input,
.project-followup-editor .inline-form-grid select,
.project-followup-editor .inline-form-grid textarea{
  min-width:0;
}
/* 上次跟进记录提示 */
.followup-last-hint{
  border:1px dashed var(--border-color);
  border-radius:8px;
  padding:10px 12px;
  margin-bottom:12px;
  background:linear-gradient(135deg,var(--color-surface-soft) 0%,var(--raw-eff6ff) 100%);
  font-size:12px;
  line-height:1.6;
}
.followup-hint-header{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
  flex-wrap:wrap;
}
.hint-label{
  font-weight:700;
  color:var(--primary,var(--color-info));
  background:var(--primary-bg,var(--color-info-soft));
  padding:1px 8px;
  border-radius:4px;
}
.hint-date{color:var(--text-secondary);}
.hint-method{
  color:var(--white);background:var(--primary,var(--color-primary-hover));
  padding:1px 6px;border-radius:3px;font-size:11px;
}
.hint-content{color:var(--text-secondary);margin-top:2px;}
.hint-content b{color:var(--text-primary);font-weight:600;}
@media (max-width: 900px){
  .project-form-related-tools{grid-template-columns:1fr}
  .project-form-related-tools p{min-height:0}
  .project-followup-tools{grid-template-columns:1fr}
  .project-followup-editor{grid-column:auto}
}

@media (max-width: 900px){
  .project-unified-header{
    flex-direction:column;
  }
  .project-unified-tags{
    justify-content:flex-start;
    max-width:none;
  }
  .project-section-card-grid,
  .project-overview-field-grid,
  .project-file-category-grid{
    grid-template-columns:1fr;
  }
  .project-section-card{
    grid-column:1/-1;
  }
}
.customer-row-click,.customer-risk-click{cursor:pointer;transition:background var(--fast);word-break:break-word;overflow:hidden}
.customer-row-click:hover,.customer-risk-click:hover{background:var(--color-surface-soft)}

/* Clickable rows */
.sales-row-click,.product-row-click,.closed-top-click{
  cursor:pointer;
  transition:background var(--fast);
}
.sales-row-click:hover,.product-row-click:hover,.closed-top-click:hover{
  background:var(--green-100);
}
.commission-row-click{cursor:pointer}
.commission-row-click .project-link{color:var(--primary);text-decoration:none;font-size:12px}
.commission-row-click .project-link:hover{text-decoration:underline}
#commissionDetailCard{scroll-margin-top:16px}

/* ═══════════════════════════════════════════
   10. FORMS & INPUTS
   ═══════════════════════════════════════════ */
input,select,textarea{
  width:100%;
  border:1px solid var(--card-border);
  border-radius:var(--radius-input);
  background:var(--card-bg);
  padding:9px 12px;
  font-size:13px;
  color:var(--text-primary);
  outline:none;
  transition:border-color var(--fast),box-shadow var(--fast);
}
textarea{min-height:82px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--green-500);box-shadow:0 0 0 3px color-mix(in srgb, var(--green-500) 15%, transparent)}
select:disabled,input:disabled{
  background:var(--color-surface-soft);
  color:var(--text-secondary);
  cursor:not-allowed;
}

/* Field wrapper */
.field{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.field span{
  font-size:13px;font-weight:600;
  color:var(--text-primary);
}
.field span b{color:var(--danger)}
.field em{
  min-height:34px;
  font-style:normal;
  font-size:12px;line-height:1.45;
  color:var(--text-secondary);
}
.field input,.field select,.field textarea{min-height:42px}
.field textarea{min-height:92px}

/* Form grids */
.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.form-grid.compact{grid-template-columns:1fr 1.5fr auto auto}
.form-grid.enhanced{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.form-grid .span2{grid-column:span 2}
.form-grid .span3{grid-column:span 3}
.form-grid > *,
.inline-form-grid > *,
.vendor-form-grid > *,
.vendor-type-options > *,
.project-overview-tab-body > *,
.overview-grid > *,
.project-finance-overview-kpis > *,
.project-finance-draft-form > *,
.customer-overview-grid > *,
.customer-charts-grid > *,
.timeline-summary.compact > *,
.two > *,
.three > *{
  min-width:0;
  box-sizing:border-box;
}
.inline-form{display:flex;gap:8px;margin-top:14px}

/* Vendor form */
.vendor-form-panel{
  max-width:860px!important;
}
.vendor-form-panel .form-section{
  margin:18px 0 12px;
  padding:12px 14px;
}
.vendor-form-panel .form-section:first-of-type{
  margin-top:4px;
}
.vendor-form-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px 16px;
  margin-bottom:18px;
  align-items:start;
}
.vendor-form-panel .field{
  gap:7px;
}
.vendor-form-panel .field span{
  min-height:18px;
  line-height:18px;
  font-size:13px;
}
.vendor-form-panel .field input,
.vendor-form-panel .field select,
.vendor-form-panel .field textarea{
  width:100%;
}
.vendor-form-panel .field textarea{
  min-height:98px;
}
.vendor-type-options{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  padding-top:2px;
}
.vendor-type-card{
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--white);
  color:var(--text-primary);
  font-size:12px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.vendor-type-card input{
  width:14px;
  height:14px;
  min-height:14px;
  flex:0 0 14px;
  margin:0;
  accent-color:var(--primary);
  cursor:pointer;
}
.vendor-type-card span{
  min-height:auto!important;
  line-height:1!important;
  font-size:12px!important;
}
.vendor-type-card:has(input:checked){
  border-color:var(--primary);
  background:var(--green-100);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--green-500) 14%, transparent);
}
.vendor-type-card:has(input:checked) span{
  color:var(--primary);
}
.vendor-type-card:hover{
  border-color:var(--primary-light);
}
.vendor-contacts-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.vendor-contacts-head h4{
  margin:0 0 4px;
}
.vendor-contacts-head p{
  margin:0;
  font-size:12px;
  color:var(--text-secondary);
}
.vendor-contact-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:18px;
}
.vendor-contact-row{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr)) 40px;
  gap:10px;
  align-items:end;
  padding:12px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--white);
}
.vendor-contact-row.is-primary{
  border-color:color-mix(in srgb, var(--green-500) 42%, transparent);
  background:var(--green-50);
}
.vendor-contact-row .field{
  gap:6px;
}
.vendor-contact-row .span2{
  grid-column:span 2;
}
.vendor-contact-row .field span{
  min-height:auto;
  font-size:12px;
  color:var(--text-secondary);
}
.vendor-contact-row input{
  height:38px;
}
.vendor-contact-remove{
  height:38px;
  min-width:38px;
  padding:0;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--white);
  color:var(--danger);
  font-size:18px;
  cursor:pointer;
}
.vendor-contact-primary{
  display:inline-flex;
  align-items:center;
  width:max-content;
  min-height:20px;
  padding:2px 7px;
  border-radius:999px;
  background:color-mix(in srgb, var(--green-500) 14%, transparent);
  color:var(--primary);
  font-size:12px;
  font-weight:800;
}

.field-lite{display:flex;flex-direction:column;gap:6px;margin:0;color:var(--text-secondary);font-size:12px;font-weight:700;min-width:0}
.field-lite input,.field-lite select{width:100%;min-width:0;box-sizing:border-box;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;background:var(--input-bg);color:var(--text-primary);font-size:14px}
.field-lite input:focus,.field-lite select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb, var(--raw-2e74b5) 12%, transparent)}

.inline-form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.inline-form-grid .span3{grid-column:span 3}
.profile-form{display:grid;grid-template-columns:1fr;gap:14px}
.profile-form .field textarea{min-height:110px}
.target-form{grid-template-columns:repeat(3,minmax(0,1fr))}
.target-form #addSalesTargetBtn{align-self:stretch}
.wecom-template-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.wecom-template-actions .subtle{
  flex:1;
  min-width:260px;
}
.target-table-wrap{max-height:560px}
.target-table{
  min-width:1040px;
  table-layout:fixed;
}
.target-table th,
.target-table td{
  vertical-align:middle;
}
.target-table th:nth-child(1),.target-table td:nth-child(1){width:48px}
.target-table th:nth-child(2),.target-table td:nth-child(2){width:72px}
.target-table th:nth-child(3),.target-table td:nth-child(3){width:170px}
.target-table th:nth-child(4),.target-table td:nth-child(4){width:120px}
.target-table th:nth-child(5),.target-table td:nth-child(5){width:170px}
.target-table th:nth-child(6),.target-table td:nth-child(6){width:110px}
.target-table th:nth-child(7),.target-table td:nth-child(7){width:230px}
.target-actions-cell{padding-top:8px!important;padding-bottom:8px!important}
.target-actions{
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  gap:4px;
  flex-wrap:wrap;
}
.target-action-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  min-height:24px;
  padding:0;
  border-radius:999px;
  background:var(--green-50);
  color:var(--primary);
  line-height:1;
  white-space:nowrap;
  text-decoration:none!important;
}
.target-action-btn.icon-btn{
  padding:0;
  border-radius:6px;
  background:var(--color-surface-soft);
  color:var(--primary);
}
.target-action-btn:hover{
  background:var(--green-50);
  text-decoration:none!important;
}
.target-action-btn:active{transform:scale(0.95);}
.target-action-btn.danger{
  background:color-mix(in srgb,var(--color-warning-soft) 56%,var(--white) 44%);
  color:var(--color-warning-text);
}
.target-action-btn.danger:hover{background:var(--color-warning-soft)}
.target-period-cell,
.target-table .num{
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.target-key-cell{
  line-height:1.5;
  word-break:break-word;
}

.user-table{table-layout:fixed;width:100%;min-width:1080px}
.user-table th,.user-table td{vertical-align:top;padding:10px 8px;text-align:left}
.user-table th:nth-child(1),.user-table td:nth-child(1){width:44px}
.user-table th:nth-child(2),.user-table td:nth-child(2){width:60px}
.user-table th:nth-child(3),.user-table td:nth-child(3){width:220px}
.user-table th:nth-child(4),.user-table td:nth-child(4){width:180px}
.user-table th:nth-child(5),.user-table td:nth-child(5){width:160px}
.user-table th:nth-child(6),.user-table td:nth-child(6){width:120px}
.user-table th:nth-child(7),.user-table td:nth-child(7){width:90px}
.user-table th:nth-child(8),.user-table td:nth-child(8){width:120px}

.commission-table{
  table-layout:fixed;
  width:100%;
  min-width:1560px;
}
.commission-table th,.commission-table td{
  vertical-align:top;
  padding:10px 8px;
  text-align:left;
}
.commission-table th:nth-child(1),.commission-table td:nth-child(1){width:44px}
.commission-table th:nth-child(2),.commission-table td:nth-child(2){width:60px}
.commission-table th:nth-child(3),.commission-table td:nth-child(3){width:210px}
.commission-table th:nth-child(4),.commission-table td:nth-child(4){width:170px}
.commission-table th:nth-child(5),.commission-table td:nth-child(5){width:110px}
.commission-table th:nth-child(6),.commission-table td:nth-child(6){width:148px}
.commission-table th:nth-child(7),.commission-table td:nth-child(7){width:110px}
.commission-table th:nth-child(8),.commission-table td:nth-child(8){width:118px}
.commission-table th:nth-child(9),.commission-table td:nth-child(9){width:118px}
.commission-table th:nth-child(10),.commission-table td:nth-child(10){width:96px}
.commission-table th:nth-child(11),.commission-table td:nth-child(11){width:90px}
.commission-table th:nth-child(12),.commission-table td:nth-child(12){width:132px}
.commission-table th:nth-child(13),.commission-table td:nth-child(13){width:112px}
.commission-table th:nth-child(14),.commission-table td:nth-child(14){width:120px}
.commission-table .subtle{
  display:block;
  margin-top:3px;
  color:var(--text-secondary);
  word-break:break-word;
}

/* Form actions */
.form-actions{display:flex;justify-content:flex-end;gap:12px;padding-top:4px}
.form-actions .btn{min-width:80px}
.form-actions .btn.danger{margin-left:8px}
#purchaseRequestDrawer .form-actions .btn{
  min-height:38px;
  padding:8px 18px;
  font-weight:700;
}
#purchaseRequestDrawer .form-actions #approvePurchaseRequestBtn,
#purchaseRequestDrawer .form-actions #rejectPurchaseRequestBtn,
#purchaseRequestDrawer .form-actions #returnPurchaseRequestBtn{
  min-width:112px;
}
#purchaseRequestDrawer .form-actions #rejectPurchaseRequestBtn{
  background:var(--zway-danger,var(--color-danger-text))!important;
  color:var(--zway-text-on-primary,var(--white))!important;
  border:1px solid var(--zway-danger,var(--color-danger-text))!important;
  box-shadow:var(--zway-shadow-sm,0 3px 10px color-mix(in srgb, var(--raw-b91c1c) 32%, transparent))!important;
}
#purchaseRequestDrawer .form-actions #rejectPurchaseRequestBtn:hover{
  background:color-mix(in srgb,var(--zway-danger) 86%,var(--raw-000) 14%)!important;
  color:var(--zway-text-on-primary,var(--white))!important;
  border-color:var(--zway-danger)!important;
}

/* Form sections (accordion) */
.form-section{
  margin-top:6px;
  padding:12px 14px;
  border-radius:var(--radius-card);
  background:var(--color-surface-soft);
  border:1px solid var(--card-border);
}
.form-section h4{font-size:15px;color:var(--text-primary);margin:0 0 4px}
.form-section p{font-size:12px;color:var(--text-secondary);margin:0;line-height:1.6}

/* Project form tabs */
.project-form-tabs-layout{
  display:flex!important;
  flex-direction:column;
  gap:14px;
  min-height:0;
}
.project-form-tabs{
  position:sticky;
  top:0;
  z-index:4;
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:10px 0 12px;
  background:var(--body-bg);
  border-bottom:1px solid var(--card-border);
  scrollbar-width:thin;
}
.project-form-tab{
  flex:0 0 auto;
  min-width:112px;
  height:42px;
  border:1px solid var(--card-border);
  border-radius:12px;
  background:var(--card-bg);
  color:var(--text-secondary);
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  transition:background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease;
}
.project-form-tab span{
  width:22px;
  height:22px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--green-100);
  color:var(--primary);
  font-size:12px;
}
.project-form-tab:hover{
  border-color:color-mix(in srgb, var(--raw-108057) 38%, transparent);
  color:var(--text-primary);
}
.project-form-tab.active{
  background:var(--primary);
  color:var(--white);
  border-color:var(--primary);
  box-shadow:0 10px 22px color-mix(in srgb, var(--raw-108057) 18%, transparent);
}
.project-form-tab.active span{
  background:color-mix(in srgb, var(--raw-000000) 15%, transparent);
  color:var(--white);
}
.project-form-tab.active .tab-title{
  background:none;
  color:var(--white);
}
/* P0优化3：步骤完成状态可视化 */
.project-form-tab.completed{
  border-color:var(--primary);
  color:var(--primary);
  background:var(--green-50);
}
.project-form-tab .tab-number{
  display:inline-flex;
}
.project-form-tab .tab-check{
  display:none;
  width:22px;
  height:22px;
  border-radius:999px;
  align-items:center;
  justify-content:center;
  background:var(--primary);
  color:var(--white);
  font-size:12px;
  font-weight:800;
}
.project-form-tab.completed .tab-number{
  display:none;
}
.project-form-tab.completed .tab-check{
  display:inline-flex;
}
.project-form-tab .tab-title{
  width:auto;
  height:auto;
  background:none;
  border-radius:0;
  font-size:13px;
  font-weight:800;
  color:inherit;
}
/* P1优化1：项目查重提醒样式 */
.customer-duplicate-tip{
  margin-top:8px;
  padding:10px 12px;
  border-radius:8px;
  font-size:12px;
  line-height:1.5;
  display:flex;
  align-items:flex-start;
  gap:8px;
}
.customer-duplicate-tip.no-duplicate{
  background:var(--green-50);
  color:var(--green-700);
  border:1px solid var(--green-200);
}
.customer-duplicate-tip.has-duplicate{
  background:color-mix(in srgb,var(--color-warning-soft) 48%,var(--white) 52%);
  color:var(--color-warning-text);
  border:1px solid var(--raw-fcd34d);
}
.customer-duplicate-tip .dup-icon{
  flex-shrink:0;
  width:18px;
  height:18px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:800;
  background:var(--green-100);
  color:var(--green-700);
}
.customer-duplicate-tip .dup-icon.warning{
  background:var(--raw-fef3c7);
  color:var(--color-warning);
}
.customer-duplicate-tip .dup-text{
  flex:1;
}
.customer-duplicate-tip .dup-text b{
  font-weight:800;
}
.customer-duplicate-tip .dup-project-list{
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.customer-duplicate-tip .dup-project-item{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:3px;
  width:100%;
  padding:6px 8px;
  background:color-mix(in srgb, var(--white) 60%, transparent);
  border:1px solid transparent;
  border-radius:4px;
  font-size:11px;
  color:inherit;
  cursor:pointer;
  text-align:left;
  font-family:inherit;
}
.customer-duplicate-tip .dup-project-item:hover{
  background:var(--white);
  border-color:var(--raw-fbbf24);
}
.customer-duplicate-tip .dup-project-main{
  display:flex;
  align-items:center;
  gap:8px;
}
.customer-duplicate-tip .dup-project-name{
  flex:1;
  font-weight:600;
}
.customer-duplicate-tip .dup-project-stage{
  color:var(--color-warning-text);
  opacity:.8;
}
.customer-duplicate-tip .dup-project-amount{
  font-weight:700;
}
.customer-duplicate-tip .dup-project-meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  color:var(--raw-78350f);
  opacity:.82;
}
.customer-duplicate-tip .dup-more{
  margin-top:6px;
  font-size:11px;
  opacity:.7;
  text-align:right;
}
/* P1优化2：产品价格参考提示样式 */
.product-price-hint{
  margin-top:8px;
  padding:8px 12px;
  border-radius:8px;
  font-size:12px;
  line-height:1.5;
  display:flex;
  align-items:flex-start;
  gap:8px;
  background:color-mix(in srgb,var(--color-info-soft) 55%,var(--white) 45%);
  color:var(--color-info-text);
  border:1px solid var(--raw-bfdbfe);
}
.product-price-hint .hint-icon{
  flex-shrink:0;
  font-size:14px;
}
.product-price-hint .hint-text{
  flex:1;
}
.product-price-hint .hint-text b{
  font-weight:800;
}
.product-price-hint .hint-amount,
.product-price-hint .hint-profit,
.product-price-hint .hint-win{
  display:inline-block;
  margin-right:12px;
  margin-top:4px;
  padding:2px 8px;
  background:color-mix(in srgb, var(--white) 70%, transparent);
  border-radius:4px;
  font-size:11px;
  font-weight:600;
}
/* P2优化1：风险自动评估样式 */
.risk-assessment-hint{
  margin-top:8px;
  padding:10px 12px;
  border-radius:8px;
  font-size:12px;
  line-height:1.5;
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.risk-assessment-hint.risk-low{
  background:color-mix(in srgb,var(--color-success-soft) 50%,var(--white) 50%);
  color:var(--color-success-text);
  border:1px solid var(--raw-86efac);
}
.risk-assessment-hint.risk-medium{
  background:color-mix(in srgb,var(--color-warning-soft) 48%,var(--white) 52%);
  color:var(--color-warning-text);
  border:1px solid var(--raw-fcd34d);
}
.risk-assessment-hint.risk-high{
  background:color-mix(in srgb,var(--color-danger-soft) 52%,var(--white) 48%);
  color:var(--color-danger-text);
  border:1px solid color-mix(in srgb,var(--color-danger) 42%,var(--white) 58%);
}
.risk-assessment-hint .risk-icon{
  flex-shrink:0;
  font-size:16px;
}
.risk-assessment-hint .risk-content{
  flex:1;
}
.risk-assessment-hint .risk-title{
  font-weight:700;
  margin-bottom:4px;
}
.risk-assessment-hint .risk-score{
  font-weight:500;
  opacity:.8;
  font-size:11px;
}
.risk-assessment-hint .risk-factors{
  font-size:11px;
  opacity:.9;
}
.project-form-tab-panels{min-height:360px}
.project-form-panel{
  display:none;
  border:1px solid var(--card-border);
  border-radius:var(--radius-card);
  background:var(--card-bg);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
}
.project-form-panel.active{display:block}
.project-form-panel-head{
  padding:14px 16px;
  background:linear-gradient(135deg,var(--gray-50),var(--green-100));
  border-bottom:1px solid var(--card-border);
}
.project-form-panel-head h4{
  margin:0 0 4px;
  color:var(--text-primary);
  font-size:16px;
  font-weight:800;
}
.project-form-panel-head p{
  margin:0;
  color:var(--text-secondary);
  font-size:12px;
  line-height:1.5;
}
.project-form-section-body{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;padding:16px;
}
.project-form-section-body .span2{grid-column:span 2}
.project-form-section-body .span3{grid-column:span 3}
.project-form-step-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:0 0 2px;
}
.project-form-step-nav span{
  min-width:64px;
  text-align:center;
  color:var(--text-secondary);
  font-size:13px;
  font-weight:800;
}
.project-form-step-nav .btn[disabled]{
  opacity:.45;
  cursor:not-allowed;
  box-shadow:none;
}
.project-form-tabs-layout .form-actions{
  position:sticky;bottom:-22px;
  background:linear-gradient(180deg,color-mix(in srgb, var(--white) 88%, transparent),var(--white));
  border-top:1px solid var(--card-border);
  margin:14px -22px -22px;
  padding:14px 22px;
  z-index:2;
}

/* Admin fields */
.admin-contract-field{position:relative}
.admin-contract-field.admin-readonly span::after{
  content:"仅管理员";
  margin-left:8px;
  padding:2px 7px;
  border-radius:999px;
  background:color-mix(in srgb,var(--color-info-soft) 55%,var(--white) 45%);
  color:var(--color-info-text);
  font-size:11px;font-weight:700;
}

/* Password notice */
.password-notice{
  margin:0;
  background:color-mix(in srgb,var(--color-warning-soft) 56%,var(--white) 44%);
  border-color:color-mix(in srgb,var(--color-warning) 26%,var(--white) 74%);
  color:var(--color-warning-text);
}

/* ═══════════════════════════════════════════
   11. FILTERS
   ═══════════════════════════════════════════ */
.filters{
  display:grid;
  grid-template-columns:minmax(240px,1.7fr) repeat(7,minmax(118px,1fr)) minmax(88px,auto);
  gap:8px;
  margin-bottom:10px;
  align-items:center;
}
.filters > *,
.customer-filters > *,
.po-filter-main > *,
.po-filter-project > *,
.file-filters > *{
  min-width:0;
  box-sizing:border-box;
}
.customer-filters{
  grid-template-columns:minmax(260px,1.7fr) repeat(4,minmax(120px,1fr)) auto;
  gap:8px;margin-bottom:10px;
}
.task-filters{grid-template-columns:repeat(3,1fr) auto}
.file-filters{grid-template-columns:1.4fr repeat(2,minmax(120px,1fr)) repeat(2,120px) auto}
.po-filter-panel{
  display:grid;
  gap:8px;
  margin-bottom:10px;
}
.po-filter-row{
  display:grid;
  gap:8px;
  align-items:center;
}
.po-filter-main{
  grid-template-columns:minmax(260px,2fr) repeat(4,minmax(130px,1fr));
}
.po-filter-project{
  grid-template-columns:minmax(0,1fr) minmax(96px,auto);
  align-items:start;
}
.po-filter-project .project-picker{
  margin:0;
  grid-template-columns:minmax(220px,1.5fr) minmax(120px,.75fr) minmax(130px,.85fr) minmax(120px,.75fr);
}
.po-filter-project .project-picker-hint{
  min-height:20px;
  line-height:1.4;
}
.po-filter-project > select{
  min-height:38px;
}
.po-filter-project > .btn{
  height:38px;
  align-self:start;
}

/* ═══════════════════════════════════════════
   12. CHARTS & BARS
   ═══════════════════════════════════════════ */

/* ── Bar charts ── */
.bar-row{
  display:grid;
  grid-template-columns:125px 1fr 90px;
  gap:12px;align-items:center;
  margin:10px 0;
}
.bar-label{
  font-size:13px;color:var(--text-primary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bar-bg{
  height:10px;background:var(--color-border);
  border-radius:999px;overflow:hidden;
}
.bar{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--primary),var(--color-primary-hover));
  transition:width .35s ease;
}
.bar.green{background:linear-gradient(90deg,var(--primary),var(--success))}
.bar.orange{background:linear-gradient(90deg,var(--primary),var(--primary-hover))}
.bar.purple{background:linear-gradient(90deg,var(--raw-7c3aed),var(--color-primary-hover))}
.bar-value{text-align:left;color:var(--text-primary);font-size:13px;font-weight:600}
.bar-sub{margin-top:2px;color:var(--text-secondary);font-size:11px}

.bar-row.clickable{
  cursor:pointer;
  padding:4px 6px;margin:0 -6px;
  border-radius:var(--radius-card);
  transition:background var(--fast);
}
.bar-row.clickable:hover{background:var(--green-100)}

/* Dashboard stat row */
.dashboard-stat-row{
  display:grid;
  grid-template-columns:minmax(110px,150px) minmax(90px,1fr) minmax(74px,96px);
  gap:10px;align-items:center;
  margin:8px 0;
}

/* ── Funnel chart ── */
.funnel-chart{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:10px 0;
}
.funnel-layer{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  transition:transform .18s ease,filter .18s ease;
  cursor:pointer;
  margin-top:-2px;
}
.funnel-layer:first-child{margin-top:0}
.funnel-layer:hover{transform:scale(1.03);z-index:1;filter:brightness(1.08)}
.funnel-shape{
  width:var(--w);min-width:120px;height:48px;
  background:var(--c,var(--green-500));
  color:var(--white);
  clip-path:polygon(6% 0,94% 0,88% 100%,12% 100%);
  display:flex;align-items:center;justify-content:center;
  gap:12px;
  font-size:13px;font-weight:600;
  box-shadow:0 2px 6px color-mix(in srgb, var(--raw-000000) 12%, transparent);
  position:relative;
}
.funnel-shape b{font-size:15px;font-weight:700}
.funnel-meta{
  font-size:11px;color:var(--text-secondary);
  margin-top:3px;text-align:center;
}

/* ── Bullet chart ── */
.bullet-chart{display:flex;flex-direction:column;gap:13px}
.bullet-row{
  padding:10px;
  border-radius:var(--radius-card);
  cursor:pointer;
  transition:background var(--fast),transform var(--fast);
}
.bullet-row:hover{background:var(--color-surface-soft);transform:translateY(-1px)}
.bullet-head,.bullet-foot{display:flex;justify-content:space-between;align-items:center}
.bullet-status{
  font-size:11px;font-weight:600;
  padding:2px 8px;border-radius:var(--radius-badge);
}
.bullet-status.good{background:var(--raw-ecfdf5);color:var(--color-success-text)}
.bullet-status.warn{background:var(--raw-fff7ed);color:var(--color-primary)}
.bullet-status.bad{background:color-mix(in srgb,var(--color-danger-soft) 52%,var(--white) 48%);color:var(--color-danger-text)}
.bullet-track{
  height:13px;position:relative;
  display:flex;
  border-radius:999px;overflow:hidden;
  background:var(--color-border);
  margin:8px 0 4px;
}
.bullet-track .range{height:100%;opacity:.25}
.bullet-track .range.bad{width:35%;background:var(--color-danger)}
.bullet-track .range.warn{width:30%;background:var(--color-warning)}
.bullet-track .range.good{width:35%;background:var(--color-success)}
.bullet-track span{
  position:absolute;left:0;top:0;
  height:100%;
  background:linear-gradient(90deg,var(--primary),var(--color-primary-hover));
  border-radius:999px;
  transition:width .35s ease;
}
.bullet-track b{
  position:absolute;top:-3px;
  width:3px;height:19px;
  background:var(--text-primary);
  border-radius:2px;
}

/* ── Risk timeline ── */
.risk-timeline{
  position:relative;
  padding-left:12px;
}
.risk-timeline::before{
  content:"";
  position:absolute;
  left:0;top:0;
  width:2px;height:100%;
  background:var(--card-border);
}
.risk-timeline-item{
  display:grid;
  grid-template-columns:24px 1fr;
  gap:10px;
  margin-bottom:12px;
}
.risk-timeline-item.danger .risk-node{
  background:var(--danger);
  box-shadow:0 0 12px color-mix(in srgb, var(--raw-ea5455) 35%, transparent);
}
.risk-timeline-item.warning .risk-node{
  background:var(--warning);
  box-shadow:0 0 12px color-mix(in srgb, var(--raw-ff9f43) 35%, transparent);
}
.risk-node{
  width:14px;height:14px;
  border-radius:50%;
  background:var(--text-muted);
  border:2px solid var(--card-bg);
  box-shadow:0 0 0 2px var(--card-border);
  margin-top:4px;
}
.risk-content{
  border:1px solid var(--card-border);
  border-radius:var(--radius-card);
  background:var(--card-bg);
  padding:12px 14px;
  cursor:pointer;
  transition:transform var(--fast),box-shadow var(--fast);
}
.risk-content:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow-float);
}
.risk-head{font-weight:600;font-size:13px;color:var(--text-primary);margin-bottom:4px}
.risk-text{font-size:12px;color:var(--text-secondary);line-height:1.5}
.risk-actions{display:flex;gap:8px;margin-top:8px}
.risk-click{
  cursor:pointer;
  padding:4px 6px;margin:0 -6px;
  border-radius:var(--radius-card);
  transition:background var(--fast);
}
.risk-click:hover{background:var(--color-surface-soft)}

/* ═══════════════════════════════════════════
   13. DASHBOARD LAYOUT
   ═══════════════════════════════════════════ */

.dashboard-hero-panel{
  display:flex;justify-content:space-between;align-items:flex-end;
  padding:22px 24px;border-radius:var(--radius-card);
  background:linear-gradient(135deg,var(--green-100),var(--white),var(--green-50));
  border:1px solid var(--card-border);margin-bottom:18px;gap:var(--sp-lg);
}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;color:var(--green-500)}
.dashboard-hero-panel h2{font-size:24px;font-weight:700;margin:4px 0}
.dashboard-hero-panel p{max-width:780px;color:var(--text-secondary);font-size:13px;line-height:1.6;margin:0}
.dashboard-selector{min-width:220px;max-width:280px;width:100%;flex-shrink:0}
.dashboard-selector .field-lite{margin:0}

.dashboard-toolbar{
  display:flex;gap:8px;align-items:center;
  flex-wrap:wrap;min-width:260px;justify-content:flex-end;
}
.dashboard-time-pill{border:1px solid var(--card-border);background:var(--card-bg);border-radius:999px;padding:6px 14px;font-size:12px;font-weight:600;cursor:pointer;color:var(--text-secondary);transition:all var(--fast);white-space:nowrap}
.dashboard-time-pill.active{background:var(--green-700);color:var(--white);border-color:var(--green-700)}
.dashboard-time-pill:hover:not(.active){border-color:var(--green-500);color:var(--green-700)}
.dashboard-refresh-note{
  font-size:12px;color:var(--text-secondary);
  width:100%;text-align:right;
}

/* Dashboard KPI grids */
.dashboard-kpi-primary{
  display:grid;
  grid-template-columns:1.25fr 1fr 1fr;
  gap:16px;
}
.dashboard-kpi-secondary{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:14px;margin-top:16px;
}
.dashboard-core-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

/* Chart grids */
.dashboard-chart-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.dashboard-chart-grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.dashboard-trend-grid{display:grid;grid-template-columns:1fr;gap:16px}
.chart-card{min-height:280px;padding:20px}
.stat-chart-card{min-height:240px}
.dashboard-trend-card{min-height:280px}
.risk-card{min-height:auto;max-height:400px;overflow-y:auto}
.dashboard-procurement-panel{
  margin-top:24px;
  padding:20px;
  border:1px solid color-mix(in srgb, var(--raw-0f766e) 12%, transparent);
  background:linear-gradient(180deg,color-mix(in srgb, var(--raw-f0fdfa) 92%, transparent),color-mix(in srgb, var(--white) 98%, transparent));
  box-shadow:0 12px 28px color-mix(in srgb, var(--gray-900) 6%, transparent);
}
.dashboard-procurement-head{
  align-items:flex-start;
  gap:16px;
}
.dashboard-procurement-head h3{
  margin-bottom:4px;
}
.dashboard-procurement-head span{
  color:var(--text-secondary);
  font-size:12px;
}
.dashboard-procurement-actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-shrink:0;
}
.dashboard-procurement-kpis{
  margin-top:16px;
}
.procurement-home-grid{
  margin-top:16px;
}
.procurement-home-card{
  min-height:260px;
}
.procurement-chart{
  position:relative;
  height:240px;
}
.procurement-tag-cloud{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.procurement-tag-cloud .tag-button{
  white-space:nowrap;
}
.procurement-table-wrap{
  max-height:240px;
}
.procurement-focus-wrap{
  max-height:320px;
}
.procurement-hero{
  background:linear-gradient(135deg,var(--color-primary) 0%,var(--raw-2d8a6a) 50%,var(--raw-3da882) 100%);
  border-radius:12px;
  padding:28px 32px;
  margin-bottom:20px;
  position:relative;
  overflow:hidden;
  box-shadow:0 8px 24px color-mix(in srgb, var(--green-700) 18%, transparent);
}
.procurement-hero::after{
  content:"";
  position:absolute;
  top:-40%;
  right:-10%;
  width:300px;
  height:300px;
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb, var(--white) 12%, transparent) 0%,transparent 70%);
  pointer-events:none;
}
.procurement-hero-content h3{
  margin:0 0 8px;
  font-size:22px;
  font-weight:700;
  color:var(--white);
}
.procurement-hero-content p{
  margin:0 0 12px;
  font-size:14px;
  color:color-mix(in srgb, var(--white) 80%, transparent);
}
.procurement-hero-tags{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}
.procurement-hero-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:color-mix(in srgb, var(--white) 70%, transparent);
}
.procurement-hero-tag i{
  display:inline-block;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--raw-6ee7b7);
}
.procurement-dashboard-shell{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin-bottom:24px;
}
.procurement-kpi-strip{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.procurement-kpi-card{
  min-height:100px;
  padding:16px 18px;
  border:1px solid color-mix(in srgb, var(--gray-900) 6%, transparent);
  border-radius:12px;
  background:var(--white);
  box-shadow:0 4px 12px color-mix(in srgb, var(--gray-900) 5%, transparent);
  text-align:left;
  display:flex;
  align-items:flex-start;
  gap:14px;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position:relative;
  overflow:hidden;
}
.procurement-kpi-card::after{
  content:"";
  position:absolute;
  bottom:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,var(--color-success),var(--raw-34d399));
  border-radius:0 0 12px 12px;
  opacity:.6;
  transition:opacity .2s ease;
}
.procurement-kpi-card:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb, var(--raw-10b981) 20%, transparent);
  box-shadow:0 12px 28px color-mix(in srgb, var(--gray-900) 10%, transparent);
}
.procurement-kpi-card:hover::after{opacity:1}
.procurement-kpi-strip.secondary .procurement-kpi-card:nth-child(1)::after{background:linear-gradient(90deg,var(--color-warning),var(--raw-fbbf24))}
.procurement-kpi-strip.secondary .procurement-kpi-card:nth-child(2)::after{background:linear-gradient(90deg,var(--color-info),color-mix(in srgb,var(--color-info) 58%,var(--white) 42%))}
.procurement-kpi-strip.secondary .procurement-kpi-card:nth-child(3)::after{background:linear-gradient(90deg,var(--color-danger),color-mix(in srgb,var(--color-danger) 62%,var(--white) 38%))}
.procurement-kpi-strip.secondary .procurement-kpi-card:nth-child(4)::after{background:linear-gradient(90deg,var(--raw-14b8a6),var(--raw-5eead4))}
.procurement-kpi-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;height:40px;
  border-radius:10px;
  background:color-mix(in srgb, var(--raw-10b981) 10%, transparent);
  color:var(--color-success);
  flex-shrink:0;
}
.procurement-kpi-icon.blue{background:color-mix(in srgb, var(--raw-2563eb) 10%, transparent);color:var(--color-info)}
.procurement-kpi-icon.purple{background:color-mix(in srgb, var(--raw-7c3aed) 10%, transparent);color:var(--color-info-text)}
.procurement-kpi-icon.orange{background:color-mix(in srgb, var(--raw-f59e0b) 10%, transparent);color:var(--color-warning)}
.procurement-kpi-icon.red{background:color-mix(in srgb, var(--raw-ef4444) 10%, transparent);color:var(--color-danger)}
.procurement-kpi-icon.teal{background:color-mix(in srgb, var(--raw-14b8a6) 10%, transparent);color:var(--raw-14b8a6)}
.procurement-kpi-body{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.procurement-kpi-body span{
  color:var(--text-secondary);
  font-size:13px;
  font-weight:600;
}
.procurement-kpi-body strong{
  color:var(--text-primary);
  font-size:clamp(22px,1.8vw,30px);
  line-height:1.1;
  letter-spacing:0;
}
.procurement-kpi-body small{
  color:var(--text-tertiary);
  font-size:12px;
  display:block;
  width:100%;
}
.procurement-kpi-strip.secondary .procurement-kpi-card:first-child .procurement-kpi-body small{
  display:block;
  width:100%;
  height:6px;
  margin-top:4px;
  border-radius:999px;
  background:color-mix(in srgb, var(--gray-900) 6%, transparent);
  overflow:hidden;
}
.procurement-kpi-strip.secondary .procurement-kpi-card:first-child .procurement-kpi-body small i{
  display:block;
  width:0;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--color-success),var(--color-success));
}
.procurement-chart-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.procurement-chart-card{
  min-height:320px;
  padding:20px 22px;
  border:1px solid color-mix(in srgb, var(--gray-900) 6%, transparent);
  border-radius:12px;
  background:var(--white);
  box-shadow:0 4px 12px color-mix(in srgb, var(--gray-900) 5%, transparent);
  transition:box-shadow .2s ease;
}
.procurement-chart-card:hover{
  box-shadow:0 8px 20px color-mix(in srgb, var(--gray-900) 8%, transparent);
}
.procurement-chart-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
  padding-bottom:12px;
  border-bottom:1px solid var(--color-surface-soft);
}
.procurement-chart-head h4{
  margin:0;
  font-size:15px;
  color:var(--text-primary);
  font-weight:700;
}
.procurement-chart-head span{
  color:var(--text-tertiary);
  font-size:12px;
  text-align:right;
}
.procurement-chart-stage{
  position:relative;
  height:250px;
}
.procurement-chart-stage[data-empty]:not([data-empty=""])::after{
  content:attr(data-empty);
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-tertiary);
  font-size:14px;
  font-weight:800;
  border-radius:8px;
  background:linear-gradient(180deg,color-mix(in srgb, var(--gray-50) 86%, transparent),color-mix(in srgb, var(--gray-100) 72%, transparent));
  border:1px dashed color-mix(in srgb, var(--gray-400) 32%, transparent);
}
.procurement-chart-fallback{
  position:absolute;
  inset:0;
}
.procurement-donut-fallback{
  height:100%;
  display:grid;
  grid-template-columns:minmax(160px,220px) 1fr;
  align-items:center;
  gap:22px;
}
.procurement-donut-ring{
  width:min(210px,100%);
  aspect-ratio:1;
  border-radius:999px;
  display:grid;
  place-items:center;
  margin:auto;
}
.procurement-donut-ring > div{
  width:58%;
  aspect-ratio:1;
  border-radius:999px;
  background:var(--white);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--gray-900) 8%, transparent);
}
.procurement-donut-ring strong{
  color:var(--text-primary);
  font-size:28px;
  line-height:1;
}
.procurement-donut-ring span{
  margin-top:6px;
  color:var(--text-secondary);
  font-size:12px;
  font-weight:800;
}
.procurement-chart-legend{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.procurement-chart-legend-row{
  display:grid;
  grid-template-columns:10px minmax(0,1fr) auto auto;
  align-items:center;
  gap:8px;
  color:var(--text-secondary);
  font-size:13px;
}
.procurement-chart-legend-row i{
  width:10px;
  height:10px;
  border-radius:999px;
}
.procurement-chart-legend-row span{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.procurement-chart-legend-row strong{
  color:var(--text-primary);
}
.procurement-chart-legend-row em{
  font-style:normal;
  color:var(--text-tertiary);
}
.procurement-bar-fallback{
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:14px;
}
.procurement-bar-row{
  display:grid;
  grid-template-columns:minmax(150px,240px) minmax(160px,1fr) auto;
  align-items:center;
  gap:12px;
  color:var(--text-secondary);
  font-size:13px;
}
.procurement-bar-row span{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.procurement-bar-row div{
  height:14px;
  border-radius:999px;
  background:color-mix(in srgb, var(--gray-900) 8%, transparent);
  overflow:hidden;
}
.procurement-bar-row i{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--color-success),var(--color-info));
}
.procurement-bar-row strong{
  color:var(--text-primary);
  min-width:72px;
  text-align:left;
}
.procurement-trend-fallback{
  height:100%;
  display:grid;
  grid-template-columns:repeat(12,minmax(26px,1fr));
  align-items:end;
  gap:8px;
  padding-top:22px;
}
.procurement-trend-col{
  min-width:0;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
}
.procurement-trend-col i{
  width:100%;
  max-width:28px;
  border-radius:8px 8px 3px 3px;
  background:linear-gradient(180deg,var(--color-info),var(--color-success));
}
.procurement-trend-value{
  min-height:15px;
  color:var(--text-tertiary);
  font-size:10px;
  white-space:nowrap;
}
.procurement-trend-col strong{
  color:var(--color-warning);
  font-size:12px;
  line-height:1;
}
.procurement-trend-col span{
  color:var(--text-secondary);
  font-size:11px;
}
.procurement-rank-table{
  width:100%;
  margin-top:12px;
  border-collapse:collapse;
  font-size:13px;
}
.procurement-rank-table th,
.procurement-rank-table td{
  padding:9px 10px;
  border-bottom:1px solid color-mix(in srgb, var(--gray-900) 8%, transparent);
  text-align:left;
}
.procurement-rank-table th{
  color:var(--text-secondary);
  background:color-mix(in srgb, var(--gray-900) 3%, transparent);
  font-weight:800;
}
.procurement-rank-table .num{
  text-align:left;
}
.procurement-gauge-card{
  display:flex;
  flex-direction:column;
}
.procurement-gauge-panel{
  min-height:250px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  border-radius:10px;
  background:linear-gradient(180deg,color-mix(in srgb, var(--raw-10b981) 8%, transparent),color-mix(in srgb, var(--raw-3b82f6) 6%, transparent));
}
.procurement-gauge-value{
  color:var(--primary);
  font-size:clamp(36px,4vw,58px);
  font-weight:900;
  line-height:1;
  letter-spacing:0;
}
.procurement-gauge-track{
  width:min(340px,84%);
  height:16px;
  overflow:hidden;
  border-radius:999px;
  background:color-mix(in srgb, var(--gray-900) 10%, transparent);
  box-shadow:inset 0 1px 2px color-mix(in srgb, var(--gray-900) 8%, transparent);
}
.procurement-gauge-track i{
  display:block;
  width:0;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--color-success),var(--color-success),var(--color-info));
  transition:width .25s ease;
}
.procurement-gauge-meta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:var(--text-secondary);
  font-size:13px;
  font-weight:800;
}
.procurement-gauge-meta span{
  padding:6px 10px;
  border-radius:999px;
  background:var(--white);
  border:1px solid color-mix(in srgb, var(--gray-900) 8%, transparent);
}
@media(max-width:1280px){
  .procurement-kpi-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:980px){
  .procurement-kpi-strip,
  .procurement-chart-grid{grid-template-columns:1fr}
  .procurement-chart-stage{height:230px}
}

/* ═══════════════════════════════════════════
   14. DRAWERS & OVERLAYS
   ═══════════════════════════════════════════ */
.drawer{
  position:fixed;inset:0;
  background:color-mix(in srgb, var(--gray-900) 30%, transparent);
  display:none;
  align-items:stretch;
  justify-content:flex-end;
  z-index:200;
  padding-left:12px;
}
.drawer.open{display:flex}
#quickFileDrawer.open{
  z-index:260;
}
.drawer-panel{
  width:min(960px,calc(100vw - 24px));
  max-width:calc(100vw - 24px);
  background:var(--card-bg);
  padding:22px;
  overflow-y:auto;
  box-shadow:-20px 0 50px color-mix(in srgb, var(--gray-900) 18%, transparent);
}
.quote-editor-panel{
  width:min(1480px,calc(100vw - 32px));
  max-width:none;
  min-height:calc(100vh - 32px);
  margin:16px;
  border-radius:8px;
}
.quote-detail-card{
  border:1px solid var(--card-border);
  border-radius:10px;
  background:var(--white);
  overflow:visible;
}
.quote-detail-header{
  align-items:center;
  gap:10px;
}
.quote-detail-header .btn{
  margin-left:auto;
  min-height:38px;
  padding:0 14px;
  border-radius:8px;
  font-weight:700;
}
.qi-section-hint{
  color:var(--text-secondary);
  font-size:12px;
  white-space:normal;
}
.quote-item-list{
  display:grid;
  gap:16px;
}
.quote-item-card{
  border:1px solid var(--card-border);
  border-radius:8px;
  background:var(--white);
  overflow:hidden;
  transition:box-shadow .2s, border-color .2s;
}
.quote-item-card:hover{
  box-shadow:0 2px 12px color-mix(in srgb, var(--gray-900) 6%, transparent);
}
.quote-item-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 16px;
  border-bottom:1px solid var(--card-border);
  background:var(--color-surface-soft);
}
.quote-item-head-left,
.quote-item-head-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.quote-item-label{
  font-size:14px;
  font-weight:800;
  color:var(--text-primary);
}
.quote-item-number{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:6px;
  background:var(--green-100);
  color:var(--green-700);
  font-size:11px;
  font-weight:800;
}
.qi-collapse-btn,
.qi-delete-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border:1px solid transparent;
  border-radius:6px;
  background:transparent;
  color:var(--text-secondary);
  cursor:pointer;
}
.qi-collapse-btn:hover{background:var(--gray-200);color:var(--text-primary)}
.qi-delete-btn:hover{background:var(--color-danger-soft);color:var(--color-danger)}
.qi-collapse-btn svg{transition:transform .18s ease}
.quote-item-card.qi-collapsed .qi-collapse-btn svg{transform:rotate(-90deg)}
.quote-item-card.qi-collapsed .quote-item-body{display:none}
.quote-item-body{
  padding:16px 20px 18px;
}
.quote-item-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 480px;
  gap:16px;
  align-items:start;
}
.quote-item-main{
  display:grid;
  gap:16px;
}
.quote-item-top-grid{
  display:grid;
  grid-template-columns:minmax(240px,2fr) minmax(220px,1.5fr) minmax(150px,1fr);
  gap:12px;
}
.quote-item-desc-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.quote-item-side-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.quote-item-card .field{
  display:block;
  min-width:0;
}
.quote-item-card .field span{
  display:block;
  margin-bottom:6px;
  font-size:13px;
  font-weight:700;
  color:var(--text-primary);
}
.quote-item-card .field.required span::after{
  content:" *";
  color:var(--color-danger);
}
.quote-item-card input,
.quote-item-card textarea,
.quote-item-card select{
  width:100%;
  min-width:0;
  min-height:44px;
  padding:10px 12px;
  border:1px solid var(--card-border);
  border-radius:8px;
  background:var(--white);
  color:var(--text-primary);
  font-size:14px;
  transition:border-color .15s, box-shadow .15s;
}
.quote-item-card textarea{
  min-height:112px;
  resize:vertical;
}
.quote-item-card input:focus,
.quote-item-card textarea:focus,
.quote-item-card select:focus{
  outline:none;
  border-color:var(--green-500);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--raw-10b981) 10%, transparent);
}
.quote-item-card [data-quote-item-subtotal]{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:10px 12px;
  border:1px solid var(--card-border);
  border-radius:8px;
  background:var(--color-surface-soft);
  color:var(--text-secondary);
  font-size:14px;
  font-weight:800;
}
.quote-custom-fields{
  padding-top:14px;
  border-top:1px dashed var(--card-border);
}
.quote-custom-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
  color:var(--text-secondary);
  font-size:13px;
  font-weight:800;
}
.quote-custom-list{
  display:grid;
  gap:8px;
}
.quote-custom-field-row{
  display:grid;
  grid-template-columns:minmax(120px,.35fr) minmax(180px,1fr) auto;
  gap:8px;
  align-items:center;
}
.quote-total-row{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:18px;
  margin-top:18px;
  padding:16px 20px;
  border:1px solid var(--card-border);
  border-radius:8px;
  background:var(--color-surface-soft);
}
.quote-total-row span{
  color:var(--text-secondary);
  font-weight:800;
}
.quote-total-row strong{
  min-width:180px;
  text-align:right;
  font-size:20px;
  color:var(--text-primary);
}
.quote-final-price-row{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:18px;
  margin-top:12px;
  padding:16px 20px;
  border:1px solid color-mix(in srgb, var(--color-primary) 28%, transparent);
  border-radius:8px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 8%, var(--white)), var(--white));
}
.quote-final-price-row span{
  color:var(--color-primary);
  font-weight:900;
  font-size:14px;
}
.quote-final-price-row input{
  width:min(260px,100%);
  min-height:46px;
  border:1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
  border-radius:8px;
  padding:10px 12px;
  color:var(--raw-dc2626);
  font-size:14px;
  font-weight:900;
  text-align:right;
  background:var(--white);
}
.quote-final-price-row input::placeholder{
  color:var(--raw-dc2626);
  opacity:.6;
}
.quote-final-price-row input:focus{
  outline:none;
  border-color:var(--color-primary);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.q-span-1{grid-column:span 1}
.q-span-2{grid-column:span 2}
.q-span-3{grid-column:span 3}
.q-span-4{grid-column:span 4}
.q-span-5{grid-column:span 5}
.q-span-6{grid-column:span 6}
.q-span-7{grid-column:span 7}
.q-span-8{grid-column:span 8}
@media(max-width:1200px){
  .quote-item-layout{grid-template-columns:1fr}
  .quote-item-side-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media(max-width:760px){
  .quote-detail-header{align-items:flex-start}
  .quote-detail-header .btn{width:100%;margin-left:0}
  .quote-item-top-grid,
  .quote-item-desc-grid,
  .quote-item-side-grid{grid-template-columns:1fr}
  .quote-total-row,
  .quote-final-price-row{align-items:stretch;flex-direction:column;text-align:left}
  .quote-total-row strong,
  .quote-final-price-row input{width:100%;min-width:0;text-align:left}
  .quote-custom-field-row{grid-template-columns:1fr auto}
  .quote-custom-field-row input:nth-child(2){grid-column:1 / -1}
}
.quote-editor-panel{
  width:min(1000px,calc(100vw - 32px));
  max-width:1000px;
  min-height:calc(100vh - 32px);
  margin:16px;
  border-radius:10px;
  padding:0;
  display:flex;
  flex-direction:column;
}
.quote-editor-panel .drawer-head{
  padding:22px 28px;
  border-bottom:1px solid var(--card-border);
  margin-bottom:0;
}
.quote-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}
.quote-head-left{
  display:flex;
  align-items:center;
  gap:14px;
}
.quote-head-icon{
  width:42px;
  height:42px;
  border-radius:10px;
  background:linear-gradient(135deg,var(--green-600),var(--green-500));
  color:var(--white);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.quote-head-icon svg{
  width:22px;
  height:22px;
}
.quote-head h3{
  margin:0;
  font-size:20px;
  font-weight:800;
  color:var(--foreground);
  letter-spacing:.2px;
}
.quote-head-subtitle{
  margin:2px 0 0;
  font-size:13px;
  color:var(--text-secondary);
}

/* ② 分区容器 */
.quote-section{
  padding:18px 28px 4px;
}
.quote-section:last-of-type{
  padding-bottom:18px;
}
.quote-section-header{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.quote-section-badge{
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--green-600);
  color:var(--white);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:800;
  flex-shrink:0;
}
.quote-section-badge.accent{
  background:var(--green-600);
}
.quote-section-title{
  font-size:14px;
  font-weight:800;
  color:var(--foreground);
  letter-spacing:.2px;
}
.quote-section-hint{
  margin-left:auto;
  font-size:11px;
  font-weight:500;
  color:var(--text-secondary);
  padding:3px 10px;
  border-radius:999px;
  background:var(--color-surface-soft);
}
.quote-section-accent{
  background:linear-gradient(90deg,var(--color-surface-soft) 0%,var(--color-surface-soft) 100%);
  margin:0 28px;
  border-radius:10px;
  padding:18px 22px 8px;
  border:1px solid var(--color-border);
}
.quote-section-accent .quote-section-header{
  margin-bottom:12px;
}

/* ③ 表单项 */
.quote-field{
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
}
.quote-field-label{
  font-size:12px;
  font-weight:700;
  color:var(--text-secondary);
  letter-spacing:.2px;
}
.quote-field-label b{
  color:var(--danger);
  font-weight:800;
  margin-right:2px;
}
.quote-field input,
.quote-field select,
.quote-field textarea{
  min-height:38px;
  padding:9px 12px;
  border:1px solid var(--card-border);
  border-radius:8px;
  font-size:13px;
  background:var(--white);
  color:var(--foreground);
  transition:border-color .15s ease, box-shadow .15s ease;
  line-height:1.5;
}
.quote-field input:focus,
.quote-field select:focus,
.quote-field textarea:focus{
  outline:none;
  border-color:var(--green-500);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--raw-10b981) 12%, transparent);
}
.quote-field textarea{
  min-height:56px;
  resize:vertical;
}
.quote-field-hint{
  font-size:11px;
  color:var(--text-secondary);
  font-weight:500;
  margin-top:2px;
}
.quote-field-main{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.quote-field-main > .search-select{
  max-width:100%;
}
.quote-field-wide{
  grid-column:1 / -1;
}

/* ④ 网格系统 */
.quote-grid{
  display:grid;
  gap:14px;
}
.quote-grid-4{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.quote-grid-2{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

/* ⑤ 底部操作栏 */
.quote-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  padding:16px 28px;
  border-top:1px solid var(--card-border);
  background:var(--color-surface-soft);
  border-radius:0 0 10px 10px;
}
.quote-actions .btn{
  min-height:42px;
  padding:0 22px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:700;
  border-radius:8px;
}

/* 响应式 */
@media (max-width:1024px){
  .quote-grid-4{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:640px){
  .quote-editor-panel{
    margin:8px;
    border-radius:8px;
  }
  .quote-head{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
  .quote-section{
    padding:14px 16px 4px;
  }
  .quote-section-accent{
    margin:0 16px;
    padding:14px 16px 6px;
  }
  .quote-grid-4,
  .quote-grid-2{
    grid-template-columns:1fr;
  }
  .quote-item-grid{
    grid-template-columns:1fr;
  }
  .q-span-1,.q-span-2,.q-span-3,.q-span-4,.q-span-5,.q-span-6,.q-span-7,.q-span-8{
    grid-column:auto;
  }
  .qi-subtotal-bar{flex-wrap:wrap}
  .qi-subtotal-formula{width:100%;margin-left:0}
  .quote-actions{
    flex-direction:column-reverse;
    padding:14px 16px;
  }
  .quote-actions .btn{
    width:100%;
    justify-content:center;
  }
}
.drawer-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px;
  padding-bottom:12px;
  border-bottom:1px solid var(--card-border);
}
.drawer-head h3{margin:0}
.drawer-subtitle{
  margin:-4px 0 16px;
  padding:12px 14px;
  border-radius:var(--radius-card);
  background:var(--green-100);
  border:1px solid var(--primary-light);
  color:var(--color-success-text);
  font-size:13px;line-height:1.7;
}
.drawer-subtitle b{color:var(--danger)}

/* ── Modal overlay ── */
.modal-overlay{
  position:fixed;inset:0;
  background:color-mix(in srgb, var(--gray-900) 30%, transparent);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:300;
  padding:20px;
  opacity:0;
  transition:opacity .24s ease;
}
.modal-overlay.open{
  display:flex;
  opacity:1;
}
.modal{
  width:min(520px,calc(100vw - 40px));
  background:var(--card-bg);
  border-radius:var(--radius-card);
  box-shadow:0 20px 60px color-mix(in srgb, var(--gray-900) 25%, transparent);
  overflow:hidden;
  transform:scale(.95) translateY(10px);
  opacity:0;
  transition:transform .24s ease,opacity .24s ease;
}
.modal-overlay.open .modal{
  transform:scale(1) translateY(0);
  opacity:1;
}
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid var(--card-border);
}
.modal-head h3{margin:0;font-size:16px}
.modal-body{
  padding:20px;
}
.modal-body .form-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}
.modal-body .field{margin-bottom:14px}
.modal-footer{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  padding:16px 20px;
  border-top:1px solid var(--card-border);
}

/* ── Delete modal ── */
.delete-modal .modal-body{padding:24px 20px}
.delete-warning{text-align:center;margin-bottom:20px}
.delete-icon{
  width:56px;height:56px;
  margin:0 auto 14px;
  border-radius:999px;
  background:var(--red-50);
  display:flex;align-items:center;justify-content:center;
  color:var(--red-600);
}
.delete-icon svg{width:28px;height:28px}
.delete-title{
  font-size:16px;font-weight:700;
  margin:0 0 6px;color:var(--text-primary);
}
.delete-desc{
  font-size:13px;color:var(--text-secondary);
  margin:0 0 16px;
}
.delete-info{
  text-align:left;
  background:var(--body-bg);
  border-radius:8px;
  padding:12px 14px;
}
.delete-info div{
  display:flex;justify-content:space-between;
  padding:6px 0;
  font-size:13px;
}
.delete-info .label{color:var(--text-secondary)}
.delete-info .value{color:var(--text-primary);font-weight:500}
.delete-confirm-section{margin-top:8px}
.delete-confirm-section .field span{color:var(--red-600);font-weight:600}
.delete-confirm-section input{
  border:1px solid var(--red-200);
  background:var(--red-50);
}
.delete-confirm-section input:focus{
  border-color:var(--red-400);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--raw-dc2626) 12%, transparent);
}

/* ── Batch actions ── */
.batch-actions{
  display:flex;align-items:center;gap:16px;
  padding:10px 16px;
  background:color-mix(in srgb,var(--color-danger-soft) 52%,var(--white) 48%);
  border-radius:8px;
  border:1px solid color-mix(in srgb,var(--color-danger) 26%,var(--white) 74%);
  margin-bottom:8px;
  box-shadow:0 1px 3px color-mix(in srgb, var(--raw-ef4444) 8%, transparent);
}
.batch-actions .checkbox{display:flex;align-items:center;gap:6px;font-size:13px}
.batch-actions .checkbox input{width:16px;height:16px}
.batch-actions .selected-count{
  color:var(--color-danger);
  font-size:13px;
  font-weight:600;
}
.batch-actions .btn.danger{
  background:linear-gradient(135deg,var(--color-danger),var(--color-danger-text));
  color:var(--white);
  border:1px solid var(--color-danger);
  padding:8px 18px;
  font-weight:600;
  border-radius:6px;
  box-shadow:0 2px 8px color-mix(in srgb, var(--raw-dc2626) 35%, transparent);
  transition:all .2s ease;
}
.batch-actions .btn.danger:hover{
  background:linear-gradient(135deg,var(--color-danger),var(--color-danger));
  box-shadow:0 4px 12px color-mix(in srgb, var(--raw-dc2626) 45%, transparent);
  transform:translateY(-1px);
}
.checkbox-cell{
  text-align:center;
  padding:4px 6px;
  width:40px;
}
.file-preview-link{
  background:none;
  border:none;
  color:var(--color-primary);
  font-weight:600;
  text-decoration:underline;
  text-decoration-color:color-mix(in srgb, var(--raw-087b55) 30%, transparent);
  text-underline-offset:2px;
  cursor:pointer;
  font-size:inherit;
  padding:0;
  line-height:1.4;
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.file-preview-link:hover{
  color:var(--color-success-text);
  text-decoration-color:color-mix(in srgb, var(--raw-087b55) 60%, transparent);
}

/* ── File preview modal ── */
.file-preview-modal{width:min(800px,calc(100vw - 40px))}
.file-preview-modal .modal-body{padding:0;max-height:calc(100vh - 160px);overflow:hidden}
.file-preview-body{display:flex;flex-direction:column;height:100%}
.preview-loading{
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:40px;gap:12px;
}
.preview-loading .spinner{
  width:32px;height:32px;
  border:3px solid var(--card-border);
  border-top-color:var(--primary);
  border-radius:999px;
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.preview-loading p{color:var(--text-secondary);font-size:13px}
.preview-content{
  padding:20px;
  overflow-y:auto;
  max-height:calc(100vh - 220px);
  background:var(--body-bg);
}
.preview-content p{margin:0 0 10px;line-height:1.7}
.preview-content table{border-collapse:collapse;width:100%;margin:10px 0}
.preview-content td,.preview-content th{
  border:1px solid var(--card-border);
  padding:6px 10px;font-size:12px;
}
.preview-content th{background:var(--card-bg);font-weight:600}
.preview-content img{max-width:100%;height:auto}
.preview-unsupported{
  padding:30px;
  text-align:center;
}
.preview-unsupported p{
  color:var(--text-secondary);
  margin:0 0 16px;
  font-size:14px;
}

/* ── Overview panel ── */
.overview-panel{width:min(980px,96vw)}
.overview-subtitle{margin:6px 0 0;color:var(--text-secondary);font-size:13px}
.overview-hero{
  padding:18px;
  border-radius:var(--radius-card);
  background:linear-gradient(135deg,var(--green-100),var(--gray-50));
  border:1px solid var(--card-border);
  margin-bottom:16px;
}
.overview-hero-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}
.overview-hero h2{font-size:22px;color:var(--text-primary);margin:0 0 8px}
.overview-hero-head h2{margin-bottom:0}
.overview-hero .meta{display:flex;gap:8px;flex-wrap:wrap;color:var(--text-secondary);font-size:13px}
.project-overview-tabs{
  position:sticky;
  top:0;
  z-index:3;
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:10px 0 12px;
  margin-bottom:14px;
  background:var(--body-bg);
  border-bottom:1px solid var(--card-border);
  scrollbar-width:thin;
}
.project-overview-tab{
  flex:0 0 auto;
  min-width:118px;
  height:42px;
  border:1px solid var(--card-border);
  border-radius:12px;
  background:var(--card-bg);
  color:var(--text-secondary);
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  transition:background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease;
}
.project-overview-tab span{
  width:22px;
  height:22px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--green-100);
  color:var(--primary);
  font-size:12px;
}
.project-overview-tab:hover{
  border-color:color-mix(in srgb, var(--raw-108057) 38%, transparent);
  color:var(--text-primary);
}
.project-overview-tab.active{
  background:var(--primary);
  color:var(--white);
  border-color:var(--primary);
  box-shadow:0 10px 22px color-mix(in srgb, var(--raw-108057) 18%, transparent);
}
.project-overview-tab.active span{
  background:color-mix(in srgb, var(--raw-000000) 15%, transparent);
  color:var(--white);
}
.project-overview-tab-panel{
  display:none;
  border:1px solid var(--card-border);
  border-radius:var(--radius-card);
  background:var(--card-bg);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
}
.project-overview-tab-panel.active{display:block}
.project-overview-tab-head{
  padding:14px 16px;
  background:linear-gradient(135deg,var(--gray-50),var(--green-100));
  border-bottom:1px solid var(--card-border);
}
.project-overview-tab-head h4{
  margin:0 0 4px;
  color:var(--text-primary);
  font-size:16px;
  font-weight:800;
}
.project-overview-tab-head p{
  margin:0;
  color:var(--text-secondary);
  font-size:12px;
  line-height:1.5;
}
.project-overview-tab-body{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  padding:16px;
  align-items:start;
}
.project-overview-tab-body .overview-section{
  box-shadow:none;
}
.overview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.overview-grid.inner{grid-template-columns:repeat(2,minmax(0,1fr))}
.overview-section{
  border:1px solid var(--card-border);
  border-radius:var(--radius-card);
  background:var(--card-bg);
  padding:14px;
}
.overview-section.full{grid-column:1/-1}
.overview-section h4{font-size:15px;color:var(--text-primary);margin:0 0 12px}
.overview-kv{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:10px;padding:8px 0;
  border-bottom:1px dashed var(--card-border);
  align-items:start;
}
.overview-kv:last-child{border-bottom:0}
.overview-kv .k{font-size:12px;color:var(--text-secondary);font-weight:500}
.overview-kv .v{font-size:13px;color:var(--text-primary);line-height:1.5;white-space:pre-wrap;word-break:break-word}
.overview-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}

.project-finance-overview{
  display:grid;
  gap:12px;
  margin-top:16px;
  padding:16px;
  border:1px solid color-mix(in srgb,var(--ui-accent,var(--color-primary)) 20%,var(--card-border));
  border-radius:14px;
  background:linear-gradient(135deg,var(--card-bg),color-mix(in srgb,var(--ui-accent,var(--color-primary)) 6%,var(--white)));
}
.project-finance-overview-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.project-finance-overview-head h5{margin:0;color:var(--text-primary);font-size:15px}
.project-finance-overview-head p{margin:5px 0 0;color:var(--text-secondary);font-size:12px;line-height:1.55}
.project-finance-overview-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:start}
.project-finance-overview-kpis span{display:grid;gap:4px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--ui-accent,var(--color-primary)) 14%,var(--card-border));border-radius:10px;background:color-mix(in srgb, var(--white) 72%, transparent);color:var(--text-secondary);font-size:12px}
.project-finance-overview-kpis strong{color:var(--text-primary);font-size:16px}
.project-finance-records{display:grid;border-top:1px solid color-mix(in srgb,var(--card-border) 70%,transparent)}
.project-finance-record{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid color-mix(in srgb,var(--card-border) 70%,transparent)}
.project-finance-record>div:first-child{display:grid;gap:4px;min-width:0}.project-finance-record span{color:var(--text-secondary);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.project-finance-record-side{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.project-finance-record-side b{white-space:nowrap;color:var(--text-primary)}
.project-finance-draft-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}.project-finance-draft-form label{display:grid;gap:6px;color:var(--text-secondary);font-size:12px;font-weight:700;min-width:0}.project-finance-draft-form label.full{grid-column:1/-1}.project-finance-draft-form small{color:var(--text-secondary);font-weight:500;line-height:1.45}.project-finance-modal-note{margin:0 0 16px;padding:10px 12px;border-radius:10px;background:var(--color-primary-faint);color:var(--text-secondary);font-size:13px}
@media(max-width:700px){.project-finance-overview-head,.project-finance-record{align-items:stretch;flex-direction:column}.project-finance-record-side{justify-content:flex-start}.project-finance-overview-kpis,.project-finance-draft-form{grid-template-columns:1fr}.project-finance-draft-form label.full{grid-column:auto}}

.project-unified-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:18px;
  border:1px solid var(--card-border);
  border-radius:var(--radius-card);
  background:linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 8%, var(--white) 92%), var(--white));
  margin-bottom:14px;
}
.project-unified-eyebrow{
  margin:0 0 4px;
  color:var(--primary);
  font-size:12px;
  font-weight:800;
}
.project-unified-header h2{
  margin:0;
  color:var(--text-primary);
  font-size:24px;
  line-height:1.25;
}
.project-unified-no{
  margin-top:6px;
  color:var(--text-secondary);
  font-size:13px;
  font-weight:700;
}
.project-unified-tags{
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px;
  max-width:620px;
}
.project-related-strip{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:12px 14px;
  border:1px solid var(--card-border);
  border-radius:var(--radius-card);
  background:var(--card-bg);
  margin-bottom:14px;
  color:var(--text-secondary);
  font-size:13px;
}
.project-related-strip strong{color:var(--text-primary);white-space:nowrap}
.project-section-card-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.project-section-card{
  border:1px solid var(--card-border);
  border-radius:var(--radius-card);
  background:var(--card-bg);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}
.project-section-card:nth-child(4),
.project-section-card:nth-child(6),
.project-section-card:nth-child(7),
.project-section-card:nth-child(8),
.project-section-card:nth-child(9){
  grid-column:1/-1;
}
.project-section-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  background:linear-gradient(135deg,var(--gray-50),var(--green-100));
  border-bottom:1px solid var(--card-border);
}
.project-section-card-head h4{
  margin:0 0 4px;
  color:var(--text-primary);
  font-size:16px;
  font-weight:800;
}
.project-section-card-head p{
  margin:0;
  color:var(--text-secondary);
  font-size:12px;
  line-height:1.5;
}
.project-section-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
.section-completion{
  min-width:46px;
  text-align:center;
  padding:5px 9px;
  border-radius:999px;
  background:var(--white);
  border:1px solid var(--card-border);
  color:var(--text-secondary);
  font-size:12px;
  font-weight:800;
}
.project-section-card-body{padding:14px 16px}
.project-overview-field-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:18px;
}
.project-overview-field-grid .overview-kv{
  grid-template-columns:120px 1fr;
}
.project-overview-timeline{
  margin-top:12px;
  display:grid;
  gap:10px;
}
.project-file-category-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.project-file-category{
  border:1px solid var(--card-border);
  border-radius:10px;
  padding:12px;
  background:var(--white);
}
.project-file-category h5{
  margin:0 0 10px;
  color:var(--text-primary);
  font-size:14px;
  font-weight:800;
}
.file-audit-panel{
  margin:12px 0;
}
.file-audit-summary{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
}
.file-audit-list{
  display:grid;
  gap:8px;
  margin-top:12px;
}
.file-audit-item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid var(--card-border);
  border-radius:8px;
  background:var(--white);
}
.file-audit-item.high{
  border-color:color-mix(in srgb,var(--color-danger) 26%,var(--white) 74%);
  background:color-mix(in srgb,var(--color-danger-soft) 42%,var(--white) 58%);
}
.file-audit-item p{
  margin:4px 0 0;
  color:var(--text-secondary);
  font-size:13px;
}
.project-payment-records-embed{
  grid-column:1/-1;
  width:100%;
}
.project-payment-records-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:10px;
}
.project-payment-records-head p{
  margin:4px 0 0;
  color:var(--text-secondary);
  font-size:12px;
}
.project-payment-records-list{
  max-height:260px;
  overflow-y:auto;
}

/* Customer overview */
.customer-overview-panel{width:min(1040px,96vw)}
.customer-hero{
  padding:20px;
  border-radius:var(--radius-card);
  background:linear-gradient(135deg,var(--green-100),var(--gray-50));
  border:1px solid var(--card-border);
  margin-bottom:16px;
}
.customer-hero .meta{display:flex;gap:8px;flex-wrap:wrap;color:var(--text-secondary);font-size:13px}
.customer-summary-grid{display:grid;grid-template-columns:repeat(5,minmax(120px,1fr));gap:12px;margin-bottom:16px}
.customer-summary-card{
  border:1px solid var(--card-border);
  border-radius:var(--radius-card);
  background:var(--card-bg);
  padding:14px;
  text-align:center;
}
.customer-summary-card .label{font-size:12px;color:var(--text-secondary);margin-bottom:4px}
.customer-summary-card .value{font-size:18px;font-weight:700;color:var(--text-primary)}
.customer-overview-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.customer-overview-section{
  border:1px solid var(--card-border);
  border-radius:var(--radius-card);
  background:var(--card-bg);
  padding:14px;
}
.customer-overview-section.full{grid-column:1/-1}
.customer-charts-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.customer-chart-card{min-height:260px;max-height:560px;display:flex;flex-direction:column;min-width:0;overflow:hidden}
#customerRiskList,#customerValueBars,#customerCategoryBars{overflow:hidden;flex:1;min-height:0}
#customerRiskList{overflow-y:auto}
.customer-project-table{max-height:360px;overflow:auto}

/* ═══════════════════════════════════════════
   16. PURCHASE CONTRACTS
   ═══════════════════════════════════════════ */
.pc-table th:nth-child(1),.pc-table td:nth-child(1){width:50px}
.pc-table th:nth-child(2),.pc-table td:nth-child(2){min-width:140px}
.pc-table th:nth-child(3),.pc-table td:nth-child(3){min-width:120px}
.pc-table th:nth-child(4),.pc-table td:nth-child(4){min-width:180px}
.pc-table th:nth-child(5),.pc-table td:nth-child(5){width:100px;text-align:left}
.pc-table th:nth-child(6),.pc-table td:nth-child(6){width:100px}
.pc-table th:nth-child(7),.pc-table td:nth-child(7){width:100px}

/* ═══════════════════════════════════════════
   15. TIMELINE
   ═══════════════════════════════════════════ */
.timeline{
  display:grid;gap:10px;
  position:relative;
  padding-left:16px;
}
.timeline::before{
  content:"";
  position:absolute;left:5px;top:0;
  width:2px;height:100%;
  background:linear-gradient(180deg,var(--primary),var(--success));
}
.timeline-item{
  position:relative;
  border:1px solid var(--card-border);
  border-radius:var(--radius-card);
  background:var(--card-bg);
  padding:12px;
}
.timeline-item.attention{
  border-color:color-mix(in srgb,var(--color-warning) 26%,var(--white) 74%);
  background:color-mix(in srgb,var(--color-warning-soft) 56%,var(--white) 44%);
}
.timeline-dot{
  position:absolute;
  left:-22px;top:16px;
  width:12px;height:12px;
  border-radius:50%;
  background:var(--primary);
  border:3px solid var(--card-bg);
  box-shadow:0 0 0 2px var(--primary-light);
}
.timeline-item.attention .timeline-dot{background:var(--warning);box-shadow:0 0 0 2px color-mix(in srgb,var(--color-warning) 26%,var(--white) 74%)}
.timeline-body{
  margin:8px 0;
  color:var(--text-primary);
  line-height:1.65;
  white-space:pre-wrap;
  font-size:13px;
}
.timeline-meta{
  display:flex;flex-wrap:wrap;gap:6px;
  color:var(--text-secondary);font-size:12px;
}
.timeline-meta span{
  padding:2px 8px;
  border-radius:var(--radius-badge);
  background:var(--body-bg);
}
.timeline-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;margin-bottom:14px;
}
.timeline-summary div{
  padding:10px;
  border-radius:var(--radius-card);
  background:var(--body-bg);
}
.timeline-summary span{font-size:11px;color:var(--text-secondary)}
.timeline-summary strong{display:block;font-size:13px;font-weight:700;line-height:1.6;color:var(--text-primary)}
.timeline-summary em{display:block;font-size:11px;color:var(--text-secondary);font-style:normal}
.timeline-summary.compact{grid-template-columns:repeat(3,minmax(0,1fr));margin:14px 0}
.project-procurement-block{
  margin-top:14px;
  padding-top:14px;
  border-top:1px dashed var(--card-border);
}
.procurement-link-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.procurement-link-title{
  margin-bottom:8px;
  font-size:13px;
  font-weight:700;
  color:var(--text-primary);
}
.procurement-link-card{
  border:1px solid var(--card-border);
  border-radius:var(--radius-card);
  background:var(--white);
  padding:10px 12px;
}
.procurement-link-card + .procurement-link-card{margin-top:8px}
.procurement-link-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.procurement-link-head strong{font-size:13px;color:var(--text-primary)}
.procurement-link-card .sub{
  margin-top:5px;
  font-size:12px;
  color:var(--text-secondary);
  line-height:1.5;
}
.procurement-link-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:8px;
}

/* ═══════════════════════════════════════════
   16. CRM LIST ITEMS
   ═══════════════════════════════════════════ */
.crm-list-item{
  border:1px solid var(--card-border);
  border-radius:var(--radius-card);
  background:var(--card-bg);
  padding:12px;
  margin-bottom:10px;
  cursor:pointer;
  transition:transform var(--fast),border-color var(--fast),box-shadow var(--fast);
}
.crm-list-item:hover{
  transform:translateY(-1px);
  border-color:var(--primary);
  box-shadow:var(--shadow-float);
}
.crm-list-item.danger{
  border-color:color-mix(in srgb,var(--color-danger) 26%,var(--white) 74%);
  background:color-mix(in srgb,var(--color-danger-soft) 52%,var(--white) 48%);
}
.crm-list-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.crm-list-sub{margin-top:6px;font-size:12px;color:var(--text-secondary)}
.crm-list-note{margin-top:6px;font-size:12px;color:var(--text-secondary)}
.crm-progress{
  height:8px;margin-top:10px;
  border-radius:999px;
  background:var(--color-border);
  overflow:hidden;
}
.crm-progress span{
  display:block;height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--primary),var(--success));
}

/* ═══════════════════════════════════════════
   17. MINI LIST & ITEMS
   ═══════════════════════════════════════════ */
.mini-list{display:grid;gap:10px}
.mini-item{
  border:1px solid var(--card-border);
  border-radius:var(--radius-card);
  background:var(--card-bg);
  padding:10px 12px;
}
.mini-item strong{font-size:13px;color:var(--text-primary)}
.mini-item .sub{font-size:12px;color:var(--text-secondary);margin-top:4px}
.profile-line{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.profile-line span:not(.tag){
  padding:4px 10px;
  border-radius:var(--radius-badge);
  background:var(--body-bg);
  font-size:12px;color:var(--text-secondary);
}

/* ═══════════════════════════════════════════
   18. NOTICES & TOAST
   ═══════════════════════════════════════════ */
.notice{padding:12px 14px;border-radius:var(--radius-sm);background:var(--green-100);border:1px solid var(--green-200);color:var(--green-700);font-size:13px;margin-bottom:14px;line-height:1.6}
.danger-notice{background:color-mix(in srgb,var(--color-danger-soft) 52%,var(--white) 48%)!important;border-color:color-mix(in srgb,var(--color-danger) 26%,var(--white) 74%)!important;color:var(--color-danger-text)!important}
.toast{
  position:fixed;
  right:22px;bottom:22px;
  background:var(--card-bg);
  color:var(--text-primary);
  border:1px solid var(--card-border);
  border-radius:var(--radius-card);
  padding:12px 14px;
  box-shadow:var(--shadow-popup);
  z-index:300;
  display:none;
  max-width:420px;
  font-size:13px;
}
.toast.show{display:block}

/* ═══════════════════════════════════════════
   19. SETTINGS & CONFIG
   ═══════════════════════════════════════════ */
.settings-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:16px}
.pill-list{display:flex;gap:8px;flex-wrap:wrap}
.pill{
  padding:6px 12px;
  border-radius:var(--radius-badge);
  background:var(--primary-light);
  color:var(--primary);
  font-size:13px;font-weight:600;
  display:inline-flex;align-items:center;gap:6px;
}
.pill button{border:none;background:transparent;color:var(--color-danger-text);cursor:pointer;font-weight:700;font-size:13px}
.config-panel{padding:14px;border:1px solid var(--card-border);border-radius:var(--radius-card);background:var(--color-surface-soft)}
.config-subtitle{font-size:13px;font-weight:700;color:var(--text-primary);margin-bottom:10px}
.config-actions{
  display:grid;
  grid-template-columns:minmax(180px,1.05fr) minmax(180px,1.15fr) auto auto auto;
  align-items:start;gap:12px;
}
.config-actions .btn.danger{margin-left:8px}
.team-config-actions{grid-template-columns:1.1fr 1.2fr auto auto}
.order-actions{display:flex;flex-wrap:wrap;gap:6px}
.order-actions .btn{padding:8px 10px;min-width:52px}
.product-order-list{display:flex;flex-wrap:wrap;gap:8px}
.product-order-list .pill{display:inline-flex;align-items:center;gap:6px}
.order-index{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 5px;
  border-radius:999px;
  background:var(--primary-light);
  color:var(--primary);
  font-size:11px;font-weight:700;
}
.config-help{margin:10px 0 0;color:var(--text-secondary);font-size:12px;line-height:1.6}

/* ═══════════════════════════════════════════
   20. USER MANAGEMENT
   ═══════════════════════════════════════════ */
#usermgmt .table-wrap{
  max-height:680px;
}
#userDrawer .profile-form{
  gap:10px;
}
#userDrawer .profile-form .field input,
#userDrawer .profile-form .field select,
#userDrawer .profile-form .field textarea{
  min-height:38px;
}
#userDrawer .profile-form .field textarea{
  min-height:72px;
}
#userDrawer .profile-form .field em{
  min-height:18px;
  font-size:11px;
}
.role-tags{
  display:flex;
  gap:4px;
  flex-wrap:wrap;
}

/* ═══════════════════════════════════════════
   21. MODULE CARDS
   ═══════════════════════════════════════════ */
.page{display:none}
.page.active{display:block}
.module-list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.module-card{
  padding:16px;
  border-radius:var(--radius-card);
  background:var(--card-bg);
  border:1px solid var(--card-border);
}
.module-card h4{margin:0 0 8px;color:var(--text-primary)}
.module-card p,.module-card li{color:var(--text-secondary);font-size:13px;line-height:1.7}

/* ═══════════════════════════════════════════
   21. UTILITY CLASSES
   ═══════════════════════════════════════════ */
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.kpis{grid-template-columns:repeat(auto-fit,minmax(178px,1fr))}
.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.mt{margin-top:12px}
.mt-sm{margin-top:10px}
.empty{padding:24px;text-align:center;color:var(--text-secondary);font-size:13px}
.muted-row{opacity:.55}
.danger-text{color:var(--danger)!important}
.stat-positive{color:var(--color-success-text);font-weight:700}
.stat-muted{color:var(--text-secondary)}
.stat-warning{color:var(--color-warning-text);font-weight:700}
.subtle{margin-top:4px;color:var(--text-secondary);font-size:12px}
.click-hint{font-size:12px;color:var(--text-secondary);margin-left:8px}

/* ═══════════════════════════════════════════
   22. RESPONSIVE
   ═══════════════════════════════════════════ */

/* ── ≥992px (tablet landscape / small laptop) ── */
@media(max-width:1200px){
  .dashboard-kpi-primary{grid-template-columns:1fr 1fr}
  .dashboard-kpi-secondary{grid-template-columns:repeat(3,1fr)}
  .key-hero{grid-template-columns:1fr}
  .key-hero-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dashboard-chart-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dashboard-chart-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chart-card{min-height:240px;padding:16px}
  .stat-chart-card{min-height:200px}
  .filters{
    grid-template-columns:minmax(200px,1.5fr) repeat(3,minmax(110px,1fr)) auto;
  }
  .po-filter-main{
    grid-template-columns:minmax(220px,1.6fr) repeat(2,minmax(120px,1fr));
  }
  .po-filter-project .project-picker{
    grid-template-columns:minmax(220px,1.4fr) repeat(3,minmax(110px,1fr));
  }
  .topbar-search{width:240px}
}

/* ── ≥768px (tablet portrait) ── */
@media(max-width:992px){
  .app.sidebar-collapsed{grid-template-columns:var(--sidebar-w) 1fr}
  :root{--sidebar-w:70px}
  aside{width:var(--sidebar-w);padding:0}
  .sidebar-brand{padding:var(--sp-md);justify-content:center}
  .sidebar-brand-text{display:none}
  .sidebar-user{padding:var(--sp-md);justify-content:center}
  .sidebar-user-info{display:none}
  .sidebar-user-email{display:none}
  .sidebar-avatar{width:36px;height:36px;font-size:16px}
  .sidebar-divider{margin:0 var(--sp-sm)}
  .nav-title{display:none}
  .nav button{justify-content:center;padding:12px 0;font-size:0;gap:0}
  .nav button::before{display:none}
  .nav button.active{background:var(--sidebar-active-bg)}
  .nav small{display:none}
  .topbar-search{width:180px}
  .dashboard-kpi-primary{grid-template-columns:1fr 1fr}
  .dashboard-kpi-secondary{grid-template-columns:repeat(2,1fr)}
  .key-hero-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dashboard-core-grid{grid-template-columns:1fr}
  .dashboard-procurement-kpis{grid-template-columns:repeat(2,1fr)}
  .procurement-home-grid{grid-template-columns:1fr}
  .task-command-grid{grid-template-columns:1fr}
  .three{grid-template-columns:1fr}
  .grid.two{grid-template-columns:1fr}
  .two{grid-template-columns:1fr}
  .settings-grid{grid-template-columns:1fr}
  #welcomeMsg{display:none}
}

/* ── <768px (phone) ── */
@media(max-width:768px){
  .app.sidebar-collapsed{grid-template-columns:1fr!important}
  :root{--sidebar-w:0}
  .app{grid-template-columns:1fr!important;width:100%!important;max-width:100vw!important}
  main{width:100%!important;max-width:100vw!important;padding:0 var(--sp-md) var(--sp-xl)!important}
  .hamburger{display:block}
  .sidebar-overlay.active{display:block}
  aside{
    position:fixed!important;left:0;top:0;
    transform:translateX(-100%);
    width:280px;height:100vh;
    z-index:150;
    transition:transform var(--smooth);
  }
  aside.open{transform:translateX(0)}
  aside.open .sidebar-brand-text{display:block!important}
  aside.open .sidebar-user-info{display:block!important}
  aside.open .sidebar-user-email{display:block!important}
  aside.open .nav-title{display:flex!important}
  aside.open .sidebar-brand{padding:var(--sp-lg)!important;justify-content:flex-start!important}
  aside.open .sidebar-user{padding:var(--sp-lg)!important;justify-content:flex-start!important}
  aside.open .sidebar-avatar{width:40px!important;height:40px!important;font-size:18px!important}
  .nav button{height:48px;font-size:14px;padding:0 16px}
  .nav-title{height:48px;font-size:14px}
  aside{overflow-y:auto!important}
  .nav{flex:none;overflow:visible}
  .topbar{padding:0 var(--sp-sm);height:44px}
  .topbar-search{display:none}
  .topbar-logo{font-size:14px}
  .topbar-actions{gap:3px}
  .topbar-actions .btn{padding:3px 6px;font-size:10px}
  #welcomeMsg{display:none!important}
  #refreshBtn{display:none}
  .topbar-breadcrumb .crumb{font-size:11px}
  .topbar-breadcrumb .crumb.active{font-size:12px}
  .page-header{padding:var(--sp-md) 0 0}
  .page-header h2{font-size:18px}
  .page-header p{font-size:12px}
  .dashboard-kpi-primary{grid-template-columns:1fr}
  .dashboard-kpi-secondary{grid-template-columns:1fr}
  .key-hero{padding:14px;gap:12px}
  .key-hero-copy h3{font-size:18px}
  .key-hero-metrics{grid-template-columns:1fr}
  .key-metric{min-height:auto}
  .dashboard-chart-grid{grid-template-columns:1fr}
  .dashboard-chart-grid-4{grid-template-columns:1fr}
  .dashboard-core-grid{grid-template-columns:1fr}
  .dashboard-hero-panel{flex-direction:column;align-items:flex-start;padding:14px 16px}
  .dashboard-hero-panel h2{font-size:18px}
  .dashboard-toolbar{min-width:0;width:100%}
  .dashboard-procurement-panel{padding:14px}
  .dashboard-procurement-kpis{grid-template-columns:1fr}
  .procurement-home-grid{grid-template-columns:1fr}
  .procurement-chart{height:220px}
  .kpi-large{padding:var(--sp-md) var(--sp-lg);min-height:auto}
  .kpi-large .value{font-size:24px}
  .kpi-small{padding:var(--sp-md);min-height:auto}
  .kpi-small .value{font-size:18px}
  .grid,.kpis,.two,.three{grid-template-columns:1fr;gap:10px}
  .filters,.customer-filters,.task-filters,.file-filters{grid-template-columns:1fr}
  .po-filter-main,.po-filter-project,.po-filter-project .project-picker{grid-template-columns:1fr}
  .form-grid,.form-grid.enhanced,.form-grid.compact{grid-template-columns:1fr}
  .form-grid .span2,.form-grid .span3{grid-column:auto}
  .vendor-contacts-head{align-items:flex-start;flex-direction:column}
  .vendor-contact-row{grid-template-columns:1fr}
  .vendor-contact-remove{width:100%}
  .project-form-section-body{grid-template-columns:1fr}
  .drawer{padding-left:0}
  .drawer-panel{width:100vw;max-width:100vw;padding:14px}
  .quote-editor-panel{width:100vw;max-width:100vw;min-height:100vh;margin:0;border-radius:0}
  .quote-item-grid{grid-template-columns:1fr}
  .q-span-1,.q-span-2,.q-span-3,.q-span-4{grid-column:auto}
  .quote-custom-field-row{grid-template-columns:1fr}
  .quote-total-row{justify-content:space-between}
  .qi-subtotal-bar{flex-direction:column;align-items:flex-start;gap:4px}
  .quote-item-card-head{padding:8px 12px}
  .quote-item-body{padding:12px}
  .overview-grid,.project-overview-tab-body{grid-template-columns:1fr}
  .customer-summary-grid{grid-template-columns:repeat(2,1fr)}
  .customer-overview-grid{grid-template-columns:1fr}
  .nav{display:flex;flex-direction:column}
  .nav button{font-size:13px!important;gap:10px!important;justify-content:flex-start!important;padding:10px var(--sp-lg)!important;text-align:left!important}
  .nav small{display:block!important;font-size:11px!important}
  .btn{width:auto}
  .card{padding:var(--sp-md)}
  .chart-card{min-height:240px;padding:14px}
  .stat-chart-card{min-height:200px}
.table-wrap{max-height:380px}
#sales-contracts .table-wrap{
  max-height:none;
  border:0;
  background:transparent;
}
#sales-contracts .sales-contract-table{
  min-width:0;
  border-spacing:0 10px;
}
#sales-contracts .sales-contract-table thead{
  display:none;
}
#sales-contracts .sales-contract-table,
#sales-contracts .sales-contract-table tbody,
#sales-contracts .sales-contract-table tr,
#sales-contracts .sales-contract-table td{
  display:block;
  width:100%;
}
#sales-contracts .sales-contract-table tr{
  border:1px solid var(--card-border);
  border-radius:var(--radius-card);
  background:var(--card-bg);
  overflow:hidden;
}
#sales-contracts .sales-contract-table tr:nth-child(even){
  background:var(--card-bg);
}
#sales-contracts .sales-contract-table td{
  display:grid;
  grid-template-columns:82px minmax(0,1fr);
  gap:10px;
  align-items:start;
  padding:8px 10px;
  border-bottom:1px solid var(--card-border);
  text-align:left!important;
}
#sales-contracts .sales-contract-table td:last-child{
  border-bottom:0;
}
#sales-contracts .sales-contract-table td::before{
  color:var(--text-secondary);
  font-size:12px;
  font-weight:700;
}
#sales-contracts .sales-contract-table td:nth-child(1)::before{content:"序号"}
#sales-contracts .sales-contract-table td:nth-child(2)::before{content:"操作"}
#sales-contracts .sales-contract-table td:nth-child(3)::before{content:"合同编号"}
#sales-contracts .sales-contract-table td:nth-child(4)::before{content:"项目 / 客户"}
#sales-contracts .sales-contract-table td:nth-child(5)::before{content:"负责人"}
#sales-contracts .sales-contract-table td:nth-child(6)::before{content:"来源报价"}
#sales-contracts .sales-contract-table td:nth-child(7)::before{content:"金额"}
#sales-contracts .sales-contract-table td:nth-child(8)::before{content:"状态"}
#sales-contracts .sales-contract-table td:nth-child(9)::before{content:"更新时间"}
#sales-contracts .sales-contract-table .task-actions{
  justify-content:flex-start;
}
#sales-contracts .sales-contract-table .empty{
  display:block;
  border-radius:var(--radius-card);
}
#sales-contracts .sales-contract-table .empty::before{
  content:"";
}
.file-library-table .col-project,.file-library-table .col-note{display:none}
  .file-library-table .col-name{width:180px}
  .file-library-table{max-width:100%}

  .section-title h3{font-size:13px}
  .notice{font-size:12px;padding:10px 12px}
  table{font-size:12px}
  thead th{padding:6px 8px;font-size:10px}
  tbody td{padding:6px 8px;font-size:12px}
  .kpi .value{font-size:20px}
  .funnel-shape{min-width:80px;height:36px;font-size:11px}
  .funnel-shape b{font-size:13px}
  .bar-row{grid-template-columns:90px 1fr 70px;gap:8px}
  .bar-label{font-size:12px}
  .bar-value{font-size:12px}
  .dashboard-trend-grid{grid-template-columns:1fr}
}

/* ── Reduced motion ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms!important;
    transition-duration:0.01ms!important;
  }
}

/* 登录页按 图片1.png 主视觉重构 */
.login-screen{
  min-height:100vh!important;
  padding:0!important;
  background:var(--white)!important;
  overflow:auto!important;
}
.login-screen::before,
.login-screen::after{display:none!important}
.login-shell{
  width:100vw!important;
  min-height:100vh!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:var(--white)!important;
  display:block!important;
  overflow:hidden!important;
}
.login-visual{
  position:absolute!important;
  inset:0!important;
  min-height:0!important;
  padding:0!important;
  display:block!important;
  background:url("./login-reference.png") center center / cover no-repeat!important;
}
.login-visual::before,
.login-visual::after,
.login-visual-copy,
.login-feature-row{display:none!important}
.login-panel{
  position:absolute!important;
  z-index:3!important;
  top:50%!important;
  right:clamp(44px,8vw,128px)!important;
  transform:translateY(-50%)!important;
  width:min(380px,calc(100vw - 48px))!important;
  padding:0!important;
  background:transparent!important;
}
.login-card{
  width:100%!important;
  max-width:none!important;
  padding:34px 32px 30px!important;
  border-radius:18px!important;
  background:color-mix(in srgb, var(--white) 93%, transparent)!important;
  border:1px solid color-mix(in srgb, var(--raw-e2f1e9) 90%, transparent)!important;
  box-shadow:0 22px 58px color-mix(in srgb, var(--raw-003723) 18%, transparent)!important;
  backdrop-filter:blur(10px);
}
.login-title-block h2{font-size:24px!important;color:var(--raw-133d2d)!important}
.login-title-block p{font-size:13px!important;color:var(--raw-66796f)!important;margin-bottom:24px!important}
.login-version{font-size:11px!important;color:var(--raw-8aa095)!important}
@media(max-width:1100px){
  .login-panel{right:34px!important;width:min(360px,calc(100vw - 48px))!important}
  .login-card{padding:28px 26px!important}
}
@media(max-width:760px){
  .login-shell{display:flex!important;align-items:flex-end!important;justify-content:center!important;padding:22px!important;background:url("./login-reference.png") 38% top / auto 52vh no-repeat!important;background-color:var(--raw-f5fbf7)!important}
  .login-visual{display:none!important}
  .login-panel{position:relative!important;top:auto!important;right:auto!important;transform:none!important;width:100%!important;margin-top:45vh!important}
}

/* 登录页按 1.png「智维云CRM管理系统」风格重构 */
.login-screen{
  min-height:100vh!important;
  padding:0!important;
  background:linear-gradient(135deg,var(--raw-f7fbf8) 0%,var(--raw-e4f5ea) 52%,var(--raw-f8fbf8) 100%)!important;
  overflow:auto!important;
}
.login-shell{
  position:relative!important;
  width:100vw!important;
  min-height:100vh!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(390px,32vw)!important;
  align-items:center!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:
    radial-gradient(circle at 92% 8%,color-mix(in srgb, var(--raw-97d7ab) 45%, transparent) 0 12%,transparent 28%),
    linear-gradient(120deg,var(--raw-f7fbf8) 0%,var(--raw-edf8f1) 62%,var(--raw-d8f0e2) 100%)!important;
  overflow:hidden!important;
}
.login-shell::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  background:
    linear-gradient(108deg,transparent 0 58%,color-mix(in srgb, var(--white) 34%, transparent) 58.2% 100%),
    radial-gradient(circle at 88% 28%,color-mix(in srgb, var(--raw-77bf8e) 18%, transparent) 0 18%,transparent 38%),
    linear-gradient(90deg,transparent 0 62%,color-mix(in srgb, var(--raw-c0e4cc) 36%, transparent) 62% 100%)!important;
  opacity:1!important;
  pointer-events:none!important;
}
.login-shell::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:-10vw!important;
  top:-10vh!important;
  width:78vw!important;
  height:88vh!important;
  background:
    radial-gradient(circle at 8% 18%,color-mix(in srgb, var(--raw-5ac580) 34%, transparent) 0 1.4px,transparent 1.8px) 0 0/20px 20px,
    repeating-radial-gradient(ellipse at 42% 12%,color-mix(in srgb, var(--white) 10%, transparent) 0 1px,transparent 1px 11px),
    linear-gradient(142deg,var(--raw-004b33) 0%,var(--raw-005f42) 48%,var(--raw-01412f) 100%)!important;
  border-radius:0 0 48% 0!important;
  box-shadow:0 28px 70px color-mix(in srgb, var(--raw-00462b) 25%, transparent)!important;
  pointer-events:none!important;
}
.login-panel::before{
  content:""!important;
  position:absolute!important;
  z-index:-1!important;
  right:0!important;
  top:50%!important;
  width:44vw!important;
  height:72vh!important;
  transform:translateY(-50%)!important;
  background:
    linear-gradient(90deg,color-mix(in srgb, var(--white) 20%, transparent) 0 2px,transparent 2px 100%) 0 0/46px 46px,
    linear-gradient(0deg,color-mix(in srgb, var(--white) 22%, transparent) 0 2px,transparent 2px 100%) 0 0/46px 46px,
    linear-gradient(135deg,color-mix(in srgb, var(--raw-e5f5eb) 16%, transparent),color-mix(in srgb, var(--raw-439267) 12%, transparent))!important;
  border-radius:34px!important;
  opacity:.72!important;
  transform-origin:center!important;
  pointer-events:none!important;
}
.login-visual{
  position:relative!important;
  z-index:2!important;
  inset:auto!important;
  min-height:100vh!important;
  display:flex!important;
  align-items:flex-start!important;
  padding:clamp(92px,15vh,168px) 0 0 clamp(54px,8vw,142px)!important;
  background:transparent!important;
}
.login-visual::before,
.login-visual::after{display:none!important}
.login-visual-copy{
  display:block!important;
  width:min(760px,58vw)!important;
  color:var(--white)!important;
  margin-top:0!important;
}
.login-kicker{display:none!important}
.login-visual-copy h1{margin:0!important;color:var(--white)!important;font-size:36px!important;line-height:1.2!important;font-weight:700!important;text-shadow:0 4px 16px color-mix(in srgb, var(--raw-000000) 20%, transparent)!important;white-space:normal!important}
.login-visual-copy h1 span{background:linear-gradient(90deg,var(--green-400),var(--green-300))!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important}
.login-visual-copy p{
  margin:0!important;
  color:color-mix(in srgb, var(--white) 90%, transparent)!important;
}
.login-subtitle{
  margin-top:28px!important;
  font-size:clamp(22px,1.8vw,30px)!important;
  font-weight:750!important;
}
.login-subtitle::after{
  content:"";
  display:inline-block;
  width:42px;
  height:28px;
  margin-left:14px;
  border-radius:100% 0 100% 0;
  background:linear-gradient(135deg,var(--raw-d9ff9b),var(--raw-42a85c));
  transform:rotate(-18deg) translateY(4px);
}
.login-scope{
  margin-top:38px!important;
  font-size:clamp(22px,1.8vw,30px)!important;
  font-weight:500!important;
  word-spacing:14px!important;
}
.login-service-tags{
  display:flex!important;
  gap:24px!important;
  margin-top:38px!important;
  flex-wrap:wrap!important;
}
.login-service-tags span{
  display:inline-flex!important;
  align-items:center!important;
  gap:12px!important;
  min-width:176px!important;
  justify-content:center!important;
  height:68px!important;
  padding:0 28px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,color-mix(in srgb, var(--white) 23%, transparent),color-mix(in srgb, var(--white) 12%, transparent))!important;
  border:1px solid color-mix(in srgb, var(--white) 28%, transparent)!important;
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--white) 32%, transparent),0 14px 35px color-mix(in srgb, var(--raw-002d1d) 16%, transparent)!important;
  color:var(--white)!important;
  font-size:24px!important;
  font-weight:800!important;
}
.login-service-tags span::before{
  content:"";
  width:28px;
  height:28px;
  border:5px solid var(--white);
  border-radius:50%;
  box-sizing:border-box;
  box-shadow:0 0 0 6px color-mix(in srgb, var(--white) 12%, transparent);
}
.login-feature-row{display:none!important}
.login-panel{
  position:relative!important;
  z-index:3!important;
  top:auto!important;
  right:auto!important;
  transform:none!important;
  width:auto!important;
  padding:0 clamp(48px,7vw,130px) 0 18px!important;
  background:transparent!important;
  display:flex!important;
  justify-content:center!important;
}
.login-card{
  width:min(420px,100%)!important;
  max-width:none!important;
  padding:50px 42px 44px!important;
  border-radius:30px!important;
  background:color-mix(in srgb, var(--white) 94%, transparent)!important;
  border:1px solid color-mix(in srgb, var(--white) 96%, transparent)!important;
  box-shadow:0 28px 80px color-mix(in srgb, var(--raw-0f5237) 18%, transparent)!important;
  backdrop-filter:blur(16px)!important;
}
.login-card-brand{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:18px!important;
  margin-bottom:44px!important;
  color:var(--raw-17231f)!important;
  font-size:30px!important;
  font-weight:850!important;
}
.login-cloud-logo{
  position:relative!important;
  width:72px!important;
  height:50px!important;
}
.login-cloud-logo::before,
.login-cloud-logo::after,
.login-cloud-logo span{
  content:""!important;
  position:absolute!important;
  border:7px solid var(--color-primary)!important;
  border-radius:50%!important;
  background:transparent!important;
}
.login-cloud-logo::before{width:32px!important;height:32px!important;left:0!important;top:13px!important}
.login-cloud-logo::after{width:38px!important;height:38px!important;left:22px!important;top:2px!important}
.login-cloud-logo span{width:31px!important;height:31px!important;right:0!important;top:14px!important}
.login-field{
  display:block!important;
  margin:0 0 22px!important;
}
.login-field>span{
  display:block!important;
  margin:0 0 12px!important;
  color:var(--raw-202b27)!important;
  font-size:16px!important;
  font-weight:800!important;
}
.login-input-wrap{
  display:flex!important;
  align-items:center!important;
  height:54px!important;
  border:1px solid var(--raw-d7dfdc)!important;
  border-radius:10px!important;
  background:color-mix(in srgb, var(--white) 94%, transparent)!important;
  box-shadow:inset 0 1px 3px color-mix(in srgb, var(--raw-000000) 3%, transparent)!important;
}
.login-input-icon{
  flex:0 0 46px!important;
  text-align:center!important;
  color:var(--raw-9aa5a1)!important;
  font-size:20px!important;
  font-weight:700!important;
}
.login-input-wrap input{
  width:100%!important;
  height:100%!important;
  border:0!important;
  background:transparent!important;
  padding:0 14px 0 0!important;
  font-size:15px!important;
  color:var(--raw-19372c)!important;
  outline:0!important;
}
.login-input-wrap input::placeholder{color:var(--raw-a9b2af)!important}
.login-options{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  margin:6px 0 28px!important;
  color:var(--raw-365348)!important;
  font-size:15px!important;
  font-weight:650!important;
}
.login-options label{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
}
.login-options input{
  width:18px!important;
  height:18px!important;
  accent-color:var(--color-primary)!important;
}
.login-options button{
  border:0!important;
  background:transparent!important;
  color:var(--color-primary)!important;
  font:inherit!important;
  font-weight:800!important;
  cursor:pointer!important;
}
.login-submit{
  width:100%!important;
  height:58px!important;
  border:0!important;
  border-radius:10px!important;
  background:linear-gradient(135deg,var(--raw-49b36f) 0%,var(--raw-00714d) 100%)!important;
  color:var(--white)!important;
  font-size:20px!important;
  font-weight:850!important;
  box-shadow:0 14px 28px color-mix(in srgb, var(--raw-00714d) 24%, transparent)!important;
}
.login-trial{
  width:100%!important;
  height:58px!important;
  margin-top:20px!important;
  border:1px solid var(--raw-0d805b)!important;
  border-radius:10px!important;
  background:color-mix(in srgb, var(--white) 78%, transparent)!important;
  color:var(--color-primary)!important;
  font-size:20px!important;
  font-weight:850!important;
  cursor:pointer!important;
}
#loginMsg{
  margin:18px 0 0!important;
  color:var(--raw-c62828)!important;
  font-weight:700!important;
}
.login-version{display:none!important}
@media(max-width:1180px){
  .login-shell{grid-template-columns:1fr minmax(320px,390px)!important}
  .login-visual{padding:clamp(60px,10vh,120px) 0 0 38px!important}
  .login-visual-copy{width:100%!important}
  .login-visual-copy h1{font-size:clamp(32px,3.8vw,48px)!important}
  .login-subtitle{font-size:clamp(16px,1.5vw,20px)!important;margin-top:16px!important}
  .login-subtitle::after{width:32px!important;height:22px!important;margin-left:10px!important}
  .login-scope{font-size:clamp(16px,1.5vw,22px)!important;margin-top:20px!important;word-spacing:8px!important}
  .login-service-tags{gap:12px!important;margin-top:24px!important}
  .login-service-tags span{min-width:auto!important;height:48px!important;padding:0 18px!important;font-size:16px!important}
  .login-service-tags span::before{width:18px!important;height:18px!important;border-width:4px!important}
  .login-panel{padding:0 28px 0 10px!important}
  .login-card{padding:36px 28px 32px!important}
  .login-card-brand{font-size:24px!important;margin-bottom:32px!important}
}
@media(max-width:860px){
  .login-shell{
    grid-template-columns:1fr!important;
    align-items:start!important;
    padding:0 16px 28px!important;
    min-height:100vh!important;
  }
  .login-shell::after{
    left:-25vw!important;
    top:-8vh!important;
    width:140vw!important;
    height:38vh!important;
    border-radius:0 0 36% 0!important;
  }
  .login-visual{
    min-height:auto!important;
    padding:28px 8px 8px!important;
    display:block!important;
  }
  .login-visual-copy{
    width:100%!important;
    margin:0!important;
  }
  .login-visual-copy h1{
    white-space:normal!important;
    font-size:28px!important;
  }
  .login-subtitle{margin-top:10px!important;font-size:14px!important}
  .login-subtitle::after{width:28px!important;height:18px!important;margin-left:8px!important}
  .login-scope{margin-top:12px!important;font-size:14px!important;word-spacing:4px!important}
  .login-captcha-btn{flex:0 0 100px!important;font-size:12px!important}
  .login-captcha-input-wrap .login-input-icon{flex:0 0 38px!important}
  .login-service-tags{margin-top:14px!important;gap:8px!important}
  .login-service-tags span{height:36px!important;min-width:auto!important;padding:0 14px!important;font-size:13px!important}
  .login-service-tags span::before{width:14px!important;height:14px!important;border-width:2px!important;box-shadow:none!important}
  .login-panel{
    width:100%!important;
    padding:0!important;
    margin:10px auto 0!important;
  }
  .login-panel::before{display:none!important}
  .login-card{
    width:100%!important;
    padding:24px 18px 22px!important;
    border-radius:18px!important;
  }
  .login-card-brand{font-size:22px!important;margin-bottom:24px!important;gap:12px!important}
  .login-cloud-logo{width:52px!important;height:36px!important}
  .login-cloud-logo::before{width:24px!important;height:24px!important;left:0!important;top:10px!important;border-width:5px!important}
  .login-cloud-logo::after{width:28px!important;height:28px!important;left:16px!important;top:2px!important;border-width:5px!important}
  .login-cloud-logo span{width:23px!important;height:23px!important;right:0!important;top:11px!important;border-width:5px!important}
  .login-field{margin:0 0 16px!important}
  .login-field>span{font-size:14px!important;margin:0 0 8px!important}
  .login-input-wrap{height:46px!important}
  .login-input-icon{flex:0 0 38px!important;font-size:17px!important}
  .login-input-wrap input{font-size:14px!important}
  .login-options{font-size:13px!important;margin:4px 0 20px!important}
  .login-options input{width:16px!important;height:16px!important}
  .login-submit{height:48px!important;font-size:17px!important}
  .login-trial{height:48px!important;font-size:17px!important;margin-top:14px!important}
}

/* ── Captcha ── */
.login-captcha-field{margin:0 0 16px!important}
.login-captcha-row{display:flex!important;gap:10px!important;align-items:stretch!important}
.login-captcha-input-wrap{flex:1!important}
.login-captcha-btn{flex:0 0 110px!important;height:46px!important;border:1px solid var(--green-200)!important;border-radius:var(--radius-sm)!important;background:var(--green-50)!important;color:var(--green-700)!important;font-size:13px!important;font-weight:700!important;cursor:pointer!important;white-space:nowrap!important;transition:all var(--fast)}
.login-captcha-btn:hover{background:var(--green-100)!important;border-color:var(--green-400)!important}
.login-captcha-btn:active{transform:scale(0.96)}

/* ── Footer ── */
.login-footer{
  position:absolute!important;
  bottom:0!important;
  left:0!important;
  right:0!important;
  z-index:4!important;
  text-align:center!important;
  padding:16px!important;
  color:var(--raw-4ade80)!important;
  font-size:13px!important;
  font-weight:600!important;
  letter-spacing:0.5px;
}
@media(max-width:860px){
  .login-footer{color:var(--color-success-text)!important;position:relative!important;padding:20px 16px!important;font-size:12px!important}
  .login-captcha-btn{flex:0 0 90px!important;height:40px!important;font-size:11px!important}
  .login-captcha-input-wrap .login-input-icon{flex:0 0 34px!important;font-size:17px!important}
}
@media(max-width:560px){
  .login-screen.hidden{display:none!important}
  .login-screen{
    display:block!important;
    min-height:100svh!important;
    width:100%!important;
    padding:0!important;
    overflow-x:hidden!important;
  }
  .login-shell{
    display:flex!important;
    width:100%!important;
    max-width:100%!important;
    min-height:auto!important;
    grid-template-columns:1fr!important;
    flex-direction:column!important;
    padding:0 16px 0!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    background:transparent!important;
  }
  .login-visual{
    width:100%!important;
    padding:28px 0 14px!important;
  }
  .login-panel{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
  }
  .login-card{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
  }
  .login-footer{
    width:100%!important;
    color:color-mix(in srgb, var(--white) 78%, transparent)!important;
    text-align:center!important;
    padding:18px 20px 24px!important;
  }
}

/* ── Forgot password ── */
.forgot-password-panel{width:min(480px,100vw)!important}
.forgot-desc{color:var(--text-secondary);font-size:14px;line-height:1.7;margin:0 0 20px}
.forgot-msg{margin-top:16px;min-height:20px;font-size:13px;font-weight:600}
#forgotMsg1{color:var(--danger)}
#resetLinkBox code{display:block;word-break:break-all;line-height:1.6}

/* ═══════════════════════════════════════════
   /* ═══════════════════════════════════════
   浅蓝科技风主题（原深蓝主题调浅版）
   ═══════════════════════════════════════ */
[data-theme="blue"] {
  --green-900: var(--color-primary-text); --green-800: var(--color-primary); --green-700: var(--color-primary-hover);
  --green-600: #4f46e5; --green-500: var(--color-primary-hover); --green-400: color-mix(in srgb,var(--color-primary-hover) 72%,#fff 28%);
  --green-300: color-mix(in srgb,var(--color-primary-soft) 55%,#fff 45%); --green-200: var(--color-primary-border); --green-100: var(--color-primary-soft);
  --green-50:  var(--color-primary-faint);
  --primary: var(--color-primary); --primary-hover: var(--color-primary-hover); --primary-light: var(--color-primary-border);
  --sidebar-bg: #004B8D; --sidebar-dark: #003A6F; --sidebar-border: #0A5EA3;
  --sidebar-active-bg: #005A9F;
  --brand-green: var(--color-primary-hover); --brand-green-light: #818cf8; --danger-red: #ef4444;
  --body-bg: var(--color-info-soft);
  --sidebar-text: var(--color-primary-border); --sidebar-text-muted: color-mix(in srgb,var(--color-primary-soft) 55%,#fff 45%);
  --sidebar-text-group: color-mix(in srgb,var(--color-primary-hover) 72%,#fff 28%); --sidebar-text-disabled: #64748b;
  --success: #818cf8;
}
[data-theme="blue"] .btn.primary{background:linear-gradient(135deg,var(--color-primary),var(--color-primary-hover))}
[data-theme="blue"] .btn.primary:hover{background:linear-gradient(135deg,var(--color-primary-hover),var(--color-primary-hover))}
[data-theme="blue"] .nav button.active{background:var(--color-primary)}
[data-theme="blue"] .nav button:hover{background:color-mix(in srgb, var(--raw-6366f1) 15%, transparent)}
[data-theme="blue"] .nav button.active::before{background:var(--brand-green-light)}
[data-theme="blue"] .kpi-amount-card{background:linear-gradient(135deg,var(--color-primary-text),var(--color-primary),var(--color-primary-hover))}
[data-theme="blue"] .kpi-amount-card::after{background:linear-gradient(90deg,var(--color-primary-hover),color-mix(in srgb,var(--color-primary-hover) 72%,var(--white) 28%))}
[data-theme="blue"] .kpi::after{background:var(--color-primary-hover)}
[data-theme="blue"] .dashboard-hero-panel{background:linear-gradient(135deg,var(--green-100),var(--white),var(--green-50))}
[data-theme="blue"] .login-visual{background:linear-gradient(135deg,var(--color-primary-text),var(--color-primary),var(--color-primary-hover))!important}
[data-theme="blue"] .login-submit{background:linear-gradient(135deg,var(--color-primary),var(--color-primary-hover))!important}
[data-theme="blue"] .sidebar-avatar{background:var(--brand-green)}
[data-theme="blue"] .sidebar-brand-icon{background:linear-gradient(135deg,var(--brand-green-light),var(--brand-green))!important}
[data-theme="blue"] .topbar-logo::before{background:var(--brand-green)}
[data-theme="blue"] .nav button:hover{background:color-mix(in srgb, var(--raw-6366f1) 15%, transparent);color:var(--color-primary-soft)}
[data-theme="blue"] .dashboard-time-pill.active{background:var(--color-primary);color:var(--color-text-on-primary);border-color:var(--color-primary)}
[data-theme="blue"] .dashboard-time-pill:hover:not(.active){border-color:var(--color-primary-border-strong);color:var(--color-primary)}
[data-theme="blue"] .notice{background:var(--green-100);border-color:var(--green-200);color:var(--green-700)}
[data-theme="blue"] .login-captcha-btn{background:var(--green-50);color:var(--green-700);border-color:var(--green-200)}
[data-theme="blue"] .login-captcha-btn:hover{background:var(--green-100);border-color:var(--green-400)}
[data-theme="blue"] input:focus,[data-theme="blue"] select:focus,[data-theme="blue"] textarea:focus{border-color:var(--green-500);box-shadow:0 0 0 3px color-mix(in srgb, var(--raw-6366f1) 15%, transparent)}
[data-theme="blue"] .login-field input:focus{border-color:var(--green-500);box-shadow:0 0 0 4px color-mix(in srgb, var(--raw-6366f1) 13%, transparent)}
[data-theme="blue"] .glow-progress i{background:linear-gradient(90deg,var(--green-700),var(--green-500))}
[data-theme="blue"] .sidebar-avatar{background:var(--brand-green)}
[data-theme="blue"] .sidebar-brand-icon{background:linear-gradient(135deg,var(--brand-green-light),var(--brand-green))!important;box-shadow:0 4px 12px color-mix(in srgb, var(--raw-6366f1) 30%, transparent)}
[data-theme="blue"] .bar.green{background:linear-gradient(90deg,var(--color-primary-hover),color-mix(in srgb,var(--color-primary-hover) 72%,var(--white) 28%))}
[data-theme="blue"] .tag{background:var(--green-100);color:var(--green-700)}
[data-theme="blue"] .tag.green{background:var(--green-100);color:var(--green-700)}
[data-theme="blue"] .tag.red{background:var(--color-danger-soft);color:var(--color-danger-text)}
[data-theme="blue"] .tag.orange{background:var(--color-warning-soft);color:var(--color-warning-text)}
[data-theme="blue"] .tag.blue{background:var(--color-info-soft);color:var(--color-info-text)}
[data-theme="blue"] .tag.teal{background:var(--raw-ccfbf1);color:var(--color-success-text)}
[data-theme="blue"] .tag.purple{background:var(--raw-ede9fe);color:var(--raw-5b21b6)}
[data-theme="blue"] .btn:hover{border-color:var(--green-400)}
[data-theme="blue"] .login-submit{box-shadow:0 4px 14px color-mix(in srgb, var(--raw-3730a3) 35%, transparent)}
[data-theme="blue"] .kpi-badge{background:var(--green-100);color:var(--green-700)}
[data-theme="blue"] .kpi-badge.success{background:var(--green-100);color:var(--green-700)}
[data-theme="blue"] .eyebrow{color:var(--green-500)}
[data-theme="blue"] .login-screen{background:linear-gradient(135deg,var(--raw-dbeafe),var(--color-primary-soft),var(--raw-e8f0fe))!important}
[data-theme="blue"] .login-panel{background:linear-gradient(180deg,color-mix(in srgb, var(--white) 96%, transparent),var(--color-info-soft))!important}
[data-theme="blue"] .login-card{background:color-mix(in srgb, var(--white) 96%, transparent);border-color:var(--color-primary-border)}
[data-theme="blue"] .login-footer{color:var(--color-primary-text)!important}
[data-theme="blue"] .brand-footer{color:color-mix(in srgb, var(--raw-1e3a8a) 65%, transparent)!important}
[data-theme="blue"] .login-captcha-btn{background:var(--color-primary-faint);color:var(--color-primary-text);border-color:var(--color-primary-border)}
[data-theme="blue"] .login-captcha-btn:hover{background:var(--raw-dbeafe);border-color:var(--color-primary-hover)}
[data-theme="blue"] .login-visual h1{color:var(--white)!important}
[data-theme="blue"] .login-visual p{color:color-mix(in srgb, var(--white) 78%, transparent)!important}
[data-theme="blue"] .login-service-tags span{background:color-mix(in srgb, var(--white) 12%, transparent)!important;color:var(--white)!important}
[data-theme="blue"] .login-service-tags span::before{background:color-mix(in srgb,var(--color-primary-hover) 72%,var(--white) 28%)!important;box-shadow:0 0 0 5px color-mix(in srgb, var(--raw-818cf8) 14%, transparent)!important}
[data-theme="blue"] .login-visual-copy h1{color:var(--white)!important}
[data-theme="blue"] .login-visual-copy h1 span{background:linear-gradient(90deg,color-mix(in srgb,var(--color-primary-hover) 72%,var(--white) 28%),color-mix(in srgb,var(--color-primary-soft) 55%,var(--white) 45%))!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important}
[data-theme="blue"] .login-visual-copy p{color:color-mix(in srgb, var(--white) 78%, transparent)!important}
[data-theme="blue"] .login-subtitle::after{background:linear-gradient(135deg,color-mix(in srgb,var(--color-primary-hover) 72%,var(--white) 28%),var(--color-primary-hover))!important}

/* ═══════════════════════════════════════════
   Sidebar navigation: theme-aware hierarchy
   ═══════════════════════════════════════════ */
aside{
  --nav-accent:color-mix(in srgb,var(--color-primary,var(--brand-green)) 68%,#fff 32%);
  --nav-title-text:color-mix(in srgb,var(--sidebar-active) 86%,var(--nav-accent) 14%);
  --nav-item-text:color-mix(in srgb,var(--sidebar-text) 90%,#fff 10%);
  --nav-panel-bg:color-mix(in srgb,var(--sidebar-bg) 84%,#fff 16%);
  --nav-panel-border:color-mix(in srgb,var(--sidebar-border) 58%,var(--nav-accent) 42%);
  --nav-hover-bg:color-mix(in srgb,var(--nav-accent) 14%,var(--sidebar-bg) 86%);
  --nav-active-bg:color-mix(in srgb,var(--nav-accent) 30%,var(--sidebar-bg) 70%);
}

.nav{
  padding:14px 0 18px;
}

.sidebar-divider[data-nav-section]{
  display:none;
}

aside .nav-title{
  min-height:48px;
  height:48px;
  margin:10px 12px 5px;
  padding:0 13px 0 16px;
  gap:12px;
  border-color:color-mix(in srgb,var(--sidebar-border) 64%,var(--nav-accent) 36%);
  border-radius:11px;
  background:color-mix(in srgb,var(--sidebar-bg) 91%,var(--white) 9%);
  color:var(--nav-title-text);
  font-size:15px;
  font-weight:720;
  letter-spacing:.2px;
  line-height:1;
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--white) 4%, transparent);
  transition:background-color var(--fast),border-color var(--fast),color var(--fast),transform var(--fast);
}

aside .nav-title > svg{
  width:21px;
  height:21px;
  flex:0 0 21px;
  opacity:.92;
}

aside .nav-title > span{
  flex:1;
  min-width:0;
}

aside .nav-title::before{
  width:4px;
  background:var(--nav-accent);
  opacity:.88;
  border-radius:11px 0 0 11px;
}

aside .nav-title::after{
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border-radius:6px;
  color:var(--nav-accent);
  font-size:14px;
  opacity:1;
}

aside .nav-title:hover,
aside .nav-title.expanded{
  color:var(--sidebar-active);
  border-color:var(--nav-panel-border);
  background:color-mix(in srgb,var(--nav-accent) 12%,var(--sidebar-bg) 88%);
}

aside .nav-title:hover::after{
  background:color-mix(in srgb, var(--white) 8%, transparent);
}

aside .nav-title:active{
  transform:scale(.985);
}

aside .nav-section-items{
  margin:0 12px;
  border:1px solid transparent;
  border-radius:0 0 11px 11px;
}

aside .nav-section-items.expanded{
  max-height:640px;
  margin:0 12px 10px;
  padding:6px;
  border-color:var(--nav-panel-border);
  background:var(--nav-panel-bg);
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--white) 4%, transparent);
}

aside .nav-section-items.expanded + .sidebar-divider{
  display:none;
}

aside .nav button{
  width:100%;
  min-height:42px;
  height:42px;
  margin:1px 0;
  padding:0 12px;
  gap:11px;
  border:1px solid transparent;
  border-radius:8px;
  color:var(--nav-item-text);
  font-size:14px;
  font-weight:560;
  letter-spacing:.05px;
  transition:background-color var(--fast),border-color var(--fast),color var(--fast),transform var(--fast);
}

aside .nav button svg,
aside .nav button .nav-icon{
  width:19px;
  height:19px;
  opacity:.88;
}

aside .nav button::before{
  left:0;
  width:3px;
  height:22px;
  background:var(--nav-accent);
}

aside .nav button:hover{
  background:var(--nav-hover-bg);
  border-color:color-mix(in srgb,var(--nav-accent) 26%,transparent);
  color:var(--sidebar-active);
}

aside .nav button.active{
  min-height:44px;
  height:44px;
  border-color:color-mix(in srgb,var(--nav-accent) 48%,var(--sidebar-border) 52%);
  background:var(--nav-active-bg);
  color:var(--sidebar-active);
  font-weight:720;
  box-shadow:0 6px 14px color-mix(in srgb, var(--raw-000000) 13%, transparent),inset 0 1px 0 color-mix(in srgb, var(--white) 7%, transparent);
}

aside .nav button.active::before{
  height:26px;
  background:var(--nav-accent);
}

aside .nav button .nav-badge{
  min-width:21px;
  height:21px;
  margin-left:auto;
  background:var(--danger-red);
  box-shadow:0 0 0 2px var(--nav-panel-bg);
}

aside .nav-title:focus-visible,
aside .nav button:focus-visible{
  outline:3px solid var(--nav-accent);
  outline-offset:2px;
}

@media(max-width:992px){
  aside .nav{padding:10px 0}
  aside .nav-section-items.expanded{margin:0 6px 7px;padding:3px;border:0;background:transparent;box-shadow:none}
  aside .nav button{width:100%;min-height:46px;height:46px;margin:2px 0}
  aside .nav button.active{min-height:46px;height:46px}
}

@media(max-width:768px){
  aside.open .nav{padding:14px 0 18px}
  aside.open .nav-section-items.expanded{margin:0 12px 10px;padding:6px;border:1px solid var(--nav-panel-border);background:var(--nav-panel-bg);box-shadow:inset 0 1px 0 color-mix(in srgb, var(--white) 4%, transparent)}
  aside.open .nav button{min-height:46px;height:46px;padding:0 14px;font-size:14px;justify-content:flex-start;gap:11px}
  aside.open .nav button.active{min-height:48px;height:48px}
}

@media(prefers-reduced-motion:reduce){
  aside .nav-title,
  aside .nav button,
  aside .nav-section-items{transition:none!important;animation:none!important}
}
[data-theme="blue"] .login-feature-card{background:color-mix(in srgb, var(--raw-e0e7ff) 95%, transparent)!important;border-color:color-mix(in srgb, var(--white) 80%, transparent)!important;color:var(--color-primary-text)!important}
[data-theme="blue"] .login-feature-card span{color:color-mix(in srgb,var(--color-primary-hover) 72%,var(--white) 28%)!important}
[data-theme="blue"] .login-kicker{color:var(--color-primary-border)!important}
[data-theme="blue"] .login-shell{box-shadow:0 28px 70px color-mix(in srgb, var(--raw-1e3a8a) 18%, transparent)!important}
[data-theme="blue"] .login-card{background:color-mix(in srgb, var(--white) 96%, transparent)!important;border-color:var(--color-primary-border)!important;box-shadow:0 8px 32px color-mix(in srgb, var(--raw-1e3a8a) 14%, transparent)!important}
[data-theme="blue"] .login-card::before{background:var(--color-primary-hover)!important}
[data-theme="blue"] .login-logo{background:linear-gradient(135deg,var(--color-primary-hover),color-mix(in srgb,var(--color-primary-hover) 72%,var(--white) 28%))!important;box-shadow:0 4px 12px color-mix(in srgb, var(--raw-6366f1) 35%, transparent)!important}
[data-theme="blue"] .login-card-brand strong,[data-theme="blue"] .login-card-brand{color:var(--color-primary-text)!important}
[data-theme="blue"] .login-cloud-logo::before,
[data-theme="blue"] .login-cloud-logo::after,
[data-theme="blue"] .login-cloud-logo span{border-color:color-mix(in srgb,var(--color-primary-hover) 72%,var(--white) 28%)!important}
[data-theme="blue"] .login-options button{color:var(--color-primary-text)!important}
[data-theme="blue"] .login-field>span{color:var(--color-primary-text)!important}
[data-theme="blue"] .forgot-pw{color:var(--color-primary-text)!important}
[data-theme="blue"] .forgot-pw:hover{color:var(--color-primary-hover)!important}
[data-theme="blue"] .login-input-wrap{border-color:var(--color-primary-border)!important}
[data-theme="blue"] .login-input-wrap input::placeholder{color:color-mix(in srgb,var(--color-primary-soft) 55%,var(--white) 45%)!important}
[data-theme="blue"] .btn-login{background:linear-gradient(135deg,var(--color-primary),var(--color-primary-hover))!important;box-shadow:0 4px 14px color-mix(in srgb, var(--raw-3730a3) 35%, transparent)!important}
[data-theme="blue"] .btn-login:hover{background:linear-gradient(135deg,var(--color-primary-hover),var(--color-primary-hover))!important}
[data-theme="blue"] .login-options input[type="checkbox"]{accent-color:color-mix(in srgb,var(--color-primary-hover) 72%,var(--white) 28%)!important}
[data-theme="blue"] .login-shell::before{background:linear-gradient(108deg,transparent 0 58%,color-mix(in srgb, var(--white) 34%, transparent) 58.2% 100%)!important}
[data-theme="blue"] .login-shell::after{background:linear-gradient(90deg,transparent 0 62%,color-mix(in srgb, var(--raw-c8daf6) 36%, transparent) 62% 100%)!important}
[data-theme="blue"] .login-panel::before{background:linear-gradient(135deg,color-mix(in srgb, var(--raw-dbeafe) 16%, transparent),color-mix(in srgb, var(--raw-6366f1) 12%, transparent))!important}
[data-theme="blue"] .login-visual::before{background:color-mix(in srgb, var(--white) 6%, transparent)!important}
[data-theme="blue"] .bullet-status.good{background:var(--raw-e8effb);color:var(--color-primary-text)}
[data-theme="blue"] .stat-positive{color:color-mix(in srgb,var(--color-primary-hover) 72%,var(--white) 28%)}
[data-theme="blue"] .login-logo{box-shadow:0 4px 12px color-mix(in srgb, var(--raw-6366f1) 35%, transparent)!important}
[data-theme="blue"] .sidebar-brand-icon{box-shadow:0 4px 12px color-mix(in srgb, var(--raw-6366f1) 30%, transparent)!important}
[data-theme="blue"] .login-field input:focus{box-shadow:0 0 0 4px color-mix(in srgb, var(--raw-6366f1) 15%, transparent)!important}
[data-theme="blue"] .topbar-search input:focus{box-shadow:0 0 0 3px color-mix(in srgb, var(--raw-6366f1) 15%, transparent)!important}
[data-theme="blue"] input:focus,[data-theme="blue"] select:focus,[data-theme="blue"] textarea:focus{box-shadow:0 0 0 3px color-mix(in srgb, var(--raw-6366f1) 18%, transparent)!important}
[data-theme="blue"] .login-submit{box-shadow:0 4px 14px color-mix(in srgb, var(--raw-3730a3) 35%, transparent)!important}
[data-theme="blue"] .login-submit:hover{box-shadow:0 6px 20px color-mix(in srgb, var(--raw-3730a3) 45%, transparent)!important}
[data-theme="blue"] .btn.primary{box-shadow:0 2px 8px color-mix(in srgb, var(--raw-3730a3) 30%, transparent)!important}
[data-theme="blue"] .btn.primary:hover{box-shadow:0 4px 12px color-mix(in srgb, var(--raw-3730a3) 40%, transparent)!important}
[data-theme="blue"] .kpi-badge{background:var(--raw-e8effb)!important;color:var(--color-primary-text)!important}
[data-theme="blue"] .kpi-badge.success{background:var(--raw-e8effb)!important;color:var(--raw-1e3a8a)!important}
[data-theme="blue"] .kpi-badge.warning{background:var(--raw-fff3e0)!important;color:var(--color-warning-text)!important}
[data-theme="blue"] .login-subtitle::after{background:linear-gradient(135deg,color-mix(in srgb,var(--color-primary-hover) 72%,var(--white) 28%),var(--color-primary-hover))!important}
[data-theme="blue"] .login-title-block span{color:var(--color-primary-hover)!important}
[data-theme="blue"] .login-title-block h2{color:var(--color-primary-text)!important}
[data-theme="blue"] .form-section{background:color-mix(in srgb,var(--color-info-soft) 55%,var(--white) 45%)!important;border-color:var(--color-info-soft)!important}
[data-theme="blue"] .form-section h4{color:var(--color-primary-text)!important}
[data-theme="blue"] .form-section p{color:var(--color-text-secondary)!important}
[data-theme="blue"] .drawer-subtitle{background:var(--raw-e8effb)!important;border-color:var(--color-primary-border)!important;color:var(--color-primary-text)!important}
[data-theme="blue"] .config-panel{background:var(--raw-f0f9ff)!important;border-color:var(--color-info-soft)!important}
[data-theme="blue"] .config-subtitle{color:var(--color-primary-text)!important}
[data-theme="blue"] .config-help{color:var(--color-text-secondary)!important}
[data-theme="blue"] .project-form-panel-head{background:linear-gradient(135deg,var(--raw-f0f9ff),var(--color-primary-soft))!important}
[data-theme="blue"] .project-form-tab span{background:var(--color-primary-soft)!important;color:var(--raw-1d4ed8)!important}
[data-theme="blue"] .project-form-tab .tab-title{background:none!important;color:inherit!important}
[data-theme="blue"] .project-form-tab.active{background:var(--raw-4f46e5)!important;border-color:var(--raw-4f46e5)!important;color:var(--white)!important}
[data-theme="blue"] .project-form-tab.active span{background:color-mix(in srgb, var(--raw-000000) 15%, transparent)!important;color:var(--white)!important}
[data-theme="blue"] .project-form-tab.active .tab-title{background:none!important;color:var(--white)!important}
/* P0优化3：蓝色主题步骤完成状态 */
[data-theme="blue"] .project-form-tab.completed{border-color:var(--color-info)!important;color:var(--color-info)!important;background:color-mix(in srgb,var(--color-info-soft) 55%,var(--white) 45%)!important}
[data-theme="blue"] .project-form-tab.completed .tab-check{background:var(--color-info)!important;color:var(--white)!important}
[data-theme="blue"] .project-overview-tab-head{background:linear-gradient(135deg,var(--raw-f0f9ff),var(--color-primary-soft))!important}
[data-theme="blue"] .project-overview-tab span{background:var(--color-primary-soft)!important;color:var(--raw-1d4ed8)!important}
[data-theme="blue"] .project-overview-tab.active{background:var(--color-info)!important;border-color:var(--color-info)!important;color:var(--white)!important}
[data-theme="blue"] .project-overview-tab.active span{background:color-mix(in srgb, var(--raw-000000) 15%, transparent)!important;color:var(--white)!important}
[data-theme="blue"] table thead th{background:color-mix(in srgb,var(--color-info-soft) 55%,var(--white) 45%)!important}
[data-theme="blue"] tbody tr:nth-child(even){background:var(--color-surface-soft)!important}
[data-theme="blue"] .empty{color:var(--gray-400)!important}
[data-theme="blue"] .nav small{background:color-mix(in srgb, var(--raw-6366f1) 8%, transparent)!important;border-color:color-mix(in srgb, var(--raw-6366f1) 15%, transparent)!important;color:color-mix(in srgb, var(--white) 45%, transparent)!important}
[data-theme="blue"] .sidebar-user{border-top-color:var(--sidebar-border)!important}
[data-theme="blue"] .sidebar-brand{border-bottom-color:var(--sidebar-border)!important}
[data-theme="blue"] .sidebar-divider{background:var(--sidebar-border)!important}
[data-theme="blue"] .nav-title{color:var(--sidebar-text-group)!important}
[data-theme="blue"] .dashboard-hero-panel{background:linear-gradient(135deg,var(--color-primary-soft),var(--white),var(--color-primary-faint))!important}
[data-theme="blue"] .drawer-head{border-bottom-color:var(--color-info-soft)!important}
[data-theme="blue"] .forgot-desc{color:var(--color-text-secondary)!important}
[data-theme="blue"] .modal-box h3{color:var(--color-primary-text)!important}
[data-theme="blue"] .modal-box .modal-desc{color:var(--color-text-secondary)!important}

@media(max-width:560px){[data-theme="blue"] .login-screen{background:var(--color-primary-faint)!important}}
@media(max-width:860px){[data-theme="blue"] .login-shell{background-color:var(--color-primary-faint)!important}}
[data-theme="blue"] .login-visual::before{background:color-mix(in srgb, var(--white) 6%, transparent)!important}
[data-theme="blue"] .login-visual::after{background:radial-gradient(circle at 25% 24%,color-mix(in srgb, var(--white) 8%, transparent),transparent 30%)!important;opacity:.4!important}
[data-theme="blue"] .login-screen::before{background:linear-gradient(145deg,color-mix(in srgb, var(--raw-6366f1) 12%, transparent),color-mix(in srgb, var(--white) 0%, transparent))!important}
[data-theme="blue"] .login-screen::after{background:linear-gradient(20deg,color-mix(in srgb, var(--raw-6366f1) 8%, transparent),color-mix(in srgb, var(--white) 78%, transparent))!important}


/* ═══════════════════════════════════════
   灰色商务风主题
   ═══════════════════════════════════════ */
[data-theme="orange"] {
  --green-900: color-mix(in srgb,var(--color-primary) 60%,#000 40%); --green-800: #6b2d00; --green-700: var(--color-primary-text);
  --green-600: #c05800; --green-500: var(--color-primary); --green-400: var(--color-primary-hover);
  --green-300: color-mix(in srgb,var(--color-primary-hover) 72%,#fff 28%); --green-200: var(--color-primary-border); --green-100: var(--color-primary-soft);
  --green-50:  var(--color-primary-faint);
  --primary: var(--color-primary); --primary-hover: var(--color-primary-hover); --primary-light: var(--color-primary-faint);
  --sidebar-bg: var(--color-primary-hover); --sidebar-dark: #E88A4A; --sidebar-border: #FFB57A;
  --sidebar-active-bg: #E88A4A;
  --brand-green: #ffbd8d; --brand-green-light: #ffd4b0; --danger-red: var(--color-danger);
  --body-bg: var(--color-primary-faint);
  --sidebar-text: #FFFFFF; --sidebar-text-muted: #FFF5EB;
  --sidebar-text-group: #FFFFFF; --sidebar-text-disabled: #FFFFFF;
  --success: var(--color-primary);
}
[data-theme="orange"] .btn.primary{background:linear-gradient(135deg,var(--color-primary),var(--color-primary-hover))}
[data-theme="orange"] .btn.primary:hover{background:linear-gradient(135deg,var(--color-primary-hover),color-mix(in srgb,var(--color-primary-hover) 72%,var(--white) 28%))}
[data-theme="orange"] .nav button.active{background:var(--color-primary-text)}
[data-theme="orange"] .nav button:hover{background:color-mix(in srgb, var(--raw-ffbd8d) 15%, transparent)}
[data-theme="orange"] .nav button.active::before{background:var(--brand-green-light)}
[data-theme="orange"] .kpi-amount-card{background:linear-gradient(135deg,color-mix(in srgb,var(--color-primary) 60%,var(--raw-000) 40%),var(--color-primary-text),var(--color-primary))}
[data-theme="orange"] .kpi-amount-card::after{background:linear-gradient(90deg,var(--color-primary),color-mix(in srgb,var(--color-primary-hover) 72%,var(--white) 28%))}
[data-theme="orange"] .kpi::after{background:color-mix(in srgb,var(--color-primary-hover) 72%,var(--white) 28%)}
[data-theme="orange"] .dashboard-hero-panel{background:linear-gradient(135deg,var(--green-100),var(--white),var(--green-50))}
[data-theme="orange"] .sidebar-avatar{background:var(--brand-green)}
[data-theme="orange"] .sidebar-brand-icon{background:linear-gradient(135deg,var(--brand-green-light),var(--brand-green))!important}
[data-theme="orange"] .topbar-logo::before{background:var(--brand-green)}
[data-theme="orange"] .nav button:hover{background:color-mix(in srgb, var(--raw-ffbd8d) 15%, transparent);color:var(--color-primary-faint)}
[data-theme="orange"] .dashboard-time-pill.active{background:var(--color-primary);color:var(--color-text-on-primary);border-color:var(--color-primary)}
[data-theme="orange"] .dashboard-time-pill:hover:not(.active){border-color:var(--color-primary-border-strong);color:var(--color-primary)}
[data-theme="orange"] .notice{background:var(--green-100);border-color:var(--green-200);color:var(--green-700)}
[data-theme="orange"] input:focus,[data-theme="orange"] select:focus,[data-theme="orange"] textarea:focus{border-color:var(--green-500);box-shadow:0 0 0 3px color-mix(in srgb, var(--raw-ffbd8d) 20%, transparent)}
[data-theme="orange"] .glow-progress i{background:linear-gradient(90deg,var(--green-700),var(--green-500))}
[data-theme="orange"] .bar.green{background:linear-gradient(90deg,color-mix(in srgb,var(--color-primary-hover) 72%,var(--white) 28%),var(--color-primary-border))}
[data-theme="orange"] .tag{background:var(--green-100);color:var(--green-700)}
[data-theme="orange"] .tag.green{background:var(--green-100);color:var(--green-700)}
[data-theme="orange"] .tag.red{background:var(--color-danger-soft);color:var(--color-danger-text)}
[data-theme="orange"] .tag.orange{background:var(--color-warning-soft);color:var(--color-warning-text)}
[data-theme="orange"] .tag.blue{background:var(--color-info-soft);color:var(--color-info-text)}
[data-theme="orange"] .tag.teal{background:var(--raw-ccfbf1);color:var(--color-success-text)}
[data-theme="orange"] .tag.purple{background:var(--raw-ede9fe);color:var(--raw-5b21b6)}
[data-theme="orange"] .kpi-badge{background:var(--green-100);color:var(--green-700)}
[data-theme="orange"] .kpi-badge.success{background:var(--green-100);color:var(--green-700)}
[data-theme="orange"] .kpi-badge.warning{background:var(--raw-fff3e0);color:var(--color-warning-text)}
[data-theme="orange"] .eyebrow{color:var(--green-500)}
[data-theme="orange"] .form-section{background:var(--color-primary-faint)!important;border-color:var(--color-primary-soft)!important}
[data-theme="orange"] .form-section h4{color:var(--green-700)!important}
[data-theme="orange"] .form-section p{color:var(--green-500)!important}
[data-theme="orange"] .drawer-subtitle{background:var(--green-100)!important;border-color:color-mix(in srgb,var(--color-primary-hover) 72%,var(--white) 28%)!important;color:var(--green-700)!important}
[data-theme="orange"] .config-panel{background:var(--color-primary-faint)!important;border-color:var(--color-primary-soft)!important}
[data-theme="orange"] .config-subtitle{color:var(--green-700)!important}
[data-theme="orange"] .config-help{color:var(--green-500)!important}
[data-theme="orange"] .project-form-panel-head{background:linear-gradient(135deg,var(--color-primary-faint),var(--color-primary-soft))!important}
[data-theme="orange"] .project-form-tab span{background:var(--color-primary-soft)!important;color:var(--green-700)!important}
[data-theme="orange"] .project-form-tab .tab-title{background:none!important;color:inherit!important}
[data-theme="orange"] .project-form-tab.active{background:var(--color-primary)!important;border-color:var(--color-primary)!important;color:var(--color-text-on-primary)!important}
[data-theme="orange"] .project-form-tab.active span{background:color-mix(in srgb, var(--raw-000000) 15%, transparent)!important;color:var(--white)!important}
[data-theme="gray"] .project-form-tab.active span{background:color-mix(in srgb, var(--raw-000000) 15%, transparent)!important;color:var(--white)!important}
[data-theme="orange"] .project-form-tab.active .tab-title{background:none!important;color:var(--white)!important}
[data-theme="orange"] .project-form-tab.completed{border-color:var(--green-700)!important;color:var(--green-700)!important;background:var(--color-primary-faint)!important}
[data-theme="orange"] .project-form-tab.completed .tab-check{background:var(--green-700)!important;color:var(--white)!important}
[data-theme="orange"] .project-overview-tab-head{background:linear-gradient(135deg,var(--color-primary-faint),var(--color-primary-soft))!important}
[data-theme="orange"] .project-overview-tab span{background:var(--color-primary-soft)!important;color:var(--green-700)!important}
[data-theme="orange"] .project-overview-tab.active{background:var(--color-primary)!important;border-color:var(--color-primary)!important;color:var(--color-text-on-primary)!important}
[data-theme="orange"] .project-overview-tab.active span{background:color-mix(in srgb, var(--raw-000000) 15%, transparent)!important;color:var(--white)!important}
[data-theme="gray"] .project-overview-tab.active span{background:color-mix(in srgb, var(--raw-000000) 15%, transparent)!important;color:var(--white)!important}
[data-theme="orange"] table thead th{background:var(--color-primary-soft)!important}
[data-theme="orange"] tbody tr:nth-child(even){background:var(--color-primary-faint)!important}
[data-theme="orange"] .empty{color:var(--green-400)!important}
[data-theme="orange"] .sidebar-user{border-top-color:var(--sidebar-border)!important}
[data-theme="orange"] .sidebar-brand{border-bottom-color:var(--sidebar-border)!important}
[data-theme="orange"] .sidebar-divider{background:var(--sidebar-border)!important}
[data-theme="orange"] .nav-title{color:var(--sidebar-text-group)!important}
[data-theme="orange"] .dashboard-hero-panel{background:linear-gradient(135deg,var(--color-primary-soft),var(--white),var(--color-primary-faint))!important}
[data-theme="orange"] .drawer-head{border-bottom-color:var(--color-primary-soft)!important}




[data-theme=orange] .key-hero{background:radial-gradient(circle at top right, color-mix(in srgb, var(--raw-ff9f61) 18%, transparent), transparent 42%),linear-gradient(135deg,color-mix(in srgb,var(--color-warning-soft) 56%,var(--white) 44%) 0%,var(--white) 55%,var(--color-warning-soft) 100%);box-shadow:0 8px 24px color-mix(in srgb, var(--raw-c2410c) 6%, transparent)}
[data-theme=orange] .key-hero-eyebrow{color:var(--color-primary)}
[data-theme=orange] .key-hero-eyebrow::before{background:var(--color-primary-hover)}
[data-theme=orange] .key-chip{background:color-mix(in srgb, var(--raw-ff9f61) 12%, transparent);color:var(--color-primary);border-color:color-mix(in srgb, var(--raw-ff9f61) 25%, transparent)}
[data-theme=orange] .key-chip:hover{background:color-mix(in srgb, var(--raw-ff9f61) 18%, transparent)}
[data-theme=orange] .key-chip::before{background:var(--color-primary-hover)}
[data-theme=orange] .key-metric{background:var(--white);border-color:color-mix(in srgb, var(--raw-c2410c) 8%, transparent);box-shadow:0 4px 14px color-mix(in srgb, var(--raw-c2410c) 5%, transparent)}
[data-theme=orange] .key-metric:hover{box-shadow:0 10px 26px color-mix(in srgb, var(--raw-c2410c) 10%, transparent);border-color:color-mix(in srgb, var(--raw-ff9f61) 35%, transparent)}
[data-theme=orange] .key-metric::after{background:linear-gradient(90deg,var(--color-primary-hover),var(--color-primary))}
[data-theme=orange] .key-metric:nth-child(2)::after{background:linear-gradient(90deg,var(--color-info),var(--color-info-text))}
[data-theme=orange] .key-metric:nth-child(3)::after{background:linear-gradient(90deg,var(--color-warning),var(--color-warning))}
[data-theme=orange] .key-metric:nth-child(4)::after{background:linear-gradient(90deg,var(--color-info),var(--color-info-text))}
[data-theme=orange] .key-metric .metric-icon{background:color-mix(in srgb, var(--raw-ff9f61) 10%, transparent);color:var(--color-primary)}
[data-theme=orange] .key-metric:nth-child(2) .metric-icon{background:color-mix(in srgb, var(--raw-3b82f6) 8%, transparent);color:var(--color-info)}
[data-theme=orange] .key-metric:nth-child(3) .metric-icon{background:color-mix(in srgb, var(--raw-f59e0b) 8%, transparent);color:var(--color-warning)}
[data-theme=orange] .key-metric:nth-child(4) .metric-icon{background:color-mix(in srgb, var(--raw-8b5cf6) 8%, transparent);color:var(--color-info-text)}
[data-theme=orange] .key-project-table thead th{background:linear-gradient(180deg,color-mix(in srgb,var(--color-warning-soft) 56%,var(--white) 44%),var(--color-warning-soft))}
[data-theme=orange] .key-project-table tbody tr:hover td{background:color-mix(in srgb, var(--raw-ff9f61) 5%, transparent)}
[data-theme=orange] .key-project-table .table-actions .icon-btn:hover{background:color-mix(in srgb, var(--raw-ff9f61) 8%, transparent);color:var(--color-primary);border-color:color-mix(in srgb, var(--raw-ff9f61) 25%, transparent)}
[data-theme=orange] .key-focus-card:hover{box-shadow:0 10px 28px color-mix(in srgb, var(--raw-c2410c) 10%, transparent);border-color:color-mix(in srgb, var(--raw-ff9f61) 32%, transparent)}

[data-theme=blue] .key-hero{background:radial-gradient(circle at top right, color-mix(in srgb, var(--raw-6366f1) 18%, transparent), transparent 42%),linear-gradient(135deg,var(--color-primary-faint) 0%,var(--white) 55%,var(--color-primary-soft) 100%);box-shadow:0 8px 24px color-mix(in srgb, var(--raw-3730a3) 6%, transparent)}
[data-theme=blue] .key-hero-eyebrow{color:var(--color-primary)}
[data-theme=blue] .key-hero-eyebrow::before{background:var(--color-primary-hover)}
[data-theme=blue] .key-chip{background:color-mix(in srgb, var(--raw-6366f1) 10%, transparent);color:var(--color-primary);border-color:color-mix(in srgb, var(--raw-6366f1) 22%, transparent)}
[data-theme=blue] .key-chip:hover{background:color-mix(in srgb, var(--raw-6366f1) 16%, transparent)}
[data-theme=blue] .key-chip::before{background:var(--color-primary-hover)}
[data-theme=blue] .key-metric{background:var(--white);border-color:color-mix(in srgb, var(--raw-3730a3) 8%, transparent);box-shadow:0 4px 14px color-mix(in srgb, var(--raw-3730a3) 5%, transparent)}
[data-theme=blue] .key-metric:hover{box-shadow:0 10px 26px color-mix(in srgb, var(--raw-3730a3) 10%, transparent);border-color:color-mix(in srgb, var(--raw-6366f1) 30%, transparent)}
[data-theme=blue] .key-metric::after{background:linear-gradient(90deg,color-mix(in srgb,var(--color-primary-hover) 72%,var(--white) 28%),var(--color-primary))}
[data-theme=blue] .key-metric:nth-child(2)::after{background:linear-gradient(90deg,var(--color-info),var(--color-info-text))}
[data-theme=blue] .key-metric:nth-child(3)::after{background:linear-gradient(90deg,var(--color-warning),var(--color-warning))}
[data-theme=blue] .key-metric:nth-child(4)::after{background:linear-gradient(90deg,var(--color-info),var(--color-info-text))}
[data-theme=blue] .key-metric .metric-icon{background:color-mix(in srgb, var(--raw-6366f1) 8%, transparent);color:var(--color-primary)}
[data-theme=blue] .key-metric:nth-child(2) .metric-icon{background:color-mix(in srgb, var(--raw-3b82f6) 8%, transparent);color:var(--color-info)}
[data-theme=blue] .key-metric:nth-child(3) .metric-icon{background:color-mix(in srgb, var(--raw-f59e0b) 8%, transparent);color:var(--color-warning)}
[data-theme=blue] .key-metric:nth-child(4) .metric-icon{background:color-mix(in srgb, var(--raw-8b5cf6) 8%, transparent);color:var(--color-info-text)}
[data-theme=blue] .key-project-table thead th{background:linear-gradient(180deg,var(--color-primary-faint),var(--color-primary-soft))}
[data-theme=blue] .key-project-table tbody tr:hover td{background:color-mix(in srgb, var(--raw-6366f1) 4%, transparent)}
[data-theme=blue] .key-project-table .table-actions .icon-btn:hover{background:color-mix(in srgb, var(--raw-6366f1) 8%, transparent);color:var(--color-primary);border-color:color-mix(in srgb, var(--raw-6366f1) 22%, transparent)}
[data-theme=blue] .key-focus-card:hover{box-shadow:0 10px 28px color-mix(in srgb, var(--raw-3730a3) 10%, transparent);border-color:color-mix(in srgb, var(--raw-6366f1) 32%, transparent)}

.procurement-file-tools{
  display:flex;
  align-items:center;
  gap:8px;
  margin:12px 0 0;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--color-surface-soft);
}
.procurement-file-tools span{
  margin-right:auto;
  color:var(--text-secondary);
  font-size:13px;
  font-weight:700;
}
.procurement-file-tools.hidden{display:none}

.project-picker{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  gap:8px;
  width:100%;
  min-width:0;
  align-items:start;
  margin:2px 0 8px;
  padding:10px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--color-surface-soft);
  box-sizing:border-box;
}
.project-picker > *{
  min-width:0;
}
.project-picker input,
.project-picker select{
  min-height:34px;
  height:34px;
  width:100%;
  min-width:0;
  box-sizing:border-box;
  padding:0 10px;
  border-radius:7px;
  font-size:12px;
  background:var(--white);
}
.project-picker-hint{
  grid-column:1/-1;
  color:var(--text-secondary);
  font-size:12px;
  font-weight:500;
  line-height:1.45;
}
.field .project-picker + select,
.profile-form .project-picker + select{
  min-height:38px;
}
.po-project-field .project-picker{
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
}
.po-items-section{
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--color-surface-soft);
  padding:12px;
}
/* PR 采购明细区域 - 独立布局，不嵌套在 form-grid 中 */
.pr-items-section{
  margin:4px 0 16px;
  width:auto;
}
.pr-item-row{
  display:grid !important;
  grid-template-columns:.85fr 1.35fr 1.35fr .55fr .6fr .72fr .82fr auto !important;
  gap:8px;
  align-items:center;
  padding:8px;
  border:1px solid var(--raw-e8edf3);
  border-radius:8px;
  background:var(--white);
}
.pr-item-row .pr-item-note{
  grid-column:2 / -1;
}
.po-items-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.po-items-head strong{
  display:block;
  color:var(--text-primary);
  font-size:14px;
}
.po-items-head span{
  display:block;
  margin-top:2px;
  color:var(--text-secondary);
  font-size:12px;
}
.po-items-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.po-item-row{
  display:grid;
  grid-template-columns:.8fr 1.3fr 1.4fr .65fr .65fr .8fr .9fr auto;
  gap:8px;
  align-items:center;
  padding:8px;
  border:1px solid var(--raw-e8edf3);
  border-radius:8px;
  background:var(--white);
}
/* .pr-item-row 完整定义已移至 .po-items-section 附近（含 !important） */
.po-item-row input,
.po-item-row select{
  min-height:34px;
  height:34px;
  padding:0 9px;
  border-radius:7px;
  font-size:12px;
}
.po-item-row .po-item-note{
  grid-column:2 / -1;
}
.po-item-row input[readonly]{
  background:var(--raw-f3f6fa);
  color:var(--text-primary);
}
.po-items-total{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:6px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px dashed var(--raw-d7dee8);
  color:var(--text-secondary);
  font-size:13px;
}
.po-items-total strong{
  color:var(--text-primary);
  font-size:15px;
}
.po-total-summary{
  min-height:76px;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--color-surface-soft);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
}
.po-total-summary span{
  color:var(--text-secondary);
  font-size:13px;
  font-weight:700;
}
.po-total-summary strong{
  color:var(--primary);
  font-size:20px;
  font-weight:800;
}
.po-total-summary em{
  color:var(--text-secondary);
  font-size:12px;
  font-style:normal;
}
.attachment-control{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:58px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--white);
}
.attachment-main{
  min-width:0;
}
.attachment-main strong{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text-primary);
  font-size:14px;
}
.attachment-main em{
  display:block;
  margin-top:3px;
  color:var(--text-secondary);
  font-style:normal;
  font-size:12px;
}
.attachment-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.attachment-preview-panel{
  width:min(1180px, calc(100vw - 48px));
  max-width:1180px;
  height:calc(100vh - 56px);
  display:flex;
  flex-direction:column;
}
.attachment-preview-body{
  position:relative;
  flex:1;
  min-height:0;
  border:1px solid var(--border);
  border-radius:8px;
  overflow:hidden;
  background:var(--color-surface-soft);
}
.attachment-preview-body iframe{
display:block;
width:100%;
height:100%;
border:0;
background:var(--white);
}
.attachment-preview-toolbar{
display:flex;
align-items:center;
justify-content:flex-end;
gap:12px;
padding:10px 16px;
border-bottom:1px solid var(--border);
background:var(--white);
}
.attachment-preview-toolbar .action-link{
min-width:72px;
text-align:center;
}
.attachment-image-preview{
width:100%;
height:100%;
display:flex;
  align-items:center;
  justify-content:center;
  overflow:auto;
  background:var(--white);
  padding:18px;
}
.attachment-image-preview img{
  display:block;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  box-shadow:0 8px 24px color-mix(in srgb, var(--gray-900) 12%, transparent);
}
.attachment-preview-fallback{
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:28px;
  color:var(--text-secondary);
  text-align:center;
}
.attachment-preview-fallback strong{
  color:var(--text-primary);
  font-size:18px;
}
.attachment-preview-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-top:8px;
}
.payment-application-detail{
  padding:4px 0 12px;
}
.detail-kv-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin:12px 0;
}
.detail-kv-grid.compact{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.detail-kv-grid .span2{
  grid-column:span 2;
}
.detail-kv-grid>div{
  min-width:0;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--white);
}
.detail-kv-grid span{
  display:block;
  margin-bottom:4px;
  color:var(--text-secondary);
  font-size:12px;
}
.detail-kv-grid strong{
  color:var(--text-primary);
  font-size:14px;
  word-break:break-word;
}
.detail-kv-grid .amount-strong{
  color:var(--primary);
  font-size:18px;
}
.detail-section{
  margin-top:14px;
}
.detail-section h4{
  margin:0 0 8px;
  color:var(--text-primary);
  font-size:15px;
}
.detail-section p{
  margin:0;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--white);
  color:var(--text-secondary);
}
@media(max-width:640px){
  .attachment-control{
    align-items:flex-start;
    flex-direction:column;
  }
  .attachment-actions{
    width:100%;
    justify-content:flex-end;
  }
  .attachment-preview-panel{
    width:100vw;
    height:100vh;
  }
  .detail-kv-grid,
  .detail-kv-grid.compact{
    grid-template-columns:1fr;
  }
  .detail-kv-grid .span2{
    grid-column:auto;
  }
}
.po-item-remove:disabled{
  opacity:.45;
  cursor:not-allowed;
}
@media(max-width:860px){
  .project-picker{grid-template-columns:1fr 1fr}
  .project-picker-search,.project-picker-hint{grid-column:1/-1}
  .po-project-field .project-picker{grid-template-columns:1fr 1fr}
  .po-item-row{grid-template-columns:1fr 1fr}
  .po-item-row .po-item-note{grid-column:1/-1}
}

[data-theme="blue"] .login-screen{background:var(--raw-eef2fc)!important}
[data-theme="blue"] .login-shell{background:var(--raw-eef2fc)!important;background-color:var(--raw-eef2fc)!important}
[data-theme="blue"] .login-shell::before{background:transparent!important}
[data-theme="blue"] .login-shell::after{background:linear-gradient(142deg,var(--raw-0f1228),var(--raw-141a3a),var(--color-primary-text))!important}

/* Purchase request / PO / Vendor tables */
.purchase-request-table,.po-table,.vendor-table{table-layout:fixed;width:100%}
.purchase-request-table th,.purchase-request-table td,
.po-table th,.po-table td,
.vendor-table th,.vendor-table td{vertical-align:middle;padding:10px 8px;text-align:left}

.purchase-request-table{min-width:1120px}
.purchase-request-table th:nth-child(1),.purchase-request-table td:nth-child(1){width:44px;text-align:center}
.purchase-request-table th:nth-child(2),.purchase-request-table td:nth-child(2){width:92px;text-align:center}
.purchase-request-table:not(.has-select-col) th:nth-child(3),.purchase-request-table:not(.has-select-col) td:nth-child(3){width:190px;text-align:left}
.purchase-request-table:not(.has-select-col) th:nth-child(4),.purchase-request-table:not(.has-select-col) td:nth-child(4){width:260px;text-align:left}
.purchase-request-table:not(.has-select-col) th:nth-child(5),.purchase-request-table:not(.has-select-col) td:nth-child(5){width:120px;text-align:left}
.purchase-request-table:not(.has-select-col) th:nth-child(6),.purchase-request-table:not(.has-select-col) td:nth-child(6){width:230px;text-align:left}
.purchase-request-table:not(.has-select-col) th:nth-child(7),.purchase-request-table:not(.has-select-col) td:nth-child(7){width:160px;text-align:left}
.purchase-request-table.has-select-col{min-width:1180px}
.purchase-request-table.has-select-col th:nth-child(3),.purchase-request-table.has-select-col td:nth-child(3){width:52px;text-align:center}
.purchase-request-table.has-select-col th:nth-child(4),.purchase-request-table.has-select-col td:nth-child(4){width:190px;text-align:left}
.purchase-request-table.has-select-col th:nth-child(5),.purchase-request-table.has-select-col td:nth-child(5){width:250px;text-align:left}
.purchase-request-table.has-select-col th:nth-child(6),.purchase-request-table.has-select-col td:nth-child(6){width:120px;text-align:left}
.purchase-request-table.has-select-col th:nth-child(7),.purchase-request-table.has-select-col td:nth-child(7){width:220px;text-align:left}
.purchase-request-table.has-select-col th:nth-child(8),.purchase-request-table.has-select-col td:nth-child(8){width:150px;text-align:left}

.po-table{min-width:1400px}
.purchase-order-table:not(.has-select-col){min-width:1340px}
.purchase-order-table.has-select-col{min-width:1400px}
.purchase-order-table th:nth-child(1),.purchase-order-table td:nth-child(1){width:44px;text-align:center}
.purchase-order-table th:nth-child(2),.purchase-order-table td:nth-child(2){width:92px;text-align:center}
.purchase-order-table:not(.has-select-col) th:nth-child(3),.purchase-order-table:not(.has-select-col) td:nth-child(3){width:210px;text-align:left}
.purchase-order-table:not(.has-select-col) th:nth-child(4),.purchase-order-table:not(.has-select-col) td:nth-child(4){width:320px;text-align:left}
.purchase-order-table:not(.has-select-col) th:nth-child(5),.purchase-order-table:not(.has-select-col) td:nth-child(5){width:120px;text-align:left}
.purchase-order-table:not(.has-select-col) th:nth-child(6),.purchase-order-table:not(.has-select-col) td:nth-child(6){width:100px;text-align:left}
.purchase-order-table:not(.has-select-col) th:nth-child(7),.purchase-order-table:not(.has-select-col) td:nth-child(7){width:220px;text-align:left}
.purchase-order-table.has-select-col th:nth-child(3),.purchase-order-table.has-select-col td:nth-child(3){width:52px;text-align:center}
.purchase-order-table.has-select-col th:nth-child(4),.purchase-order-table.has-select-col td:nth-child(4){width:210px;text-align:left}
.purchase-order-table.has-select-col th:nth-child(5),.purchase-order-table.has-select-col td:nth-child(5){width:320px;text-align:left}
.purchase-order-table.has-select-col th:nth-child(6),.purchase-order-table.has-select-col td:nth-child(6){width:120px;text-align:left}
.purchase-order-table.has-select-col th:nth-child(7),.purchase-order-table.has-select-col td:nth-child(7){width:100px;text-align:left}
.purchase-order-table.has-select-col th:nth-child(8),.purchase-order-table.has-select-col td:nth-child(8){width:220px;text-align:left}
.payment-application-table{min-width:1120px}
.payment-application-table.has-select-col{min-width:1220px}
.payment-application-table th:nth-child(-n+2),
.payment-application-table td:nth-child(-n+2),
.payment-application-table.has-select-col th:nth-child(3),
.payment-application-table.has-select-col td:nth-child(3){padding-left:6px;padding-right:6px;text-align:center}
.payment-application-table th:nth-child(1),.payment-application-table td:nth-child(1){width:44px}
.payment-application-table th:nth-child(2),.payment-application-table td:nth-child(2){width:92px}
.payment-application-table:not(.has-select-col) th:nth-child(3),.payment-application-table:not(.has-select-col) td:nth-child(3){width:260px;text-align:left}
.payment-application-table:not(.has-select-col) th:nth-child(4),.payment-application-table:not(.has-select-col) td:nth-child(4){width:300px;text-align:left}
.payment-application-table:not(.has-select-col) th:nth-child(5),.payment-application-table:not(.has-select-col) td:nth-child(5){width:180px;text-align:left}
.payment-application-table:not(.has-select-col) th:nth-child(6),.payment-application-table:not(.has-select-col) td:nth-child(6){width:240px;text-align:left}
.payment-application-table.has-select-col th:nth-child(3),.payment-application-table.has-select-col td:nth-child(3){width:52px;text-align:center}
.payment-application-table.has-select-col th:nth-child(4),.payment-application-table.has-select-col td:nth-child(4){width:260px;text-align:left}
.payment-application-table.has-select-col th:nth-child(5),.payment-application-table.has-select-col td:nth-child(5){width:300px;text-align:left}
.payment-application-table.has-select-col th:nth-child(6),.payment-application-table.has-select-col td:nth-child(6){width:180px;text-align:left}
.payment-application-table.has-select-col th:nth-child(7),.payment-application-table.has-select-col td:nth-child(7){width:240px;text-align:left}
/* 付款申请表：申请金额列左对齐 */
.payment-application-table:not(.has-select-col) td:nth-child(5),
.payment-application-table:not(.has-select-col) td:nth-child(5) .num,
.payment-application-table.has-select-col td:nth-child(6),
.payment-application-table.has-select-col td:nth-child(6) .num{text-align:left}
.purchase-contract-table{min-width:1120px}
.purchase-contract-table th:nth-child(1),.purchase-contract-table td:nth-child(1){width:48px}
.purchase-contract-table th:nth-child(2),.purchase-contract-table td:nth-child(2){width:92px}
.purchase-contract-table th:nth-child(3),.purchase-contract-table td:nth-child(3){width:200px}
.purchase-contract-table th:nth-child(4),.purchase-contract-table td:nth-child(4){width:220px}
.purchase-contract-table th:nth-child(5),.purchase-contract-table td:nth-child(5){width:190px}
.purchase-contract-table th:nth-child(6),.purchase-contract-table td:nth-child(6){width:100px}

/* 入库单列表列宽控制 */
.procurement-list-table{min-width:1200px}
.procurement-list-table th:nth-child(1),.procurement-list-table td:nth-child(1){width:44px;text-align:center}
.procurement-list-table th:nth-child(2),.procurement-list-table td:nth-child(2){width:52px;text-align:center}
.procurement-list-table th:nth-child(3),.procurement-list-table td:nth-child(3){width:160px;text-align:left}
.procurement-list-table th:nth-child(4),.procurement-list-table td:nth-child(4){width:160px;text-align:left}
.procurement-list-table th:nth-child(5),.procurement-list-table td:nth-child(5){width:220px;text-align:left}
.procurement-list-table th:nth-child(6),.procurement-list-table td:nth-child(6){width:100px;text-align:center}
.procurement-list-table th:nth-child(7),.procurement-list-table td:nth-child(7){width:80px;text-align:center}
.procurement-list-table th:nth-child(8),.procurement-list-table td:nth-child(8){width:100px;text-align:center}
.procurement-list-table th:nth-child(9),.procurement-list-table td:nth-child(9){width:90px;text-align:center}
.procurement-list-table th:nth-child(10),.procurement-list-table td:nth-child(10){width:80px;text-align:center}
.procurement-list-table th:nth-child(11),.procurement-list-table td:nth-child(11){width:150px;text-align:left}

.procurement-actions{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:center;
  justify-content:flex-start;
  min-width:0;
}
.procurement-actions .action-link{
  line-height:1.35;
  white-space:nowrap;
}
.procurement-actions .action-link:not(.icon-btn){
  padding:0 2px;
}
.procurement-actions .action-link.icon-btn{
  border-radius:6px;
  background:var(--color-surface-soft);
  color:var(--primary);
}
.procurement-actions .action-link.icon-btn:active{transform:scale(0.95);}
.procurement-action-more{
  position:relative;
  display:inline-flex;
  align-items:center;
}
.procurement-action-more summary{
  list-style:none;
  cursor:pointer;
  color:var(--primary);
  font-weight:800;
  line-height:1.35;
  white-space:nowrap;
}
.procurement-action-more summary::-webkit-details-marker{
  display:none;
}
.procurement-action-more summary::after{
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  margin-left:5px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
}
.procurement-action-more[open] summary::after{
  transform:translateY(2px) rotate(225deg);
}
.procurement-action-menu{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  z-index:30;
  min-width:112px;
  padding:8px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--card-bg);
  box-shadow:0 12px 28px color-mix(in srgb, var(--gray-900) 14%, transparent);
  display:grid;
  gap:6px;
}
.procurement-action-menu .action-link{
  text-align:left;
  padding:2px 4px;
  border-radius:6px;
}
.procurement-action-menu .action-link:hover{
  background:var(--primary-light);
}
.procurement-list-table .num{
  text-align:left;
}
.procurement-list-table .tag{
  white-space:nowrap;
}
.goods-receipt-items{
  margin:0 0 16px;
  border:1px solid var(--border);
  border-radius:8px;
  overflow:hidden;
  background:var(--white);
}
.goods-receipt-items-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  background:var(--green-50);
  border-bottom:1px solid var(--border);
}
.goods-receipt-items-head strong{
  color:var(--text-primary);
  font-size:14px;
}
.goods-receipt-items-head span{
  color:var(--text-secondary);
  font-size:12px;
}
.goods-receipt-item-grid{
  display:grid;
  grid-template-columns:minmax(220px,1.8fr) 96px 92px 92px 92px;
  gap:8px;
  align-items:center;
  padding:8px 12px;
}
.goods-receipt-item-header{
  background:var(--color-surface-soft);
  color:var(--text-secondary);
  font-size:12px;
  font-weight:600;
  border-bottom:1px solid var(--border);
}
.goods-receipt-item-row{
  border-bottom:1px solid var(--color-surface-soft);
}
.goods-receipt-item-row:last-child{
  border-bottom:0;
}
.goods-receipt-item-name strong{
  display:block;
  color:var(--text-primary);
  font-size:13px;
}
.goods-receipt-item-name em{
  display:block;
  margin-top:2px;
  color:var(--text-secondary);
  font-style:normal;
  font-size:12px;
  line-height:1.35;
}
.goods-receipt-item-row input[type="number"]{
  width:100%;
  min-width:0;
  padding:7px 8px;
  border:1px solid var(--border);
  border-radius:6px;
  font-size:13px;
}
.goods-receipt-attachments-section{
  margin:0 0 16px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--color-surface-soft);
}
.goods-receipt-attachments-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.goods-receipt-attachments-head h4{
  margin:0;
  color:var(--text-primary);
  font-size:14px;
}
.goods-receipt-attachments-head p{
  margin:4px 0 0;
  color:var(--text-secondary);
  font-size:12px;
  line-height:1.4;
}
#grAttachmentInput{display:none}
.goods-receipt-attachment-picker{flex:0 0 auto;cursor:pointer}
.goods-receipt-attachment-list{display:grid;gap:6px;margin-top:10px}
.goods-receipt-attachment-item{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:7px;
  background:var(--card-bg);
}
.goods-receipt-attachment-item.is-pending{border-style:dashed}
.goods-receipt-attachment-icon{
  display:grid;
  place-items:center;
  width:34px;
  height:30px;
  flex:0 0 34px;
  border-radius:6px;
  background:var(--primary-light);
  color:var(--primary);
  font-size:10px;
  font-weight:700;
}
.goods-receipt-attachment-meta{min-width:0;flex:1}
.goods-receipt-attachment-meta strong,
.goods-receipt-attachment-meta small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.goods-receipt-attachment-meta strong{color:var(--text-primary);font-size:12px}
.goods-receipt-attachment-meta small{margin-top:2px;color:var(--text-secondary);font-size:11px}
.goods-receipt-attachment-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.goods-receipt-attachment-actions .action-link{padding:3px 5px}
.goods-receipt-attachment-empty{padding:8px 0;color:var(--text-secondary);font-size:12px}
@media (max-width:560px){
  .goods-receipt-attachments-head{align-items:flex-start;flex-direction:column}
  .goods-receipt-attachment-picker{width:100%;justify-content:center}
  .goods-receipt-attachment-actions{gap:2px}
}
.po-filter-project > .btn{
  height:38px;
  align-self:start;
  padding:0 16px;
  text-align:center;
  border-bottom:1px solid var(--border);
  font-size:14px;
}

.vendor-table{min-width:820px;border-collapse:separate;border-spacing:0}
.vendor-table thead{position:sticky;top:0;z-index:2}
.vendor-table th{background:var(--color-surface-soft);color:var(--color-text-secondary);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:12px 14px;border-bottom:2px solid var(--color-border);text-align:left}
.vendor-table td{padding:14px;border-bottom:1px solid var(--color-surface-soft);font-size:13px;color:var(--color-text-secondary);transition:background .15s;vertical-align:middle}
.vendor-table tbody tr:hover{background:var(--color-surface-soft)}
.vendor-table tbody tr:nth-child(even){background:var(--color-surface-soft)}
.vendor-table tbody tr:nth-child(even):hover{background:var(--color-surface-soft)}
.vendor-table .vendor-name{font-weight:600;color:var(--color-text)}
.vendor-table th:nth-child(1),.vendor-table td:nth-child(1){width:48px}
.vendor-table th:nth-child(2),.vendor-table td:nth-child(2){width:72px;text-align:center}
.vendor-table th:nth-child(3),.vendor-table td:nth-child(3){width:196px}
.vendor-table th:nth-child(4),.vendor-table td:nth-child(4){width:96px}
.vendor-table th:nth-child(5),.vendor-table td:nth-child(5){width:150px}
.vendor-table th:nth-child(6),.vendor-table td:nth-child(6){width:132px}
.vendor-table th:nth-child(7),.vendor-table td:nth-child(7){width:112px}
.vendor-type-cell{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start}
.vendor-action-cell{white-space:nowrap;text-align:center}
.vendor-action-cell .action-link{display:inline-flex;vertical-align:middle}
.vendor-action-cell .action-link:not(.icon-btn){margin-right:2px}

.supplier-table{table-layout:fixed;width:100%}
.supplier-table th,.supplier-table td{vertical-align:top;padding:10px 8px;text-align:left}
.supplier-table th:nth-child(1),.supplier-table td:nth-child(1){width:48px}
.supplier-table th:nth-child(2),.supplier-table td:nth-child(2){width:72px;text-align:center}
.supplier-table th:nth-child(3),.supplier-table td:nth-child(3){width:220px}
.supplier-table th:nth-child(4),.supplier-table td:nth-child(4){width:170px}
.supplier-table th:nth-child(5),.supplier-table td:nth-child(5){width:170px}
.supplier-table th:nth-child(6),.supplier-table td:nth-child(6){width:90px}
.supplier-table th:nth-child(7),.supplier-table td:nth-child(7){width:100px;text-align:center}
.supplier-table .vendor-action-cell{white-space:nowrap;text-align:center}
.supplier-table .vendor-action-cell .action-link{display:inline-flex;vertical-align:middle}
.supplier-table .vendor-action-cell .action-link:not(.icon-btn){margin-right:2px}
.procurement-dashboard-secondary{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin:0 0 24px;
}
.procurement-dashboard-secondary .card{
  padding:20px 22px;
  border:1px solid color-mix(in srgb, var(--gray-900) 6%, transparent);
  border-radius:12px;
  box-shadow:0 4px 12px color-mix(in srgb, var(--gray-900) 5%, transparent);
  transition:box-shadow .2s ease;
}
.procurement-dashboard-secondary .card:hover{
  box-shadow:0 8px 20px color-mix(in srgb, var(--gray-900) 8%, transparent);
}
.procurement-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
  padding-bottom:12px;
  border-bottom:1px solid var(--color-surface-soft);
}
.procurement-panel-head h4{
  margin:0;
  font-size:15px;
  font-weight:700;
  color:var(--text-primary);
}
.procurement-panel-head span{
  color:var(--text-tertiary);
  font-size:12px;
  text-align:right;
}
.procurement-flow-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
  align-items:stretch;
}
.procurement-flow-step{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
  padding:8px 10px;
  border:1px solid color-mix(in srgb, var(--gray-900) 6%, transparent);
  border-radius:8px;
  background:var(--color-surface-soft);
  text-align:left;
  align-items:flex-start;
  transition:background .15s ease;
}
.procurement-flow-step-green{background:color-mix(in srgb,var(--color-success-soft) 50%,var(--white) 50%);border-color:color-mix(in srgb,var(--color-success) 24%,var(--white) 76%)}
.procurement-flow-step-blue{background:color-mix(in srgb,var(--color-info-soft) 55%,var(--white) 45%);border-color:var(--raw-bfdbfe)}
.procurement-flow-step-orange{background:color-mix(in srgb,var(--color-warning-soft) 56%,var(--white) 44%);border-color:color-mix(in srgb,var(--color-warning) 26%,var(--white) 74%)}
.procurement-flow-step-red{background:color-mix(in srgb,var(--color-danger-soft) 52%,var(--white) 48%);border-color:color-mix(in srgb,var(--color-danger) 26%,var(--white) 74%)}
.procurement-flow-step-gray{background:var(--color-surface-soft);border-color:var(--color-border)}
.procurement-flow-step-label{
  font-size:11px;
  font-weight:700;
  color:var(--text-secondary);
  white-space:nowrap;
  text-align:left;
}
.procurement-flow-step-main{
  min-width:0;
  font-size:13px;
  font-weight:700;
  line-height:1.35;
  color:var(--text-primary);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:left;
}
.procurement-flow-step-sub{
  min-width:0;
  font-size:11px;
  line-height:1.3;
  color:var(--text-tertiary);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:left;
}
.procurement-flow-step-link{
  display:block;
  width:100%;
  padding:0;
  text-align:left;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  justify-content:flex-start;
  text-align:left;
}
#procurementFlowTable{table-layout:fixed;width:100%;border-collapse:separate;border-spacing:0}
#procurementFlowTable th{
  background:var(--color-surface-soft);
  color:var(--color-text-secondary);
  font-weight:600;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.04em;
  padding:10px 14px;
  border-bottom:2px solid var(--color-border);
  position:sticky;
  top:0;
  z-index:1;
}
#procurementFlowTable td{
  padding:12px 14px;
  border-bottom:1px solid var(--color-surface-soft);
  font-size:13px;
  transition:background .15s;
}
#procurementFlowTable tbody tr:hover{background:color-mix(in srgb, var(--green-500) 4%, transparent)}
#procurementFlowTable th:nth-child(1),#procurementFlowTable td:nth-child(1){width:26%}
#procurementFlowTable th:nth-child(2),#procurementFlowTable td:nth-child(2){width:54%}
#procurementFlowTable th:nth-child(3),#procurementFlowTable td:nth-child(3){width:20%}
#procurementFlowTable td:nth-child(3){text-align:left}
.procurement-overdue-table{table-layout:fixed;width:100%;border-collapse:separate;border-spacing:0}
.procurement-overdue-table th{
  background:var(--color-surface-soft);
  color:var(--color-text-secondary);
  font-weight:600;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.04em;
  padding:10px 14px;
  border-bottom:2px solid var(--color-border);
  position:sticky;
  top:0;
  z-index:1;
}
.procurement-overdue-table td{
  padding:12px 14px;
  border-bottom:1px solid var(--color-surface-soft);
  font-size:13px;
  transition:background .15s;
}
.procurement-overdue-table tbody tr:hover{background:color-mix(in srgb, var(--raw-ef4444) 4%, transparent)}
.procurement-overdue-table th:nth-child(1),.procurement-overdue-table td:nth-child(1){width:48px}
.procurement-overdue-table th:nth-child(2),.procurement-overdue-table td:nth-child(2){width:64px;text-align:center}
.procurement-overdue-table th:nth-child(3),.procurement-overdue-table td:nth-child(3){width:34%}
.procurement-overdue-table th:nth-child(4),.procurement-overdue-table td:nth-child(4){width:28%}
.procurement-overdue-table th:nth-child(5),.procurement-overdue-table td:nth-child(5){width:28%;text-align:left}
.procurement-overdue-table th,.procurement-overdue-table td{vertical-align:top}
.procurement-overdue-table .action-link:not(.icon-btn){white-space:nowrap}

/* ===== 分页控件 ===== */
.pagination{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:10px 0;font-size:13px;color:var(--color-text-secondary)}
.pagination .page-info{white-space:nowrap}
.pagination .page-btns{display:flex;flex-wrap:wrap;gap:4px}
.pagination .page-btn{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 8px;border:1px solid var(--color-border);border-radius:6px;background:var(--white);color:var(--color-text-secondary);font-size:13px;cursor:pointer;transition:all .15s}
.pagination .page-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}
.pagination .page-btn.active{background:var(--color-primary);border-color:var(--color-primary);color:var(--white)}
.pagination .page-btn:disabled{opacity:.4;cursor:not-allowed}
.pagination .page-ellipsis{display:inline-flex;align-items:center;width:32px;height:32px;justify-content:center;color:var(--color-text-muted);font-size:14px}
.pagination .page-jump{display:flex;align-items:center;gap:6px;margin-left:8px}
.pagination .page-jump-input{width:56px;height:32px;padding:0 8px;border:1px solid var(--color-border);border-radius:6px;font-size:13px;text-align:center}
.pagination .page-jump-input:focus{border-color:var(--color-primary);outline:none}
.pagination .page-jump-btn{height:32px;padding:0 12px;border:1px solid var(--color-border);border-radius:6px;background:var(--white);color:var(--color-text-secondary);font-size:13px;cursor:pointer}
.pagination .page-jump-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}

/* File library table */
#filelibrary .file-library-table{table-layout:fixed;width:100%;min-width:0}
#filelibrary .file-library-table th,#filelibrary .file-library-table td{vertical-align:middle;padding:5px 6px;font-size:12px;line-height:1.35}
#filelibrary .file-library-table tbody tr{height:auto}
#filelibrary .file-library-table th:nth-child(1),#filelibrary .file-library-table td:nth-child(1){width:34px}
#filelibrary .file-library-table th:nth-child(2),#filelibrary .file-library-table td:nth-child(2){width:48px}
#filelibrary .file-library-table th:nth-child(3),#filelibrary .file-library-table td:nth-child(3){width:260px}
#filelibrary .file-library-table th:nth-child(4),#filelibrary .file-library-table td:nth-child(4){width:150px}
#filelibrary .file-library-table th:nth-child(5),#filelibrary .file-library-table td:nth-child(5){width:90px}
#filelibrary .file-library-table th:nth-child(6),#filelibrary .file-library-table td:nth-child(6){width:52px}
#filelibrary .file-library-table th:nth-child(7),#filelibrary .file-library-table td:nth-child(7){width:64px}
#filelibrary .file-library-table th:nth-child(8),#filelibrary .file-library-table td:nth-child(8){width:96px}

/* Unified dropdown system */
:root{
  --crm-select-height:42px;
  --crm-select-radius:10px;
  --crm-select-border:var(--color-border,#dbe5df);
  --crm-select-bg:#fff;
  --crm-select-text:var(--color-text,#10251c);
  --crm-select-muted:var(--color-text-secondary,#64746b);
  --crm-select-focus:var(--ui-accent,var(--color-primary,#1f8f5f));
  --crm-select-focus-ring:color-mix(in srgb,var(--ui-accent,var(--color-primary,#1f8f5f)) 16%,transparent);
  --crm-select-hover-bg:color-mix(in srgb,var(--color-primary-soft,#eff6ff) 42%,#fff 58%);
  --crm-select-active-bg:color-mix(in srgb,var(--color-primary-soft,#eff6ff) 70%,#fff 30%);
}
select,
.field select,
.field-lite select,
.filters select,
.form-grid select,
.section-edit-form select,
.profile-form select,
.sales-invoice-field select,
.project-picker select,
#checkin .filter-item select,
#checkinModal select{
  width:100%;
  min-width:0;
  min-height:var(--crm-select-height);
  padding:0 38px 0 12px;
  border:1px solid var(--crm-select-border);
  border-radius:var(--crm-select-radius);
  background-color:var(--crm-select-bg);
  background-image:linear-gradient(45deg,transparent 50%,var(--crm-select-muted) 50%),linear-gradient(135deg,var(--crm-select-muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) calc(50% - 2px),calc(100% - 13px) calc(50% - 2px);
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  color:var(--crm-select-text);
  font-size:14px;
  line-height:1.2;
  box-sizing:border-box;
  appearance:none;
  -webkit-appearance:none;
  transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
select:hover,
.field select:hover,
.field-lite select:hover,
.filters select:hover,
.form-grid select:hover,
.section-edit-form select:hover,
.profile-form select:hover,
.sales-invoice-field select:hover,
.project-picker select:hover,
#checkin .filter-item select:hover,
#checkinModal select:hover{
  border-color:color-mix(in srgb,var(--crm-select-focus) 24%,var(--crm-select-border));
}
select:focus,
.field select:focus,
.field-lite select:focus,
.filters select:focus,
.form-grid select:focus,
.section-edit-form select:focus,
.profile-form select:focus,
.sales-invoice-field select:focus,
.project-picker select:focus,
#checkin .filter-item select:focus,
#checkinModal select:focus{
  outline:none;
  border-color:var(--crm-select-focus);
  box-shadow:0 0 0 3px var(--crm-select-focus-ring);
}
.search-select{position:relative;min-width:0}
.field .search-select,.form-grid .field .search-select{width:100%;min-width:0;min-height:42px;display:flex;flex-direction:column}
.search-select-input,
.project-picker input,
.checkin-project-picker .picker-search-input,
.field-lite input{
  width:100%;
  min-width:0;
  min-height:var(--crm-select-height);
  padding:0 38px 0 12px;
  border:1px solid var(--crm-select-border);
  border-radius:var(--crm-select-radius);
  background:var(--crm-select-bg);
  color:var(--crm-select-text);
  font-size:14px;
  box-sizing:border-box;
  transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.search-select-input:focus,
.project-picker input:focus,
.checkin-project-picker .picker-search-input:focus,
.field-lite input:focus{
  outline:none;
  border-color:var(--crm-select-focus);
  box-shadow:0 0 0 3px var(--crm-select-focus-ring);
}
.search-select-dropdown{position:absolute;top:calc(100% + 6px);left:0;right:0;max-height:300px;overflow-y:auto;background:var(--white);border:1px solid var(--crm-select-border);border-radius:12px;margin-top:0;z-index:1000;box-shadow:0 14px 32px color-mix(in srgb, var(--gray-900) 12%, transparent)}
.search-select-dropdown .search-select-item{padding:10px 12px;cursor:pointer;font-size:13px;color:var(--color-text-secondary);border-bottom:1px solid var(--color-surface-soft);background:var(--white);transition:background-color .15s ease,color .15s ease}
.search-select-dropdown .search-select-item:hover{background:var(--crm-select-hover-bg);color:var(--crm-select-text)}
.search-select-dropdown .search-select-item.active{background:var(--crm-select-active-bg);color:var(--crm-select-text)}
.search-select-dropdown .search-select-empty{padding:12px;color:var(--color-text-muted);font-size:13px;text-align:center}
.search-select-dropdown .search-select-highlight{background:var(--raw-fef08a);padding:0 1px;border-radius:2px}
.project-picker input,
.project-picker select,
.checkin-project-picker .picker-search-input,
.field-lite input,
.field-lite select{
  min-height:40px;
}

/* ═══════════════════════════════════════════
   Theme fixes — override hardcoded green colors
   ═══════════════════════════════════════════ */

/* Blue theme missing overrides */
[data-theme="blue"] .stat-positive{color:color-mix(in srgb,var(--color-primary-hover) 72%,var(--white) 28%)}
[data-theme="blue"] .bullet-track .range.good{background:var(--color-primary-hover)}
[data-theme="blue"] .bullet-track span{background:linear-gradient(90deg,var(--primary),var(--color-primary-hover))}
[data-theme="blue"] .pagination .page-btn:hover{border-color:var(--color-primary-hover);color:var(--color-primary-hover)}
[data-theme="blue"] .pagination .page-btn.active{background:var(--color-primary);border-color:var(--color-primary)}
[data-theme="blue"] .pagination .page-jump-input:focus{border-color:var(--color-primary-hover)}
[data-theme="blue"] .pagination .page-jump-btn:hover{border-color:var(--color-primary-hover);color:var(--color-primary-hover)}

/* Gray theme missing overrides */
[data-theme="gray"] .stat-positive{color:var(--color-text-secondary)}
[data-theme="gray"] .bullet-status.good{background:var(--gray-100);color:var(--color-text-secondary)}
[data-theme="gray"] .bullet-track .range.good{background:var(--color-text-secondary)}
[data-theme="gray"] .bullet-track span{background:linear-gradient(90deg,var(--primary),var(--color-text-secondary))}
[data-theme="gray"] .pagination .page-btn:hover{border-color:var(--color-text-secondary);color:var(--color-text-secondary)}
[data-theme="gray"] .pagination .page-btn.active{background:var(--color-text-secondary);border-color:var(--color-text-secondary)}
[data-theme="gray"] .pagination .page-jump-input:focus{border-color:var(--color-text-secondary)}
[data-theme="gray"] .pagination .page-jump-btn:hover{border-color:var(--color-text-secondary);color:var(--color-text-secondary)}

/* Gray theme — login page overrides */
[data-theme="gray"] .login-cloud-logo::before,
[data-theme="gray"] .login-cloud-logo::after,
[data-theme="gray"] .login-cloud-logo span{border-color:var(--color-text-secondary)!important}
[data-theme="gray"] .login-options input{accent-color:var(--color-text-secondary)!important}
[data-theme="gray"] .login-options button{color:var(--color-text-secondary)!important}
[data-theme="gray"] .forgot-pw{color:var(--color-text-secondary)!important}
[data-theme="gray"] .forgot-pw:hover{color:var(--color-text-secondary)!important}
[data-theme="gray"] .login-trial{border-color:var(--gray-600)!important;color:var(--color-text-secondary)!important}

/* Search dropdown hover/active — theme-aware */

/* ═════════════════════════════════════════
   Gray theme — responsive overrides
   Mobile sidebar & root vars fix
   ═════════════════════════════════════════ */
@media(max-width:992px){
  [data-theme="gray"] { --sidebar-w:70px; }
  [data-theme="gray"] aside{width:var(--sidebar-w);padding:0}
  [data-theme="gray"] .sidebar-brand{padding:var(--sp-md);justify-content:center}
  [data-theme="gray"] .sidebar-brand-text{display:none}
  [data-theme="gray"] .sidebar-user{padding:var(--sp-md);justify-content:center}
  [data-theme="gray"] .sidebar-user-info{display:none}
  [data-theme="gray"] .sidebar-user-email{display:none}
  [data-theme="gray"] .sidebar-avatar{width:36px;height:36px;font-size:16px}
  [data-theme="gray"] .sidebar-divider{margin:0 var(--sp-sm)}
  [data-theme="gray"] .nav-title{display:none}
  [data-theme="gray"] .nav button{justify-content:center;padding:12px 0;font-size:0;gap:0}
  [data-theme="gray"] .nav button::before{display:none}
  [data-theme="gray"] .nav button.active{background:var(--sidebar-active-bg)}
  [data-theme="gray"] .nav small{display:none}
}

@media(max-width:768px){
  [data-theme="gray"] { --sidebar-w:0; }
  [data-theme="gray"] .app{grid-template-columns:1fr!important;width:100%!important;max-width:100vw!important}
  [data-theme="gray"] aside{
    position:fixed!important;left:0;top:0;
    transform:translateX(-100%);
    width:280px;height:100vh;
    z-index:150;
    transition:transform var(--smooth);
  }
  [data-theme="gray"] aside.open{transform:translateX(0)}
  [data-theme="gray"] aside.open .sidebar-brand-text{display:block!important}
  [data-theme="gray"] aside.open .sidebar-user-info{display:block!important}
  [data-theme="gray"] aside.open .sidebar-user-email{display:block!important}
  [data-theme="gray"] aside.open .nav-title{display:flex!important}
  [data-theme="gray"] aside.open .sidebar-brand{padding:var(--sp-lg)!important;justify-content:flex-start!important}
  [data-theme="gray"] aside.open .sidebar-user{padding:var(--sp-lg)!important;justify-content:flex-start!important}
  [data-theme="gray"] aside.open .sidebar-avatar{width:40px!important;height:40px!important;font-size:18px!important}
  .nav button{height:48px;font-size:14px;padding:0 16px}
  .nav-title{height:48px;font-size:14px}
  [data-theme="gray"] .nav{display:flex;flex-direction:column}
  [data-theme="gray"] .nav button{font-size:13px!important;gap:10px!important;justify-content:flex-start!important;padding:10px var(--sp-lg)!important;text-align:left!important}
  [data-theme="gray"] .nav small{display:block!important;font-size:11px!important}
}

/* === 项目详情标签页 === */
.project-detail-panel {
  width: min(1200px, calc(100vw - 24px));
  max-width: 1200px;
}

.project-drawer-switch{
  display:flex;
  gap:8px;
  padding:10px 18px 0;
  border-bottom:1px solid var(--card-border);
  background:var(--card-bg);
}

.project-drawer-tab{
  min-width:110px;
  border:1px solid transparent;
  border-bottom:none;
  border-radius:8px 8px 0 0;
  padding:10px 18px;
  background:transparent;
  color:var(--text-secondary);
  font-size:14px;
  font-weight:700;
  cursor:pointer;
}

.project-drawer-tab:hover{
  background:var(--green-50);
  color:var(--text-primary);
}

.project-drawer-tab.active{
  background:var(--green-50);
  color:var(--primary);
  border-color:var(--card-border);
  box-shadow:inset 0 -2px 0 var(--primary);
}

.detail-tabs {
  display: flex;
  gap: 4px;
  margin-left: 16px;
}

.detail-tab {
  padding: 6px 16px;
  border: none;
  background: color-mix(in srgb, var(--white) 15%, transparent);
  color: color-mix(in srgb, var(--white) 70%, transparent);
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s;
}

.detail-tab:hover {
  background: color-mix(in srgb, var(--white) 25%, transparent);
  color: var(--white);
}

.detail-tab.active {
  background: var(--card-bg);
  color: var(--primary);
  font-weight: 600;
}

.detail-tab-content {
  display: none;
  overflow-y: auto;
  flex: 1;
}

.detail-tab-content.active {
  display: block;
}

.drawer-panel.project-detail-panel {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}

.project-detail-panel .drawer-head {
  flex-shrink: 0;
}

.project-detail-panel .drawer-subtitle {
  flex-shrink: 0;
}

/* === 项目全览子标签 === */
.detail-sub-tab {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--raw-666);
  padding: 8px 16px;
}
.detail-sub-tab:hover {
  color: var(--color-primary-text);
}
.detail-sub-tab.active {
  border-bottom: 2px solid var(--color-primary-text) !important;
  font-weight: 600;
  color: var(--color-primary-text) !important;
  background: none !important;
}

/* === Section 内联编辑模式 === */
.section-edit-btn {
  font-size: 14px;
  font-weight: 500;
  padding: 6px 16px;
  margin-left: 12px;
  vertical-align: middle;
  background: var(--color-success);
  color: var(--white);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.section-edit-btn:hover {
  background: var(--raw-15803d);
  opacity: 1;
}

[data-theme=blue] .section-edit-btn{background:var(--color-primary)!important}
[data-theme=blue] .section-edit-btn:hover{background:var(--color-primary-hover)!important}

[data-theme=orange] .section-edit-btn{background:var(--color-primary)!important;color:var(--color-text-on-primary)!important}
[data-theme=orange] .section-edit-btn:hover{background:var(--green-600)!important}

.overview-section.editing {
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 16px;
  margin: -8px;
}

.overview-section.editing h4 {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}

.editing-badge {
  font-size: 12px;
  font-weight: normal;
  color: var(--color-info);
  background: color-mix(in srgb,var(--color-info-soft) 55%,var(--white) 45%);
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 8px;
}

.section-edit-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.section-edit-form .form-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 16px;
  min-width: 0;
  align-items:start;
}

.section-edit-form .form-row.full {
  grid-template-columns: 1fr;
}

.section-edit-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  box-sizing:border-box;
}

.section-edit-form label span {
  font-size: 13px;
  color: var(--color-text-secondary);
  font-weight: 500;
}

.section-edit-form input,
.section-edit-form select,
.section-edit-form textarea {
  min-width: 0;
  width:100%;
  box-sizing:border-box;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.2s;
}

.section-edit-form input:focus,
.section-edit-form select:focus,
.section-edit-form textarea:focus {
  outline: none;
  border-color: var(--color-info);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--raw-2563eb) 10%, transparent);
}

.section-edit-form input.readonly {
  background: var(--color-surface-soft);
  color: var(--color-text-secondary);
  cursor: not-allowed;
}

.section-edit-form textarea {
  resize: vertical;
  min-height: 80px;
}

.section-edit-form .form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

/* ===== 付款信息列表（PO详情页） ===== */
.payment-pa-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--color-surface-soft);
  font-size: 13px;
}
.payment-pa-item:last-child {
  border-bottom: none;
}
.payment-pa-item.pa-draft {
  background: color-mix(in srgb,var(--color-warning-soft) 48%,var(--white) 52%);
  border-radius: 4px;
}
.pa-no {
  font-weight: 600;
  color: var(--color-text-secondary);
  min-width: 180px;
}
.pa-amount {
  font-weight: 600;
  color: var(--color-success);
  min-width: 90px;
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.pa-status {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  min-width: 60px;
  text-align: center;
}
.pa-status.草稿 { background:var(--raw-fef3c7); color:var(--color-warning-text); }
.pa-status.已驳回 { background:var(--color-danger-soft); color:var(--color-danger-text); }
.pa-status.待财务审批 { background:var(--color-info-soft); color:var(--color-info-text); }
.pa-status.待总经理审批 { background:var(--color-primary-soft); color:var(--color-primary-hover); }
.pa-status.已审批 { background:var(--raw-d1fae5); color:var(--color-success-text); }
.pa-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
  align-items: center;
}
.btn-primary-sm {
  background: var(--color-success);
  color: var(--white);
  border: none;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary-sm:hover { background: var(--raw-15803d); }

/* ===== 付款申请 - 历史付款记录 ===== */
.pa-history-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pa-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 13px;
}
.pa-history-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pa-history-no {
  color: var(--color-text-secondary);
  font-size: 13px;
}
.pa-history-status {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.pa-history-status.已审批 { background:var(--raw-d1fae5); color:var(--color-success-text); }
.pa-history-status.待财务审批 { background:var(--color-info-soft); color:var(--color-info-text); }
.pa-history-status.待总经理审批 { background:var(--color-primary-soft); color:var(--color-primary-hover); }
.pa-history-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pa-history-amount {
  color: var(--color-success);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.pa-history-paid {
  color: var(--color-text-secondary);
  font-size: 12px;
}
.pa-history-date {
  color: var(--color-text-muted);
  font-size: 12px;
  white-space: nowrap;
}

/* ==================== 外勤打卡页面样式 ==================== */
.status-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}
.status-tag.status-success {
  background: var(--color-success-soft);
  color: var(--color-success-text);
}
.status-tag.status-error {
  background: var(--color-danger-soft);
  color: var(--color-danger-text);
}
.btn-link {
  background: none;
  border: none;
  color: var(--color-info);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 6px;
}
.btn-link:hover {
  text-decoration: underline;
}
.checkin-detail-modal .modal-content {
  max-width: 920px;
}
.checkin-detail-info {
  display: grid;
  grid-template-columns: minmax(96px,120px) minmax(0,1fr);
  gap: 12px 16px;
  padding: 16px 0;
  align-items:start;
}
.checkin-detail-info > *{
  min-width:0;
  box-sizing:border-box;
}
.checkin-detail-info .label {
  color: var(--color-text-secondary);
  font-size: 13px;
}
.checkin-detail-info .value {
  color: var(--color-text);
  font-size: 13px;
  word-break: break-all;
  min-width:0;
}
.checkin-detail-location {
  grid-column: 1 / -1;
  min-width:0;
  padding: 12px;
  background: var(--color-surface-soft);
  border-radius: 6px;
  margin-top: 8px;
}
.checkin-detail-photos {
  grid-column: 1 / -1;
  min-width:0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.checkin-detail-photos img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
}
/* 关联项目下拉 — 扩大可点击区域和显示区域 */
.checkin-project-picker{position:relative;}
.checkin-project-picker .picker-search-input{
  font-size:14px!important;
  padding:10px 12px!important;
  border:2px solid var(--gray-300)!important;
  border-radius:8px!important;
  width:100%!important;
}
.checkin-project-picker .picker-search-input:focus{
  border-color:var(--primary)!important;
  outline:none!important;
}
.checkin-project-picker .picker-results{
  position:absolute!important;
  top:100%!important;
  left:0!important;
  right:0!important;
  top:calc(100% + 4px)!important;
  z-index:10001!important;
  max-height:280px!important;
  overflow-y:auto!important;
  background:var(--white)!important;
  border:1px solid var(--gray-200)!important;
  border-radius:8px!important;
  margin-top:4px!important;
  box-shadow:0 10px 25px -5px color-mix(in srgb, var(--raw-000000) 10%, transparent)!important;
}
.checkin-project-picker .picker-item{
  padding:12px 14px!important;
  align-items:flex-start!important;
  min-height:44px!important;
  cursor:pointer!important;
  border-bottom:1px solid var(--gray-100)!important;
}
.checkin-project-picker .picker-item:hover{background:color-mix(in srgb, var(--raw-3b82f6) 6%, transparent)!important;}
.checkin-project-picker .picker-item.selected{background:color-mix(in srgb, var(--raw-3b82f6) 10%, transparent)!important;}
.checkin-project-option{min-width:0;line-height:1.4;}
.checkin-project-main{font-size:13px!important;font-weight:600;color:var(--gray-800);}
.checkin-project-sub{margin-top:2px;font-size:12px;color:var(--gray-500);word-break:break-word;}
/* 关联项目两列布局 */
.checkin-link-section{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:24px;
  margin-top:16px;
  padding:24px;
  background:var(--gray-50);
  border-radius:16px;
  border:1px solid var(--raw-e2e8f0);
  align-items:stretch;
  min-height:200px;
}
.checkin-link-left{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding-top:4px;
  min-height:160px;
}
.checkin-link-title{
  font-size:16px;
  font-weight:700;
  color:var(--raw-1e293b);
  line-height:1.4;
  margin-bottom:2px;
}
.checkin-link-desc{
  font-size:13px;
  color:var(--gray-500);
  line-height:1.6;
  flex:1;
}
.checkin-link-left #checkinLinkBtn{
  margin-top:auto;
  padding:12px 20px;
  font-size:14px;
  font-weight:600;
  border-radius:10px;
  min-height:44px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.checkin-link-right{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}
.checkin-link-picker-label{
  font-size:13px;
  font-weight:600;
  color:var(--gray-700);
}
.checkin-link-hint{
  font-size:12px;
  color:var(--gray-400);
  margin-top:4px;
}
.checkin-link-right #checkinProjectPicker .picker-search-input{
  min-height:48px!important;
  font-size:14px!important;
}
.checkin-link-right .checkin-project-picker .picker-results{
  max-height:320px!important;
  width:100%;
  min-width:100%;
}
.checkin-detail-shell{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(360px,420px);
  gap:24px;
  align-items:start;
}
.checkin-detail-main,.checkin-detail-side{
  min-width:0;
  display:grid;
  gap:18px;
  align-content:start;
  background:transparent;
}
.checkin-detail-side{
  padding:0;
  background:var(--white);
  border-radius:20px;
}
.checkin-detail-hero,
.checkin-detail-card,
.checkin-side-card{
  border:1px solid color-mix(in srgb,var(--color-primary,var(--raw-2563eb)) 14%,var(--color-border,var(--raw-dbe5df)));
  border-radius:18px;
  background:linear-gradient(180deg,var(--white) 0%,color-mix(in srgb,var(--color-primary-soft,var(--raw-eff6ff)) 18%,var(--white) 82%) 100%);
  box-shadow:0 16px 42px color-mix(in srgb, var(--gray-900) 8%, transparent);
  overflow:hidden;
}
.checkin-detail-hero{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:22px 24px;
}
.checkin-detail-hero-copy{min-width:0;}
.checkin-detail-hero-copy h4{margin:6px 0 0;color:var(--color-text);font-size:24px;font-weight:900;line-height:1.2;}
.checkin-detail-hero-copy p{margin:8px 0 0;color:var(--color-text-secondary);font-size:13px;line-height:1.6;}
.checkin-detail-hero-badges{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;min-width:0;}
.checkin-detail-badge{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:999px;background:color-mix(in srgb,var(--color-primary,var(--raw-2563eb)) 9%,var(--white) 91%);color:var(--color-primary,var(--raw-2563eb));font-size:12px;font-weight:800;white-space:nowrap;}
.checkin-detail-card{padding:22px 24px;}
.checkin-detail-card-head,.checkin-side-card-head{display:grid;gap:6px;margin-bottom:14px;min-width:0;}
.checkin-detail-card-head h4,.checkin-side-card-head h4{margin:0;color:var(--color-text);font-size:16px;font-weight:850;}
.checkin-detail-card-head p,.checkin-side-card-head p{margin:0;color:var(--color-text-secondary);font-size:12px;line-height:1.6;}
.checkin-side-card{padding:20px;position:relative;z-index:1;}
.checkin-side-eyebrow{display:inline-flex;align-items:center;min-height:24px;width:max-content;padding:0 10px;border-radius:999px;background:color-mix(in srgb,var(--color-accent,var(--raw-059669)) 10%,var(--white) 90%);color:var(--color-accent,var(--raw-059669));font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;}
.checkin-photo-card .checkin-detail-photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.checkin-photo-card .checkin-detail-photos img{width:100%;max-width:none!important;max-height:none!important;aspect-ratio:4 / 3;object-fit:cover;border-radius:16px!important;box-shadow:0 8px 20px color-mix(in srgb, var(--gray-900) 10%, transparent);}
.checkin-photo-empty{display:grid;place-items:center;min-height:120px;padding:16px;border:1px dashed var(--color-border,var(--raw-dbe5df));border-radius:14px;background:color-mix(in srgb, var(--white) 72%, transparent);color:var(--color-text-muted);font-size:12px;text-align:center;}
.checkin-link-panel{display:grid;gap:12px;min-width:0;padding:14px;border:1px solid color-mix(in srgb,var(--color-primary,var(--raw-2563eb)) 10%,var(--color-border,var(--raw-dbe5df)));border-radius:16px;background:color-mix(in srgb, var(--white) 72%, transparent);}
.checkin-link-picker-label{font-size:13px;font-weight:800;color:var(--color-text);}
.checkin-link-panel #checkinProjectPicker,
.checkin-link-panel #checkinProjectPicker .checkin-project-picker{width:100%;min-width:0;}
.checkin-link-panel #checkinProjectPicker .checkin-project-picker{display:grid;gap:10px;}
.checkin-link-panel #checkinProjectPicker .picker-search-input{min-height:52px!important;padding:12px 14px!important;border-radius:14px!important;font-size:14px!important;box-sizing:border-box!important;}
.checkin-link-panel #checkinProjectPicker .picker-selected{display:none!important;}
.checkin-link-panel #checkinProjectPicker .picker-results{max-height:320px!important;border-radius:14px!important;}
.checkin-link-actionbar{display:grid;grid-template-columns:minmax(0,1fr) 132px;gap:12px;align-items:center;padding:12px 14px;border:1px solid color-mix(in srgb,var(--color-primary,var(--raw-2563eb)) 12%,var(--color-border,var(--raw-dbe5df)));border-radius:14px;background:linear-gradient(180deg,color-mix(in srgb, var(--white) 98%, transparent),color-mix(in srgb,var(--color-primary-soft,var(--raw-eff6ff)) 18%,var(--white) 82%));box-shadow:0 8px 18px color-mix(in srgb, var(--gray-900) 5%, transparent);position:static;z-index:2;}
.checkin-link-selection{min-width:0;font-size:12px;line-height:1.6;color:var(--color-text-secondary);font-weight:700;padding-right:4px;word-break:break-word;}
.checkin-link-selection.is-selected{color:var(--color-primary,var(--raw-2563eb));}
.checkin-link-panel #checkinLinkBtn{min-height:44px;width:100%;margin-top:0;box-shadow:0 10px 20px color-mix(in srgb,var(--color-primary,var(--raw-2563eb)) 22%,transparent);}
.checkin-link-panel #checkinLinkBtn:disabled{opacity:.56;cursor:not-allowed;box-shadow:none;}
.checkin-linked-project{display:grid;gap:8px;padding:16px 18px;border:1px solid color-mix(in srgb,var(--color-primary,var(--raw-2563eb)) 14%,var(--color-border,var(--raw-dbe5df)));border-radius:16px;background:color-mix(in srgb, var(--white) 82%, transparent);min-width:0;box-shadow:inset 0 1px 0 color-mix(in srgb, var(--white) 50%, transparent);}
.checkin-linked-project-link{display:inline-flex;align-items:center;justify-content:flex-start;width:max-content;max-width:100%;padding:0;border:none;background:transparent;color:var(--color-primary,var(--raw-2563eb));font-size:15px;font-weight:800;line-height:1.4;cursor:pointer;text-decoration:underline;text-underline-offset:3px;word-break:break-word;}
.checkin-linked-project-link:hover{color:var(--color-primary-hover,var(--raw-1d4ed8));}
.checkin-linked-project strong{color:var(--color-primary,var(--raw-2563eb));font-size:15px;line-height:1.4;}
.checkin-linked-project span{color:var(--color-text);font-size:13px;font-weight:700;word-break:break-word;}
.checkin-linked-project em{color:var(--color-text-secondary);font-size:12px;line-height:1.6;font-style:normal;word-break:break-word;}
.checkin-linked-project-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px;}
.checkin-linked-project-action{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 14px;border-radius:999px;border:1px solid color-mix(in srgb,var(--color-primary,var(--raw-2563eb)) 24%,var(--color-border,var(--raw-dbe5df)));background:color-mix(in srgb,var(--color-primary-soft,var(--raw-eff6ff)) 42%,var(--white) 58%);color:var(--color-primary,var(--raw-2563eb));font-size:12px;font-weight:800;cursor:pointer;transition:all .2s ease;}
.checkin-linked-project-action:hover{background:color-mix(in srgb,var(--color-primary,var(--raw-2563eb)) 10%,var(--white) 90%);border-color:var(--color-primary,var(--raw-2563eb));}
.checkin-linked-project-action.secondary{background:var(--white);color:var(--color-text-secondary);border-color:var(--color-border,var(--raw-dbe5df));}
.checkin-linked-project-action.secondary:hover{color:var(--color-primary,var(--raw-2563eb));border-color:color-mix(in srgb,var(--color-primary,var(--raw-2563eb)) 24%,var(--color-border,var(--raw-dbe5df)));}
@media (max-width:980px){
  .checkin-detail-shell{grid-template-columns:1fr;}
  .checkin-detail-side{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:720px){
  .checkin-detail-shell{gap:14px;}
  .checkin-detail-side{grid-template-columns:1fr;}
  .checkin-detail-hero{display:grid;gap:12px;padding:16px;}
  .checkin-detail-hero-copy h4{font-size:20px;}
  .checkin-detail-card,.checkin-side-card{padding:16px;}
  .checkin-photo-card .checkin-detail-photos{grid-template-columns:repeat(2,minmax(0,1fr));}
  .checkin-link-actionbar{grid-template-columns:1fr;position:static;padding:12px;}
}

/* 项目全览 - 打卡时间线 */
.project-checkin-timeline {
  display:flex;
  flex-direction:column;
  gap:0;
}
.checkin-timeline-item {
  display:flex;
  gap:12px;
  padding:10px 0;
  border-bottom:1px dashed var(--color-border);
}
.checkin-timeline-item:last-child { border-bottom:none; }
.checkin-timeline-dot {
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--primary);
  margin-top:6px;
  flex-shrink:0;
}
.checkin-timeline-content { flex:1; }
.checkin-timeline-time { font-size:12px; color:var(--color-text-secondary); }
.checkin-timeline-type { font-size:13px; font-weight:600; color:var(--color-text-secondary); }
.checkin-timeline-location { font-size:12px; color:var(--color-text-muted); }
.checkin-timeline-remark {
  font-size:12px;
  color:var(--color-text-secondary);
  margin-top:4px;
  padding:4px 8px;
  background:var(--color-surface-soft);
  border-radius:4px;
}

/* ---- 打卡统计分析 ---- */

.checkin-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--color-border);
  margin: 16px 0 0;
}
.checkin-tab {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.checkin-tab:hover {
  color: var(--color-text);
}
.checkin-tab.active {
  color: var(--primary, var(--color-info));
  border-bottom-color: var(--primary, var(--color-info));
}

.checkin-tab-panel {
  display: none;
}
.checkin-tab-panel.active {
  display: block;
}

.checkin-stats-cards {
  margin-top: 16px;
}

.checkin-chart-container {
  width: 100%;
  min-height: 360px;
  position: relative;
}
.checkin-chart-container canvas {
  width: 100% !important;
  max-height: 400px;
}

/* ===== 销售合同新建抽屉 ===== */
.sc-editor-panel{
  width:100%;
  max-width:760px;
}
.sc-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 24px 16px;
  border-bottom:1px solid var(--card-border);
}
.sc-head-left{
  display:flex;
  align-items:center;
  gap:14px;
}
.sc-head-icon{
  width:42px;
  height:42px;
  border-radius:12px;
  background:var(--green-50);
  color:var(--green-600);
  display:flex;
  align-items:center;
  justify-content:center;
}
.sc-head h3{
  margin:0;
  font-size:18px;
  color:var(--foreground);
}
.sc-head-subtitle{
  margin:2px 0 0;
  font-size:12px;
  color:var(--text-secondary);
}

/* 创建方式标签页 */
.sc-create-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  padding:16px 0 0;
}
.sc-tab{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  padding:16px;
  border:1.5px solid var(--card-border);
  border-radius:10px;
  background:var(--white);
  cursor:pointer;
  transition:all .15s ease;
  text-align:left;
}
.sc-tab:hover{
  border-color:var(--green-300);
  background:var(--green-50);
}
.sc-tab.active{
  border-color:var(--green-600);
  background:var(--green-50);
  color:var(--green-700);
}
.sc-tab svg{
  color:var(--text-secondary);
}
.sc-tab.active svg{
  color:var(--green-600);
}
.sc-tab .sc-tab-title{
  font-size:14px;
  font-weight:600;
  margin-top:4px;
}
.sc-tab-hint{
  font-size:11px;
  color:var(--text-secondary);
  font-weight:400;
}
.sc-tab.active .sc-tab-hint{
  color:var(--green-600);
}

/* 面板切换 */
.sc-pane{
  display:block;
}
.sc-pane[style*="display:none"]{
  display:none !important;
}

/* 字段区 */
.sc-section{
  margin-top:20px;
}
.sc-section-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}
.sc-section-head h3{
  margin:0;
  font-size:14px;
  color:var(--foreground);
}
.sc-badge{
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--green-600);
  color:var(--white);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:700;
  flex-shrink:0;
}
.sc-field-hint-tip{
  margin-left:auto;
  font-size:11px;
  color:var(--text-secondary);
  background:var(--green-50);
  padding:3px 8px;
  border-radius:6px;
}

/* 字段网格 */
.sc-grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.sc-grid-3{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:12px;
}
@media(max-width:700px){
  .sc-grid-3{ grid-template-columns:1fr; }
}
.sc-field{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.sc-field-full{
  grid-column:1/-1;
}
.sc-field-row{
  display:flex;
  gap:8px;
}
.sc-field-row input,
.sc-field-row select{
  flex:1;
}
.sc-field-hint{
  font-size:11px;
  color:var(--danger);
  margin-left:4px;
}
.sc-field span.sc-field-hint{
  display:block;
  margin-top:4px;
  color:var(--text-muted);
}
.sc-field label{
  font-size:12px;
  font-weight:600;
  color:var(--text-secondary);
}
.sc-field label b{
  color:var(--danger);
  font-weight:700;
  margin-left:1px;
}
.sc-field input,
.sc-field select,
.sc-field textarea{
  padding:9px 12px;
  border:1px solid var(--card-border);
  border-radius:8px;
  font-size:13px;
  background:var(--white);
  color:var(--foreground);
  transition:border-color .15s ease;
  line-height:1.5;
}
.sc-field input:focus,
.sc-field select:focus,
.sc-field textarea:focus{
  outline:none;
  border-color:var(--green-500);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--raw-22c55e) 10%, transparent);
}
.sc-field input:read-only{
  background:var(--background-alt);
  color:var(--text-secondary);
}
.sc-field textarea{
  min-height:48px;
  resize:vertical;
}

/* 报价单提示 */
.sc-field-hint{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-top:8px;
  padding:8px 12px;
  background:var(--green-50);
  border-radius:8px;
  font-size:12px;
  color:var(--green-700);
}
.sc-field-hint-icon{
  flex-shrink:0;
  color:var(--green-600);
  margin-top:1px;
}

/* 报价明细列表 */
.sc-quote-items-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.sc-quote-item-card{
  padding:10px 14px;
  background:var(--background-alt);
  border-radius:8px;
  border-left:3px solid var(--green-500);
}
.sc-quote-item-name{
  font-weight:600;
  font-size:13px;
  color:var(--foreground);
}
.sc-quote-item-detail{
  font-size:12px;
  color:var(--text-secondary);
  margin-top:2px;
}
.sc-quote-item-amount{
  font-weight:700;
  color:var(--green-600);
  margin-top:4px;
  font-size:13px;
}

/* 文件上传 */
.sc-file-upload{
  margin-top:4px;
}
.sc-file-upload input[type="file"]{
  display:none;
}
.sc-file-upload-zone{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:24px;
  border:2px dashed var(--card-border);
  border-radius:10px;
  background:var(--background-alt);
  cursor:pointer;
  transition:all .15s ease;
}
.sc-file-upload-zone:hover{
  border-color:var(--green-400);
  background:var(--green-50);
}
.sc-file-upload-zone svg{
  color:var(--green-500);
}
.sc-file-upload-text{
  text-align:center;
}
.sc-file-upload-main{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--foreground);
}
.sc-file-upload-sub{
  display:block;
  font-size:11px;
  color:var(--text-secondary);
  margin-top:2px;
}
.sc-file-info{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  background:var(--green-50);
  border-radius:8px;
  font-size:13px;
  color:var(--green-700);
}
.sc-file-info svg{
  color:var(--green-600);
}
.sc-file-info span{
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sc-file-remove{
  width:24px;
  height:24px;
  border:none;
  background:transparent;
  color:var(--text-secondary);
  cursor:pointer;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  transition:all .15s ease;
}
.sc-file-remove:hover{
  background:var(--danger);
  color:var(--white);
}

/* 底部操作栏 */
.sc-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:16px 24px;
  border-top:1px solid var(--card-border);
  background:var(--background-alt);
}
.sc-actions .btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 20px;
  border-radius:8px;
  font-size:14px;
  font-weight:600;
  border:none;
  cursor:pointer;
  transition:all .15s ease;
}
.sc-actions .btn:disabled{
  opacity:.5;
  cursor:not-allowed;
}
.sc-actions .btn:disabled:hover{
  background:var(--background);
  color:var(--text-secondary);
}
.sc-actions .btn svg{
  flex-shrink:0;
}
.sc-actions .btn.primary{
  background:var(--green-600);
  color:var(--white);
}
.sc-actions .btn.primary:hover:not(:disabled){
  background:var(--green-700);
}

/* 响应式 */
@media (max-width:640px){
  .sc-editor-panel{
    max-width:100%;
  }
  .sc-grid-2{
    grid-template-columns:1fr;
  }
  .sc-create-tabs{
    grid-template-columns:1fr;
  }
  .sc-actions{
    flex-direction:column-reverse;
  }
  .sc-actions .btn{
    width:100%;
    justify-content:center;
  }
}


/* ===== 销售合同审批全览 ===== */
.sales-contract-approval-panel{
  width:100%;
  max-width:1120px;
  background:var(--raw-f8faf9);
}
.sales-contract-approval-head{
  align-items:flex-start;
  border-bottom:1px solid var(--color-primary-border);
  background:linear-gradient(135deg,var(--white),var(--raw-f0fbf5));
}
.sales-contract-approval-body{
  padding:18px 22px 96px;
  overflow:auto;
}
.sales-contract-approval-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.sales-contract-approval-card{
  background:var(--zway-surface,var(--card-bg,var(--white)));
  border:1px solid var(--zway-border,var(--color-primary-border));
  border-radius:var(--zway-radius-lg,14px);
  box-shadow:var(--zway-shadow-sm,0 6px 18px color-mix(in srgb, var(--green-900) 6%, transparent));
  padding:16px;
}
.sales-contract-approval-card.full{
  grid-column:1 / -1;
}
.sales-contract-approval-card h4{
  margin:0 0 12px;
  color:var(--zway-primary,var(--color-primary));
  font-size:15px;
}
.sales-contract-approval-kv{
  display:grid;
  grid-template-columns:110px minmax(0,1fr);
  gap:8px 12px;
  font-size:13px;
}
.sales-contract-approval-kv span:nth-child(odd){
  color:var(--color-text-secondary);
}
.sales-contract-approval-kv span:nth-child(even){
  color:var(--color-text);
  font-weight:600;
  word-break:break-word;
}
.sales-contract-approval-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-bottom:14px;
}
.sales-contract-approval-stat{
  background:var(--white);
  color:var(--raw-333);
  border-radius:14px;
  padding:14px;
  border:1px solid var(--raw-e8eef2);
}
.sales-contract-approval-stat .label{
  color:var(--raw-8a9099);
  font-size:12px;
}
.sales-contract-approval-stat .value{
  margin-top:6px;
  font-size:18px;
  font-weight:800;
}
.sales-contract-approval-items{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.sales-contract-approval-items th,
.sales-contract-approval-items td{
  padding:9px 8px;
  border-bottom:1px solid var(--raw-eef2f0);
  text-align:left;
  vertical-align:top;
}
.sales-contract-approval-items th{
  background:var(--raw-f4f8f6);
  color:var(--color-text-secondary);
  font-weight:700;
}
.project-contract-stamped-row td{
  padding:0!important;
  background:color-mix(in srgb,var(--ui-theme-soft,var(--raw-edf8f1)) 48%,var(--white) 52%)!important;
}
.project-contract-template-file,
.project-contract-stamped-file{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width:0;
}
.project-contract-template-file{
  align-items:flex-start;
  flex-direction:column;
}
.project-contract-template-file strong{
  overflow:hidden;
  width:100%;
  color:var(--ui-text,var(--color-text));
  font-size:13px;
  font-weight:700;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.project-contract-stamped-file{
  min-height:68px;
  padding:11px 16px 11px 18px;
  border-left:3px solid var(--ui-accent,var(--color-primary));
}
.project-contract-file-copy{
  display:grid;
  min-width:0;
  gap:3px;
}
.project-contract-file-label{
  display:inline-flex;
  align-items:center;
  color:var(--ui-theme-strong,var(--color-primary));
  font-size:12px;
  font-weight:800;
  line-height:1.2;
}
.project-contract-file-copy strong{
  overflow:hidden;
  color:var(--ui-text,var(--color-text));
  font-size:14px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.project-contract-file-copy small{
  color:var(--ui-muted,var(--color-text-secondary));
  font-size:12px;
}
.project-contract-file-actions{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  gap:8px;
}
.project-contract-file-actions .link,
.project-contract-template-file .link{
  min-width:54px;
  padding:5px 10px;
  border:1px solid color-mix(in srgb,var(--ui-accent,var(--color-primary)) 34%,transparent);
  border-radius:6px;
  color:var(--ui-theme-strong,var(--color-primary));
  font-size:12px;
  font-weight:700;
  line-height:1.2;
  text-align:center;
}
.project-contract-file-actions .link:hover,
.project-contract-template-file .link:hover{
  background:var(--ui-theme-soft,var(--raw-edf8f1));
}
@media(max-width:760px){
  .project-contract-stamped-file{align-items:flex-start;flex-direction:column;gap:8px;}
  .project-contract-file-copy strong{max-width:min(72vw,420px);}
}
.sales-contract-approval-history{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.sales-contract-approval-history-item{
  border-left:4px solid var(--color-primary);
  background:var(--raw-f7fbf8);
  border-radius:10px;
  padding:10px 12px;
}
.sales-contract-approval-history-item strong{
  color:color-mix(in srgb,var(--color-primary) 60%,var(--raw-000) 40%);
}
.sales-contract-approval-history-item div{
  margin-top:4px;
  color:var(--color-text-secondary);
  font-size:12px;
}
.sales-contract-approval-reject-box{
  margin-top:14px;
  padding:12px;
  border:1px solid color-mix(in srgb,var(--color-danger) 26%,var(--white) 74%);
  border-radius:12px;
  background:var(--raw-fff5f5);
}
.sales-contract-approval-reject-box label{
  display:block;
  margin-bottom:8px;
  color:var(--color-danger-text);
  font-weight:700;
}
.sales-contract-approval-reject-box textarea{
  width:100%;
  min-height:82px;
  resize:vertical;
}
.sales-contract-approval-actions{
  position:sticky;
  bottom:0;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:14px 22px;
  border-top:1px solid var(--color-primary-border);
  background:color-mix(in srgb, var(--white) 96%, transparent);
  box-shadow:0 -10px 24px color-mix(in srgb, var(--green-900) 8%, transparent);
}
@media(max-width:860px){
  .sales-contract-approval-grid,
  .sales-contract-approval-summary{
    grid-template-columns:1fr;
  }
  .sales-contract-approval-body{
    padding:14px 14px 96px;
  }
  .sales-contract-approval-kv{
    grid-template-columns:92px minmax(0,1fr);
  }
}

/* ===== 销售合同编辑全览 ===== */
.sales-contract-template-notice{
  margin:0 0 14px;
  padding:12px 14px;
  border:1px solid color-mix(in srgb,var(--color-success) 24%,var(--white) 76%);
  border-radius:12px;
  background:var(--raw-ecfdf3);
  color:var(--color-success-text);
  font-weight:700;
}
.sales-contract-edit-form{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px 14px;
}
.sales-contract-edit-form.one{
  grid-template-columns:1fr;
}
.sales-contract-edit-form label{
  display:flex;
  flex-direction:column;
  gap:6px;
  color:var(--color-text-secondary);
  font-size:12px;
  font-weight:700;
}
.sales-contract-edit-form input,
.sales-contract-edit-form textarea,
.sales-contract-edit-items input,
.sales-contract-edit-items textarea{
  width:100%;
  border:1px solid var(--color-primary-border);
  border-radius:8px;
  background:var(--white);
  color:var(--color-text);
  font-size:13px;
  line-height:1.45;
  padding:8px 10px;
  outline:none;
}
.sales-contract-edit-form textarea,
.sales-contract-edit-items textarea{
  min-height:64px;
  resize:vertical;
}
.sales-contract-edit-form input:focus,
.sales-contract-edit-form textarea:focus,
.sales-contract-edit-items input:focus,
.sales-contract-edit-items textarea:focus{
  border-color:var(--color-primary);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--green-700) 10%, transparent);
}
.sales-contract-edit-form input[readonly],
.sales-contract-edit-form textarea[readonly],
.sales-contract-edit-items input[readonly],
.sales-contract-edit-items textarea[readonly]{
  background:var(--raw-f8faf9);
  color:var(--color-text-secondary);
}
.sales-contract-edit-items th,
.sales-contract-edit-items td{
  vertical-align:top;
}
.sales-contract-edit-items td:nth-child(1){
  width:48px;
}
.sales-contract-edit-items td:nth-child(3),
.sales-contract-edit-items td:nth-child(4){
  width:110px;
}
.sales-contract-edit-items td:nth-child(5),
.sales-contract-edit-items td:nth-child(6){
  width:150px;
}
.sales-contract-approval-actions .btn[disabled]{
  opacity:.45;
  cursor:not-allowed;
}
@media(max-width:860px){
  .sales-contract-edit-form{
    grid-template-columns:1fr;
  }
  .sales-contract-edit-items{
    min-width:760px;
  }
}

/* Sales contract create/edit drawer layout fix */
#salesContractDrawer.open{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:color-mix(in srgb, var(--gray-900) 48%, transparent);
}
#salesContractDrawer .sc-editor-panel{
  width:calc(100vw - 32px);
  max-width:1280px;
  height:calc(100vh - 32px);
  max-height:calc(100vh - 32px);
  margin:0;
  padding:0;
  border-radius:18px;
  background:var(--white);
  box-shadow:0 24px 80px color-mix(in srgb, var(--gray-900) 28%, transparent);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
#salesContractDrawer .sc-head{
  flex:0 0 auto;
  padding:22px 28px 18px;
  background:var(--white);
  border-bottom:1px solid var(--color-border);
}
#salesContractDrawer .sc-editor-panel > .sc-section,
#salesContractDrawer .sc-editor-panel > .sc-pane{
  padding-left:28px;
  padding-right:28px;
}
#salesContractDrawer .sc-editor-panel > .sc-section:first-of-type{
  padding-top:24px;
}
#salesContractDrawer .sc-pane{
  flex:1 1 auto;
  overflow-y:auto;
  padding-bottom:120px;
}
#salesContractDrawer .sc-pane[style*="display:none"]{
  display:none!important;
}
#salesContractDrawer .sc-create-tabs{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
#salesContractDrawer .sc-tab{
  min-height:112px;
  padding:22px 24px;
  border:1px solid var(--raw-d9e3dd);
  border-radius:14px;
  background:var(--white);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:8px;
}
#salesContractDrawer .sc-tab.active{
  border-color:var(--color-primary);
  background:var(--raw-effaf4);
  box-shadow:inset 0 0 0 1px var(--color-primary);
}
#salesContractDrawer .sc-section{
  margin-top:22px;
}
#salesContractDrawer .sc-section-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
#salesContractDrawer .sc-badge{
  width:34px;
  height:34px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--color-primary);
  color:var(--white);
  font-weight:800;
  flex:0 0 auto;
}
#salesContractDrawer .sc-grid-2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px 20px;
}
#salesContractDrawer .sc-grid-3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px 20px;
}
#salesContractDrawer .sc-field{
  display:flex;
  flex-direction:column;
  gap:8px;
}
#salesContractDrawer .sc-field-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 120px;
  gap:10px;
}
#salesContractDrawer .sc-field input,
#salesContractDrawer .sc-field select,
#salesContractDrawer .sc-field textarea{
  width:100%;
  min-height:44px;
  border:1px solid var(--raw-dbe5df);
  border-radius:10px;
  padding:10px 12px;
  background:var(--white);
  color:var(--color-text);
  font-size:14px;
  line-height:1.45;
  box-sizing:border-box;
}
#salesContractDrawer .sc-field textarea{
  min-height:86px;
  resize:vertical;
}
#salesContractDrawer .sc-file-upload-zone{
  min-height:142px;
}
#salesContractDrawer .sc-actions{
  position:sticky;
  bottom:0;
  z-index:3;
  flex:0 0 auto;
  display:flex;
  justify-content:flex-end;
  gap:12px;
  padding:16px 28px;
  margin-top:auto;
  background:color-mix(in srgb, var(--white) 96%, transparent);
  border-top:1px solid var(--color-border);
  box-shadow:0 -12px 30px color-mix(in srgb, var(--gray-900) 8%, transparent);
}
@media(max-width:900px){
  #salesContractDrawer.open{padding:0;}
  #salesContractDrawer .sc-editor-panel{
    width:100vw;
    height:100vh;
    max-height:100vh;
    border-radius:0;
  }
  #salesContractDrawer .sc-create-tabs,
  #salesContractDrawer .sc-grid-2,
  #salesContractDrawer .sc-grid-3{
    grid-template-columns:1fr;
  }
  #salesContractDrawer .sc-field-row{
    grid-template-columns:1fr;
  }
  #salesContractDrawer .sc-actions{
    flex-direction:column-reverse;
  }
  #salesContractDrawer .sc-actions .btn{
    width:100%;
    justify-content:center;
  }
}

/* Sales contract drawer structural reset after rebuilding markup */
#salesContractDrawer .sc-editor-panel{
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
}
#salesContractDrawer .sc-drawer-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  padding:0 28px 28px;
  background:var(--white);
}
#salesContractDrawer .sc-drawer-scroll > .sc-section:first-child{
  margin-top:24px;
}
#salesContractDrawer .sc-pane{
  overflow:visible!important;
  padding:0!important;
}
#salesContractDrawer .sc-pane[style*="display:none"]{
  display:none!important;
}
#salesContractDrawer .sc-field-full{
  grid-column:1/-1;
}
#salesContractDrawer .sc-actions{
  position:static!important;
  flex:0 0 auto!important;
}
@media(max-width:900px){
  #salesContractDrawer .sc-drawer-scroll{
    padding:0 18px 24px;
  }
}

/* Quality deposit P2: due reminders, statistics and release deduction form. */
.quality-deposit-p2-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:14px 0 16px;
}
.quality-deposit-p2-card{
  position:relative;
  overflow:hidden;
  min-height:92px;
  padding:16px 18px;
  border-radius:16px;
  border:1px solid var(--raw-dbe7de);
  background:linear-gradient(135deg,var(--raw-f8fff9),var(--raw-eef9f1));
  box-shadow:0 10px 24px color-mix(in srgb, var(--raw-235b3a) 8%, transparent);
}
.quality-deposit-p2-card::after{
  content:"";
  position:absolute;
  right:-24px;
  bottom:-28px;
  width:92px;
  height:92px;
  border-radius:999px;
  background:color-mix(in srgb, var(--green-500) 12%, transparent);
}
.quality-deposit-p2-card span{
  display:block;
  color:var(--raw-496858);
  font-size:13px;
  font-weight:800;
}
.quality-deposit-p2-card strong{
  display:block;
  margin-top:8px;
  color:var(--raw-163a28);
  font-size:30px;
  line-height:1;
}
.quality-deposit-p2-card small{
  display:block;
  margin-top:8px;
  color:var(--raw-64766c);
  font-size:12px;
  font-weight:700;
}
.quality-deposit-p2-card.soon{
  border-color:color-mix(in srgb,var(--color-warning) 26%,var(--white) 74%);
  background:linear-gradient(135deg,var(--raw-fffaf0),var(--raw-fff3d7));
}
.quality-deposit-p2-card.soon strong{color:var(--color-primary)}
.quality-deposit-p2-card.overdue{
  border-color:color-mix(in srgb,var(--color-danger) 26%,var(--white) 74%);
  background:linear-gradient(135deg,color-mix(in srgb,var(--color-danger-soft) 42%,var(--white) 58%),var(--raw-ffe7e7));
}
.quality-deposit-p2-card.overdue strong{color:var(--color-danger)}
.quality-deposit-p2-card.open strong{color:var(--raw-15803d)}
.quality-deposit-task-card{
  border-color:color-mix(in srgb,var(--color-danger) 26%,var(--white) 74%);
  background:linear-gradient(135deg,color-mix(in srgb,var(--color-danger-soft) 42%,var(--white) 58%),var(--white));
}
.quality-deposit-task-card .crm-list-head strong{color:var(--color-danger-text)}
.quality-release-modal .modal{
  max-height:calc(100vh - 40px);
  overflow:auto;
}
.quality-release-modal .field textarea{min-height:86px}
@media (max-width: 760px){
  .quality-deposit-p2-summary{grid-template-columns:1fr}
}

/* Sales contract drawer UI/UX refresh: clearer workflow, stronger form grouping, accessible touch targets. */
#salesContractDrawer{
  --sc-ink:var(--color-text);
  --sc-muted:var(--color-text-secondary);
  --sc-line:#dbe7de;
  --sc-soft:var(--color-primary-faint);
  --sc-accent:var(--color-primary);
  --sc-accent-strong:#12633f;
  --sc-warn:#b45309;
}
#salesContractDrawer .sc-editor-panel{
  width:min(1180px,calc(100vw - 36px));
  max-height:calc(100vh - 32px);
  border-radius:28px;
  background:linear-gradient(180deg,var(--white) 0%,var(--raw-fbfefc) 52%,var(--raw-f4fbf7) 100%);
  border:1px solid color-mix(in srgb, var(--raw-1f8f5f) 16%, transparent);
  box-shadow:0 30px 90px color-mix(in srgb, var(--green-900) 22%, transparent);
}
#salesContractDrawer .sc-head{
  min-height:84px;
  padding:22px 28px;
  background:linear-gradient(135deg,var(--raw-effaf3) 0%,var(--white) 58%,var(--color-surface-soft) 100%);
  border-bottom:1px solid color-mix(in srgb, var(--raw-1f8f5f) 14%, transparent);
}
#salesContractDrawer .sc-head-icon{
  width:48px;
  height:48px;
  border-radius:16px;
  background:linear-gradient(135deg,var(--color-primary),var(--raw-59c996));
  color:var(--white);
  box-shadow:0 12px 28px color-mix(in srgb, var(--raw-1f8f5f) 28%, transparent);
}
#salesContractDrawer .sc-head h3{
  font-size:22px;
  letter-spacing:-.02em;
  color:color-mix(in srgb,var(--color-primary) 54%,var(--raw-000) 46%);
}
#salesContractDrawer .sc-head-subtitle{
  margin-top:6px;
  color:var(--raw-516357);
  font-size:14px;
  line-height:1.5;
}
#salesContractDrawer .close{
  min-width:44px;
  min-height:44px;
  border-radius:14px;
  color:var(--raw-34443b);
  background:var(--white);
  border:1px solid color-mix(in srgb, var(--raw-1f8f5f) 16%, transparent);
}
#salesContractDrawer .sc-drawer-scroll{
  padding:24px 32px 32px;
  background:
    radial-gradient(circle at 8% 0%,color-mix(in srgb, var(--raw-59c996) 12%, transparent),transparent 28%),
    linear-gradient(180deg,var(--white),var(--raw-fbfefc));
}
#salesContractDrawer .sc-section{
  margin-top:18px;
  padding:20px;
  border:1px solid color-mix(in srgb, var(--raw-1f8f5f) 14%, transparent);
  border-radius:22px;
  background:color-mix(in srgb, var(--white) 88%, transparent);
  box-shadow:0 12px 34px color-mix(in srgb, var(--raw-1f3f2b) 6%, transparent);
}
#salesContractDrawer .sc-section-head{
  min-height:40px;
  margin-bottom:16px;
  gap:10px;
}
#salesContractDrawer .sc-section-head h3{
  font-size:16px;
  font-weight:900;
  color:var(--color-text);
}
#salesContractDrawer .sc-badge{
  width:34px;
  height:34px;
  background:linear-gradient(135deg,var(--color-primary),var(--raw-43bd82));
  box-shadow:0 8px 18px color-mix(in srgb, var(--raw-1f8f5f) 22%, transparent);
}
#salesContractDrawer .sc-create-tabs{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
#salesContractDrawer .sc-tab{
  min-height:104px;
  align-items:flex-start;
  padding:18px;
  border-radius:20px;
  border:1.5px solid var(--raw-d9eadf);
  background:linear-gradient(135deg,var(--white),var(--raw-f7fcf9));
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#salesContractDrawer .sc-tab:hover,
#salesContractDrawer .sc-tab:focus-visible{
  transform:translateY(-1px);
  border-color:var(--raw-73d3a3);
  box-shadow:0 14px 30px color-mix(in srgb, var(--raw-1f8f5f) 14%, transparent);
}
#salesContractDrawer .sc-tab.active{
  border-color:var(--color-primary);
  background:linear-gradient(135deg,var(--raw-eefaf3),var(--white));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--raw-1f8f5f) 20%, transparent),0 16px 34px color-mix(in srgb, var(--raw-1f8f5f) 14%, transparent);
}
#salesContractDrawer .sc-tab svg{
  width:26px;
  height:26px;
  color:var(--color-primary);
}
#salesContractDrawer .sc-tab-title{
  margin-top:12px;
  font-size:16px;
  font-weight:900;
  color:var(--color-text);
}
#salesContractDrawer .sc-tab-hint{
  margin-top:5px;
  color:var(--color-text-secondary);
  font-size:13px;
  line-height:1.45;
}
#salesContractDrawer .sc-grid-2{
  gap:18px 22px;
}
#salesContractDrawer .sc-grid-3{
  gap:18px;
}
#salesContractDrawer .sc-field label,
#salesContractDrawer .sc-mini-label,
#salesContractDrawer .sc-date-field span{
  color:var(--color-text-secondary);
  font-size:13px;
  font-weight:850;
  line-height:1.35;
}
#salesContractDrawer .sc-field input,
#salesContractDrawer .sc-field select,
#salesContractDrawer .sc-field textarea,
#salesContractDrawer .sc-date-field input{
  min-height:48px;
  border-radius:14px;
  border:1px solid var(--raw-d9e6de);
  background:var(--white);
  color:var(--color-text);
  font-size:15px;
  padding:0 14px;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
#salesContractDrawer .sc-field textarea{
  padding-top:12px;
  padding-bottom:12px;
}
#salesContractDrawer .sc-field input:focus,
#salesContractDrawer .sc-field select:focus,
#salesContractDrawer .sc-field textarea:focus,
#salesContractDrawer .sc-date-field input:focus{
  outline:none;
  border-color:var(--color-primary);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--raw-1f8f5f) 14%, transparent);
  background:var(--raw-fcfffd);
}
#salesContractDrawer .sc-quality-card{
  gap:16px;
  padding:18px;
  border-radius:22px;
  background:linear-gradient(135deg,var(--raw-f1fbf5) 0%,var(--white) 52%,var(--raw-fffaf0) 100%);
  border:1px solid color-mix(in srgb, var(--raw-1f8f5f) 18%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--white) 75%, transparent);
}
#salesContractDrawer .sc-quality-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
#salesContractDrawer .sc-quality-card-head label{
  display:block;
  color:var(--raw-173828);
  font-size:16px;
  font-weight:950;
}
#salesContractDrawer .sc-quality-card-head p{
  margin:6px 0 0;
  color:var(--raw-5f7167);
  font-size:13px;
  line-height:1.55;
}
#salesContractDrawer .sc-quality-pill{
  display:inline-flex;
  min-height:30px;
  align-items:center;
  white-space:nowrap;
  padding:0 12px;
  border-radius:999px;
  background:color-mix(in srgb,var(--color-warning-soft) 56%,var(--white) 44%);
  color:var(--color-warning-text);
  border:1px solid color-mix(in srgb,var(--color-warning) 26%,var(--white) 74%);
  font-size:12px;
  font-weight:900;
}
#salesContractDrawer .sc-quality-amount-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 180px;
  gap:14px;
}
#salesContractDrawer .sc-quality-date-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
#salesContractDrawer .sc-date-field{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:8px;
  padding:12px;
  border-radius:16px;
  background:color-mix(in srgb, var(--white) 72%, transparent);
  border:1px dashed color-mix(in srgb, var(--raw-1f8f5f) 22%, transparent);
}
#salesContractDrawer .sc-date-field.important{
  border-style:solid;
  border-color:color-mix(in srgb,var(--color-warning) 34%,var(--white) 66%);
  background:var(--raw-fffaf0);
}
#salesContractDrawer .sc-field-hint{
  color:var(--color-text-secondary);
  line-height:1.5;
}
#salesContractDrawer .sc-field-hint-tip{
  min-height:28px;
  display:inline-flex;
  align-items:center;
  padding:0 10px;
  border-radius:999px;
  color:var(--raw-1f6f4a);
  background:var(--raw-e9f8ef);
}
#salesContractDrawer .sc-file-upload-zone{
  border-radius:20px;
  border:1.5px dashed var(--raw-a7dcbc);
  background:linear-gradient(135deg,var(--raw-f4fbf7),var(--white));
}
#salesContractDrawer .sc-actions{
  padding:18px 28px;
  background:color-mix(in srgb, var(--white) 92%, transparent);
  backdrop-filter:blur(12px);
}
#salesContractDrawer .sc-actions .btn{
  min-height:46px;
  border-radius:14px;
  font-weight:850;
}
@media(max-width:900px){
  #salesContractDrawer .sc-editor-panel{
    width:100vw;
    max-height:100vh;
    border-radius:0;
  }
  #salesContractDrawer .sc-head,
  #salesContractDrawer .sc-drawer-scroll,
  #salesContractDrawer .sc-actions{
    padding-left:18px;
    padding-right:18px;
  }
  #salesContractDrawer .sc-create-tabs,
  #salesContractDrawer .sc-grid-2,
  #salesContractDrawer .sc-grid-3,
  #salesContractDrawer .sc-quality-amount-row,
  #salesContractDrawer .sc-quality-date-grid{
    grid-template-columns:1fr;
  }
  #salesContractDrawer .sc-quality-card-head{
    flex-direction:column;
  }
}
@media(prefers-reduced-motion:reduce){
  #salesContractDrawer .sc-tab,
  #salesContractDrawer .sc-field input,
  #salesContractDrawer .sc-field select,
  #salesContractDrawer .sc-field textarea,
  #salesContractDrawer .sc-date-field input{
    transition:none;
  }
}

/* Sales contract payment terms: preset + custom entry. */
#salesContractDrawer .sc-payment-card{
  gap:12px;
  padding:16px;
  border-radius:20px;
  background:linear-gradient(135deg,var(--color-surface-soft),var(--white) 50%,var(--raw-f4fbf7));
  border:1px solid color-mix(in srgb, var(--raw-1f8f5f) 16%, transparent);
}
#salesContractDrawer .sc-payment-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
#salesContractDrawer .sc-payment-card-head label{
  color:var(--raw-173828);
  font-size:16px;
  font-weight:950;
}
#salesContractDrawer .sc-payment-card-head span{
  color:var(--color-text-secondary);
  font-size:12px;
  font-weight:800;
  padding:6px 10px;
  border-radius:999px;
  background:var(--raw-eefaf3);
}
#salesContractDrawer .sc-payment-grid{
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:14px;
}
#salesContractDrawer .sc-payment-grid select,
#salesContractDrawer .sc-payment-grid textarea{
  width:100%;
  min-height:48px;
  border-radius:14px;
  border:1px solid var(--raw-d9e6de);
  background:var(--white);
  color:var(--color-text);
  font-size:15px;
  box-sizing:border-box;
}
#salesContractDrawer .sc-payment-grid textarea{
  padding:12px 14px;
  resize:vertical;
}
#salesContractDrawer .sc-payment-grid select:focus,
#salesContractDrawer .sc-payment-grid textarea:focus{
  outline:none;
  border-color:var(--color-primary);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--raw-1f8f5f) 14%, transparent);
}
@media(max-width:900px){
  #salesContractDrawer .sc-payment-card-head{
    align-items:flex-start;
    flex-direction:column;
  }
  #salesContractDrawer .sc-payment-grid{
    grid-template-columns:1fr;
  }
}

/* Project edit bottom actions: keep only Delete / Save / Next. */
.project-edit-actions-compact{
  justify-content:flex-end;
  gap:14px;
  padding-top:18px;
  border-top:1px solid var(--raw-edf2ef);
}
.project-edit-actions-compact .btn{
  min-width:112px;
  min-height:46px;
  border-radius:14px;
  font-weight:850;
}
.project-edit-actions-compact #deleteProjectBtn{
  margin-right:auto;
}
@media(max-width:760px){
  .project-edit-actions-compact{
    display:grid;
    grid-template-columns:1fr;
  }
  .project-edit-actions-compact #deleteProjectBtn{
    margin-right:0;
  }
  .project-edit-actions-compact .btn{
    width:100%;
  }
}

/* Project edit bottom actions: keep only Delete / Save / Next. */
.project-edit-actions-compact{
  justify-content:flex-end;
  gap:14px;
  padding-top:18px;
  border-top:1px solid var(--raw-edf2ef);
}
.project-edit-actions-compact .btn{
  min-width:112px;
  min-height:46px;
  border-radius:14px;
  font-weight:850;
}
.project-edit-actions-compact #deleteProjectBtn{
  margin-right:auto;
}
@media(max-width:760px){
  .project-edit-actions-compact{
    display:grid;
    grid-template-columns:1fr;
  }
  .project-edit-actions-compact #deleteProjectBtn{
    margin-right:0;
  }
  .project-edit-actions-compact .btn{
    width:100%;
  }
}

/* Sales contracts page card-management refresh by ui-ux-pro-max principles. */
#sales-contracts{
  --contract-ink:#15251c;
  --contract-muted:#64746b;
  --contract-line:#dceae2;
  --contract-soft:#f4fbf7;
  --contract-card:#ffffff;
  --contract-accent:var(--color-primary);
  --contract-accent-strong:#12633f;
  --contract-warning:var(--color-warning-text);
  --contract-danger:var(--color-danger);
}
#sales-contracts > .notice{
  position:relative;
  overflow:hidden;
  border:1px solid color-mix(in srgb, var(--raw-1f8f5f) 16%, transparent);
  background:
    radial-gradient(circle at 4% 10%,color-mix(in srgb, var(--raw-59c996) 22%, transparent),transparent 30%),
    linear-gradient(135deg,var(--raw-effaf3) 0%,var(--white) 56%,var(--color-surface-soft) 100%);
  color:var(--raw-214d37);
  border-radius:22px;
  box-shadow:0 16px 40px color-mix(in srgb, var(--raw-1f3f2b) 7%, transparent);
}
#sales-contracts .kpis .card.kpi{
  border:1px solid color-mix(in srgb, var(--raw-1f8f5f) 14%, transparent);
  border-radius:22px;
  background:linear-gradient(145deg,var(--white),var(--raw-f5fbf7));
  box-shadow:0 14px 34px color-mix(in srgb, var(--raw-1f3f2b) 7%, transparent);
}
#sales-contracts .kpis .card.kpi .label{
  color:var(--color-text-secondary);
  font-weight:850;
}
#sales-contracts .kpis .card.kpi .value{
  color:color-mix(in srgb,var(--color-primary) 62%,var(--raw-000) 38%);
  letter-spacing:-.03em;
}
#sales-contracts .card.mt{
  border:1px solid color-mix(in srgb, var(--raw-1f8f5f) 14%, transparent);
  border-radius:26px;
  background:linear-gradient(180deg,var(--white),var(--raw-fbfefc));
  box-shadow:0 18px 48px color-mix(in srgb, var(--raw-1f3f2b) 8%, transparent);
}
#sales-contracts .sales-contract-card-title{
  align-items:flex-start;
  justify-content:flex-start;
  gap:12px;
}
#sales-contracts .sales-contract-card-title h3{
  color:var(--raw-132a1e);
  font-size:20px;
  font-weight:950;
  letter-spacing:-.02em;
}
#sales-contracts .sales-contract-card-title span{
  color:var(--color-text-secondary);
  font-size:13px;
  line-height:1.5;
}
#sales-contracts .filters{
  padding:14px;
  border:1px solid color-mix(in srgb, var(--raw-1f8f5f) 12%, transparent);
  border-radius:18px;
  background:var(--raw-f6fcf8);
}
#sales-contracts .filters input,
#sales-contracts .filters select{
  min-height:46px;
  border-radius:14px;
  border:1px solid var(--raw-dbe7de);
  background:var(--white);
}
#sales-contracts .filters input:focus,
#sales-contracts .filters select:focus{
  outline:none;
  border-color:var(--color-primary);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--raw-1f8f5f) 13%, transparent);
}
#sales-contracts .sales-contract-table,
#sales-contracts .card.mt:last-of-type table{
  border-collapse:separate;
  border-spacing:0 14px;
  min-width:1080px;
}
#sales-contracts .sales-contract-table thead th,
#sales-contracts .card.mt:last-of-type table thead th{
  border:0;
  background:transparent;
  color:var(--raw-718076);
  font-size:12px;
  font-weight:900;
  letter-spacing:.02em;
}
#sales-contracts .sales-contract-table tbody tr,
#sales-contracts .card.mt:last-of-type table tbody tr{
  position:relative;
  background:var(--white);
  box-shadow:0 14px 34px color-mix(in srgb, var(--raw-1f3f2b) 8%, transparent);
  transition:transform .18s ease, box-shadow .18s ease;
}
#sales-contracts .sales-contract-table tbody tr:hover,
#sales-contracts .card.mt:last-of-type table tbody tr:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 44px color-mix(in srgb, var(--raw-1f3f2b) 12%, transparent);
}
#sales-contracts .sales-contract-table td,
#sales-contracts .card.mt:last-of-type table td{
  border-top:1px solid var(--color-primary-soft);
  border-bottom:1px solid var(--color-primary-soft);
  background:var(--white);
  vertical-align:middle;
  padding-top:18px;
  padding-bottom:18px;
}
#sales-contracts .sales-contract-table td:first-child,
#sales-contracts .card.mt:last-of-type table td:first-child{
  border-left:1px solid var(--color-primary-soft);
  border-radius:18px 0 0 18px;
  color:var(--raw-7a8a81);
  font-weight:900;
}
#sales-contracts .sales-contract-table td:last-child,
#sales-contracts .card.mt:last-of-type table td:last-child{
  border-right:1px solid var(--color-primary-soft);
  border-radius:0 18px 18px 0;
}
#sales-contracts .sales-contract-table td:nth-child(3) .action-link,
#sales-contracts .card.mt:last-of-type table td:first-child strong{
  color:var(--raw-12633f);
  font-size:15px;
  font-weight:950;
}
#sales-contracts .cell-sub{
  margin-top:6px;
  color:var(--color-text-secondary);
  line-height:1.45;
}
#sales-contracts .sales-contract-table .task-actions{
  display:flex;
  justify-content:center;
  gap:4px;
  padding:4px;
  border-radius:999px;
  background:var(--raw-f3faf6);
  flex-wrap:nowrap;
}
#sales-contracts .sales-contract-table .action-icon,
#sales-contracts .sales-contract-table .icon-btn,
#sales-contracts .sales-contract-table .btn.small{
  min-width:34px;
  min-height:34px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--raw-1f8f5f) 14%, transparent);
  background:var(--white);
  color:var(--raw-1f7a54);
}
#sales-contracts .sales-contract-table .action-icon:hover,
#sales-contracts .sales-contract-table .icon-btn:hover,
#sales-contracts .sales-contract-table .btn.small:hover{
  background:var(--color-primary);
  color:var(--white);
  border-color:var(--color-primary);
}
#sales-contracts .tag,
#sales-contracts [class*="tag"]{
  border-radius:999px;
  font-weight:900;
}
#sales-contracts .quality-deposit-p2-summary{
  margin-top:4px;
  margin-bottom:18px;
}
#sales-contracts .quality-deposit-p2-card{
  border-radius:20px;
  min-height:104px;
  box-shadow:0 14px 34px color-mix(in srgb, var(--raw-1f3f2b) 8%, transparent);
}
#sales-contracts .quality-deposit-p2-card strong{
  font-size:34px;
}
#sales-contracts .card.mt:last-of-type .table-wrap{
  border-radius:22px;
  background:linear-gradient(180deg,var(--raw-f7fcf9),var(--white));
  padding:4px 10px 10px;
}
#sales-contracts .card.mt:last-of-type table td:nth-child(3) strong,
#sales-contracts .card.mt:last-of-type table td:nth-child(4){
  color:color-mix(in srgb,var(--color-primary) 62%,var(--raw-000) 38%);
  font-weight:900;
}
@media(max-width:900px){
  #sales-contracts .card.mt{
    border-radius:20px;
  }
  #sales-contracts .sales-contract-table,
  #sales-contracts .card.mt:last-of-type table{
    min-width:0;
    border-spacing:0 12px;
  }
  #sales-contracts .sales-contract-table tbody tr,
  #sales-contracts .card.mt:last-of-type table tbody tr{
    border-radius:18px;
  }
  #sales-contracts .sales-contract-table td,
  #sales-contracts .card.mt:last-of-type table td{
    border-left:1px solid var(--color-primary-soft);
    border-right:1px solid var(--color-primary-soft);
    border-radius:0;
    padding:12px 14px;
  }
  #sales-contracts .sales-contract-table td:first-child,
  #sales-contracts .card.mt:last-of-type table td:first-child{
    border-radius:18px 18px 0 0;
  }
  #sales-contracts .sales-contract-table td:last-child,
  #sales-contracts .card.mt:last-of-type table td:last-child{
    border-radius:0 0 18px 18px;
  }
}
@media(prefers-reduced-motion:reduce){
  #sales-contracts .sales-contract-table tbody tr,
  #sales-contracts .card.mt:last-of-type table tbody tr,
  #sales-contracts .sales-contract-table .action-icon,
  #sales-contracts .sales-contract-table .icon-btn,
  #sales-contracts .sales-contract-table .btn.small{
    transition:none;
  }
}


/* Sales contract list: file column removed, file actions stay in operation column. */
.sales-contract-table{min-width:1000px}
.sales-contract-table th:nth-child(9),.sales-contract-table td:nth-child(9){width:130px}

/* Sales contract table compact operation and contract-number columns. */
#sales-contracts .sales-contract-table th:nth-child(2),
#sales-contracts .sales-contract-table td:nth-child(2){
  width:128px;
}
#sales-contracts .sales-contract-table .task-actions{
  gap:5px;
  padding:5px 8px;
}
#sales-contracts .sales-contract-table .action-icon,
#sales-contracts .sales-contract-table .icon-btn,
#sales-contracts .sales-contract-table .btn.small{
  min-width:30px;
  width:30px;
  min-height:30px;
  height:30px;
}
#sales-contracts .sales-contract-table .action-icon svg,
#sales-contracts .sales-contract-table .icon-btn svg,
#sales-contracts .sales-contract-table .btn.small svg{
  width:12px;
  height:12px;
}
#sales-contracts .sales-contract-table th:nth-child(3),
#sales-contracts .sales-contract-table td:nth-child(3){
  width:190px;
}
#sales-contracts .sales-contract-table td:nth-child(3) .action-link{
  font-size:12px;
  line-height:1.35;
  letter-spacing:-.01em;
}

/* Sales contracts page: two-window switch between contracts and quality deposits. */
#sales-contracts .sales-contract-view-tabs{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:18px 0 4px;
  padding:6px;
  border-radius:18px;
  border:1px solid color-mix(in srgb, var(--raw-1f8f5f) 16%, transparent);
  background:linear-gradient(135deg,var(--color-primary-faint),var(--white));
  box-shadow:0 12px 28px color-mix(in srgb, var(--raw-1f3f2b) 6%, transparent);
}
#sales-contracts .sales-contract-view-tabs button{
  min-height:44px;
  padding:0 22px;
  border:0;
  border-radius:14px;
  background:transparent;
  color:var(--color-text-secondary);
  font-size:15px;
  font-weight:900;
  cursor:pointer;
}
#sales-contracts .sales-contract-view-tabs button.active{
  background:var(--color-primary);
  color:var(--white);
  box-shadow:0 10px 22px color-mix(in srgb, var(--raw-1f8f5f) 24%, transparent);
}
#sales-contracts .sales-contract-view-tabs button:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--raw-1f8f5f) 16%, transparent);
}

/* Finance center uses the same tab language as the sales-contract workspace. */
#financecenter .sales-contract-view-tabs{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:18px 0 16px;
  padding:6px;
  border:1px solid var(--ui-border)!important;
  border-radius:18px;
  background:var(--white)!important;
  box-shadow:0 10px 28px color-mix(in srgb,var(--ui-theme) 8%,transparent)!important;
}
#financecenter .sales-contract-view-tabs button{
  min-height:44px;
  padding:0 22px;
  border:0;
  border-radius:14px;
  background:transparent;
  color:var(--color-text-secondary);
  font-size:15px;
  font-weight:900;
  cursor:pointer;
}
#financecenter .sales-contract-view-tabs button.active{
  background:linear-gradient(135deg,var(--ui-theme),var(--ui-theme-hover))!important;
  color:var(--white)!important;
  box-shadow:0 12px 28px color-mix(in srgb,var(--ui-theme) 22%,transparent)!important;
}
#financecenter .sales-contract-view-tabs button:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--ui-theme) 16%,transparent);
}
#financeReceiptWorkspace .finance-receipt-tabs{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  width:auto!important;
  max-width:100%!important;
  margin:18px 0 16px!important;
  padding:6px!important;
  border:1px solid var(--ui-border)!important;
  border-radius:18px!important;
  background:var(--white)!important;
  box-shadow:0 10px 28px color-mix(in srgb,var(--ui-theme) 8%,transparent)!important;
  box-sizing:border-box!important;
  overflow-x:auto!important;
}
#financeReceiptWorkspace .finance-receipt-tabs button{
  flex:0 0 auto!important;
  min-width:0!important;
  min-height:44px!important;
  padding:0 22px!important;
  border:0!important;
  border-radius:14px!important;
  background:transparent!important;
  color:var(--color-text-secondary)!important;
  font-size:15px!important;
  font-weight:900!important;
  line-height:1!important;
  white-space:nowrap!important;
  cursor:pointer!important;
}
#financeReceiptWorkspace .finance-receipt-tabs button.active{
  background:linear-gradient(135deg,var(--ui-theme),var(--ui-theme-hover))!important;
  color:var(--white)!important;
  box-shadow:0 12px 28px color-mix(in srgb,var(--ui-theme) 22%,transparent)!important;
}
#financeReceiptWorkspace .finance-receipt-tabs button:focus-visible{
  outline:none!important;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--ui-theme) 16%,transparent)!important;
}
#financeReceiptWorkspace [data-finance-receipt-panel][hidden]{
  display:none!important;
}
#financeReceiptWorkspace .finance-receipt-analysis-panel{
  display:grid;
  gap:16px;
}
#financeReceiptWorkspace .finance-receipt-analysis-panel > .grid.kpis,
#financeReceiptWorkspace .finance-receipt-analysis-panel > .grid.two{
  margin-top:0!important;
}
#financePaymentRows .finance-payment-plus-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  min-height:18px!important;
  padding:0!important;
  border:1px solid color-mix(in srgb,var(--ui-theme) 30%,var(--ui-border) 70%)!important;
  border-radius:4px!important;
  background:var(--ui-theme-soft)!important;
  color:var(--ui-theme-strong)!important;
}
#financePaymentRows .finance-payment-plus-btn span{
  display:block!important;
  color:inherit!important;
  font-size:15px!important;
  font-weight:700!important;
  line-height:1!important;
  transform:translateY(-1px);
}
#financePaymentRows .finance-payment-plus-btn:hover{
  background:var(--ui-theme)!important;
  color:var(--white)!important;
}
@media(max-width:760px){
  #financecenter .sales-contract-view-tabs{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
  }
  #financecenter .sales-contract-view-tabs button{
    width:100%;
    padding:0 10px;
  }
}
@media(max-width:760px){
  #financeReceiptWorkspace .finance-receipt-tabs{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    width:100%!important;
  }
  #financeReceiptWorkspace .finance-receipt-tabs button{
    width:100%!important;
    padding:0 10px!important;
  }
}
#sales-contracts .sales-contract-panel{
  display:none;
}
#sales-contracts .sales-contract-panel.active{
  display:block;
}
@media(max-width:760px){
  #sales-contracts .sales-contract-view-tabs{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
  }
  #sales-contracts .sales-contract-view-tabs button{
    width:100%;
    padding:0 10px;
  }
}

/* Quality deposit summary cards: use neutral default card color. */
#sales-contracts .quality-deposit-p2-card,
#sales-contracts .quality-deposit-p2-card.soon,
#sales-contracts .quality-deposit-p2-card.overdue,
#sales-contracts .quality-deposit-p2-card.open{
  border-color:var(--raw-dbe7de);
  background:linear-gradient(145deg,var(--white),var(--raw-f7fbf8));
  box-shadow:0 12px 28px color-mix(in srgb, var(--raw-1f3f2b) 7%, transparent);
}
#sales-contracts .quality-deposit-p2-card::after,
#sales-contracts .quality-deposit-p2-card.soon::after,
#sales-contracts .quality-deposit-p2-card.overdue::after,
#sales-contracts .quality-deposit-p2-card.open::after{
  background:color-mix(in srgb, var(--raw-1f8f5f) 8%, transparent);
}
#sales-contracts .quality-deposit-p2-card strong,
#sales-contracts .quality-deposit-p2-card.soon strong,
#sales-contracts .quality-deposit-p2-card.overdue strong,
#sales-contracts .quality-deposit-p2-card.open strong{
  color:var(--raw-163a28);
}

/* Executive dashboard refresh: ui-ux-pro-max management cockpit style. */
#dashboard.dashboard-page{
  --dash-ink:color-mix(in srgb,var(--color-primary) 54%,#000 46%);
  --dash-muted:#5f7167;
  --dash-line:#dbe9e1;
  --dash-soft:var(--color-primary-faint);
  --dash-accent:var(--color-primary);
  --dash-accent-2:#59c996;
  --dash-gold:#b7791f;
  --dash-danger:#b91c1c;
  position:relative;
  isolation:isolate;
}
#dashboard.dashboard-page::before{
  content:"";
  position:absolute;
  inset:-24px -28px auto -28px;
  height:360px;
  z-index:-1;
  background:
    radial-gradient(circle at 8% 12%,color-mix(in srgb, var(--raw-59c996) 24%, transparent),transparent 28%),
    radial-gradient(circle at 72% 0%,color-mix(in srgb, var(--raw-1f8f5f) 16%, transparent),transparent 34%),
    linear-gradient(180deg,var(--raw-f1fbf5) 0%,color-mix(in srgb, var(--white) 0%, transparent) 100%);
}
#dashboard .dashboard-hero-panel{
  min-height:178px;
  align-items:flex-start;
  padding:28px 30px;
  border:1px solid color-mix(in srgb, var(--raw-1f8f5f) 16%, transparent);
  border-radius:30px;
  background:
    linear-gradient(135deg,color-mix(in srgb, var(--raw-0a3723) 96%, transparent),color-mix(in srgb, var(--raw-166643) 92%, transparent) 48%,color-mix(in srgb, var(--raw-f5fff9) 96%, transparent) 49%,var(--white) 100%);
  box-shadow:0 28px 80px color-mix(in srgb, var(--raw-10251a) 18%, transparent);
  overflow:hidden;
}
#dashboard .dashboard-hero-panel::after{
  content:"";
  position:absolute;
  right:28px;
  bottom:-64px;
  width:240px;
  height:240px;
  border-radius:42px;
  transform:rotate(22deg);
  background:linear-gradient(135deg,color-mix(in srgb, var(--raw-59c996) 20%, transparent),color-mix(in srgb, var(--white) 8%, transparent));
  pointer-events:none;
}
#dashboard .dashboard-hero-panel .eyebrow{
  display:inline-flex;
  min-height:30px;
  align-items:center;
  padding:0 12px;
  border-radius:999px;
  background:color-mix(in srgb, var(--white) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--white) 24%, transparent);
  color:var(--raw-bdf5d8);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
}
#dashboard .dashboard-hero-panel h2{
  margin:16px 0 10px;
  color:var(--white);
  font-size:34px;
  line-height:1.12;
  font-weight:950;
  letter-spacing:-.04em;
}
#dashboard .dashboard-hero-panel p{
  max-width:760px;
  color:color-mix(in srgb, var(--white) 78%, transparent);
  font-size:15px;
  line-height:1.75;
}
#dashboard .dashboard-toolbar{
  position:relative;
  z-index:1;
  align-self:flex-start;
  padding:8px;
  border-radius:var(--panel-radius);
  background:color-mix(in srgb, var(--white) 86%, transparent);
  border:1px solid color-mix(in srgb, var(--raw-1f8f5f) 14%, transparent);
  box-shadow:var(--card-system-shadow);
  backdrop-filter:blur(10px);
}
#dashboard .dashboard-time-pill{
  min-height:42px;
  padding:0 16px;
  border-radius:13px;
  font-weight:900;
}
#dashboard .dashboard-time-pill.active{
  background:var(--color-primary);
  color:var(--white);
  box-shadow:0 10px 24px color-mix(in srgb, var(--raw-1f8f5f) 24%, transparent);
}
#dashboard .dashboard-refresh-note{
  color:var(--color-text-secondary);
  font-weight:800;
}
#dashboard .dashboard-kpi-primary{
  display:grid;
  grid-template-columns:1.35fr 1fr .9fr;
  gap:18px;
  margin-top:20px;
}
#dashboard .kpi-large,
#dashboard .kpi-small,
#dashboard .chart-card,
#dashboard .stat-chart-card,
#dashboard .dashboard-procurement-panel,
#dashboard .card{
  border:1px solid color-mix(in srgb, var(--raw-1f8f5f) 13%, transparent);
  background:linear-gradient(145deg,var(--white),var(--color-surface-soft));
}
#dashboard .kpi-large{
  position:relative;
  min-height:168px;
  padding:22px 24px;
  overflow:hidden;
}
#dashboard .kpi-large::before{
  content:"";
  position:absolute;
  right:-46px;
  bottom:-70px;
  width:160px;
  height:160px;
  border-radius:999px;
  background:color-mix(in srgb, var(--raw-1f8f5f) 8%, transparent);
}
#dashboard .kpi-amount-card{
  background:
    radial-gradient(circle at 88% 86%,color-mix(in srgb, var(--raw-59c996) 20%, transparent),transparent 30%),
    linear-gradient(135deg,color-mix(in srgb,var(--color-primary) 62%,var(--raw-000) 38%),var(--color-primary));
  color:var(--white);
  border-color:transparent;
}
#dashboard .kpi-topline .label,
#dashboard .kpi-small .label{
  color:var(--color-text-secondary);
  font-size:13px;
  font-weight:900;
}
#dashboard .kpi-amount-card .label,
#dashboard .kpi-amount-card .hint{
  color:color-mix(in srgb, var(--white) 76%, transparent);
}
#dashboard .kpi-large .value,
#dashboard .kpi-large > div[id^="kpi"],
#dashboard .kpi-small > div[id^="kpi"]{
  color:color-mix(in srgb,var(--color-primary) 54%,var(--raw-000) 46%);
  font-size:36px;
  font-weight:950;
  letter-spacing:-.04em;
}
#dashboard .kpi-amount-card .value,
#dashboard .kpi-amount-card #kpiAmount{
  color:var(--white);
  font-size:42px;
}
#dashboard .kpi-badge{
  min-height:26px;
  padding:0 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:950;
}
#dashboard .dashboard-kpi-secondary{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
  margin-top:16px;
}
#dashboard .kpi-small{
  min-height:116px;
  padding:18px;
}
#dashboard .kpi-small::after{
  height:0;
}
#dashboard .kpi-small .hint,
#dashboard .kpi-large .hint{
  color:var(--color-text-secondary);
  line-height:1.5;
}
#dashboard .dashboard-click{
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#dashboard .dashboard-click:hover,
#dashboard .dashboard-click:focus-visible{
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--raw-1f8f5f) 28%, transparent);
  box-shadow:0 22px 54px color-mix(in srgb, var(--raw-1f3f2b) 13%, transparent);
}
#dashboard .dashboard-core-grid{
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
  gap:18px;
  margin-top:18px;
}
#dashboard .chart-card,
#dashboard .stat-chart-card{
  min-height:286px;
  padding:22px;
}
#dashboard .section-title{
  align-items:flex-start;
  margin-bottom:16px;
}
#dashboard .section-title h3{
  color:var(--raw-132a1e);
  font-size:17px;
  font-weight:950;
  letter-spacing:-.02em;
}
#dashboard .section-title span{
  color:var(--color-text-secondary);
  font-size:12px;
  font-weight:750;
}
#dashboard .funnel-chart,
#dashboard .bullet-chart,
#dashboard .risk-timeline,
#dashboard .stat-chart-card > div:not(.section-title){
  border-radius:var(--chart-radius);
}
#dashboard .dashboard-chart-grid{
  gap:18px;
}
#dashboard .dashboard-chart-grid .stat-chart-card{
  min-height:238px;
}
#dashboard .dashboard-chart-grid-4{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}
#dashboard .dashboard-trend-grid{
  margin-top:18px;
}
#dashboard .dashboard-trend-card{
  min-height:260px;
}
#dashboard .risk-card{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 100% 0,color-mix(in srgb, var(--raw-1f8f5f) 12%, transparent),transparent 34%),
    linear-gradient(145deg,var(--white) 0%,var(--raw-f7fcf9) 100%);
  border-color:color-mix(in srgb, var(--raw-1f8f5f) 20%, transparent);
  box-shadow:0 18px 46px color-mix(in srgb, var(--raw-1f3f2b) 9%, transparent);
}
#dashboard .risk-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:4px;
  background:linear-gradient(90deg,var(--raw-176f4a) 0%,var(--raw-32a875) 56%,var(--raw-f3a31b) 100%);
}
#dashboard .risk-card .section-title{
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding-bottom:15px;
  border-bottom:1px solid color-mix(in srgb, var(--raw-1f8f5f) 13%, transparent);
}
#dashboard .risk-card .dashboard-section-heading{
  display:grid;
  gap:5px;
}
#dashboard .risk-card .dashboard-eyebrow{
  color:var(--raw-26855f);
  font-size:10px;
  font-weight:900;
  letter-spacing:.16em;
  line-height:1;
}
#dashboard .risk-card .section-title h3{
  margin:0;
  font-size:19px;
  letter-spacing:-.025em;
}
#dashboard .risk-card .section-title h3::before{display:none}
#dashboard .risk-card .risk-card-meta{
  display:flex;
  align-items:center;
  gap:6px;
  padding-top:4px;
  color:var(--raw-718579);
  font-size:11px;
  font-weight:750;
  white-space:nowrap;
}
#dashboard .risk-card .risk-card-meta strong{
  color:var(--raw-173d2b);
  font-size:22px;
  font-weight:950;
  line-height:1;
}
#dashboard .risk-card .risk-card-rule{
  margin-left:8px;
  padding-left:10px;
  border-left:1px solid color-mix(in srgb, var(--raw-1f8f5f) 20%, transparent);
}
#dashboard .risk-card .risk-timeline{
  max-height:356px;
  margin:0;
  padding:16px 2px 2px 0;
  overflow:auto;
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb, var(--raw-1f8f5f) 24%, transparent) transparent;
}
#dashboard .risk-card .risk-timeline::before{
  left:9px;
  top:29px;
  bottom:20px;
  width:1px;
  background:linear-gradient(180deg,color-mix(in srgb, var(--raw-1f8f5f) 35%, transparent),color-mix(in srgb, var(--raw-1f8f5f) 8%, transparent));
}
#dashboard .risk-card .risk-timeline-item{
  grid-template-columns:20px minmax(0,1fr);
  gap:12px;
  margin:0 0 10px;
}
#dashboard .risk-card .risk-timeline-item:last-child{margin-bottom:0}
#dashboard .risk-card .risk-node{
  width:11px;
  height:11px;
  margin:18px 0 0 4px;
  border:3px solid var(--white);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--raw-1f8f5f) 22%, transparent),0 3px 10px color-mix(in srgb, var(--raw-1f3f2b) 12%, transparent);
}
#dashboard .risk-card .risk-timeline-item.normal .risk-node{background:var(--raw-39a878)}
#dashboard .risk-card .risk-timeline-item.warning .risk-node{background:var(--raw-f0a018)}
#dashboard .risk-card .risk-timeline-item.danger .risk-node{background:var(--raw-d94a45)}
#dashboard .risk-card .risk-content{
  min-width:0;
  padding:14px 15px 12px;
  border:1px solid color-mix(in srgb, var(--raw-1f8f5f) 14%, transparent);
  border-radius:15px;
  background:color-mix(in srgb, var(--white) 78%, transparent);
  box-shadow:0 7px 20px color-mix(in srgb, var(--raw-1f3f2b) 6%, transparent);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
#dashboard .risk-card .risk-content:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--raw-1f8f5f) 40%, transparent);
  box-shadow:0 13px 28px color-mix(in srgb, var(--raw-1f3f2b) 12%, transparent);
}
#dashboard .risk-card .risk-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 7px;
  color:var(--raw-163c2a);
  font-size:14px;
}
#dashboard .risk-card .risk-head strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:900;
}
#dashboard .risk-card .risk-head .tag{
  flex:0 0 auto;
  margin:0;
  padding:4px 9px;
  border:1px solid color-mix(in srgb, var(--raw-1f8f5f) 22%, transparent);
  border-radius:999px;
  background:var(--raw-eef8f2);
  color:var(--raw-237a54);
  font-size:11px;
  font-weight:850;
}
#dashboard .risk-card .risk-head .tag.red{border-color:color-mix(in srgb, var(--raw-d94a45) 25%, transparent);background:var(--raw-fff1f0);color:var(--raw-bc3632)}
#dashboard .risk-card .risk-head .tag.orange{border-color:color-mix(in srgb, var(--raw-f0a018) 30%, transparent);background:var(--raw-fff7e4);color:var(--raw-a36509)}
#dashboard .risk-card .risk-text{
  display:-webkit-box;
  min-height:19px;
  overflow:hidden;
  color:var(--raw-6b7f73);
  font-size:12px;
  line-height:1.6;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
#dashboard .risk-card .risk-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:11px 0 0;
  padding-top:10px;
  border-top:1px solid color-mix(in srgb, var(--raw-1f8f5f) 10%, transparent);
}
#dashboard .risk-card .risk-actions span{
  overflow:hidden;
  color:var(--raw-7b8d82);
  font-size:11px;
  font-weight:800;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#dashboard .risk-card .risk-actions button{
  min-height:31px;
  padding:6px 13px;
  border:1px solid color-mix(in srgb, var(--raw-1f8f5f) 24%, transparent);
  border-radius:9px;
  background:var(--raw-f3faf6);
  color:var(--raw-1e7953);
  font-size:12px;
  font-weight:850;
  cursor:pointer;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
#dashboard .risk-card .risk-actions button:hover{
  transform:translateY(-1px);
  background:var(--raw-1f8f5f);
  color:var(--white);
}
@media(max-width:700px){
  #dashboard .risk-card .section-title{display:flex;align-items:flex-start}
  #dashboard .risk-card .risk-card-rule{display:none}
  #dashboard .risk-card .risk-card-meta{gap:4px}
}
#dashboard .dashboard-procurement-panel{
  margin-top:22px;
  padding:24px;
  background:
    radial-gradient(circle at 92% 10%,color-mix(in srgb, var(--raw-1f8f5f) 13%, transparent),transparent 26%),
    linear-gradient(145deg,var(--color-surface-soft),var(--white));
}
#dashboard .dashboard-procurement-head h3{
  font-size:19px;
}
#dashboard .dashboard-procurement-actions .btn,
#dashboard .dashboard-time-pill{
  min-width:44px;
  min-height:44px;
}
#dashboard .procurement-home-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
#dashboard .procurement-home-card{
  min-height:230px;
}
#dashboard .procurement-focus-wrap{
  border-radius:18px;
  background:var(--white);
}
#dashboard .glow-progress{
  height:8px;
  background:var(--raw-dceae2);
}
#dashboard .glow-progress i{
  background:linear-gradient(90deg,var(--color-primary),var(--raw-59c996));
}
#dashboard .mini-spark span,
#dashboard .mini-spark i{
  background:var(--color-primary);
}
@media(max-width:1200px){
  #dashboard .dashboard-kpi-primary,
  #dashboard .dashboard-core-grid,
  #dashboard .procurement-home-grid{
    grid-template-columns:1fr;
  }
  #dashboard .dashboard-kpi-secondary,
  #dashboard .dashboard-chart-grid-4{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:760px){
  #dashboard .dashboard-hero-panel{
    padding:22px;
    border-radius:22px;
    background:linear-gradient(135deg,color-mix(in srgb,var(--color-primary) 62%,var(--raw-000) 38%),var(--color-primary));
  }
  #dashboard .dashboard-hero-panel h2{
    font-size:28px;
  }
  #dashboard .dashboard-toolbar{
    width:100%;
    display:grid;
    grid-template-columns:repeat(3,1fr);
  }
  #dashboard .dashboard-refresh-note{
    grid-column:1/-1;
    text-align:center;
    padding:8px 4px 2px;
  }
  #dashboard .dashboard-kpi-secondary,
  #dashboard .dashboard-chart-grid,
  #dashboard .dashboard-chart-grid-4{
    grid-template-columns:1fr;
  }
  #dashboard .kpi-large,
  #dashboard .kpi-small,
  #dashboard .chart-card,
  #dashboard .stat-chart-card{
    border-radius:20px;
  }
}
@media(prefers-reduced-motion:reduce){
  #dashboard .dashboard-click,
  #dashboard .dashboard-time-pill{
    transition:none;
  }
}

/* Personal sales cockpit refresh: consistent with executive dashboard, tuned for individual focus. */
#mydashboard{
  --my-ink:color-mix(in srgb,var(--color-primary) 54%,#000 46%);
  --my-muted:#5f7167;
  --my-line:#dbe9e1;
  --my-soft:var(--color-primary-faint);
  --my-accent:var(--color-primary);
  --my-blue:#2563eb;
  position:relative;
  isolation:isolate;
}
#mydashboard::before{
  content:"";
  position:absolute;
  inset:-24px -28px auto -28px;
  height:360px;
  z-index:-1;
  background:
    radial-gradient(circle at 8% 12%,color-mix(in srgb, var(--raw-59c996) 24%, transparent),transparent 28%),
    radial-gradient(circle at 72% 0%,color-mix(in srgb, var(--raw-1f8f5f) 16%, transparent),transparent 34%),
    linear-gradient(180deg,var(--raw-f1fbf5) 0%,color-mix(in srgb, var(--white) 0%, transparent) 100%);
}
#mydashboard .dashboard-hero-panel{
  min-height:178px;
  align-items:flex-start;
  padding:28px 30px;
  border:1px solid color-mix(in srgb, var(--raw-1f8f5f) 16%, transparent);
  border-radius:30px;
  background:
    linear-gradient(135deg,color-mix(in srgb, var(--raw-0a3723) 96%, transparent),color-mix(in srgb, var(--raw-166643) 92%, transparent) 48%,color-mix(in srgb, var(--raw-f5fff9) 96%, transparent) 49%,var(--white) 100%);
  box-shadow:0 28px 80px color-mix(in srgb, var(--raw-10251a) 18%, transparent);
  overflow:hidden;
}
#mydashboard .dashboard-hero-panel::after{
  content:"";
  position:absolute;
  right:28px;
  bottom:-64px;
  width:240px;
  height:240px;
  border-radius:42px;
  transform:rotate(22deg);
  background:linear-gradient(135deg,color-mix(in srgb, var(--raw-59c996) 20%, transparent),color-mix(in srgb, var(--white) 8%, transparent));
  pointer-events:none;
}
#mydashboard .dashboard-hero-panel .eyebrow{
  display:inline-flex;
  min-height:30px;
  align-items:center;
  padding:0 12px;
  border-radius:999px;
  background:color-mix(in srgb, var(--white) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--white) 24%, transparent);
  color:var(--raw-bdf5d8);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
}
#mydashboard .dashboard-hero-panel h2{
  margin:16px 0 10px;
  color:var(--white);
  font-size:34px;
  line-height:1.12;
  font-weight:950;
  letter-spacing:-.04em;
}
#mydashboard .dashboard-hero-panel p{
  max-width:760px;
  color:color-mix(in srgb, var(--white) 78%, transparent);
  font-size:15px;
  line-height:1.75;
}
#mydashboard .dashboard-selector{
  position:relative;
  z-index:1;
  min-width:280px;
  padding:12px;
  border-radius:20px;
  background:color-mix(in srgb, var(--white) 86%, transparent);
  border:1px solid color-mix(in srgb, var(--raw-1f8f5f) 16%, transparent);
  box-shadow:0 14px 34px color-mix(in srgb, var(--raw-1f3f2b) 8%, transparent);
  backdrop-filter:blur(10px);
}
#mydashboard .field-lite span{
  display:block;
  margin-bottom:8px;
  color:var(--color-text-secondary);
  font-size:12px;
  font-weight:900;
}
#mydashboard .field-lite select{
  width:100%;
  min-height:46px;
  border-radius:14px;
  border:1px solid var(--raw-dbe9e1);
  background:var(--white);
  color:color-mix(in srgb,var(--color-primary) 54%,var(--raw-000) 46%);
  font-size:15px;
  font-weight:800;
  padding:0 12px;
}
#mydashboard .field-lite select:focus{
  outline:none;
  border-color:var(--color-primary);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--raw-1f8f5f) 14%, transparent);
}
#mydashboard .dashboard-kpi-primary{
  display:grid;
  grid-template-columns:1.25fr 1fr .9fr;
  gap:18px;
  margin-top:20px;
}
#mydashboard .kpi-large,
#mydashboard .kpi-small,
#mydashboard .chart-card,
#mydashboard .stat-chart-card,
#mydashboard .card{
  border:1px solid color-mix(in srgb, var(--raw-1f8f5f) 13%, transparent);
  background:linear-gradient(145deg,var(--white),var(--color-surface-soft));
}
#mydashboard .kpi-large{
  position:relative;
  min-height:158px;
  padding:22px 24px;
  overflow:hidden;
}
#mydashboard .kpi-large::before{
  content:"";
  position:absolute;
  right:-52px;
  bottom:-72px;
  width:158px;
  height:158px;
  border-radius:999px;
  background:color-mix(in srgb, var(--raw-1f8f5f) 8%, transparent);
}
#mydashboard .kpi-amount-card{
  background:
    radial-gradient(circle at 90% 86%,color-mix(in srgb, var(--white) 16%, transparent),transparent 28%),
    linear-gradient(135deg,color-mix(in srgb,var(--color-primary) 62%,var(--raw-000) 38%),var(--color-primary));
  border-color:transparent;
  color:var(--white);
}
#mydashboard .kpi-topline .label,
#mydashboard .kpi-small .label{
  color:var(--color-text-secondary);
  font-size:13px;
  font-weight:900;
}
#mydashboard .kpi-amount-card .label,
#mydashboard .kpi-amount-card .hint{
  color:color-mix(in srgb, var(--white) 76%, transparent);
}
#mydashboard .kpi-large .value,
#mydashboard .kpi-large > div[id^="myKpi"],
#mydashboard .kpi-small > div[id^="myKpi"]{
  color:color-mix(in srgb,var(--color-primary) 54%,var(--raw-000) 46%);
  font-size:34px;
  font-weight:950;
  letter-spacing:-.04em;
}
#mydashboard .kpi-amount-card .value,
#mydashboard .kpi-amount-card #myKpiAmount{
  color:var(--white);
  font-size:40px;
}
#mydashboard .kpi-badge{
  min-height:26px;
  padding:0 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:950;
}
#mydashboard .dashboard-kpi-secondary{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
  margin-top:16px;
}
#mydashboard .kpi-small{
  min-height:112px;
  padding:18px;
}
#mydashboard .kpi-small::after{
  height:0;
}
#mydashboard .kpi-small .hint,
#mydashboard .kpi-large .hint{
  color:var(--color-text-secondary);
  line-height:1.5;
}
#mydashboard .dashboard-click{
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#mydashboard .dashboard-click:hover,
#mydashboard .dashboard-click:focus-visible{
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--raw-1f8f5f) 28%, transparent);
  box-shadow:0 22px 54px color-mix(in srgb, var(--raw-1f3f2b) 13%, transparent);
}
#mydashboard .dashboard-core-grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:18px;
  margin-top:18px;
}
#mydashboard .chart-card,
#mydashboard .stat-chart-card{
  min-height:270px;
  padding:22px;
}
#mydashboard .section-title{
  align-items:flex-start;
  margin-bottom:16px;
}
#mydashboard .section-title h3{
  color:var(--raw-132a1e);
  font-size:17px;
  font-weight:950;
  letter-spacing:-.02em;
}
#mydashboard .section-title span{
  color:var(--color-text-secondary);
  font-size:12px;
  font-weight:750;
}
#mydashboard .risk-card{
  background:linear-gradient(145deg,var(--white),var(--raw-fffaf7));
  border-color:color-mix(in srgb, var(--raw-b45309) 15%, transparent);
}
#mydashboard .risk-card{
  display:flex;
  flex-direction:column;
  min-height:270px;
  overflow:hidden;
  padding:20px 22px 16px;
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--cockpit-soft) 32%,var(--white) 68%),var(--white) 42%),
    var(--white);
  border-color:color-mix(in srgb,var(--cockpit-accent-2) 26%,var(--color-border) 74%);
  box-shadow:0 16px 38px color-mix(in srgb,var(--cockpit-shadow) 72%,transparent);
}
#mydashboard .risk-card .section-title{
  align-items:center;
  gap:16px;
  margin:0;
  padding:0 0 14px;
  border-bottom:1px solid var(--cockpit-line);
}
#mydashboard .risk-card .section-title h3{
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--cockpit-ink);
  font-size:17px;
  font-weight:850;
  letter-spacing:0;
}
#mydashboard .risk-card .section-title h3::before{
  content:"";
  width:4px;
  height:18px;
  flex:0 0 auto;
  border-radius:3px;
  background:linear-gradient(180deg,var(--cockpit-accent-2),var(--cockpit-accent));
}
#mydashboard .risk-card .section-title span{
  margin-left:auto;
  color:var(--cockpit-muted);
  font-size:11px;
  font-weight:750;
  white-space:nowrap;
}
#mydashboard .risk-card .risk-timeline{
  flex:1;
  min-height:0;
  margin:0;
  padding:14px 0 0;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--cockpit-line) transparent;
}
#mydashboard .risk-card .risk-timeline::before{
  left:8px;
  top:24px;
  bottom:12px;
  height:auto;
  width:1px;
  background:linear-gradient(180deg,var(--cockpit-line),color-mix(in srgb,var(--cockpit-accent) 22%,transparent));
}
#mydashboard .risk-card .risk-timeline-item{
  grid-template-columns:18px minmax(0,1fr);
  gap:10px;
  margin:0 0 10px;
  padding:0;
}
#mydashboard .risk-card .risk-timeline-item:last-child{margin-bottom:0}
#mydashboard .risk-card .risk-node{
  width:10px;
  height:10px;
  margin:15px 0 0 3px;
  border:2px solid var(--white);
  box-shadow:0 0 0 2px var(--cockpit-line);
}
#mydashboard .risk-card .risk-timeline-item.danger .risk-node{
  background:var(--color-danger);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--color-danger) 20%,var(--white) 80%);
}
#mydashboard .risk-card .risk-timeline-item.warning .risk-node{
  background:var(--color-warning);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--color-warning) 24%,var(--white) 76%);
}
#mydashboard .risk-card .risk-content{
  min-width:0;
  padding:12px 14px;
  border:1px solid var(--cockpit-line);
  border-radius:14px;
  background:color-mix(in srgb,var(--cockpit-soft) 26%,var(--white) 74%);
  box-shadow:0 7px 18px color-mix(in srgb,var(--cockpit-shadow) 52%,transparent);
  transition:transform var(--fast),border-color var(--fast),box-shadow var(--fast);
}
#mydashboard .risk-card .risk-content:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--cockpit-accent) 36%,var(--cockpit-line) 64%);
  box-shadow:0 12px 24px var(--cockpit-shadow);
}
#mydashboard .risk-card .risk-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 6px;
  color:var(--cockpit-ink);
  font-size:14px;
  line-height:1.35;
}
#mydashboard .risk-card .risk-head strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:14px;
  font-weight:850;
}
#mydashboard .risk-card .risk-head .tag{
  flex:0 0 auto;
  margin:0;
  padding:3px 8px;
  border:1px solid color-mix(in srgb,var(--cockpit-accent-2) 34%,var(--white) 66%);
  border-radius:999px;
  background:color-mix(in srgb,var(--cockpit-soft) 62%,var(--white) 38%);
  color:var(--cockpit-accent);
  font-size:11px;
  font-weight:800;
  line-height:1.2;
}
#mydashboard .risk-card .risk-head .tag.red{
  border-color:color-mix(in srgb,var(--color-danger) 28%,var(--white) 72%);
  background:color-mix(in srgb,var(--color-danger) 8%,var(--white) 92%);
  color:var(--color-danger);
}
#mydashboard .risk-card .risk-head .tag.orange{
  border-color:color-mix(in srgb,var(--color-warning) 30%,var(--white) 70%);
  background:color-mix(in srgb,var(--color-warning) 10%,var(--white) 90%);
  color:var(--color-warning-text,var(--color-warning));
}
#mydashboard .risk-card .risk-text{
  display:-webkit-box;
  min-height:18px;
  overflow:hidden;
  color:var(--cockpit-muted);
  font-size:12px;
  line-height:1.55;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
#mydashboard .risk-card .risk-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:10px 0 0;
  padding-top:9px;
  border-top:1px solid color-mix(in srgb,var(--cockpit-line) 72%,transparent);
}
#mydashboard .risk-card .risk-actions span{
  overflow:hidden;
  color:var(--cockpit-muted);
  font-size:11px;
  font-weight:750;
  letter-spacing:.02em;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#mydashboard .risk-card .risk-actions button{
  flex:0 0 auto;
  min-height:32px;
  padding:6px 16px;
  border:0;
  border-radius:8px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--cockpit-accent) 88%,var(--white) 12%),color-mix(in srgb,var(--cockpit-accent) 72%,var(--white) 28%));
  color:var(--white);
  font-size:12px;
  font-weight:800;
  letter-spacing:.01em;
  cursor:pointer;
  box-shadow:0 2px 8px color-mix(in srgb,var(--cockpit-accent) 22%,transparent),inset 0 1px 0 color-mix(in srgb, var(--white) 22%, transparent);
  transition:all var(--fast);
  position:relative;
  overflow:hidden;
}
#mydashboard .risk-card .risk-actions button:hover{
  background:linear-gradient(135deg,color-mix(in srgb,var(--cockpit-accent) 92%,var(--white) 8%),var(--cockpit-accent));
  box-shadow:0 4px 14px color-mix(in srgb,var(--cockpit-accent) 32%,transparent),inset 0 1px 0 color-mix(in srgb, var(--white) 28%, transparent);
  transform:translateY(-1px);
}
#mydashboard .risk-card .risk-actions button:active{
  transform:translateY(0);
  box-shadow:0 1px 4px color-mix(in srgb,var(--cockpit-accent) 18%,transparent);
}
#mydashboard .risk-card .risk-actions button::after{
  content:" →";
  font-size:13px;
  opacity:.7;
  transition:opacity var(--fast),transform var(--fast);
}
#mydashboard .risk-card .risk-actions button:hover::after{
  opacity:1;
  transform:translateX(2px);
}
@media(max-width:600px){
  #mydashboard .risk-card{padding:16px 14px 12px}
  #mydashboard .risk-card .section-title{align-items:flex-start;flex-direction:column;gap:5px}
  #mydashboard .risk-card .section-title span{margin-left:13px}
}
#mydashboard #myRecentList{
  padding:4px;
  border-radius:18px;
  background:linear-gradient(180deg,var(--raw-f7fcf9),var(--white));
}
#mydashboard .mini-list .crm-list-item,
#mydashboard .mini-list .mini-item{
  border-radius:18px;
  border-color:var(--raw-dfece5);
  background:var(--white);
  box-shadow:0 10px 24px color-mix(in srgb, var(--raw-1f3f2b) 6%, transparent);
}
#mydashboard .mini-spark span,
#mydashboard .mini-spark i{
  background:var(--color-primary);
}
@media(max-width:1200px){
  #mydashboard .dashboard-kpi-primary,
  #mydashboard .dashboard-core-grid{
    grid-template-columns:1fr;
  }
  #mydashboard .dashboard-kpi-secondary{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:760px){
  #mydashboard .dashboard-hero-panel{
    padding:22px;
    border-radius:22px;
  }
  #mydashboard .dashboard-hero-panel h2{
    font-size:28px;
  }
  #mydashboard .dashboard-selector{
    width:100%;
    min-width:0;
  }
  #mydashboard .dashboard-kpi-secondary{
    grid-template-columns:1fr;
  }
  #mydashboard .kpi-large,
  #mydashboard .kpi-small,
  #mydashboard .chart-card,
  #mydashboard .stat-chart-card{
    border-radius:20px;
  }
}
@media(prefers-reduced-motion:reduce){
  #mydashboard .dashboard-click{
    transition:none;
  }
}

/* Task Center redesign - action command desk */
#taskcenter{
  --task-ink:#182033;
  --task-muted:var(--color-text-secondary);
  --task-line:#e4e9f2;
  --task-soft:#f7f9fc;
  --task-surface:#ffffff;
  --task-accent:var(--color-info);
  --task-accent-2:var(--color-primary);
  --task-warning:var(--color-warning-text);
  --task-danger:#d92d20;
  --task-danger-bg:#fff1f0;
  --task-amber-bg:color-mix(in srgb,var(--color-warning-soft) 48%,#fff 52%);
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--raw-2563eb) 12%, transparent), transparent 30%),
    radial-gradient(circle at 90% 6%, color-mix(in srgb, var(--raw-0f766e) 10%, transparent), transparent 28%),
    linear-gradient(180deg,var(--raw-f7f9fd) 0%,var(--raw-eef3f9) 44%,var(--color-surface-soft) 100%);
  padding:18px;
  border-radius:24px;
}
#taskcenter .notice{
  position:relative;
  overflow:hidden;
  border:1px solid color-mix(in srgb, var(--raw-2563eb) 14%, transparent);
  border-radius:24px;
  padding:22px 24px 22px 132px;
  min-height:104px;
  display:flex;
  align-items:center;
  color:var(--raw-31415f);
  font-size:15px;
  line-height:1.7;
  background:
    linear-gradient(135deg,color-mix(in srgb, var(--white) 96%, transparent),color-mix(in srgb, var(--raw-eff6ff) 94%, transparent)),
    linear-gradient(90deg,color-mix(in srgb, var(--raw-2563eb) 16%, transparent),color-mix(in srgb, var(--raw-0f766e) 8%, transparent));
  box-shadow:0 18px 46px color-mix(in srgb, var(--gray-900) 8%, transparent);
}
#taskcenter .notice::before{
  content:"行动";
  position:absolute;
  left:24px;
  top:50%;
  transform:translateY(-50%);
  width:78px;
  height:78px;
  border-radius:22px;
  display:grid;
  place-items:center;
  color:var(--white);
  font-weight:800;
  letter-spacing:.08em;
  background:linear-gradient(135deg,var(--raw-1d4ed8),var(--color-primary));
  box-shadow:0 16px 34px color-mix(in srgb, var(--raw-2563eb) 24%, transparent);
}
#taskcenter .notice::after{
  content:"任务提醒中心";
  position:absolute;
  left:132px;
  top:18px;
  color:var(--task-ink);
  font-size:20px;
  font-weight:800;
  letter-spacing:.02em;
}
#taskcenter .notice{
  padding-top:48px;
}
#taskcenter .grid.kpis{
  grid-template-columns:repeat(5,minmax(150px,1fr));
  gap:14px;
  margin-top:16px;
}
#taskcenter .kpi{
  position:relative;
  overflow:hidden;
  min-height:132px;
  border:1px solid color-mix(in srgb, var(--gray-400) 24%, transparent);
  border-radius:22px;
  padding:18px;
  background:color-mix(in srgb, var(--white) 92%, transparent);
  box-shadow:0 14px 30px color-mix(in srgb, var(--gray-900) 7%, transparent);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#taskcenter .kpi::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg,var(--raw-2563eb),var(--color-primary));
}
#taskcenter .kpi::after{
  content:"";
  position:absolute;
  right:-24px;
  bottom:-30px;
  width:96px;
  height:96px;
  border-radius:999px;
  background:color-mix(in srgb, var(--raw-2563eb) 8%, transparent);
}
#taskcenter .kpi[data-task-action="overdue"]::before{background:linear-gradient(90deg,var(--raw-d92d20),var(--raw-f97316))}
#taskcenter .kpi[data-task-action="today"]::before{background:linear-gradient(90deg,var(--color-warning),var(--raw-ea580c))}
#taskcenter .kpi[data-task-action="week"]::before{background:linear-gradient(90deg,var(--color-info),var(--raw-38bdf8))}
#taskcenter .kpi[data-task-action="open"]::before{background:linear-gradient(90deg,var(--color-primary),var(--raw-22c55e))}
#taskcenter .kpi[data-task-action="stale"]::before{background:linear-gradient(90deg,var(--raw-7c3aed),var(--color-info))}
#taskcenter .kpi:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--raw-2563eb) 35%, transparent);
  box-shadow:0 22px 48px color-mix(in srgb, var(--gray-900) 11%, transparent);
}
#taskcenter .kpi .label{
  color:var(--color-text-secondary);
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
}
#taskcenter .kpi .value{
  margin-top:10px;
  color:var(--task-ink);
  font-size:36px;
  line-height:1;
  font-weight:850;
  font-variant-numeric:tabular-nums;
}
#taskcenter .kpi[data-task-action="overdue"] .value{color:var(--task-danger)}
#taskcenter .kpi[data-task-action="today"] .value{color:var(--task-warning)}
#taskcenter .kpi .hint{
  margin-top:12px;
  color:var(--task-muted);
  font-size:13px;
}
#taskcenter .task-command-grid,
#taskcenter .task-single-grid{
  gap:16px;
}
#taskcenter .task-command-grid > .card,
#taskcenter .task-single-grid > .card{
  border:1px solid color-mix(in srgb, var(--gray-400) 24%, transparent);
  padding:18px;
  background:color-mix(in srgb, var(--white) 94%, transparent);
}
#taskcenter .section-title{
  align-items:flex-start;
  gap:12px;
  padding-bottom:14px;
  margin-bottom:12px;
  border-bottom:1px solid var(--task-line);
}
#taskcenter .section-title h3{
  color:var(--task-ink);
  font-size:18px;
  font-weight:800;
  letter-spacing:.01em;
}
#taskcenter .section-title span{
  color:var(--task-muted);
  font-size:13px;
}
#taskcenter #taskUrgentList,
#taskcenter #taskWeekPlan,
#taskcenter #staleProjectList{
  display:grid;
  gap:10px;
}
#taskcenter .crm-list-item,
#taskcenter .customer-risk-click{
  position:relative;
  border:1px solid var(--task-line) !important;
  border-radius:18px;
  padding:14px 14px 14px 16px;
  background:linear-gradient(180deg,var(--white),var(--raw-f9fbfe));
  box-shadow:0 8px 18px color-mix(in srgb, var(--gray-900) 4%, transparent);
  cursor:pointer;
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
#taskcenter .crm-list-item::before,
#taskcenter .customer-risk-click::before{
  content:"";
  position:absolute;
  left:0;
  top:12px;
  bottom:12px;
  width:4px;
  border-radius:0 99px 99px 0;
  background:var(--color-border);
}
#taskcenter .crm-list-item:hover,
#taskcenter .customer-risk-click:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb, var(--raw-2563eb) 34%, transparent) !important;
  box-shadow:0 14px 28px color-mix(in srgb, var(--gray-900) 8%, transparent);
}
#taskcenter .crm-list-item.danger,
#taskcenter #taskUrgentList .crm-list-item{
  background:linear-gradient(180deg,var(--raw-fff7f6),var(--white));
  border-color:color-mix(in srgb, var(--raw-d92d20) 26%, transparent) !important;
}
#taskcenter .crm-list-item.danger::before,
#taskcenter #taskUrgentList .crm-list-item::before{
  background:var(--task-danger);
}
#taskcenter #taskWeekPlan .crm-list-item::before{
  background:var(--task-accent);
}
#taskcenter .crm-list-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
#taskcenter .crm-list-head strong{
  color:var(--task-ink) !important;
  font-size:14px;
  line-height:1.45;
}
#taskcenter #taskUrgentList .crm-list-head strong,
#taskcenter .crm-list-item.danger .crm-list-head strong{
  color:var(--color-danger-text) !important;
}
#taskcenter .crm-list-sub,
#taskcenter .crm-list-note{
  color:var(--task-muted);
  font-size:13px;
  line-height:1.55;
}
#taskcenter .crm-list-note{
  margin-top:7px;
  padding-top:7px;
  border-top:1px dashed color-mix(in srgb, var(--gray-400) 36%, transparent);
}
#taskcenter .tag{
  border-radius:999px;
  padding:4px 9px;
  font-weight:700;
  white-space:nowrap;
}
#taskcenter .tag.red{
  color:var(--color-danger-text);
  background:var(--raw-fee4e2);
  border:1px solid var(--raw-fecdca);
}
#taskcenter .tag.orange{
  color:var(--raw-93370d);
  background:var(--raw-fef0c7);
  border:1px solid var(--raw-fedf89);
}
#taskcenter .tag.green{
  color:var(--color-success-text);
  background:var(--raw-dcfae6);
  border:1px solid var(--raw-abefc6);
}
#taskcenter .tag.blue{
  color:var(--color-info);
  background:var(--raw-d1e9ff);
  border:1px solid var(--raw-b2ddff);
}
#taskcenter .task-type-row{
  display:grid;
  grid-template-columns:minmax(120px,180px) minmax(140px,1fr) 64px;
  align-items:center;
  gap:12px;
  padding:11px 0;
  border-bottom:1px solid var(--task-line);
  color:var(--color-text-secondary);
}
#taskcenter .task-type-row:last-child{border-bottom:none}
#taskcenter .task-type-row span{font-weight:700}
#taskcenter .task-type-row div{
  height:10px;
  border-radius:999px;
  overflow:hidden;
  background:var(--color-surface-soft);
}
#taskcenter .task-type-row i{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--raw-2563eb),var(--color-primary));
}
#taskcenter .task-type-row b{
  color:var(--task-ink);
  font-variant-numeric:tabular-nums;
}
#taskcenter .task-filters{
  display:grid;
  grid-template-columns:repeat(3,minmax(140px,1fr)) minmax(96px,auto);
  gap:10px;
  padding:12px;
  margin-bottom:14px;
  border:1px solid var(--task-line);
  border-radius:18px;
  background:var(--color-surface-soft);
}
#taskcenter .task-filters select,
#taskcenter .task-filters button{
  min-height:44px;
  border-radius:14px;
}
#taskcenter .task-filters select{
  border:1px solid var(--raw-d7deea);
  background:var(--white);
  color:var(--color-text-secondary);
  font-weight:600;
}
#taskcenter .task-table-wrap{
  max-height:620px;
  border:1px solid var(--task-line);
  border-radius:20px;
  background:var(--white);
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--white) 70%, transparent);
}
#taskcenter .task-table{
  border-collapse:separate;
  border-spacing:0;
  min-width:1180px;
  font-size:13px;
}
#taskcenter .task-table thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:var(--color-surface-soft);
  color:var(--color-text-secondary);
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  border-bottom:1px solid var(--task-line);
}
#taskcenter .task-table tbody tr{
  transition:background .15s ease;
}
#taskcenter .task-table tbody tr:hover{
  background:var(--color-surface-soft);
}
#taskcenter .task-table td{
  border-bottom:1px solid var(--raw-edf1f7);
  color:var(--color-text-secondary);
  line-height:1.5;
}
#taskcenter .task-table td:nth-child(3) strong{
  color:var(--task-ink) !important;
}
#taskcenter .task-table .cell-sub{
  color:var(--color-text-secondary);
  font-size:12px;
}
#taskcenter .task-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
#taskcenter .task-actions .action-link{
  min-width:36px;
  min-height:36px;
  border-radius:12px;
  border:1px solid var(--raw-d7deea);
  background:var(--white);
  color:var(--color-text-secondary);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 10px color-mix(in srgb, var(--gray-900) 5%, transparent);
}
#taskcenter .task-actions .icon-btn:hover,
#taskcenter .task-actions .action-link:hover{
  color:var(--color-info);
  border-color:var(--raw-b2ddff);
  background:var(--raw-eff8ff);
}
#taskcenter .empty{
  border:1px dashed var(--color-border);
  border-radius:16px;
  padding:18px;
  color:var(--color-text-secondary);
  background:var(--color-surface-soft);
  text-align:center;
}
#taskcenter .pagination-container{
  margin-top:14px;
}
@media (max-width:1180px){
  #taskcenter .grid.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  #taskcenter{padding:12px;border-radius:18px}
  #taskcenter .notice{padding:96px 16px 18px 16px}
  #taskcenter .notice::before{left:16px;top:18px;transform:none;width:62px;height:62px;border-radius:18px}
  #taskcenter .notice::after{left:92px;top:30px;font-size:18px}
  #taskcenter .grid.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  #taskcenter .task-command-grid{grid-template-columns:1fr}
  #taskcenter .task-filters{grid-template-columns:1fr}
}
@media (max-width:560px){
  #taskcenter .grid.kpis{grid-template-columns:1fr}
  #taskcenter .task-command-grid > .card,
  #taskcenter .task-single-grid > .card{padding:14px}
  #taskcenter .task-type-row{grid-template-columns:1fr;gap:8px}
}
@media (prefers-reduced-motion:reduce){
  #taskcenter .kpi,
  #taskcenter .crm-list-item,
  #taskcenter .customer-risk-click,
  #taskcenter .task-table tbody tr{
    transition:none;
  }
}


/* UI/UX Pro Max - Project details redesign: project dossier workspace */
#projects{
  --project-ink:var(--color-text);
  --project-muted:var(--color-text-secondary);
  --project-line:#dfe7f2;
  --project-soft:#f6f9fd;
  --project-card:#ffffff;
  --project-primary:var(--color-primary);
  --project-primary-2:#2563eb;
  --project-warn:#b45309;
  --project-danger:var(--color-warning-text);
  position:relative;
}
#projects > .card{
  position:relative;
  overflow:hidden;
  border:1px solid color-mix(in srgb, var(--gray-400) 22%, transparent);
  padding:18px;
  background:
    radial-gradient(circle at 8% 0%,color-mix(in srgb, var(--raw-0f766e) 12%, transparent),transparent 28%),
    radial-gradient(circle at 94% 8%,color-mix(in srgb, var(--raw-2563eb) 10%, transparent),transparent 30%),
    linear-gradient(180deg,var(--white),var(--color-surface-soft) 72%,var(--raw-f7fafc));
  box-shadow:0 20px 54px color-mix(in srgb, var(--gray-900) 8%, transparent);
}
#projects > .card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:5px;
  background:linear-gradient(90deg,var(--project-primary),var(--project-primary-2));
}
#projects .section-title{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  padding:10px 4px 18px;
  margin-bottom:14px;
  border-bottom:1px solid var(--project-line);
}
#projects .section-title h3{
  margin:0;
  color:var(--project-ink);
  font-size:24px;
  font-weight:850;
  letter-spacing:-.02em;
}
.project-title-actions{
  display:flex;
  align-items:center;
  gap:12px;
}
#projects .total-count-badge{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 14px;
  border-radius:999px;
  color:var(--project-primary);
  background:color-mix(in srgb, var(--raw-0f6b4e) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--raw-0f6b4e) 20%, transparent);
  font-weight:800;
}
#projects #newBtn{
  min-height:44px;
  border-radius:14px;
  padding:0 18px;
  font-weight:800;
  box-shadow:0 12px 24px color-mix(in srgb, var(--raw-0f766e) 18%, transparent);
}
#projects .filters{
  position:relative;
  display:grid;
  grid-template-columns:minmax(260px,1.8fr) repeat(4,minmax(118px,1fr));
  gap:6px;
  padding:10px;
  margin-bottom:12px;
  border:1px solid var(--project-line);
  border-radius:22px;
  background:color-mix(in srgb, var(--white) 82%, transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--white) 90%, transparent),0 12px 28px color-mix(in srgb, var(--gray-900) 5%, transparent);
}
#projects .filters input,
#projects .filters select,
#projects .filters button{
  min-height:36px;
  border-radius:12px;
  font-size:13px;
}
#projects .filters input,
#projects .filters select{
  border:1px solid var(--color-border-soft);
  background:var(--white);
  color:var(--color-text-secondary);
  font-weight:650;
}
#projects .filters input:focus,
#projects .filters select:focus{
  border-color:color-mix(in srgb, var(--raw-0f766e) 55%, transparent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--raw-0f766e) 12%, transparent);
  outline:none;
}
#projects #resetFilterBtn{
  color:var(--color-text-secondary);
  background:var(--color-surface-soft);
  border:1px solid var(--color-border-soft);
  font-weight:800;
}
#projects .project-table-wrap{
  max-height:680px;
  border:1px solid var(--project-line);
  border-radius:22px;
  background:var(--white);
  box-shadow:0 16px 36px color-mix(in srgb, var(--gray-900) 6%, transparent);
}
#projects .project-table{
  min-width:1460px;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
  font-size:13px;
}
#projects .project-table th{
  position:sticky;
  top:0;
  z-index:2;
  padding:13px 10px;
  color:var(--color-text-secondary);
  background:var(--color-surface-soft);
  border-bottom:1px solid var(--project-line);
  font-size:12px;
  font-weight:850;
  letter-spacing:.04em;
}
#projects .project-table td{
  padding:13px 10px;
  border-bottom:1px solid var(--raw-edf2f7);
  color:var(--color-text-secondary);
  vertical-align:top;
  line-height:1.55;
}
#projects .project-table tbody tr{
  transition:background .16s ease, box-shadow .16s ease;
}
#projects .project-table tbody tr:hover{
  background:var(--raw-f7fbfa);
  box-shadow:inset 4px 0 0 var(--project-primary);
}
#projects .project-table th:nth-child(1),
#projects .project-table td:nth-child(1){width:52px;text-align:center;color:var(--color-text-secondary);font-weight:800}
#projects .project-table th:nth-child(2),
#projects .project-table td:nth-child(2){width:82px;text-align:center}
#projects .project-table th:nth-child(3),
#projects .project-table td:nth-child(3){width:270px}
#projects .project-table th:nth-child(4),
#projects .project-table td:nth-child(4){width:170px}
#projects .project-table th:nth-child(5),
#projects .project-table td:nth-child(5){width:145px}
#projects .project-table th:nth-child(6),
#projects .project-table td:nth-child(6){width:130px}
#projects .project-table th:nth-child(7),
#projects .project-table td:nth-child(7){width:122px}
#projects .project-table th:nth-child(8),
#projects .project-table td:nth-child(8){width:360px}
#projects .project-table th:nth-child(9),
#projects .project-table td:nth-child(9){width:150px}
#projects .project-table .cell-main,
#projects .project-table td strong{
  color:var(--project-ink);
  font-size:13px;
  font-weight:850;
}
#projects .project-table .cell-sub{
  margin-top:3px;
  color:var(--project-muted);
  font-size:12px;
}
#projects .project-cell-tags{
  gap:6px;
  margin-top:8px;
}
#projects .project-cell-tags .tag,
#projects .project-table .tag{
  border-radius:999px;
  padding:4px 8px;
  font-weight:800;
}
#projects .project-table .action-link,
#projects .project-table button{
  min-width:36px;
  min-height:36px;
  border-radius:12px;
}
#projects #projectPagination{
  margin-top:14px;
}
.drawer-panel.project-detail-panel{
  width:min(1280px,96vw);
  max-width:min(1280px,96vw);
  border-radius:28px 0 0 28px;
  padding:0;
  overflow:hidden;
  background:
    radial-gradient(circle at 0% 0%,color-mix(in srgb, var(--raw-0f766e) 10%, transparent),transparent 28%),
    linear-gradient(180deg,var(--zway-surface-soft,var(--color-surface-soft)),var(--zway-surface,var(--card-bg,var(--white))));
  box-shadow:var(--zway-shadow-md,-28px 0 70px color-mix(in srgb, var(--gray-900) 18%, transparent));
}
.project-detail-panel .drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 22px;
  border-bottom:1px solid var(--project-line,var(--raw-dfe7f2));
  background:color-mix(in srgb,var(--zway-surface,var(--card-bg,var(--white))) 92%,transparent);
  backdrop-filter:blur(12px);
}
.project-detail-panel .drawer-head h3,
#drawerTitle{
  color:var(--color-text);
  font-size:22px;
  font-weight:850;
  letter-spacing:-.02em;
}
.project-detail-panel .drawer-head .btn,
.project-detail-panel #closeDrawerBtn{
  min-height:40px;
  border-radius:12px;
  font-weight:800;
}
.project-detail-panel .drawer-subtitle{
  margin:14px 18px 0;
  padding:12px 14px;
  border:1px solid var(--zway-primary-border,var(--raw-cde8df));
  border-radius:var(--zway-radius-lg,16px);
  color:var(--zway-primary,var(--color-primary,var(--raw-0f513f)));
  background:linear-gradient(135deg,var(--zway-primary-soft,var(--raw-ecfdf5)),var(--zway-surface-soft,var(--color-info-soft)));
  font-size:13px;
  line-height:1.55;
}
.project-detail-panel .project-drawer-switch{
  position:sticky;
  top:0;
  z-index:5;
  display:flex;
  gap:8px;
  padding:14px 18px 10px;
  border-bottom:1px solid var(--project-line,var(--raw-dfe7f2));
  background:color-mix(in srgb,var(--zway-surface-soft,var(--raw-f8fbff)) 94%,transparent);
  backdrop-filter:blur(12px);
}
.project-detail-panel .project-drawer-tab{
  min-width:118px;
  min-height:44px;
  border:1px solid var(--zway-border,var(--color-border-soft));
  border-radius:var(--zway-radius-md,14px);
  background:var(--zway-surface,var(--card-bg,var(--white)));
  color:var(--zway-text-muted,var(--color-text-secondary));
  font-size:14px;
  font-weight:850;
  cursor:pointer;
  transition:background .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.project-detail-panel .project-drawer-tab:hover{
  border-color:var(--zway-primary);
  background:var(--zway-primary-soft);
  color:var(--zway-primary);
}
.project-detail-panel .project-drawer-tab.active{
  color:var(--zway-text-on-primary,var(--white));
  background:linear-gradient(135deg,var(--zway-primary),var(--zway-primary-hover));
  border-color:transparent;
  box-shadow:var(--zway-shadow-sm,0 12px 24px color-mix(in srgb, var(--raw-0f766e) 18%, transparent));
}
.project-detail-panel .detail-tab-content{
  padding:18px;
}
.project-detail-panel #projectOverviewContent{
  display:block;
}
.project-detail-panel .project-unified-header{
  border:1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
  border-radius:24px;
  padding:18px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--color-primary) 10%, transparent), transparent 30%),
    linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 8%, var(--white)), var(--white));
  box-shadow:0 16px 36px color-mix(in srgb, var(--gray-900) 6%, transparent);
}
.project-detail-panel .project-unified-eyebrow{
  color:var(--color-primary);
  font-weight:900;
  letter-spacing:.08em;
}
.project-detail-panel .project-unified-header h2{
  color:var(--color-text);
  font-size:26px;
  line-height:1.25;
  letter-spacing:-.03em;
}
.project-detail-panel .project-unified-tags .tag{
  min-height:28px;
  border-radius:999px;
  padding:5px 10px;
  font-weight:800;
}
.project-detail-panel .project-related-strip{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin:14px 0;
  padding:13px 14px;
  border:1px solid var(--color-info-soft);
  border-radius:18px;
  background:color-mix(in srgb,var(--color-info-soft) 55%,var(--white) 45%);
  color:var(--color-text-secondary);
}
.project-detail-panel .project-section-card-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.project-detail-panel .project-section-card{
  border:1px solid var(--zway-border);
  border-radius:var(--zway-radius-lg,22px);
  overflow:hidden;
  background:var(--zway-surface);
  box-shadow:var(--zway-shadow-sm);
}
.project-detail-panel .project-section-card:nth-child(4),
.project-detail-panel .project-section-card:nth-child(6),
.project-detail-panel .project-section-card:nth-child(7),
.project-detail-panel .project-section-card:nth-child(8),
.project-detail-panel .project-section-card:nth-child(9){
  grid-column:1/-1;
}
.project-detail-panel .project-section-card-head{
  padding:15px 16px;
  background:linear-gradient(135deg,var(--zway-surface-soft),var(--zway-primary-soft));
  border-bottom:1px solid var(--zway-border);
}
.project-detail-panel .project-section-card-head h4{
  color:var(--zway-text);
  font-size:16px;
  font-weight:850;
}
.project-detail-panel .project-section-card-head p{
  color:var(--zway-text-muted);
  font-size:12px;
}
.project-detail-panel .section-completion{
  color:var(--color-primary);
  background:var(--color-success-soft);
  border-color:color-mix(in srgb,var(--color-success) 24%,var(--white) 76%);
}
.project-detail-panel .project-section-card-body{
  padding:15px 16px;
}
.project-detail-panel .project-overview-field-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 18px;
}
.project-detail-panel .overview-kv{
  display:grid;
  grid-template-columns:126px minmax(0,1fr);
  gap:10px;
  padding:9px 0;
  border-bottom:1px solid var(--color-surface-soft);
}
.project-detail-panel .overview-kv .k{
  color:var(--color-text-secondary);
  font-size:12px;
  font-weight:750;
}
.project-detail-panel .overview-kv .v{
  color:var(--color-text);
  font-size:13px;
  line-height:1.6;
  word-break:break-word;
}
.project-detail-panel .overview-actions{
  position:sticky;
  bottom:0;
  z-index:4;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin:18px -18px -18px;
  padding:14px 18px;
  border-top:1px solid var(--color-border);
  background:color-mix(in srgb, var(--white) 94%, transparent);
  backdrop-filter:blur(12px);
}
.project-detail-panel .overview-actions .btn{
  min-height:44px;
  border-radius:14px;
  font-weight:850;
}
.project-detail-panel .project-form-tabs-layout{
  gap:14px;
}
.project-detail-panel .project-form-tabs{
  position:sticky;
  top:0;
  z-index:6;
  display:flex;
  gap:8px;
  padding:12px;
  border:1px solid var(--color-border-soft);
  border-radius:20px;
  background:color-mix(in srgb, var(--white) 88%, transparent);
  box-shadow:0 10px 24px color-mix(in srgb, var(--gray-900) 5%, transparent);
}
.project-detail-panel .project-form-tab{
  min-width:124px;
  min-height:46px;
  border-radius:14px;
  border:1px solid var(--color-border-soft);
  background:var(--white);
  color:var(--color-text-secondary);
}
.project-detail-panel .project-form-tab:hover{
  color:var(--color-primary);
  background:var(--raw-f0fdfa);
  border-color:color-mix(in srgb, var(--raw-0f766e) 42%, transparent);
}
.project-detail-panel .project-form-tab.active{
  color:var(--white);
  background:linear-gradient(135deg,var(--color-primary),var(--raw-2563eb));
  border-color:transparent;
  box-shadow:0 12px 24px color-mix(in srgb, var(--raw-0f766e) 20%, transparent);
}
.project-detail-panel .project-form-tab.completed{
  color:var(--color-primary);
  background:var(--color-success-soft);
  border-color:color-mix(in srgb,var(--color-success) 24%,var(--white) 76%);
}
.project-detail-panel .project-form-panel{
  border:1px solid var(--zway-border);
  border-radius:var(--zway-radius-lg,24px);
  background:var(--zway-surface);
  box-shadow:var(--zway-shadow-md);
}
.project-detail-panel .project-form-panel-head{
  padding:16px 18px;
  background:linear-gradient(135deg,var(--zway-surface-soft),var(--zway-primary-soft));
  border-bottom:1px solid var(--zway-border);
}
.project-detail-panel .project-form-panel-head h4{
  color:var(--zway-text);
  font-size:18px;
  font-weight:850;
}
.project-detail-panel .project-form-panel-head p{
  color:var(--zway-text-muted);
  font-size:13px;
}
.project-detail-panel .project-form-section-body{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  padding:18px;
  align-items:start;
}
.project-detail-panel .project-form-section-body > *{
  min-width:0;
}
.project-detail-panel .field,
.project-detail-panel .field-lite{
  border:1px solid var(--zway-border);
  border-radius:var(--zway-radius-md,16px);
  padding:10px 12px;
  background:var(--zway-surface-muted);
  min-width:0;
  box-sizing:border-box;
}
.project-detail-panel .field span,
.project-detail-panel .field-lite span{
  color:var(--zway-text-muted);
  font-size:12px;
  font-weight:850;
  line-height:1.35;
}
.project-detail-panel .field input,
.project-detail-panel .field select,
.project-detail-panel .field textarea,
.project-detail-panel .field-lite input,
.project-detail-panel .field-lite select,
.project-detail-panel .field-lite textarea{
  min-width:0;
  width:100%;
  box-sizing:border-box;
  min-height:42px;
  border-radius:12px;
  border:1px solid var(--zway-border);
  background:var(--zway-surface);
  color:var(--zway-text);
  font-size:14px;
}
.project-detail-panel .field textarea,
.project-detail-panel .field-lite textarea{
  min-height:92px;
}
.project-detail-panel .field input:focus,
.project-detail-panel .field select:focus,
.project-detail-panel .field textarea:focus,
.project-detail-panel .field-lite input:focus,
.project-detail-panel .field-lite select:focus,
.project-detail-panel .field-lite textarea:focus{
  border-color:var(--zway-primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--zway-primary) 12%,transparent);
  outline:none;
}
.project-detail-panel .field em,
.project-detail-panel .field-lite em{
  color:var(--zway-text-muted);
  font-size:12px;
  line-height:1.45;
}
.project-detail-panel .project-form-step-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:4px 0 12px;
}
.project-detail-panel .project-form-step-nav .btn{
  min-height:42px;
  border-radius:14px;
  font-weight:850;
}
.project-detail-panel .project-form-step-nav span{
  min-width:74px;
  text-align:center;
  color:var(--color-text-secondary);
  font-weight:850;
}
.project-detail-panel .project-form-tabs-layout .form-actions{
  position:sticky;
  bottom:0;
  z-index:7;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:14px 18px;
  margin:0 -18px -18px;
  border-top:1px solid var(--color-border);
  background:color-mix(in srgb, var(--white) 94%, transparent);
  backdrop-filter:blur(12px);
}
.project-detail-panel .project-form-tabs-layout .form-actions .btn{
  min-height:44px;
  min-width:96px;
  border-radius:14px;
  font-weight:850;
}
@media (max-width:1200px){
  .stats-kpi-row.registration-stats-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  #projects .filters{grid-template-columns:repeat(3,minmax(0,1fr))}
  .project-detail-panel .project-section-card-grid{grid-template-columns:1fr}
}
@media (max-width:820px){
  .stats-kpi-row.registration-stats-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  #projects > .card{padding:14px}
  #projects .section-title{grid-template-columns:1fr}
  #projects #newBtn{width:100%}
  #projects .filters{grid-template-columns:1fr}
  .drawer-panel.project-detail-panel{width:100vw;max-width:100vw;border-radius:0}
  .project-detail-panel .drawer-head{padding:14px}
  .project-detail-panel .project-drawer-switch{padding:12px;overflow-x:auto}
  .project-detail-panel .detail-tab-content{padding:12px}
  .project-detail-panel .project-overview-field-grid,
  .project-detail-panel .project-form-section-body{grid-template-columns:1fr}
  .project-detail-panel .project-form-section-body .span2,
  .project-detail-panel .project-form-section-body .span3{grid-column:1/-1}
  .project-detail-panel .overview-kv{grid-template-columns:1fr;gap:4px}
  .project-detail-panel .project-form-tabs{overflow-x:auto}
  .project-detail-panel .project-form-tabs-layout .form-actions,
  .project-detail-panel .overview-actions{margin-left:-12px;margin-right:-12px;margin-bottom:-12px;flex-wrap:wrap}
}

@media (max-width:560px){
  .stats-kpi-row.registration-stats-kpis{grid-template-columns:1fr}
}

/* Project registration: compact list summary and full audit workspace. */
#projects .project-table{
  min-width:1430px!important;
}
#projects .project-table th:nth-child(2),
#projects .project-table td:nth-child(2){width:112px!important}
#projects .project-table th:nth-child(9),
#projects .project-table td:nth-child(9){width:126px!important;min-width:126px!important;white-space:normal!important}
#projects .project-table th:nth-child(10),
#projects .project-table td:nth-child(10){width:335px!important;min-width:335px!important;white-space:normal!important}
#projects .project-table th:nth-child(11),
#projects .project-table td:nth-child(11){width:132px!important;min-width:132px!important;white-space:nowrap!important}

.project-registration-status-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  cursor:pointer;
}
label:has(#f_manufacturerReportDate),
label:has(#edit_manufacturerReportDate){
  display:none!important;
}
.project-registration-status-link small{
  color:var(--color-text-muted,var(--raw-667085));
  font-size:11px;
  white-space:nowrap;
}
.project-registration-panel{
  width:100%;
  min-width:0;
}
.project-registration-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 14px;
  border:1px solid color-mix(in srgb,var(--primary,var(--color-primary)) 18%,var(--color-border,var(--raw-dbe7df)));
  border-radius:10px;
  background:var(--primary-light,var(--color-primary-soft));
}
.project-registration-toolbar > div{
  display:grid;
  gap:3px;
  min-width:0;
}
.project-registration-toolbar-actions{
  display:flex!important;
  align-items:flex-end;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.project-registration-status-control{
  display:grid;
  gap:4px;
  min-width:170px;
}
.project-registration-status-control > span{
  color:var(--color-text-muted,var(--raw-667085));
  font-size:11px;
  line-height:1.2;
}
.project-registration-status-control select{
  min-width:170px;
  min-height:36px;
  padding:6px 30px 6px 10px;
  border:1px solid var(--color-border,var(--raw-dbe7df));
  border-radius:8px;
  background:var(--white);
  color:var(--color-text,var(--raw-17251e));
  font-size:13px;
}
.project-registration-status-control select:disabled{
  cursor:not-allowed;
  opacity:.7;
}
.project-registration-status-hint{
  margin-top:8px;
  color:var(--color-text-muted,var(--raw-667085));
  font-size:12px;
  line-height:1.5;
}
.project-registration-toolbar strong{
  color:var(--color-text,var(--raw-17251e));
  font-size:14px;
}
.project-registration-toolbar span{
  color:var(--color-text-muted,var(--raw-667085));
  font-size:12px;
  line-height:1.5;
}
.project-registration-list{
  display:grid;
  gap:10px;
  margin-top:10px;
}
.project-registration-item{
  position:relative;
  display:grid;
  gap:10px;
  padding:13px 14px;
  border:1px solid var(--color-border,var(--raw-dbe7df));
  border-left:3px solid var(--primary,var(--color-primary));
  border-radius:10px;
  background:var(--white);
}
.project-registration-item.status-报备中{border-left-color:var(--color-warning,var(--raw-d97706))}
.project-registration-item.status-已反馈{border-left-color:var(--color-success,var(--raw-16845b))}
.project-registration-item-head,
.project-registration-item-head > div,
.project-registration-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.project-registration-item-head{
  justify-content:space-between;
}
.project-registration-item-head strong{
  color:var(--color-text,var(--raw-17251e));
  font-size:14px;
}
.project-registration-item-head time{
  color:var(--color-text-muted,var(--raw-667085));
  font-size:11px;
  white-space:nowrap;
}
.project-registration-meta{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:8px;
}
.project-registration-meta span{
  display:grid;
  gap:3px;
  min-width:0;
  padding:8px 10px;
  border-radius:8px;
  background:var(--color-surface-soft,var(--raw-f7faf8));
  color:var(--color-text,var(--raw-17251e));
  font-size:12px;
  overflow-wrap:anywhere;
}
.project-registration-meta b{
  color:var(--color-text-muted,var(--raw-667085));
  font-size:11px;
  font-weight:600;
}
.project-registration-item > p{
  margin:0;
  color:var(--color-text-secondary,var(--raw-48564f));
  font-size:12px;
  line-height:1.6;
  white-space:pre-wrap;
}
.project-registration-actions{
  flex-wrap:wrap;
  justify-content:flex-end;
}
.project-registration-empty{
  display:grid;
  gap:5px;
  place-items:center;
  min-height:100px;
  padding:18px;
  border:1px dashed var(--color-border,var(--raw-dbe7df));
  border-radius:10px;
  color:var(--color-text-muted,var(--raw-667085));
  text-align:center;
}
.project-registration-empty strong{color:var(--color-text,var(--raw-17251e))}
.project-registration-form-tools{
  display:block!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
.registration-modal-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
  padding:11px 12px;
  border-left:3px solid var(--primary,var(--color-primary));
  background:var(--primary-light,var(--color-primary-soft));
}
.registration-modal-summary strong{color:var(--color-text,var(--raw-17251e))}
.registration-modal-summary span{color:var(--color-text-muted,var(--raw-667085));font-size:12px;text-align:right}
.registration-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.registration-form-grid label,
.registration-withdraw-field{
  display:grid;
  gap:6px;
  color:var(--color-text-secondary,var(--raw-48564f));
  font-size:12px;
  font-weight:700;
}
.registration-form-grid label.full{grid-column:1/-1}
.registration-form-grid input,
.registration-form-grid select,
.registration-form-grid textarea,
.registration-withdraw-field textarea{
  width:100%;
  box-sizing:border-box;
}
.registration-vendor-field{position:relative}
.registration-vendor-picker{position:relative}
.registration-vendor-select{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.registration-vendor-results{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 4px);
  z-index:30;
  display:none;
  max-height:220px;
  overflow-y:auto;
  padding:4px;
  border:1px solid var(--color-border,var(--raw-dbe7df));
  border-radius:10px;
  background:var(--card-bg,var(--white));
  box-shadow:0 12px 32px color-mix(in srgb, var(--gray-900) 14%, transparent);
}
.registration-vendor-results.open{display:block}
.registration-vendor-count{
  padding:6px 8px;
  color:var(--color-text-muted,var(--raw-667085));
  font-size:12px;
  font-weight:700;
}
.registration-vendor-option{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  min-height:44px;
  padding:8px 10px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--color-text,var(--raw-17251e));
  font:inherit;
  font-size:13px;
  text-align:left;
  cursor:pointer;
}
.registration-vendor-option:hover,
.registration-vendor-option:focus-visible{
  background:var(--primary-light,var(--color-primary-soft));
  outline:none;
}
.registration-vendor-option strong{display:block;font-weight:700}
.registration-vendor-option small{
  display:block;
  margin-top:2px;
  color:var(--color-text-muted,var(--raw-667085));
  font-size:11px;
}
.registration-vendor-option .registration-vendor-brand{flex:0 0 auto}
.registration-vendor-empty{
  padding:16px 10px;
  color:var(--color-text-muted,var(--raw-667085));
  font-size:13px;
  text-align:center;
}
.registration-history-list{
  display:grid;
  gap:0;
}
.registration-history-list article{
  display:grid;
  grid-template-columns:130px 1fr;
  gap:14px;
  padding:12px 0;
  border-bottom:1px solid var(--color-border,var(--raw-e5ece8));
}
.registration-history-list time{color:var(--color-text-muted,var(--raw-667085));font-size:12px}
.registration-history-list article > div{display:grid;gap:4px}
.registration-history-list span{color:var(--color-text-muted,var(--raw-667085));font-size:12px;line-height:1.5}

@media(max-width:820px){
  .project-registration-toolbar{
    align-items:stretch;
  }
  .project-registration-meta{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media(max-width:560px){
  .project-registration-toolbar,
  .project-registration-item-head,
  .registration-modal-summary{
    align-items:stretch;
    flex-direction:column;
  }
  .project-registration-toolbar-actions{
    display:grid!important;
    grid-template-columns:1fr;
    align-items:stretch;
  }
  .project-registration-status-control,
  .project-registration-status-control select{
    width:100%;
  }
  .project-registration-toolbar .btn{width:100%;min-height:44px}
  .project-registration-meta{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .registration-form-grid{
    grid-template-columns:1fr;
  }
  .registration-form-grid label.full{grid-column:auto}
  .project-registration-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .project-registration-actions .btn{min-height:42px;width:100%}
  .registration-history-list article{
    grid-template-columns:1fr;
    gap:5px;
  }
  .registration-modal-summary span{text-align:left}
}
@media(max-width:380px){
  .project-registration-meta{
    grid-template-columns:1fr;
  }
}
@media (prefers-reduced-motion:reduce){
  #projects .project-table tbody tr,
  .project-detail-panel .project-drawer-tab,
  .project-detail-panel .project-form-tab{
    transition:none;
  }
}

/* Project details title cleanup */
#projects .section-title h3::after{
  content:none!important;
  display:none!important;
}

/* Project details title cleanup v2: keep workspace subtitle, hide legacy title */
#projects .section-title h3{
  font-size:24px!important;
  line-height:1.25!important;
}

/* UI/UX Pro Max - Field check-in redesign */
#checkin{
  --checkin-ink:var(--color-text);
  --checkin-muted:var(--color-text-secondary);
  --checkin-line:var(--color-border-soft);
  --checkin-soft:#f6f9fd;
  --checkin-surface:#ffffff;
  --checkin-primary:var(--color-primary);
  --checkin-blue:var(--color-info);
  --checkin-green:var(--color-success);
  --checkin-orange:var(--color-warning);
  --checkin-red:var(--color-danger);
  position:relative;
  padding:18px;
  border-radius:26px;
  background:
    radial-gradient(circle at 8% 0%,color-mix(in srgb, var(--raw-0f766e) 13%, transparent),transparent 30%),
    radial-gradient(circle at 92% 6%,color-mix(in srgb, var(--raw-2563eb) 12%, transparent),transparent 28%),
    linear-gradient(180deg,var(--color-surface-soft) 0%,var(--raw-f3f8f6) 48%,var(--color-surface-soft) 100%);
  border:1px solid color-mix(in srgb, var(--gray-400) 22%, transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--white) 78%, transparent);
}
#checkin .page-header{
  position:relative;
  overflow:hidden;
  min-height:126px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:24px 26px 24px 142px;
  border:1px solid color-mix(in srgb, var(--raw-0f766e) 16%, transparent);
  border-radius:28px;
  background:
    linear-gradient(135deg,color-mix(in srgb, var(--white) 96%, transparent),color-mix(in srgb, var(--raw-ecfdf5) 92%, transparent)),
    linear-gradient(90deg,color-mix(in srgb, var(--raw-0f766e) 10%, transparent),color-mix(in srgb, var(--raw-2563eb) 8%, transparent));
  box-shadow:0 20px 54px color-mix(in srgb, var(--gray-900) 8%, transparent);
}
#checkin .page-header::before{
  content:"GPS";
  position:absolute;
  left:26px;
  top:24px;
  width:88px;
  height:76px;
  border-radius:24px;
  display:grid;
  place-items:center;
  color:var(--white);
  font-size:18px;
  font-weight:900;
  letter-spacing:.12em;
  background:linear-gradient(135deg,var(--color-primary),var(--raw-2563eb));
  box-shadow:0 18px 34px color-mix(in srgb, var(--raw-0f766e) 24%, transparent);
}
#checkin .page-header::after{
  content:"销售拜访、客户现场、项目跟进，一页完成外勤记录和团队统计。";
  position:absolute;
  left:142px;
  top:68px;
  max-width:620px;
  color:var(--checkin-muted);
  font-size:14px;
  line-height:1.55;
}
#checkin .page-header h2{
  margin:0;
  color:var(--checkin-ink);
  font-size:28px;
  line-height:1.2;
  font-weight:850;
  letter-spacing:-.03em;
}
#checkin .page-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
#checkin .page-actions .btn{
  min-height:44px;
  border-radius:14px;
  padding:0 16px;
  font-weight:850;
}
#checkin #checkinSyncBtn{
  color:var(--white);
  border:0;
  background:linear-gradient(135deg,var(--color-primary),var(--raw-2563eb));
  box-shadow:0 12px 24px color-mix(in srgb, var(--raw-0f766e) 18%, transparent);
}
#checkin .checkin-tabs{
  display:flex;
  gap:10px;
  margin:16px 0;
  padding:10px;
  border:1px solid var(--checkin-line);
  border-radius:20px;
  background:color-mix(in srgb, var(--white) 82%, transparent);
  box-shadow:0 12px 28px color-mix(in srgb, var(--gray-900) 5%, transparent);
  overflow-x:auto;
  scrollbar-width:thin;
}
#checkin .checkin-tab{
  flex:0 0 auto;
  min-width:116px;
  min-height:44px;
  padding:0 16px;
  border:1px solid var(--color-border-soft);
  border-radius:14px;
  color:var(--color-text-secondary);
  background:var(--white);
  font-size:14px;
  font-weight:850;
  cursor:pointer;
  transition:background .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
#checkin .checkin-tab:hover{
  color:var(--checkin-primary);
  border-color:color-mix(in srgb, var(--raw-0f766e) 42%, transparent);
  background:var(--raw-f0fdfa);
}
#checkin .checkin-tab.active{
  color:var(--white);
  border-color:transparent;
  background:linear-gradient(135deg,var(--color-primary),var(--raw-2563eb));
  box-shadow:0 12px 24px color-mix(in srgb, var(--raw-0f766e) 18%, transparent);
}
#checkin .checkin-tab-panel{
  display:none;
}
#checkin .checkin-tab-panel.active{
  display:block;
}
#checkin .filter-bar{
  display:grid;
  grid-template-columns:repeat(4,minmax(150px,1fr)) minmax(96px,auto);
  gap:10px;
  align-items:end;
  padding:14px;
  margin-bottom:16px;
  border:1px solid var(--checkin-line);
  border-radius:22px;
  background:color-mix(in srgb, var(--white) 86%, transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--white) 88%, transparent),0 12px 28px color-mix(in srgb, var(--gray-900) 5%, transparent);
}
#checkin .filter-item{
  display:flex;
  flex-direction:column;
  gap:6px;
}
#checkin .filter-item label{
  color:var(--color-text-secondary);
  font-size:12px;
  font-weight:850;
}
#checkin .filter-item input,
#checkin .filter-item select{
  min-height:44px;
  border:1px solid var(--color-border-soft);
  border-radius:14px;
  background:var(--white);
  color:var(--color-text);
  font-size:14px;
  font-weight:650;
}
#checkin .filter-item input:focus,
#checkin .filter-item select:focus{
  border-color:color-mix(in srgb, var(--raw-0f766e) 55%, transparent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--raw-0f766e) 12%, transparent);
  outline:none;
}
#checkin .filter-item .btn,
#checkin .btn.small{
  min-height:44px;
  border-radius:14px;
  font-weight:850;
}
#checkin .checkin-stats-cards{
  grid-template-columns:repeat(4,minmax(150px,1fr));
  gap:14px;
  margin-top:0;
}
#checkin .checkin-stats-cards .kpi{
  position:relative;
  overflow:hidden;
  min-height:138px;
  border:1px solid color-mix(in srgb, var(--gray-400) 24%, transparent);
  border-radius:22px;
  padding:18px;
  background:color-mix(in srgb, var(--white) 94%, transparent);
  box-shadow:0 16px 36px color-mix(in srgb, var(--gray-900) 7%, transparent);
}
#checkin .checkin-stats-cards .kpi::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg,var(--color-primary),var(--raw-2563eb));
}
#checkin .checkin-stats-cards .kpi::after{
  content:"";
  position:absolute;
  right:-18px;
  bottom:-24px;
  width:92px;
  height:92px;
  border-radius:999px;
  background:color-mix(in srgb, var(--raw-0f766e) 8%, transparent);
}
#checkin .checkin-stats-cards .kpi .label{
  color:var(--color-text-secondary);
  font-size:13px;
  font-weight:800;
}
#checkin .checkin-stats-cards .kpi .value,
#checkin .checkin-stats-cards .kpi [id^="checkin"]{
  color:var(--checkin-ink);
  font-size:34px;
  line-height:1.1;
  font-weight:900;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
#checkin .checkin-stats-cards .kpi .hint{
  margin-top:10px;
  color:var(--checkin-muted);
  font-size:12px;
  line-height:1.45;
}
#checkin .checkin-tab-panel > .card,
#checkin .checkin-tab-panel .card.mt{
  border:1px solid color-mix(in srgb, var(--gray-400) 24%, transparent);
  border-radius:24px;
  overflow:hidden;
  background:color-mix(in srgb, var(--white) 94%, transparent);
  box-shadow:0 16px 38px color-mix(in srgb, var(--gray-900) 7%, transparent);
}
#checkin .card-header{
  padding:16px 18px;
  border-bottom:1px solid var(--checkin-line);
  background:linear-gradient(135deg,var(--color-surface-soft),var(--raw-ecfdf5));
}
#checkin .card-header h3{
  margin:0;
  color:var(--checkin-ink);
  font-size:18px;
  font-weight:850;
  letter-spacing:-.01em;
}
#checkin .card-body{
  padding:16px;
}
#checkin .table-container{
  border:1px solid var(--checkin-line);
  border-radius:18px;
  overflow:auto;
  background:var(--white);
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--white) 80%, transparent);
}
#checkin .data-table{
  width:100%;
  min-width:760px;
  border-collapse:separate;
  border-spacing:0;
  font-size:13px;
}
#checkin .data-table thead th{
  position:sticky;
  top:0;
  z-index:2;
  padding:12px 10px;
  color:var(--color-text-secondary);
  background:var(--color-surface-soft);
  border-bottom:1px solid var(--checkin-line);
  font-size:12px;
  font-weight:850;
  letter-spacing:.04em;
  text-align:left;
}
#checkin .data-table tbody td{
  padding:12px 10px;
  border-bottom:1px solid var(--raw-edf2f7);
  color:var(--color-text-secondary);
  line-height:1.55;
  vertical-align:top;
}
#checkin .data-table tbody tr:hover{
  background:var(--raw-f7fbfa);
  box-shadow:inset 4px 0 0 var(--checkin-primary);
}
#checkin .status-tag{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:3px 9px;
  border-radius:999px;
  font-size:12px;
  font-weight:850;
}
#checkin .checkin-linked-project-cell{
  display:inline-flex;
  max-width:180px;
  padding:4px 8px;
  border:1px solid var(--checkin-line);
  border-radius:7px;
  color:var(--checkin-primary);
  background:var(--raw-ecfdf5);
  font-size:12px;
  font-weight:700;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#checkin .checkin-unlinked-project-cell{
  color:var(--color-text-muted,var(--raw-94a3b8));
  font-size:12px;
}
#checkin .status-tag.status-success{
  color:var(--color-success-text);
  background:var(--raw-dcfae6);
  border:1px solid var(--raw-abefc6);
}
#checkin .status-tag.status-error{
  color:var(--color-danger-text);
  background:var(--raw-fee4e2);
  border:1px solid var(--raw-fecdca);
}
#checkin .btn-link{
  min-height:34px;
  padding:0 10px;
  border:1px solid var(--color-border-soft);
  border-radius:12px;
  color:var(--color-info);
  background:var(--white);
  font-size:13px;
  font-weight:800;
}
#checkin .btn-link:hover{
  color:var(--white);
  background:var(--color-info);
  border-color:var(--color-info);
  text-decoration:none;
}
#checkin #checkinPagination{
  margin-top:14px;
}
#checkin .checkin-chart-container{
  min-height:360px;
  padding:10px;
  border:1px solid var(--checkin-line);
  border-radius:var(--chart-radius);
  background:linear-gradient(180deg,var(--white),var(--color-surface-soft));
}
#checkin .checkin-chart-container canvas{
  width:100%!important;
  max-height:360px;
}
.checkin-detail-overlay{
  background:color-mix(in srgb, var(--gray-900) 58%, transparent)!important;
  backdrop-filter:blur(8px);
}
.checkin-detail-modal{
  border-radius:24px!important;
  border:1px solid color-mix(in srgb, var(--raw-e2e8f0) 90%, transparent);
  box-shadow:0 28px 80px color-mix(in srgb, var(--gray-900) 28%, transparent)!important;
  overflow:visible!important;
  display:flex;
  flex-direction:column;
  width:min(680px,92vw)!important;
  max-width:680px!important;
  min-width:320px!important;
}
.checkin-detail-modal-header{
  flex-shrink:0;
  padding:16px 20px;
  border-bottom:1px solid var(--gray-200);
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.checkin-detail-modal h3{
  color:var(--color-text)!important;
  font-size:18px!important;
  font-weight:850!important;
}
.checkin-detail-info{
  grid-template-columns:120px minmax(0,1fr);
  gap:14px 20px;
  padding:4px 0;
}
.checkin-detail-info .label{
  color:var(--color-text-secondary);
  font-weight:800;
  font-size:13px;
  display:flex;
  align-items:center;
}
.checkin-detail-info .value{
  color:var(--color-text);
  line-height:1.6;
  font-size:14px;
  word-break:break-word;
  min-width:0;
}
.checkin-detail-location,
.checkin-detail-modal [style*="background:var(--color-surface-soft)"]{
  border:1px solid var(--color-border-soft);
  border-radius:16px!important;
  background:var(--color-surface-soft)!important;
  min-width:0;
}
.checkin-detail-photos img{
  width:96px;
  height:96px;
  border-radius:14px;
  border:1px solid var(--color-border-soft);
  box-shadow:0 8px 18px color-mix(in srgb, var(--gray-900) 8%, transparent);
}
#checkinModal{
  background:color-mix(in srgb, var(--gray-900) 58%, transparent)!important;
  backdrop-filter:blur(8px);
}
#checkinModal > div,
#checkinModal .modal-content{
  border-radius:24px!important;
  border:1px solid color-mix(in srgb, var(--raw-e2e8f0) 90%, transparent);
  box-shadow:0 28px 80px color-mix(in srgb, var(--gray-900) 28%, transparent)!important;
}
#checkinModal h3{
  color:var(--color-text)!important;
  font-size:18px!important;
  font-weight:850!important;
}
#checkinModal .field{
  border:1px solid var(--color-border);
  border-radius:16px;
  padding:10px 12px;
  background:var(--raw-fbfdff);
}
#checkinModal .field label,
#checkinModal .field > span{
  color:var(--color-text-secondary);
  font-size:12px;
  font-weight:850;
}
#checkinModal input,
#checkinModal textarea,
#checkinModal select{
  min-height:42px;
  border:1px solid var(--color-border-soft);
  border-radius:12px;
  background:var(--white);
  color:var(--color-text);
  font-size:14px;
}
#checkinModal textarea{
  min-height:88px;
}
#checkinModal input:focus,
#checkinModal textarea:focus,
#checkinModal select:focus{
  border-color:color-mix(in srgb, var(--raw-0f766e) 55%, transparent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--raw-0f766e) 12%, transparent);
  outline:none;
}
#checkinProjectInfo{
  border:1px solid var(--raw-cde8df);
  border-radius:16px!important;
  color:var(--raw-0f513f)!important;
  background:linear-gradient(135deg,var(--raw-ecfdf5),color-mix(in srgb,var(--color-info-soft) 55%,var(--white) 45%))!important;
  line-height:1.55;
}
#checkinGetLocationBtn{
  min-width:44px;
  min-height:44px;
  border-radius:14px;
}
#checkinSubmitBtn{
  min-height:44px;
  min-width:120px;
  border-radius:14px;
  font-weight:850;
}
#checkinSubmitBtn:disabled{
  cursor:not-allowed;
  opacity:.6;
}
#checkinPhotoPreview img{
  border-radius:14px!important;
  border:1px solid var(--color-border-soft);
  box-shadow:0 8px 18px color-mix(in srgb, var(--gray-900) 8%, transparent);
}
.checkin-project-picker .picker-search-input{
  min-height:42px;
  border-radius:12px;
}
.checkin-project-picker .picker-item{
  border-radius:12px!important;
}
.checkin-project-main{
  color:var(--color-text);
  font-weight:850;
}
.checkin-project-sub{
  color:var(--color-text-secondary);
}
.project-checkin-timeline{
  display:grid;
  gap:10px;
}
.checkin-timeline-item{
  display:flex;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid var(--raw-edf2f7);
}
.checkin-timeline-dot{
  width:10px;
  height:10px;
  margin-top:6px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--color-primary),var(--raw-2563eb));
  flex:none;
}
.checkin-timeline-content{flex:1;min-width:0}
.checkin-timeline-time{color:var(--color-text-secondary);font-size:12px}
.checkin-timeline-type{color:var(--color-text);font-size:13px;font-weight:850}
.checkin-timeline-location{color:var(--color-text-secondary);font-size:12px}
.checkin-timeline-remark{
  margin-top:6px;
  padding:7px 9px;
  border-radius:12px;
  color:var(--color-text-secondary);
  background:var(--color-surface-soft);
  font-size:12px;
}
@media (max-width:1100px){
  #checkin .checkin-stats-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  #checkin .filter-bar{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  #checkin{padding:12px;border-radius:20px}
  #checkin .page-header{
    min-height:176px;
    padding:104px 16px 18px;
    flex-direction:column;
  }
  #checkin .page-header::before{left:16px;top:18px;width:72px;height:64px;border-radius:20px}
  #checkin .page-header::after{left:104px;right:16px;top:28px;font-size:13px}
  #checkin .page-header h2{font-size:24px}
  #checkin .page-actions{width:100%;justify-content:stretch}
  #checkin .page-actions .btn{flex:1}
  #checkin .checkin-stats-cards{grid-template-columns:1fr}
  #checkin .filter-bar{grid-template-columns:1fr}
  #checkin .card-body{padding:12px}
  .checkin-detail-info{grid-template-columns:1fr;gap:6px}
}
@media (prefers-reduced-motion:reduce){
  #checkin .checkin-tab,
  #checkin .data-table tbody tr{
    transition:none;
  }
}

/* UI/UX Pro Max - Field check-in redesign v2: clean enterprise operations */
#checkin{
  --ci-text:var(--color-text);
  --ci-muted:var(--color-text-secondary);
  --ci-border:#e4e7ec;
  --ci-bg:var(--color-surface-soft);
  --ci-card:#ffffff;
  --ci-primary:#1677ff;
  --ci-primary-deep:#1454c6;
  --ci-success:#12b76a;
  --ci-warning:#f79009;
  --ci-danger:#f04438;
  --ci-radius:20px;
  padding:20px!important;
  border-radius:28px!important;
  border:1px solid var(--ci-border)!important;
  background:
    linear-gradient(180deg,color-mix(in srgb, var(--white) 72%, transparent),color-mix(in srgb, var(--gray-50) 96%, transparent)),
    radial-gradient(circle at 16% 0%,color-mix(in srgb, var(--raw-1677ff) 10%, transparent),transparent 32%),
    radial-gradient(circle at 84% 4%,color-mix(in srgb, var(--raw-12b76a) 10%, transparent),transparent 28%)!important;
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--white) 90%, transparent)!important;
}
#checkin .page-header{
  min-height:auto!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:18px!important;
  padding:22px 24px!important;
  border:1px solid var(--ci-border)!important;
  border-radius:24px!important;
  background:var(--white)!important;
  box-shadow:0 18px 45px color-mix(in srgb, var(--raw-101828) 8%, transparent)!important;
}
#checkin .page-header::before,
#checkin .page-header::after{
  content:none!important;
  display:none!important;
}
#checkin .page-header h2{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  margin:0!important;
  color:var(--ci-text)!important;
  font-size:28px!important;
  font-weight:850!important;
  letter-spacing:-.03em!important;
}
#checkin .page-header h2::before{
  content:"";
  width:46px;
  height:46px;
  flex:none;
  border-radius:16px;
  background:
    linear-gradient(135deg,var(--ci-primary),var(--raw-12b76a)),
    radial-gradient(circle at 35% 28%,color-mix(in srgb, var(--white) 65%, transparent),transparent 28%);
  box-shadow:0 12px 24px color-mix(in srgb, var(--raw-1677ff) 18%, transparent);
}
#checkin .page-header h2::after{
  content:"现场拜访、项目跟进、客户位置与外勤统计";
  display:block;
  margin-left:2px;
  color:var(--ci-muted);
  font-size:13px;
  font-weight:650;
  letter-spacing:0;
}
#checkin .page-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;
}
#checkin .page-actions .btn{
  min-height:44px!important;
  border-radius:12px!important;
  padding:0 16px!important;
  font-weight:800!important;
}
#checkin #checkinSyncBtn{
  border:0!important;
  color:var(--white)!important;
  background:linear-gradient(135deg,var(--ci-primary),var(--ci-primary-deep))!important;
  box-shadow:0 10px 20px color-mix(in srgb, var(--raw-1677ff) 20%, transparent)!important;
}
#checkin #checkinRefreshBtn{
  border:1px solid var(--ci-border)!important;
  color:var(--color-text-secondary)!important;
  background:var(--white)!important;
}
#checkin .checkin-tabs{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(120px,1fr))!important;
  gap:8px!important;
  margin:16px 0!important;
  padding:8px!important;
  border:1px solid var(--ci-border)!important;
  border-radius:18px!important;
  background:var(--white)!important;
  box-shadow:0 10px 26px color-mix(in srgb, var(--raw-101828) 5%, transparent)!important;
}
#checkin .checkin-tab{
  min-height:46px!important;
  border:0!important;
  border-radius:12px!important;
  color:var(--color-text-secondary)!important;
  background:transparent!important;
  font-size:14px!important;
  font-weight:800!important;
  box-shadow:none!important;
}
#checkin .checkin-tab:hover{
  color:var(--ci-primary)!important;
  background:var(--raw-f2f7ff)!important;
  transform:none!important;
}
#checkin .checkin-tab.active{
  color:var(--white)!important;
  background:linear-gradient(135deg,var(--ci-primary),var(--ci-primary-deep))!important;
  box-shadow:0 10px 20px color-mix(in srgb, var(--raw-1677ff) 18%, transparent)!important;
}
#checkin .checkin-tab-panel.active{
  display:block!important;
}
#checkin .filter-bar{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr))!important;
  gap:12px!important;
  align-items:end!important;
  margin:0 0 16px!important;
  padding:16px!important;
  border:1px solid var(--ci-border)!important;
  border-radius:20px!important;
  background:var(--white)!important;
  box-shadow:0 10px 24px color-mix(in srgb, var(--raw-101828) 5%, transparent)!important;
}
#checkin .filter-item{
  display:flex!important;
  flex-direction:column!important;
  gap:6px!important;
}
#checkin .filter-item label{
  color:var(--color-text-secondary)!important;
  font-size:12px!important;
  font-weight:800!important;
}
#checkin .filter-item input,
#checkin .filter-item select{
  width:100%!important;
  min-height:44px!important;
  border:1px solid var(--raw-d0d5dd)!important;
  border-radius:12px!important;
  background:var(--white)!important;
  color:var(--ci-text)!important;
  font-size:14px!important;
  font-weight:600!important;
}
#checkin .filter-item input:focus,
#checkin .filter-item select:focus{
  border-color:var(--ci-primary)!important;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--raw-1677ff) 12%, transparent)!important;
  outline:none!important;
}
#checkin .filter-item .btn,
#checkin .btn.small{
  min-height:44px!important;
  border-radius:12px!important;
  font-weight:800!important;
}
#checkin .checkin-stats-cards{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:14px!important;
  margin:0 0 16px!important;
}
#checkin .checkin-stats-cards .kpi{
  min-height:128px!important;
  border:1px solid var(--ci-border)!important;
  border-radius:20px!important;
  padding:18px!important;
  background:var(--white)!important;
  box-shadow:0 12px 28px color-mix(in srgb, var(--raw-101828) 6%, transparent)!important;
}
#checkin .checkin-stats-cards .kpi::before{
  content:""!important;
  position:absolute!important;
  left:18px!important;
  top:18px!important;
  width:36px!important;
  height:4px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,var(--ci-primary),var(--ci-success))!important;
}
#checkin .checkin-stats-cards .kpi::after{
  content:none!important;
}
#checkin .checkin-stats-cards .kpi .label{
  margin-top:16px!important;
  color:var(--color-text-secondary)!important;
  font-size:13px!important;
  font-weight:800!important;
}
#checkin .checkin-stats-cards .kpi .value,
#checkin .checkin-stats-cards .kpi [id^="checkin"]{
  margin-top:8px!important;
  color:var(--ci-text)!important;
  font-size:34px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:-.04em!important;
  font-variant-numeric:tabular-nums!important;
}
#checkin .checkin-stats-cards .kpi .hint{
  margin-top:10px!important;
  color:var(--ci-muted)!important;
  font-size:12px!important;
  line-height:1.45!important;
}
#checkin .checkin-tab-panel > .card,
#checkin .checkin-tab-panel .card.mt{
  border:1px solid var(--ci-border)!important;
  overflow:hidden!important;
  background:var(--white)!important;
}
#checkin .card-header{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  padding:16px 18px!important;
  border-bottom:1px solid var(--ci-border)!important;
  background:var(--raw-fcfcfd)!important;
}
#checkin .card-header h3{
  margin:0!important;
  color:var(--ci-text)!important;
  font-size:18px!important;
  font-weight:850!important;
  letter-spacing:-.01em!important;
}
#checkin .card-body{
  padding:16px!important;
}
#checkin .table-container{
  border:1px solid var(--ci-border)!important;
  border-radius:16px!important;
  overflow:auto!important;
  background:var(--white)!important;
}
#checkin .data-table{
  width:100%!important;
  min-width:760px!important;
  border-collapse:separate!important;
  border-spacing:0!important;
  font-size:13px!important;
}
#checkin .data-table thead th{
  position:sticky!important;
  top:0!important;
  z-index:2!important;
  padding:12px 12px!important;
  color:var(--color-text-secondary)!important;
  background:var(--color-surface-soft)!important;
  border-bottom:1px solid var(--ci-border)!important;
  font-size:12px!important;
  font-weight:850!important;
  text-align:left!important;
  letter-spacing:.04em!important;
}
#checkin .data-table tbody td{
  padding:13px 12px!important;
  border-bottom:1px solid var(--raw-f2f4f7)!important;
  color:var(--color-text-secondary)!important;
  line-height:1.55!important;
  vertical-align:top!important;
}
#checkin .data-table tbody tr:hover{
  background:var(--color-surface-soft)!important;
  box-shadow:inset 3px 0 0 var(--ci-primary)!important;
}
#checkin .status-tag{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:26px!important;
  padding:3px 10px!important;
  border-radius:999px!important;
  font-size:12px!important;
  font-weight:850!important;
}
#checkin .status-tag.status-success{
  color:var(--color-success-text)!important;
  background:var(--raw-ecfdf3)!important;
  border:1px solid var(--raw-abefc6)!important;
}
#checkin .status-tag.status-error{
  color:var(--color-danger-text)!important;
  background:var(--raw-fef3f2)!important;
  border:1px solid var(--raw-fecdca)!important;
}
#checkin .btn-link{
  min-height:34px!important;
  padding:0 11px!important;
  border:1px solid var(--raw-d0d5dd)!important;
  border-radius:10px!important;
  color:var(--color-info)!important;
  background:var(--white)!important;
  font-size:13px!important;
  font-weight:800!important;
  text-decoration:none!important;
}
#checkin .btn-link:hover{
  color:var(--white)!important;
  background:var(--color-info)!important;
  border-color:var(--color-info)!important;
}
#checkin .checkin-chart-container{
  min-height:360px!important;
  padding:14px!important;
  border:1px solid var(--ci-border)!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,var(--white),var(--color-surface-soft))!important;
}
#checkin .checkin-chart-container canvas{
  width:100%!important;
  max-height:360px!important;
}
#checkin .empty{
  color:var(--color-text-secondary)!important;
  background:var(--color-surface-soft)!important;
}
#checkinModal,
.checkin-detail-overlay{
  background:color-mix(in srgb, var(--raw-101828) 58%, transparent)!important;
  backdrop-filter:blur(8px)!important;
}
#checkinModal > div,
.checkin-detail-modal{
  border-radius:24px!important;
  border:1px solid color-mix(in srgb, var(--raw-e4e7ec) 95%, transparent)!important;
  background:var(--white)!important;
  box-shadow:0 28px 80px color-mix(in srgb, var(--raw-101828) 30%, transparent)!important;
  overflow:hidden!important;
}
#checkinModal h3,
.checkin-detail-modal h3{
  color:var(--ci-text,var(--color-text))!important;
  font-size:18px!important;
  font-weight:850!important;
}
#checkinModal .field{
  border:1px solid var(--raw-eaecf0)!important;
  border-radius:16px!important;
  padding:12px!important;
  background:var(--raw-fcfcfd)!important;
}
#checkinModal .field label{
  display:block!important;
  margin-bottom:6px!important;
  color:var(--color-text-secondary)!important;
  font-size:12px!important;
  font-weight:850!important;
}
#checkinModal input,
#checkinModal textarea,
#checkinModal select{
  min-height:44px!important;
  border:1px solid var(--raw-d0d5dd)!important;
  border-radius:12px!important;
  background:var(--white)!important;
  color:var(--color-text)!important;
  font-size:14px!important;
}
#checkinModal textarea{
  min-height:88px!important;
}
#checkinModal input:focus,
#checkinModal textarea:focus,
#checkinModal select:focus{
  border-color:var(--ci-primary,var(--raw-1677ff))!important;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--raw-1677ff) 12%, transparent)!important;
  outline:none!important;
}
#checkinProjectInfo{
  border:1px solid var(--raw-b2ddff)!important;
  border-radius:16px!important;
  color:var(--color-info)!important;
  background:var(--raw-eff8ff)!important;
  line-height:1.55!important;
}
#checkinGetLocationBtn,
#checkinSubmitBtn{
  min-height:44px!important;
  border-radius:12px!important;
  font-weight:850!important;
}
#checkinGetLocationBtn{
  min-width:44px!important;
}
#checkinSubmitBtn{
  min-width:128px!important;
}
.checkin-detail-info{
  display:grid!important;
  grid-template-columns:minmax(96px,120px) minmax(0,1fr)!important;
  gap:12px 16px!important;
  align-items:start!important;
}
.checkin-detail-info > *{
  min-width:0!important;
  box-sizing:border-box!important;
}
.checkin-detail-info .label{
  color:var(--color-text-secondary)!important;
  font-size:13px!important;
  font-weight:850!important;
}
.checkin-detail-info .value{
  color:var(--color-text)!important;
  font-size:13px!important;
  line-height:1.6!important;
}
.checkin-detail-photos img,
#checkinPhotoPreview img{
  border-radius:14px!important;
  border:1px solid var(--raw-eaecf0)!important;
  box-shadow:0 8px 18px color-mix(in srgb, var(--raw-101828) 8%, transparent)!important;
}
@media (max-width:1100px){
  #checkin .checkin-stats-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #checkin .checkin-tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:720px){
  #checkin{padding:12px!important;border-radius:20px!important}
  #checkin .page-header{grid-template-columns:1fr!important;padding:18px!important}
  #checkin .page-actions{width:100%!important;justify-content:stretch!important}
  #checkin .page-actions .btn{flex:1!important}
  #checkin .page-header h2{font-size:24px!important;align-items:flex-start!important}
  #checkin .page-header h2::after{font-size:12px!important}
  #checkin .checkin-stats-cards{grid-template-columns:1fr!important}
  #checkin .checkin-tabs{grid-template-columns:1fr!important}
  #checkin .card-body{padding:12px!important}
  .checkin-detail-info{grid-template-columns:1fr!important;gap:6px!important}
  .checkin-project-picker .picker-results{position:fixed!important;top:auto!important;left:10px!important;right:10px!important;bottom:10px!important;max-height:50vh!important;}
  .checkin-link-section{grid-template-columns:1fr!important;gap:12px!important;}
  .checkin-link-left #checkinLinkBtn{width:100%!important;}
    .checkin-detail-modal{width:min(96vw,460px)!important;}
}

/* 打卡详情：扩大项目关联录入区域，避免桌面端表单过窄或底部被截断 */
.checkin-detail-modal{
  width:min(96vw,1080px)!important;
  max-width:1080px!important;
  max-height:92vh!important;
  overflow:hidden!important;
}
.checkin-detail-modal > div:not(.checkin-detail-modal-header){
  min-width:0;
}
.checkin-detail-modal .checkin-link-section{
  grid-template-columns:minmax(260px,1.1fr) minmax(420px,1.9fr)!important;
  gap:28px!important;
  padding:28px!important;
  min-height:220px!important;
  align-items:start!important;
}
.checkin-detail-modal .checkin-link-left,
.checkin-detail-modal .checkin-link-right{
  min-width:0;
}
.checkin-detail-modal .checkin-link-right #checkinProjectPicker,
.checkin-detail-modal .checkin-link-right #checkinProjectPicker .checkin-project-picker{
  width:100%!important;
  min-width:0!important;
}
.checkin-detail-modal .checkin-link-right #checkinProjectPicker .picker-search-input{
  width:100%!important;
  min-height:52px!important;
  box-sizing:border-box!important;
}
.checkin-detail-modal .checkin-link-right .checkin-project-picker .picker-results{
  width:100%!important;
  max-width:none!important;
}

@media (max-width:720px){
  .checkin-detail-modal{
    width:min(96vw,520px)!important;
    max-width:560px!important;
    max-height:92vh!important;
  }
  .checkin-detail-modal .checkin-link-section{
    grid-template-columns:1fr!important;
    gap:16px!important;
    padding:20px!important;
  }
}

/* Field check-in icon: align with current green system style */
#checkin .page-header h2::before{
  background:
    radial-gradient(circle at 50% 36%, var(--white) 0 5px, transparent 6px),
    radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--white) 34%, transparent) 0 14px, transparent 15px),
    linear-gradient(135deg,var(--color-primary),var(--color-success))!important;
  box-shadow:0 12px 24px color-mix(in srgb, var(--raw-0f766e) 22%, transparent)!important;
}

/* Field check-in primary actions: use green theme color */
#checkin #checkinSyncBtn,
#checkin .checkin-tab.active{
  background:linear-gradient(135deg,var(--color-primary),var(--color-success))!important;
  box-shadow:0 10px 20px color-mix(in srgb, var(--raw-0f766e) 22%, transparent)!important;
}
#checkin .checkin-tab:hover{
  color:var(--color-primary)!important;
  background:var(--color-success-soft)!important;
}

/* Dashboard cards theme adaptation: green / blue / orange */
#dashboard.dashboard-page,
#mydashboard{
  --cockpit-accent:var(--color-primary);
  --cockpit-accent-2:#59c996;
  --cockpit-dark:color-mix(in srgb,var(--color-primary) 62%,#000 38%);
  --cockpit-ink:color-mix(in srgb,var(--color-primary) 54%,#000 46%);
  --cockpit-muted:#5f7167;
  --cockpit-soft:var(--color-primary-faint);
  --cockpit-line:#dbe9e1;
  --cockpit-shadow:rgba(31,63,43,.12);
  --cockpit-badge-bg:var(--color-primary-soft);
  --cockpit-badge-text:var(--color-primary);
}
[data-theme="blue"] #dashboard.dashboard-page,
[data-theme="blue"] #mydashboard{
  --cockpit-accent:var(--color-primary-hover);
  --cockpit-accent-2:color-mix(in srgb,var(--color-primary-hover) 72%,#fff 28%);
  --cockpit-dark:var(--color-primary-text);
  --cockpit-ink:#1e1b4b;
  --cockpit-muted:#5b668a;
  --cockpit-soft:var(--color-primary-faint);
  --cockpit-line:#d8ddff;
  --cockpit-shadow:rgba(67,56,202,.14);
  --cockpit-badge-bg:var(--color-primary-soft);
  --cockpit-badge-text:var(--color-primary);
}
[data-theme="orange"] #dashboard.dashboard-page,
[data-theme="orange"] #mydashboard{
  --cockpit-accent:var(--color-primary);
  --cockpit-accent-2:var(--color-primary-hover);
  --cockpit-dark:#7c2d12;
  --cockpit-ink:#431407;
  --cockpit-muted:#7c4a2d;
  --cockpit-soft:var(--color-primary-faint);
  --cockpit-line:color-mix(in srgb,var(--color-warning) 26%,#fff 74%);
  --cockpit-shadow:rgba(194,65,12,.14);
  --cockpit-badge-bg:var(--color-warning-soft);
  --cockpit-badge-text:var(--color-warning-text);
}
#dashboard.dashboard-page::before,
#mydashboard::before{
  background:
    radial-gradient(circle at 8% 12%, color-mix(in srgb, var(--cockpit-accent-2) 28%, transparent), transparent 28%),
    radial-gradient(circle at 72% 0%, color-mix(in srgb, var(--cockpit-accent) 18%, transparent), transparent 34%),
    linear-gradient(180deg,var(--cockpit-soft) 0%,color-mix(in srgb, var(--white) 0%, transparent) 100%)!important;
}
#dashboard .dashboard-hero-panel{
  border-color:color-mix(in srgb, var(--cockpit-accent) 18%, transparent)!important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--cockpit-dark) 96%, var(--raw-000) 4%),
      color-mix(in srgb, var(--cockpit-accent) 82%, var(--cockpit-dark) 18%) 48%,
      color-mix(in srgb, var(--cockpit-soft) 92%, var(--white) 8%) 49%,
      var(--white) 100%)!important;
  box-shadow:0 28px 80px var(--cockpit-shadow)!important;
}
#mydashboard .dashboard-hero-panel{
  border-color:color-mix(in srgb, var(--cockpit-accent) 18%, transparent)!important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--cockpit-dark) 96%, var(--raw-000) 4%),
      color-mix(in srgb, var(--cockpit-accent) 82%, var(--cockpit-dark) 18%) 48%,
      color-mix(in srgb, var(--cockpit-soft) 92%, var(--white) 8%) 49%,
      var(--white) 100%)!important;
  box-shadow:0 28px 80px var(--cockpit-shadow)!important;
}
#dashboard .dashboard-hero-panel::after,
#mydashboard .dashboard-hero-panel::after{
  background:linear-gradient(135deg,color-mix(in srgb, var(--cockpit-accent-2) 22%, transparent),color-mix(in srgb, var(--white) 8%, transparent))!important;
}
#dashboard .dashboard-hero-panel .eyebrow,
#mydashboard .dashboard-hero-panel .eyebrow,
#dashboard .eyebrow,
#mydashboard .eyebrow{
  color:color-mix(in srgb, var(--cockpit-accent-2) 86%, var(--white) 14%)!important;
}
#dashboard .section-title h3,
#mydashboard .section-title h3{
  color:var(--cockpit-ink)!important;
}
#mydashboard .dashboard-hero-panel h2{
  color:var(--white)!important;
}
#mydashboard .dashboard-hero-panel p{
  color:color-mix(in srgb, var(--white) 78%, transparent)!important;
}
#dashboard .section-title span,
#mydashboard .section-title span,
#dashboard .kpi-small .hint,
#dashboard .kpi-large .hint,
#mydashboard .kpi-small .hint,
#mydashboard .kpi-large .hint{
  color:var(--cockpit-muted)!important;
}
#dashboard .dashboard-toolbar,
#mydashboard .dashboard-selector{
  border-color:color-mix(in srgb, var(--cockpit-accent) 16%, transparent)!important;
}
#dashboard .dashboard-time-pill.active,
#mydashboard .dashboard-time-pill.active{
  background:linear-gradient(135deg,var(--cockpit-accent),var(--cockpit-accent-2))!important;
  border-color:transparent!important;
  color:var(--white)!important;
  box-shadow:0 12px 24px color-mix(in srgb, var(--cockpit-accent) 26%, transparent)!important;
}
#dashboard .dashboard-time-pill:hover:not(.active),
#mydashboard .dashboard-time-pill:hover:not(.active){
  border-color:color-mix(in srgb, var(--cockpit-accent) 45%, transparent)!important;
  color:var(--cockpit-accent)!important;
  background:color-mix(in srgb, var(--cockpit-soft) 78%, var(--white) 22%)!important;
}
#dashboard .kpi-large,
#dashboard .kpi-small,
#dashboard .chart-card,
#dashboard .stat-chart-card,
#dashboard .dashboard-procurement-panel,
#dashboard .card,
#mydashboard .kpi-large,
#mydashboard .kpi-small,
#mydashboard .chart-card,
#mydashboard .stat-chart-card,
#mydashboard .card{
  border-color:color-mix(in srgb, var(--cockpit-accent) 14%, var(--color-border) 86%)!important;
  background:linear-gradient(145deg,var(--white),color-mix(in srgb, var(--cockpit-soft) 58%, var(--white) 42%))!important;
  box-shadow:0 18px 44px color-mix(in srgb, var(--cockpit-shadow) 72%, transparent)!important;
}
#dashboard .kpi-large::before,
#mydashboard .kpi-large::before{
  background:color-mix(in srgb, var(--cockpit-accent) 10%, transparent)!important;
}
#dashboard .kpi-amount-card,
#mydashboard .kpi-amount-card{
  background:
    radial-gradient(circle at 88% 86%, color-mix(in srgb, var(--cockpit-accent-2) 24%, transparent), transparent 30%),
    linear-gradient(135deg,var(--cockpit-dark),var(--cockpit-accent))!important;
  border-color:transparent!important;
  color:var(--white)!important;
}
#dashboard .kpi-amount-card .label,
#dashboard .kpi-amount-card .hint,
#mydashboard .kpi-amount-card .label,
#mydashboard .kpi-amount-card .hint{
  color:color-mix(in srgb, var(--white) 76%, transparent)!important;
}
#dashboard .kpi-amount-card .value,
#dashboard .kpi-amount-card #kpiAmount,
#mydashboard .kpi-amount-card .value,
#mydashboard .kpi-amount-card #myKpiAmount{
  color:var(--white)!important;
}
#dashboard .kpi-topline .label,
#dashboard .kpi-small .label,
#mydashboard .kpi-topline .label,
#mydashboard .kpi-small .label{
  color:var(--cockpit-muted)!important;
}
#dashboard .kpi-large .value,
#dashboard .kpi-large > div[id^="kpi"],
#dashboard .kpi-small div[id^="kpi"],
#mydashboard .kpi-large .value,
#mydashboard .kpi-large > div[id^="myKpi"],
#mydashboard .kpi-small div[id^="myKpi"]{
  color:var(--cockpit-ink)!important;
}
#dashboard .kpi-badge,
#mydashboard .kpi-badge{
  background:var(--cockpit-badge-bg)!important;
  color:var(--cockpit-badge-text)!important;
}
#dashboard .kpi-badge.warning,
#mydashboard .kpi-badge.warning{
  background:color-mix(in srgb, var(--cockpit-accent-2) 22%, var(--white) 78%)!important;
  color:var(--cockpit-badge-text)!important;
}
#dashboard .glow-progress i,
#mydashboard .glow-progress i,
#dashboard .bar.green,
#mydashboard .bar.green{
  background:linear-gradient(90deg,var(--cockpit-accent),var(--cockpit-accent-2))!important;
}
#dashboard .mini-spark span,
#dashboard .mini-spark i,
#mydashboard .mini-spark span,
#mydashboard .mini-spark i{
  background:linear-gradient(180deg,var(--cockpit-accent-2),var(--cockpit-accent))!important;
}
#dashboard .dashboard-click:hover,
#dashboard .dashboard-click:focus-visible,
#mydashboard .dashboard-click:hover,
#mydashboard .dashboard-click:focus-visible{
  border-color:color-mix(in srgb, var(--cockpit-accent) 32%, transparent)!important;
  box-shadow:0 22px 54px var(--cockpit-shadow)!important;
}
#dashboard .risk-card,
#mydashboard .risk-card{
  background:linear-gradient(145deg,var(--white),color-mix(in srgb, var(--cockpit-soft) 68%, var(--raw-fffaf7) 32%))!important;
  border-color:color-mix(in srgb, var(--cockpit-accent-2) 24%, var(--color-border) 76%)!important;
}
#dashboard .dashboard-procurement-panel{
  background:
    radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--cockpit-accent) 13%, transparent), transparent 26%),
    linear-gradient(145deg,color-mix(in srgb, var(--cockpit-soft) 58%, var(--white) 42%),var(--white))!important;
}
#mydashboard .field-lite select:focus,
#mydashboard .field-lite input:focus{
  border-color:var(--cockpit-accent)!important;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--cockpit-accent) 14%, transparent)!important;
}

/* Hide task center intro card */
#taskcenter > .notice{
  display:none!important;
}

/* Project drawer tabs: follow active theme color */
.project-detail-panel .project-drawer-tab.active,
.project-detail-panel .project-form-tab.active,
#drawer .project-drawer-tab.active,
#drawer .project-form-tab.active{
  background:linear-gradient(135deg,var(--primary,var(--color-primary)),var(--primary-hover,var(--color-primary-hover)))!important;
  border-color:transparent!important;
  color:var(--white)!important;
  box-shadow:0 12px 24px color-mix(in srgb, var(--primary,var(--color-primary)) 24%, transparent)!important;
}
.project-detail-panel .project-drawer-tab:hover,
.project-detail-panel .project-form-tab:hover,
#drawer .project-drawer-tab:hover,
#drawer .project-form-tab:hover{
  border-color:color-mix(in srgb, var(--primary,var(--color-primary)) 42%, transparent)!important;
  color:var(--primary,var(--color-primary))!important;
  background:var(--primary-light,var(--color-primary-soft))!important;
}
.project-detail-panel .project-drawer-tab.active:hover,
.project-detail-panel .project-form-tab.active:hover,
#drawer .project-drawer-tab.active:hover,
#drawer .project-form-tab.active:hover{
  color:var(--white)!important;
}
.project-detail-panel .project-form-tab.active span,
#drawer .project-form-tab.active span{
  background:color-mix(in srgb, var(--raw-000000) 15%, transparent)!important;
  color:var(--white)!important;
}
.project-detail-panel .project-form-tab.completed,
#drawer .project-form-tab.completed{
  border-color:color-mix(in srgb, var(--primary,var(--color-primary)) 34%, transparent)!important;
  color:var(--primary,var(--color-primary))!important;
  background:var(--primary-light,var(--color-primary-soft))!important;
}
.project-detail-panel .project-form-tab.completed .tab-check,
#drawer .project-form-tab.completed .tab-check{
  background:var(--primary,var(--color-primary))!important;
  color:var(--white)!important;
}
[data-theme="blue"] .project-detail-panel .project-drawer-tab.active,
[data-theme="blue"] .project-detail-panel .project-form-tab.active,
[data-theme="blue"] #drawer .project-drawer-tab.active,
[data-theme="blue"] #drawer .project-form-tab.active{
  background:linear-gradient(135deg,var(--color-primary),var(--color-primary-hover))!important;
  box-shadow:0 12px 24px color-mix(in srgb, var(--raw-4338ca) 24%, transparent)!important;
}
[data-theme="orange"] .project-detail-panel .project-drawer-tab.active,
[data-theme="orange"] .project-detail-panel .project-form-tab.active,
[data-theme="orange"] #drawer .project-drawer-tab.active,
[data-theme="orange"] #drawer .project-form-tab.active{
  background:linear-gradient(135deg,var(--color-primary),var(--color-primary-hover))!important;
  box-shadow:0 12px 24px color-mix(in srgb, var(--raw-c2410c) 24%, transparent)!important;
}


/* ui-ux-pro-max: sales invoice application drawer redesign */
#salesInvoiceDrawer .sales-invoice-panel{
  width:min(1120px, calc(100vw - 32px));
  max-width:1120px;
  background:linear-gradient(180deg,var(--color-surface-soft) 0%,var(--raw-eef7f1) 100%);
  border:1px solid color-mix(in srgb,var(--primary,var(--color-primary)) 16%,var(--raw-d9e5dd) 84%);
  box-shadow:0 30px 90px color-mix(in srgb, var(--gray-900) 18%, transparent);
}
#salesInvoiceDrawer .sales-invoice-head{
  position:sticky;
  top:0;
  z-index:5;
  align-items:flex-start;
  gap:20px;
  background:linear-gradient(135deg,var(--white) 0%,color-mix(in srgb,var(--primary-light,var(--color-primary-soft)) 58%,var(--white) 42%) 100%);
  border-bottom:1px solid color-mix(in srgb,var(--primary,var(--color-primary)) 14%,var(--raw-e2e8f0) 86%);
}
.sales-invoice-title-block{min-width:0;}
.sales-invoice-eyebrow{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 10px;
  border-radius:999px;
  background:color-mix(in srgb,var(--primary,var(--color-primary)) 10%,var(--white) 90%);
  color:var(--primary,var(--color-primary));
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:8px;
}
#salesInvoiceDrawer .sales-invoice-head h3{margin:0;color:var(--color-text);font-weight:900;letter-spacing:.02em;}
#salesInvoiceDrawer .overview-subtitle{margin-top:6px;max-width:680px;color:var(--color-text-secondary);line-height:1.6;}
.sales-invoice-body{padding:18px;display:grid;gap:16px;}
.sales-invoice-card{
  border:1px solid var(--color-border);
  border-radius:18px;
  background:color-mix(in srgb, var(--white) 92%, transparent);
  box-shadow:0 16px 42px color-mix(in srgb, var(--gray-900) 6%, transparent);
  padding:18px;
}
.sales-invoice-card-primary{background:linear-gradient(145deg,var(--white) 0%,color-mix(in srgb,var(--primary-light,var(--color-primary-soft)) 42%,var(--white) 58%) 100%);}
.sales-invoice-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px;}
.sales-invoice-card-head>div{display:flex;align-items:center;gap:10px;min-width:0;}
.sales-invoice-card-head h4{margin:0;font-size:16px;font-weight:900;color:var(--color-text);}
.sales-invoice-card-head p{margin:2px 0 0 auto;color:var(--color-text-secondary);font-size:13px;line-height:1.5;max-width:420px;text-align:right;}
.sales-invoice-step{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:12px;background:linear-gradient(135deg,var(--primary,var(--color-primary)),var(--primary-hover,var(--color-primary-hover)));color:var(--white);font-size:12px;font-weight:900;box-shadow:0 10px 24px color-mix(in srgb,var(--primary,var(--color-primary)) 24%,transparent);}
.sales-invoice-grid{display:grid;gap:14px;}
.sales-invoice-grid-3{grid-template-columns:repeat(4,minmax(0,1fr));}
.sales-invoice-span-2{grid-column:span 2;}
.sales-invoice-span-3{grid-column:1 / -1;}
#salesInvoiceDrawer .sales-invoice-field{margin:0;}
#salesInvoiceDrawer .sales-invoice-field>span{font-weight:800;color:var(--color-text-secondary);}
#salesInvoiceDrawer .sales-invoice-field input,
#salesInvoiceDrawer .sales-invoice-field select,
#salesInvoiceDrawer .sales-invoice-field textarea,
#salesInvoiceDrawer .search-select-input{
  width:100%;
  min-width:0;
  min-height:44px;
  border-radius:12px;
  border:1px solid var(--raw-dbe5df);
  background:var(--white);
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
#salesInvoiceDrawer .sales-invoice-field{min-width:0}
#salesInvoiceDrawer .sales-invoice-card .search-select{width:100%;min-width:0}
#salesInvoiceDrawer .sales-invoice-card .search-select-input{padding-right:36px}
#salesInvoiceDrawer .sales-invoice-field input:focus,
#salesInvoiceDrawer .sales-invoice-field select:focus,
#salesInvoiceDrawer .sales-invoice-field textarea:focus,
#salesInvoiceDrawer .search-select-input:focus{
  border-color:var(--primary,var(--color-primary));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--primary,var(--color-primary)) 13%,transparent);
  outline:none;
}
.sales-invoice-amount-field input{font-size:18px;font-weight:900;color:var(--color-danger);background:var(--raw-fff7f7)!important;border-color:color-mix(in srgb,var(--color-danger) 26%,var(--white) 74%)!important;}
.sales-invoice-detail-head{align-items:center;}
.sales-invoice-detail-head p{text-align:left;margin-right:auto;}
.sales-invoice-items .sales-invoice-item-card,
#salesInvoiceItemsBody .quote-item-card{
  border-radius:16px;
  border:1px solid var(--color-border);
  background:linear-gradient(180deg,var(--white),var(--raw-fbfdfc));
  box-shadow:0 10px 30px color-mix(in srgb, var(--gray-900) 5%, transparent);
}
.sales-invoice-total-row{border-radius:14px;background:color-mix(in srgb,var(--color-primary) 60%,var(--raw-000) 40%);color:var(--white);padding:14px 18px;margin-top:14px;}
.sales-invoice-total-row strong{font-size:20px;color:var(--white);}
.sales-invoice-file-box{display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 10px 8px 14px;border-radius:14px;background:var(--gray-50);border:1px dashed color-mix(in srgb,var(--primary,var(--color-primary)) 30%,var(--gray-300) 70%);}
.sales-invoice-file-box strong{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-text);}
.sales-invoice-actions{
  position:sticky;
  bottom:0;
  z-index:6;
  padding:14px 18px;
  border-top:1px solid var(--color-border);
  background:color-mix(in srgb, var(--white) 94%, transparent);
  backdrop-filter:blur(16px);
  box-shadow:0 -18px 44px color-mix(in srgb, var(--gray-900) 8%, transparent);
}
.sales-invoice-actions .btn{min-height:42px;border-radius:12px;font-weight:800;}
.sales-invoice-alert{margin:14px 18px 0;border-radius:14px;font-weight:800;}

/* Invoice drawer refinement: stronger workflow hierarchy without changing form behavior. */
#salesInvoiceDrawer .sales-invoice-panel{
  overflow:hidden;
  background:
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--primary,var(--color-primary)) 8%,transparent),transparent 34%),
    linear-gradient(180deg,var(--raw-f7fbf9) 0%,var(--raw-eef7f2) 100%);
}
#salesInvoiceDrawer .sales-invoice-head{padding:26px 28px 24px;background:color-mix(in srgb, var(--white) 92%, transparent);}
#salesInvoiceDrawer .sales-invoice-head:before{
  content:"";position:absolute;left:0;top:0;width:6px;height:100%;
  background:linear-gradient(180deg,var(--primary,var(--color-primary)),var(--primary-hover,var(--color-primary-hover)));
}
#salesInvoiceDrawer .sales-invoice-head .close{
  border:1px solid color-mix(in srgb,var(--primary,var(--color-primary)) 24%,var(--color-border) 76%);
  color:var(--primary,var(--color-primary));background:color-mix(in srgb,var(--primary,var(--color-primary)) 5%,var(--white) 95%);
  border-radius:12px;min-width:76px;min-height:40px;font-weight:800;
}
#salesInvoiceDrawer .sales-invoice-head .close:hover{background:color-mix(in srgb,var(--primary,var(--color-primary)) 11%,var(--white) 89%);border-color:var(--primary,var(--color-primary));}
.sales-invoice-progress{
  display:flex;align-items:center;gap:12px;margin:18px 18px 0;padding:12px 16px;
  border:1px solid color-mix(in srgb,var(--primary,var(--color-primary)) 16%,var(--color-border) 84%);
  border-radius:16px;background:color-mix(in srgb, var(--white) 74%, transparent);
  box-shadow:0 10px 26px color-mix(in srgb,var(--primary,var(--color-primary)) 7%,transparent);
}
.sales-invoice-progress-item{display:flex;align-items:center;gap:9px;min-width:0;color:var(--color-text-secondary);}
.sales-invoice-progress-item span{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;border:1px solid var(--color-border);background:var(--white);font-size:11px;font-weight:900;}
.sales-invoice-progress-item strong{display:block;font-size:13px;line-height:1.2;color:var(--color-text-secondary);}
.sales-invoice-progress-item small{display:block;margin-top:3px;font-size:11px;color:var(--color-text-muted);}
.sales-invoice-progress-item.active span{border-color:var(--primary,var(--color-primary));background:var(--primary,var(--color-primary));color:var(--white);box-shadow:0 6px 14px color-mix(in srgb,var(--primary,var(--color-primary)) 22%,transparent);}
.sales-invoice-progress-item.active strong{color:var(--primary,var(--color-primary));}
.sales-invoice-progress>i{height:1px;flex:1;min-width:18px;background:var(--color-border);}
#salesInvoiceDrawer .sales-invoice-body{padding:16px 18px 20px;gap:14px;}
#salesInvoiceDrawer .sales-invoice-card{padding:20px;border-radius:16px;box-shadow:0 10px 30px color-mix(in srgb, var(--gray-900) 5%, transparent);}
#salesInvoiceDrawer .sales-invoice-card-primary{border-color:color-mix(in srgb,var(--primary,var(--color-primary)) 22%,var(--color-border) 78%);}
#salesInvoiceDrawer .sales-invoice-card-head{padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid color-mix(in srgb,var(--primary,var(--color-primary)) 10%,var(--color-border) 90%);}
#salesInvoiceDrawer .sales-invoice-card-head h4{font-size:17px;letter-spacing:.01em;}
#salesInvoiceDrawer .sales-invoice-card-head p{font-size:12px;}
#salesInvoiceDrawer .sales-invoice-field>span{font-size:12px;letter-spacing:.01em;}
#salesInvoiceDrawer .sales-invoice-field input,
#salesInvoiceDrawer .sales-invoice-field select,
#salesInvoiceDrawer .sales-invoice-field textarea,
#salesInvoiceDrawer .search-select-input{background:var(--raw-fbfdfc);box-shadow:inset 0 1px 2px color-mix(in srgb, var(--gray-900) 3%, transparent);}
#salesInvoiceDrawer .sales-invoice-field input[readonly]{background:var(--raw-f1f6f3);color:var(--color-text-secondary);}
#salesInvoiceDrawer .sales-invoice-field em{display:block;margin-top:6px;color:var(--color-text-muted);font-size:11px;line-height:1.45;}
#salesInvoiceDrawer .sales-invoice-amount-field input{background:color-mix(in srgb,var(--primary,var(--color-primary)) 5%,var(--white) 95%)!important;color:var(--primary,var(--color-primary))!important;border-color:color-mix(in srgb,var(--primary,var(--color-primary)) 32%,var(--white) 68%)!important;}
#salesInvoiceDrawer .sales-invoice-issued-card{background:linear-gradient(145deg,var(--raw-f5faf7) 0%,var(--white) 72%);}
#salesInvoiceDrawer .sales-invoice-issued-card .sales-invoice-step{background:linear-gradient(135deg,var(--gray-500),var(--gray-600));box-shadow:none;}
#salesInvoiceDrawer .sales-invoice-issued-card .sales-invoice-file-box{background:var(--white);}
#salesInvoiceDrawer .sales-invoice-actions{padding:14px 20px 18px;gap:10px;}
#salesInvoiceDrawer .sales-invoice-actions .btn{min-width:104px;}
#salesInvoiceDrawer .sales-invoice-actions .btn.primary{box-shadow:0 8px 18px color-mix(in srgb,var(--primary,var(--color-primary)) 18%,transparent);}

/* Payment attachment actions: show a compact file summary instead of exposing raw URLs. */
.finance-file-label{margin-bottom:7px;color:var(--color-text-secondary);font-size:12px;font-weight:800;}
.finance-file-action-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0;
  padding:10px 12px;border:1px solid color-mix(in srgb,var(--primary,var(--color-primary)) 20%,var(--color-border) 80%);
  border-radius:12px;background:color-mix(in srgb,var(--primary,var(--color-primary)) 5%,var(--white) 95%);
}
.finance-file-summary{display:flex;align-items:center;gap:10px;min-width:0;}
.finance-file-summary>div{min-width:0;}
.finance-file-icon{display:grid;place-items:center;flex:0 0 auto;width:38px;height:38px;border-radius:10px;background:color-mix(in srgb,var(--primary,var(--color-primary)) 13%,var(--white) 87%);color:var(--primary,var(--color-primary));font-size:10px;font-weight:900;letter-spacing:.04em;}
.finance-file-summary strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-text);font-size:13px;}
.finance-file-summary small{display:block;margin-top:3px;color:var(--color-text-secondary);font-size:11px;}
.finance-file-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto;}
.finance-file-actions .btn{min-width:58px;text-align:center;text-decoration:none;}
.finance-file-empty{padding:10px 12px;border:1px dashed var(--color-border);border-radius:10px;color:var(--color-text-muted);font-size:12px;background:var(--color-surface-soft);}
@media (max-width: 900px){
  #salesInvoiceDrawer .sales-invoice-panel{width:100vw;max-width:100vw;border-radius:0;}
  .sales-invoice-grid-3{grid-template-columns:1fr;}
  .sales-invoice-span-2,.sales-invoice-span-3{grid-column:1;}
  .sales-invoice-card-head{display:block;}
  .sales-invoice-card-head p{text-align:left;margin:8px 0 0;}
  .sales-invoice-body{padding:12px;}
  .sales-invoice-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .sales-invoice-progress{margin:12px 12px 0;padding:10px 12px;gap:8px;}
  .sales-invoice-progress-item small{display:none;}
  #salesInvoiceDrawer .sales-invoice-head{padding:22px 20px 20px;}
  #salesInvoiceDrawer .sales-invoice-card{padding:16px;}
}

@media (max-width: 560px){
  .finance-file-action-row{align-items:flex-start;flex-direction:column;gap:10px;}
  .finance-file-actions{width:100%;}
  .finance-file-actions .btn{flex:1;}
}

/* Manual payment application drawer: compact SaaS form hierarchy. */
#financePaymentApplicationDialog{padding:20px;background:color-mix(in srgb, var(--gray-900) 58%, transparent);}
#financePaymentApplicationDialog .finance-receipt-dialog{
  position:relative;width:min(920px,100%);max-height:92vh;overflow:auto;overflow-x:hidden;
  border:1px solid color-mix(in srgb,var(--primary,var(--color-primary)) 18%,var(--color-border) 82%);
  border-radius:18px;background:linear-gradient(180deg,var(--raw-f7fbf9) 0%,var(--raw-eef7f2) 100%);
  box-shadow:0 30px 90px color-mix(in srgb, var(--gray-900) 28%, transparent);
}
#financePaymentApplicationDialog .section-title{
  position:sticky;top:0;z-index:3;display:flex;align-items:flex-start;gap:18px;
  padding:24px 28px 22px;margin:0;background:color-mix(in srgb, var(--white) 94%, transparent);
  border-bottom:1px solid color-mix(in srgb,var(--primary,var(--color-primary)) 14%,var(--color-border) 86%);
  backdrop-filter:blur(14px);
}
#financePaymentApplicationDialog .section-title:before{
  content:"";position:absolute;left:0;top:0;width:6px;height:100%;
  background:linear-gradient(180deg,var(--primary,var(--color-primary)),var(--primary-hover,var(--color-primary-hover)));
}
#financePaymentApplicationDialog .section-title>div{min-width:0;}
#financePaymentApplicationDialog .section-title>div:before{
  content:"FINANCE / PAYMENT";display:block;margin-bottom:7px;color:var(--primary,var(--color-primary));
  font-size:11px;font-weight:900;letter-spacing:.12em;
}
#financePaymentApplicationDialog .section-title h3{margin:0;color:var(--color-text);font-size:24px;font-weight:900;letter-spacing:.01em;}
#financePaymentApplicationDialog .section-title span{display:block;margin-top:5px;color:var(--color-text-secondary);font-size:13px;line-height:1.5;}
#financePaymentApplicationDialog .section-title .btn{margin-left:auto;min-width:72px;border-radius:11px;color:var(--primary,var(--color-primary));background:color-mix(in srgb,var(--primary,var(--color-primary)) 5%,var(--white) 95%);border:1px solid color-mix(in srgb,var(--primary,var(--color-primary)) 24%,var(--color-border) 76%);}
#financePaymentApplicationDialog .finance-receipt-form{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px;padding:22px 28px 6px;
}
#financePaymentApplicationDialog .finance-receipt-form>label{
  min-width:0;display:flex;flex-direction:column;gap:7px;color:var(--color-text);font-size:13px;font-weight:800;
}
#financePaymentApplicationDialog .finance-receipt-form>label>input,
#financePaymentApplicationDialog .finance-receipt-form>label>select,
#financePaymentApplicationDialog .finance-receipt-form>label>textarea{
  box-sizing:border-box;width:100%;min-height:44px;padding:10px 12px;border-radius:11px;
  border:1px solid var(--raw-d8e4dd);background:var(--white);color:var(--color-text);font:inherit;font-weight:500;outline:none;
  box-shadow:inset 0 1px 2px color-mix(in srgb, var(--gray-900) 3%, transparent);transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
#financePaymentApplicationDialog .finance-receipt-form>label>textarea{min-height:92px;resize:vertical;}
#financePaymentApplicationDialog .finance-receipt-form>label>input:focus,
#financePaymentApplicationDialog .finance-receipt-form>label>select:focus,
#financePaymentApplicationDialog .finance-receipt-form>label>textarea:focus{border-color:var(--primary,var(--color-primary));box-shadow:0 0 0 4px color-mix(in srgb,var(--primary,var(--color-primary)) 13%,transparent);}
#financePaymentApplicationDialog #genericPaymentAmount{font-size:20px;font-weight:900;color:var(--primary,var(--color-primary));background:color-mix(in srgb,var(--primary,var(--color-primary)) 5%,var(--white) 95%);border-color:color-mix(in srgb,var(--primary,var(--color-primary)) 30%,var(--raw-d8e4dd) 70%);}
#financePaymentApplicationDialog #genericPaymentProject,
#financePaymentApplicationDialog #genericPaymentType{font-weight:750;}
#financePaymentApplicationDialog .finance-type-hint{
  grid-column:1/-1;margin:0;padding:11px 14px;border:1px dashed color-mix(in srgb,var(--primary,var(--color-primary)) 30%,var(--color-border) 70%);
  border-left:4px solid var(--primary,var(--color-primary));border-radius:0 11px 11px 0;background:color-mix(in srgb,var(--primary,var(--color-primary)) 6%,var(--white) 94%);color:var(--color-text-secondary);font-size:12px;line-height:1.55;
}
#financePaymentApplicationDialog .finance-hint{display:block;margin:2px 0 0;color:var(--color-text-muted);font-size:11px;font-weight:500;}
#financePaymentApplicationDialog .finance-collapsible-trigger{
  width:100%;padding:11px 13px;border:1px solid color-mix(in srgb,var(--primary,var(--color-primary)) 18%,var(--color-border) 82%);border-radius:11px;background:color-mix(in srgb, var(--white) 72%, transparent);color:var(--primary,var(--color-primary));font-size:12px;font-weight:850;text-align:left;cursor:pointer;
}
#financePaymentApplicationDialog #genericPaymentBankFields{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;padding:14px;border:1px solid var(--color-border);border-radius:13px;background:color-mix(in srgb, var(--white) 60%, transparent);}
#financePaymentApplicationDialog #genericPaymentBankFields[hidden]{display:none;}
#financePaymentApplicationDialog .finance-receipt-dialog-actions{
  position:sticky;bottom:0;z-index:3;display:flex;justify-content:flex-end;gap:10px;margin:16px 0 0;padding:14px 28px 20px;
  border-top:1px solid var(--color-border);background:color-mix(in srgb, var(--white) 94%, transparent);backdrop-filter:blur(14px);box-shadow:0 -14px 32px color-mix(in srgb, var(--gray-900) 6%, transparent);
}
#financePaymentApplicationDialog .finance-receipt-dialog-actions .btn{min-width:112px;min-height:42px;border-radius:12px;font-weight:850;}
#financePaymentApplicationDialog .finance-receipt-dialog-actions .btn.primary{box-shadow:0 8px 18px color-mix(in srgb,var(--primary,var(--color-primary)) 18%,transparent);}
#financePaymentApplicationDialog .field-error>input,#financePaymentApplicationDialog .field-error>select{border-color:var(--raw-c62828);box-shadow:0 0 0 3px color-mix(in srgb, var(--raw-c62828) 10%, transparent);}
#financePaymentApplicationDialog .finance-field-error-msg{color:var(--raw-b42318);font-size:11px;font-weight:700;}
@media (max-width:700px){
  #financePaymentApplicationDialog{padding:0;align-items:flex-end;}
  #financePaymentApplicationDialog .finance-receipt-dialog{width:100%;max-height:94vh;border-radius:16px 16px 0 0;}
  #financePaymentApplicationDialog .section-title{padding:20px 20px 18px;}
  #financePaymentApplicationDialog .section-title h3{font-size:20px;}
  #financePaymentApplicationDialog .finance-receipt-form{grid-template-columns:1fr;padding:18px 20px 4px;}
  #financePaymentApplicationDialog .finance-type-hint{grid-column:auto;}
  #financePaymentApplicationDialog #genericPaymentBankFields{grid-column:auto;grid-template-columns:1fr;}
  #financePaymentApplicationDialog .finance-receipt-dialog-actions{padding:12px 20px 16px;}
  #financePaymentApplicationDialog .finance-receipt-dialog-actions .btn{flex:1;min-width:0;}
}


/* Sales invoice detail item: two-line entry layout */
#salesInvoiceItemsBody .sales-invoice-line-card{
  border:1px solid var(--raw-dfe8e2);
  border-radius:16px;
  background:linear-gradient(180deg,var(--white) 0%,var(--raw-fbfdfc) 100%);
  box-shadow:0 10px 28px color-mix(in srgb, var(--gray-900) 5%, transparent);
  padding:14px;
  margin-bottom:12px;
}
.sales-invoice-line-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom:10px;
  margin-bottom:12px;
  border-bottom:1px solid var(--raw-edf2ef);
}
.sales-invoice-line-head strong{font-size:14px;font-weight:900;color:var(--color-text);}
.sales-invoice-line-row{display:grid;gap:12px;align-items:end;}
.sales-invoice-line-row-main{grid-template-columns:minmax(260px,2.4fr) minmax(90px,.7fr) minmax(86px,.7fr) minmax(120px,1fr) minmax(120px,1fr);}
.sales-invoice-line-row-note{grid-template-columns:1fr;margin-top:12px;}
#salesInvoiceItemsBody .sales-invoice-line-card .field{margin:0;}
#salesInvoiceItemsBody .sales-invoice-line-card .field span{font-size:12px;font-weight:800;color:var(--color-text-secondary);}
#salesInvoiceItemsBody .sales-invoice-line-card input{min-height:42px;border-radius:11px;background:var(--white);}
#salesInvoiceItemsBody .sales-invoice-line-row-note input{background:var(--color-surface-soft);}
@media (max-width: 980px){
  .sales-invoice-line-row-main{grid-template-columns:1fr 1fr;}
  .sales-invoice-line-row-main .field:first-child{grid-column:1 / -1;}
}
@media (max-width: 560px){
  .sales-invoice-line-row-main{grid-template-columns:1fr;}
}

/* Sales invoice total row follows current theme instead of dark block */
#salesInvoiceDrawer .sales-invoice-total-row{
  background:linear-gradient(135deg,color-mix(in srgb,var(--primary,var(--color-primary)) 10%,var(--white) 90%),color-mix(in srgb,var(--primary,var(--color-primary)) 4%,var(--white) 96%))!important;
  color:var(--primary,var(--color-primary))!important;
  border:1px solid color-mix(in srgb,var(--primary,var(--color-primary)) 22%,var(--raw-e2e8f0) 78%)!important;
  box-shadow:0 12px 28px color-mix(in srgb,var(--primary,var(--color-primary)) 10%,transparent)!important;
}
#salesInvoiceDrawer .sales-invoice-total-row span{
  color:color-mix(in srgb,var(--primary,var(--color-primary)) 72%,var(--gray-500) 28%)!important;
  font-weight:900;
}
#salesInvoiceDrawer .sales-invoice-total-row strong{
  color:var(--primary,var(--color-primary))!important;
}
[data-theme="blue"] #salesInvoiceDrawer .sales-invoice-total-row{
  background:linear-gradient(135deg,color-mix(in srgb, var(--raw-6366f1) 10%, transparent),color-mix(in srgb, var(--white) 96%, transparent))!important;
  color:var(--color-primary)!important;
  border-color:color-mix(in srgb, var(--raw-6366f1) 24%, transparent)!important;
}
[data-theme="blue"] #salesInvoiceDrawer .sales-invoice-total-row span,
[data-theme="blue"] #salesInvoiceDrawer .sales-invoice-total-row strong{color:var(--color-primary)!important;}
[data-theme="orange"] #salesInvoiceDrawer .sales-invoice-total-row{
  background:linear-gradient(135deg,color-mix(in srgb, var(--raw-ff7f3a) 13%, transparent),color-mix(in srgb, var(--white) 96%, transparent))!important;
  color:var(--color-primary)!important;
  border-color:color-mix(in srgb, var(--raw-ff7f3a) 28%, transparent)!important;
}
[data-theme="orange"] #salesInvoiceDrawer .sales-invoice-total-row span,
[data-theme="orange"] #salesInvoiceDrawer .sales-invoice-total-row strong{color:var(--color-primary)!important;}


/* Sales contracts page: theme-aware title support and accents */
#sales-contracts{
  --sc-theme:var(--primary,var(--color-primary));
  --sc-theme-hover:var(--primary-hover,var(--color-primary-hover));
  --sc-theme-soft:color-mix(in srgb,var(--sc-theme) 11%,#fff 89%);
  --sc-theme-line:color-mix(in srgb,var(--sc-theme) 22%,var(--color-border) 78%);
}
#sales-contracts>.notice{
  background:linear-gradient(135deg,var(--sc-theme-soft),var(--white))!important;
  border-color:var(--sc-theme-line)!important;
  color:color-mix(in srgb,var(--sc-theme) 72%,var(--color-text-secondary) 28%)!important;
}
#sales-contracts .sales-contract-view-tabs{
  border-color:var(--sc-theme-line)!important;
  background:color-mix(in srgb, var(--white) 90%, transparent)!important;
  box-shadow:0 14px 36px color-mix(in srgb,var(--sc-theme) 9%,transparent)!important;
}
#sales-contracts .sales-contract-view-tabs button.active{
  background:linear-gradient(135deg,var(--sc-theme),var(--sc-theme-hover))!important;
  color:var(--white)!important;
  border-color:transparent!important;
  box-shadow:0 12px 28px color-mix(in srgb,var(--sc-theme) 22%,transparent)!important;
}
#sales-contracts .grid.kpis .card::after,
#sales-contracts .kpis .card::after{
  background:linear-gradient(90deg,var(--sc-theme),var(--sc-theme-hover))!important;
}
#sales-contracts .grid.kpis .card,
#sales-contracts .sales-contract-panel,
#sales-contracts .quality-deposit-p2-card,
#sales-contracts .quality-deposit-p2-card.soon,
#sales-contracts .quality-deposit-p2-card.overdue,
#sales-contracts .quality-deposit-p2-card.open{
  border-color:var(--sc-theme-line)!important;
  background:linear-gradient(145deg,var(--white),var(--sc-theme-soft))!important;
}
#sales-contracts .grid.kpis .value,
#sales-contracts .quality-deposit-p2-card strong{
  color:color-mix(in srgb,var(--sc-theme) 82%,var(--color-text) 18%)!important;
}
#sales-contracts .filters{
  background:linear-gradient(135deg,var(--sc-theme-soft),var(--white))!important;
  border-color:var(--sc-theme-line)!important;
}
#sales-contracts .sales-contract-table thead th,
#sales-contracts table thead th{
  background:color-mix(in srgb,var(--sc-theme) 13%,var(--white) 87%)!important;
  color:color-mix(in srgb,var(--sc-theme) 70%,var(--color-text-secondary) 30%)!important;
}
#sales-contracts .btn.primary,
#sales-contracts button.btn.primary{
  background:linear-gradient(135deg,var(--sc-theme),var(--sc-theme-hover))!important;
  border-color:transparent!important;
}
[data-theme="blue"] #sales-contracts{--sc-theme:var(--color-primary);--sc-theme-hover:var(--color-primary-hover);}
[data-theme="orange"] #sales-contracts{--sc-theme:var(--color-primary);--sc-theme-hover:var(--color-primary-hover);}

/* New sales contract form: theme-aware color adaptation */
#salesContractDrawer{
  --sc-form-theme:var(--primary,var(--color-primary));
  --sc-form-hover:var(--primary-hover,var(--color-primary-hover));
  --sc-form-soft:color-mix(in srgb,var(--sc-form-theme) 11%,#fff 89%);
  --sc-form-line:color-mix(in srgb,var(--sc-form-theme) 22%,var(--color-border) 78%);
  --sc-form-ink:color-mix(in srgb,var(--sc-form-theme) 78%,var(--color-text) 22%);
}
[data-theme="blue"] #salesContractDrawer{--sc-form-theme:var(--color-primary);--sc-form-hover:var(--color-primary-hover);}
[data-theme="orange"] #salesContractDrawer{--sc-form-theme:var(--color-primary);--sc-form-hover:var(--color-primary-hover);}
#salesContractDrawer .sc-editor-panel{
  border-color:var(--sc-form-line)!important;
  background:linear-gradient(180deg,var(--white),var(--sc-form-soft))!important;
}
#salesContractDrawer .sc-head{
  background:linear-gradient(135deg,var(--white),var(--sc-form-soft))!important;
  border-color:var(--sc-form-line)!important;
}
#salesContractDrawer .sc-head-icon,
#salesContractDrawer .sc-badge{
  background:linear-gradient(135deg,var(--sc-form-theme),var(--sc-form-hover))!important;
  color:var(--white)!important;
  box-shadow:0 12px 26px color-mix(in srgb,var(--sc-form-theme) 22%,transparent)!important;
}
#salesContractDrawer .sc-head h3,
#salesContractDrawer .sc-section-head h3,
#salesContractDrawer .sc-tab-title,
#salesContractDrawer .sc-quality-card-head label,
#salesContractDrawer .sc-payment-card-head label{
  color:var(--color-text)!important;
}
#salesContractDrawer .sc-head-subtitle,
#salesContractDrawer .sc-field-hint,
#salesContractDrawer .sc-field-hint-tip,
#salesContractDrawer .sc-tab-hint,
#salesContractDrawer .sc-quality-card-head p,
#salesContractDrawer .sc-payment-card-head span{
  color:var(--color-text-secondary)!important;
}
#salesContractDrawer .sc-section,
#salesContractDrawer .sc-quality-card,
#salesContractDrawer .sc-payment-card{
  border-color:var(--sc-form-line)!important;
  background:color-mix(in srgb, var(--white) 92%, transparent)!important;
  box-shadow:0 16px 42px color-mix(in srgb,var(--sc-form-theme) 8%,transparent)!important;
}
#salesContractDrawer .sc-tab{
  border-color:var(--sc-form-line)!important;
  background:var(--white)!important;
}
#salesContractDrawer .sc-tab.active,
#salesContractDrawer .sc-tab[aria-selected="true"]{
  border-color:var(--sc-form-theme)!important;
  background:linear-gradient(135deg,var(--sc-form-soft),var(--white))!important;
  box-shadow:0 14px 32px color-mix(in srgb,var(--sc-form-theme) 13%,transparent)!important;
}
#salesContractDrawer .sc-tab.active .sc-tab-title,
#salesContractDrawer .sc-tab[aria-selected="true"] .sc-tab-title{
  color:var(--sc-form-ink)!important;
}
#salesContractDrawer .sc-field label,
#salesContractDrawer .sc-mini-label,
#salesContractDrawer .sc-date-field span{
  color:var(--color-text-secondary)!important;
  font-weight:800;
}
#salesContractDrawer .sc-field input,
#salesContractDrawer .sc-field select,
#salesContractDrawer .sc-field textarea,
#salesContractDrawer .sc-date-field input{
  border-color:var(--raw-dbe5df)!important;
  background:var(--white)!important;
}
#salesContractDrawer .sc-field input:focus,
#salesContractDrawer .sc-field select:focus,
#salesContractDrawer .sc-field textarea:focus,
#salesContractDrawer .sc-date-field input:focus{
  border-color:var(--sc-form-theme)!important;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--sc-form-theme) 13%,transparent)!important;
  outline:none!important;
}
#salesContractDrawer .sc-quality-pill,
#salesContractDrawer .sc-field-hint-quote,
#salesContractDrawer .sc-field-hint-icon{
  background:var(--sc-form-soft)!important;
  color:var(--sc-form-ink)!important;
  border-color:var(--sc-form-line)!important;
}
#salesContractDrawer .sc-date-field.important{
  border-color:var(--sc-form-line)!important;
  background:linear-gradient(135deg,var(--sc-form-soft),var(--white))!important;
}
#salesContractDrawer .sc-file-upload-zone{
  border-color:var(--sc-form-line)!important;
  background:linear-gradient(135deg,var(--sc-form-soft),var(--white))!important;
  color:var(--sc-form-ink)!important;
}
#salesContractDrawer .sc-file-upload-zone svg,
#salesContractDrawer .sc-file-upload-main{
  color:var(--sc-form-ink)!important;
  stroke:currentColor!important;
}
#salesContractDrawer .sc-file-info{
  border-color:var(--sc-form-line)!important;
  background:var(--sc-form-soft)!important;
}
#salesContractDrawer .sc-actions{
  border-color:var(--sc-form-line)!important;
  background:color-mix(in srgb, var(--white) 94%, transparent)!important;
  box-shadow:0 -18px 44px color-mix(in srgb,var(--sc-form-theme) 8%,transparent)!important;
}
#salesContractDrawer .sc-actions .btn.primary,
#salesContractDrawer .sc-actions button.btn.primary,
#salesContractDrawer #saveSalesContractBtn{
  background:linear-gradient(135deg,var(--sc-form-theme),var(--sc-form-hover))!important;
  border-color:transparent!important;
  color:var(--white)!important;
}

/* Sales contracts table action/link colors follow active theme */
#sales-contracts .sales-contract-table .action-icon,
#sales-contracts .sales-contract-table .task-actions .action-icon{
  color:var(--sc-theme)!important;
  background:color-mix(in srgb,var(--sc-theme) 8%,var(--white) 92%)!important;
  border-color:color-mix(in srgb,var(--sc-theme) 18%,var(--color-border) 82%)!important;
}
#sales-contracts .sales-contract-table .action-icon svg,
#sales-contracts .sales-contract-table .task-actions .action-icon svg{
  stroke:currentColor!important;
}
#sales-contracts .sales-contract-table .action-icon:hover,
#sales-contracts .sales-contract-table .task-actions .action-icon:hover{
  color:var(--white)!important;
  background:linear-gradient(135deg,var(--sc-theme),var(--sc-theme-hover))!important;
  border-color:transparent!important;
  box-shadow:0 10px 22px color-mix(in srgb,var(--sc-theme) 22%,transparent)!important;
}
#sales-contracts .sales-contract-table .action-link,
#sales-contracts .sales-contract-table button.action-link{
  color:var(--sc-theme)!important;
  font-weight:900!important;
}
#sales-contracts .sales-contract-table .action-link:hover,
#sales-contracts .sales-contract-table button.action-link:hover{
  color:var(--sc-theme-hover)!important;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* Sales contract template notice follows active theme */
#salesContractApprovalDrawer,
#salesContractDrawer{
  --sc-notice-theme:var(--primary,var(--color-primary));
  --sc-notice-hover:var(--primary-hover,var(--color-primary-hover));
  --sc-notice-soft:color-mix(in srgb,var(--sc-notice-theme) 11%,#fff 89%);
  --sc-notice-line:color-mix(in srgb,var(--sc-notice-theme) 24%,var(--color-border) 76%);
}
[data-theme="blue"] #salesContractApprovalDrawer,
[data-theme="blue"] #salesContractDrawer{--sc-notice-theme:var(--color-primary);--sc-notice-hover:var(--color-primary-hover);}
[data-theme="orange"] #salesContractApprovalDrawer,
[data-theme="orange"] #salesContractDrawer{--sc-notice-theme:var(--color-primary);--sc-notice-hover:var(--color-primary-hover);}
.sales-contract-template-notice{
  background:linear-gradient(135deg,var(--sc-notice-soft),var(--white))!important;
  border-color:var(--sc-notice-line)!important;
  color:color-mix(in srgb,var(--sc-notice-theme) 78%,var(--color-text) 22%)!important;
  box-shadow:0 12px 28px color-mix(in srgb,var(--sc-notice-theme) 9%,transparent)!important;
}

/* ===== Sales contract detail redesign (ui-ux-pro-max) ===== */
#salesContractApprovalDrawer{
  --sc-detail-theme:var(--primary,var(--color-primary));
  --sc-detail-theme-strong:var(--primary-hover,color-mix(in srgb,var(--color-primary) 78%,#000 22%));
  --sc-detail-soft:color-mix(in srgb,var(--sc-detail-theme) 8%,#fff 92%);
  --sc-detail-line:color-mix(in srgb,var(--sc-detail-theme) 18%,var(--color-primary-border) 82%);
  --sc-detail-ink:#10231c;
  --sc-detail-muted:var(--color-text-secondary);
}
[data-theme="blue"] #salesContractApprovalDrawer{--sc-detail-theme:var(--color-primary);--sc-detail-theme-strong:var(--color-primary-hover);}
[data-theme="orange"] #salesContractApprovalDrawer{--sc-detail-theme:var(--color-primary);--sc-detail-theme-strong:var(--color-primary-hover);}
#salesContractApprovalDrawer .sales-contract-approval-panel{
  max-width:1280px;
  background:linear-gradient(180deg,var(--raw-fbfdfc) 0%,var(--raw-f4f8f6) 100%);
}
#salesContractApprovalDrawer .sales-contract-approval-head{
  background:linear-gradient(135deg,var(--white) 0%,var(--sc-detail-soft) 100%);
  border-bottom:1px solid var(--sc-detail-line);
}
#salesContractApprovalDrawer .sales-contract-approval-body{
  padding:20px 24px 104px;
}
#salesContractApprovalDrawer .sc-contract-notice{
  border-radius:18px!important;
  padding:16px 20px!important;
  margin-bottom:18px!important;
  font-size:15px!important;
}
#salesContractApprovalDrawer .sc-contract-hero{
  display:grid;
  grid-template-columns:1.35fr 1fr 1fr 1fr;
  gap:16px;
  margin-bottom:18px;
}
#salesContractApprovalDrawer .sc-contract-stat{
  position:relative;
  overflow:hidden;
  min-height:132px;
  padding:22px 24px;
  border:1px solid var(--sc-detail-line);
  border-radius:22px;
  background:color-mix(in srgb, var(--white) 92%, transparent);
  box-shadow:0 16px 34px color-mix(in srgb, var(--raw-0f231c) 7%, transparent);
}
#salesContractApprovalDrawer .sc-contract-stat::after{
  content:"";
  position:absolute;
  right:-34px;
  bottom:-44px;
  width:118px;
  height:118px;
  border-radius:50%;
  background:color-mix(in srgb,var(--sc-detail-theme) 10%,transparent);
}
#salesContractApprovalDrawer .sc-contract-stat .label{
  color:var(--raw-7a8798);
  font-size:14px;
  font-weight:700;
}
#salesContractApprovalDrawer .sc-contract-stat .value{
  position:relative;
  z-index:1;
  margin-top:16px;
  color:var(--raw-2b3036);
  font-size:24px;
  font-weight:900;
  line-height:1.35;
  word-break:break-word;
}
#salesContractApprovalDrawer .sc-contract-stat.strong .value,
#salesContractApprovalDrawer .sc-contract-stat.is-draft .value{
  color:var(--sc-detail-ink);
}
#salesContractApprovalDrawer .sc-contract-stat.is-done .value{
  color:var(--sc-detail-theme-strong);
}
#salesContractApprovalDrawer .sc-contract-workspace{
  gap:18px;
}
#salesContractApprovalDrawer .sc-contract-card{
  border:1px solid var(--sc-detail-line);
  border-radius:22px;
  padding:22px 28px 28px;
  background:color-mix(in srgb, var(--white) 94%, transparent);
  box-shadow:0 18px 38px color-mix(in srgb, var(--raw-0f231c) 7%, transparent);
}
#salesContractApprovalDrawer .sc-contract-card h4{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 22px;
  color:var(--sc-detail-ink);
  font-size:18px;
  letter-spacing:-.01em;
}
#salesContractApprovalDrawer .sc-contract-card h4 span{
  display:flex;
  align-items:center;
  gap:10px;
}
#salesContractApprovalDrawer .sc-contract-card h4 span::before{
  content:"";
  width:8px;
  height:22px;
  border-radius:999px;
  background:var(--sc-detail-theme);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--sc-detail-theme) 10%,transparent);
}
#salesContractApprovalDrawer .sc-contract-card h4 em{
  color:color-mix(in srgb,var(--sc-detail-theme) 58%,var(--gray-400) 42%);
  font-size:12px;
  font-style:normal;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
#salesContractApprovalDrawer .sc-contract-form{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px 24px;
}
#salesContractApprovalDrawer .sc-contract-form.one{
  grid-template-columns:1fr;
}
#salesContractApprovalDrawer .sc-contract-form label{
  color:var(--raw-637083);
  font-size:14px;
  font-weight:800;
}
#salesContractApprovalDrawer .sc-contract-form input,
#salesContractApprovalDrawer .sc-contract-form textarea,
#salesContractApprovalDrawer .sales-contract-edit-items input,
#salesContractApprovalDrawer .sales-contract-edit-items textarea{
  min-height:46px;
  margin-top:10px;
  border:1px solid color-mix(in srgb,var(--sc-detail-theme) 15%,var(--raw-d9e5df) 85%);
  border-radius:14px;
  background:var(--white);
  color:var(--color-text);
  font-size:15px;
  line-height:1.5;
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--white) 85%, transparent);
}
#salesContractApprovalDrawer .sc-contract-form textarea{
  min-height:92px;
}
#salesContractApprovalDrawer .sc-contract-form input:focus,
#salesContractApprovalDrawer .sc-contract-form textarea:focus,
#salesContractApprovalDrawer .sales-contract-edit-items input:focus,
#salesContractApprovalDrawer .sales-contract-edit-items textarea:focus{
  outline:3px solid color-mix(in srgb,var(--sc-detail-theme) 18%,transparent);
  border-color:var(--sc-detail-theme);
}
#salesContractApprovalDrawer .sc-contract-form input[readonly],
#salesContractApprovalDrawer .sc-contract-form textarea[readonly]{
  background:linear-gradient(180deg,var(--raw-fbfdfc),var(--raw-f7faf8));
  color:var(--raw-243126);
}
#salesContractApprovalDrawer .sc-customer-card{
  background:linear-gradient(180deg,var(--sc-detail-soft) 0%,var(--white) 42%);
}
#salesContractApprovalDrawer .sc-customer-highlight{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin:-6px 0 22px;
}
#salesContractApprovalDrawer .sc-customer-highlight > div{
  padding:16px 18px;
  border:1px solid var(--sc-detail-line);
  border-radius:18px;
  background:color-mix(in srgb, var(--white) 82%, transparent);
}
#salesContractApprovalDrawer .sc-customer-highlight span{
  display:block;
  margin-bottom:8px;
  color:var(--raw-7a8798);
  font-size:13px;
  font-weight:800;
}
#salesContractApprovalDrawer .sc-customer-highlight strong{
  color:var(--sc-detail-ink);
  font-size:17px;
  line-height:1.45;
  word-break:break-word;
}
#salesContractApprovalDrawer .sc-contract-table-wrap{
  width:100%;
  overflow:auto;
  border:1px solid var(--sc-detail-line);
  border-radius:18px;
}
#salesContractApprovalDrawer .sales-contract-approval-items{
  margin:0;
  border-collapse:separate;
  border-spacing:0;
}
#salesContractApprovalDrawer .sales-contract-approval-items th{
  background:var(--sc-detail-soft);
  color:var(--raw-4f5f72);
  font-weight:900;
}
#salesContractApprovalDrawer .sales-contract-approval-items th,
#salesContractApprovalDrawer .sales-contract-approval-items td{
  padding:14px 16px;
  border-bottom:1px solid var(--raw-edf3ef);
}
@media (max-width:1100px){
  #salesContractApprovalDrawer .sc-contract-hero{grid-template-columns:repeat(2,minmax(0,1fr));}
  #salesContractApprovalDrawer .sales-contract-approval-grid{grid-template-columns:1fr;}
}
@media (max-width:720px){
  #salesContractApprovalDrawer .sales-contract-approval-body{padding:14px 14px 108px;}
  #salesContractApprovalDrawer .sc-contract-hero,
  #salesContractApprovalDrawer .sc-contract-form,
  #salesContractApprovalDrawer .sc-customer-highlight{grid-template-columns:1fr;}
  #salesContractApprovalDrawer .sc-contract-card{padding:18px;}
  #salesContractApprovalDrawer .sc-contract-stat{min-height:auto;padding:18px;}
}

/* Sales contract detail bottom action bar redesign */
#salesContractApprovalDrawer .sales-contract-approval-actions{
  display:flex!important;
  align-items:center;
  justify-content:space-between!important;
  gap:18px;
  padding:16px 28px;
  background:color-mix(in srgb, var(--white) 96%, transparent)!important;
  border-top:1px solid color-mix(in srgb,var(--sc-detail-theme,var(--color-primary)) 16%,var(--gray-200) 84%)!important;
  box-shadow:0 -18px 40px color-mix(in srgb, var(--raw-0f231c) 8%, transparent)!important;
  backdrop-filter:blur(14px);
}
#salesContractApprovalDrawer .sc-detail-action-left,
#salesContractApprovalDrawer .sc-detail-action-right{
  display:flex;
  align-items:center;
  gap:12px;
}
#salesContractApprovalDrawer .sc-detail-action{
  min-width:132px;
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:16px;
  border:1px solid color-mix(in srgb,var(--sc-detail-theme,var(--color-primary)) 18%,var(--raw-dbe7df) 82%);
  background:var(--white);
  color:var(--color-text-secondary);
  font-size:14px;
  font-weight:900;
  letter-spacing:.01em;
  cursor:pointer;
  box-shadow:0 10px 22px color-mix(in srgb, var(--raw-0f231c) 8%, transparent);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
#salesContractApprovalDrawer .sc-detail-action svg{
  width:18px;
  height:18px;
  stroke-width:2.2;
}
#salesContractApprovalDrawer .sc-detail-action:hover:not(:disabled){
  transform:translateY(-1px);
  border-color:var(--sc-detail-theme,var(--color-primary));
  box-shadow:0 14px 28px color-mix(in srgb, var(--raw-0f231c) 12%, transparent);
}
#salesContractApprovalDrawer .sc-detail-action.primary{
  border-color:transparent;
  background:linear-gradient(135deg,var(--sc-detail-theme,var(--color-primary)),var(--sc-detail-theme-strong,color-mix(in srgb,var(--color-primary) 78%,var(--raw-000) 22%)));
  color:var(--white);
}
#salesContractApprovalDrawer .sc-detail-action.secondary{
  color:var(--sc-detail-theme-strong,color-mix(in srgb,var(--color-primary) 78%,var(--raw-000) 22%));
  background:linear-gradient(180deg,var(--white),var(--sc-detail-soft,var(--raw-f4faf7)));
}
#salesContractApprovalDrawer .sc-detail-action.danger{
  color:var(--color-danger-text);
  border-color:color-mix(in srgb,var(--color-danger) 26%,var(--white) 74%);
  background:linear-gradient(180deg,var(--white),var(--raw-fff5f5));
}
#salesContractApprovalDrawer .sc-detail-action.muted,
#salesContractApprovalDrawer .sc-detail-action:disabled{
  opacity:.48;
  cursor:not-allowed;
  transform:none!important;
  box-shadow:none!important;
}
@media (max-width:760px){
  #salesContractApprovalDrawer .sales-contract-approval-actions{
    align-items:stretch;
    flex-direction:column;
    padding:14px;
  }
  #salesContractApprovalDrawer .sc-detail-action-left,
  #salesContractApprovalDrawer .sc-detail-action-right{
    width:100%;
    display:grid;
    grid-template-columns:1fr;
  }
  #salesContractApprovalDrawer .sc-detail-action{
    width:100%;
  }
}


/* Field check-in theme synchronization: keep check-in UI aligned with current theme. */
#checkin{
  --ci-text:var(--text-primary,var(--color-text))!important;
  --ci-muted:var(--text-secondary,var(--color-text-secondary))!important;
  --ci-border:color-mix(in srgb,var(--primary,var(--color-primary)) 16%,#e5e7eb 84%)!important;
  --ci-bg:var(--body-bg,var(--color-primary-faint))!important;
  --ci-card:var(--card-bg,#ffffff)!important;
  --ci-primary:var(--primary,var(--color-primary))!important;
  --ci-primary-deep:var(--green-800,color-mix(in srgb,var(--color-primary) 84%,#000 16%))!important;
  --ci-primary-soft:var(--primary-light,var(--green-100,var(--color-primary-soft)))!important;
  --ci-primary-faint:var(--green-50,var(--color-primary-faint))!important;
  --ci-success:var(--green-500,var(--color-primary-hover))!important;
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--ci-card) 78%,transparent),color-mix(in srgb,var(--ci-primary-faint) 92%,var(--white) 8%)),
    radial-gradient(circle at 16% 0%,color-mix(in srgb,var(--ci-primary) 14%,transparent),transparent 34%),
    radial-gradient(circle at 84% 4%,color-mix(in srgb,var(--ci-success) 13%,transparent),transparent 30%)!important;
}
[data-theme="blue"] #checkin{
  --ci-primary:var(--color-primary)!important;
  --ci-primary-deep:var(--color-primary-text)!important;
  --ci-primary-soft:#e0e7ff!important;
  --ci-primary-faint:#eef2ff!important;
  --ci-success:var(--color-primary-hover)!important;
  --ci-border:#c7d2fe!important;
}
[data-theme="orange"] #checkin{
  --ci-primary:var(--color-primary)!important;
  --ci-primary-deep:#8c3a00!important;
  --ci-primary-soft:#ffe5d0!important;
  --ci-primary-faint:#fff3e8!important;
  --ci-success:#ffbd8d!important;
  --ci-border:#ffd4b0!important;
}
#checkin .page-header,
#checkin .checkin-tabs,
#checkin .filter-bar,
#checkin .checkin-tab-panel > .card,
#checkin .checkin-tab-panel .card.mt,
#checkin .table-container,
#checkin .checkin-chart-container{
  border-color:var(--ci-border)!important;
  background:var(--ci-card)!important;
}
#checkin .page-header h2,
#checkin .card-header h3,
#checkin .data-table tbody td,
#checkin .filter-item label,
#checkin .checkin-stats-cards .kpi .label{
  color:var(--ci-text)!important;
}
#checkin .page-header h2::before{
  background:
    radial-gradient(circle at 50% 36%,var(--white) 0 5px,transparent 6px),
    radial-gradient(circle at 50% 36%,color-mix(in srgb, var(--white) 35%, transparent) 0 14px,transparent 15px),
    linear-gradient(135deg,var(--ci-primary),var(--ci-success))!important;
  box-shadow:0 12px 24px color-mix(in srgb,var(--ci-primary) 24%,transparent)!important;
}
#checkin #checkinSyncBtn,
#checkin .checkin-tab.active,
#checkin .filter-item .btn,
#checkin .btn.small,
#checkin #checkinSubmitBtn{
  color:var(--white)!important;
  border-color:transparent!important;
  background:linear-gradient(135deg,var(--ci-primary),var(--ci-primary-deep))!important;
  box-shadow:0 10px 20px color-mix(in srgb,var(--ci-primary) 22%,transparent)!important;
}
#checkin #checkinRefreshBtn,
#checkin .checkin-tab,
#checkin #checkinGetLocationBtn{
  color:var(--ci-primary-deep)!important;
  border-color:var(--ci-border)!important;
  background:linear-gradient(180deg,var(--white),var(--ci-primary-faint))!important;
}
#checkin .checkin-tab:hover,
#checkin .btn-link{
  color:var(--ci-primary)!important;
  border-color:var(--ci-border)!important;
  background:var(--ci-primary-faint)!important;
}
#checkin .btn-link:hover{
  color:var(--white)!important;
  border-color:var(--ci-primary)!important;
  background:var(--ci-primary)!important;
}
#checkin .checkin-stats-cards .kpi{
  border-color:var(--ci-border)!important;
  background:linear-gradient(180deg,var(--white),var(--ci-primary-faint))!important;
}
#checkin .checkin-stats-cards .kpi::before,
#checkin .checkin-stats-cards .kpi::after{
  background:linear-gradient(90deg,var(--ci-primary),var(--ci-success))!important;
}
#checkin .checkin-stats-cards .kpi strong,
#checkin .checkin-stats-cards .kpi > div:not(.label):not(.hint){
  color:var(--ci-primary-deep)!important;
}
#checkin .card-header,
#checkin .data-table thead th{
  color:var(--ci-primary-deep)!important;
  background:linear-gradient(180deg,var(--ci-primary-faint),var(--white))!important;
  border-color:var(--ci-border)!important;
}
#checkin .data-table tbody tr:hover td{
  background:color-mix(in srgb,var(--ci-primary-faint) 76%,var(--white) 24%)!important;
}
#checkin input:focus,
#checkin select:focus,
#checkin textarea:focus{
  border-color:var(--ci-primary)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ci-primary) 14%,transparent)!important;
}
#checkinModal .modal-content,
.checkin-detail-modal{
  border-color:var(--ci-border,var(--gray-200))!important;
}
#checkinProjectInfo{
  background:var(--ci-primary-faint,var(--color-surface-soft))!important;
  border-color:var(--ci-border,var(--gray-200))!important;
  color:var(--ci-primary-deep,color-mix(in srgb,var(--color-primary) 84%,var(--raw-000) 16%))!important;
}


/* Sales contract quality deposit three-column amount row. */
.sc-quality-amount-row.sc-quality-amount-row-3{grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) minmax(180px,.8fr)!important;}
.sc-quality-amount-row.sc-quality-amount-row-3 input[readonly]{background:var(--green-50,var(--color-primary-faint))!important;color:var(--green-800,color-mix(in srgb,var(--color-primary) 84%,var(--raw-000) 16%))!important;font-weight:800!important;}
@media(max-width:900px){.sc-quality-amount-row.sc-quality-amount-row-3{grid-template-columns:1fr!important;}}

/* Project edit drawer sales contract quality summary. */
.project-quality-edit-summary{width:100%;padding:16px;border:1px solid color-mix(in srgb,var(--primary,var(--color-primary)) 18%,var(--gray-200) 82%);border-radius:18px;background:linear-gradient(180deg,var(--white),var(--green-50,var(--color-primary-faint)));box-shadow:0 10px 24px color-mix(in srgb, var(--green-900) 6%, transparent)}
.project-quality-edit-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;color:var(--text-primary,var(--color-text))}
.project-quality-edit-head strong{font-size:15px;font-weight:900}
.project-quality-edit-head span{font-size:12px;color:var(--text-secondary,var(--color-text-secondary));font-weight:700}
.project-quality-edit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.project-quality-edit-grid label{display:flex;flex-direction:column;gap:6px;margin:0!important}
.project-quality-edit-grid label span{font-size:12px;font-weight:800;color:var(--text-secondary,var(--color-text-secondary))}
.project-quality-edit-grid input[readonly]{height:38px;border:1px solid var(--card-border,var(--gray-200));border-radius:10px;background:var(--white);color:var(--text-primary,var(--color-text));font-weight:800}
@media(max-width:760px){.project-quality-edit-head{align-items:flex-start;flex-direction:column}.project-quality-edit-grid{grid-template-columns:1fr}}

/* Inline contract quality summary in project edit contract section. */
.project-contract-quality-inline{grid-column:1/-1;margin-top:14px;padding:16px;border:1px solid color-mix(in srgb,var(--primary,var(--color-primary)) 18%,var(--gray-200) 82%);border-radius:18px;background:linear-gradient(180deg,var(--white),var(--green-50,var(--color-primary-faint)));box-shadow:0 10px 24px color-mix(in srgb, var(--green-900) 6%, transparent)}
.project-contract-quality-inline-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.project-contract-quality-inline-head strong{font-size:15px;font-weight:900;color:var(--text-primary,var(--color-text))}
.project-contract-quality-inline-head span{font-size:12px;font-weight:800;color:var(--text-secondary,var(--color-text-secondary))}

/* =========================================================
   Unified theme layer for lists, drawers, modals and forms
   Keeps every business module aligned with green / blue / orange themes.
   ========================================================= */
:root{
  --ui-theme:var(--color-primary);
  --ui-theme-strong:color-mix(in srgb,var(--color-primary) 78%,#000 22%);
  --ui-theme-hover:var(--color-primary-hover);
  --ui-theme-soft:var(--color-primary-faint);
  --ui-theme-tint:var(--color-primary-soft);
  --ui-border:var(--color-primary-border);
  --ui-surface:#ffffff;
  --ui-surface-soft:#f8fbf9;
  --ui-text:var(--color-text);
  --ui-muted:var(--color-text-secondary);
  --ui-shadow:0 16px 42px rgba(15,42,29,.08);
  --ui-shadow-strong:0 24px 70px rgba(15,42,29,.14);
}
[data-theme="blue"]{
  --ui-theme:var(--color-primary);
  --ui-theme-strong:var(--color-primary-text);
  --ui-theme-hover:#4f46e5;
  --ui-theme-soft:#eef2ff;
  --ui-theme-tint:#e0e7ff;
  --ui-border:#c7d2fe;
  --ui-surface-soft:#f8f9ff;
  --ui-shadow:0 16px 42px rgba(55,48,163,.08);
  --ui-shadow-strong:0 24px 70px rgba(55,48,163,.15);
}
[data-theme="orange"]{
  --ui-theme:var(--color-primary);
  --ui-theme-strong:#8c3a00;
  --ui-theme-hover:var(--color-primary-hover);
  --ui-theme-soft:#fff3e8;
  --ui-theme-tint:#ffe5d0;
  --ui-border:#ffd4b0;
  --ui-surface-soft:#fffaf6;
  --ui-shadow:0 16px 42px rgba(194,65,12,.08);
  --ui-shadow-strong:0 24px 70px rgba(194,65,12,.15);
}

/* Shells: drawers, modals, cards */
.drawer-panel,
.modal,
.modal-box,
.checkin-detail-modal,
.sales-contract-approval-drawer,
.project-detail-panel,
.card,
.form-section,
.config-panel,
.project-form-panel,
.project-section-card,
.sales-contract-approval-card,
.sc-contract-card,
.payment-application-detail-card,
.procurement-card,
.finance-card,
.customer-card,
.vendor-card{
  border-color:var(--ui-border)!important;
  background:var(--ui-surface)!important;
  box-shadow:var(--ui-shadow)!important;
}
.drawer-panel,
.modal,
.modal-box,
.project-detail-panel{
  border:1px solid var(--ui-border)!important;
}
.drawer-head,
.modal-head,
.card-header,
.project-form-panel-head,
.project-section-card-head,
.sales-contract-approval-card h4,
.sc-contract-card h4,
.form-section h4{
  border-color:var(--ui-border)!important;
  background:linear-gradient(135deg,var(--ui-theme-soft),var(--white))!important;
  color:var(--ui-theme-strong)!important;
}
.drawer-head h3,
.modal-head h3,
.card-header h3,
.project-form-panel-head h4,
.project-section-card-head h4,
.sales-contract-approval-card h4,
.sc-contract-card h4,
.form-section h4{
  color:var(--ui-theme-strong)!important;
}
.drawer-subtitle,
.notice,
.empty,
.cell-sub,
.form-section p,
.project-form-panel-head p,
.project-section-card-head p{
  color:var(--ui-muted)!important;
}
.drawer-subtitle,
.notice{
  border-color:var(--ui-border)!important;
  background:var(--ui-theme-soft)!important;
}

/* Tables and all list-like data grids */
table,
.data-table,
.stats-table,
.sales-contract-approval-items,
.key-project-table,
.file-library-table,
.vendor-table,
.supplier-table,
.customer-table,
.quote-table,
.sales-contract-table,
.procurement-list-table,
.procurement-overdue-table,
#procurementFlowTable{
  border-color:var(--ui-border)!important;
}
table thead th,
.data-table thead th,
.stats-table thead th,
.sales-contract-approval-items thead th,
.key-project-table thead th,
.file-library-table thead th,
.vendor-table thead th,
.supplier-table thead th,
.customer-table thead th,
.quote-table thead th,
.sales-contract-table thead th,
.procurement-list-table thead th,
.procurement-overdue-table thead th,
#procurementFlowTable thead th{
  color:var(--ui-theme-strong)!important;
  border-color:var(--ui-border)!important;
  background:linear-gradient(180deg,var(--ui-theme-soft),var(--white))!important;
}
table tbody td,
.data-table tbody td,
.stats-table tbody td,
.sales-contract-approval-items tbody td,
.key-project-table tbody td,
.file-library-table tbody td,
.vendor-table tbody td,
.supplier-table tbody td,
.customer-table tbody td,
.quote-table tbody td,
.sales-contract-table tbody td,
.procurement-list-table tbody td,
.procurement-overdue-table tbody td,
#procurementFlowTable tbody td{
  color:var(--ui-text)!important;
  border-color:color-mix(in srgb,var(--ui-border) 55%,var(--white) 45%)!important;
}
table tbody tr:nth-child(even),
.data-table tbody tr:nth-child(even),
.file-library-table tbody tr:nth-child(even),
.vendor-table tbody tr:nth-child(even),
.supplier-table tbody tr:nth-child(even),
.customer-table tbody tr:nth-child(even),
.quote-table tbody tr:nth-child(even),
.sales-contract-table tbody tr:nth-child(even),
.procurement-list-table tbody tr:nth-child(even){
  background:color-mix(in srgb,var(--ui-theme-soft) 38%,var(--white) 62%)!important;
}
table tbody tr:hover,
.data-table tbody tr:hover,
.stats-table tbody tr:hover td,
.sales-contract-approval-items tbody tr:hover,
.key-project-table tbody tr:hover td,
.file-library-table tbody tr:hover,
.vendor-table tbody tr:hover,
.supplier-table tbody tr:hover,
.customer-table tbody tr:hover,
.quote-table tbody tr:hover,
.sales-contract-table tbody tr:hover,
.procurement-list-table tbody tr:hover,
.procurement-overdue-table tbody tr:hover,
#procurementFlowTable tbody tr:hover{
  background:color-mix(in srgb,var(--ui-theme-soft) 76%,var(--white) 24%)!important;
}
.table-container,
.table-wrap,
.customer-manage-table-wrap,
.sc-contract-table-wrap{
  border-color:var(--ui-border)!important;
  background:var(--white)!important;
  box-shadow:0 10px 28px color-mix(in srgb,var(--ui-theme) 8%,transparent)!important;
}

/* Forms and controls */
input,
select,
textarea,
.search-input,
.topbar-search input,
.picker-search-input{
  border-color:var(--ui-border)!important;
  background:var(--white)!important;
  color:var(--ui-text)!important;
}
input:focus,
select:focus,
textarea:focus,
.search-input:focus,
.topbar-search input:focus,
.picker-search-input:focus{
  border-color:var(--ui-theme)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-theme) 16%,transparent)!important;
  outline:none!important;
}
label span,
.field span,
.sc-mini-label,
.form-row label span,
.section-edit-form label span{
  color:var(--ui-theme-strong)!important;
}

/* Buttons and action icons */
.btn.primary,
.btn.success,
.btn-login,
.login-submit,
.btn-primary-sm,
.project-form-tab.active,
.project-overview-tab.active,
.project-drawer-tab.active,
.sales-contract-view-tab.active,
.checkin-tab.active{
  color:var(--white)!important;
  border-color:transparent!important;
  background:linear-gradient(135deg,var(--ui-theme),var(--ui-theme-hover))!important;
  box-shadow:0 10px 22px color-mix(in srgb,var(--ui-theme) 22%,transparent)!important;
}
.btn:not(.primary):not(.danger):not(.warning):not(.success),
.action-link,
.link-btn,
.icon-btn,
.project-form-tab,
.project-overview-tab,
.project-drawer-tab,
.sales-contract-view-tab,
.checkin-tab{
  border-color:var(--ui-border)!important;
  color:var(--ui-theme-strong)!important;
  background:linear-gradient(180deg,var(--white),var(--ui-theme-soft))!important;
}
.btn:not(.primary):not(.danger):not(.warning):not(.success):hover,
.action-link:hover,
.link-btn:hover,
.icon-btn:hover,
.project-form-tab:hover,
.project-overview-tab:hover,
.project-drawer-tab:hover,
.sales-contract-view-tab:hover,
.checkin-tab:hover{
  color:var(--ui-theme)!important;
  border-color:var(--ui-theme)!important;
  background:var(--ui-theme-soft)!important;
}
.action-link.icon-btn svg,
.icon-btn svg{
  stroke:currentColor!important;
}
.btn.danger,
.form-actions .btn.danger{
  color:var(--color-danger-text)!important;
  border-color:color-mix(in srgb,var(--color-danger) 26%,var(--white) 74%)!important;
  background:linear-gradient(180deg,var(--white),var(--raw-fff5f5))!important;
}
.btn.warning,
.form-actions .btn.warning{
  color:var(--color-warning-text)!important;
  border-color:color-mix(in srgb,var(--color-warning) 26%,var(--white) 74%)!important;
  background:linear-gradient(180deg,var(--white),color-mix(in srgb,var(--color-warning-soft) 56%,var(--white) 44%))!important;
}

/* Tags and statuses: keep semantic colors but make default follow theme */
.tag:not(.red):not(.orange):not(.blue):not(.teal):not(.purple),
.kpi-badge,
.badge,
.status-badge{
  color:var(--ui-theme-strong)!important;
  border:1px solid var(--ui-border)!important;
  background:var(--ui-theme-soft)!important;
}
.tag.green{
  color:var(--ui-theme-strong)!important;
  background:var(--ui-theme-soft)!important;
}
.tag.blue{
  color:var(--color-info-text)!important;
  background:color-mix(in srgb,var(--color-info-soft) 55%,var(--white) 45%)!important;
}
[data-theme="blue"] .tag.blue,
[data-theme="blue"] .tag.green{
  color:var(--ui-theme-strong)!important;
  background:var(--ui-theme-soft)!important;
}
[data-theme="orange"] .tag.orange,
[data-theme="orange"] .tag.green{
  color:var(--ui-theme-strong)!important;
  background:var(--ui-theme-soft)!important;
}

/* Project edit / overview tabs and generated quality cards */
.project-form-tabs,
.project-overview-tabs,
.project-drawer-switch,
.sales-contract-view-tabs,
.checkin-tabs{
  border-color:var(--ui-border)!important;
  background:var(--white)!important;
  box-shadow:0 10px 28px color-mix(in srgb,var(--ui-theme) 8%,transparent)!important;
}
.project-quality-edit-summary,
.project-contract-quality-inline,
.project-sales-quality-edit-panel,
.project-quality-embedded-section,
.sc-quality-card,
.sc-payment-card{
  border-color:var(--ui-border)!important;
  background:linear-gradient(180deg,var(--white),var(--ui-theme-soft))!important;
  box-shadow:0 12px 30px color-mix(in srgb,var(--ui-theme) 8%,transparent)!important;
}
.project-quality-embedded-section{
  margin-top:18px;
  padding:16px;
  border-radius:12px;
}
.project-quality-embedded-head h5{
  margin:0;
  color:var(--ui-theme-strong);
  font-size:16px;
}
.project-quality-embedded-head p{
  margin:5px 0 12px;
  color:var(--text-muted);
}
.project-quality-edit-grid input[readonly],
.sc-quality-amount-row input[readonly]{
  border-color:var(--ui-border)!important;
  background:var(--white)!important;
  color:var(--ui-theme-strong)!important;
}

/* Subtle unified scrollbar for large list panels */
.drawer-panel,
.table-container,
.table-wrap,
.project-form-tab-panels,
.modal-body{
  scrollbar-color:var(--ui-theme-tint) transparent;
}
#salesContractDrawer .sc-quality-card.sc-quality-card-compact{
  padding:14px 16px!important;
  gap:12px!important;
}
#salesContractDrawer .sc-quality-card.sc-quality-card-compact .sc-quality-card-head{
  align-items:center!important;
  margin:0!important;
}
#salesContractDrawer .sc-quality-card.sc-quality-card-compact .sc-quality-card-head label{
  margin:0!important;
}
#salesContractDrawer .sc-quality-inline-row{
  display:grid!important;
  grid-template-columns:minmax(180px,.9fr) repeat(3,minmax(160px,1fr))!important;
  gap:12px!important;
  align-items:end!important;
}
#salesContractDrawer .sc-quality-inline-row .sc-field,
#salesContractDrawer .sc-quality-inline-row .sc-date-field{
  margin:0!important;
  min-width:0!important;
}
#salesContractDrawer .sc-quality-inline-row .sc-date-field{
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
#salesContractDrawer .sc-quality-inline-row input{
  min-height:44px!important;
}
@media(max-width:1100px){
  #salesContractDrawer .sc-quality-inline-row{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:720px){
  #salesContractDrawer .sc-quality-inline-row{
    grid-template-columns:1fr!important;
  }
}
.drawer-panel::-webkit-scrollbar,
.table-container::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar,
.project-form-tab-panels::-webkit-scrollbar,
.modal-body::-webkit-scrollbar{width:10px;height:10px}
.drawer-panel::-webkit-scrollbar-thumb,
.table-container::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb,
.project-form-tab-panels::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb{background:var(--ui-theme-tint);border-radius:999px;border:2px solid transparent;background-clip:content-box}


/* Task center stale projects: numbered two-column cards */
#taskcenter #staleProjectList .stale-project-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
#taskcenter #staleProjectList .stale-project-card{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  align-items:center;
  gap:12px;
  min-height:74px;
  padding:12px 14px;
  border:1px solid var(--card-border,var(--gray-200));
  border-left:4px solid var(--primary,var(--color-primary));
  background:linear-gradient(180deg,var(--card-bg,var(--white)),var(--body-bg,var(--color-surface-soft)));
}
#taskcenter #staleProjectList .stale-project-card:hover{
  border-color:var(--primary,var(--color-primary));
}
#taskcenter #staleProjectList .stale-project-index{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:var(--primary-light,var(--color-primary-soft));
  color:var(--primary,var(--color-primary));
  font-size:13px;
  font-weight:850;
  font-variant-numeric:tabular-nums;
}
#taskcenter #staleProjectList .stale-project-body{min-width:0;}
#taskcenter #staleProjectList .stale-project-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
#taskcenter #staleProjectList .stale-project-head strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text-primary,var(--color-text));
}
#taskcenter #staleProjectList .stale-project-meta{
  margin-top:5px;
  color:var(--text-secondary,var(--color-text-secondary));
  font-size:13px;
  line-height:1.45;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
@media(max-width:980px){
  #taskcenter #staleProjectList .stale-project-grid{grid-template-columns:1fr;}
}

/* Global action buttons: stronger hover affordance for all operation columns */
.action-link,
.icon-btn,
.table-actions .action-link,
.task-actions .action-link,
.sales-contract-actions .action-link,
.quote-actions .action-link,
.project-actions .action-link,
.crm-action-btn{
  transition:
    color .16s ease,
    background-color .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    transform .16s ease,
    filter .16s ease;
}
.action-link:hover,
.action-link:focus-visible,
.icon-btn:hover,
.icon-btn:focus-visible,
.table-actions .action-link:hover,
.table-actions .action-link:focus-visible,
.task-actions .action-link:hover,
.task-actions .action-link:focus-visible,
.sales-contract-actions .action-link:hover,
.sales-contract-actions .action-link:focus-visible,
.quote-actions .action-link:hover,
.quote-actions .action-link:focus-visible,
.project-actions .action-link:hover,
.project-actions .action-link:focus-visible,
.crm-action-btn:hover,
.crm-action-btn:focus-visible{
  color:var(--primary,var(--color-primary));
  background:var(--primary-light,var(--color-primary-soft));
  border-color:var(--primary,var(--color-primary));
  box-shadow:0 10px 22px color-mix(in srgb, var(--green-900) 14%, transparent);
  transform:translateY(-1px);
  filter:saturate(1.08) brightness(.96);
}
.action-link:hover svg,
.action-link:focus-visible svg,
.icon-btn:hover svg,
.icon-btn:focus-visible svg,
.crm-action-btn:hover svg,
.crm-action-btn:focus-visible svg{
  color:var(--primary,var(--color-primary));
  stroke:currentColor;
}
.action-link.danger:hover,
.action-link.danger:focus-visible,
.icon-btn.danger:hover,
.icon-btn.danger:focus-visible,
.crm-action-btn.danger:hover,
.crm-action-btn.danger:focus-visible,
[data-delete]:hover,
[data-del]:hover,
[data-remove]:hover{
  color:var(--danger,var(--color-danger));
  background:var(--color-danger-soft);
  border-color:var(--danger,var(--color-danger));
  box-shadow:0 10px 22px color-mix(in srgb, var(--raw-dc2626) 16%, transparent);
}

/* Project detail operation column: force theme-colored hover state */
.project-table .action-link.icon-btn:hover,
.project-table .action-link.icon-btn:focus-visible,
.project-actions-cell .action-link.icon-btn:hover,
.project-actions-cell .action-link.icon-btn:focus-visible,
#projects .action-link.icon-btn:hover,
#projects .action-link.icon-btn:focus-visible{
  color:var(--white)!important;
  background:var(--primary,var(--color-primary))!important;
  border-color:var(--primary,var(--color-primary))!important;
  box-shadow:0 10px 22px color-mix(in srgb, var(--green-900) 18%, transparent)!important;
  text-decoration:none!important;
  transform:translateY(-1px);
}
.project-table .action-link.icon-btn:hover svg,
.project-table .action-link.icon-btn:focus-visible svg,
.project-actions-cell .action-link.icon-btn:hover svg,
.project-actions-cell .action-link.icon-btn:focus-visible svg,
#projects .action-link.icon-btn:hover svg,
#projects .action-link.icon-btn:focus-visible svg{
  color:var(--white)!important;
  stroke:currentColor!important;
}

/* Project dossier workspace: follow active app theme color */
#projects{
  --project-primary:var(--primary,var(--color-primary));
  --project-primary-2:var(--primary-hover,var(--color-primary-hover));
}
#projects .section-title h3::after{
  color:var(--primary,var(--color-primary))!important;
}
#projects > .card::before{
  background:linear-gradient(90deg,var(--primary,var(--color-primary)),var(--primary-hover,var(--color-primary-hover)))!important;
}

/* Global theme consistency layer: keep page accents synced with active theme */
main [id],
.page,
.card,
.section,
.module,
.dashboard-panel{
  --page-accent:var(--primary,var(--color-primary));
  --page-accent-hover:var(--primary-hover,var(--color-primary-hover));
  --page-accent-soft:var(--primary-light,var(--color-primary-soft));
}

#dashboard,
#people-dashboard,
#taskcenter,
#projects,
#fieldcheckin,
#field-checkin,
#quotes,
#sales-contracts,
#purchase-requests,
#purchase-orders,
#purchase-contracts,
#payment-applications,
#filelibrary,
#settings,
#customers,
#suppliers,
#key-projects{
  --task-accent:var(--primary,var(--color-primary));
  --task-accent-2:var(--primary-hover,var(--color-primary-hover));
  --project-primary:var(--primary,var(--color-primary));
  --project-primary-2:var(--primary-hover,var(--color-primary-hover));
  --contract-primary:var(--primary,var(--color-primary));
  --contract-primary-2:var(--primary-hover,var(--color-primary-hover));
  --invoice-primary:var(--primary,var(--color-primary));
  --invoice-primary-2:var(--primary-hover,var(--color-primary-hover));
  --checkin-primary:var(--primary,var(--color-primary));
  --checkin-primary-2:var(--primary-hover,var(--color-primary-hover));
}

.section-title h3::after,
.section-title h2::after,
.page-title::after,
.module-title::after,
.workbench-title,
.workspace-title,
.dashboard-kicker,
.page-kicker,
.card-kicker,
.sub-kicker{
  color:var(--primary,var(--color-primary))!important;
}

.section-title h2,
.section-title h3,
.page-title,
.module-title,
.drawer-title,
.modal-title{
  color:var(--text-primary,var(--color-text));
}

.card::before,
.panel::before,
.workspace-card::before,
.dashboard-card::before,
.module-card::before,
.crm-card::before{
  background:linear-gradient(90deg,var(--primary,var(--color-primary)),var(--primary-hover,var(--color-primary-hover)))!important;
}

.filter-bar,
.toolbar,
.search-panel,
.query-panel,
.form-section,
.drawer-section,
.modal-section{
  border-color:color-mix(in srgb,var(--primary,var(--color-primary)) 18%,var(--card-border,var(--gray-200)))!important;
}

.filter-bar:focus-within,
.toolbar:focus-within,
.search-panel:focus-within,
.query-panel:focus-within,
.form-section:focus-within,
.drawer-section:focus-within,
.modal-section:focus-within{
  border-color:var(--primary,var(--color-primary))!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary,var(--color-primary)) 12%,transparent)!important;
}

.tag.green,
.tag.blue,
.tag.theme,
.status-theme,
.theme-pill,
.primary-pill,
.badge-theme{
  color:var(--primary,var(--color-primary))!important;
  background:var(--primary-light,var(--color-primary-soft))!important;
  border-color:color-mix(in srgb,var(--primary,var(--color-primary)) 35%,transparent)!important;
}

button.primary,
.btn.primary,
.primary-btn,
.submit-btn,
.save-btn,
.action-primary{
  background:var(--primary,var(--color-primary))!important;
  border-color:var(--primary,var(--color-primary))!important;
  color:var(--white)!important;
}

button.primary:hover,
.btn.primary:hover,
.primary-btn:hover,
.submit-btn:hover,
.save-btn:hover,
.action-primary:hover{
  background:var(--primary-hover,var(--color-primary-hover))!important;
  border-color:var(--primary-hover,var(--color-primary-hover))!important;
  color:var(--white)!important;
}

/* Instant hover tooltip for operation icon buttons */
.action-link.icon-btn,
.action-icon,
.crm-action-btn,
.table-actions .action-link,
.task-actions .action-link,
.project-actions-cell .action-link,
.procurement-actions .action-link,
.vendor-action-cell .action-link,
.customer-action-cell .action-link,
.target-actions .action-link,
.finance-main-actions .action-link,
.finance-expanded-actions .action-link{
  position:relative;
}

.table-actions,
.task-actions,
.project-actions-cell,
.procurement-actions,
.vendor-action-cell,
.customer-action-cell,
.target-actions,
.finance-main-actions,
.finance-expanded-actions{
  overflow:visible!important;
}

.action-link.icon-btn[data-tooltip]:hover::after,
.action-link.icon-btn[data-tooltip]:focus-visible::after,
.action-icon[data-tooltip]:hover::after,
.action-icon[data-tooltip]:focus-visible::after,
.crm-action-btn[data-tooltip]:hover::after,
.crm-action-btn[data-tooltip]:focus-visible::after,
.table-actions .action-link[data-tooltip]:hover::after,
.table-actions .action-link[data-tooltip]:focus-visible::after,
.task-actions .action-link[data-tooltip]:hover::after,
.task-actions .action-link[data-tooltip]:focus-visible::after,
.project-actions-cell .action-link[data-tooltip]:hover::after,
.project-actions-cell .action-link[data-tooltip]:focus-visible::after,
.procurement-actions .action-link[data-tooltip]:hover::after,
.procurement-actions .action-link[data-tooltip]:focus-visible::after,
.vendor-action-cell .action-link[data-tooltip]:hover::after,
.vendor-action-cell .action-link[data-tooltip]:focus-visible::after,
.customer-action-cell .action-link[data-tooltip]:hover::after,
.customer-action-cell .action-link[data-tooltip]:focus-visible::after,
.target-actions .action-link[data-tooltip]:hover::after,
.target-actions .action-link[data-tooltip]:focus-visible::after,
.finance-main-actions .action-link[data-tooltip]:hover::after,
.finance-main-actions .action-link[data-tooltip]:focus-visible::after,
.finance-expanded-actions .action-link[data-tooltip]:hover::after,
.finance-expanded-actions .action-link[data-tooltip]:focus-visible::after{
  content:attr(data-tooltip);
  position:absolute;
  left:calc(100% + 8px);
  right:auto;
  top:50%;
  transform:translateY(-50%);
  z-index:9999;
  min-width:max-content;
  max-width:180px;
  padding:5px 8px;
  border-radius:8px;
  background:color-mix(in srgb, var(--gray-900) 94%, transparent);
  color:var(--white);
  font-size:12px;
  font-weight:700;
  line-height:1.2;
  white-space:nowrap;
  pointer-events:none;
  box-shadow:0 10px 24px color-mix(in srgb, var(--gray-900) 22%, transparent);
  animation:crmTooltipIn .08s ease-out both;
}

.action-link.icon-btn[data-tooltip]:hover::before,
.action-link.icon-btn[data-tooltip]:focus-visible::before,
.action-icon[data-tooltip]:hover::before,
.action-icon[data-tooltip]:focus-visible::before,
.crm-action-btn[data-tooltip]:hover::before,
.crm-action-btn[data-tooltip]:focus-visible::before,
.table-actions .action-link[data-tooltip]:hover::before,
.table-actions .action-link[data-tooltip]:focus-visible::before,
.task-actions .action-link[data-tooltip]:hover::before,
.task-actions .action-link[data-tooltip]:focus-visible::before,
.project-actions-cell .action-link[data-tooltip]:hover::before,
.project-actions-cell .action-link[data-tooltip]:focus-visible::before,
.procurement-actions .action-link[data-tooltip]:hover::before,
.procurement-actions .action-link[data-tooltip]:focus-visible::before,
.vendor-action-cell .action-link[data-tooltip]:hover::before,
.vendor-action-cell .action-link[data-tooltip]:focus-visible::before,
.customer-action-cell .action-link[data-tooltip]:hover::before,
.customer-action-cell .action-link[data-tooltip]:focus-visible::before,
.target-actions .action-link[data-tooltip]:hover::before,
.target-actions .action-link[data-tooltip]:focus-visible::before,
.finance-main-actions .action-link[data-tooltip]:hover::before,
.finance-main-actions .action-link[data-tooltip]:focus-visible::before,
.finance-expanded-actions .action-link[data-tooltip]:hover::before,
.finance-expanded-actions .action-link[data-tooltip]:focus-visible::before{
  content:"";
  position:absolute;
  left:calc(100% + 3px);
  right:auto;
  top:50%;
  transform:translateY(-50%);
  z-index:9999;
  border:5px solid transparent;
  border-right-color:color-mix(in srgb, var(--gray-900) 94%, transparent);
  pointer-events:none;
  animation:crmTooltipIn .08s ease-out both;
}

@keyframes crmTooltipIn{
  from{opacity:0;transform:translateY(-50%) translateX(2px);}
  to{opacity:1;transform:translateY(-50%) translateX(0);}
}

/* Procurement dashboard: follow active theme and unify overdue action buttons */
#procurement-dashboard,
.procurement-dashboard-shell,
.procurement-dashboard-secondary{
  --procurement-primary:var(--zway-primary,var(--color-primary));
  --procurement-primary-hover:var(--zway-primary-hover,var(--color-primary-hover));
  --procurement-primary-light:var(--zway-primary-soft,var(--color-primary-soft));
}
#procurement-dashboard .procurement-hero{
  display:none!important;
}
#procurement-dashboard .procurement-hero-tag i{
  background:color-mix(in srgb,var(--zway-surface,var(--white)) 48%,var(--procurement-primary-light))!important;
}
#procurement-dashboard .procurement-kpi-card::after,
#procurement-dashboard .procurement-kpi-strip.secondary .procurement-kpi-card::after{
  background:linear-gradient(90deg,var(--procurement-primary),var(--procurement-primary-hover))!important;
}
#procurement-dashboard .procurement-kpi-card:hover{
  border-color:color-mix(in srgb,var(--procurement-primary) 35%,transparent)!important;
  box-shadow:var(--zway-shadow-md,0 14px 30px color-mix(in srgb,var(--procurement-primary) 14%,transparent))!important;
}
#procurement-dashboard .procurement-kpi-icon,
#procurement-dashboard .procurement-kpi-icon.blue,
#procurement-dashboard .procurement-kpi-icon.purple,
#procurement-dashboard .procurement-kpi-icon.orange,
#procurement-dashboard .procurement-kpi-icon.red,
#procurement-dashboard .procurement-kpi-icon.teal{
  color:var(--procurement-primary)!important;
  background:var(--procurement-primary-light)!important;
}
#procurement-dashboard .procurement-panel-head{
  border-bottom-color:color-mix(in srgb,var(--procurement-primary) 18%,var(--zway-border,var(--gray-200)))!important;
}
#procurement-dashboard .procurement-panel-head h3,
#procurement-dashboard .procurement-panel-head strong{
  color:var(--zway-text,var(--color-text))!important;
}
#procurement-dashboard #procurementFlowTable th,
#procurement-dashboard .procurement-overdue-table th{
  background:var(--procurement-primary-light)!important;
  color:var(--procurement-primary)!important;
  border-bottom-color:color-mix(in srgb,var(--procurement-primary) 34%,var(--zway-border,var(--gray-200)))!important;
}
#procurement-dashboard #procurementFlowTable tr:hover,
#procurement-dashboard .procurement-overdue-table tbody tr:hover{
  background:color-mix(in srgb,var(--procurement-primary) 7%,var(--zway-surface,var(--white)))!important;
}
#procurement-dashboard .procurement-flow-step-green,
#procurement-dashboard .procurement-flow-step-blue,
#procurement-dashboard .procurement-flow-step-orange,
#procurement-dashboard .procurement-flow-step-red,
#procurement-dashboard .procurement-flow-step-gray{
  background:color-mix(in srgb,var(--procurement-primary-light) 62%,var(--zway-surface,var(--white)))!important;
  border-color:color-mix(in srgb,var(--procurement-primary) 24%,var(--zway-border,var(--gray-200)))!important;
}
#procurement-dashboard .procurement-flow-step-link,
#procurement-dashboard .procurement-overdue-table .action-link:not(.icon-btn){
  color:var(--procurement-primary)!important;
}
#procurement-dashboard .procurement-overdue-table .procurement-actions{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
}
#procurement-dashboard .procurement-overdue-table .action-link.icon-btn:hover,
#procurement-dashboard .procurement-overdue-table .action-link.icon-btn:focus-visible{
  color:var(--zway-text-on-primary,var(--white))!important;
  background:var(--procurement-primary)!important;
  border-color:var(--procurement-primary)!important;
  box-shadow:var(--zway-shadow-sm,0 10px 22px color-mix(in srgb,var(--procurement-primary) 24%,transparent))!important;
  text-decoration:none!important;
}
#procurement-dashboard .page-btn:hover,
#procurement-dashboard .page-jump-input:focus,
#procurement-dashboard .page-jump-btn:hover{
  border-color:var(--procurement-primary)!important;
  color:var(--procurement-primary)!important;
}
#procurement-dashboard .page-btn.active{
  background:var(--procurement-primary)!important;
  border-color:var(--procurement-primary)!important;
  color:var(--zway-text-on-primary,var(--white))!important;
}

/* Procurement supplier ranking table: independent 4-column layout */
#procurement-dashboard #supplierRankTable{
  table-layout:fixed;
  width:100%;
}
#procurement-dashboard #supplierRankTable th,
#procurement-dashboard #supplierRankTable td{
  vertical-align:middle;
  text-align:left;
}
#procurement-dashboard #supplierRankTable th:nth-child(1),
#procurement-dashboard #supplierRankTable td:nth-child(1){
  width:72px;
  text-align:center;
}
#procurement-dashboard #supplierRankTable th:nth-child(2),
#procurement-dashboard #supplierRankTable td:nth-child(2){
  width:52%;
}
#procurement-dashboard #supplierRankTable th:nth-child(3),
#procurement-dashboard #supplierRankTable td:nth-child(3){
  width:120px;
  text-align:center;
}
#procurement-dashboard #supplierRankTable th:nth-child(4),
#procurement-dashboard #supplierRankTable td:nth-child(4){
  width:220px;
  text-align:right;
}
#procurement-dashboard #supplierRankTable .action-link{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  color:var(--primary,var(--color-primary))!important;
  font-weight:750;
  text-decoration:none!important;
  white-space:normal;
  word-break:break-word;
  line-height:1.35;
}
#procurement-dashboard #supplierRankTable .num .action-link{
  justify-content:flex-end;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
#procurement-dashboard #supplierRankTable .action-link:hover,
#procurement-dashboard #supplierRankTable .action-link:focus-visible{
  color:var(--primary-hover,var(--color-primary-hover))!important;
  text-decoration:underline!important;
  text-underline-offset:3px;
}

/* Procurement supplier rank table: hard reset to avoid inherited overdue columns */
#procurement-dashboard .procurement-rank-table{
  width:100%!important;
  table-layout:fixed!important;
  border-collapse:separate!important;
  border-spacing:0!important;
}
#procurement-dashboard .procurement-rank-table th,
#procurement-dashboard .procurement-rank-table td{
  padding:12px 14px!important;
  border-bottom:1px solid color-mix(in srgb,var(--primary,var(--color-primary)) 12%,var(--raw-eef2f7))!important;
  vertical-align:middle!important;
  box-sizing:border-box!important;
}
#procurement-dashboard .procurement-rank-table th{
  background:var(--primary-light,var(--color-primary-soft))!important;
  color:var(--primary,var(--color-primary))!important;
  font-size:12px!important;
  font-weight:800!important;
  text-align:left!important;
}
#procurement-dashboard .procurement-rank-table th:nth-child(1),
#procurement-dashboard .procurement-rank-table td:nth-child(1){
  width:72px!important;
  text-align:center!important;
}
#procurement-dashboard .procurement-rank-table th:nth-child(2),
#procurement-dashboard .procurement-rank-table td:nth-child(2){
  width:auto!important;
  text-align:left!important;
}
#procurement-dashboard .procurement-rank-table th:nth-child(3),
#procurement-dashboard .procurement-rank-table td:nth-child(3){
  width:120px!important;
  text-align:center!important;
}
#procurement-dashboard .procurement-rank-table th:nth-child(4),
#procurement-dashboard .procurement-rank-table td:nth-child(4){
  width:180px!important;
  text-align:right!important;
}
#procurement-dashboard .procurement-rank-table .action-link{
  max-width:100%;
  color:var(--primary,var(--color-primary))!important;
  font-weight:750!important;
  text-decoration:none!important;
}
#procurement-dashboard .procurement-rank-table td:nth-child(2) .action-link{
  white-space:normal!important;
  word-break:break-word!important;
}
#procurement-dashboard .procurement-rank-table td:nth-child(4) .action-link{
  justify-content:flex-end!important;
  white-space:nowrap!important;
  font-variant-numeric:tabular-nums!important;
}

/* Sales contract approval/editor drawer: compact hero + theme-aware colors */
#salesContractApprovalDrawer{
  --sc-detail-theme:var(--primary,var(--color-primary));
  --sc-detail-theme-strong:var(--primary-hover,color-mix(in srgb,var(--color-primary) 78%,#000 22%));
  --sc-detail-soft:color-mix(in srgb,var(--sc-detail-theme) 9%,#fff 91%);
  --sc-detail-faint:color-mix(in srgb,var(--sc-detail-theme) 4%,#fff 96%);
  --sc-detail-line:color-mix(in srgb,var(--sc-detail-theme) 22%,var(--color-border) 78%);
  --sc-detail-ink:color-mix(in srgb,var(--sc-detail-theme) 70%,var(--color-text) 30%);
  --sc-detail-muted:color-mix(in srgb,var(--sc-detail-theme) 35%,var(--color-text-secondary) 65%);
}
[data-theme="blue"] #salesContractApprovalDrawer{--sc-detail-theme:var(--color-primary);--sc-detail-theme-strong:var(--color-primary-hover);}
[data-theme="orange"] #salesContractApprovalDrawer{--sc-detail-theme:var(--color-primary);--sc-detail-theme-strong:var(--color-primary-hover);}
#salesContractApprovalDrawer .sales-contract-approval-panel{
  background:linear-gradient(180deg,var(--white) 0%,var(--sc-detail-faint) 100%)!important;
}
#salesContractApprovalDrawer .sales-contract-approval-head{
  background:linear-gradient(135deg,var(--white) 0%,var(--sc-detail-soft) 100%)!important;
  border-bottom:1px solid var(--sc-detail-line)!important;
}
#salesContractApprovalDrawer .sales-contract-approval-head h3,
#salesContractApprovalDrawer #salesContractApprovalTitle{
  color:var(--sc-detail-ink)!important;
  font-size:18px!important;
  line-height:1.35!important;
}
#salesContractApprovalDrawer #salesContractApprovalSubtitle,
#salesContractApprovalDrawer .sales-contract-approval-head p{
  color:var(--sc-detail-muted)!important;
}
#salesContractApprovalDrawer .sales-contract-approval-close,
#salesContractApprovalDrawer .sales-contract-approval-head .btn{
  color:var(--sc-detail-muted)!important;
  background:var(--sc-detail-soft)!important;
  border-color:var(--sc-detail-line)!important;
}
#salesContractApprovalDrawer .sales-contract-approval-close:hover,
#salesContractApprovalDrawer .sales-contract-approval-head .btn:hover{
  color:var(--white)!important;
  background:linear-gradient(135deg,var(--sc-detail-theme),var(--sc-detail-theme-strong))!important;
}
#salesContractApprovalDrawer .sales-contract-template-notice,
#salesContractApprovalDrawer .sc-contract-notice{
  color:var(--sc-detail-ink)!important;
  background:linear-gradient(135deg,var(--sc-detail-soft),var(--white))!important;
  border:1px solid var(--sc-detail-line)!important;
  box-shadow:0 12px 28px color-mix(in srgb,var(--sc-detail-theme) 9%,transparent)!important;
  font-size:13px!important;
  line-height:1.6!important;
}
#salesContractApprovalDrawer .sc-contract-hero,
#salesContractApprovalDrawer .sales-contract-approval-summary.sc-contract-hero{
  gap:14px!important;
  margin-bottom:18px!important;
}
#salesContractApprovalDrawer .sc-contract-stat,
#salesContractApprovalDrawer .sales-contract-approval-stat.sc-contract-stat{
  min-height:104px!important;
  padding:18px 20px!important;
  border:1px solid var(--sc-detail-line)!important;
  background:linear-gradient(145deg,var(--white),var(--sc-detail-faint))!important;
  box-shadow:0 12px 28px color-mix(in srgb,var(--sc-detail-theme) 8%,transparent)!important;
}
#salesContractApprovalDrawer .sc-contract-stat::after,
#salesContractApprovalDrawer .sales-contract-approval-stat.sc-contract-stat::after{
  background:color-mix(in srgb,var(--sc-detail-theme) 10%,transparent)!important;
}
#salesContractApprovalDrawer .sc-contract-stat .label,
#salesContractApprovalDrawer .sales-contract-approval-stat.sc-contract-stat .label{
  color:var(--sc-detail-muted)!important;
  font-size:12px!important;
  font-weight:800!important;
}
#salesContractApprovalDrawer .sc-contract-stat .value,
#salesContractApprovalDrawer .sales-contract-approval-stat.sc-contract-stat .value{
  color:var(--sc-detail-ink)!important;
  font-size:18px!important;
  line-height:1.35!important;
  font-weight:850!important;
  margin-top:12px!important;
}
#salesContractApprovalDrawer .sc-contract-stat.is-done .value,
#salesContractApprovalDrawer .sales-contract-approval-stat.sc-contract-stat.is-done .value{
  color:var(--sc-detail-theme)!important;
}
#salesContractApprovalDrawer .sc-contract-card,
#salesContractApprovalDrawer .sales-contract-approval-card.sc-contract-card{
  border:1px solid var(--sc-detail-line)!important;
  background:linear-gradient(180deg,var(--white),var(--sc-detail-faint))!important;
  box-shadow:0 14px 34px color-mix(in srgb,var(--sc-detail-theme) 7%,transparent)!important;
}
#salesContractApprovalDrawer .sc-contract-card h4,
#salesContractApprovalDrawer .sales-contract-approval-card.sc-contract-card h4{
  color:var(--sc-detail-ink)!important;
}
#salesContractApprovalDrawer .sc-contract-card h4 span::before,
#salesContractApprovalDrawer .sales-contract-approval-card.sc-contract-card h4 span::before{
  background:linear-gradient(180deg,var(--sc-detail-theme),var(--sc-detail-theme-strong))!important;
  box-shadow:0 0 0 5px color-mix(in srgb,var(--sc-detail-theme) 11%,transparent)!important;
}
#salesContractApprovalDrawer .sc-contract-card h4 em,
#salesContractApprovalDrawer .sales-contract-approval-card.sc-contract-card h4 em{
  color:color-mix(in srgb,var(--sc-detail-theme) 62%,var(--gray-400) 38%)!important;
}
#salesContractApprovalDrawer .sc-contract-form label,
#salesContractApprovalDrawer .sales-contract-edit-form label,
#salesContractApprovalDrawer .sales-contract-approval-items th{
  color:var(--sc-detail-muted)!important;
}
#salesContractApprovalDrawer .sc-contract-form input,
#salesContractApprovalDrawer .sc-contract-form textarea,
#salesContractApprovalDrawer .sc-contract-form select,
#salesContractApprovalDrawer .sales-contract-edit-form input,
#salesContractApprovalDrawer .sales-contract-edit-form textarea,
#salesContractApprovalDrawer .sales-contract-edit-form select,
#salesContractApprovalDrawer .sales-contract-edit-items input,
#salesContractApprovalDrawer .sales-contract-edit-items textarea{
  border-color:var(--sc-detail-line)!important;
  color:var(--color-text)!important;
  background:var(--white)!important;
}
#salesContractApprovalDrawer .sc-contract-form input:focus,
#salesContractApprovalDrawer .sc-contract-form textarea:focus,
#salesContractApprovalDrawer .sc-contract-form select:focus,
#salesContractApprovalDrawer .sales-contract-edit-form input:focus,
#salesContractApprovalDrawer .sales-contract-edit-form textarea:focus,
#salesContractApprovalDrawer .sales-contract-edit-form select:focus,
#salesContractApprovalDrawer .sales-contract-edit-items input:focus,
#salesContractApprovalDrawer .sales-contract-edit-items textarea:focus{
  border-color:var(--sc-detail-theme)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--sc-detail-theme) 13%,transparent)!important;
  outline:none!important;
}
#salesContractApprovalDrawer .sc-contract-table-wrap,
#salesContractApprovalDrawer .sales-contract-approval-items{
  border-color:var(--sc-detail-line)!important;
}
#salesContractApprovalDrawer .sales-contract-approval-items thead th{
  background:var(--sc-detail-soft)!important;
}
#salesContractApprovalDrawer .sales-contract-approval-actions{
  border-top-color:var(--sc-detail-line)!important;
  background:color-mix(in srgb, var(--white) 96%, transparent)!important;
}
#salesContractApprovalDrawer .sales-contract-approval-actions .btn.primary,
#salesContractApprovalDrawer .sales-contract-approval-actions button.btn.primary{
  background:linear-gradient(135deg,var(--sc-detail-theme),var(--sc-detail-theme-strong))!important;
  border-color:transparent!important;
  color:var(--white)!important;
}
#salesContractApprovalDrawer .sales-contract-approval-actions .btn:not(.primary):not(.danger){
  color:var(--sc-detail-ink)!important;
  background:var(--sc-detail-soft)!important;
  border-color:var(--sc-detail-line)!important;
}
#salesContractApprovalDrawer .sales-contract-approval-actions .btn:not(.primary):not(.danger):hover{
  color:var(--white)!important;
  background:linear-gradient(135deg,var(--sc-detail-theme),var(--sc-detail-theme-strong))!important;
}
@media (max-width: 1100px){
  #salesContractApprovalDrawer .sc-contract-hero,
  #salesContractApprovalDrawer .sales-contract-approval-summary.sc-contract-hero{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media (max-width: 720px){
  #salesContractApprovalDrawer .sc-contract-hero,
  #salesContractApprovalDrawer .sales-contract-approval-summary.sc-contract-hero{
    grid-template-columns:1fr!important;
  }
  #salesContractApprovalDrawer .sc-contract-stat .value,
  #salesContractApprovalDrawer .sales-contract-approval-stat.sc-contract-stat .value{
    font-size:16px!important;
  }
}

/* Theme-aware approval history cards */
.sales-contract-approval-history{
  --approval-theme:var(--primary,var(--color-primary));
  --approval-theme-strong:var(--primary-hover,color-mix(in srgb,var(--color-primary) 78%,#000 22%));
  --approval-soft:color-mix(in srgb,var(--approval-theme) 7%,#fff 93%);
  --approval-line:color-mix(in srgb,var(--approval-theme) 22%,var(--color-border) 78%);
  --approval-ink:color-mix(in srgb,var(--approval-theme) 70%,var(--color-text) 30%);
  --approval-muted:color-mix(in srgb,var(--approval-theme) 28%,var(--color-text-secondary) 72%);
}
[data-theme="blue"] .sales-contract-approval-history{--approval-theme:var(--color-primary);--approval-theme-strong:var(--color-primary-hover);}
[data-theme="orange"] .sales-contract-approval-history{--approval-theme:var(--color-primary);--approval-theme-strong:var(--color-primary-hover);}
.sales-contract-approval-history-item{
  border-left-color:var(--approval-theme)!important;
  background:linear-gradient(135deg,var(--approval-soft),var(--white))!important;
  box-shadow:0 10px 24px color-mix(in srgb,var(--approval-theme) 6%,transparent)!important;
}
.sales-contract-approval-history-item strong{
  color:var(--approval-ink)!important;
}
.sales-contract-approval-history-item div{
  color:var(--approval-muted)!important;
}
#salesContractApprovalDrawer .sc-contract-card h4 em,
#salesContractApprovalDrawer .sales-contract-approval-card.sc-contract-card h4 em{
  color:color-mix(in srgb,var(--sc-detail-theme,var(--primary,var(--color-primary))) 66%,var(--gray-400) 34%)!important;
}
#salesContractApprovalDrawer .sc-contract-card h4 span::before,
#salesContractApprovalDrawer .sales-contract-approval-card.sc-contract-card h4 span::before{
  background:linear-gradient(180deg,var(--sc-detail-theme,var(--primary,var(--color-primary))),var(--sc-detail-theme-strong,var(--primary-hover,color-mix(in srgb,var(--color-primary) 78%,var(--raw-000) 22%))))!important;
}

/* Quote item brand field: place brand input directly before quantity */
#quoteItemsBody .quote-item-layout-with-brand{
  grid-template-columns:minmax(0,1fr) minmax(620px,720px)!important;
}
#quoteItemsBody .quote-item-top-grid-compact{
  grid-template-columns:minmax(260px,1.45fr) minmax(220px,1fr)!important;
}
#quoteItemsBody .quote-item-side-grid-with-brand{
  grid-template-columns:minmax(130px,1fr) minmax(110px,.85fr) minmax(110px,.85fr) minmax(150px,1.1fr) minmax(110px,.85fr) minmax(150px,1.1fr)!important;
  align-items:end!important;
}
#quoteItemsBody .quote-item-side-grid-with-brand .qi-brand-field input{
  min-width:0!important;
}
@media(max-width:1320px){
  #quoteItemsBody .quote-item-layout,
  #quoteItemsBody .quote-item-layout-with-brand{
    grid-template-columns:1fr!important;
  }
  #quoteItemsBody .quote-item-side-grid,
  #quoteItemsBody .quote-item-side-grid-with-brand{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}
@media(max-width:768px){
  #quoteItemsBody .quote-item-top-grid,
  #quoteItemsBody .quote-item-top-grid-compact{
    grid-template-columns:1fr!important;
  }
  #quoteItemsBody .quote-item-desc-grid{
    grid-template-columns:1fr!important;
  }
  #quoteItemsBody .quote-item-side-grid,
  #quoteItemsBody .quote-item-side-grid-with-brand{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:480px){
  #quoteItemsBody .quote-item-body{
    padding:10px 12px!important;
  }
  #quoteItemsBody .quote-item-layout,
  #quoteItemsBody .quote-item-layout-with-brand{
    gap:10px!important;
    display:flex!important;
    flex-direction:column!important;
  }
  #quoteItemsBody .quote-item-main{
    gap:10px!important;
  }
  #quoteItemsBody .quote-item-top-grid,
  #quoteItemsBody .quote-item-top-grid-compact,
  #quoteItemsBody .quote-item-desc-grid{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  #quoteItemsBody .quote-item-side-grid,
  #quoteItemsBody .quote-item-side-grid-with-brand{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  #quoteItemsBody .quote-item-card .field span{
    font-size:12px;
    margin-bottom:4px;
  }
  #quoteItemsBody .quote-item-card .field input,
  #quoteItemsBody .quote-item-card .field select{
    font-size:13px;
    padding:9px 12px;
    border-radius:8px;
    border:1px solid var(--color-border);
  }
  #quoteItemsBody .quote-item-card .field textarea{
    font-size:14px;
    padding:9px 12px;
    border-radius:8px;
    border:1px solid var(--color-border);
    min-height:80px;
  }
  #quoteItemsBody .quote-custom-head{
    flex-wrap:wrap;
    gap:8px;
  }
  #quoteItemsBody .quote-custom-head span{
    font-size:12px;
  }
}

/* Quote item layout redesign: stable two-row grid with balanced column widths */
#quoteItemsBody .quote-item-card{
  overflow:hidden!important;
}
#quoteItemsBody .quote-item-body{
  padding:22px 28px 26px!important;
}
#quoteItemsBody .quote-item-layout-with-brand{
  display:block!important;
}
#quoteItemsBody .quote-item-main,
#quoteItemsBody .quote-item-side{
  display:block!important;
  width:100%!important;
}
#quoteItemsBody .quote-item-top-grid-compact,
#quoteItemsBody .quote-item-side-grid-with-brand{
  display:contents!important;
}
#quoteItemsBody .quote-item-layout-with-brand{
  --qi-gap:16px;
}
#quoteItemsBody .quote-item-layout-with-brand .quote-item-main,
#quoteItemsBody .quote-item-layout-with-brand .quote-item-side{
  display:contents!important;
}
#quoteItemsBody .quote-item-layout-with-brand{
  display:grid!important;
  grid-template-columns:minmax(280px,1.65fr) minmax(150px,.82fr) minmax(220px,1.15fr) minmax(110px,.58fr) minmax(120px,.62fr) minmax(170px,.9fr) minmax(110px,.58fr) minmax(140px,.75fr)!important;
  gap:18px var(--qi-gap)!important;
  align-items:end!important;
}
#quoteItemsBody .quote-item-layout-with-brand .qi-product-field{grid-column:1!important;grid-row:1!important;}
#quoteItemsBody .quote-item-layout-with-brand .qi-brand-field{grid-column:2!important;grid-row:1!important;}
#quoteItemsBody .quote-item-layout-with-brand .qi-model-field{grid-column:3!important;grid-row:1!important;}
#quoteItemsBody .quote-item-layout-with-brand [data-quote-item="quantity"]{ }
#quoteItemsBody .quote-item-layout-with-brand .quote-item-side-grid-with-brand > label:nth-child(2){grid-column:4!important;grid-row:1!important;}
#quoteItemsBody .quote-item-layout-with-brand .quote-item-side-grid-with-brand > label:nth-child(3){grid-column:5!important;grid-row:1!important;}
#quoteItemsBody .quote-item-layout-with-brand .quote-item-side-grid-with-brand > label:nth-child(4){grid-column:6!important;grid-row:1!important;}
#quoteItemsBody .quote-item-layout-with-brand .quote-item-side-grid-with-brand > label:nth-child(5){grid-column:7!important;grid-row:1!important;}
#quoteItemsBody .quote-item-layout-with-brand .quote-item-side-grid-with-brand > label:nth-child(6){grid-column:8!important;grid-row:1!important;}
#quoteItemsBody .quote-item-desc-grid{
  display:grid!important;
  grid-column:1 / -1!important;
  grid-row:2!important;
  grid-template-columns:repeat(3,minmax(220px,1fr))!important;
  gap:16px!important;
  margin-top:4px!important;
}
#quoteItemsBody .quote-custom-fields{
  grid-column:1 / -1!important;
  grid-row:3!important;
  width:100%!important;
  margin-top:2px!important;
}
#quoteItemsBody .quote-item-card .field,
#quoteItemsBody .quote-item-card label.field{
  min-width:0!important;
  width:100%!important;
}
#quoteItemsBody .quote-item-card .field span{
  white-space:normal!important;
  word-break:normal!important;
  line-height:1.35!important;
}
#quoteItemsBody .quote-item-card input,
#quoteItemsBody .quote-item-card textarea,
#quoteItemsBody .quote-item-card [data-quote-item-subtotal]{
  width:100%!important;
  box-sizing:border-box!important;
}
#quoteItemsBody .quote-item-desc-grid textarea{
  min-height:118px!important;
  resize:vertical!important;
  writing-mode:horizontal-tb!important;
  white-space:pre-wrap!important;
}
#quoteItemsBody .quote-item-card [data-quote-item-subtotal]{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  min-height:44px!important;
  padding:0 16px!important;
}
@media(max-width:1480px){
  #quoteItemsBody .quote-item-layout-with-brand{
    grid-template-columns:minmax(260px,1.5fr) minmax(140px,.8fr) minmax(200px,1.05fr) minmax(100px,.58fr) minmax(110px,.6fr) minmax(150px,.85fr) minmax(100px,.58fr) minmax(130px,.72fr)!important;
  }
}
@media(max-width:1180px){
  #quoteItemsBody .quote-item-layout-with-brand{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
  #quoteItemsBody .quote-item-layout-with-brand .qi-product-field{grid-column:1 / 3!important;grid-row:1!important;}
  #quoteItemsBody .quote-item-layout-with-brand .qi-brand-field{grid-column:3!important;grid-row:1!important;}
  #quoteItemsBody .quote-item-layout-with-brand .qi-model-field{grid-column:4!important;grid-row:1!important;}
  #quoteItemsBody .quote-item-layout-with-brand .quote-item-side-grid-with-brand > label:nth-child(2){grid-column:1!important;grid-row:2!important;}
  #quoteItemsBody .quote-item-layout-with-brand .quote-item-side-grid-with-brand > label:nth-child(3){grid-column:2!important;grid-row:2!important;}
  #quoteItemsBody .quote-item-layout-with-brand .quote-item-side-grid-with-brand > label:nth-child(4){grid-column:3!important;grid-row:2!important;}
  #quoteItemsBody .quote-item-layout-with-brand .quote-item-side-grid-with-brand > label:nth-child(5){grid-column:4!important;grid-row:2!important;}
  #quoteItemsBody .quote-item-layout-with-brand .quote-item-side-grid-with-brand > label:nth-child(6){grid-column:1 / 2!important;grid-row:3!important;}
  #quoteItemsBody .quote-item-desc-grid{grid-row:4!important;}
  #quoteItemsBody .quote-custom-fields{grid-row:5!important;}
}
@media(max-width:760px){
  #quoteItemsBody .quote-item-body{padding:16px!important;}
  #quoteItemsBody .quote-item-layout-with-brand,
  #quoteItemsBody .quote-item-desc-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
  }
  #quoteItemsBody .quote-item-layout-with-brand .qi-product-field,
  #quoteItemsBody .quote-item-layout-with-brand .qi-brand-field,
  #quoteItemsBody .quote-item-layout-with-brand .qi-model-field,
  #quoteItemsBody .quote-item-layout-with-brand .quote-item-side-grid-with-brand > label,
  #quoteItemsBody .quote-item-desc-grid,
  #quoteItemsBody .quote-custom-fields{
    grid-column:1!important;
    grid-row:auto!important;
  }
}

/* Quote drawer wide workspace: show all quote item columns clearly */

@media(max-width:760px){
  #quoteItemsBody .quote-item-layout-with-brand{
    display:flex!important;
    flex-direction:column!important;
    grid-template-columns:none!important;
    gap:12px!important;
    align-items:stretch!important;
  }
  #quoteItemsBody .quote-item-layout-with-brand .quote-item-main,
  #quoteItemsBody .quote-item-layout-with-brand .quote-item-side{
    display:block!important;
    width:100%!important;
  }
  #quoteItemsBody .quote-item-layout-with-brand .quote-item-top-grid-compact,
  #quoteItemsBody .quote-item-layout-with-brand .quote-item-side-grid-with-brand{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  #quoteItemsBody .quote-item-layout-with-brand .quote-item-desc-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    grid-column:auto!important;
    grid-row:auto!important;
    margin-top:0!important;
  }
  #quoteItemsBody .quote-item-layout-with-brand .quote-custom-fields{
    grid-column:auto!important;
    grid-row:auto!important;
    margin-top:0!important;
  }
  #quoteItemsBody .quote-item-layout-with-brand .qi-product-field,
  #quoteItemsBody .quote-item-layout-with-brand .qi-brand-field,
  #quoteItemsBody .quote-item-layout-with-brand .qi-model-field,
  #quoteItemsBody .quote-item-layout-with-brand .quote-item-side-grid-with-brand > label{
    grid-column:auto!important;
    grid-row:auto!important;
  }
  #quoteItemsBody .quote-item-body{
    padding:12px 14px!important;
  }
  #quoteItemsBody .quote-item-card .field span{
    font-size:12px!important;
    margin-bottom:4px!important;
  }
  #quoteItemsBody .quote-item-card .field input,
  #quoteItemsBody .quote-item-card .field select{
    font-size:14px!important;
    padding:9px 12px!important;
  }
  #quoteItemsBody .quote-item-card .field textarea{
    font-size:14px!important;
    padding:9px 12px!important;
    min-height:80px!important;
  }
}
@media(max-width:480px){
  #quoteItemsBody .quote-item-body{
    padding:10px 12px!important;
  }
  #quoteItemsBody .quote-item-layout-with-brand,
  #quoteItemsBody .quote-item-layout-with-brand .quote-item-top-grid-compact,
  #quoteItemsBody .quote-item-layout-with-brand .quote-item-side-grid-with-brand,
  #quoteItemsBody .quote-item-layout-with-brand .quote-item-desc-grid{
    gap:8px!important;
  }
}
#quoteDrawer .quote-editor-panel,
#quoteDrawer .drawer-panel.quote-editor-panel{
  width:min(96vw,1900px)!important;
  max-width:min(96vw,1900px)!important;
}
#quoteDrawer .quote-section,
#quoteDrawer .quote-detail-card,
#quoteDrawer #quoteItemsBody,
#quoteDrawer .quote-item-list{
  width:100%!important;
  max-width:100%!important;
}
#quoteItemsBody .quote-item-card{
  width:100%!important;
}
#quoteItemsBody .quote-item-body{
  overflow-x:auto!important;
  overflow-y:visible!important;
}
#quoteItemsBody .quote-item-layout-with-brand{
  min-width:1420px!important;
  grid-template-columns:minmax(270px,1.55fr) minmax(130px,.72fr) minmax(210px,1.05fr) minmax(96px,.52fr) minmax(100px,.55fr) minmax(150px,.8fr) minmax(95px,.5fr) minmax(130px,.7fr)!important;
}
#quoteItemsBody .quote-item-desc-grid{
  min-width:100%!important;
  grid-template-columns:minmax(300px,1fr) minmax(300px,1fr) minmax(360px,1.2fr)!important;
}
#quoteItemsBody .quote-item-card .field span{
  font-size:13px!important;
  white-space:nowrap!important;
}
#quoteItemsBody .quote-item-card input{
  min-height:44px!important;
  padding-left:14px!important;
  padding-right:14px!important;
}
#quoteItemsBody .quote-item-card textarea{
  min-height:118px!important;
  padding:12px 14px!important;
}
@media(max-width:1500px){
  #quoteDrawer .quote-editor-panel,
  #quoteDrawer .drawer-panel.quote-editor-panel{
    width:98vw!important;
    max-width:98vw!important;
  }
  #quoteItemsBody .quote-item-layout-with-brand{
    min-width:1380px!important;
  }
}
@media(max-width:1180px){
  #quoteItemsBody .quote-item-layout-with-brand{
    min-width:980px!important;
  }
  #quoteItemsBody .quote-item-desc-grid{
    grid-template-columns:repeat(3,minmax(260px,1fr))!important;
  }
}
@media(max-width:760px){
  #quoteDrawer .quote-editor-panel,
  #quoteDrawer .drawer-panel.quote-editor-panel{
    width:100vw!important;
    max-width:100vw!important;
  }
  #quoteItemsBody .quote-item-layout-with-brand{
    min-width:0!important;
  }
}

/* Quote drawer balanced width: not too wide, still fits quote item fields */
#quoteDrawer .quote-editor-panel,
#quoteDrawer .drawer-panel.quote-editor-panel{
  width:min(88vw,1520px)!important;
  max-width:min(88vw,1520px)!important;
}
#quoteItemsBody .quote-item-layout-with-brand{
  min-width:1280px!important;
  grid-template-columns:minmax(250px,1.45fr) minmax(120px,.7fr) minmax(190px,1fr) minmax(90px,.5fr) minmax(96px,.52fr) minmax(140px,.8fr) minmax(90px,.5fr) minmax(120px,.68fr)!important;
}
#quoteItemsBody .quote-item-desc-grid{
  grid-template-columns:minmax(280px,1fr) minmax(280px,1fr) minmax(320px,1.12fr)!important;
}
@media(max-width:1500px){
  #quoteDrawer .quote-editor-panel,
  #quoteDrawer .drawer-panel.quote-editor-panel{
    width:92vw!important;
    max-width:92vw!important;
  }
  #quoteItemsBody .quote-item-layout-with-brand{
    min-width:1240px!important;
  }
}
@media(max-width:1180px){
  #quoteDrawer .quote-editor-panel,
  #quoteDrawer .drawer-panel.quote-editor-panel{
    width:96vw!important;
    max-width:96vw!important;
  }
  #quoteItemsBody .quote-item-layout-with-brand{
    min-width:980px!important;
  }
}

/* Quote drawer compact width: max 1100px with responsive item grid */
#quoteDrawer .quote-editor-panel,
#quoteDrawer .drawer-panel.quote-editor-panel{
  width:min(92vw,1100px)!important;
  max-width:min(92vw,1100px)!important;
}
#quoteItemsBody .quote-item-body{
  overflow-x:visible!important;
}
#quoteItemsBody .quote-item-layout-with-brand{
  min-width:0!important;
  display:grid!important;
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  gap:18px 16px!important;
  align-items:end!important;
}
#quoteItemsBody .quote-item-layout-with-brand .qi-product-field{grid-column:1 / 4!important;grid-row:1!important;}
#quoteItemsBody .quote-item-layout-with-brand .qi-brand-field{grid-column:4 / 6!important;grid-row:1!important;}
#quoteItemsBody .quote-item-layout-with-brand .qi-model-field{grid-column:6 / 9!important;grid-row:1!important;}
#quoteItemsBody .quote-item-layout-with-brand .quote-item-side-grid-with-brand > label:nth-child(2){grid-column:9 / 10!important;grid-row:1!important;}
#quoteItemsBody .quote-item-layout-with-brand .quote-item-side-grid-with-brand > label:nth-child(3){grid-column:10 / 11!important;grid-row:1!important;}
#quoteItemsBody .quote-item-layout-with-brand .quote-item-side-grid-with-brand > label:nth-child(4){grid-column:11 / 13!important;grid-row:1!important;}
#quoteItemsBody .quote-item-layout-with-brand .quote-item-side-grid-with-brand > label:nth-child(5){grid-column:1 / 3!important;grid-row:2!important;}
#quoteItemsBody .quote-item-layout-with-brand .quote-item-side-grid-with-brand > label:nth-child(6){grid-column:3 / 5!important;grid-row:2!important;}
#quoteItemsBody .quote-item-desc-grid{
  grid-column:1 / -1!important;
  grid-row:3!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:16px!important;
  min-width:0!important;
}
#quoteItemsBody .quote-custom-fields{
  grid-column:1 / -1!important;
  grid-row:4!important;
}
#quoteItemsBody .quote-item-card .field span{
  white-space:normal!important;
}
#quoteItemsBody .quote-item-card input,
#quoteItemsBody .quote-item-card textarea,
#quoteItemsBody .quote-item-card [data-quote-item-subtotal]{
  min-width:0!important;
}
@media(max-width:1180px){
  #quoteDrawer .quote-editor-panel,
  #quoteDrawer .drawer-panel.quote-editor-panel{
    width:94vw!important;
    max-width:94vw!important;
  }
  #quoteItemsBody .quote-item-layout-with-brand .qi-product-field{grid-column:1 / 5!important;grid-row:1!important;}
  #quoteItemsBody .quote-item-layout-with-brand .qi-brand-field{grid-column:5 / 8!important;grid-row:1!important;}
  #quoteItemsBody .quote-item-layout-with-brand .qi-model-field{grid-column:8 / 13!important;grid-row:1!important;}
  #quoteItemsBody .quote-item-layout-with-brand .quote-item-side-grid-with-brand > label:nth-child(2){grid-column:1 / 3!important;grid-row:2!important;}
  #quoteItemsBody .quote-item-layout-with-brand .quote-item-side-grid-with-brand > label:nth-child(3){grid-column:3 / 5!important;grid-row:2!important;}
  #quoteItemsBody .quote-item-layout-with-brand .quote-item-side-grid-with-brand > label:nth-child(4){grid-column:5 / 8!important;grid-row:2!important;}
  #quoteItemsBody .quote-item-layout-with-brand .quote-item-side-grid-with-brand > label:nth-child(5){grid-column:8 / 10!important;grid-row:2!important;}
  #quoteItemsBody .quote-item-layout-with-brand .quote-item-side-grid-with-brand > label:nth-child(6){grid-column:10 / 13!important;grid-row:2!important;}
  #quoteItemsBody .quote-item-desc-grid{grid-row:3!important;}
}
@media(max-width:760px){
  #quoteDrawer .quote-editor-panel,
  #quoteDrawer .drawer-panel.quote-editor-panel{
    width:100vw!important;
    max-width:100vw!important;
  }
  #quoteItemsBody .quote-item-layout-with-brand,
  #quoteItemsBody .quote-item-desc-grid{
    grid-template-columns:1fr!important;
  }
  #quoteItemsBody .quote-item-layout-with-brand .qi-product-field,
  #quoteItemsBody .quote-item-layout-with-brand .qi-brand-field,
  #quoteItemsBody .quote-item-layout-with-brand .qi-model-field,
  #quoteItemsBody .quote-item-layout-with-brand .quote-item-side-grid-with-brand > label,
  #quoteItemsBody .quote-item-desc-grid,
  #quoteItemsBody .quote-custom-fields{
    grid-column:1!important;
    grid-row:auto!important;
  }
}

/* Dashboard KPI two-row layout and paused/lost cards (2026-07-06) */
#dashboard .dashboard-kpi-primary{grid-template-columns:1.35fr 1fr 1fr;align-items:stretch;}
#dashboard .dashboard-kpi-secondary{grid-template-columns:repeat(6,minmax(150px,1fr));align-items:stretch;}
#dashboard .dashboard-kpi-secondary .kpi-small{min-height:118px;}
#dashboard .kpi-paused-lost-card,
#mydashboard .kpi-paused-lost-card{border-color:color-mix(in srgb, var(--raw-ef682c) 28%, transparent);background:linear-gradient(135deg,var(--card-bg),color-mix(in srgb, var(--raw-ef682c) 8%, transparent));}
#dashboard .kpi-paused-lost-card .value,
#mydashboard .kpi-paused-lost-card .value{color:var(--primary);}
@media(max-width:1280px){
  #dashboard .dashboard-kpi-primary{grid-template-columns:1fr 1fr;}
  #dashboard .dashboard-kpi-secondary{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(max-width:760px){
  #dashboard .dashboard-kpi-primary,
  #dashboard .dashboard-kpi-secondary{grid-template-columns:1fr;}
}

/* My dashboard KPI layout: remove high-risk card and keep two-row card rhythm (2026-07-06) */
#mydashboard .dashboard-kpi-secondary .card:has(#myKpiRisk),
#mydashboard .dashboard-kpi-secondary .kpi:has(#myKpiRisk){display:none!important;}
#mydashboard .dashboard-kpi-primary{grid-template-columns:1.35fr 1fr 1fr;align-items:stretch;}
#mydashboard .dashboard-kpi-secondary{grid-template-columns:repeat(5,minmax(150px,1fr));align-items:stretch;}
#mydashboard .dashboard-kpi-secondary .kpi-small{min-height:118px;}
@media(max-width:1280px){
  #mydashboard .dashboard-kpi-primary{grid-template-columns:1fr 1fr;}
  #mydashboard .dashboard-kpi-secondary{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(max-width:760px){
  #mydashboard .dashboard-kpi-primary,
  #mydashboard .dashboard-kpi-secondary{grid-template-columns:1fr;}
}

/* === THEME COMPATIBILITY OVERRIDES: keep legacy pages visually aligned while migrating. === */
/* Project + system theme synchronization rebuilt (2026-07-06 v3) */
:root{
  --ui-accent:var(--primary,var(--color-primary));
  --ui-accent-hover:var(--primary-hover,var(--color-primary-hover));
  --ui-accent-soft:var(--primary-light,var(--color-primary-soft));
  --ui-accent-line:color-mix(in srgb,var(--primary,var(--color-primary)) 18%,var(--card-border,#e5e7eb) 82%);
  --ui-accent-line-strong:color-mix(in srgb,var(--primary,var(--color-primary)) 36%,var(--card-border,#e5e7eb) 64%);
  --ui-accent-faint:color-mix(in srgb,var(--primary-light,var(--color-primary-soft)) 46%,#fff 54%);
  --ui-accent-text:color-mix(in srgb,var(--primary,var(--color-primary)) 74%,var(--text-primary,#111827) 26%);
  --ui-muted-text:color-mix(in srgb,var(--primary,var(--color-primary)) 24%,var(--text-secondary,#6b7280) 76%);
}
[data-theme="blue"]{--ui-accent:var(--primary,var(--color-primary));--ui-accent-hover:var(--primary-hover,var(--color-primary-hover));--ui-accent-soft:var(--primary-light,#e0e7ff);}
[data-theme="orange"]{--ui-accent:var(--primary,var(--color-primary));--ui-accent-hover:var(--primary-hover,var(--color-primary-hover));--ui-accent-soft:var(--primary-light,#fff3e8);}

#drawer .project-detail-panel,.drawer-panel.project-detail-panel{--project-primary:var(--ui-accent);--project-primary-2:var(--ui-accent-hover);--project-soft:var(--ui-accent-soft);--project-line:var(--ui-accent-line);}
#drawer .project-detail-panel .drawer-subtitle,.drawer-panel.project-detail-panel .drawer-subtitle{color:var(--ui-accent-text)!important;border-color:var(--ui-accent-line)!important;background:linear-gradient(135deg,var(--ui-accent-faint),var(--white))!important;}
#drawer .project-detail-panel .project-drawer-switch,.drawer-panel.project-detail-panel .project-drawer-switch,#drawer .project-detail-panel .project-form-tabs,.drawer-panel.project-detail-panel .project-form-tabs{border-color:var(--ui-accent-line)!important;background:color-mix(in srgb,var(--white) 86%,var(--ui-accent-soft) 14%)!important;}
#drawer .project-detail-panel .project-drawer-tab:hover,.drawer-panel.project-detail-panel .project-drawer-tab:hover,#drawer .project-detail-panel .project-form-tab:hover,.drawer-panel.project-detail-panel .project-form-tab:hover{color:var(--ui-accent)!important;border-color:var(--ui-accent-line-strong)!important;background:var(--ui-accent-soft)!important;}
#drawer .project-detail-panel .project-drawer-tab.active,.drawer-panel.project-detail-panel .project-drawer-tab.active,#drawer .project-detail-panel .project-form-tab.active,.drawer-panel.project-detail-panel .project-form-tab.active{color:var(--white)!important;border-color:var(--ui-accent)!important;background:linear-gradient(135deg,var(--ui-accent),var(--ui-accent-hover))!important;box-shadow:0 12px 24px color-mix(in srgb,var(--ui-accent) 22%,transparent)!important;}
#drawer .project-detail-panel .project-form-panel-head,.drawer-panel.project-detail-panel .project-form-panel-head,#drawer .project-detail-panel .project-section-card-head,.drawer-panel.project-detail-panel .project-section-card-head,#drawer .project-detail-panel .form-section,.drawer-panel.project-detail-panel .form-section,#drawer .project-detail-panel .section-edit-form,.drawer-panel.project-detail-panel .section-edit-form{border-color:var(--ui-accent-line)!important;background:linear-gradient(135deg,var(--white),var(--ui-accent-faint))!important;}
#drawer .project-detail-panel .project-form-panel-head h4,.drawer-panel.project-detail-panel .project-form-panel-head h4,#drawer .project-detail-panel .form-section h4,.drawer-panel.project-detail-panel .form-section h4,#drawer .project-detail-panel .section-edit-form h4,.drawer-panel.project-detail-panel .section-edit-form h4,#drawer .project-detail-panel .project-section-card-head h4,.drawer-panel.project-detail-panel .project-section-card-head h4{color:var(--ui-accent-text)!important;}
#drawer .project-detail-panel .field,.drawer-panel.project-detail-panel .field,#drawer .project-detail-panel .field-lite,.drawer-panel.project-detail-panel .field-lite,#drawer .project-detail-panel .section-edit-form label,.drawer-panel.project-detail-panel .section-edit-form label{border-color:var(--ui-accent-line)!important;background:color-mix(in srgb,var(--white) 88%,var(--ui-accent-soft) 12%)!important;}
#drawer .project-detail-panel .field span,.drawer-panel.project-detail-panel .field span,#drawer .project-detail-panel .field-lite span,.drawer-panel.project-detail-panel .field-lite span,#drawer .project-detail-panel .section-edit-form label span,.drawer-panel.project-detail-panel .section-edit-form label span{color:var(--ui-accent-text)!important;}
#drawer .project-detail-panel input:focus,#drawer .project-detail-panel select:focus,#drawer .project-detail-panel textarea:focus,.drawer-panel.project-detail-panel input:focus,.drawer-panel.project-detail-panel select:focus,.drawer-panel.project-detail-panel textarea:focus{outline:none!important;border-color:var(--ui-accent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-accent) 14%,transparent)!important;}

.drawer-panel,.modal-box,.preview-modal,.file-preview-panel,.approval-panel{border-color:var(--ui-accent-line)!important;background:linear-gradient(180deg,var(--white),color-mix(in srgb,var(--ui-accent-soft) 24%,var(--white) 76%))!important;}
.drawer-head,.modal-head,.preview-head,.file-preview-head,.quote-head,.sales-contract-approval-head{border-bottom-color:var(--ui-accent-line)!important;background:linear-gradient(135deg,var(--white),var(--ui-accent-faint))!important;}
.drawer-head h3,.modal-head h3,.preview-head h3,.drawer-panel h3,.drawer-panel h4,.modal-box h3,.modal-box h4{color:var(--ui-accent-text)!important;}
.drawer-subtitle,.modal-desc,.overview-subtitle,.quote-head-subtitle,.sales-contract-subtitle,.invoice-drawer-subtitle{color:var(--ui-muted-text)!important;}

.form-section,.section-edit-form,.detail-section,.detail-card,.overview-card,.overview-panel,.info-card,.info-panel,.config-panel,.quote-section,.quote-detail-card,.quote-item-card,.sales-contract-card,.sales-contract-form-card,.sales-contract-edit-items,.sales-contract-approval-card,.sales-invoice-card,.invoice-detail-card,.procurement-card,.purchase-detail-card,.payment-summary-card,.file-detail-card,.customer-detail-card,.vendor-detail-card,.project-quality-edit-summary,.project-contract-quality-inline{border-color:var(--ui-accent-line)!important;background:linear-gradient(135deg,var(--white),var(--ui-accent-faint))!important;box-shadow:0 10px 24px color-mix(in srgb,var(--ui-accent) 7%,transparent)!important;}
.form-section h3,.form-section h4,.section-edit-form h4,.detail-section h4,.detail-card h4,.overview-card h4,.info-card h4,.quote-section-title,.quote-section-header,.sales-contract-card h4,.sales-invoice-card h4{color:var(--ui-accent-text)!important;}
.form-section p,.detail-section p,.detail-card p,.overview-card p,.info-card p,.cell-sub,.subtle,.hint,em{color:var(--ui-muted-text)!important;}

.field,.field-lite,.filters label,.form-row label,.section-edit-form label,.quote-field,.sales-contract-field,.invoice-field,.customer-manage-filters label,.vendor-manage-filters label,.search-select,.search-select-input,.login-input-wrap{border-color:var(--ui-accent-line)!important;background:color-mix(in srgb,var(--white) 88%,var(--ui-accent-soft) 12%)!important;}
.field span,.field-lite span,.form-row label span,.section-edit-form label span,.filters label span,.quote-field span,.sales-contract-field span,.invoice-field span{color:var(--ui-accent-text)!important;}
input:not([type="checkbox"]):not([type="radio"]):focus,select:focus,textarea:focus,.search-select-input:focus,.page-jump-input:focus{outline:none!important;border-color:var(--ui-accent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-accent) 14%,transparent)!important;}
input[type="checkbox"],input[type="radio"]{accent-color:var(--ui-accent)!important;}

.table-wrap,.stats-table-wrap,.customer-manage-table-wrap,.vendor-manage-table-wrap,.finance-table-wrap,.project-table-wrap,.task-table-wrap,.key-project-table-wrap,.sc-contract-table-wrap{border-color:var(--ui-accent-line)!important;background:var(--white)!important;}
thead th,.table-wrap thead th,.stats-table thead th,.customer-manage-table-wrap th,.vendor-manage-table-wrap th,.procurement-rank-table th,.procurement-overdue-table th{color:var(--ui-accent-text)!important;border-bottom-color:var(--ui-accent-line-strong)!important;background:linear-gradient(180deg,var(--ui-accent-faint),var(--white))!important;}
tbody tr:hover,.table-wrap tbody tr:hover,.stats-table tbody tr:hover td,.customer-manage-table-wrap tr:hover,.vendor-manage-table-wrap tr:hover{background:color-mix(in srgb,var(--ui-accent-soft) 56%,var(--white) 44%)!important;}
.cell-main,.table-wrap strong,.stats-table strong,.customer-unit-name,.vendor-name{color:color-mix(in srgb,var(--ui-accent) 28%,var(--text-primary,var(--color-text)) 72%)!important;}

.tabs button,.tab-btn,.segmented button,.project-drawer-tab,.project-form-tab,.project-overview-tab,.sales-contract-tab,.sales-contracts-tab,.sc-tab,.invoice-tab,.quote-tab,.procurement-tab,.dashboard-time-pill,.filter-chip,.key-chip{border-color:var(--ui-accent-line)!important;color:var(--ui-accent-text)!important;background:color-mix(in srgb,var(--white) 82%,var(--ui-accent-soft) 18%)!important;}
.tabs button:hover,.tab-btn:hover,.segmented button:hover,.project-drawer-tab:hover,.project-form-tab:hover,.project-overview-tab:hover,.sales-contract-tab:hover,.sales-contracts-tab:hover,.sc-tab:hover,.invoice-tab:hover,.quote-tab:hover,.procurement-tab:hover,.dashboard-time-pill:hover,.filter-chip:hover,.key-chip:hover{border-color:var(--ui-accent)!important;background:var(--ui-accent-soft)!important;color:var(--ui-accent)!important;}
.tabs button.active,.tab-btn.active,.segmented button.active,.project-drawer-tab.active,.project-form-tab.active,.project-overview-tab.active,.sales-contract-tab.active,.sales-contracts-tab.active,.sc-tab.active,.invoice-tab.active,.quote-tab.active,.procurement-tab.active,.dashboard-time-pill.active,.filter-chip.active,.key-chip.active{color:var(--white)!important;border-color:var(--ui-accent)!important;background:linear-gradient(135deg,var(--ui-accent),var(--ui-accent-hover))!important;box-shadow:0 10px 22px color-mix(in srgb,var(--ui-accent) 22%,transparent)!important;}

.form-actions,.drawer-actions,.modal-actions,.preview-actions,.approval-actions,.sales-contract-approval-actions,.overview-actions,.finance-actions,.task-actions{border-color:var(--ui-accent-line)!important;background:color-mix(in srgb,var(--white) 88%,var(--ui-accent-soft) 12%)!important;}
.btn:not(.danger):not(.warning):not(.success):not(.primary):hover,.action-link:not(.danger-link):not(.danger):hover,.link-btn:hover,.icon-btn:not(.danger):hover{color:var(--ui-accent)!important;border-color:var(--ui-accent-line-strong)!important;background:var(--ui-accent-soft)!important;}
.btn.primary,button.primary,.form-actions .btn.primary,.drawer-actions .btn.primary,.modal-actions .btn.primary,.preview-actions .btn.primary,.approval-actions .btn.primary{color:var(--white)!important;border-color:var(--ui-accent)!important;background:linear-gradient(135deg,var(--ui-accent),var(--ui-accent-hover))!important;box-shadow:0 10px 22px color-mix(in srgb,var(--ui-accent) 22%,transparent)!important;}
.btn.primary:hover,button.primary:hover,.form-actions .btn.primary:hover,.drawer-actions .btn.primary:hover,.modal-actions .btn.primary:hover,.preview-actions .btn.primary:hover,.approval-actions .btn.primary:hover{border-color:var(--ui-accent-hover)!important;background:linear-gradient(135deg,var(--ui-accent-hover),var(--ui-accent))!important;}

.badge:not(.danger):not(.warning):not(.success):not(.red):not(.orange):not(.green),.kpi-badge:not(.danger):not(.warning):not(.success),.status-pill:not(.danger):not(.warning):not(.success):not(.red):not(.orange):not(.green),.editing-badge,.section-completion,.quote-section-badge,.sales-invoice-step{color:var(--ui-accent)!important;border-color:var(--ui-accent-line-strong)!important;background:var(--ui-accent-soft)!important;}
.quote-section-badge,.sales-invoice-step,.editing-badge,.section-completion.is-complete,.badge.active,.status-pill.active{color:var(--white)!important;background:linear-gradient(135deg,var(--ui-accent),var(--ui-accent-hover))!important;}
.progress span,.crm-progress span,.glow-progress i,.bullet-track span,.card::after,.kpi::after,.stats-kpi::after,.key-metric::after,.procurement-kpi-card::after{background:linear-gradient(90deg,var(--ui-accent),var(--ui-accent-hover))!important;}
.section-title h3::before,.customer-manage-card .section-title h3::before,.vendor-manage-card .section-title h3::before{background:linear-gradient(180deg,var(--ui-accent),var(--ui-accent-hover))!important;}

/* === LEGACY CSS END: new theme system overrides begin below. === */

/* === NEW THEME SYSTEM START: tokens, component color layer, migration overrides. === */
/* Color token system v1 (2026-07-06)
   Goal: all new UI color work should use --color-* semantic tokens instead of hard-coded colors.
   Legacy --primary/--green-* variables are temporarily bridged here for safe migration. */
:root{
  /* Brand */
  --color-primary:var(--primary,#1e6b4e);
  --color-primary-hover:var(--primary-hover,#2d8a5e);
  --color-primary-active:color-mix(in srgb,var(--color-primary) 86%,#000 14%);
  --color-primary-soft:var(--primary-light,#daf0e4);
  --color-primary-faint:color-mix(in srgb,var(--color-primary-soft) 45%,#fff 55%);
  --color-primary-border:color-mix(in srgb,var(--color-primary) 22%,#e5e7eb 78%);
  --color-primary-border-strong:color-mix(in srgb,var(--color-primary) 42%,#e5e7eb 58%);
  --color-primary-text:color-mix(in srgb,var(--color-primary) 76%,#111827 24%);

  /* Surface */
  --color-bg:var(--body-bg,#f0faf4);
  --color-surface:var(--card-bg,#ffffff);
  --color-surface-soft:color-mix(in srgb,var(--color-primary-soft) 18%,#fff 82%);
  --color-surface-raised:#ffffff;
  --color-border:var(--card-border,#e5e7eb);
  --color-border-soft:color-mix(in srgb,var(--color-primary) 10%,#e5e7eb 90%);
  --color-border-focus:var(--color-primary);

  /* Text */
  --color-text:var(--text-primary,#111827);
  --color-text-secondary:var(--text-secondary,#6b7280);
  --color-text-muted:#94a3b8;
  --color-text-on-primary:#ffffff;
  --color-link:var(--color-primary);
  --color-link-hover:var(--color-primary-hover);

  /* Semantic business states */
  --color-success:var(--success,#22c55e);
  --color-success-soft:#dcfce7;
  --color-success-text:#166534;
  --color-warning:var(--warning,#f59e0b);
  --color-warning-soft:#fef3c7;
  --color-warning-text:#92400e;
  --color-danger:var(--danger,#dc2626);
  --color-danger-soft:#fee2e2;
  --color-danger-text:#991b1b;
  --color-info:var(--info,#2563eb);
  --color-info-soft:#dbeafe;
  --color-info-text:#1e40af;

  /* Shadows and focus */
  --color-shadow:color-mix(in srgb,var(--color-primary) 10%,transparent);
  --color-shadow-strong:color-mix(in srgb,var(--color-primary) 22%,transparent);
  --focus-ring:0 0 0 3px color-mix(in srgb,var(--color-primary) 14%,transparent);

  /* Component aliases for gradual migration */
  --component-card-bg:var(--zway-surface,var(--color-surface));
  --component-card-border:var(--zway-border,var(--color-border-soft));
  --component-card-hover:var(--zway-surface-muted,var(--color-surface-soft));
  --component-form-bg:var(--zway-surface-soft,var(--color-surface-soft));
  --component-form-border:var(--zway-primary-border,var(--color-primary-border));
  --component-table-head-bg:linear-gradient(180deg,var(--zway-primary-soft,var(--color-primary-faint)),var(--zway-surface,var(--color-surface)));
  --component-table-row-hover:color-mix(in srgb,var(--zway-primary-soft,var(--color-primary-soft)) 56%,var(--zway-surface,var(--color-surface)) 44%);
  --component-drawer-head-bg:linear-gradient(135deg,var(--zway-surface,var(--color-surface)),var(--zway-primary-soft,var(--color-primary-faint)));
  --component-primary-gradient:linear-gradient(135deg,var(--zway-primary,var(--color-primary)),var(--zway-primary-hover,var(--color-primary-hover)));
  --component-accent-gradient:linear-gradient(90deg,var(--zway-primary,var(--color-primary)),var(--zway-primary-hover,var(--color-primary-hover)));
}

[data-theme="blue"]{
  --color-primary:#3730a3;
  --color-primary-hover:#6366f1;
  --color-primary-soft:#e0e7ff;
  --color-bg:#eef2ff;
  --color-info:#6366f1;
  --color-info-soft:#e0e7ff;
  --color-info-text:#3730a3;
}

[data-theme="orange"]{
  --color-primary:#c2410c;
  --color-primary-hover:#ff7f3a;
  --color-primary-soft:#fff3e8;
  --color-bg:#fff7ed;
  --color-warning:#e8743a;
  --color-warning-soft:#ffedd5;
  --color-warning-text:#9a3412;
}

[data-theme="gray"]{
  --color-primary:#334155;
  --color-primary-hover:#64748b;
  --color-primary-soft:#f1f5f9;
  --color-bg:#f8fafc;
  --color-primary-text:#1f2937;
}

/* === COMPONENT COLOR LAYER: base components consume --color-* tokens. === */
/* Component color layer v1 (2026-07-06)
   New baseline: common components consume --color-* and --component-* tokens. */
body{
  color:var(--color-text);
  background:var(--color-bg);
}
a{color:var(--color-link);}
a:hover{color:var(--color-link-hover);}

.card,.kpi,.drill-card,.mini-item,.crm-list-item,.key-focus-card,.stats-kpi,.procurement-kpi-card{
  background:var(--component-card-bg)!important;
  border-color:var(--component-card-border)!important;
  color:var(--color-text)!important;
  box-shadow:0 8px 22px var(--color-shadow)!important;
}
.card:hover,.kpi:hover,.drill-card:hover,.mini-item:hover,.crm-list-item:hover,.key-focus-card:hover,.stats-kpi:hover,.procurement-kpi-card:hover{
  border-color:var(--color-primary-border-strong)!important;
  box-shadow:0 14px 30px var(--color-shadow-strong)!important;
}
.card h3,.card h4,.kpi strong,.mini-item strong,.crm-list-head strong,.stats-kpi strong{
  color:var(--color-primary-text)!important;
}
.card .label,.card .hint,.kpi .label,.kpi .hint,.mini-item .sub,.crm-list-sub,.crm-list-note{
  color:var(--color-text-secondary)!important;
}

.btn,.close,.page-btn,.page-jump-btn,.action-link,.link-btn,.icon-btn{
  border-color:var(--color-border-soft)!important;
  color:var(--color-primary-text)!important;
}
.btn:hover,.close:hover,.page-btn:hover,.page-jump-btn:hover,.action-link:hover,.link-btn:hover,.icon-btn:hover{
  border-color:var(--color-primary-border-strong)!important;
  color:var(--color-primary)!important;
  background:var(--color-primary-soft)!important;
}
.btn.primary,.page-btn.active,.page-jump-btn.primary,.login-submit,.btn-login{
  color:var(--color-text-on-primary)!important;
  border-color:var(--color-primary)!important;
  background:var(--component-primary-gradient)!important;
  box-shadow:0 10px 22px var(--color-shadow-strong)!important;
}
.btn.primary:hover,.login-submit:hover,.btn-login:hover{
  background:linear-gradient(135deg,var(--color-primary-hover),var(--color-primary))!important;
}
.btn.danger,.danger-link{color:var(--color-danger)!important;}
.btn.danger:hover,.danger-link:hover{background:var(--color-danger-soft)!important;border-color:var(--color-danger)!important;color:var(--color-danger-text)!important;}
.btn.warning:hover{background:var(--color-warning-soft)!important;border-color:var(--color-warning)!important;color:var(--color-warning-text)!important;}
.btn.success:hover{background:var(--color-success-soft)!important;border-color:var(--color-success)!important;color:var(--color-success-text)!important;}

input:not([type="checkbox"]):not([type="radio"]),select,textarea,.search-select-input,.page-jump-input{
  border-color:var(--color-border-soft)!important;
  background:var(--color-surface)!important;
  color:var(--color-text)!important;
}
input:not([type="checkbox"]):not([type="radio"]):focus,select:focus,textarea:focus,.search-select-input:focus,.page-jump-input:focus{
  border-color:var(--color-border-focus)!important;
  box-shadow:var(--focus-ring)!important;
}
.field,.field-lite,.filters label,.form-row label,.section-edit-form label,.quote-field,.sales-contract-field,.invoice-field{
  border-color:var(--component-form-border)!important;
  background:var(--component-form-bg)!important;
}
.field span,.field-lite span,.filters label span,.form-row label span,.section-edit-form label span,.quote-field span,.sales-contract-field span,.invoice-field span{
  color:var(--color-primary-text)!important;
}

.drawer-panel,.modal-box,.preview-modal,.file-preview-panel,.approval-panel{
  border-color:var(--color-primary-border)!important;
  background:linear-gradient(180deg,var(--color-surface),var(--color-surface-soft))!important;
}
.drawer-head,.modal-head,.preview-head,.file-preview-head,.quote-head,.sales-contract-approval-head{
  border-bottom-color:var(--color-primary-border)!important;
  background:var(--component-drawer-head-bg)!important;
}
.drawer-head h3,.modal-head h3,.preview-head h3,.drawer-panel h3,.drawer-panel h4,.modal-box h3,.modal-box h4{
  color:var(--color-primary-text)!important;
}
.drawer-subtitle,.modal-desc,.overview-subtitle,.quote-head-subtitle,.sales-contract-subtitle,.invoice-drawer-subtitle{
  color:var(--color-text-secondary)!important;
}

.form-section,.section-edit-form,.detail-card,.overview-card,.info-card,.quote-section,.quote-detail-card,.quote-item-card,.sales-contract-card,.sales-invoice-card,.invoice-detail-card,.procurement-card,.purchase-detail-card,.payment-summary-card{
  border-color:var(--color-primary-border)!important;
  background:linear-gradient(135deg,var(--color-surface),var(--color-surface-soft))!important;
}
.form-section h3,.form-section h4,.section-edit-form h4,.detail-card h4,.overview-card h4,.info-card h4,.quote-section-title,.sales-contract-card h4,.sales-invoice-card h4{
  color:var(--color-primary-text)!important;
}
.form-section p,.detail-card p,.overview-card p,.info-card p,.hint,.subtle,.cell-sub,em{
  color:var(--color-text-secondary)!important;
}

.table-wrap,.stats-table-wrap,.customer-manage-table-wrap,.vendor-manage-table-wrap,.finance-table-wrap,.project-table-wrap,.task-table-wrap,.key-project-table-wrap,.sc-contract-table-wrap{
  border-color:var(--color-primary-border)!important;
  background:var(--color-surface)!important;
}
thead th,.table-wrap thead th,.stats-table thead th,.customer-manage-table-wrap th,.vendor-manage-table-wrap th,.procurement-rank-table th,.procurement-overdue-table th{
  color:var(--color-primary-text)!important;
  border-bottom-color:var(--color-primary-border-strong)!important;
  background:var(--component-table-head-bg)!important;
}
tbody tr:hover,.table-wrap tbody tr:hover,.stats-table tbody tr:hover td,.customer-manage-table-wrap tr:hover,.vendor-manage-table-wrap tr:hover{
  background:var(--component-table-row-hover)!important;
}

.tabs button,.tab-btn,.segmented button,.project-drawer-tab,.project-form-tab,.project-overview-tab,.sales-contract-tab,.sales-contracts-tab,.sc-tab,.invoice-tab,.quote-tab,.procurement-tab,.dashboard-time-pill,.filter-chip,.key-chip{
  color:var(--color-primary-text)!important;
  border-color:var(--color-primary-border)!important;
  background:var(--color-surface-soft)!important;
}
.tabs button:hover,.tab-btn:hover,.segmented button:hover,.project-drawer-tab:hover,.project-form-tab:hover,.project-overview-tab:hover,.sales-contract-tab:hover,.sales-contracts-tab:hover,.sc-tab:hover,.invoice-tab:hover,.quote-tab:hover,.procurement-tab:hover,.dashboard-time-pill:hover,.filter-chip:hover,.key-chip:hover{
  color:var(--color-primary)!important;
  border-color:var(--color-primary-border-strong)!important;
  background:var(--color-primary-soft)!important;
}
.tabs button.active,.tab-btn.active,.segmented button.active,.project-drawer-tab.active,.project-form-tab.active,.project-overview-tab.active,.sales-contract-tab.active,.sales-contracts-tab.active,.sc-tab.active,.invoice-tab.active,.quote-tab.active,.procurement-tab.active,.dashboard-time-pill.active,.filter-chip.active,.key-chip.active{
  color:var(--color-text-on-primary)!important;
  border-color:var(--color-primary)!important;
  background:var(--component-primary-gradient)!important;
}

.badge:not(.danger):not(.warning):not(.success):not(.red):not(.orange):not(.green),.kpi-badge:not(.danger):not(.warning):not(.success),.status-pill:not(.danger):not(.warning):not(.success):not(.red):not(.orange):not(.green){
  color:var(--color-primary)!important;
  border-color:var(--color-primary-border)!important;
  background:var(--color-primary-soft)!important;
}
.tag.green,.badge.success,.status-pill.success{background:var(--color-success-soft)!important;color:var(--color-success-text)!important;}
.tag.orange,.badge.warning,.status-pill.warning{background:var(--color-warning-soft)!important;color:var(--color-warning-text)!important;}
.tag.red,.badge.danger,.status-pill.danger{background:var(--color-danger-soft)!important;color:var(--color-danger-text)!important;}
.tag.blue,.badge.info,.status-pill.info{background:var(--color-info-soft)!important;color:var(--color-info-text)!important;}

.progress span,.crm-progress span,.glow-progress i,.bullet-track span,.card::after,.kpi::after,.stats-kpi::after,.key-metric::after,.procurement-kpi-card::after,.section-title h3::before{
  background:var(--component-accent-gradient)!important;
}

/* === NEW THEME SYSTEM END === */

/* Centered entry drawers and popups (2026-07-06)
   All drawer-style entry pages should open as centered dialogs on desktop. */
.drawer{
  align-items:center!important;
  justify-content:center!important;
  padding:24px!important;
  background:color-mix(in srgb, var(--gray-900) 38%, transparent)!important;
}
.drawer.open{
  display:flex!important;
}
.drawer-panel{
  width:min(92vw,1120px)!important;
  max-width:min(92vw,1120px)!important;
  max-height:calc(100vh - 48px)!important;
  min-height:auto!important;
  margin:0 auto!important;
  border-radius:22px!important;
  overflow:auto!important;
  box-shadow:0 28px 80px color-mix(in srgb, var(--gray-900) 24%, transparent)!important;
}
.drawer-panel.project-detail-panel,
.project-detail-panel.drawer-panel{
  width:min(1280px,calc(100vw - 48px))!important;
  max-width:min(1280px,calc(100vw - 48px))!important;
}
.customer-overview-panel,
.sales-contract-approval-panel{
  width:min(94vw,1180px)!important;
  max-width:min(94vw,1180px)!important;
}
.quote-editor-panel,
.drawer-panel.quote-editor-panel,
#quoteDrawer .quote-editor-panel,
#quoteDrawer .drawer-panel.quote-editor-panel{
  width:min(92vw,1100px)!important;
  max-width:min(92vw,1100px)!important;
  min-height:auto!important;
  max-height:calc(100vh - 48px)!important;
  margin:0 auto!important;
  border-radius:22px!important;
}
#salesContractDrawer .drawer-panel,
.sales-contract-panel,
.sales-contract-edit-panel,
.sales-contract-approval-panel,
#salesInvoiceDrawer .drawer-panel,
.invoice-drawer-panel{
  width:min(94vw,1160px)!important;
  max-width:min(94vw,1160px)!important;
}
#quickFileDrawer.open,
#filePreviewDrawer.open,
#salesContractApprovalDrawer.open,
#salesContractDrawer.open,
#salesInvoiceDrawer.open,
#quoteDrawer.open,
#contractFormDrawer.open,
#purchaseRequestDrawer.open,
#purchaseOrderDrawer.open,
#pcFormDrawer.open{
  align-items:center!important;
  justify-content:center!important;
}
.modal-overlay,
.preview-modal,
.file-preview-modal{
  align-items:center!important;
  justify-content:center!important;
  padding:24px!important;
}
.modal-box,
.preview-panel,
.file-preview-panel{
  max-height:calc(100vh - 48px)!important;
  border-radius:22px!important;
  overflow:auto!important;
}
.drawer-panel .drawer-body,
.drawer-panel .quote-body,
.drawer-panel .sales-contract-body,
.drawer-panel .sales-invoice-body{
  max-height:none!important;
}
@media(max-width:760px){
  .drawer,
  .modal-overlay,
  .preview-modal,
  .file-preview-modal{
    align-items:stretch!important;
    justify-content:center!important;
    padding:0!important;
  }
  .drawer-panel,
  .drawer-panel.project-detail-panel,
  .project-detail-panel.drawer-panel,
  .customer-overview-panel,
  .quote-editor-panel,
  .drawer-panel.quote-editor-panel,
  #quoteDrawer .quote-editor-panel,
  #quoteDrawer .drawer-panel.quote-editor-panel,
  #salesContractDrawer .drawer-panel,
  #salesInvoiceDrawer .drawer-panel,
  .invoice-drawer-panel{
    width:100vw!important;
    max-width:100vw!important;
    height:100vh!important;
    max-height:100vh!important;
    margin:0!important;
    border-radius:0!important;
  }
  .modal-box,
  .preview-panel,
  .file-preview-panel{
    width:100vw!important;
    max-width:100vw!important;
    max-height:100vh!important;
    border-radius:0!important;
  }
}

/* Remove extra decorative color blocks on task reminder KPI cards (2026-07-06) */
#taskcenter .grid.kpis .kpi::after,
#taskcenter .kpis .kpi::after,
#taskcenter .kpi::after{
  content:none!important;
  display:none!important;
  background:none!important;
}
#taskcenter .grid.kpis .kpi::before,
#taskcenter .kpis .kpi::before,
#taskcenter .kpi::before{
  border-radius:22px 22px 0 0!important;
}

/* Prevent global KPI/card pseudo-elements from creating unwanted color blocks (2026-07-06) */
#quotes .kpi::after,
#sales-contracts .kpi::after,
#customers .kpi::after,
#customers360 .kpi::after,
#filelibrary .kpi::after,
#financecenter .kpi::after,
#channelpartners .kpi::after,
#vendors .kpi::after,
#vendor-management .kpi::after,
#checkin .checkin-stats-cards .kpi::after,
#taskcenter .kpi::after{
  content:none!important;
  display:none!important;
  background:none!important;
}
#quotes .card.kpi,
#sales-contracts .card.kpi,
#customers .card.kpi,
#customers360 .card.kpi,
#filelibrary .card.kpi,
#financecenter .card.kpi,
#channelpartners .card.kpi,
#vendors .card.kpi,
#vendor-management .card.kpi,
#checkin .checkin-stats-cards .card.kpi,
#taskcenter .card.kpi{
  overflow:hidden!important;
}
#dashboard .card.kpi::after,
#mydashboard .card.kpi::after,
#salestargets .card.kpi::after,
#salesstats .stats-kpi::after,
#keyprojects .key-metric::after,
#procurement-dashboard .procurement-kpi-card::after{
  content:"";
}

/* Task center - high-density SaaS command workspace */
#taskcenter{
  --task-panel:var(--color-surface,#fff);
  --task-canvas:var(--color-primary-faint,var(--color-surface-soft,#f5f8f6));
  --task-ink:var(--color-text,#15211d);
  --task-muted:var(--color-text-secondary,#728078);
  --task-line:var(--color-border,#dce6df);
  --task-green:var(--color-primary,#0d7151);
  --task-green-soft:var(--color-primary-soft,#e9f5ee);
  --task-amber:var(--color-warning-text,#b76617);
  --task-red:var(--color-danger-text,#c4453c);
  position:relative;
  padding:0;
  border-radius:0;
  background:none;
}
#taskcenter .task-center-intro{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;
  padding:4px 0 22px;
  border-bottom:1px solid var(--task-line);
  background:none;
  box-shadow:none;
}
#taskcenter .task-center-intro::before,
#taskcenter .task-center-intro::after{content:none}
#taskcenter .task-center-kicker,
#taskcenter .task-panel-title span{
  display:block;
  color:var(--task-green);
  font-size:11px;
  font-weight:800;
  letter-spacing:.11em;
  line-height:1.2;
}
#taskcenter .task-center-intro h3{
  margin:8px 0 7px;
  color:var(--task-ink);
  font-size:26px;
  line-height:1.25;
  font-weight:800;
  letter-spacing:0;
}
#taskcenter .task-center-intro p{
  max-width:680px;
  margin:0;
  color:var(--task-muted);
  font-size:14px;
  line-height:1.65;
}
#taskcenter .task-center-legend{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:10px 14px;
  padding-bottom:3px;
  color:var(--task-muted);
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}
#taskcenter .task-center-legend span{display:inline-flex;align-items:center;gap:6px}
#taskcenter .task-legend-dot{width:7px;height:7px;border-radius:50%;background:var(--task-green)}
#taskcenter .task-legend-dot.overdue{background:var(--task-red)}
#taskcenter .task-legend-dot.today{background:var(--task-amber)}
#taskcenter .task-legend-dot.stale{background:var(--color-primary-hover,var(--task-green))}
#taskcenter .task-center-kpi-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:1px;
  margin:20px 0;
  overflow:hidden;
  border:1px solid var(--task-line);
  border-radius:8px;
  background:var(--task-line);
}
#taskcenter .task-kpi{
  position:relative;
  min-height:142px;
  padding:18px 18px 16px;
  background:var(--task-panel);
  cursor:pointer;
  transition:background .16s ease, box-shadow .16s ease;
}
#taskcenter .task-kpi:hover{z-index:1;background:color-mix(in srgb,var(--task-green-soft) 54%,var(--task-panel) 46%);box-shadow:inset 0 -3px 0 var(--task-green)}
#taskcenter .task-kpi-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
#taskcenter .task-kpi-top span{color:var(--task-muted);font-size:13px;font-weight:700}
#taskcenter .task-kpi-top b{color:var(--task-muted);font-size:10px;font-weight:800;letter-spacing:.06em}
#taskcenter .task-kpi .value{margin-top:19px;color:var(--task-ink);font-size:34px;line-height:1;font-weight:800;font-variant-numeric:tabular-nums}
#taskcenter .task-kpi .hint{margin-top:12px;color:var(--task-muted);font-size:12px;line-height:1.4}
#taskcenter .task-kpi[data-task-action="overdue"] .value{color:var(--task-red)}
#taskcenter .task-kpi[data-task-action="today"] .value{color:var(--task-amber)}
#taskcenter .task-kpi[data-task-action="week"] .value{color:var(--color-primary-hover,var(--task-green))}
#taskcenter .task-kpi[data-task-action="stale"] .value{color:var(--task-green)}
#taskcenter .task-center-queue-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
#taskcenter .task-queue-panel,
#taskcenter .task-insight-panel,
#taskcenter .task-list-panel,
#taskcenter .task-stale-panel{
  min-width:0;
  padding:20px;
  border:1px solid var(--task-line);
  background:var(--task-panel);
}
#taskcenter .task-queue-panel{min-height:228px}
#taskcenter .task-queue-panel.urgent-panel{border-top:3px solid var(--task-red)}
#taskcenter .task-queue-panel:not(.urgent-panel){border-top:3px solid var(--task-green)}
#taskcenter .task-panel-title{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--task-line)}
#taskcenter .task-panel-title h3{margin:5px 0 0;color:var(--task-ink);font-size:18px;line-height:1.2;font-weight:800;letter-spacing:0}
#taskcenter .task-panel-title p{margin:0;color:var(--task-muted);font-size:12px;font-weight:600;text-align:right}
#taskcenter .task-insight-panel{display:grid;grid-template-columns:220px minmax(0,1fr);align-items:start;gap:24px;margin-top:16px}
#taskcenter .task-insight-panel .task-panel-title{display:block;margin:0;padding:2px 0 0;border:0}
#taskcenter .task-insight-panel .task-panel-title p{margin-top:8px;text-align:left;line-height:1.5}
#taskcenter #taskTypeBars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 22px}
#taskcenter .task-type-row{grid-template-columns:minmax(72px,1fr) minmax(66px,1.5fr) auto;gap:8px;padding:10px 0;border-color:color-mix(in srgb,var(--task-line) 54%,transparent);font-size:12px}
#taskcenter .task-type-row div{height:7px;background:var(--task-green-soft)}
#taskcenter .task-type-row i{background:var(--task-green)}
#taskcenter .task-list-panel{margin-top:16px;padding:20px}
#taskcenter .task-list-heading{align-items:flex-end}
#taskcenter .task-filters{display:grid;grid-template-columns:repeat(3,minmax(150px,1fr)) auto;gap:8px;padding:0 0 16px;margin:0 0 14px;border:0;border-bottom:1px solid var(--task-line);border-radius:0;background:none}
#taskcenter .task-filters select,
#taskcenter .task-filters button{min-height:38px;border-radius:6px;font-size:13px}
#taskcenter .task-filters select{border:1px solid var(--task-line);background:var(--task-panel);color:var(--task-muted);font-weight:600}
#taskcenter .task-filters .btn{min-width:84px;border-color:var(--task-line);background:var(--task-panel);color:var(--task-green);font-weight:700}
#taskcenter .task-table-wrap{max-height:620px;border:1px solid var(--task-line);border-radius:6px;box-shadow:none}
#taskcenter .task-table{min-width:1060px;font-size:13px}
#taskcenter .task-table thead th{background:var(--task-green-soft);color:var(--task-muted);font-size:11px;letter-spacing:.05em}
#taskcenter .task-table td{padding:12px 14px;color:var(--task-muted);border-color:color-mix(in srgb,var(--task-line) 54%,transparent)}
#taskcenter .task-table tbody tr:hover{background:color-mix(in srgb,var(--task-green-soft) 45%,var(--task-panel) 55%)}
#taskcenter .task-table td:nth-child(3) strong{color:var(--task-ink)!important;font-weight:750}
#taskcenter .task-actions{gap:5px;flex-wrap:nowrap}
#taskcenter .task-actions .action-link{min-width:30px;min-height:30px;border-radius:5px;box-shadow:none;font-size:12px}
#taskcenter .task-actions .icon-btn:hover,
#taskcenter .task-actions .action-link:hover{color:var(--task-green);border-color:var(--task-green);background:var(--task-green-soft)}
#taskcenter .task-stale-panel{margin-top:16px}
#taskcenter #staleProjectList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#taskcenter .stale-project-card{min-height:76px;padding:12px!important;background:var(--task-panel)!important}
#taskcenter .stale-project-card::before{width:3px!important;background:var(--task-amber)!important}
#taskcenter .stale-project-index{color:var(--task-green)!important;background:var(--task-green-soft)!important;font-size:12px!important}
#taskcenter .stale-project-head strong{color:var(--task-ink)!important;font-size:13px!important}
#taskcenter .stale-project-meta{color:var(--task-muted)!important;font-size:12px!important}
#taskcenter .empty{border:1px dashed var(--task-line);border-radius:6px;background:var(--task-canvas);color:var(--task-muted);padding:19px}
#taskcenter .pagination-container{margin-top:14px}
@media(max-width:1180px){
  #taskcenter .task-center-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  #taskcenter #taskTypeBars{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:820px){
  #taskcenter .task-center-intro{align-items:flex-start;flex-direction:column;gap:16px}
  #taskcenter .task-center-legend{justify-content:flex-start;white-space:normal}
  #taskcenter .task-center-queue-grid,#taskcenter .task-insight-panel{grid-template-columns:1fr}
  #taskcenter .task-insight-panel{gap:12px}
  #taskcenter #staleProjectList{grid-template-columns:1fr}
}
@media(max-width:620px){
  #taskcenter .task-center-intro h3{font-size:22px}
  #taskcenter .task-center-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #taskcenter .task-kpi{min-height:126px;padding:15px}
  #taskcenter .task-kpi .value{font-size:30px}
  #taskcenter .task-kpi:last-child{grid-column:span 2}
  #taskcenter .task-queue-panel,#taskcenter .task-insight-panel,#taskcenter .task-list-panel,#taskcenter .task-stale-panel{padding:15px;border-radius:7px}
  #taskcenter .task-panel-title{align-items:flex-start;flex-direction:column;gap:7px}
  #taskcenter .task-panel-title p{text-align:left}
  #taskcenter #taskTypeBars{grid-template-columns:1fr}
  #taskcenter .task-filters{grid-template-columns:1fr}
}

/* Field check-in - theme-native operations workspace */
#checkin{
  --ci-surface:var(--color-surface,#fff);
  --ci-soft:var(--color-primary-faint,var(--color-surface-soft,#f6f9f7));
  --ci-ink:var(--color-text,#1f2937);
  --ci-muted:var(--color-text-secondary,#667085);
  --ci-line:var(--color-border,#d7e5dc);
  --ci-primary:var(--color-primary,#16713b);
  --ci-primary-hover:var(--color-primary-hover,var(--ci-primary));
  --ci-primary-soft:var(--color-primary-soft,#eef8f2);
  --ci-danger:var(--color-danger-text,#b42318);
  --ci-warning:var(--color-warning-text,#b54708);
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
}
#checkin .checkin-command-header{
  min-height:0!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:space-between!important;
  gap:24px!important;
  padding:4px 0 20px!important;
  border:0!important;
  border-bottom:1px solid var(--ci-line)!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
}
#checkin .page-header::before,
#checkin .page-header::after,
#checkin .page-header h2::before,
#checkin .page-header h2::after{content:none!important;display:none!important}
#checkin .page-header h2{
  display:block!important;
  margin:0!important;
  color:var(--ci-ink)!important;
  font-size:28px!important;
  font-weight:800!important;
  letter-spacing:0!important;
}
#checkin .page-header h2 + *{margin-top:7px}
#checkin .page-actions{display:flex!important;gap:8px!important;align-items:center!important;justify-content:flex-end!important}
#checkin .page-actions .btn{
  min-height:38px!important;
  padding:0 14px!important;
  border-radius:6px!important;
  font-size:13px!important;
  font-weight:750!important;
  box-shadow:none!important;
}
#checkin #checkinSyncBtn{
  border:1px solid var(--ci-primary)!important;
  color:var(--color-text-on-primary,var(--white))!important;
  background:var(--ci-primary)!important;
}
#checkin #checkinSyncBtn:hover{background:var(--ci-primary-hover)!important}
#checkin #checkinRefreshBtn{
  border:1px solid var(--ci-line)!important;
  color:var(--ci-primary)!important;
  background:var(--ci-surface)!important;
}
#checkin #checkinRefreshBtn:hover{border-color:var(--ci-primary)!important;background:var(--ci-primary-soft)!important}
#checkin .checkin-tabs{
  display:flex!important;
  gap:0!important;
  margin:18px 0!important;
  padding:0!important;
  overflow-x:auto!important;
  border:1px solid var(--ci-line)!important;
  border-radius:7px!important;
  background:var(--ci-surface)!important;
  box-shadow:none!important;
}
#checkin .checkin-tab{
  flex:1 0 132px!important;
  min-height:42px!important;
  padding:0 15px!important;
  border:0!important;
  border-right:1px solid var(--ci-line)!important;
  border-radius:0!important;
  color:var(--ci-muted)!important;
  background:transparent!important;
  font-size:13px!important;
  font-weight:750!important;
  box-shadow:none!important;
  transform:none!important;
}
#checkin .checkin-tab:last-child{border-right:0!important}
#checkin .checkin-tab:hover{color:var(--ci-primary)!important;background:var(--ci-primary-soft)!important}
#checkin .checkin-tab.active{
  color:var(--color-text-on-primary,var(--white))!important;
  background:var(--ci-primary)!important;
  box-shadow:inset 0 -2px 0 var(--ci-primary-hover)!important;
}
#checkin .checkin-filter-strip{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(156px,1fr)) auto!important;
  gap:10px!important;
  align-items:end!important;
  margin:0 0 16px!important;
  padding:0 0 16px!important;
  border:0!important;
  border-bottom:1px solid var(--ci-line)!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
}
#checkin .filter-item{gap:5px!important}
#checkin .filter-item label{color:var(--ci-muted)!important;font-size:12px!important;font-weight:700!important}
#checkin .filter-item input,
#checkin .filter-item select{
  min-height:38px!important;
  border:1px solid var(--ci-line)!important;
  border-radius:6px!important;
  background:var(--ci-surface)!important;
  color:var(--ci-ink)!important;
  font-size:13px!important;
  font-weight:600!important;
}
#checkin .filter-item input:focus,
#checkin .filter-item select:focus{
  border-color:var(--ci-primary)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ci-primary) 14%,transparent)!important;
}
#checkin .filter-item .btn,
#checkin .btn.small{
  min-height:38px!important;
  border-radius:6px!important;
  font-size:13px!important;
  font-weight:750!important;
}
#checkin .checkin-stats-cards{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:1px!important;
  margin:0 0 16px!important;
  overflow:hidden!important;
  border:1px solid var(--ci-line)!important;
  border-radius:8px!important;
  background:var(--ci-line)!important;
}
#checkin .checkin-stats-cards .checkin-metric-card{
  position:relative!important;
  min-height:132px!important;
  padding:17px!important;
  border:0!important;
  border-radius:0!important;
  background:var(--ci-surface)!important;
  box-shadow:none!important;
}
#checkin .checkin-stats-cards .checkin-metric-card::before{
  content:""!important;
  position:absolute!important;
  left:17px!important;
  top:16px!important;
  width:26px!important;
  height:3px!important;
  border-radius:99px!important;
  background:var(--ci-primary)!important;
}
#checkin .checkin-stats-cards .checkin-metric-card::after{content:none!important}
#checkin .checkin-stats-cards .kpi .label{margin-top:17px!important;color:var(--ci-muted)!important;font-size:12px!important;font-weight:700!important}
#checkin .checkin-stats-cards .kpi .value,
#checkin .checkin-stats-cards .kpi [id^="checkin"]{margin-top:8px!important;color:var(--ci-ink)!important;font-size:32px!important;line-height:1!important;font-weight:800!important;letter-spacing:0!important}
#checkin .checkin-stats-cards .kpi .hint{margin-top:11px!important;color:var(--ci-muted)!important;font-size:12px!important;line-height:1.4!important}
#checkin .checkin-data-panel{
  margin-top:16px!important;
  overflow:hidden!important;
  border:1px solid var(--ci-line)!important;
  background:var(--ci-surface)!important;
}
#checkin .card-header{
  display:flex!important;
  align-items:flex-end!important;
  justify-content:space-between!important;
  gap:16px!important;
  padding:17px 18px!important;
  border-bottom:1px solid var(--ci-line)!important;
  background:var(--ci-surface)!important;
}
#checkin .card-header span{display:block;color:var(--ci-primary);font-size:10px;font-weight:800;letter-spacing:.1em;line-height:1.2}
#checkin .card-header h3{margin:5px 0 0!important;color:var(--ci-ink)!important;font-size:17px!important;font-weight:800!important;letter-spacing:0!important}
#checkin .card-header p{margin:0;color:var(--ci-muted);font-size:12px;font-weight:600;text-align:right}
#checkin .card-body{padding:16px!important}
#checkin .table-container{border:1px solid var(--ci-line)!important;border-radius:6px!important;background:var(--ci-surface)!important;box-shadow:none!important}
#checkin .data-table{font-size:13px!important}
#checkin .data-table thead th{padding:11px 12px!important;color:var(--ci-muted)!important;background:var(--ci-primary-soft)!important;border-color:var(--ci-line)!important;font-size:11px!important;font-weight:800!important;letter-spacing:.05em!important}
#checkin .data-table tbody td{padding:12px!important;border-color:color-mix(in srgb,var(--ci-line) 54%,transparent)!important;color:var(--ci-muted)!important}
#checkin .data-table tbody tr:hover{background:var(--ci-soft)!important;box-shadow:inset 3px 0 0 var(--ci-primary)!important}
#checkin .status-tag{min-height:24px!important;padding:3px 9px!important;border-radius:99px!important;font-size:12px!important;font-weight:750!important}
#checkin .status-tag.status-success{color:var(--color-success-text)!important;background:var(--color-success-soft)!important;border-color:color-mix(in srgb,var(--color-success) 26%,transparent)!important}
#checkin .status-tag.status-error{color:var(--color-danger-text)!important;background:var(--color-danger-soft)!important;border-color:color-mix(in srgb,var(--color-danger) 26%,transparent)!important}
#checkin .btn-link{min-height:30px!important;padding:0 10px!important;border:1px solid var(--ci-line)!important;border-radius:5px!important;color:var(--ci-primary)!important;background:var(--ci-surface)!important;box-shadow:none!important}
#checkin .btn-link:hover{color:var(--color-text-on-primary,var(--white))!important;background:var(--ci-primary)!important;border-color:var(--ci-primary)!important}
#checkin .checkin-chart-container{min-height:340px!important;padding:14px!important;border:1px solid var(--ci-line)!important;border-radius:var(--chart-radius)!important;background:var(--ci-soft)!important}
#checkin .checkin-chart-container canvas{max-height:340px!important}
#checkin .empty{border-color:var(--ci-line)!important;border-radius:6px!important;background:var(--ci-soft)!important;color:var(--ci-muted)!important}
#checkinModal,
.checkin-detail-overlay{background:color-mix(in srgb,var(--ci-ink) 62%,transparent)!important;backdrop-filter:blur(5px)!important}
#checkinModal > div,
.checkin-detail-modal{border:1px solid var(--ci-line)!important;border-radius:8px!important;background:var(--ci-surface)!important;box-shadow:0 20px 56px color-mix(in srgb,var(--ci-ink) 22%,transparent)!important}
#checkinModal .field{border:1px solid var(--ci-line)!important;border-radius:6px!important;background:var(--ci-soft)!important}
#checkinModal input,
#checkinModal textarea,
#checkinModal select{border-color:var(--ci-line)!important;border-radius:6px!important;background:var(--ci-surface)!important;color:var(--ci-ink)!important}
#checkinModal input:focus,
#checkinModal textarea:focus,
#checkinModal select:focus{border-color:var(--ci-primary)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--ci-primary) 14%,transparent)!important}
#checkinProjectInfo{border-color:var(--ci-line)!important;border-radius:6px!important;color:var(--ci-primary)!important;background:var(--ci-primary-soft)!important}
.checkin-timeline-dot{background:var(--ci-primary)!important}

/* 打卡详情必须位于所有业务弹层之上，内容面板保持不透明，避免被页面背景透出。 */
html body #checkinDetailModal.checkin-detail-overlay{
  position:fixed!important;
  inset:0!important;
  z-index:2147483646!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  isolation:isolate!important;
  background:color-mix(in srgb, var(--gray-900) 62%, transparent)!important;
  opacity:1!important;
}
html body #checkinDetailModal.checkin-detail-overlay > .checkin-detail-modal{
  position:relative!important;
  z-index:2147483647!important;
  background:var(--white)!important;
  opacity:1!important;
  visibility:visible!important;
}
html body #photoLightbox{
  position:fixed!important;
  inset:0!important;
  z-index:2147483647!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  isolation:isolate!important;
  background:color-mix(in srgb, var(--raw-020617) 90%, transparent)!important;
  opacity:1!important;
}
html body #photoLightbox > img{
  position:relative!important;
  z-index:1!important;
  opacity:1!important;
  visibility:visible!important;
}
@media(max-width:980px){
  #checkin .checkin-stats-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:700px){
  #checkin .checkin-command-header{align-items:flex-start!important;flex-direction:column!important;gap:14px!important}
  #checkin .page-actions{width:100%!important;justify-content:stretch!important}
  #checkin .page-actions .btn{flex:1}
  #checkin .checkin-tabs{margin:14px 0!important}
  #checkin .checkin-tab{flex-basis:120px!important}
  #checkin .checkin-filter-strip{grid-template-columns:1fr!important}
  #checkin .card-header{align-items:flex-start!important;flex-direction:column!important;gap:7px!important}
  #checkin .card-header p{text-align:left}
}
@media(max-width:520px){
  #checkin .page-header h2{font-size:24px!important}
  #checkin .checkin-stats-cards{grid-template-columns:1fr!important}
  #checkin .checkin-stats-cards .checkin-metric-card{min-height:116px!important}
  #checkin .card-body{padding:12px!important}
}

/* Center quote customer-visible hint text (2026-07-06) */
#quoteDrawer .quote-section-accent .quote-section-header{
  display:grid!important;
  grid-template-columns:auto auto 1fr!important;
  align-items:center!important;
  column-gap:12px!important;
}
#quoteDrawer .quote-section-accent .quote-section-hint{
  margin-left:0!important;
  justify-self:center!important;
  text-align:center!important;
  width:100%!important;
}
@media(max-width:760px){
  #quoteDrawer .quote-section-accent .quote-section-header{
    grid-template-columns:auto 1fr!important;
  }
  #quoteDrawer .quote-section-accent .quote-section-hint{
    grid-column:1 / -1!important;
    margin-top:6px!important;
  }
}

/* Sales contract page should fill available content width (2026-07-06) */
#sales-contracts,
#sales-contracts .sales-contract-panel,
#sales-contracts [data-sales-contract-panel],
#sales-contracts .card,
#sales-contracts .table-wrap,
#sales-contracts .sales-contract-table{
  width:100%!important;
  max-width:none!important;
  box-sizing:border-box!important;
}
#sales-contracts .sales-contract-panel,
#sales-contracts [data-sales-contract-panel]{
  margin-left:0!important;
  margin-right:0!important;
}
#sales-contracts .section-title,
#sales-contracts .filters,
#sales-contracts .table-wrap{
  align-self:stretch!important;
}


/* Sales contract template editor drawer */
.sales-contract-template-drawer .sales-contract-template-panel {
  width: min(96vw, 1120px);
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sales-contract-template-header {
  border-bottom: 1px solid var(--color-border, var(--raw-d7e5dc));
  background: linear-gradient(135deg, var(--color-primary-soft, var(--raw-eef8f2)), var(--color-surface, var(--white)));
}
.sales-contract-template-header h3 {
  margin: 0 0 4px;
  color: var(--color-primary, var(--raw-16713b));
  font-size: 18px;
}
.sales-contract-template-header p {
  margin: 0;
  color: var(--color-muted, var(--raw-667085));
  font-size: 12px;
}
.sales-contract-template-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border, var(--raw-d7e5dc));
  background: var(--color-surface, var(--white));
}
.sales-contract-template-toolbar button,
.sales-contract-template-toolbar select {
  height: 30px;
  border: 1px solid var(--color-border, var(--raw-d7e5dc));
  border-radius: 8px;
  background: var(--color-bg, var(--raw-f8fbf9));
  color: var(--color-text, var(--gray-800));
  font-size: 12px;
  padding: 0 10px;
}
.sales-contract-template-toolbar button:hover,
.sales-contract-template-toolbar select:hover {
  border-color: var(--color-primary, var(--raw-16713b));
  color: var(--color-primary, var(--raw-16713b));
  background: var(--color-primary-soft, var(--raw-eef8f2));
}
.sales-contract-template-editor-wrap {
  flex: 1;
  min-height: 520px;
  background: var(--color-bg, var(--raw-f4f7f5));
  padding: 14px;
  overflow: hidden;
}
#salesContractTemplateEditor {
  width: 100%;
  height: 100%;
  min-height: 520px;
  border: 1px solid var(--color-border, var(--raw-d7e5dc));
  border-radius: 12px;
  background: var(--white);
  box-shadow: 0 18px 42px color-mix(in srgb, var(--green-900) 10%, transparent);
}
.sales-contract-template-actions {
  border-top: 1px solid var(--color-border, var(--raw-d7e5dc));
  background: var(--color-surface, var(--white));
  padding: 12px 16px;
}
@media (max-width: 760px) {
  .sales-contract-template-drawer .sales-contract-template-panel { width: 100vw; max-height: 100vh; border-radius: 0; }
  .sales-contract-template-editor-wrap { min-height: 60vh; padding: 8px; }
  #salesContractTemplateEditor { min-height: 60vh; }
}

/* Quality deposit edit drawer */
.quality-deposit-edit-panel{width:min(92vw,860px);max-height:calc(100vh - 48px);display:flex;flex-direction:column;overflow:hidden}
.quality-deposit-edit-header{position:relative;border-bottom:1px solid var(--color-border,var(--raw-d7e5dc));background:linear-gradient(135deg,var(--color-primary-soft,var(--raw-eef8f2)),var(--color-surface,var(--white)))}
.quality-deposit-edit-top-close{position:absolute;top:12px;right:14px;width:34px;height:34px;border:1px solid var(--color-border,var(--raw-d7e5dc));border-radius:50%;background:var(--color-surface,var(--white));color:var(--color-primary,var(--raw-16713b));font-size:25px;line-height:28px;cursor:pointer;transition:background .15s,color .15s,transform .15s}.quality-deposit-edit-top-close:hover{background:var(--color-primary,var(--raw-16713b));color:var(--white);transform:rotate(90deg)}
.quality-deposit-edit-header h3{margin:0 0 4px;color:var(--color-primary,var(--raw-16713b));font-size:18px}.quality-deposit-edit-header p{margin:0;color:var(--color-muted,var(--raw-667085));font-size:12px}
.quality-deposit-edit-body{padding:16px;overflow:auto;background:var(--color-bg,var(--raw-f8fbf9))}
.quality-deposit-edit-readonly{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}.quality-deposit-edit-readonly>div{padding:10px 12px;border:1px solid var(--color-border,var(--raw-d7e5dc));border-radius:12px;background:var(--color-surface,var(--white))}.quality-deposit-edit-readonly span{display:block;font-size:12px;color:var(--color-muted,var(--raw-667085));margin-bottom:4px}.quality-deposit-edit-readonly strong{font-size:13px;color:var(--color-text,var(--gray-800))}
.quality-deposit-edit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.quality-deposit-edit-grid label{display:flex;flex-direction:column;gap:6px;font-weight:700;color:var(--color-text,var(--gray-800))}.quality-deposit-edit-grid label.full{grid-column:1/-1}.quality-deposit-edit-grid input,.quality-deposit-edit-grid select,.quality-deposit-edit-grid textarea{border:1px solid var(--color-border,var(--raw-d7e5dc));border-radius:10px;padding:10px 12px;background:var(--color-surface,var(--white));color:var(--color-text,var(--gray-800))}.quality-deposit-edit-grid input:focus,.quality-deposit-edit-grid select:focus,.quality-deposit-edit-grid textarea:focus{outline:none;border-color:var(--color-primary,var(--raw-16713b));box-shadow:0 0 0 3px var(--color-primary-soft,var(--raw-eef8f2))}
.quality-deposit-edit-actions{border-top:1px solid var(--color-border,var(--raw-d7e5dc));background:var(--color-surface,var(--white));padding:12px 16px}
@media(max-width:760px){.quality-deposit-edit-readonly,.quality-deposit-edit-grid{grid-template-columns:1fr}.quality-deposit-edit-panel{width:100vw;max-height:100vh;border-radius:0}}


/* OnlyOffice sales contract editor */
.sales-contract-onlyoffice-drawer {
  align-items: center;
  justify-content: center;
}
.sales-contract-onlyoffice-panel {
  width: min(1180px, calc(100vw - 32px));
  max-width: 1180px;
  height: min(92vh, 920px);
  max-height: 92vh;
  border-radius: 18px;
  overflow: hidden;
}
.sales-contract-onlyoffice-header {
  border-bottom: 1px solid var(--theme-border, var(--raw-dbe7df));
}
.sales-contract-onlyoffice-header h3 {
  color: var(--theme-primary, var(--raw-15803d));
  font-size: 18px;
  margin: 0 0 4px;
}
.sales-contract-onlyoffice-header p {
  margin: 0;
  color: var(--text-muted, var(--gray-500));
  font-size: 13px;
}
.sales-contract-onlyoffice-tip {
  margin: 12px 16px;
  padding: 10px 12px;
  border: 1px solid var(--theme-border, var(--raw-bbf7d0));
  border-left: 4px solid var(--theme-primary, var(--raw-16a34a));
  border-radius: 12px;
  background: var(--theme-soft, var(--raw-f0fdf4));
  color: var(--theme-primary-dark, var(--raw-14532d));
  font-size: 13px;
  line-height: 1.6;
}
.sales-contract-onlyoffice-frame {
  height: calc(100% - 170px);
  margin: 0 16px;
  border: 1px solid var(--theme-border, var(--raw-dbe7df));
  border-radius: 14px;
  overflow: hidden;
  background: var(--white);
}
.sales-contract-onlyoffice-actions {
  padding: 12px 16px 16px;
  border-top: 1px solid var(--theme-border, var(--raw-dbe7df));
}
@media (max-width: 768px) {
  .sales-contract-onlyoffice-panel {
    width: calc(100vw - 16px);
    height: 94vh;
  }
  .sales-contract-onlyoffice-frame {
    height: calc(100% - 190px);
    margin: 0 10px;
  }
}


/* Sales contract approval Word upload flow */
.sales-contract-approval-word-drawer{align-items:center;justify-content:center}.sales-contract-approval-word-panel{width:min(760px,calc(100vw - 32px));max-height:88vh;border-radius:18px;overflow:auto}.sales-contract-approval-word-header h3{margin:0 0 4px;color:var(--theme-primary,var(--color-primary,var(--raw-16713b)));font-size:18px}.sales-contract-approval-word-header p{margin:0;color:var(--text-muted,var(--gray-500));font-size:13px}.sales-contract-approval-word-steps{display:grid;gap:12px;padding:16px}.sales-contract-approval-word-step{display:grid;grid-template-columns:34px 1fr;gap:12px;padding:14px;border:1px solid var(--theme-border,var(--color-border,var(--raw-d7e5dc)));border-radius:14px;background:var(--color-surface,var(--white))}.sales-contract-approval-word-step .step-index{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--theme-soft,var(--color-primary-soft,var(--raw-eef8f2)));color:var(--theme-primary,var(--color-primary,var(--raw-16713b)));font-weight:800}.sales-contract-approval-word-step strong{display:block;color:var(--color-text,var(--raw-172033));margin-bottom:4px}.sales-contract-approval-word-step p{margin:0 0 10px;color:var(--text-muted,var(--gray-500));font-size:13px;line-height:1.6}.sales-contract-approval-word-upload{display:flex;align-items:center;justify-content:center;min-height:46px;border:1px dashed var(--theme-primary,var(--color-primary,var(--raw-16713b)));border-radius:12px;background:var(--theme-soft,var(--color-primary-soft,var(--raw-eef8f2)));color:var(--theme-primary,var(--color-primary,var(--raw-16713b)));font-weight:700;cursor:pointer}.sales-contract-approval-word-upload input{display:none}.sales-contract-approval-word-actions{border-top:1px solid var(--theme-border,var(--color-border,var(--raw-d7e5dc)));padding:12px 16px}@media(max-width:640px){.sales-contract-approval-word-panel{width:calc(100vw - 16px);max-height:94vh}.sales-contract-approval-word-step{grid-template-columns:1fr}.sales-contract-approval-word-step .step-index{width:30px;height:30px}}


/* Sales contract approval word flow polish v2 */
.sales-contract-approval-word-panel{box-shadow:0 24px 80px color-mix(in srgb, var(--gray-900) 20%, transparent)}
.sales-contract-approval-word-header{background:linear-gradient(135deg,var(--theme-soft,var(--color-primary-soft,var(--raw-eef8f2))),var(--color-surface,var(--white)));border-bottom:1px solid var(--theme-border,var(--color-border,var(--raw-d7e5dc)))}
.sales-contract-approval-word-steps{background:linear-gradient(180deg,color-mix(in srgb, var(--white) 96%, transparent),var(--color-bg,var(--raw-f7faf8)))}
.sales-contract-approval-word-step{position:relative;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.sales-contract-approval-word-step:hover{border-color:var(--theme-primary,var(--color-primary,var(--raw-16713b)));box-shadow:0 10px 28px color-mix(in srgb, var(--raw-16713b) 12%, transparent);transform:translateY(-1px)}
.sales-contract-approval-word-upload:hover{filter:saturate(1.08);box-shadow:0 0 0 3px color-mix(in srgb,var(--theme-primary,var(--color-primary,var(--raw-16713b))) 14%,transparent)}


/* Sales contract final action disabled state */
.sales-contract-action-disabled{opacity:.42!important;filter:grayscale(.35);cursor:not-allowed!important;background:var(--color-muted-bg,var(--gray-100))!important;color:var(--text-muted,var(--gray-400))!important;border-color:var(--color-border,var(--raw-d7e5dc))!important}.sales-contract-action-disabled:hover{background:var(--color-muted-bg,var(--gray-100))!important;color:var(--text-muted,var(--gray-400))!important;box-shadow:none!important;transform:none!important}

/* ─────────────────────────────────────────────────────────────
   Theme compatibility patch index (2026-07-07)
   Temporary stabilizers for old hard-coded theme styles.
   Keep these blocks at the end until styles.css is split:
   1. Theme unification layer v1
   2. Theme legacy green cleanup v1
   Future target: move into theme-tokens.css and component-actions.css.
   ───────────────────────────────────────────────────────────── */
/* Theme unification layer v1: common lists, drawers, forms and action buttons */
:root{
  --theme-action-bg: color-mix(in srgb, var(--zway-primary, var(--color-primary, #16713b)) 8%, var(--zway-surface, #fff) 92%);
  --theme-action-bg-hover: color-mix(in srgb, var(--zway-primary, var(--color-primary, #16713b)) 16%, var(--zway-surface, #fff) 84%);
  --theme-action-border: color-mix(in srgb, var(--zway-primary, var(--color-primary, #16713b)) 24%, var(--zway-border, #e5e7eb) 76%);
  --theme-action-shadow: color-mix(in srgb, var(--zway-primary, var(--color-primary, #16713b)) 18%, transparent);
}
.action-icon,
.action-link.icon-btn,
.table-wrap .action-link:not(.icon-btn),
.project-actions-cell .action-link:not(.icon-btn),
.procurement-actions .action-link:not(.icon-btn),
.vendor-action-cell .action-link:not(.icon-btn),
.customer-action-cell .action-link:not(.icon-btn),
.finance-main-actions .action-link:not(.icon-btn),
.finance-expanded-actions .action-link:not(.icon-btn),
.target-actions .action-link:not(.icon-btn){
  border-color: var(--theme-action-border)!important;
  background: var(--theme-action-bg)!important;
  color: var(--color-primary, var(--raw-16713b))!important;
}
.action-icon:hover,
.action-link.icon-btn:hover,
.table-wrap .action-link:not(.icon-btn):hover,
.project-actions-cell .action-link:not(.icon-btn):hover,
.procurement-actions .action-link:not(.icon-btn):hover,
.vendor-action-cell .action-link:not(.icon-btn):hover,
.customer-action-cell .action-link:not(.icon-btn):hover,
.finance-main-actions .action-link:not(.icon-btn):hover,
.finance-expanded-actions .action-link:not(.icon-btn):hover,
.target-actions .action-link:not(.icon-btn):hover{
  border-color: var(--color-primary, var(--raw-16713b))!important;
  background: var(--theme-action-bg-hover)!important;
  color: var(--color-primary-hover, var(--color-primary, var(--raw-16713b)))!important;
  box-shadow: 0 6px 16px var(--theme-action-shadow)!important;
}
.drawer-head,
.drawer-header,
.modal-header,
.form-section h4,
.section-title h2,
.section-title h3,
.project-section-card h4,
.sales-contract-approval-card h4,
.sc-contract-card h4{
  color: var(--color-primary, var(--raw-16713b))!important;
}
.drawer-subtitle:not(.danger):not(.error),
.form-section,
.config-panel,
.project-form-panel-head,
.project-overview-tab-head,
.sales-contract-template-notice,
.sc-contract-notice{
  background: color-mix(in srgb, var(--color-primary, var(--raw-16713b)) 7%, var(--white) 93%)!important;
  border-color: color-mix(in srgb, var(--color-primary, var(--raw-16713b)) 18%, var(--white) 82%)!important;
  color: var(--color-primary-text, var(--color-primary, var(--raw-16713b)))!important;
}
.tag.green,
.tag.blue,
.tag.teal,
.kpi-badge,
.kpi-badge.success{
  background: color-mix(in srgb, var(--color-primary, var(--raw-16713b)) 12%, var(--white) 88%)!important;
  color: var(--color-primary, var(--raw-16713b))!important;
}
input:focus,
select:focus,
textarea:focus{
  border-color: var(--color-primary, var(--raw-16713b))!important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, var(--raw-16713b)) 16%, transparent)!important;
}

/* Theme legacy green cleanup v1: blue/orange/gray should not leak old green accents */
[data-theme="blue"] .nav button.active::before,
[data-theme="orange"] .nav button.active::before,
[data-theme="gray"] .nav button.active::before,
[data-theme="blue"] .topbar-logo::before,
[data-theme="orange"] .topbar-logo::before,
[data-theme="gray"] .topbar-logo::before{
  background: var(--color-primary-hover, var(--color-primary))!important;
}
[data-theme="blue"] .sidebar-avatar,
[data-theme="orange"] .sidebar-avatar,
[data-theme="gray"] .sidebar-avatar{
  background: var(--color-primary, var(--raw-16713b))!important;
}
[data-theme="blue"] .sidebar-brand-icon,
[data-theme="orange"] .sidebar-brand-icon,
[data-theme="gray"] .sidebar-brand-icon{
  background: linear-gradient(135deg,var(--color-primary-hover,var(--color-primary)),var(--color-primary))!important;
  box-shadow: 0 4px 12px color-mix(in srgb,var(--color-primary) 28%,transparent)!important;
}
[data-theme="blue"] .notice:not(.danger):not(.warning):not(.error),
[data-theme="orange"] .notice:not(.danger):not(.warning):not(.error),
[data-theme="gray"] .notice:not(.danger):not(.warning):not(.error),
[data-theme="blue"] .login-captcha-btn,
[data-theme="orange"] .login-captcha-btn,
[data-theme="gray"] .login-captcha-btn{
  background: var(--color-primary-faint, var(--gray-50))!important;
  border-color: var(--color-primary-border, var(--raw-dbe4ee))!important;
  color: var(--color-primary-text, var(--color-primary))!important;
}
[data-theme="blue"] .login-captcha-btn:hover,
[data-theme="orange"] .login-captcha-btn:hover,
[data-theme="gray"] .login-captcha-btn:hover{
  background: var(--color-primary-soft, var(--raw-eef2ff))!important;
  border-color: var(--color-primary-hover, var(--color-primary))!important;
}
[data-theme="blue"] .glow-progress i,
[data-theme="orange"] .glow-progress i,
[data-theme="gray"] .glow-progress i,
[data-theme="blue"] .bar.green,
[data-theme="orange"] .bar.green,
[data-theme="gray"] .bar.green{
  background: linear-gradient(90deg,var(--color-primary),var(--color-primary-hover,var(--color-primary)))!important;
}
[data-theme="blue"] .eyebrow,
[data-theme="orange"] .eyebrow,
[data-theme="gray"] .eyebrow,
[data-theme="blue"] .form-section h4,
[data-theme="orange"] .form-section h4,
[data-theme="gray"] .form-section h4,
[data-theme="blue"] .config-subtitle,
[data-theme="orange"] .config-subtitle,
[data-theme="gray"] .config-subtitle{
  color: var(--color-primary-text, var(--color-primary))!important;
}
[data-theme="blue"] .form-section p,
[data-theme="orange"] .form-section p,
[data-theme="gray"] .form-section p,
[data-theme="blue"] .config-help,
[data-theme="orange"] .config-help,
[data-theme="gray"] .config-help,
[data-theme="orange"] .empty{
  color: var(--color-text-secondary, var(--gray-500))!important;
}
[data-theme="blue"] .project-form-tab span,
[data-theme="orange"] .project-form-tab span,
[data-theme="gray"] .project-form-tab span,
[data-theme="blue"] .project-overview-tab span,
[data-theme="orange"] .project-overview-tab span,
[data-theme="gray"] .project-overview-tab span{
  background: var(--color-primary-soft, var(--raw-eef2ff))!important;
  color: var(--color-primary-text, var(--color-primary))!important;
}
[data-theme="blue"] .project-form-tab.completed,
[data-theme="orange"] .project-form-tab.completed,
[data-theme="gray"] .project-form-tab.completed{
  border-color: var(--color-primary, var(--raw-16713b))!important;
  color: var(--color-primary, var(--raw-16713b))!important;
  background: var(--color-primary-faint, var(--gray-50))!important;
}
[data-theme="blue"] .project-form-tab.completed .tab-check,
[data-theme="orange"] .project-form-tab.completed .tab-check,
[data-theme="gray"] .project-form-tab.completed .tab-check,
[data-theme=orange] .section-edit-btn:hover{
  background: var(--color-primary, var(--raw-16713b))!important;
  color: var(--color-text-on-primary, var(--white))!important;
}

/* 2026-07-07 sales contract create method readability fix */
#salesContractDrawer .sc-create-tabs .sc-tab,
#salesContractDrawer .sc-create-tabs .sc-tab.active{
  color: var(--text-primary, var(--gray-900));
}
#salesContractDrawer .sc-create-tabs .sc-tab.active{
  border-color: var(--color-primary, var(--raw-ea580c));
  background: color-mix(in srgb, var(--color-primary, var(--raw-ea580c)) 8%, var(--white) 92%);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--color-primary, var(--raw-ea580c)) 14%, transparent);
}
#salesContractDrawer .sc-create-tabs .sc-tab.active .sc-tab-title{
  color: var(--text-primary, var(--gray-900));
  font-weight: 700;
}
#salesContractDrawer .sc-create-tabs .sc-tab.active .sc-tab-hint{
  color: var(--text-secondary, var(--raw-667085));
}
#salesContractDrawer .sc-create-tabs .sc-tab.active svg{
  color: var(--color-primary, var(--raw-ea580c));
}
#salesContractDrawer .sc-create-tabs .sc-tab:hover .sc-tab-title,
#salesContractDrawer .sc-create-tabs .sc-tab:hover .sc-tab-hint{
  color: inherit;
}

/* 2026-07-07 force readable selected state for sales contract create cards */
body #salesContractDrawer .sc-create-tabs > .sc-tab.active,
body #salesContractDrawer .sc-create-tabs > .sc-tab[aria-selected="true"]{
  color: var(--color-text, var(--gray-900)) !important;
  border-color: var(--color-primary, var(--raw-ea580c)) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary, var(--raw-ea580c)) 9%, var(--white) 91%), var(--white)) !important;
  box-shadow: 0 14px 32px color-mix(in srgb, var(--color-primary, var(--raw-ea580c)) 14%, transparent) !important;
}
body #salesContractDrawer .sc-create-tabs > .sc-tab.active svg,
body #salesContractDrawer .sc-create-tabs > .sc-tab[aria-selected="true"] svg{
  color: var(--color-primary, var(--raw-ea580c)) !important;
  stroke: currentColor !important;
}
body #salesContractDrawer .sc-create-tabs > .sc-tab.active .sc-tab-title,
body #salesContractDrawer .sc-create-tabs > .sc-tab[aria-selected="true"] .sc-tab-title{
  color: var(--color-text, var(--gray-900)) !important;
  -webkit-text-fill-color: var(--color-text, var(--gray-900)) !important;
  opacity: 1 !important;
  font-weight: 800 !important;
}
body #salesContractDrawer .sc-create-tabs > .sc-tab.active .sc-tab-hint,
body #salesContractDrawer .sc-create-tabs > .sc-tab[aria-selected="true"] .sc-tab-hint{
  color: var(--color-text-secondary, var(--raw-667085)) !important;
  -webkit-text-fill-color: var(--color-text-secondary, var(--raw-667085)) !important;
  opacity: 1 !important;
}
body #salesContractDrawer .sc-create-tabs > .sc-tab.active *,
body #salesContractDrawer .sc-create-tabs > .sc-tab[aria-selected="true"] *{
  text-shadow: none !important;
}

/* 2026-07-07 compact sales contract payment terms spacing */
#salesContractDrawer .sc-payment-card{
  gap: 8px !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
}
#salesContractDrawer .sc-payment-card-head{
  gap: 8px !important;
  margin-bottom: 2px !important;
}
#salesContractDrawer .sc-payment-card-head label{
  font-size: 15px !important;
  line-height: 1.25 !important;
}
#salesContractDrawer .sc-payment-card-head span{
  padding: 4px 9px !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
}
#salesContractDrawer .sc-payment-grid{
  gap: 10px !important;
}
#salesContractDrawer .sc-payment-grid select,
#salesContractDrawer .sc-payment-grid textarea{
  min-height: 42px !important;
  font-size: 14px !important;
}
#salesContractDrawer .sc-payment-grid textarea{
  padding: 9px 12px !important;
}
#salesContractDrawer .sc-payment-card > .sc-field-hint{
  margin-top: 0 !important;
  line-height: 1.35 !important;
}

/* ── 系统内置弹窗组件 (crmModal) ── */
.crm-modal-overlay{
  position:fixed;inset:0;
  background:color-mix(in srgb, var(--gray-900) 45%, transparent);
  backdrop-filter:blur(2px);
  display:none;
  align-items:center;justify-content:center;
  z-index:3000;
  padding:20px;
  opacity:0;
  transition:opacity .22s ease;
  animation:crmFade .22s ease forwards;
}
.crm-modal-overlay.open{display:flex;opacity:1}
@keyframes crmFade{from{opacity:0}to{opacity:1}}
.crm-modal{
  width:min(480px,calc(100vw - 40px));
  max-height:90vh;
  overflow-y:auto;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--radius-card);
  box-shadow:0 24px 70px color-mix(in srgb, var(--gray-900) 30%, transparent);
  transform:scale(.96) translateY(8px);
  opacity:0;
  transition:transform .22s ease,opacity .22s ease;
}
.crm-modal.wide{
  width:min(760px,calc(100vw - 40px));
}
.crm-modal-overlay.open .crm-modal{transform:scale(1) translateY(0);opacity:1}
.crm-modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid var(--card-border);
}
.crm-modal-head h3{margin:0;font-size:16px;font-weight:700;color:var(--text-primary)}
.crm-modal-close{
  border:none;background:transparent;
  font-size:22px;line-height:1;color:var(--text-secondary);
  cursor:pointer;padding:4px 8px;border-radius:6px;
  transition:background .18s ease;
}
.crm-modal-close:hover{background:var(--body-bg);color:var(--text-primary)}
.crm-modal-body{padding:20px;font-size:14px;line-height:1.6;color:var(--text-primary)}
.crm-modal-body .crm-field{margin-top:14px}
.crm-modal-body .crm-field label{display:block;font-size:13px;font-weight:600;color:var(--text-secondary);margin-bottom:6px}
.crm-modal-body .crm-field textarea,
.crm-modal-body .crm-field input{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--input-border);
  border-radius:8px;
  font-size:14px;
  font-family:inherit;
  background:var(--input-bg);
  color:var(--text-primary);
  box-sizing:border-box;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.crm-modal-body .crm-field textarea{resize:vertical;min-height:90px}
.crm-modal-body .crm-field textarea:focus,
.crm-modal-body .crm-field input:focus{
  outline:none;
  border-color:var(--brand-green);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--raw-22a05e) 18%, transparent);
}
.crm-modal-body .crm-field .crm-error{color:var(--danger-red);font-size:12px;margin-top:5px;display:none}
.crm-modal-body .crm-field.invalid .crm-error{display:block}
.crm-modal-body .crm-field.invalid textarea,
.crm-modal-body .crm-field.invalid input{border-color:var(--danger-red)}
.crm-modal-foot{
  display:flex;gap:10px;justify-content:flex-end;
  padding:14px 20px 20px;
}
.crm-modal-foot .btn{min-width:88px}
@media(max-width:768px){
  .crm-modal{width:calc(100vw - 32px)}
  .crm-modal-foot{flex-direction:column-reverse}
  .crm-modal-foot .btn{width:100%}
}

#sales-contracts .sales-contract-table .action-link[data-view-sales-contract]{
  font-size:12px;
  text-align:center;
  display:block;
}
.task-table .task-actions .action-link{
  font-size:12px;
  text-align:center;
}
/* Project list column override: keep next action wide and update time compact.
   The project row has 10 cells: index, actions, no, customer, product, owner, amount, stage/risk, next action, updated time. */
#projects .project-table{
  width:max-content;
  min-width:1280px;
  table-layout:fixed;
}
#projects .project-table th:nth-child(1),
#projects .project-table td:nth-child(1){width:48px;text-align:center}
#projects .project-table th:nth-child(2),
#projects .project-table td:nth-child(2){width:76px;text-align:center}
#projects .project-table th:nth-child(3),
#projects .project-table td:nth-child(3){width:148px}
#projects .project-table th:nth-child(4),
#projects .project-table td:nth-child(4){width:210px}
#projects .project-table th:nth-child(5),
#projects .project-table td:nth-child(5){width:165px}
#projects .project-table th:nth-child(6),
#projects .project-table td:nth-child(6){width:96px}
#projects .project-table th:nth-child(7),
#projects .project-table td:nth-child(7){width:108px}
#projects .project-table th:nth-child(8),
#projects .project-table td:nth-child(8){width:138px}
#projects .project-table th:nth-child(9),
#projects .project-table td:nth-child(9){
  width:365px;
  min-width:365px;
  text-align:left;
  white-space:normal;
  word-break:break-word;
  overflow-wrap:anywhere;
}
#projects .project-table th:nth-child(10),
#projects .project-table td:nth-child(10){
  width:132px;
  min-width:132px;
  text-align:left;
  white-space:nowrap;
}
#projects .project-table .next-action-cell{
  width:100%;
  max-width:none;
  min-width:0;
  text-align:left;
}
#projects .project-table .next-action-main{
  display:block;
  max-width:100%;
  white-space:normal;
  word-break:break-word;
  overflow-wrap:anywhere;
}
#projects .project-table .next-action-meta{
  justify-content:flex-start;
}

/* 2026-07-10 list anti-overlap baseline: keep sticky headers and rows separated. */
.table-wrap table,
.project-table-wrap table,
.task-table-wrap table,
.sc-contract-table-wrap table,
.customer-manage-table-wrap table,
.vendor-manage-table-wrap table,
.finance-table-wrap table,
.key-project-table-wrap table{
  border-collapse:separate!important;
  border-spacing:0!important;
}

.table-wrap thead th,
.project-table-wrap thead th,
.task-table-wrap thead th,
.sc-contract-table-wrap thead th,
.customer-manage-table-wrap thead th,
.vendor-manage-table-wrap thead th,
.finance-table-wrap thead th,
.key-project-table-wrap thead th{
  position:sticky;
  top:0;
  z-index:5;
  min-height:42px;
  height:42px;
  padding-top:10px!important;
  padding-bottom:10px!important;
  line-height:1.25!important;
  vertical-align:middle!important;
  background:linear-gradient(180deg,var(--ui-theme-soft,var(--color-surface-soft,var(--raw-f6f9fd))),var(--white))!important;
  box-shadow:0 1px 0 var(--ui-border,var(--color-border,var(--raw-dbe7df)))!important;
}

.table-wrap tbody tr,
.project-table-wrap tbody tr,
.task-table-wrap tbody tr,
.sc-contract-table-wrap tbody tr,
.customer-manage-table-wrap tbody tr,
.vendor-manage-table-wrap tbody tr,
.finance-table-wrap tbody tr,
.key-project-table-wrap tbody tr{
  position:relative;
  z-index:1;
}

.table-wrap tbody td,
.project-table-wrap tbody td,
.task-table-wrap tbody td,
.sc-contract-table-wrap tbody td,
.customer-manage-table-wrap tbody td,
.vendor-manage-table-wrap tbody td,
.finance-table-wrap tbody td,
.key-project-table-wrap tbody td{
  padding-top:12px!important;
  padding-bottom:12px!important;
  line-height:1.45!important;
  vertical-align:top!important;
}

#projects .project-table tbody td{
  min-height:54px;
}

#projects .project-table th:nth-child(3),
#projects .project-table td:nth-child(3){
  width:170px!important;
}

#projects .project-table th:nth-child(8),
#projects .project-table td:nth-child(8){
  width:146px!important;
}

#projects .project-table th:nth-child(9),
#projects .project-table td:nth-child(9){
  width:365px!important;
  min-width:365px!important;
}

#projects .project-table th:nth-child(10),
#projects .project-table td:nth-child(10){
  width:132px!important;
  min-width:132px!important;
}


@media(max-width:768px){
.pr-items-section{ width:100% !important; padding:8px; box-sizing:border-box; }
.po-items-head{ flex-direction:column; align-items:stretch; gap:10px; margin-bottom:12px; }
.po-items-head > div{ width:100%; }
.po-items-head > div span{ font-size:12px; }
.po-items-head .btn{ width:100%; text-align:center; }
.po-items-list{ gap:10px; }
.pr-item-row{ display:flex !important; flex-direction:column; align-items:stretch; gap:8px; padding:14px 16px !important; margin-bottom:0; grid-template-columns:none !important; }
.pr-item-row > select, .pr-item-row > input, .pr-item-row > button{ width:100% !important; min-width:0; box-sizing:border-box; height:auto; padding:8px 10px; font-size:14px; }
.pr-item-row .unit-picker-wrap{ width:100% !important; min-width:0; display:block; }
.pr-item-row .unit-input{ width:100%; box-sizing:border-box; }
.pr-item-row .unit-dropdown{ position:static; width:100%; }
.pr-item-row .pr-item-note{ grid-column:auto; }
.po-items-total{ margin-top:12px; padding-top:12px; border-top:1px solid var(--border); text-align:right; font-size:14px; }
}
@media(max-width:480px){
  .pr-items-section{ padding:6px; }
  .po-items-head{ gap:8px; margin-bottom:10px; }
  .po-items-list{ gap:8px; }
  .pr-item-row{ padding:10px 12px !important; gap:6px; }
  .pr-item-row > select, .pr-item-row > input, .pr-item-row > button{ font-size:13px; padding:7px 9px; }
}

/* Quote item mobile: stack fields vertically for small screens */
@media(max-width:760px){
  #quoteItemsBody .quote-item-layout-with-brand .quote-item-side-grid-with-brand{
    display:flex!important;
    flex-direction:column!important;
    gap:12px!important;
    width:100%!important;
  }
  #quoteItemsBody .quote-item-layout-with-brand .quote-item-side-grid-with-brand > label{
    width:100%!important;
    min-width:0!important;
  }
  #quoteItemsBody .quote-item-layout-with-brand .quote-item-side-grid-with-brand > label > input,
  #quoteItemsBody .quote-item-layout-with-brand .quote-item-side-grid-with-brand > label > strong,
  #quoteItemsBody .quote-item-layout-with-brand .quote-item-side-grid-with-brand > label > select{
    width:100%!important;
    box-sizing:border-box!important;
  }
}


/* Quality deposit table mobile: card layout */
@media(max-width:768px){
  #salesContractPanelDeposits table thead{display:none!important;}
  #salesContractPanelDeposits table,
  #salesContractPanelDeposits table tbody,
  #salesContractPanelDeposits table tr,
  #salesContractPanelDeposits table td{
    display:block!important;
    width:100%!important;
    box-sizing:border-box!important;
  }
  #salesContractPanelDeposits table tr{
    padding:12px 14px!important;
    margin-bottom:10px!important;
    background:var(--card-bg,var(--white))!important;
    border:1px solid var(--card-border,var(--gray-200))!important;
    border-radius:8px!important;
  }
  #salesContractPanelDeposits table td{
    padding:6px 0!important;
    border:none!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    font-size:14px!important;
  }
  #salesContractPanelDeposits table td::before{
    content:attr(data-label);
    flex:0 0 80px!important;
    font-weight:600!important;
    color:var(--text-secondary,var(--gray-500))!important;
    font-size:12px!important;
    text-align:right!important;
    padding-right:8px!important;
  }
  #salesContractPanelDeposits table td[data-label="操作"]{
    justify-content:flex-end!important;
  }
  #salesContractPanelDeposits table td[data-label="序号"]{display:none!important;}
}
@media(max-width:480px){
  #salesContractPanelDeposits table tr{padding:10px 12px!important;margin-bottom:8px!important;}
  #salesContractPanelDeposits table td{font-size:13px!important;padding:4px 0!important;}
  #salesContractPanelDeposits table td::before{flex-basis:70px!important;font-size:11px!important;}
}
/* ── 全局按钮图标尺寸 ── */
.action-link.icon-btn svg,
.action-icon svg,
.action-icon-plus svg,
.target-action-btn.icon-btn svg,
.icon-btn svg{
  width:12px!important;height:12px!important;
}
/* ── 全局按钮容器尺寸（兜底） ── */
button.action-link.icon-btn,
button.action-icon,
button.action-icon-plus,
button.target-action-btn.icon-btn,
button.icon-btn{
  width:18px!important;height:18px!important;
  min-width:18px!important;min-height:18px!important;
  border-radius:4px!important;
}
/* All list operation icons follow the procurement action standard. */
.table-wrap .table-actions,
.table-wrap .task-actions,
.table-wrap .procurement-actions,
.procurement-actions,
.target-actions{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:6px!important;
  min-width:0;
}
.table-wrap .action-link.icon-btn,
.table-wrap .action-icon,
.table-wrap .target-action-btn.icon-btn,
.procurement-actions .action-link.icon-btn,
.procurement-actions .action-icon,
.target-actions .target-action-btn.icon-btn{
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  min-height:18px!important;
  padding:0!important;
  border:1px solid var(--theme-action-border)!important;
  border-radius:4px!important;
  background:var(--theme-action-bg)!important;
  color:var(--color-primary,var(--primary,var(--raw-16713b)))!important;
  box-shadow:none!important;
}
.table-wrap .action-link.icon-btn:hover,
.table-wrap .action-icon:hover,
.table-wrap .target-action-btn.icon-btn:hover,
.procurement-actions .action-link.icon-btn:hover,
.procurement-actions .action-icon:hover,
.target-actions .target-action-btn.icon-btn:hover{
  border-color:var(--color-primary,var(--primary,var(--raw-16713b)))!important;
  background:var(--theme-action-bg-hover)!important;
  color:var(--color-primary-hover,var(--primary-hover,var(--primary,var(--raw-16713b))))!important;
  box-shadow:0 6px 16px var(--theme-action-shadow)!important;
  transform:translateY(-1px);
}
.table-wrap .action-link.icon-btn svg,
.table-wrap .action-icon svg,
.table-wrap .target-action-btn.icon-btn svg,
.procurement-actions .action-link.icon-btn svg,
.procurement-actions .action-icon svg,
.target-actions .target-action-btn.icon-btn svg{
  width:12px!important;
  height:12px!important;
  stroke:currentColor!important;
}
/* ── 销售负责人统计移动端适配 ── */
@media(max-width:768px){
  .sales-owner-table thead{display:none!important;}
  .sales-owner-table,.sales-owner-table tbody,.sales-owner-table tr,.sales-owner-table td{display:block!important;width:100%!important;box-sizing:border-box!important;}
  .sales-owner-table tr{padding:12px 14px!important;margin-bottom:10px!important;background:var(--card-bg,var(--white))!important;border:1px solid var(--card-border,var(--gray-200))!important;border-radius:8px!important;}
  .sales-owner-table td{padding:4px 0!important;border:none!important;display:flex!important;align-items:center;gap:8px!important;font-size:14px!important;}
  .sales-owner-table td::before{content:attr(data-label);flex:0 0 70px!important;font-weight:600;color:var(--text-secondary,var(--gray-500))!important;font-size:12px!important;text-align:right!important;padding-right:8px!important;}
  .sales-owner-table td:nth-child(1){display:none!important;}
  .sales-owner-table td:nth-child(2)::before{content:"负责人";}
  .sales-owner-table td:nth-child(3)::before{content:"项目";}
  .sales-owner-table td:nth-child(4)::before{content:"客户";}
  .sales-owner-table td:nth-child(5)::before{content:"预计成交";}
  .sales-owner-table td:nth-child(6)::before{content:"已成交";}
  .sales-owner-table td:nth-child(7)::before{content:"加权预测";}
}
@media(max-width:480px){
  .sales-owner-table tr{padding:10px 12px!important;}
  .sales-owner-table td{font-size:13px!important;padding:3px 0!important;}
  .sales-owner-table td::before{flex-basis:60px!important;font-size:11px!important;}
}
/* ── 产品线统计移动端适配 ── */
@media(max-width:768px){
  .sales-product-table thead{display:none!important;}
  .sales-product-table,.sales-product-table tbody,.sales-product-table tr,.sales-product-table td{display:block!important;width:100%!important;box-sizing:border-box!important;}
  .sales-product-table tr{padding:12px 14px!important;margin-bottom:10px!important;background:var(--card-bg,var(--white))!important;border:1px solid var(--card-border,var(--gray-200))!important;border-radius:8px!important;}
  .sales-product-table td{padding:4px 0!important;border:none!important;display:flex!important;align-items:center;gap:8px!important;font-size:14px!important;}
  .sales-product-table td::before{content:attr(data-label);flex:0 0 70px!important;font-weight:600;color:var(--text-secondary,var(--gray-500))!important;font-size:12px!important;text-align:right!important;padding-right:8px!important;}
  .sales-product-table td:nth-child(1){display:none!important;}
  .sales-product-table td:nth-child(2)::before{content:"产品线";}
  .sales-product-table td:nth-child(3)::before{content:"项目";}
  .sales-product-table td:nth-child(4)::before{content:"预计成交";}
  .sales-product-table td:nth-child(5)::before{content:"已成交";}
  .sales-product-table td:nth-child(6)::before{content:"加权预测";}
}
@media(max-width:480px){
  .sales-product-table tr{padding:10px 12px!important;}
  .sales-product-table td{font-size:13px!important;padding:3px 0!important;}
  .sales-product-table td::before{flex-basis:60px!important;font-size:11px!important;}
}
/* ── 逾期未交付订单移动端适配 ── */
@media(max-width:768px){
  .procurement-overdue-table thead{display:none!important;}
  .procurement-overdue-table,.procurement-overdue-table tbody,.procurement-overdue-table tr,.procurement-overdue-table td{display:block!important;width:100%!important;box-sizing:border-box!important;}
  .procurement-overdue-table tr{padding:12px 14px!important;margin-bottom:10px!important;background:var(--card-bg,var(--white))!important;border:1px solid var(--card-border,var(--gray-200))!important;border-radius:8px!important;}
  .procurement-overdue-table td{padding:4px 0!important;border:none!important;display:flex!important;align-items:center;gap:8px!important;font-size:14px!important;}
  .procurement-overdue-table td::before{content:attr(data-label);flex:0 0 70px!important;font-weight:600;color:var(--text-secondary,var(--gray-500))!important;font-size:12px!important;text-align:right!important;padding-right:8px!important;}
  .procurement-overdue-table td:nth-child(1){display:none!important;}
  .procurement-overdue-table td:nth-child(2)::before{content:"操作";}
  .procurement-overdue-table td:nth-child(3)::before{content:"订单/品名";}
  .procurement-overdue-table td:nth-child(4)::before{content:"供应商";}
  .procurement-overdue-table td:nth-child(5)::before{content:"交付信息";}
  .procurement-overdue-table td[data-label="操作"]{justify-content:flex-end!important;}
}
@media(max-width:480px){
  .procurement-overdue-table tr{padding:10px 12px!important;}
  .procurement-overdue-table td{font-size:13px!important;padding:3px 0!important;}
  .procurement-overdue-table td::before{flex-basis:60px!important;font-size:11px!important;}
}
/* ── 供应商采购排名移动端适配 ── */
@media(max-width:768px){
  .procurement-rank-table thead{display:none!important;}
  .procurement-rank-table,.procurement-rank-table tbody,.procurement-rank-table tr,.procurement-rank-table td{display:block!important;width:100%!important;box-sizing:border-box!important;}
  .procurement-rank-table tr{padding:12px 14px!important;margin-bottom:10px!important;background:var(--card-bg,var(--white))!important;border:1px solid var(--card-border,var(--gray-200))!important;border-radius:8px!important;}
  .procurement-rank-table td{padding:4px 0!important;border:none!important;display:flex!important;align-items:center;gap:8px!important;font-size:14px!important;}
  .procurement-rank-table td::before{content:attr(data-label);flex:0 0 70px!important;font-weight:600;color:var(--text-secondary,var(--gray-500))!important;font-size:12px!important;text-align:right!important;padding-right:8px!important;}
  .procurement-rank-table td:nth-child(1){display:none!important;}
  .procurement-rank-table td:nth-child(2)::before{content:"供应商";}
  .procurement-rank-table td:nth-child(3)::before{content:"订单数";}
  .procurement-rank-table td:nth-child(4)::before{content:"采购总额";}
}
@media(max-width:480px){
  .procurement-rank-table tr{padding:10px 12px!important;}
  .procurement-rank-table td{font-size:13px!important;padding:3px 0!important;}
  .procurement-rank-table td::before{flex-basis:60px!important;font-size:11px!important;}
}
/* ── 重点采购清单移动端适配 ── */
@media(max-width:768px){
  #homeProcurementFocusTable thead{display:none!important;}
  #homeProcurementFocusTable,#homeProcurementFocusTable tbody,#homeProcurementFocusTable tr,#homeProcurementFocusTable td{display:block!important;width:100%!important;box-sizing:border-box!important;}
  #homeProcurementFocusTable tr{padding:12px 14px!important;margin-bottom:10px!important;background:var(--card-bg,var(--white))!important;border:1px solid var(--card-border,var(--gray-200))!important;border-radius:8px!important;}
  #homeProcurementFocusTable td{padding:4px 0!important;border:none!important;display:flex!important;align-items:center;gap:8px!important;font-size:14px!important;}
  #homeProcurementFocusTable td::before{content:attr(data-label);flex:0 0 70px!important;font-weight:600;color:var(--text-secondary,var(--gray-500))!important;font-size:12px!important;text-align:right!important;padding-right:8px!important;}
  #homeProcurementFocusTable td:nth-child(1){display:none!important;}
  #homeProcurementFocusTable td:nth-child(2)::before{content:"操作";}
  #homeProcurementFocusTable td:nth-child(3)::before{content:"订单/项目";}
  #homeProcurementFocusTable td:nth-child(4)::before{content:"供应商";}
  #homeProcurementFocusTable td:nth-child(5)::before{content:"金额";}
  #homeProcurementFocusTable td:nth-child(6)::before{content:"状态/付款";}
  #homeProcurementFocusTable td[data-label="操作"]{justify-content:flex-end!important;}
}
@media(max-width:480px){
  #homeProcurementFocusTable tr{padding:10px 12px!important;}
  #homeProcurementFocusTable td{font-size:13px!important;padding:3px 0!important;}
  #homeProcurementFocusTable td::before{flex-basis:60px!important;font-size:11px!important;}
}

/* 重点采购清单：统一图标、状态色和信息层级 */
#dashboard .procurement-focus-card{
  overflow:hidden;
  padding:0!important;
  border:1px solid color-mix(in srgb,var(--cockpit-accent) 14%,var(--color-border) 86%)!important;
}
#dashboard .procurement-focus-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  padding:22px 24px 18px;
  border-bottom:1px solid var(--cockpit-line);
}
#dashboard .procurement-focus-title{display:flex;flex-direction:column;gap:3px;}
#dashboard .procurement-focus-overline{
  color:var(--cockpit-accent)!important;
  font-size:10px!important;
  font-weight:800;
  letter-spacing:.14em;
  line-height:1;
}
#dashboard .procurement-focus-heading h3{margin:0!important;font-size:19px;letter-spacing:0;color:var(--cockpit-ink)!important;}
#dashboard .procurement-focus-heading>span:last-child{font-size:12px;color:var(--cockpit-muted)!important;}
#dashboard .procurement-focus-wrap{max-height:none;border-radius:0;background:transparent;overflow-x:auto;}
#dashboard #homeProcurementFocusTable{min-width:760px;border-collapse:separate;border-spacing:0;}
#dashboard #homeProcurementFocusTable thead th{
  padding:12px 16px;
  background:color-mix(in srgb,var(--cockpit-soft) 52%,var(--white) 48%);
  color:var(--cockpit-muted);
  border-bottom:1px solid var(--cockpit-line);
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
  white-space:nowrap;
}
#dashboard #homeProcurementFocusTable thead th:first-child{padding-left:24px;width:54px;}
#dashboard #homeProcurementFocusTable thead th:nth-child(2){width:82px;}
#dashboard #homeProcurementFocusTable thead th:nth-child(3){min-width:270px;}
#dashboard #homeProcurementFocusTable thead th:nth-child(4){min-width:140px;}
#dashboard #homeProcurementFocusTable thead th:nth-child(5){width:130px;text-align:right;}
#dashboard #homeProcurementFocusTable thead th:last-child{padding-right:24px;min-width:150px;}
#dashboard #homeProcurementFocusTable tbody tr{transition:background .18s ease;}
#dashboard #homeProcurementFocusTable tbody tr:hover{background:color-mix(in srgb,var(--cockpit-soft) 58%,var(--white) 42%);}
#dashboard #homeProcurementFocusTable tbody td{padding:16px;border-bottom:1px solid color-mix(in srgb,var(--cockpit-line) 72%,transparent);vertical-align:middle;}
#dashboard #homeProcurementFocusTable tbody tr:last-child td{border-bottom:0;}
#dashboard #homeProcurementFocusTable tbody td:first-child{padding-left:24px;}
#dashboard #homeProcurementFocusTable tbody td:last-child{padding-right:24px;}
#dashboard .procurement-focus-rank span{
  display:inline-flex;align-items:center;justify-content:center;width:27px;height:27px;border-radius:8px;
  background:var(--cockpit-soft);color:var(--cockpit-accent);font-size:11px;font-weight:850;
}
#dashboard .procurement-focus-action-group{display:flex;align-items:center;gap:6px;}
#dashboard .procurement-focus-action-group .icon-btn{width:30px;height:30px;border-color:var(--cockpit-line);background:var(--white);color:var(--cockpit-muted);}
#dashboard .procurement-focus-action-group .icon-btn:hover{background:var(--cockpit-soft);border-color:color-mix(in srgb,var(--cockpit-accent) 32%,transparent);color:var(--cockpit-accent);}
#dashboard .procurement-focus-order-line{display:flex;align-items:center;gap:7px;min-width:0;}
#dashboard .procurement-focus-order-link{display:block;max-width:245px;overflow:hidden;color:var(--cockpit-ink);font-size:13px;font-weight:850;text-overflow:ellipsis;white-space:nowrap;}
#dashboard .procurement-focus-order-link:hover{color:var(--cockpit-accent);}
#dashboard .procurement-focus-order-dot{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--cockpit-muted);}
#dashboard .procurement-focus-project,#dashboard .procurement-focus-company{display:flex;align-items:center;gap:5px;margin-top:5px;color:var(--cockpit-muted);font-size:12px;line-height:1.3;}
#dashboard .procurement-focus-company{margin-top:2px;color:color-mix(in srgb,var(--cockpit-muted) 74%,transparent);font-size:11px;}
#dashboard .procurement-focus-project-mark{color:var(--cockpit-accent);font-size:17px;line-height:10px;}
#dashboard .procurement-focus-supplier-cell{display:flex;align-items:center;gap:8px;color:var(--cockpit-ink);font-size:12px;font-weight:700;}
#dashboard .procurement-focus-supplier-mark{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:9px;background:var(--cockpit-soft);color:var(--cockpit-accent);}
#dashboard .procurement-focus-amount-cell{text-align:right;}
#dashboard .procurement-focus-amount-cell strong{display:block;color:var(--cockpit-ink);font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap;}
#dashboard .procurement-focus-amount-cell small{display:block;margin-top:3px;color:var(--cockpit-muted);font-size:10px;}
#dashboard .procurement-focus-status-cell{white-space:nowrap;}
#dashboard .procurement-focus-status,#dashboard .procurement-focus-payment{display:flex;align-items:center;gap:6px;width:max-content;max-width:100%;font-size:11px;font-weight:800;}
#dashboard .procurement-focus-status i{width:6px;height:6px;border-radius:50%;background:currentColor;}
#dashboard .procurement-focus-payment{gap:7px;margin-top:6px;color:var(--cockpit-muted);font-weight:650;}
#dashboard .procurement-focus-payment b{color:var(--cockpit-muted);font-size:10px;font-weight:700;}
#dashboard .procurement-focus-tone-green{color:var(--raw-23845c)!important;}
#dashboard .procurement-focus-tone-orange{color:var(--raw-a56a11)!important;}
#dashboard .procurement-focus-tone-red{color:var(--raw-c4453f)!important;}
#dashboard .procurement-focus-tone-blue{color:var(--raw-39709b)!important;}
@media(max-width:768px){
  #dashboard .procurement-focus-heading{align-items:flex-start;flex-direction:column;gap:8px;padding:18px 16px 15px;}
  #dashboard .procurement-focus-wrap{overflow:visible;}
  #dashboard #homeProcurementFocusTable{min-width:0;}
  #dashboard #homeProcurementFocusTable tbody{display:block!important;}
  #dashboard #homeProcurementFocusTable tbody tr{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto;
    gap:0 12px;
    padding:14px!important;
    margin:0 12px 10px;
    background:var(--white);
    border:1px solid var(--cockpit-line);
    border-radius:12px;
  }
  #dashboard #homeProcurementFocusTable tbody tr:last-child{margin-bottom:0;}
  #dashboard #homeProcurementFocusTable tbody td{
    position:relative;
    display:flex!important;
    align-items:center;
    min-width:0;
    min-height:28px;
    padding:4px 0 4px 76px!important;
    border:0!important;
    font-size:13px!important;
  }
  #dashboard #homeProcurementFocusTable tbody td::before{
    position:absolute;
    left:0;
    top:7px;
    width:66px;
    flex:none!important;
    padding:0!important;
    color:var(--cockpit-muted)!important;
    font-size:11px!important;
    font-weight:750;
    line-height:1.35;
    text-align:left!important;
  }
  #dashboard #homeProcurementFocusTable td:nth-child(1){display:none!important;}
  #dashboard #homeProcurementFocusTable td:nth-child(2){grid-column:2;grid-row:1;justify-content:flex-end;padding:0!important;}
  #dashboard #homeProcurementFocusTable td:nth-child(2)::before{display:none!important;}
  #dashboard #homeProcurementFocusTable td:nth-child(3){grid-column:1 / -1;grid-row:2;align-items:flex-start;}
  #dashboard #homeProcurementFocusTable td:nth-child(3)::before{content:"订单 / 项目";}
  #dashboard #homeProcurementFocusTable td:nth-child(4){grid-column:1 / -1;grid-row:3;}
  #dashboard #homeProcurementFocusTable td:nth-child(4)::before{content:"供应商";}
  #dashboard #homeProcurementFocusTable td:nth-child(5){grid-column:1;grid-row:4;text-align:left;}
  #dashboard #homeProcurementFocusTable td:nth-child(5)::before{content:"订单金额";}
  #dashboard #homeProcurementFocusTable td:nth-child(6){grid-column:2;grid-row:4;justify-content:flex-end;padding-left:0!important;}
  #dashboard #homeProcurementFocusTable td:nth-child(6)::before{display:none!important;}
  #dashboard .procurement-focus-action-group{gap:5px;}
  #dashboard .procurement-focus-action-group .icon-btn{width:29px;height:29px;}
  #dashboard .procurement-focus-order-cell{padding-top:7px!important;padding-bottom:7px!important;}
  #dashboard .procurement-focus-order-line{max-width:100%;}
  #dashboard .procurement-focus-project{max-width:100%;}
  #dashboard .procurement-focus-project,#dashboard .procurement-focus-company{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  #dashboard .procurement-focus-supplier-cell{overflow:hidden;white-space:nowrap;}
  #dashboard .procurement-focus-supplier-cell>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  #dashboard .procurement-focus-amount-cell{align-items:flex-start!important;}
  #dashboard .procurement-focus-amount-cell small{display:none;}
  #dashboard .procurement-focus-order-link{max-width:calc(100vw - 150px);}
  #dashboard .procurement-focus-status-cell{align-items:flex-end!important;}
  #dashboard .procurement-focus-status,#dashboard .procurement-focus-payment{font-size:11px;}
}

/* Top-layer operation dialogs (2026-07-10)
   Confirm/alert/prompt dialogs must stay above centered drawers and drawer masks. */
html body .crm-modal-overlay,
html body .crm-modal-overlay.open{
  position:fixed!important;
  inset:0!important;
  z-index:2147483646!important;
  isolation:isolate!important;
}
/* 全局确认/提示框必须高于同级的业务弹窗（如集团财务附件弹窗、公司授权弹窗），
   否则按 DOM 顺序会被后插入 body 的业务弹窗遮挡，导致确认按钮无法点击。 */
html body #crmModal,
html body #crmModal.crm-modal-overlay.open{
  z-index:2147483647!important;
}
html body #qualityPaymentDetailModal.crm-modal-overlay,
html body #qualityPaymentDetailModal.crm-modal-overlay.open{
  z-index:2147483500!important;
}
html body #qualityPaymentApplicationModal.crm-modal-overlay,
html body #qualityPaymentApplicationModal.crm-modal-overlay.open{
  z-index:2147483600!important;
}
html body .crm-modal-overlay .crm-modal,
html body #crmModal .crm-modal{
  position:relative!important;
  z-index:2147483647!important;
  background:var(--card-bg,var(--white))!important;
  opacity:1;
}
html body .toast,
html body #toast,
html body .toast-container{
  z-index:91000!important;
}

#sales-contracts .sales-contract-kpi-overview.is-hidden{display:none!important;}

/* 2026-07-11 quality deposit release lock */
.quality-deposit-edit-grid input.is-readonly,
.quality-deposit-edit-grid select.is-readonly{
  background:var(--color-primary-soft,var(--raw-eef8f2));
  color:var(--color-muted,var(--raw-667085));
  cursor:not-allowed;
}
.quality-deposit-release-history{
  margin-top:14px;
  padding:12px;
  border:1px dashed var(--color-border,var(--raw-d7e5dc));
  border-radius:12px;
  background:var(--color-surface,var(--white));
}
.quality-deposit-release-history h4{margin:0 0 8px;color:var(--color-primary,var(--raw-16713b));font-size:14px}
.quality-deposit-release-line{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:6px 0;color:var(--color-text,var(--gray-800));font-size:13px}
.quality-deposit-release-line + .quality-deposit-release-line{border-top:1px solid var(--color-border,var(--raw-d7e5dc))}

/* 2026-07-11 quality deposit collection ledger */
.quality-deposit-ledger-card{
  margin-top:14px;
  padding:14px;
  border:1px solid var(--color-border,var(--raw-d7e5dc));
  border-radius:14px;
  background:var(--color-surface,var(--white));
}
.quality-deposit-ledger-card h4{
  margin:0 0 10px;
  color:var(--color-primary,var(--raw-16713b));
  font-size:14px;
}
.quality-deposit-ledger-row{
  display:grid;
  grid-template-columns:140px 140px 150px minmax(180px,1fr);
  gap:10px;
  align-items:end;
}
.quality-deposit-ledger-row label{
  display:flex;
  flex-direction:column;
  gap:6px;
  color:var(--color-text,var(--gray-800));
  font-weight:700;
  font-size:13px;
}
.quality-deposit-ledger-row label.wide{min-width:0;}
.quality-deposit-ledger-row input,
.quality-deposit-ledger-row select{
  border:1px solid var(--color-border,var(--raw-d7e5dc));
  border-radius:10px;
  padding:10px 12px;
  background:var(--color-surface,var(--white));
  color:var(--color-text,var(--gray-800));
}
.quality-deposit-ledger-row input:focus,
.quality-deposit-ledger-row select:focus{
  outline:none;
  border-color:var(--color-primary,var(--raw-16713b));
  box-shadow:0 0 0 3px var(--color-primary-soft,var(--raw-eef8f2));
}
.quality-deposit-collection-history,
.quality-deposit-release-history{margin-top:10px;}
.quality-deposit-ledger-line{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  padding:7px 0;
  color:var(--color-text,var(--gray-800));
  font-size:13px;
  border-top:1px solid var(--color-border,var(--raw-d7e5dc));
}
.quality-deposit-ledger-line:first-child{border-top:0;}
@media(max-width:900px){
  .quality-deposit-ledger-row{grid-template-columns:1fr 1fr;}
}
@media(max-width:560px){
  .quality-deposit-ledger-row{grid-template-columns:1fr;}
}

/* Procurement order payment panel: theme-aware financial summary */
#poPaymentInfo{
  margin:16px 0 18px!important;
  padding:18px 20px 16px!important;
  background:linear-gradient(135deg,var(--color-surface,var(--white)),color-mix(in srgb,var(--color-primary-faint) 70%,var(--white) 30%))!important;
  border:1px solid var(--color-primary-border)!important;
  border-left:4px solid var(--color-primary)!important;
  border-radius:16px!important;
  box-shadow:0 14px 34px var(--color-shadow)!important;
}
#poPaymentInfo .payment-panel-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding-bottom:14px;
  border-bottom:1px solid var(--color-primary-border);
}
#poPaymentInfo .payment-panel-kicker{
  display:block;
  color:var(--color-primary)!important;
  font-size:10px;
  font-weight:850;
  letter-spacing:.12em;
  line-height:1.2;
}
#poPaymentInfo h4{
  display:flex;
  align-items:center;
  gap:8px;
  margin:4px 0 0!important;
  color:var(--color-primary-text)!important;
  font-size:17px!important;
  font-weight:850!important;
}
#poPaymentInfo h4::before{
  content:"";
  width:4px;
  height:18px;
  border-radius:3px;
  background:linear-gradient(180deg,var(--color-primary-hover),var(--color-primary));
}
#poPaymentInfo .payment-panel-caption{
  padding:5px 9px;
  border:1px solid var(--color-primary-border-strong);
  border-radius:999px;
  background:var(--color-primary-soft);
  color:var(--color-primary-text);
  font-size:11px;
  font-weight:750;
  white-space:nowrap;
}
#poPaymentInfo .payment-summary-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin:16px 0 12px;
}
#poPaymentInfo .payment-stat{
  min-height:76px;
  padding:11px 12px;
  gap:7px;
  border:1px solid var(--color-primary-border);
  border-radius:12px;
  background:color-mix(in srgb,var(--color-surface) 88%,var(--color-primary-soft) 12%);
}
#poPaymentInfo .payment-stat-label{
  color:var(--color-text-secondary)!important;
  font-size:11px;
  font-weight:700;
}
#poPaymentInfo .payment-stat-value{
  color:var(--color-primary-text)!important;
  font-size:18px!important;
  font-weight:850!important;
  line-height:1.1;
  font-variant-numeric:tabular-nums;
}
#poPaymentInfo .payment-stat-value.green{color:var(--color-success-text)!important}
#poPaymentInfo .payment-stat-value.orange{color:var(--color-warning-text)!important}
#poPaymentInfo .payment-stat-value.red{color:var(--color-danger-text)!important}
#poPaymentInfo .payment-progress-bar{
  height:8px;
  margin-top:2px;
  background:var(--color-primary-soft)!important;
  border-radius:999px;
}
#poPaymentInfo .payment-progress-fill{
  background:linear-gradient(90deg,var(--color-primary),var(--color-primary-hover))!important;
  border-radius:999px;
}
#poPaymentInfo .payment-percent{
  margin:0;
  color:var(--color-primary-text)!important;
  font-size:11px;
  font-weight:800;
}
#poPaymentInfo .payment-actions{
  display:flex;
  justify-content:flex-end;
  margin:0;
  padding:0 0 12px;
  border-bottom:1px solid var(--color-primary-border);
}
#poPaymentInfo .payment-actions .btn{min-height:32px!important}
#poPaymentInfo .payment-subsection-heading{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin:13px 0 8px;
}
#poPaymentInfo .payment-subsection-heading span{
  color:var(--color-primary-text);
  font-size:12px;
  font-weight:850;
}
#poPaymentInfo .payment-subsection-heading em{
  color:var(--color-text-muted);
  font-size:11px;
  font-style:normal;
}
#poPaymentInfo .payment-applications-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:0;
}
#poPaymentInfo .payment-pa-item{
  display:grid!important;
  grid-template-columns:minmax(170px,1.25fr) minmax(88px,.6fr) auto auto;
  align-items:center;
  gap:10px;
  margin:0!important;
  padding:9px 11px!important;
  border:1px solid var(--color-primary-border)!important;
  border-radius:10px!important;
  background:var(--color-surface)!important;
}
#poPaymentInfo .payment-pa-item.pa-draft{
  background:color-mix(in srgb,var(--color-warning-soft) 38%,var(--color-surface) 62%)!important;
}
#poPaymentInfo .payment-pa-item .pa-no{
  min-width:0;
  overflow:hidden;
  color:var(--color-primary-text)!important;
  font-size:12px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#poPaymentInfo .payment-pa-item .pa-amount{
  min-width:0;
  margin:0;
  color:var(--color-primary-text)!important;
  font-size:13px;
  font-weight:800;
  text-align:right;
}
#poPaymentInfo .payment-pa-item .pa-status{
  justify-self:start;
  min-width:0;
  padding:4px 8px!important;
  border:1px solid var(--color-primary-border);
  border-radius:999px!important;
  font-size:11px;
  font-weight:800;
}
#poPaymentInfo .payment-pa-item .pa-actions{
  margin:0;
}
#poPaymentInfo .payment-records-section{
  margin-top:0;
  padding-top:1px;
  border-top:1px dashed var(--color-primary-border);
}
#poPaymentInfo .payment-record-item{
  display:grid;
  grid-template-columns:30px 92px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  margin:0 0 5px;
  padding:8px 11px;
  border:1px solid var(--color-primary-border);
  border-radius:9px;
  background:color-mix(in srgb,var(--color-primary-soft) 26%,var(--color-surface) 74%);
  font-size:12px;
}
#poPaymentInfo .payment-record-item .pr-no{color:var(--color-text-muted);font-size:11px}
#poPaymentInfo .payment-record-item .pr-date,
#poPaymentInfo .payment-record-item .pr-method{color:var(--color-text-secondary);font-size:11px}
#poPaymentInfo .payment-record-item .pr-amount{color:var(--color-success-text);font-weight:850}
@media(max-width:720px){
  #poPaymentInfo{padding:16px 14px 13px!important}
  #poPaymentInfo .payment-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #poPaymentInfo .payment-pa-item{grid-template-columns:minmax(0,1fr) auto;gap:7px}
  #poPaymentInfo .payment-pa-item .pa-amount{grid-column:2;grid-row:1;text-align:right}
  #poPaymentInfo .payment-pa-item .pa-status{grid-column:1;grid-row:2;justify-self:start}
  #poPaymentInfo .payment-pa-item .pa-actions{grid-column:2;grid-row:2;justify-self:end}
  #poPaymentInfo .payment-record-item{grid-template-columns:28px 82px minmax(0,1fr) auto;gap:7px}
}
@media(max-width:460px){
  #poPaymentInfo .payment-panel-heading{flex-direction:column;gap:8px}
  #poPaymentInfo .payment-panel-caption{align-self:flex-start}
  #poPaymentInfo .payment-summary-grid{gap:7px}
  #poPaymentInfo .payment-stat{min-height:68px;padding:9px}
  #poPaymentInfo .payment-stat-value{font-size:16px!important}
  #poPaymentInfo .payment-record-item{grid-template-columns:24px 1fr auto}
  #poPaymentInfo .payment-record-item .pr-method{grid-column:2}
}

/* 项目编辑 - 成本费用 */
.project-cost-edit-panel{
  padding:18px;
  border:1px solid var(--ui-accent-line, var(--raw-cfe3d8));
  border-radius:14px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--ui-accent-soft, var(--raw-edf8f1)) 48%, var(--white) 52%), var(--white));
}
.project-cost-edit-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--ui-accent-line, var(--raw-cfe3d8))}
.project-cost-edit-head h5{margin:0;color:var(--ui-accent-text, var(--raw-185f42));font-size:17px}
.project-cost-edit-head p{margin:6px 0 0;color:var(--color-text-secondary);font-size:13px;line-height:1.6}
.project-cost-edit-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:14px 0}
.project-cost-edit-kpis span{display:flex;flex-direction:column;gap:5px;padding:11px 12px;border:1px solid var(--ui-accent-line, var(--raw-cfe3d8));border-radius:10px;background:var(--white);color:var(--color-text-secondary);font-size:12px}
.project-cost-edit-kpis strong{color:var(--ui-accent-text, var(--raw-185f42));font-size:17px;font-variant-numeric:tabular-nums}
.project-cost-edit-list{display:flex;flex-direction:column;gap:8px}
.project-cost-tabs{display:flex;gap:8px;margin:16px 0 10px;padding:6px;background:var(--surface-subtle,var(--raw-f4f8f6));border:1px solid var(--ui-accent-line,var(--raw-cfe3d8));border-radius:8px;width:max-content;max-width:100%;overflow:auto}
.project-cost-tabs button{border:0;background:transparent;color:var(--color-text-secondary);padding:8px 14px;border-radius:6px;font:inherit;font-weight:700;white-space:nowrap;cursor:pointer}
.project-cost-tabs button.active{background:var(--white);color:var(--ui-accent-text,var(--raw-185f42));box-shadow:0 1px 4px color-mix(in srgb, var(--raw-0f4430) 12%, transparent)}
.project-cost-summary-grid,.contract-cost-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}
.project-cost-summary-grid span,.contract-cost-summary-grid span{display:flex;flex-direction:column;gap:5px;padding:12px;border:1px solid var(--ui-accent-line,var(--raw-cfe3d8));border-radius:7px;background:var(--raw-fbfdfc);color:var(--color-text-secondary);font-size:13px}
.project-cost-summary-grid strong,.contract-cost-summary-grid strong{color:var(--color-text-primary);font-size:16px}
.contract-cost-summary-card{border-left:4px solid var(--ui-accent-text,var(--raw-185f42))}
.dashboard-project-cost-summary{margin:24px 0;padding:20px;border:1px solid var(--raw-cfe1d8);border-radius:8px;background:var(--white);box-shadow:0 8px 24px color-mix(in srgb, var(--raw-154733) 6%, transparent)}
.dashboard-project-cost-summary-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--raw-e1ece6)}.dashboard-project-cost-summary-head span{font-size:12px;font-weight:800;letter-spacing:1.2px;color:var(--ui-accent-text,var(--raw-185f42))}.dashboard-project-cost-summary-head h3{margin:5px 0 0;font-size:22px}.dashboard-project-cost-summary-head p{margin:0;color:var(--color-text-secondary)}
.dashboard-project-cost-summary-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:16px}.dashboard-project-cost-summary-grid>div{padding:14px;border-left:3px solid var(--raw-d7e7df);background:var(--raw-f8fbf9)}.dashboard-project-cost-summary-grid span{display:block;color:var(--color-text-secondary);font-size:13px}.dashboard-project-cost-summary-grid strong{display:block;margin-top:7px;font-size:20px;color:var(--color-text-primary)}
.project-cost-edit-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px;border:1px solid var(--ui-accent-line, var(--raw-cfe3d8));border-radius:10px;background:var(--white)}
.project-cost-edit-main{display:flex;flex:1;min-width:0;flex-direction:column;gap:4px}
.project-cost-edit-main strong{color:var(--color-text-primary);font-size:14px}
.project-cost-edit-main span{overflow:hidden;color:var(--color-text-secondary);font-size:12px;text-overflow:ellipsis;white-space:nowrap}
.project-cost-edit-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}
.project-cost-edit-actions b{color:var(--ui-accent-text, var(--raw-185f42));font-size:14px;white-space:nowrap;font-variant-numeric:tabular-nums}
.project-cost-edit-empty{padding:28px 18px;border:1px dashed var(--ui-accent-line, var(--raw-cfe3d8));border-radius:12px;background:var(--ui-accent-soft, var(--raw-edf8f1));color:var(--color-text-secondary);text-align:center}
.project-cost-edit-empty strong{display:block;color:var(--ui-accent-text, var(--raw-185f42));font-size:15px}
.project-cost-edit-empty p{margin:7px 0 0;font-size:13px}

/* 成本费用 KPI：PC 端以高密度数据条呈现，移动端再逐级折叠。 */
.project-cost-edit-panel{
  --cost-ink:var(--ui-accent-text,#185f42);
  --cost-line:var(--ui-accent-line,#cfe3d8);
  --cost-soft:var(--ui-accent-soft,#edf8f1);
  padding:20px;
  border-radius:18px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--cost-soft) 38%,var(--white) 62%),var(--white) 72%);
  box-shadow:0 14px 34px color-mix(in srgb, var(--raw-154733) 7%, transparent);
}
.project-form-section-body.project-cost-section-body{
  display:block;
  padding:20px;
}
.project-cost-section-body > .project-cost-edit-panel,
.project-cost-section-body > .project-cost-edit-empty{
  width:100%;
  box-sizing:border-box;
}
.project-cost-edit-head{
  align-items:center;
  min-height:46px;
  padding-bottom:16px;
}
.project-cost-edit-head h5{font-size:18px;letter-spacing:.01em}
.project-cost-edit-head p{max-width:760px;margin-top:5px;font-size:12px}
.project-cost-edit-head .btn{min-height:40px;min-width:104px;border-radius:12px;font-weight:800}
.project-cost-edit-kpis{
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
  margin:16px 0 14px;
}
.project-cost-kpi{
  position:relative;
  display:grid;
  grid-template-rows:auto auto auto;
  gap:5px;
  min-width:0;
  min-height:96px;
  padding:13px 14px 12px 16px;
  overflow:hidden;
  border:1px solid var(--cost-line);
  border-radius:12px;
  background:color-mix(in srgb, var(--white) 90%, transparent);
  color:var(--color-text-secondary);
}
.project-cost-kpi::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:var(--kpi-accent,var(--ui-accent,var(--raw-24805d)));
}
.project-cost-kpi span{padding:0;border:0;background:none;color:var(--color-text-secondary);font-size:12px;font-weight:750}
.project-cost-kpi strong{
  min-width:0;
  color:var(--kpi-value,var(--cost-ink));
  font-size:17px;
  line-height:1.2;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.project-cost-kpi small{color:var(--color-text-secondary);font-size:11px;line-height:1.2;white-space:nowrap}
.project-cost-kpi-forecast{--kpi-accent:#2c8a68;--kpi-value:#185f42}
.project-cost-kpi-actual{--kpi-accent:#2563a5;--kpi-value:#1d4f80}
.project-cost-kpi-pending{--kpi-accent:#c58b26;--kpi-value:#8b641b}
.project-cost-kpi-outstanding{--kpi-accent:#7a5bb7;--kpi-value:#5d438f}
.project-cost-kpi-margin{--kpi-accent:#16846f;--kpi-value:#126553}
.project-cost-tabs{
  display:flex;
  width:100%;
  max-width:none;
  margin:14px 0 12px;
  padding:4px;
  gap:4px;
  border-radius:10px;
  background:color-mix(in srgb,var(--cost-soft) 52%,var(--white) 48%);
}
.project-cost-tabs button{flex:1 1 0;min-height:38px;padding:7px 12px;border-radius:8px;font-size:13px}
.project-cost-tabs button.active{box-shadow:0 4px 12px color-mix(in srgb, var(--raw-0f4430) 12%, transparent)}
.project-form-tab-panels{padding-bottom:90px}
@media(min-width:721px) and (max-width:1180px){
  .project-cost-edit-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .project-cost-kpi-margin{grid-column:span 2}
}
@media(max-width:720px){
  .project-cost-edit-panel{padding:14px}
  .project-cost-edit-head{flex-direction:column}
  .project-cost-edit-kpis{grid-template-columns:1fr;gap:7px}
  .project-cost-kpi{min-height:82px;padding:11px 12px 10px 14px}
  .project-cost-kpi strong{font-size:16px}
  .project-cost-edit-row{align-items:flex-start;flex-direction:column}
  .project-cost-edit-actions{justify-content:flex-start}
  .project-cost-edit-main span{white-space:normal}
  .project-cost-summary-grid,.contract-cost-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dashboard-project-cost-summary-head{align-items:flex-start;flex-direction:column}
  .dashboard-project-cost-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* Dropdown refinement pass v2: page-level filter alignment */
#projects .filters,
#sales-contracts .filters,
.customer-manage-filters,
.vendor-manage-filters{
  align-items:end!important;
}
#projects .filters,
#sales-contracts .filters{
  grid-auto-rows:minmax(42px,auto);
}
#projects .filters input,
#projects .filters select,
#sales-contracts .filters input,
#sales-contracts .filters select,
.customer-manage-filters input,
.customer-manage-filters select,
.vendor-manage-filters input,
.vendor-manage-filters select{
  width:100%;
  min-width:0;
}
#projects .filters label,
#sales-contracts .filters label,
.customer-manage-filters label,
.vendor-manage-filters label{
  display:grid;
  gap:6px;
  min-width:0;
}
#projects .filters button,
#sales-contracts .filters button,
.customer-manage-filters button,
.vendor-manage-filters button{
  min-height:42px;
  white-space:nowrap;
}
#projects .filters .search-select,
#sales-contracts .filters .search-select,
.customer-manage-filters .search-select,
.vendor-manage-filters .search-select{
  width:100%;
  min-width:0;
}
#projects .filters .search-select-dropdown,
#sales-contracts .filters .search-select-dropdown,
.customer-manage-filters .search-select-dropdown,
.vendor-manage-filters .search-select-dropdown{
  border-radius:12px;
  box-shadow:0 16px 34px color-mix(in srgb, var(--gray-900) 12%, transparent);
}
#checkin .filters,
#checkin .checkin-filters,
#checkin .card-body .filters{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  align-items:end;
}
#checkin .filter-item{
  min-width:0;
}
#checkin .filter-item label{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#checkin .filter-item input,
#checkin .filter-item select,
#checkin .filter-item .btn{
  min-height:42px!important;
}
#checkin .filter-item .btn{
  width:100%;
}
@media (max-width:1200px){
  #checkin .filters,
  #checkin .checkin-filters,
  #checkin .card-body .filters{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:760px){
  #checkin .filters,
  #checkin .checkin-filters,
  #checkin .card-body .filters{grid-template-columns:1fr;}
}
#salesInvoiceDrawer .sales-invoice-grid-3,
#financecenter .sales-invoice-grid-3{
  align-items:start;
}
#salesInvoiceDrawer .sales-invoice-field,
#financecenter .sales-invoice-field{
  min-width:0;
}
#salesInvoiceDrawer .sales-invoice-field label,
#financecenter .sales-invoice-field label{
  display:grid;
  gap:6px;
}
#salesInvoiceDrawer .search-select-dropdown,
#financecenter .search-select-dropdown{
  border-radius:12px;
}


/* Project list compact density: keep more records visible without changing controls. */
#projects > .card{padding:12px}
#projects .section-title{gap:8px;padding:4px 2px 10px;margin-bottom:8px}
#projects #newBtn{min-height:38px;padding:0 16px;border-radius:12px}
#projects .total-count-badge{min-height:30px;padding:0 12px}
#projects .filters{gap:5px;padding:6px;margin-bottom:8px;border-radius:16px}
#projects .filters input,#projects .filters select,#projects .filters button{min-height:32px;border-radius:9px;font-size:12px}
#projects .project-table-wrap{max-height:calc(100vh - 300px);border-radius:16px}
#projects .project-table th{padding:9px 8px}
#projects .project-table td{padding:9px 8px;line-height:1.4}
@media (max-width:820px){
  #projects > .card{padding:10px}
  #projects .section-title{padding:2px 0 8px;margin-bottom:6px}
  #projects .filters{padding:5px;margin-bottom:6px}
  #projects .project-table-wrap{max-height:calc(100vh - 250px)}
}


/* Project header actions: align project controls with the page title. */
#projectHeaderActions{display:none;align-items:center;gap:8px;margin-left:auto}
body[data-active-page="projects"] #projectHeaderActions{display:flex}
#projectHeaderActions #newBtn{min-height:36px;padding:0 14px;border-radius:11px}
#projectHeaderActions .total-count-badge{min-height:30px;padding:0 12px}
@media (max-width:820px){
  #projectHeaderActions{width:100%;margin-left:0}
  body[data-active-page="projects"] #projectHeaderActions{display:flex}
  #projectHeaderActions #newBtn{flex:1}
}


/* Project filters: six-column desktop rhythm keeps all controls within two rows. */
#projects .filters{grid-template-columns:minmax(220px,1.8fr) repeat(5,minmax(110px,1fr));}
@media (max-width:1200px) and (min-width:821px){
  #projects .filters{grid-template-columns:repeat(6,minmax(0,1fr));}
  #projects #searchText{grid-column:span 2;}
}


/* Dense list controls: reclaim vertical space while keeping touch-safe mobile controls. */
:root{--list-filter-height:36px;--list-filter-gap:6px;--list-filter-pad:6px}
.page>.card>.filters,.page>.filters,.customer-manage-card>.filters,.vendor-manage-card>.filters,.task-list-panel>.filters{gap:var(--list-filter-gap);padding:var(--list-filter-pad);margin-bottom:8px;border-radius:12px}
.page>.card>.filters input,.page>.card>.filters select,.page>.card>.filters button,.page>.filters input,.page>.filters select,.page>.filters button,.customer-manage-card>.filters input,.customer-manage-card>.filters select,.customer-manage-card>.filters button,.vendor-manage-card>.filters input,.vendor-manage-card>.filters select,.vendor-manage-card>.filters button,.task-list-panel>.filters input,.task-list-panel>.filters select,.task-list-panel>.filters button{min-height:var(--list-filter-height)}
#quotes .filters,#sales-contracts .sales-contract-panel[data-sales-contract-panel="contracts"] .filters,#sales-contracts .sales-contract-panel[data-sales-contract-panel="invoices"] .filters,#channelpartners .filters,#suppliers .filters,#vendors .filters,#taskcenter .task-filters,#purchase-contracts .po-filter-main,#payment-applications .po-filter-main,#goods-receipts .po-filter-main{grid-template-columns:minmax(220px,2fr) repeat(2,minmax(120px,1fr)) auto}
#customers360 .customer-filters{grid-template-columns:minmax(260px,2fr) repeat(4,minmax(118px,1fr)) auto;row-gap:6px}
#filelibrary .file-filters{grid-template-columns:minmax(260px,2fr) repeat(2,minmax(120px,1fr)) repeat(2,112px) auto;row-gap:6px}
#purchase-requests .filters{grid-template-columns:minmax(260px,2fr) repeat(2,minmax(120px,1fr)) auto auto;row-gap:6px}
#purchase-orders .po-filter-main{grid-template-columns:minmax(260px,2fr) repeat(4,minmax(118px,1fr));row-gap:6px}
#financecenter .finance-saas-page .filters{padding:6px;gap:6px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
#financecenter .finance-saas-page .filters input,#financecenter .finance-saas-page .filters select,#financecenter .finance-saas-page .filters .btn{min-height:34px}
#gf-transactions .gf-tx-filters{gap:6px}
.po-filter-panel{gap:6px;margin-bottom:8px}.po-filter-row{gap:6px}.po-filter-project>.select,.po-filter-project>select,.po-filter-project>.btn{height:36px;min-height:36px}.po-filter-project .project-picker{padding:6px;gap:6px}
@media(max-width:1200px) and (min-width:769px){
#customers360 .customer-filters,#filelibrary .file-filters,#purchase-requests .filters,#purchase-orders .po-filter-main{grid-template-columns:repeat(4,minmax(0,1fr))}
#customers360 .customer-filters input,#filelibrary .file-filters input:first-child,#purchase-requests .filters input,#purchase-orders .po-filter-main input{grid-column:span 2}
#financecenter .finance-saas-page .filters{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:768px){
.page>.card>.filters input,.page>.card>.filters select,.page>.card>.filters button,.page>.filters input,.page>.filters select,.page>.filters button,.customer-manage-card>.filters input,.customer-manage-card>.filters select,.customer-manage-card>.filters button,.vendor-manage-card>.filters input,.vendor-manage-card>.filters select,.vendor-manage-card>.filters button,.task-list-panel>.filters input,.task-list-panel>.filters select,.task-list-panel>.filters button,#financecenter .finance-saas-page .filters input,#financecenter .finance-saas-page .filters select,#financecenter .finance-saas-page .filters .btn{min-height:44px}
}

/* Final responsive guardrails for the compact overrides. */
#projects .filters input,#projects .filters select,#projects .filters button{min-height:32px}
@media(max-width:768px){
  #quotes .filters,#sales-contracts .sales-contract-panel[data-sales-contract-panel="contracts"] .filters,#sales-contracts .sales-contract-panel[data-sales-contract-panel="invoices"] .filters,#channelpartners .filters,#suppliers .filters,#vendors .filters,#taskcenter .task-filters,#purchase-contracts .po-filter-main,#payment-applications .po-filter-main,#goods-receipts .po-filter-main,#customers360 .customer-filters,#filelibrary .file-filters,#purchase-requests .filters,#purchase-orders .po-filter-main,#financecenter .finance-saas-page .filters{grid-template-columns:1fr}
}


/* Project filters: override desktop six-column density on phones. */
@media(max-width:768px){
  #projects .filters{
    grid-template-columns:1fr!important;
    width:100%;
    max-width:100%;
    overflow:visible;
  }
  #projects .filters>*{
    width:100%;
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
  }
  #projects .filters input,
  #projects .filters select,
  #projects .filters button{
    min-height:44px;
  }
}


/* ==========================================================================
   Card system v2: compact, theme-aware, shared across CRM surfaces.
   Keep business variants (income/expense/risk/priority) semantic; normalize
   dimensions and elevation here so page-specific rules do not create tall cards.
   ========================================================================== */
:root{
  --card-system-radius:12px;
  --card-system-padding:16px;
  --card-system-gap:12px;
  --card-system-shadow:var(--zway-shadow-sm,0 6px 16px rgba(16,38,28,.06));
  --card-system-shadow-hover:var(--zway-shadow-md,0 10px 24px rgba(16,38,28,.10));
  --panel-radius:12px;
  --chart-radius:12px;
}

.card,
.module-card,
.chart-card,
.dashboard-trend-card,
.risk-card,
.key-metric,
.zway-card,
.dashboard-hero-panel,
.followup-kpi,
.po-payment-info,
.payment-pa-item,
.payment-record-item,
.checkin-data-panel,
.task-queue-panel,
.task-insight-panel,
.task-list-panel,
.task-stale-panel,
.stale-project-card,
.procurement-focus-card,
.procurement-overdue-card,
.procurement-supplier-rank-card,
.customer-manage-card,
.vendor-manage-card,
.sales-invoice-issued-card,
.sc-payment-card,
.sc-quality-card,
.quality-deposit-p2-card,
.drill-card,
.bullet-card,
.funnel-card,
.kpi-paused-lost-card,
.project-section-card,
.sales-contract-approval-card,
.sales-invoice-card,
.procurement-home-card,
.procurement-chart-card,
.procurement-card,
.finance-card,
.customer-card,
.vendor-card,
.gf-card,
.gf-closing-card{
  border-radius:var(--card-system-radius)!important;
  border-width:1px!important;
  box-shadow:var(--card-system-shadow)!important;
}

.card:hover,
.module-card:hover,
.chart-card:hover,
.dashboard-trend-card:hover,
.risk-card:hover,
.key-metric:hover,
.zway-card:hover,
.dashboard-hero-panel:hover,
.followup-kpi:hover,
.po-payment-info:hover,
.payment-pa-item:hover,
.payment-record-item:hover,
.checkin-data-panel:hover,
.task-queue-panel:hover,
.task-insight-panel:hover,
.task-list-panel:hover,
.task-stale-panel:hover,
.stale-project-card:hover,
.procurement-focus-card:hover,
.procurement-overdue-card:hover,
.procurement-supplier-rank-card:hover,
.customer-manage-card:hover,
.vendor-manage-card:hover,
.sales-invoice-issued-card:hover,
.sc-payment-card:hover,
.sc-quality-card:hover,
.quality-deposit-p2-card:hover,
.drill-card:hover,
.bullet-card:hover,
.funnel-card:hover,
.kpi-paused-lost-card:hover,
.project-section-card:hover,
.sales-contract-approval-card:hover,
.sales-invoice-card:hover,
.procurement-home-card:hover,
.procurement-chart-card:hover,
.procurement-card:hover,
.finance-card:hover,
.customer-card:hover,
.vendor-card:hover,
.gf-card:hover,
.gf-closing-card:hover{
  box-shadow:var(--card-system-shadow-hover)!important;
}

/* Base content cards: keep headers and bodies compact without changing markup. */
.module-card,
.chart-card,
.dashboard-trend-card,
.risk-card,
.key-metric,
.project-section-card,
.sales-contract-approval-card,
.sales-invoice-card,
.procurement-home-card,
.procurement-chart-card,
.procurement-card,
.finance-card,
.customer-card,
.vendor-card{
  padding:var(--card-system-padding)!important;
}

/* KPI family: compact vertical rhythm, with enough room for labels and values. */
.kpi{
  min-height:82px!important;
  padding:12px 14px!important;
  border-radius:var(--card-system-radius)!important;
}
.kpi-large{
  min-height:116px!important;
  padding:16px!important;
}
.kpi-small{
  min-height:82px!important;
  padding:12px 14px!important;
}
.kpi .value{
  margin:5px 0 2px!important;
  line-height:1.15!important;
}
.kpi .hint{
  margin-top:1px!important;
  line-height:1.25!important;
}
.kpi-topline{
  margin-bottom:2px!important;
}
.stats-kpi{
  min-height:82px!important;
  padding:12px 14px!important;
  border-radius:var(--card-system-radius)!important;
}
.stats-kpi strong{
  line-height:1.1!important;
}
.stats-kpi em{
  margin-top:1px!important;
}

/* Procurement metrics use the same compact card geometry while retaining
   their semantic icon and bottom-status colors. */
.procurement-kpi-card{
  min-height:88px!important;
  padding:12px 14px!important;
  border-radius:var(--card-system-radius)!important;
  box-shadow:var(--card-system-shadow)!important;
}
.procurement-kpi-card:hover{
  box-shadow:var(--card-system-shadow-hover)!important;
}
.procurement-kpi-icon{
  width:34px!important;
  height:34px!important;
  border-radius:9px!important;
}
.procurement-kpi-body{
  gap:2px!important;
}
.procurement-kpi-body strong{
  font-size:clamp(20px,1.7vw,27px)!important;
}

/* Project, contract and invoice content cards. */
.project-section-card-head{
  padding:11px 14px!important;
}
.project-section-card-head h4{
  margin-bottom:2px!important;
}
.project-section-card-head p{
  line-height:1.35!important;
}
.project-section-card-body{
  padding:12px 14px!important;
}
.sales-contract-approval-card h4,
.sales-invoice-card-head{
  margin-bottom:10px!important;
}

/* Group finance cards are injected at runtime; important keeps this shared
   layer authoritative without changing the finance data/rendering logic. */
.gf-card{
  padding:14px 16px!important;
}
.gf-card h3{
  margin-bottom:9px!important;
}
.gf-kpi{
  min-height:92px!important;
  padding:12px 14px!important;
  border-radius:var(--card-system-radius)!important;
  box-shadow:var(--card-system-shadow)!important;
}
.gf-kpi:hover{
  box-shadow:var(--card-system-shadow-hover)!important;
}
.gf-kpi-label{
  margin-bottom:6px!important;
}
.gf-kpi-value{
  line-height:1.12!important;
}

/* Keep long dashboard descriptions from vertically expanding cards. */
.card .hint,
.card .sub,
.card .cell-sub,
.module-card p,
.module-card li,
.project-section-card-head p{
  line-height:1.4!important;
}

/* Compact mobile geometry. Controls keep their existing touch-safe sizing. */
@media (max-width:820px){
  .card,
  .module-card,
  .chart-card,
  .dashboard-trend-card,
  .risk-card,
  .project-section-card,
  .sales-contract-approval-card,
  .sales-invoice-card,
  .procurement-home-card,
  .procurement-chart-card,
  .procurement-card,
  .finance-card,
  .customer-card,
  .vendor-card,
  .gf-card{
    padding:12px!important;
    border-radius:var(--card-system-radius)!important;
  }
  .kpi,
  .kpi-small,
  .stats-kpi{
    min-height:76px!important;
    padding:10px 12px!important;
  }
  .kpi-large{
    min-height:104px!important;
    padding:12px!important;
  }
  .procurement-kpi-card{
    min-height:80px!important;
    padding:10px 12px!important;
  }
  .gf-kpi{
    min-height:88px!important;
    padding:11px 12px!important;
  }
  .project-section-card-head{
    padding:10px 12px!important;
  }
  .project-section-card-body{
    padding:10px 12px!important;
  }
}

@media (max-width:560px){
  .kpi .value{
    font-size:24px!important;
  }
  .kpi-large .value{
    font-size:30px!important;
  }
  .stats-kpi strong{
    font-size:20px!important;
  }
  .procurement-kpi-body strong{
    font-size:21px!important;
  }
  .gf-kpi-value{
    font-size:22px!important;
  }
}

/* Card system v2 base padding finalization. */
.card{
  padding:var(--card-system-padding,16px)!important;
}
#projects > .card{
  padding:12px!important;
}
@media (max-width:820px){
  .card{
    padding:12px!important;
  }
  #projects > .card{
    padding:10px!important;
  }
}

/* Project registration table columns must follow the final 11-column layout. */
#projects .project-table{min-width:1430px!important}
#projects .project-table th:nth-child(2),#projects .project-table td:nth-child(2){width:112px!important}
#projects .project-table th:nth-child(9),#projects .project-table td:nth-child(9){width:126px!important;min-width:126px!important;white-space:normal!important}
#projects .project-table th:nth-child(10),#projects .project-table td:nth-child(10){width:335px!important;min-width:335px!important;white-space:normal!important}
#projects .project-table th:nth-child(11),#projects .project-table td:nth-child(11){width:132px!important;min-width:132px!important;white-space:nowrap!important}
.clue-batch-toolbar {
  min-height: 34px;
  margin: -4px 0 10px;
}
.clue-batch-toolbar:empty { min-height: 0; margin: 0; }
.clue-batch-toolbar > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 13px;
}
.clue-batch-toolbar label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  white-space: nowrap;
}
.clue-batch-toolbar select { min-width: 150px; }

/* ═══════════════════════════════════════════════════════════════
   线索管理 & 公海池 — UI 美化（M7/M8）
   ═══════════════════════════════════════════════════════════════ */

/* ── 线索表格行 ── */
#clues .table-wrap tbody tr {
  transition: background 150ms ease;
}
#clues .table-wrap tbody tr:hover {
  background: var(--zway-surface-muted);
}
#clues .table-wrap thead th:first-child,
#clues .table-wrap tbody td:first-child { width: 36px; text-align: center; }
#clues .table-wrap thead th:nth-child(2),
#clues .table-wrap tbody td:nth-child(2) { min-width: 160px; }

/* ── 公海状态图标 ── */
.clue-pool-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  font-size: 11px;
  flex-shrink: 0;
  margin-right: 6px;
  vertical-align: middle;
  transition: transform 150ms ease;
}
.clue-pool-indicator:hover { transform: scale(1.15); }
.clue-pool-indicator.private {
  background: color-mix(in srgb, var(--zway-border) 60%, var(--zway-surface) 40%);
  color: var(--zway-text-muted);
  border: 1.5px solid var(--zway-border);
}
.clue-pool-indicator.warning-2d {
  background: #fff7ed;
  color: #ea580c;
  border: 1.5px solid #fed7aa;
  font-size: 10px; font-weight: 700;
}
.clue-pool-indicator.warning-today {
  background: #fef2f2;
  color: #dc2626;
  border: 1.5px solid #fecaca;
  animation: pool-pulse 2s ease-in-out infinite;
}
.clue-pool-indicator.pool-public {
  background: #eff6ff;
  color: #2563eb;
  border: 1.5px solid #bfdbfe;
}
@keyframes pool-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, #dc2626 25%, transparent); }
  50%       { box-shadow: 0 0 0 4px color-mix(in srgb, #dc2626 12%, transparent); }
}

/* ── 操作按钮样式 ── */
.action-link.warning {
  color: #b45309;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 12px;
  transition: all 150ms ease;
}
.action-link.warning:hover {
  background: #fef3c7;
  border-color: #fcd34d;
  transform: translateY(-1px);
}

/* ── 线索筛选栏 ── */
.clue-filter-bar {
  display: flex; gap: 8px; align-items: center;
  font-size: 13px; margin-top: 8px;
  padding: 8px 12px;
  background: var(--zway-surface-muted);
  border: 1px solid var(--zway-border);
  border-radius: var(--radius-sm);
}
.clue-filter-bar .btn.small {
  transition: all 150ms ease;
}
.clue-filter-bar .btn.small:hover { transform: translateY(-1px); }
.clue-filter-bar .btn.small:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* ── 公海池页面 ── */
#pool .page-header {
  display: flex; align-items: center; justify-content: space-between;
}
.pool-stats-row {
  display: flex; gap: 12px; margin-bottom: 12px; flex-wrap: wrap;
}
.pool-stat-card {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--radius-sm);
  background: var(--zway-surface);
  border: 1px solid var(--zway-border);
  font-size: 13px; color: var(--zway-text-muted);
  min-width: 130px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.pool-stat-card:hover {
  border-color: var(--zway-primary-border);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--zway-primary) 8%, transparent);
}
.pool-stat-card .stat-num {
  font-size: 20px; font-weight: 700; color: var(--zway-text);
  line-height: 1;
}
.pool-stat-card .stat-label { font-size: 11px; color: var(--zway-text-muted); }
.pool-tab.active {
  background: var(--zway-primary-soft);
  color: var(--zway-primary);
  border-color: var(--zway-primary-border);
  font-weight: 600;
}
#pool .table-wrap tbody tr { transition: background 150ms ease; }
#pool .table-wrap tbody tr:hover { background: var(--zway-surface-muted); }
#pool .return-reason {
  max-width: 180px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--zway-text-muted);
  font-size: 12px;
}

/* ── 渠道漏斗图 ── */
.clue-funnel-wrap {
  padding: 12px 0;
}
.clue-funnel-row {
  margin-bottom: 10px;
}
.clue-funnel-label {
  display: flex; justify-content: space-between;
  font-size: 13px; margin-bottom: 4px;
  color: var(--zway-text);
}
.clue-funnel-label span:last-child { color: var(--zway-text-muted); font-size: 12px; }
.clue-funnel-track {
  background: var(--zway-border); border-radius: 6px; height: 22px;
  overflow: hidden; position: relative;
}
.clue-funnel-bar {
  height: 100%; border-radius: 6px;
  transition: width 400ms cubic-bezier(.4,0,.2,1);
  display: flex; align-items: center; padding: 0 8px;
  min-width: 36px;
}
.clue-funnel-bar span {
  font-size: 11px; font-weight: 600; color: #fff; white-space: nowrap;
}
.clue-funnel-sub {
  font-size: 11px; color: var(--zway-text-muted); margin-top: 2px;
}
.clue-funnel-empty {
  color: var(--zway-text-muted); padding: 16px; text-align: center; font-size: 13px;
}

/* ── 线索详情弹窗 ── */
.clue-detail-section {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--zway-border);
}
.clue-detail-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.clue-detail-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 20px;
}
.clue-detail-item { display: flex; flex-direction: column; gap: 4px; }
.clue-detail-item strong { font-size: 11px; color: var(--zway-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.clue-detail-item div { font-size: 13px; color: var(--zway-text); line-height: 1.5; }
.clue-detail-meta {
  font-size: 11px; color: var(--zway-text-muted); margin-top: 2px;
}
.followup-timeline-item {
  display: flex; gap: 8px; padding: 8px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--zway-border) 60%, transparent);
  align-items: flex-start;
}
.followup-timeline-item:last-child { border-bottom: none; }
.followup-time { color: var(--zway-text-muted); font-size: 12px; white-space: nowrap; min-width: 140px; }
.followup-method {
  background: var(--zway-surface-muted); border: 1px solid var(--zway-border);
  border-radius: 4px; padding: 1px 6px; font-size: 11px; color: var(--zway-text-muted);
  white-space: nowrap;
}
.followup-content { flex: 1; font-size: 13px; color: var(--zway-text); line-height: 1.5; }
.event-history-item {
  padding: 4px 0; border-bottom: 1px solid color-mix(in srgb, var(--zway-border) 40%, transparent);
  font-size: 12px; color: var(--zway-text-muted);
}
.event-history-item:last-child { border-bottom: none; }
.pool-status-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: 20px; font-size: 12px; font-weight: 500;
}
.pool-status-badge.private { background: var(--zway-surface-muted); color: var(--zway-text-muted); border: 1px solid var(--zway-border); }
.pool-status-badge.public  { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }

/* ── 打卡详情页重设计：移动优先、项目关联可操作 ── */
.checkin-detail-overlay{
  position:fixed!important;
  inset:0!important;
  z-index:2147483646!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:clamp(10px,2vw,24px)!important;
  box-sizing:border-box!important;
  overflow-y:auto!important;
  isolation:isolate!important;
  background:color-mix(in srgb,var(--gray-900) 64%,transparent)!important;
  opacity:1!important;
  -webkit-overflow-scrolling:touch;
}
.checkin-detail-modal{
  position:relative!important;
  z-index:2147483647!important;
  display:flex!important;
  flex-direction:column!important;
  width:min(1080px,100%)!important;
  max-width:1080px!important;
  max-height:min(900px,calc(100dvh - 32px))!important;
  min-width:0!important;
  overflow:hidden!important;
  border:1px solid var(--ci-line,var(--color-border))!important;
  border-radius:22px!important;
  background:var(--white)!important;
  box-shadow:0 28px 80px color-mix(in srgb,var(--gray-900) 28%,transparent)!important;
  transform:none!important;
  opacity:1!important;
}
.checkin-detail-modal-header{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-width:0;
  padding:16px 22px;
  border-bottom:1px solid var(--ci-line,var(--color-border));
  background:linear-gradient(180deg,var(--white),var(--ci-soft,var(--color-surface-soft)));
}
.checkin-detail-modal-title-wrap{min-width:0;display:grid;gap:4px;}
.checkin-detail-modal-kicker{
  color:var(--ci-primary,var(--color-primary));
  font-size:10px;
  font-weight:900;
  letter-spacing:.13em;
}
.checkin-detail-modal h3{
  margin:0!important;
  color:var(--ci-ink,var(--color-text))!important;
  font-size:18px!important;
  font-weight:900!important;
  line-height:1.2!important;
}
.checkin-detail-modal-header .modal-close{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  padding:0;
  border:1px solid var(--ci-line,var(--color-border));
  border-radius:12px;
  color:var(--ci-muted,var(--color-text-secondary));
  background:var(--white);
  font-size:23px;
  line-height:1;
  cursor:pointer;
}
.checkin-detail-modal-header .modal-close:hover,
.checkin-detail-modal-header .modal-close:focus-visible{
  color:var(--ci-primary,var(--color-primary));
  border-color:var(--ci-primary,var(--color-primary));
  outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ci-primary,var(--color-primary)) 14%,transparent);
}
.checkin-detail-modal-body{
  flex:1 1 auto;
  min-height:0;
  min-width:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:22px;
  -webkit-overflow-scrolling:touch;
}
.checkin-detail-modal-footer{
  flex:0 0 auto;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:12px 22px;
  border-top:1px solid var(--ci-line,var(--color-border));
  background:var(--ci-soft,var(--color-surface-soft));
}
.checkin-detail-modal-footer .btn{min-height:40px;min-width:88px;}
.checkin-detail-shell{
  grid-template-columns:minmax(0,1fr)!important;
  gap:18px;
}
.checkin-detail-lower-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  min-width:0;
  align-items:start;
}
.checkin-detail-lower-grid > .checkin-side-card{
  min-width:0;
  height:100%;
  box-sizing:border-box;
}
.checkin-detail-shell{
  min-width:0;
}
.checkin-detail-main,.checkin-detail-side,.checkin-detail-lower-grid,.checkin-detail-hero,.checkin-detail-card,.checkin-side-card{min-width:0;}
.checkin-detail-side{gap:14px;}
.checkin-project-card{
  border-color:color-mix(in srgb,var(--ci-primary,var(--color-primary)) 30%,var(--ci-line,var(--color-border)) 70%);
  box-shadow:0 14px 34px color-mix(in srgb,var(--ci-primary,var(--color-primary)) 10%,transparent);
}
.checkin-link-panel{
  gap:11px;
  padding:15px;
  border-color:color-mix(in srgb,var(--ci-primary,var(--color-primary)) 24%,var(--ci-line,var(--color-border)) 76%);
  background:linear-gradient(180deg,var(--white),color-mix(in srgb,var(--ci-soft,var(--color-surface-soft)) 68%,var(--white) 32%));
}
.checkin-link-panel[hidden]{display:none!important;}
.checkin-link-panel-head{display:flex;min-width:0;}
.checkin-link-panel-head > div{display:grid;gap:3px;min-width:0;}
.checkin-link-panel-head strong{color:var(--ci-ink,var(--color-text));font-size:14px;font-weight:900;}
.checkin-link-panel-head span{color:var(--ci-muted,var(--color-text-secondary));font-size:12px;line-height:1.5;}
.checkin-link-picker-label{color:var(--ci-ink,var(--color-text));font-size:12px;font-weight:900;}
.checkin-link-panel #checkinProjectPicker .picker-search-input{
  width:100%!important;
  min-height:50px!important;
  box-sizing:border-box!important;
  border-color:var(--ci-line,var(--color-border))!important;
  border-radius:12px!important;
  background:var(--white)!important;
  color:var(--ci-ink,var(--color-text))!important;
}
.checkin-link-panel #checkinProjectPicker .picker-search-input:focus{
  border-color:var(--ci-primary,var(--color-primary))!important;
  outline:none!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ci-primary,var(--color-primary)) 14%,transparent)!important;
}
.checkin-link-panel #checkinProjectPicker .picker-results{
  max-height:280px!important;
  overflow-y:auto!important;
  border:1px solid var(--ci-line,var(--color-border));
  border-radius:12px!important;
  background:var(--white);
}
.checkin-link-panel #checkinProjectPicker .picker-item{
  min-height:54px;
  padding:11px 12px!important;
  box-sizing:border-box;
}
.checkin-link-panel #checkinProjectPicker .picker-item:last-child{border-bottom:none!important;}
.checkin-link-actionbar{
  grid-template-columns:minmax(0,1fr) 132px;
  gap:10px;
  padding:11px 12px;
  border-color:color-mix(in srgb,var(--ci-primary,var(--color-primary)) 22%,var(--ci-line,var(--color-border)) 78%);
  background:var(--ci-soft,var(--color-surface-soft));
}
.checkin-link-selection{font-size:12px;line-height:1.55;}
.checkin-link-panel #checkinLinkBtn{min-height:44px;white-space:nowrap;}
.checkin-linked-project-actions{gap:8px;}
.checkin-linked-project-action{min-height:38px;touch-action:manipulation;}

@media (max-width:959px){
  .checkin-detail-lower-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:720px){
  .checkin-detail-overlay{
    align-items:flex-start!important;
    padding:10px!important;
  }
  .checkin-detail-modal{
    width:100%!important;
    max-width:none!important;
    max-height:calc(100dvh - 20px)!important;
    border-radius:16px!important;
  }
  .checkin-detail-modal-header{padding:13px 14px;gap:10px;}
  .checkin-detail-modal-body{padding:14px;}
  .checkin-detail-modal-footer{padding:10px 14px;}
  .checkin-detail-lower-grid{grid-template-columns:1fr;gap:12px;}
  .checkin-detail-hero{display:grid;gap:12px;padding:16px;}
  .checkin-detail-hero-badges{justify-content:flex-start;}
  .checkin-detail-card,.checkin-side-card{padding:16px;}
  /* 关联项目是打卡详情的主要编辑动作，移动端优先展示，避免照片卡片把它推到首屏之外。 */
  .checkin-detail-lower-grid .checkin-project-card{order:-1;}
  .checkin-link-actionbar{grid-template-columns:1fr;gap:8px;}
  .checkin-link-panel #checkinLinkBtn{width:100%;}
  .checkin-linked-project-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}
  .checkin-linked-project-action{width:100%;padding:0 9px;}
  .checkin-link-panel #checkinProjectPicker .picker-results{max-height:220px!important;}
}
@media (max-width:480px){
  .checkin-detail-modal h3{font-size:16px!important;}
  .checkin-detail-modal-kicker{font-size:9px;}
  .checkin-detail-modal-header .modal-close{width:36px;height:36px;}
  .checkin-detail-info{grid-template-columns:1fr!important;gap:5px!important;}
  .checkin-detail-info .label{margin-top:7px;}
  .checkin-detail-info .value{padding-bottom:3px;}
  .checkin-photo-card .checkin-detail-photos{grid-template-columns:1fr!important;}
  .checkin-linked-project-actions{grid-template-columns:1fr;}
}

/* 打卡记录移动端：把项目关联和编辑操作带到每张记录卡片内，避免横向滚动找不到。 */
@media (max-width:720px){
  #checkin .table-container{
    overflow:visible!important;
    border:none!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  #checkin .data-table,
  #checkin .data-table tbody,
  #checkin .data-table tbody tr,
  #checkin .data-table tbody td{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
  #checkin .data-table{border-collapse:separate!important;}
  #checkin .data-table thead{display:none!important;}
  #checkin .data-table tbody tr.checkin-record-row{
    margin:0 0 12px!important;
    padding:10px 13px!important;
    border:1px solid var(--ci-line,var(--color-border))!important;
    border-radius:14px!important;
    background:var(--white)!important;
    box-shadow:0 8px 20px color-mix(in srgb,var(--ci-ink,var(--color-text)) 7%,transparent)!important;
  }
  #checkin .data-table tbody tr.checkin-record-row:hover{
    box-shadow:0 8px 20px color-mix(in srgb,var(--ci-ink,var(--color-text)) 7%,transparent)!important;
  }
  #checkin .data-table tbody tr.checkin-record-row td{
    display:grid!important;
    grid-template-columns:74px minmax(0,1fr)!important;
    gap:9px!important;
    align-items:start!important;
    padding:6px 0!important;
    border:none!important;
    color:var(--ci-ink,var(--color-text))!important;
  }
  #checkin .data-table tbody tr.checkin-record-row td::before{
    content:attr(data-label);
    color:var(--ci-muted,var(--color-text-secondary));
    font-size:11px;
    font-weight:850;
    line-height:1.6;
  }
  #checkin .data-table tbody tr.checkin-record-row td.checkin-record-actions{
    display:flex!important;
    flex-wrap:wrap;
    gap:8px;
    margin-top:6px;
    padding-top:10px!important;
    border-top:1px solid var(--ci-line,var(--color-border))!important;
  }
  #checkin .data-table tbody tr.checkin-record-row td.checkin-record-actions::before{
    flex:0 0 100%;
    width:100%;
  }
  #checkin .checkin-record-actions .btn-link{
    flex:1 1 110px;
    margin-left:0!important;
    min-height:40px!important;
    padding:0 10px!important;
  }
  #checkin .checkin-linked-project-cell{
    max-width:none!important;
    width:max-content;
    max-width:100%;
  }
}

/* 项目编辑底部操作：危险操作弱化，保存/继续形成明确的主次层级。 */
.project-form-footer{
  position:sticky;
  bottom:0;
  z-index:20;
  margin-top:10px;
  padding:16px 22px 18px;
  border-top:1px solid color-mix(in srgb,var(--color-primary) 12%,var(--color-border) 88%);
  background:color-mix(in srgb,var(--white) 94%,var(--color-surface-soft) 6%);
  box-shadow:0 -12px 28px color-mix(in srgb,var(--gray-900) 7%,transparent);
  backdrop-filter:blur(12px);
}
.project-form-footer .project-edit-actions-compact{
  display:flex!important;
  align-items:center;
  width:100%;
  gap:10px;
  padding:0;
  border:0;
}
.project-form-footer .project-edit-actions-compact .btn{
  min-width:100px;
  min-height:40px;
  padding:0 12px;
  border-radius:10px;
  font-size:13px;
  font-weight:850;
  letter-spacing:.01em;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
}
.project-form-footer .project-edit-actions-compact .btn:hover:not(:disabled){transform:translateY(-1px);}
.project-form-footer #deleteProjectBtn{
  margin-right:auto!important;
  color:var(--color-danger)!important;
  border:1px solid color-mix(in srgb,var(--color-danger) 34%,var(--color-border) 66%)!important;
  background:color-mix(in srgb,var(--color-danger) 3%,var(--white) 97%)!important;
  box-shadow:none!important;
}
.project-form-footer #deleteProjectBtn:hover:not(:disabled){
  border-color:var(--color-danger)!important;
  background:color-mix(in srgb,var(--color-danger) 9%,var(--white) 91%)!important;
  box-shadow:0 6px 14px color-mix(in srgb,var(--color-danger) 12%,transparent)!important;
}
.project-form-footer #saveProjectBtn{
  color:var(--color-primary)!important;
  border:1px solid color-mix(in srgb,var(--color-primary) 30%,var(--color-border) 70%)!important;
  background:var(--white)!important;
  box-shadow:0 5px 12px color-mix(in srgb,var(--color-primary) 8%,transparent)!important;
}
.project-form-footer #saveProjectBtn:hover:not(:disabled){
  border-color:var(--color-primary)!important;
  background:var(--color-surface-soft)!important;
}
.project-form-footer #saveProjectNextBtn{
  min-width:128px;
  color:var(--white)!important;
  border:1px solid var(--color-primary)!important;
  background:linear-gradient(135deg,var(--color-primary),var(--color-primary-hover))!important;
  box-shadow:0 10px 20px color-mix(in srgb,var(--color-primary) 22%,transparent)!important;
}
.project-form-footer #saveProjectNextBtn:hover:not(:disabled){
  box-shadow:0 13px 24px color-mix(in srgb,var(--color-primary) 28%,transparent)!important;
}
.project-form-footer .btn:focus-visible{
  outline:3px solid color-mix(in srgb,var(--color-primary) 28%,transparent);
  outline-offset:2px;
}
@media(max-width:760px){
  .project-form-footer{
    margin-top:8px;
    padding:12px 14px 14px;
  }
  .project-form-footer .project-edit-actions-compact{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-areas:"delete delete" "save next";
    gap:9px;
  }
  .project-form-footer .project-edit-actions-compact .btn{
    width:100%;
    min-width:0;
    min-height:44px;
    padding:0 8px;
    font-size:12px;
  }
  .project-form-footer #deleteProjectBtn{grid-area:delete;margin-right:0!important;}
  .project-form-footer #saveProjectBtn{grid-area:save;}
.project-form-footer #saveProjectNextBtn{grid-area:next;min-width:0;}
}

/* 客户管理 KPI 卡紧凑化：保留数字层级，减少无效的上下留白。 */
#customers > .grid.kpis{
  gap:12px;
}
#customers > .grid.kpis > .card.kpi{
  min-height:112px!important;
  padding:14px 16px!important;
  border-radius:16px!important;
}
#customers > .grid.kpis > .card.kpi .kpi-icon{
  width:28px;
  height:28px;
  margin-bottom:4px;
  border-radius:7px;
}
#customers > .grid.kpis > .card.kpi .kpi-icon svg{
  width:17px;
  height:17px;
}
#customers > .grid.kpis > .card.kpi .label{
  font-size:11px;
  line-height:1.2;
}
#customers > .grid.kpis > .card.kpi .value{
  margin:3px 0 1px!important;
  font-size:24px;
  line-height:1.05!important;
}
#customers > .grid.kpis > .card.kpi .hint{
  margin-top:0!important;
  font-size:11px;
  line-height:1.2;
}
@media(max-width:820px){
  #customers > .grid.kpis > .card.kpi{
    min-height:96px!important;
    padding:11px 13px!important;
  }
  #customers > .grid.kpis > .card.kpi .value{font-size:22px;}
}

/* ═══════════ 角色权限管理（page: role-permissions）═══════════
   布局规范：全部走全局设计令牌（--sp-* / --radius-* / --color-*-soft），
   模块编辑为统一最小高度的勾选卡片网格；名称/ID/描述分行，改动标记右对齐，
   避免行内混排换行造成的错位。 */

/* ── 状态概览 ── */
.rp-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--sp-sm) var(--sp-lg)}
.rp-stat{min-width:0}
.rp-stat-label{font-size:11.5px;color:var(--text-secondary);line-height:1.4}
.rp-stat-value{font-size:14px;font-weight:600;color:var(--text-primary);margin-top:2px;line-height:1.5;overflow-wrap:anywhere}
.rp-muted{color:var(--text-secondary);font-weight:500}

.rp-badge{display:inline-flex;align-items:center;gap:5px;padding:2px 10px;border-radius:var(--radius-badge);font-size:12px;font-weight:600;line-height:1.6}
.rp-badge.active{background:var(--color-success-soft);color:var(--color-success-text)}
.rp-badge.pending{background:var(--color-warning-soft);color:var(--color-warning-text)}

.rp-alert{padding:var(--sp-sm) var(--sp-md);border-radius:var(--radius-btn);margin-top:var(--sp-md);font-size:13px;line-height:1.6}
.rp-alert.ok{background:var(--color-success-soft);color:var(--color-success-text)}
.rp-alert.warn{background:var(--color-warning-soft);color:var(--color-warning-text)}
.rp-alert.error{background:var(--color-danger-soft);color:var(--color-danger-text)}

/* ── 角色 Tab ── */
.rp-tabs{display:flex;flex-wrap:wrap;gap:var(--sp-sm);padding:var(--sp-xs) 0 0}
.rp-tabs button{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 14px;border:1px solid var(--card-border);border-radius:18px;
  background:var(--card-bg);cursor:pointer;font-size:13px;color:var(--text-secondary);
  line-height:1.5;transition:border-color var(--fast),background var(--fast),color var(--fast);
}
.rp-tabs button:hover{border-color:var(--green-300)}
.rp-tabs button.active{background:var(--green-500);border-color:var(--green-500);color:var(--white);font-weight:600}
.rp-tabs button:focus-visible{outline:2px solid var(--green-500);outline-offset:2px}
.rp-tabs .rp-tab-badge{font-size:11px;opacity:.85;font-weight:500}
.rp-tabs .rp-tab-dot{width:7px;height:7px;border-radius:50%;background:var(--warning);flex:none}

/* ── 模块编辑（分组子卡 + 勾选卡片网格）── */
.rp-toolbar{display:flex;gap:var(--sp-sm);flex-wrap:wrap;align-items:center;margin-top:var(--sp-sm)}
.rp-toolbar-note{font-size:12px;color:var(--text-secondary)}
.rp-group{margin-top:var(--sp-md);border:1px solid var(--card-border);border-radius:var(--radius-btn);padding:var(--sp-sm) var(--sp-md) var(--sp-md);background:var(--card-bg)}
.rp-group-title{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--text-secondary);padding:2px 0 var(--sp-sm);border-bottom:1px solid var(--card-border);margin-bottom:var(--sp-sm)}
.rp-pages{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--sp-sm)}
.rp-page{
  display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--sp-sm);align-items:start;
  padding:var(--sp-sm) 10px;border:1px solid var(--card-border);border-radius:var(--radius-btn);
  background:var(--card-bg);cursor:pointer;min-height:56px;min-width:0;
  transition:border-color var(--fast),background var(--fast);
}
.rp-page:hover{border-color:var(--green-300)}
.rp-page:has(input:checked){border-color:var(--green-300);background:var(--green-50)}
.rp-page input{margin-top:2px;accent-color:var(--green-500)}
.rp-page:focus-within{outline:2px solid var(--green-500);outline-offset:1px}
.rp-page-body{display:flex;flex-direction:column;gap:1px;min-width:0}
.rp-page-head{display:flex;align-items:center;gap:6px;min-width:0}
/* ⚠️ 全局有一条 `label span{color:var(--ui-theme-strong)!important}`，会把卡片内所有文字压成同一主题色（淡色背景上不可见）。
   这里用 !important 在 .rp-page 作用域内重新指定各层文字颜色。 */
.rp-page .rp-page-head,.rp-page .rp-page-body{color:var(--text-primary)}
.rp-page-name{font-weight:600;font-size:13px;color:var(--text-primary)!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-tag-slot{margin-left:auto;flex:none;display:inline-flex}
.rp-tag-slot:empty{display:none}
.rp-page-id{font-size:11px;color:var(--text-secondary)!important;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;opacity:.75;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-page-desc{font-size:11px;color:var(--text-secondary)!important;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rp-page.is-added{border-color:var(--color-success);background:var(--color-success-soft)}
.rp-page.is-removed{border-color:var(--color-danger);background:var(--color-danger-soft)}

.rp-tag{display:inline-flex;align-items:center;font-size:11px;line-height:1.6;padding:0 7px;border-radius:9px;white-space:nowrap;font-weight:600;flex:none;color:inherit!important}
.rp-tag.added{background:var(--color-success-soft);color:var(--color-success-text)!important}
.rp-tag.removed{background:var(--color-danger-soft);color:var(--color-danger-text)!important}
.rp-page.is-added .rp-tag.added{background:color-mix(in srgb,var(--color-success-soft) 55%,var(--white))}
.rp-page.is-removed .rp-tag.removed{background:color-mix(in srgb,var(--color-danger-soft) 55%,var(--white))}

/* ── 变更明细（待确认卡 / 确认区共用）── */
.rp-diff{margin-top:var(--sp-md);padding:var(--sp-sm) var(--sp-md);background:color-mix(in srgb,var(--color-warning-soft) 45%,var(--card-bg));border:1px solid color-mix(in srgb,var(--color-warning) 25%,var(--card-border));border-radius:var(--radius-btn);font-size:13px}
.rp-diff h4{margin:0 0 6px;font-size:13px;color:var(--text-primary)}
.rp-diff ul{margin:4px 0;padding:0;list-style:none}
.rp-diff li{margin:6px 0;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.rp-diff li>b{flex:none;color:var(--text-primary)}
.rp-taglist{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px;min-width:0}
.rp-taglist-label{font-size:12px;color:var(--text-secondary);flex:none}
.rp-diff .rp-meta{font-size:12px;color:var(--text-secondary);margin-top:6px;line-height:1.5}

/* ── 确认区 ── */
.rp-confirm-row{display:flex;align-items:center;gap:var(--sp-md);flex-wrap:wrap;margin-top:var(--sp-md)}
.rp-confirm-row label{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-primary);cursor:pointer}
.rp-confirm-row input[type=text]{
  padding:7px 12px;border:1px solid var(--card-border);border-radius:var(--radius-input);
  min-width:220px;font-size:13px;color:var(--text-primary);background:var(--card-bg);
  transition:border-color var(--fast),box-shadow var(--fast);
}
.rp-confirm-row input[type=text]:focus{outline:none;border-color:var(--green-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--green-500) 15%,transparent)}
.rp-note-label{display:block;margin-top:14px;font-size:13px;color:var(--text-primary)}
.rp-note{width:100%;margin-top:6px;padding:8px 10px;border:1px solid var(--card-border);border-radius:var(--radius-input);font-size:13px;font-family:inherit;color:var(--text-primary);background:var(--card-bg);resize:vertical}
.rp-note:focus{outline:none;border-color:var(--green-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--green-500) 15%,transparent)}
.rp-actions{display:flex;gap:var(--sp-sm);flex-wrap:wrap;margin-top:var(--sp-md);padding-top:var(--sp-md);border-top:1px solid var(--card-border)}
.rp-actions .btn:disabled{opacity:.55;cursor:not-allowed}
.rp-hint{font-size:12px;color:var(--text-secondary);margin-top:var(--sp-sm);line-height:1.6}