/* ═══════════════════════════════════════════
   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: #111827;
  --text-secondary: #6b7280;
  --text-muted: #d1d5db;
  --sidebar-text: #B9C0BC;
  --sidebar-text-muted: #8EA099;
  --sidebar-text-group: #6F8277;
  --sidebar-text-disabled: #4E6759;
  --sidebar-active: #ffffff;
  --white: #ffffff;

  /* 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-card: 12px; --radius-btn: 8px; --radius-search: 8px;
  --radius-badge: 10px; --radius-input: 8px;

  /* Shadow */
  --shadow-sm:     0 1px 3px rgba(15,42,29,0.08);
  --shadow-card:   0 2px 8px rgba(15,42,29,0.08);
  --shadow-md:     0 4px 16px rgba(15,42,29,0.10);
  --shadow-float:  0 4px 12px rgba(15,42,29,0.08);
  --shadow-popup:  0 8px 32px rgba(15,42,29,0.12);
  --shadow-modal:  0 16px 48px rgba(15,42,29,0.16);

  /* 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:14px;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:22px;font-weight:700;line-height:1.3}
h2{font-size:18px;font-weight:600;line-height:1.35}
h3{font-size:15px;font-weight:600;line-height:1.4}
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:#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:#4A6278}

/* Main content scrollbar */
main::-webkit-scrollbar-thumb{background:var(--green-200)}
main::-webkit-scrollbar-thumb:hover{background:#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,rgba(30,107,78,.18),rgba(255,255,255,0));border-radius:0 0 0 240px}
.login-screen::after{width:680px;height:210px;left:-160px;bottom:-60px;background:linear-gradient(20deg,rgba(30,107,78,.12),rgba(255,255,255,.78));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:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.88);
  border-radius:28px;
  box-shadow:0 28px 70px rgba(35,49,64,.16);
  overflow:hidden;
}
.login-visual{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:680px;padding:72px 58px 42px;color:#fff;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:rgba(255,255,255,.06);border-radius:50% 50% 0 0}
.login-visual::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 25% 24%,rgba(255,255,255,.08),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:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.25);
  color:#BDF5D8;
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
}
.login-visual h1{max-width:680px;color:#fff;font-size:36px;line-height:1.2;font-weight:700;text-shadow:0 4px 18px rgba(0,0,0,.22)}
.login-visual p{max-width:660px;margin:20px 0 0;color:rgba(255,255,255,.78);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:rgba(255,255,255,.14);color:#fff;box-shadow:0 8px 20px rgba(0,0,0,.12);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 rgba(92,201,154,.14)}
.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:rgba(246,255,248,.92);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:0 12px 34px rgba(0,62,37,.18);
  color:var(--green-700);
}
.login-feature-card strong{
  display:block;
  font-size:18px;
  margin-bottom:8px;
}
.login-feature-card span{
  color:#2F7355;
  font-weight:600;
  line-height:1.45;
}
.login-panel{display:flex;align-items:center;justify-content:center;padding:46px;background:linear-gradient(180deg,rgba(255,255,255,.96),var(--green-50))}
.login-card{width:100%;max-width:400px;background:rgba(255,255,255,.94);border:1px solid var(--green-100);border-radius:var(--radius-xl,20px);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:#fff;font-size:22px;font-weight:900;box-shadow:0 4px 12px rgba(63,184,122,.35)}
.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:#1D3B31;
  font-size:26px;
  font-weight:900;
}
.login-title-block p{
  margin:12px 0 26px;
  color:#65766E;
  font-size:14px;
  line-height:1.7;
}
.login-field{
  display:block;
  margin-bottom:16px;
}
.login-field span{
  display:block;
  margin-bottom:8px;
  color:#334D43;
  font-size:13px;
  font-weight:800;
}
.login-field input{
  width:100%;
  height:46px;
  border:1px solid #D8E6DE;
  border-radius:8px;
  background:#F8FCFA;
  color:#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:#fff;box-shadow:0 0 0 4px rgba(63,184,122,.13)}
.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 rgba(45,138,94,.3);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 #E7F1EB;
  color:#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:16px;box-shadow:0 8px 32px rgba(15,42,29,0.12)}
  .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:rgba(255,255,255,.7)!important;text-align:center;padding:0 0 24px!important;font-size:12px!important}
  .login-field>span,.login-card-brand strong{color:#1e2d6b!important}
  .login-title-block h2{color:#1e2d6b!important}
}
[data-theme="blue"] .login-field>span{color:#1e2d6b!important}
[data-theme="blue"] .login-title-block h2{color:#1e2d6b!important}
[data-theme="blue"] .login-card-brand strong{color:#1e2d6b!important}
[data-theme="blue"] .login-subtitle{color:#6b7a99!important}
[data-theme="blue"] .login-scope{color:#6b7a99!important}

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

/* ── Sidebar ── */
aside{
  background:var(--sidebar-bg);
  color:var(--sidebar-text);
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
  overflow-x:hidden;
  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:#fff;font-size:18px;font-weight:800;flex-shrink:0;box-shadow:0 4px 12px rgba(64,184,122,.3)}
.sidebar-brand-text h1{font-size:15px;font-weight:700;color:var(--sidebar-active);margin:0;line-height:1.3}
.sidebar-brand-text span{font-size:11px;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:#fff;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-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:12px;font-weight:700;color:var(--sidebar-text-group);letter-spacing:0.5px;padding:20px 16px 8px}
.nav button{
  display:flex;align-items:center;width:100%;
  border:none;background:transparent;
  color:var(--sidebar-text);
  padding:0 16px;height:44px;font-size:14px;font-weight:600;
  text-align:left;cursor:pointer;
  transition:all .18s ease-out;
  position:relative;border-radius:0;gap:12px;line-height:1.3;
  margin:3px 12px;width:calc(100% - 24px);border-radius:10px;
}
.nav button:hover{background:#123A27;color:#E7F0EA}
.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:#fff;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:rgba(255,255,255,0.03);
  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:rgba(0,0,0,0.35);
  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 rgba(63,184,122,0.15)}
.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;
  gap:var(--sp-xs);
}
.topbar-actions{
  display:flex;
  align-items:center;
  gap:var(--sp-sm);
  flex-wrap:wrap;
}

/* ── 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:6px;
  padding:8px 16px;border:1px solid var(--card-border);
  border-radius:var(--radius-btn);background:var(--card-bg);
  color:var(--text-primary);font-size:13px;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.4;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 rgba(30,107,78,.25);
}
.btn.primary:hover{
  background:linear-gradient(135deg,var(--green-600),var(--green-500));
  border-color:transparent;box-shadow:0 4px 12px rgba(30,107,78,.35);
}
.btn.danger{background:#fff;color:var(--text-primary);border-color:#d1d5db}
.btn.danger:hover{background:#f9fafb;border-color:var(--danger)}
.action-link,.link-btn{
  border:none;
  background:transparent;
  color:var(--primary);
  font-size:13px;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;
}
.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, #e5e7eb)}

/* ═══════════════════════════════════════════
   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:14px;
  min-width:0;
  flex-wrap:wrap;
}
.section-title h3{
  font-size:15px;font-weight:600;
  color:var(--text-primary);
  margin:0;
}
.section-title span{
  font-size:12px;color:var(--text-secondary);
}

/* ═══════════════════════════════════════════
   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 .hint{
  font-size:12px;color:var(--text-secondary);
  margin-top:2px;
}

/* 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,#2563eb)}
.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:#7c3aed}
.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(--shadow-float);
}

/* 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}

/* 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:rgba(255,255,255,0.65)}
.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:#fff7ed;color:#c2410c}

/* Glow progress */
.glow-progress{
  height:10px;
  background:#E2E8F0;
  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:#E2E8F0;
}
.mini-spark i.active{background:linear-gradient(90deg,var(--warning),#3B82F6)}

/* ═══════════════════════════════════════════
   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:#fef2f2;color:#b91c1c}
.tag.orange{background:#fff7ed;color:#c2410c}
.tag.purple{background:#f5f3ff;color:#6d28d9}

/* ═══════════════════════════════════════════
   9. TABLES
   ═══════════════════════════════════════════ */
table{
  width:100%;border-collapse:separate;border-spacing:0;font-size:13px;
}
thead th{
  position:sticky;top:0;background:var(--gray-50,#f9fafb);
  color:var(--text-primary);font-weight:600;text-align:left;
  padding:12px 16px;border-bottom:1px solid var(--card-border);
  white-space:nowrap;z-index:1;font-size:12px;
}
tbody td{
  padding:12px 16px;border-bottom:1px solid var(--card-border,#e5e7eb);vertical-align:top;
}
tbody tr:nth-child(even){background:#f9fafb}
tbody tr:hover{background:var(--green-50,#f0faf4)}
.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:8px 10px}

/* Cell helpers */
.table-actions{display:flex;gap:8px;align-items:center}
.cell-main{display:block;font-weight:600;color:var(--text-primary)}
.cell-sub{display:block;margin-top:3px;font-size:12px;line-height:1.35;color:var(--text-secondary)}
.cell-subtext{margin-top:4px;font-size:12px;color:var(--text-secondary)}
.nowrap{white-space:nowrap}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* 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}
.table-wrap .cell-main,
.table-wrap td > strong{white-space:normal;word-break:break-word}
.table-wrap .cell-sub{white-space:normal;word-break:break-word}

/* Project table */
.project-table{min-width:2400px;table-layout:fixed;font-size:13px}
.project-table-wrap{max-height:640px;overflow:auto}
.key-project-table{min-width:1600px;table-layout:fixed}
.key-project-table th:nth-child(1),.key-project-table td:nth-child(1){width:88px}
.key-project-table th:nth-child(2),.key-project-table td:nth-child(2){width:44px}
.key-project-table th:nth-child(3),.key-project-table td:nth-child(3){width:170px}
.key-project-table th:nth-child(4),.key-project-table td:nth-child(4){width:140px}
.key-project-table th:nth-child(5),.key-project-table td:nth-child(5){width:120px}
.key-project-table th:nth-child(6),.key-project-table td:nth-child(6){width:120px}
.key-project-table th:nth-child(7),.key-project-table td:nth-child(7){width:100px}
.key-project-table th:nth-child(8),.key-project-table td:nth-child(8){width:52px}
.key-project-table th:nth-child(9),.key-project-table td:nth-child(9){width:90px}
.key-project-table th:nth-child(10),.key-project-table td:nth-child(10){width:110px}
.key-project-table th:nth-child(11),.key-project-table td:nth-child(11){width:110px}
.key-project-table th:nth-child(12),.key-project-table td:nth-child(12){width:180px}
.key-project-table th:nth-child(13),.key-project-table td:nth-child(13){width:60px}
.key-project-table th:nth-child(14),.key-project-table td:nth-child(14){width:74px}
.wide-table-wrap table{min-width:1320px}

/* Customer table */
.customer-table-wrap{max-height:620px;overflow:auto}
.customer-table-compact{min-width:1200px;table-layout:fixed}
.customer-table-compact th:nth-child(1),.customer-table-compact td:nth-child(1){width:100px}
.customer-table-compact th:nth-child(2),.customer-table-compact td:nth-child(2){width:200px}
.customer-table-compact th:nth-child(3),.customer-table-compact td:nth-child(3){width:220px}
.customer-table-compact th:nth-child(4),.customer-table-compact td:nth-child(4){width:170px}
.customer-table-compact th:nth-child(5),.customer-table-compact td:nth-child(5){width:180px}
.customer-table-compact th:nth-child(6),.customer-table-compact td:nth-child(6){width:140px}
.customer-table-compact th:nth-child(7),.customer-table-compact td:nth-child(7){width:180px}
.customer-money-cell{white-space:nowrap}
.customer-action-next-cell{color:var(--text-primary);max-width:320px}
.customer-action-cell{white-space:nowrap}
.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:nowrap}.project-actions-cell .action-link{margin-right:8px}
.customer-row-click,.customer-risk-click{cursor:pointer;transition:background var(--fast)}
.customer-row-click:hover,.customer-risk-click:hover{background:#f9fafb}

/* 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}
#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 rgba(63,184,122,0.15)}
select:disabled,input:disabled{
  background:#F1F5F9;
  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}
.inline-form{display:flex;gap:8px;margin-top:14px}
.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))}

/* 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}

/* Form sections (accordion) */
.form-section{
  margin-top:6px;
  padding:12px 14px;
  border-radius:var(--radius-card);
  background:#f9fafb;
  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 accordion */
.project-form-accordion{display:block!important}
.project-form-section{
  border:1px solid var(--card-border);
  border-radius:var(--radius-card);
  background:var(--card-bg);
  margin-bottom:12px;
  overflow:hidden;
}
.project-form-section[open]{box-shadow:var(--shadow-float)}
.project-form-section summary{
  list-style:none;
  cursor:pointer;
  padding:14px 16px;
  background:linear-gradient(135deg,#f9fafb,var(--green-100));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid transparent;
}
.project-form-section[open] summary{border-bottom-color:var(--card-border)}
.project-form-section summary::-webkit-details-marker{display:none}
.project-form-section summary::after{
  content:"展开";flex:0 0 auto;
  color:var(--primary);font-size:12px;font-weight:700;
}
.project-form-section[open] summary::after{content:"收起"}
.project-form-section summary span{color:var(--text-primary);font-weight:700;font-size:15px}
.project-form-section summary em{color:var(--text-secondary);font-style:normal;font-size:12px;line-height:1.4}
.project-form-section-body{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;padding:16px;
}
.project-form-accordion .form-actions{
  position:sticky;bottom:-22px;
  background:linear-gradient(180deg,rgba(255,255,255,.88),#fff);
  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:#EFF6FF;
  color:#1D4ED8;
  font-size:11px;font-weight:700;
}

/* Password notice */
.password-notice{
  margin:0;
  background:#FFF7ED;
  border-color:#FED7AA;
  color:#9A3412;
}

/* ═══════════════════════════════════════════
   11. FILTERS
   ═══════════════════════════════════════════ */
.filters{
  display:grid;
  grid-template-columns:minmax(240px,1.7fr) repeat(7,minmax(118px,1fr)) minmax(88px,auto);
  gap:10px;
  margin-bottom:14px;
  align-items:center;
}
.customer-filters{
  grid-template-columns:minmax(260px,1.7fr) repeat(4,minmax(120px,1fr)) auto;
  gap:12px;margin-bottom:16px;
}
.task-filters{grid-template-columns:repeat(3,1fr) auto}
.file-filters{grid-template-columns:1.4fr 1fr auto}

/* ═══════════════════════════════════════════
   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:#E2E8F0;
  border-radius:999px;overflow:hidden;
}
.bar{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--primary),#12B886);
  transition:width .35s ease;
}
.bar.green{background:linear-gradient(90deg,var(--primary),var(--success))}
.bar.orange{background:linear-gradient(90deg,var(--warning),#FB923C)}
.bar.purple{background:linear-gradient(90deg,#7c3aed,#0ea5e9)}
.bar-value{text-align:right;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:#fff;
  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 rgba(0,0,0,0.12);
  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:#f9fafb;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:#ECFDF5;color:#047857}
.bullet-status.warn{background:#FFF7ED;color:#C2410C}
.bullet-status.bad{background:#FEF2F2;color:#B91C1C}
.bullet-track{
  height:13px;position:relative;
  display:flex;
  border-radius:999px;overflow:hidden;
  background:#E2E8F0;
  margin:8px 0 4px;
}
.bullet-track .range{height:100%;opacity:.25}
.bullet-track .range.bad{width:35%;background:#DC2626}
.bullet-track .range.warn{width:30%;background:#D97706}
.bullet-track .range.good{width:35%;background:#059669}
.bullet-track span{
  position:absolute;left:0;top:0;
  height:100%;
  background:linear-gradient(90deg,var(--primary),#0EA5E9);
  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 rgba(234,84,85,0.35);
}
.risk-timeline-item.warning .risk-node{
  background:var(--warning);
  box-shadow:0 0 12px rgba(255,159,67,0.35);
}
.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:#f9fafb}

/* ═══════════════════════════════════════════
   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-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(4,minmax(0,1fr));
  gap:16px;margin-top:16px;
}
.dashboard-core-grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  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:320px;padding:20px}
.stat-chart-card{min-height:250px}
.dashboard-trend-card{min-height:310px}

/* ═══════════════════════════════════════════
   14. DRAWERS & OVERLAYS
   ═══════════════════════════════════════════ */
.drawer{
  position:fixed;inset:0;
  background:rgba(15,23,42,.30);
  display:none;
  align-items:stretch;
  justify-content:flex-end;
  z-index:200;
  padding-left:12px;
}
.drawer.open{display:flex}
.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 rgba(15,23,42,.18);
}
.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:#065F46;
  font-size:13px;line-height:1.7;
}
.drawer-subtitle b{color:var(--danger)}

/* ── 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),#f9fafb);
  border:1px solid var(--card-border);
  margin-bottom:16px;
}
.overview-hero h2{font-size:22px;color:var(--text-primary);margin:0 0 8px}
.overview-hero .meta{display:flex;gap:8px;flex-wrap:wrap;color:var(--text-secondary);font-size:13px}
.overview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.overview-grid.inner{grid-template-columns:1fr 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}

/* 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),#f9fafb);
  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}
.customer-chart-card{min-height:260px}
.customer-project-table{max-height:360px;overflow:auto}

/* ═══════════════════════════════════════════
   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:#FED7AA;
  background:#FFF7ED;
}
.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 #FED7AA}
.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:18px;font-weight:700;color:var(--text-primary)}
.timeline-summary em{display:block;font-size:11px;color:var(--text-secondary);font-style:normal}

/* ═══════════════════════════════════════════
   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:#FECACA;
  background:#FEF2F2;
}
.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:#E2E8F0;
  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:#fef2f2!important;border-color:#fecaca!important;color:#991b1b!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:#065F46;
  font-size:13px;font-weight:600;
  display:inline-flex;align-items:center;gap:6px;
}
.pill button{border:none;background:transparent;color:#991B1B;cursor:pointer;font-weight:700;font-size:13px}
.config-panel{padding:14px;border:1px solid var(--card-border);border-radius:var(--radius-card);background:#f9fafb}
.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:#065F46;
  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;
}

/* ═══════════════════════════════════════════
   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:16px}
.mt-sm{margin-top:14px}
.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:#047857;font-weight:700}
.stat-muted{color:var(--text-secondary)}
.stat-warning{color:#C2410C;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)}
  .dashboard-chart-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dashboard-chart-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .filters{
    grid-template-columns:minmax(200px,1.5fr) repeat(3,minmax(110px,1fr)) auto;
  }
  .topbar-search{width:240px}
}

/* ── ≥768px (tablet portrait) ── */
@media(max-width:992px){
  :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)}
  .dashboard-core-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){
  :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:block!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}
  .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}
  #exportBtn{display:none}
  #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}
  .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%}
  .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}
  .form-grid,.form-grid.enhanced,.form-grid.compact{grid-template-columns:1fr}
  .form-grid .span2,.form-grid .span3{grid-column:auto}
  .project-form-section-body{grid-template-columns:1fr}
  .drawer{padding-left:0}
  .drawer-panel{width:100vw;max-width:100vw;padding:14px}
  .overview-grid{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}
  .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}
  #exportBtn{display:none}
}

/* ── 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:#ffffff!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:#fff!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:rgba(255,255,255,.93)!important;
  border:1px solid rgba(226,241,233,.9)!important;
  box-shadow:0 22px 58px rgba(0,55,35,.18)!important;
  backdrop-filter:blur(10px);
}
.login-title-block h2{font-size:24px!important;color:#133d2d!important}
.login-title-block p{font-size:13px!important;color:#66796f!important;margin-bottom:24px!important}
.login-version{font-size:11px!important;color:#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:#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,#f7fbf8 0%,#e4f5ea 52%,#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%,rgba(151,215,171,.45) 0 12%,transparent 28%),
    linear-gradient(120deg,#f7fbf8 0%,#edf8f1 62%,#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%,rgba(255,255,255,.34) 58.2% 100%),
    radial-gradient(circle at 88% 28%,rgba(119,191,142,.18) 0 18%,transparent 38%),
    linear-gradient(90deg,transparent 0 62%,rgba(192,228,204,.36) 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%,rgba(90,197,128,.34) 0 1.4px,transparent 1.8px) 0 0/20px 20px,
    repeating-radial-gradient(ellipse at 42% 12%,rgba(255,255,255,.10) 0 1px,transparent 1px 11px),
    linear-gradient(142deg,#004b33 0%,#005f42 48%,#01412f 100%)!important;
  border-radius:0 0 48% 0!important;
  box-shadow:0 28px 70px rgba(0,70,43,.25)!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,rgba(255,255,255,.20) 0 2px,transparent 2px 100%) 0 0/46px 46px,
    linear-gradient(0deg,rgba(255,255,255,.22) 0 2px,transparent 2px 100%) 0 0/46px 46px,
    linear-gradient(135deg,rgba(229,245,235,.16),rgba(67,146,103,.12))!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:#fff!important;
  margin-top:0!important;
}
.login-kicker{display:none!important}
.login-visual-copy h1{margin:0!important;color:#fff!important;font-size:36px!important;line-height:1.2!important;font-weight:700!important;text-shadow:0 4px 16px rgba(0,0,0,.2)!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:rgba(255,255,255,.90)!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,#d9ff9b,#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,rgba(255,255,255,.23),rgba(255,255,255,.12))!important;
  border:1px solid rgba(255,255,255,.28)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 14px 35px rgba(0,45,29,.16)!important;
  color:#fff!important;
  font-size:24px!important;
  font-weight:800!important;
}
.login-service-tags span::before{
  content:"";
  width:28px;
  height:28px;
  border:5px solid #fff;
  border-radius:50%;
  box-sizing:border-box;
  box-shadow:0 0 0 6px rgba(255,255,255,.12);
}
.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:rgba(255,255,255,.94)!important;
  border:1px solid rgba(255,255,255,.96)!important;
  box-shadow:0 28px 80px rgba(15,82,55,.18)!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:#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 #087b55!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:#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 #d7dfdc!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.94)!important;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.03)!important;
}
.login-input-icon{
  flex:0 0 46px!important;
  text-align:center!important;
  color:#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:#19372c!important;
  outline:0!important;
}
.login-input-wrap input::placeholder{color:#a9b2af!important}
.login-options{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  margin:6px 0 28px!important;
  color:#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:#087b55!important;
}
.login-options button{
  border:0!important;
  background:transparent!important;
  color:#087b55!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,#49b36f 0%,#00714d 100%)!important;
  color:#fff!important;
  font-size:20px!important;
  font-weight:850!important;
  box-shadow:0 14px 28px rgba(0,113,77,.24)!important;
}
.login-trial{
  width:100%!important;
  height:58px!important;
  margin-top:20px!important;
  border:1px solid #0d805b!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.78)!important;
  color:#087b55!important;
  font-size:20px!important;
  font-weight:850!important;
  cursor:pointer!important;
}
#loginMsg{
  margin:18px 0 0!important;
  color:#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:#4ade80!important;
  font-size:13px!important;
  font-weight:600!important;
  letter-spacing:0.5px;
}
@media(max-width:860px){
  .login-footer{color:#065F46!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}
}

/* ── 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: #0f1228; --green-800: #141a3a; --green-700: #1e2d6b;
  --green-600: #2a3f8f; --green-500: #4B7BEC; --green-400: #6B93F0;
  --green-300: #8DACF4; --green-200: #B3C9F8; --green-100: #D4E1FB;
  --green-50:  #eef2fc;
  --primary: #1e2d6b; --primary-hover: #2a3f8f; --primary-light: #D4E1FB;
  --sidebar-bg: #0f1228; --sidebar-dark: #0a0d1c; --sidebar-border: #1e2a4a;
  --sidebar-active-bg: #1e2d6b;
  --brand-green: #4B7BEC; --brand-green-light: #6B93F0; --danger-red: #F04A4B;
  --body-bg: #eef2fc;
  --sidebar-text: #B0B8D0; --sidebar-text-muted: #8A94B0;
  --sidebar-text-group: #6B7798; --sidebar-text-disabled: #4A5678;
}
[data-theme="blue"] .btn.primary{background:linear-gradient(135deg,#1e2d6b,#2a3f8f)}
[data-theme="blue"] .btn.primary:hover{background:linear-gradient(135deg,#2a3f8f,#4B7BEC)}
[data-theme="blue"] .nav button.active{background:#1e2d6b}
[data-theme="blue"] .nav button:hover{background:rgba(75,123,236,0.15)}
[data-theme="blue"] .nav button.active::before{background:var(--brand-green-light)}
[data-theme="blue"] .kpi-amount-card{background:linear-gradient(135deg,#0f1228,#141a3a,#1e2d6b)}
[data-theme="blue"] .kpi-amount-card::after{background:linear-gradient(90deg,#4B7BEC,#6B93F0)}
[data-theme="blue"] .kpi::after{background:#4B7BEC}
[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,#0f1228,#141a3a,#1e2d6b)!important}
[data-theme="blue"] .login-submit{background:linear-gradient(135deg,#1e2d6b,#2a3f8f)!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:rgba(75,123,236,0.15);color:#E2E8F0}
[data-theme="blue"] .dashboard-time-pill.active{background:var(--green-700);color:var(--white);border-color:var(--green-700)}
[data-theme="blue"] .dashboard-time-pill:hover:not(.active){border-color:var(--green-500);color:var(--green-700)}
[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 rgba(75,123,236,0.15)}
[data-theme="blue"] .login-field input:focus{border-color:var(--green-500);box-shadow:0 0 0 4px rgba(75,123,236,0.13)}
[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 rgba(75,123,236,.3)}
[data-theme="blue"] .bar.green{background:linear-gradient(90deg,#4B7BEC,#3B82F6)}
[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"] .btn:hover{border-color:var(--green-400)}
[data-theme="blue"] .login-submit{box-shadow:0 4px 14px rgba(30,45,107,.35)}
[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,#d6e2f8,#e8effb,#c8daf6)!important}
[data-theme="blue"] .login-panel{background:linear-gradient(180deg,rgba(255,255,255,.96),#dbe4fc)!important}
[data-theme="blue"] .login-card{background:rgba(255,255,255,.96);border-color:#B3C9F8}
[data-theme="blue"] .login-footer{color:#fff!important}
[data-theme="blue"] .brand-footer{color:rgba(255,255,255,.65)!important}
[data-theme="blue"] .login-captcha-btn{background:#eef2fc;color:#1e2d6b;border-color:#B3C9F8}
[data-theme="blue"] .login-captcha-btn:hover{background:#dbe4fc;border-color:#4B7BEC}

[data-theme="blue"] .login-visual{background:linear-gradient(135deg,#0f1228,#141a3a,#1e2d6b)!important}
[data-theme="blue"] .login-visual h1{color:#fff!important}
[data-theme="blue"] .login-visual p{color:rgba(255,255,255,.78)!important}
[data-theme="blue"] .login-service-tags span{background:rgba(255,255,255,.12)!important;color:#fff!important}
[data-theme="blue"] .login-service-tags span::before{background:#6B93F0!important;box-shadow:0 0 0 5px rgba(107,147,240,.14)!important}
[data-theme="blue"] .login-visual-copy h1{color:#fff!important}
[data-theme="blue"] .login-visual-copy h1 span{background:linear-gradient(90deg,#6B93F0,#8DACF4)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important}
[data-theme="blue"] .login-visual-copy p{color:rgba(255,255,255,.78)!important}
[data-theme="blue"] .login-subtitle::after{background:linear-gradient(135deg,#6B93F0,#3B6BD4)!important}
[data-theme="blue"] .login-feature-card{background:rgba(238,242,252,.95)!important;border-color:rgba(255,255,255,.8)!important;color:#1e2d6b!important}
[data-theme="blue"] .login-feature-card span{color:#3B6BD4!important}
[data-theme="blue"] .login-kicker{color:#B3C9F8!important}
[data-theme="blue"] .login-shell{box-shadow:0 28px 70px rgba(15,18,40,.18)!important}
[data-theme="blue"] .login-card{background:rgba(255,255,255,.96)!important;border-color:#B3C9F8!important;box-shadow:0 8px 32px rgba(15,18,40,.14)!important}
[data-theme="blue"] .login-card::before{background:#4B7BEC!important}
[data-theme="blue"] .login-logo{background:linear-gradient(135deg,#4B7BEC,#3B6BD4)!important;box-shadow:0 4px 12px rgba(75,123,236,.35)!important}
[data-theme="blue"] .login-card-brand strong,[data-theme="blue"] .login-card-brand{color:#1e2d6b!important}
[data-theme="blue"] .login-cloud-logo::before,
[data-theme="blue"] .login-cloud-logo::after,
[data-theme="blue"] .login-cloud-logo span{border-color:#3B6BD4!important}
[data-theme="blue"] .login-options button{color:#1e2d6b!important}
[data-theme="blue"] .login-field>span{color:#1e2d6b!important}
[data-theme="blue"] .forgot-pw{color:#1e2d6b!important}
[data-theme="blue"] .forgot-pw:hover{color:#4B7BEC!important}
[data-theme="blue"] .login-input-wrap{border-color:#B3C9F8!important}
[data-theme="blue"] .login-input-wrap input::placeholder{color:#B3C9F8!important}
[data-theme="blue"] .btn-login{background:linear-gradient(135deg,#1e2d6b,#2a3f8f)!important;box-shadow:0 4px 14px rgba(30,45,107,.35)!important}
[data-theme="blue"] .btn-login:hover{background:linear-gradient(135deg,#2a3f8f,#4B7BEC)!important}
[data-theme="blue"] .login-options input[type="checkbox"]{accent-color:#3B6BD4!important}
[data-theme="blue"] .login-shell::before{background:linear-gradient(108deg,transparent 0 58%,rgba(255,255,255,.34) 58.2% 100%)!important}
[data-theme="blue"] .login-shell::after{background:linear-gradient(90deg,transparent 0 62%,rgba(200,218,246,.36) 62% 100%)!important}
[data-theme="blue"] .login-panel::before{background:linear-gradient(135deg,rgba(219,228,252,.16),rgba(75,123,236,.12))!important}
[data-theme="blue"] .login-visual::before{background:rgba(255,255,255,.06)!important}

[data-theme="blue"] .bullet-status.good{background:#E8EFFB;color:#1e2d6b}
[data-theme="blue"] .stat-positive{color:#3B6BD4}
[data-theme="blue"] .login-logo{box-shadow:0 4px 12px rgba(75,123,236,.35)!important}
[data-theme="blue"] .sidebar-brand-icon{box-shadow:0 4px 12px rgba(75,123,236,.3)!important}
[data-theme="blue"] .login-field input:focus{box-shadow:0 0 0 4px rgba(75,123,236,.15)!important}
[data-theme="blue"] .topbar-search input:focus{box-shadow:0 0 0 3px rgba(75,123,236,.15)!important}
[data-theme="blue"] input:focus,[data-theme="blue"] select:focus,[data-theme="blue"] textarea:focus{box-shadow:0 0 0 3px rgba(75,123,236,.18)!important}
[data-theme="blue"] .login-submit{box-shadow:0 4px 14px rgba(30,45,107,.35)!important}
[data-theme="blue"] .login-submit:hover{box-shadow:0 6px 20px rgba(30,45,107,.45)!important}
[data-theme="blue"] .btn.primary{box-shadow:0 2px 8px rgba(30,45,107,.3)!important}
[data-theme="blue"] .btn.primary:hover{box-shadow:0 4px 12px rgba(30,45,107,.4)!important}
[data-theme="blue"] .kpi-badge{background:#E8EFFB!important;color:#1e2d6b!important}
[data-theme="blue"] .kpi-badge.success{background:#E8EFFB!important;color:#1e2d6b!important}
[data-theme="blue"] .kpi-badge.warning{background:#FFF3E0!important;color:#C2410C!important}
[data-theme="blue"] .login-subtitle::after{background:linear-gradient(135deg,#6B93F0,#3B6BD4)!important}
[data-theme="blue"] .login-title-block span{color:#4B7BEC!important}
[data-theme="blue"] .login-title-block h2{color:#1e2d6b!important}
[data-theme="blue"] .form-section{background:#f0f4fd!important;border-color:#d4e1fb!important}
[data-theme="blue"] .form-section h4{color:#1e2d6b!important}
[data-theme="blue"] .form-section p{color:#6b7a9!important}
[data-theme="blue"] .drawer-subtitle{background:#E8EFFB!important;border-color:#B3C9F8!important;color:#1e2d6b!important}
[data-theme="blue"] .config-panel{background:#f8fafd!important;border-color:#d4e1fb!important}
[data-theme="blue"] .config-subtitle{color:#1e2d6b!important}
[data-theme="blue"] .config-help{color:#6b7a99!important}
[data-theme="blue"] .project-form-section summary{background:linear-gradient(135deg,#f8fafd,#e8effb)!important}
[data-theme="blue"] table thead th{background:#f0f4fd!important}
[data-theme="blue"] tbody tr:nth-child(even){background:#f8fafd!important}
[data-theme="blue"] .empty{color:#8a94b0!important}
[data-theme="blue"] .nav small{background:rgba(75,123,236,0.08)!important;border-color:rgba(75,123,236,0.15)!important;color:rgba(255,255,255,0.45)!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,#e8effb,#fff,#f0f4fd)!important}
[data-theme="blue"] .drawer-head{border-bottom-color:#d4e1fb!important}
[data-theme="blue"] .forgot-desc{color:#6b7a99!important}
[data-theme="blue"] .modal-box h3{color:#1e2d6b!important}
[data-theme="blue"] .modal-box .modal-desc{color:#6b7a99!important}

[data-theme="blue"] .login-screen{background:linear-gradient(135deg,#d6e2f8,#eef2fc,#c8daf6)!important}
[data-theme="blue"] .login-shell{background:linear-gradient(120deg,#eef2fc,#e2ebf8,#c8daf6)!important}
[data-theme="blue"] .login-panel{background:#fff!important}
[data-theme="blue"] .login-card{background:#fff!important;border-color:#d4e1fb!important;box-shadow:0 8px 32px rgba(15,18,40,.12)!important}
@media(max-width:560px){[data-theme="blue"] .login-screen{background:#eef2fc!important}}
@media(max-width:860px){[data-theme="blue"] .login-shell{background-color:#eef2fc!important}}
[data-theme="blue"] .login-visual::before{background:rgba(255,255,255,.06)!important}
[data-theme="blue"] .login-visual::after{background:radial-gradient(circle at 25% 24%,rgba(255,255,255,.08),transparent 30%)!important;opacity:.4!important}
[data-theme="blue"] .login-screen::before{background:linear-gradient(145deg,rgba(75,123,236,.12),rgba(255,255,255,0))!important}
[data-theme="blue"] .login-screen::after{background:linear-gradient(20deg,rgba(75,123,236,.08),rgba(255,255,255,.78))!important}

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