/* ==========================================================================
   至上麒麟（中国）集团 · 财税协作 ERP
   Design system & application styles
   ========================================================================== */

:root {
  --bg: #f3f6fb;
  --bg-deep: #e7edf6;
  --surface: #ffffff;
  --surface-soft: #f7faff;
  --ink: #000;
  --ink-2: #2b3d56;
  --muted: #6d7f96;
  --muted-2: #93a3b7;
  --line: #e1e8f2;
  --line-strong: #d3deeb;
  --brand: #1b4fae;
  --brand-dark: #0a2b5f;
  --brand-deep: #061b3e;
  --brand-soft: #e9f0fb;
  --brand-mid: #4b78d1;
  --gold: #b78a40;
  --gold-soft: #f8f1e3;
  --danger: #bd4b47;
  --danger-soft: #fbebea;
  --warning: #b47a27;
  --warning-soft: #fbf2e4;
  --info: #2f749e;
  --info-soft: #eaf4f9;
  --violet: #6d5aab;
  --violet-soft: #f1eef8;
  --success: #26745e;
  --success-soft: #e9f3ef;
  --sidebar-w: 256px;
  --topbar-h: 72px;
  --radius-xl: 22px;
  --radius-lg: 17px;
  --radius: 13px;
  --radius-sm: 9px;
  --shadow-xs: 0 1px 2px rgba(11, 35, 74, .04);
  --shadow-sm: 0 6px 20px rgba(11, 35, 74, .055);
  --shadow-md: 0 14px 40px rgba(11, 35, 74, .10);
  --shadow-lg: 0 28px 80px rgba(5, 23, 52, .19);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-num: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
  --ease: cubic-bezier(.22, .8, .3, 1);
}

* { box-sizing: border-box; }
html { height: 100%; scroll-behavior: smooth; }
body { margin: 0; min-height: 100%; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  font-family: var(--font); font-size: 14px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body.modal-open { overflow: hidden; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button:focus, a:focus { outline: none; }
button:focus-visible, a:focus-visible { outline: 2px solid rgba(27, 79, 174, .38); outline-offset: 2px; }
button { cursor: pointer; }
a { color: var(--brand); text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
svg { display: block; }
.hidden { display: none !important; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-sm { width: 15px; height: 15px; }
.icon-lg { width: 22px; height: 22px; }
::selection { background: #cfe0fb; color: #0a2b5f; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c4d2e5; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #aebfd6; background-clip: content-box; }

/* --------------------------------------------------------------------------
   Login
   -------------------------------------------------------------------------- */
.login-screen {
  min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(430px, .9fr);
  background: #f6f8fc;
}
.login-visual {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: 44px 56px 30px; color: #edf3fc; isolation: isolate;
  background:
    radial-gradient(circle at 15% 12%, rgba(202, 166, 99, .13), transparent 28%),
    radial-gradient(circle at 80% 78%, rgba(56, 112, 224, .22), transparent 36%),
    linear-gradient(145deg, #081b3a 0%, #05142c 55%, #030d1d 100%);
}
.login-grid {
  position: absolute; inset: 0; z-index: -1; opacity: .14;
  background-image: linear-gradient(rgba(194, 214, 245, .42) 1px, transparent 1px), linear-gradient(90deg, rgba(194, 214, 245, .42) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(circle at 45% 40%, #000 20%, transparent 78%);
          mask-image: radial-gradient(circle at 45% 40%, #000 20%, transparent 78%);
}
.login-visual::after {
  content: ""; position: absolute; right: -140px; top: 38%; width: 460px; height: 460px;
  border: 1px solid rgba(224, 193, 129, .12); border-radius: 50%; box-shadow: 0 0 0 70px rgba(224, 193, 129, .025), 0 0 0 140px rgba(224, 193, 129, .018);
  z-index: -1;
}
.login-orb { position: absolute; border-radius: 999px; filter: blur(4px); opacity: .7; z-index: -1; }
.login-orb-one { width: 280px; height: 280px; right: -80px; top: -110px; background: radial-gradient(circle at 40% 40%, rgba(205, 168, 96, .22), transparent 65%); }
.login-orb-two { width: 360px; height: 360px; left: -160px; bottom: -140px; background: radial-gradient(circle at 50% 50%, rgba(57, 113, 223, .23), transparent 68%); }
.login-brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(150deg, #e8ce96, #c1974e); color: #102448; font-weight: 800; font-size: 21px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 20px rgba(0, 0, 0, .16); flex: 0 0 auto;
}
.brand-name { font-size: 19px; font-weight: 700; letter-spacing: .08em; line-height: 1.25; }
.brand-sub { margin-top: 2px; font-size: 8.5px; letter-spacing: .18em; color: #93a8c4; font-weight: 600; }
.brand-sub.dark { color: #8191a7; }
.brand-name.dark { color: var(--ink); }
.login-copy { margin: auto 0; padding: 46px 0 38px; max-width: 620px; }
.login-kicker {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 13px; border-radius: 99px;
  background: rgba(226, 237, 253, .07); border: 1px solid rgba(204, 223, 248, .14);
  color: #c4d4e9; font-size: 11.5px; letter-spacing: .08em;
}
.pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: #d9bd84; box-shadow: 0 0 0 0 rgba(217, 189, 132, .5); animation: pulse 2.2s infinite; }
.login-copy h1 {
  margin: 26px 0 20px; font-size: clamp(36px, 3.7vw, 55px); line-height: 1.22;
  letter-spacing: -.03em; font-weight: 600; color: #f6f3ea;
}
.login-copy h1::after { content: ""; display: block; width: 56px; height: 3px; margin-top: 26px; background: linear-gradient(90deg, #d4b573, transparent); border-radius: 2px; }
.login-copy p { color: #a3b6ce; font-size: 15px; line-height: 1.9; max-width: 490px; letter-spacing: .01em; }
.login-feature-row { display: grid; grid-template-columns: repeat(2, minmax(160px, 1fr)); gap: 10px 16px; margin-top: 34px; max-width: 480px; }
.login-feature {
  display: flex; align-items: center; gap: 10px; color: #cbd9ea; font-size: 12.5px;
  padding: 9px 0; border-bottom: 1px solid rgba(201, 222, 247, .09);
}
.feature-icon {
  width: 27px; height: 27px; border-radius: 8px; display: grid; place-items: center;
  background: rgba(205, 224, 249, .07); color: #d6bd8a; border: 1px solid rgba(205, 224, 249, .08);
}
.feature-icon .icon { width: 14px; height: 14px; }
.login-proof {
  display: flex; align-items: center; gap: 28px; padding: 22px 0 24px; margin-top: auto;
  border-top: 1px solid rgba(201, 222, 247, .1);
}
.proof-stat { display: flex; flex-direction: column; gap: 2px; }
.proof-stat strong { font-size: 25px; font-weight: 500; color: #f3f0e6; letter-spacing: -.02em; font-family: var(--font-num); }
.proof-stat strong span { font-size: 12px; color: #a1b4cb; margin-left: 2px; }
.proof-stat > span { font-size: 10.5px; letter-spacing: .12em; color: #7f95b1; }
.proof-divider { width: 1px; height: 29px; background: rgba(201, 222, 247, .12); }
.login-visual-foot { color: #637a98; font-size: 10px; letter-spacing: .03em; }
.login-panel { display: flex; flex-direction: column; padding: 45px 6vw 28px; background: #fbfdff; position: relative; }
.login-mobile-brand { display: none; align-items: center; gap: 10px; margin-bottom: 36px; }
.login-form-wrap { width: 100%; max-width: 400px; margin: auto; }
.login-heading .eyebrow { color: var(--brand); }
.login-heading h2 { margin: 8px 0 7px; font-size: 28px; font-weight: 700; letter-spacing: -.03em; }
.login-heading p { color: var(--muted); font-size: 13px; }
.login-form { margin-top: 28px; }
.input-with-icon { position: relative; }
.input-with-icon > .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #8b9db4; width: 17px; height: 17px; pointer-events: none; z-index: 1; }
.input-with-icon input { padding-left: 42px !important; }
.login-form .field + .field { margin-top: 15px; }
.login-form .field > label { font-size: 11px; }
.btn-block { width: 100%; }
.demo-divider { display: flex; align-items: center; gap: 12px; margin: 26px 0 12px; color: #9aa8a1; font-size: 10.5px; letter-spacing: .05em; }
.demo-divider::before, .demo-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.demo-accounts { display: flex; flex-direction: column; gap: 7px; }
.demo-account {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px; text-align: left;
  background: #fff; border: 1px solid var(--line); border-radius: 11px;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.demo-account:hover { border-color: #b7cbe6; box-shadow: 0 5px 16px rgba(18, 49, 94, .08); transform: translateY(-1px); }
.demo-avatar { width: 32px; height: 32px; border-radius: 10px; background: var(--avatar); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 600; flex: 0 0 auto; }
.demo-info { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.demo-info strong { font-size: 12.5px; font-weight: 600; }
.demo-info small { color: var(--muted); font-size: 10.5px; margin-top: 2px; }
.demo-arrow { margin-left: auto; width: 14px; height: 14px; color: #93a6bd; }
.demo-hint { margin-top: 12px; display: flex; gap: 6px; align-items: flex-start; font-size: 10.5px; line-height: 1.7; color: #7f8fa4; }
.demo-hint .icon { width: 13px; height: 13px; margin-top: 2px; flex: 0 0 auto; color: #9baabd; }
.login-security { margin-top: 24px; padding-top: 15px; border-top: 1px solid #e8eef7; display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: #8d9db1; }
.login-security .icon { width: 13px; height: 13px; color: #849bb7; }
.login-panel-foot { margin-top: auto; padding-top: 32px; text-align: center; color: #94a3b6; font-size: 10.5px; }
.login-panel-foot strong { color: #62758d; font-weight: 600; }
#show-password { font-size: 11px; padding: 0; }
.form-error {
  background: var(--danger-soft); color: #a23d35; border: 1px solid #f1d2ce;
  padding: 9px 12px; border-radius: 9px; font-size: 12px; margin-bottom: 12px;
}
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(217, 188, 130, .45); } 70% { box-shadow: 0 0 0 7px rgba(217, 188, 130, 0); } 100% { box-shadow: 0 0 0 0 rgba(217, 188, 130, 0); } }

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */
.app { min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); z-index: 50;
  display: flex; flex-direction: column; padding: 23px 16px 16px;
  background:
    radial-gradient(circle at 20% 0%, rgba(194, 155, 86, .1), transparent 32%),
    radial-gradient(circle at 85% 72%, rgba(40, 98, 210, .1), transparent 40%),
    linear-gradient(178deg, #0a2147 0%, #071a36 55%, #041226 100%);
  color: #c2d0e2; border-right: 1px solid rgba(255, 255, 255, .045);
  transition: transform .28s var(--ease);
}
.sidebar-brand { display: flex; align-items: center; gap: 11px; padding: 0 8px 22px; }
.sidebar .brand-mark { width: 36px; height: 36px; border-radius: 10px; font-size: 18px; }
.sidebar .brand-name { color: #f2f0e8; font-size: 16.5px; letter-spacing: .07em; }
.sidebar .brand-sub { color: #7790b0; font-size: 7.5px; letter-spacing: .17em; }
.workspace-switch {
  display: flex; align-items: center; gap: 9px; padding: 9px 10px; margin: 0 2px 17px;
  border: 1px solid rgba(199, 220, 247, .1); border-radius: 10px;
  background: rgba(255, 255, 255, .035); color: #c5d4e6;
}
.workspace-logo { width: 24px; height: 24px; border-radius: 7px; background: rgba(211, 178, 112, .13); border: 1px solid rgba(211, 178, 112, .17); display: grid; place-items: center; color: #d4b779; flex: 0 0 auto; }
.workspace-logo .icon { width: 12px; height: 12px; }
.workspace-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.4; }
.workspace-text strong { font-size: 10.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #d8e3f0; }
.workspace-text small { font-size: 8px; color: #7189a8; letter-spacing: .03em; }
.workspace-switch > .icon { margin-left: auto; width: 12px; height: 12px; color: #7189a8; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 0 5px 8px; scrollbar-width: thin; scrollbar-color: #28456a transparent; }
.nav-label { padding: 15px 9px 6px; font-size: 9px; letter-spacing: .16em; color: #607a9b; font-weight: 600; }
.nav-item {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; margin-bottom: 2px; border: 0; border-radius: 9px;
  background: transparent; color: #a5b8ce; text-align: left; font-size: 12.5px;
  transition: background .18s, color .18s;
}
.nav-item > .icon { width: 16px; height: 16px; color: #7c93b0; transition: color .18s; }
.nav-item:hover { background: rgba(255, 255, 255, .05); color: #eff4fb; }
.nav-item:hover > .icon { color: #b8cbe2; }
.nav-item.active { background: linear-gradient(90deg, rgba(69, 118, 210, .24), rgba(69, 118, 210, .07)); color: #f5f7fc; }
.nav-item.active::before { content: ""; position: absolute; left: -5px; top: 9px; bottom: 9px; width: 2px; border-radius: 3px; background: #d4b270; box-shadow: 0 0 9px rgba(212, 178, 112, .55); }
.nav-item.active > .icon { color: #d9c08a; }
.nav-item .nav-text { flex: 1; letter-spacing: .015em; }
.nav-badge {
  min-width: 17px; height: 17px; padding: 0 5px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(211, 178, 112, .15); color: #e4cb98; font-size: 9px; font-weight: 600; line-height: 1;
}
.nav-badge.alert { background: rgba(190, 76, 72, .18); color: #f0b9b4; }
.nav-item.active .nav-badge { background: rgba(216, 183, 119, .19); }
.sidebar-foot { padding: 13px 8px 0; border-top: 1px solid rgba(199, 220, 247, .08); }
.system-status { display: flex; align-items: center; gap: 7px; color: #7189a6; font-size: 9.5px; letter-spacing: .03em; }
.status-dot { width: 5px; height: 5px; background: #71b39c; border-radius: 50%; box-shadow: 0 0 0 3px rgba(113, 179, 156, .09); }
.sidebar-version { color: #526d8f; font-size: 8.5px; margin-top: 5px; letter-spacing: .04em; }

.app-main { min-height: 100vh; margin-left: var(--sidebar-w); }
.topbar {
  position: sticky; top: 0; z-index: 40; height: var(--topbar-h);
  display: flex; align-items: center; gap: 20px; padding: 0 30px;
  background: rgba(246, 249, 254, .9); backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(214, 225, 239, .85);
}
.topbar-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.mobile-menu-btn { display: none; }
.topbar-search { position: relative; width: min(380px, 100%); }
.topbar-search .search-box {
  display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 11px;
  border: 1px solid transparent; border-radius: 10px; background: #edf2fa;
  transition: background .18s, border-color .18s, box-shadow .18s;
}
.topbar-search .search-box:focus-within { background: #fff; border-color: #bfd2eb; box-shadow: 0 0 0 3px rgba(27, 79, 174, .08); }
.topbar-search .search-box > .icon { color: #8295ad; width: 16px; height: 16px; }
.topbar-search input { border: 0; outline: 0; background: transparent; width: 100%; font-size: 12px; color: var(--ink); }
.topbar-search input::placeholder { color: #8e9fb3; }
.topbar-search kbd { padding: 1px 5px; border-radius: 4px; background: #fff; border: 1px solid #dbe5f1; color: #8c9db2; font-size: 9px; font-family: var(--font); line-height: 1.6; white-space: nowrap; }
.topbar-right { display: flex; align-items: center; gap: 9px; }
.topbar-date { font-size: 10.5px; color: #798ca3; letter-spacing: .03em; margin-right: 4px; white-space: nowrap; }
.icon-btn {
  position: relative; width: 34px; height: 34px; border-radius: 9px; border: 1px solid transparent;
  background: transparent; display: grid; place-items: center; color: #63788f;
  transition: background .18s, border-color .18s, color .18s;
}
.icon-btn:hover { background: #fff; border-color: var(--line); color: var(--ink); }
.icon-btn .icon { width: 18px; height: 18px; }
.topbar .mobile-menu-btn { display: none; }
.icon-btn.has-alert::after {
  content: ""; position: absolute; right: 7px; top: 6px; width: 6px; height: 6px; border-radius: 50%;
  background: #c95a4c; border: 1.5px solid #f6f9fe;
}
.timer-pill {
  display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 7px 0 10px;
  border-radius: 9px; border: 1px solid #d8e5f2; background: #fff; color: var(--ink);
  box-shadow: var(--shadow-xs); max-width: 335px;
}
.timer-pill .timer-pulse { width: 6px; height: 6px; border-radius: 50%; background: #2563eb; animation: pulse 2s infinite; flex: 0 0 auto; }
.timer-pill .timer-task { font-size: 10.5px; max-width: 105px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #52677d; }
.timer-pill .timer-time { font-family: var(--font-num); font-size: 10.5px; color: #1d4ed8; font-weight: 600; letter-spacing: .02em; min-width: 0; white-space: nowrap; }
.timer-stop { width: 23px; height: 23px; border: 0; border-radius: 6px; background: #eef3f9; display: grid; place-items: center; color: #9a5d53; }
.timer-stop:hover { background: #fbecea; }
.timer-stop .icon { width: 11px; height: 11px; }
.topbar-divider { width: 1px; height: 24px; background: var(--line-strong); margin: 0 3px; }
.user-button { display: flex; align-items: center; gap: 9px; padding: 4px 5px 4px 4px; border: 1px solid transparent; border-radius: 10px; background: transparent; text-align: left; }
.user-button:hover { background: #fff; border-color: var(--line); }
.user-meta { display: flex; flex-direction: column; line-height: 1.35; }
.user-meta strong { font-size: 11.5px; font-weight: 600; }
.user-meta span { font-size: 9px; color: #8494a8; margin-top: 1px; }
.user-button > .icon { width: 13px; height: 13px; color: #8c9db2; }
.topbar-search-wrap { position: relative; z-index: 20; }

.view { padding: 27px 30px 56px; max-width: 1600px; margin: 0 auto; outline: none; animation: viewIn .36s var(--ease); }
@keyframes viewIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
.mobile-overlay { display: none; }

/* Dropdowns */
.dropdown-panel {
  position: absolute; top: calc(100% + 10px); right: 0; width: 350px; z-index: 90;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-md); overflow: hidden; animation: popIn .18s var(--ease);
}
@keyframes popIn { from { opacity: 0; transform: translateY(-4px) scale(.99); } to { opacity: 1; transform: none; } }
.dropdown-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.dropdown-head strong { font-size: 12px; font-weight: 600; }
.dropdown-head span { font-size: 10px; color: var(--muted); }
.dropdown-list { max-height: 370px; overflow-y: auto; }
.dropdown-item { display: flex; gap: 10px; padding: 11px 15px; border-bottom: 1px solid #eef3f9; cursor: pointer; transition: background .15s; }
.dropdown-item:last-child { border-bottom: 0; }
.dropdown-item:hover { background: #f7faff; }
.dropdown-icon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: 0 0 auto; }
.dropdown-icon .icon { width: 14px; height: 14px; }
.dropdown-item-body { min-width: 0; flex: 1; }
.dropdown-item-title { font-size: 11.5px; color: var(--ink); }
.dropdown-item-title strong { font-weight: 600; }
.dropdown-item-desc { font-size: 10.5px; color: var(--muted); margin-top: 2px; line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dropdown-empty { padding: 32px 20px; text-align: center; color: #95a39c; font-size: 11px; }
.dropdown-item .unread-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--brand); margin-top: 6px; flex: 0 0 auto; }
.profile-panel { width: 235px; padding: 8px; }
.profile-info { padding: 11px 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 5px; }
.profile-info strong { font-size: 12.5px; display: block; }
.profile-info span { font-size: 10px; color: var(--muted); display: block; margin-top: 2px; }
.profile-action { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 9px; border: 0; background: transparent; border-radius: 7px; font-size: 11px; color: #546860; text-align: left; }
.profile-action:hover { background: #f5f8f4; }
.profile-action .icon { width: 14px; height: 14px; color: #83968c; }
.profile-action.danger { color: var(--danger); }
.profile-action.danger .icon { color: var(--danger); }

/* Search results */
.search-panel {
  position: absolute; top: calc(100% + 9px); left: 0; width: min(460px, calc(100vw - 60px)); z-index: 95;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-md);
  overflow: hidden; animation: popIn .16s var(--ease);
}
.search-panel-head { padding: 9px 13px; font-size: 9.5px; color: #94a39b; letter-spacing: .06em; border-bottom: 1px solid #eef3f9; display: flex; justify-content: space-between; }
.search-result { display: flex; align-items: center; gap: 10px; padding: 10px 13px; cursor: pointer; border-bottom: 1px solid #f4f6f2; }
.search-result:hover { background: #f7faff; }
.search-result-icon { width: 27px; height: 27px; border-radius: 8px; display: grid; place-items: center; flex: 0 0 auto; }
.search-result-icon .icon { width: 13px; height: 13px; }
.search-result-main { min-width: 0; flex: 1; }
.search-result-main strong { font-size: 11.5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.search-result-main span { display: block; font-size: 9.5px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-result > .icon { width: 12px; height: 12px; color: #a3b0a9; }
.search-empty { padding: 30px 16px; text-align: center; font-size: 11px; color: #94a29b; }
.search-loading { padding: 20px; text-align: center; color: var(--muted); }
.search-backdrop { position: fixed; inset: 0; z-index: 80; background: transparent; }

/* --------------------------------------------------------------------------
   Page primitives
   -------------------------------------------------------------------------- */
.eyebrow { font-size: 9.5px; font-weight: 700; letter-spacing: .16em; color: var(--brand); text-transform: uppercase; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head-main { min-width: 260px; }
.page-title { margin-top: 6px; font-size: 27px; line-height: 1.3; font-weight: 700; letter-spacing: -.035em; color: var(--ink); }
.page-subtitle { margin-top: 6px; color: var(--muted); font-size: 11.5px; line-height: 1.7; }
.page-subtitle strong { color: #3d5573; font-weight: 600; }
.page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.page-date-chip {
  display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; color: #60766c;
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcff; margin-bottom: 4px;
}
.page-date-chip .icon { width: 13px; height: 13px; color: #90a198; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 14px; border-radius: 9px; border: 1px solid transparent;
  font-size: 11.5px; font-weight: 500; line-height: 1; white-space: nowrap;
  transition: background .18s, border-color .18s, color .18s, box-shadow .18s, transform .12s;
}
.btn .icon { width: 14px; height: 14px; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 3px 10px rgba(27, 79, 174, .16); }
.btn-primary:hover { background: #123d82; box-shadow: 0 5px 15px rgba(27, 79, 174, .22); }
.btn-secondary { background: #fff; border-color: var(--line-strong); color: #40584f; box-shadow: var(--shadow-xs); }
.btn-secondary:hover { border-color: #b9ccc1; background: #fbfcff; }
.btn-ghost { background: transparent; color: #5c7168; }
.btn-ghost:hover { background: #edf3fb; color: var(--ink); }
.btn-soft { background: var(--brand-soft); color: var(--brand); }
.btn-soft:hover { background: #dcece5; }
.btn.active { background: var(--brand-soft); color: var(--brand); border-color: #cfe4d9; }
.btn-gold { background: var(--gold-soft); color: #90651f; border-color: #efe0c4; }
.btn-gold:hover { background: #f4e8d3; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #a83f36; }
.btn-danger-soft { background: var(--danger-soft); color: var(--danger); border-color: #f2d6d2; }
.btn-danger-soft:hover { background: #f7dedb; }
.btn-sm { height: 29px; padding: 0 10px; border-radius: 7px; font-size: 10.5px; gap: 5px; }
.btn-sm .icon { width: 12px; height: 12px; }
.btn-lg { height: 43px; padding: 0 19px; font-size: 12.5px; border-radius: 10px; }
.btn-icon { width: 32px; height: 32px; padding: 0; border-radius: 8px; }
.btn-icon .icon { width: 15px; height: 15px; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn.loading { pointer-events: none; opacity: .72; }
.btn.loading .icon { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.link-btn { border: 0; padding: 0; background: transparent; color: var(--brand); font-size: 11px; font-weight: 500; }
.link-btn:hover { color: #0f5446; text-decoration: underline; text-underline-offset: 3px; }
.link-btn.subtle { color: #8c9d94; font-weight: 400; }
.link-btn.danger { color: var(--danger); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px 0; }
.card-head.flush { padding-bottom: 0; }
.card-title { font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: -.005em; display: flex; align-items: center; gap: 7px; }
.card-title .icon { width: 15px; height: 15px; color: #7b8f85; }
.card-sub { margin-top: 3px; font-size: 10.5px; color: var(--muted); }
.card-body { padding: 18px 20px; }
.card-body.tight { padding: 13px 20px; }
.card-footer { padding: 12px 20px; border-top: 1px solid #eef3f9; display: flex; justify-content: space-between; align-items: center; font-size: 10.5px; color: var(--muted); }
.card-link { font-size: 10.5px; color: #6a7f99; display: inline-flex; align-items: center; gap: 3px; }
.card-link:hover { color: var(--brand); }
.card-link .icon { width: 11px; height: 11px; }

.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-bottom: 17px; }
.stat-card {
  position: relative; overflow: hidden; padding: 16px 17px 15px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
  min-height: 122px; display: flex; flex-direction: column; justify-content: space-between;
}
.stat-card::after { content: ""; position: absolute; right: -32px; bottom: -40px; width: 105px; height: 105px; border-radius: 50%; background: var(--stat-soft, #f3f7fc); opacity: .75; }
.stat-card-top { display: flex; align-items: flex-start; justify-content: space-between; position: relative; z-index: 1; gap: 8px; }
.stat-label { font-size: 10.5px; color: #6c819b; letter-spacing: .015em; display: flex; align-items: center; gap: 4px; }
.stat-label .icon { width: 12px; height: 12px; color: #9aaca2; }
.stat-icon { width: 31px; height: 31px; border-radius: 9px; background: var(--stat-soft, var(--brand-soft)); color: var(--stat-color, var(--brand)); display: grid; place-items: center; flex: 0 0 auto; }
.stat-icon .icon { width: 15px; height: 15px; }
.stat-value { position: relative; z-index: 1; margin-top: 13px; font-size: 26px; line-height: 1.1; font-weight: 600; letter-spacing: -.035em; font-family: var(--font-num); color: var(--ink); }
.stat-value .unit { font-size: 12px; color: #809188; margin-left: 3px; font-weight: 400; letter-spacing: 0; }
.stat-value .prefix { font-size: 14px; color: #71847a; margin-right: 1px; font-weight: 400; }
.stat-foot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin-top: 8px; gap: 6px; }
.stat-trend { display: inline-flex; align-items: center; gap: 3px; font-size: 9.5px; color: #6c8176; }
.stat-trend .icon { width: 10px; height: 10px; }
.stat-trend.up { color: var(--brand); }
.stat-trend.warn { color: var(--warning); }
.stat-trend.danger { color: var(--danger); }
.stat-note { font-size: 9.5px; color: #9aa8a0; }
.stat-card.gold { --stat-soft: var(--gold-soft); --stat-color: #a57628; }
.stat-card.blue { --stat-soft: var(--info-soft); --stat-color: var(--info); }
.stat-card.red { --stat-soft: var(--danger-soft); --stat-color: var(--danger); }
.stat-card.violet { --stat-soft: var(--violet-soft); --stat-color: var(--violet); }

.dash-grid { display: grid; grid-template-columns: minmax(0, 1.58fr) minmax(315px, .82fr); gap: 16px; align-items: start; }
.dash-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dash-grid-balanced { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.span-2 { grid-column: span 2; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }

/* Avatars */
.avatar {
  width: 30px; height: 30px; border-radius: 9px; background: var(--avatar, #2b7a68); color: #fff;
  display: inline-grid; place-items: center; font-size: 11px; font-weight: 600; flex: 0 0 auto;
  letter-spacing: .02em; position: relative; overflow: hidden;
}
.avatar img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: inherit; }
.avatar.sm { width: 24px; height: 24px; border-radius: 7px; font-size: 9px; }
.avatar.xs { width: 21px; height: 21px; border-radius: 6px; font-size: 8px; }
.avatar.lg { width: 42px; height: 42px; border-radius: 12px; font-size: 15px; }
.avatar.xl { width: 54px; height: 54px; border-radius: 15px; font-size: 19px; }
.avatar.soft { background: var(--avatar-soft, #e9f2ed); color: var(--avatar, #1f6e5c); }
.avatar-ring { box-shadow: 0 0 0 2px #fff; }
.avatar-stack { display: flex; align-items: center; }
.avatar-editor { display: flex; align-items: center; gap: 17px; padding: 3px 0 6px; }
.avatar-editor-preview {
  width: 96px; height: 96px; flex: 0 0 auto; display: grid; place-items: center;
  overflow: hidden; border: 1px solid #dbe8f6; border-radius: 24px;
  background: linear-gradient(145deg, #eef5ff, #e3eefc); color: #2563eb;
  font-size: 32px; font-weight: 650; box-shadow: 0 6px 18px rgba(37, 99, 235, .08);
}
.avatar-editor-preview img { width: 100%; height: 100%; display: block; object-fit: cover; }
.avatar-editor-copy { min-width: 0; flex: 1; }
.avatar-editor-copy strong { color: #05070b; font-size: 12px; font-weight: 600; }
.avatar-editor-copy p { margin: 4px 0 10px; color: #70839a; font-size: 9px; line-height: 1.65; }
.avatar-editor-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.avatar-editor-actions .btn { width: auto; }
.avatar-editor-note {
  display: flex; align-items: flex-start; gap: 6px; margin-top: 13px; padding: 9px 10px;
  border: 1px solid #e4edf8; border-radius: 8px; background: #f8fbff;
  color: #71859c; font-size: 8px; line-height: 1.6;
}
.avatar-editor-note .icon { width: 12px; height: 12px; flex: 0 0 auto; margin-top: 1px; color: #2563eb; }
.avatar-stack .avatar + .avatar { margin-left: -6px; }
.user-inline { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.user-inline-name { font-size: 11px; color: #42584e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-inline .avatar { flex: 0 0 auto; }

/* Badges */
.badge {
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px;
  border-radius: 6px; font-size: 9.5px; line-height: 1; white-space: nowrap; font-weight: 500;
  background: #eef3f9; color: #65786d; border: 1px solid transparent;
}
.badge::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .8; }
.badge.no-dot::before { display: none; }
.badge .icon { width: 10px; height: 10px; }
.badge-green { background: var(--brand-soft); color: #1b705d; }
.badge-amber { background: var(--warning-soft); color: #9b681d; }
.badge-red { background: var(--danger-soft); color: #ad433a; }
.badge-blue { background: var(--info-soft); color: #356a9a; }
.badge-violet { background: var(--violet-soft); color: #6d5895; }
.badge-gold { background: var(--gold-soft); color: #90651f; }
.badge-gray { background: #f1f3f0; color: #73827a; }
.badge-dark { background: #243b34; color: #e9efe9; }
.badge-solid-green { background: #e4f2eb; color: #176a57; border-color: #cfe6da; }
.status-pill { display: inline-flex; align-items: center; gap: 5px; height: 23px; padding: 0 8px; border-radius: 6px; font-size: 9.5px; font-weight: 500; white-space: nowrap; }
.status-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status-pill.active, .status-pill.approved, .status-pill.done, .status-pill.published { background: #e9f4ef; color: #1d725d; }
.status-pill.pending, .status-pill.review, .status-pill.warning, .status-pill.critical { background: #fbf2e2; color: #9e6b1f; }
.status-pill.expired, .status-pill.rejected, .status-pill.urgent { background: #faece9; color: #ad463c; }
.status-pill.draft, .status-pill.todo, .status-pill.paused { background: #f0f2ef; color: #74827a; }
.status-pill.in_progress, .status-pill.info, .status-pill.system { background: #edf3f9; color: #396b98; }
.status-pill.archived, .status-pill.normal { background: #f2f4f1; color: #6e8075; }
.status-pill.gold { background: #f7efe0; color: #936a24; }
.priority { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; color: #6b7d73; white-space: nowrap; }
.priority::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #a6b2aa; }
.priority.urgent { color: #b3453c; }
.priority.urgent::before { background: #c8584d; box-shadow: 0 0 0 3px #f8e8e5; }
.priority.high { color: #996a21; }
.priority.high::before { background: #c69240; }
.priority.medium { color: #4d718f; }
.priority.medium::before { background: #7396b2; }
.priority.low { color: #7c8c83; }
.priority.low::before { background: #99aabf; }

.tag { display: inline-flex; align-items: center; height: 21px; padding: 0 7px; border-radius: 5px; background: #f5f7f3; color: #6a7e73; font-size: 9px; white-space: nowrap; border: 1px solid #eaf0f7; }
.tag.gold { background: #fbf5e9; color: #906820; border-color: #f3e8d3; }
.tag.red { background: #fbeeeb; color: #a9473d; border-color: #f5ddd9; }
.tag-list { display: flex; flex-wrap: wrap; gap: 4px; }

/* Tables */
.table-wrap { width: 100%; overflow-x: auto; }
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 780px; }
.data-table th {
  height: 38px; padding: 0 12px; text-align: left; font-size: 9.5px; font-weight: 500;
  color: #7d8fa6; letter-spacing: .03em; background: #f7faff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.data-table th:first-child { padding-left: 20px; }
.data-table th:last-child { padding-right: 20px; }
.data-table td { padding: 13px 12px; border-bottom: 1px solid #edf2f9; vertical-align: middle; font-size: 11px; color: #52665c; }
.data-table td:first-child { padding-left: 20px; }
.data-table td:last-child { padding-right: 20px; }
.data-table tbody tr { transition: background .15s; cursor: default; }
.data-table tbody tr:hover { background: #fbfcff; }
.data-table tbody tr.clickable { cursor: pointer; }
.data-table tbody tr.clickable:hover { background: #f7faff; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.cell-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cell-avatar { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 600; flex: 0 0 auto; }
.cell-title { font-size: 11.5px; color: #293d34; font-weight: 500; line-height: 1.45; display: flex; align-items: center; gap: 5px; }
.cell-sub { font-size: 9.5px; color: #8395aa; margin-top: 2px; line-height: 1.4; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cell-sub .icon { width: 10px; height: 10px; }
.cell-amount { font-family: var(--font-num); font-size: 12px; font-weight: 600; color: #293e35; letter-spacing: -.01em; white-space: nowrap; }
.cell-date { font-size: 10.5px; color: #60756b; white-space: nowrap; }
.cell-date small { display: block; color: #9aa89f; font-size: 9px; }
.cell-actions { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.table-footer { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-top: 1px solid var(--line); font-size: 10px; color: var(--muted); }
.table-count strong { color: #41574c; font-weight: 600; }
.row-link { color: #426257; font-weight: 500; }
.row-link:hover { color: var(--brand); }
.cell-alert { display: inline-flex; align-items: center; gap: 4px; }
.cell-alert .icon { width: 11px; height: 11px; }
.text-danger { color: var(--danger) !important; }
.text-warning { color: var(--warning) !important; }
.text-success { color: var(--brand) !important; }
.text-muted { color: var(--muted) !important; }
.text-strong { color: var(--ink); font-weight: 600; }
.text-sm { font-size: 10.5px; }
.text-xs { font-size: 9.5px; }
.mono { font-family: var(--font-num); letter-spacing: .01em; }

/* Toolbar / filters */
.toolbar {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 13px 18px; border-bottom: 1px solid var(--line);
}
.toolbar-flat { padding: 0 0 16px; border-bottom: 0; }
.toolbar-spacer { flex: 1; }
.search-field { position: relative; min-width: 210px; flex: 1; max-width: 300px; }
.search-field .icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: #92a39a; pointer-events: none; }
.search-field input { width: 100%; height: 33px; padding: 0 10px 0 32px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; font-size: 11px; color: var(--ink); outline: none; transition: border-color .18s, box-shadow .18s; }
.search-field input::placeholder { color: #8a9cb1; }
.search-field input:focus { border-color: #a6c5b6; box-shadow: 0 0 0 3px rgba(27, 79, 174, .08); }
.filter-select { height: 33px; padding: 0 28px 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2372877d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 9px center; font-size: 10.5px; color: #5a6f65; appearance: none; min-width: 108px; outline: none; transition: border-color .18s, box-shadow .18s; }
.filter-select:focus { border-color: #b8d0c3; box-shadow: 0 0 0 3px rgba(27, 79, 174, .07); }
.filter-chip { display: inline-flex; align-items: center; gap: 5px; height: 29px; padding: 0 9px; border-radius: 7px; border: 1px solid var(--line); background: #fff; color: #6a7c72; font-size: 10px; }
.filter-chip.active { background: var(--brand-soft); border-color: #cfe4d9; color: var(--brand); }
.view-switch { display: inline-flex; align-items: center; padding: 2px; gap: 2px; background: #eef3f9; border-radius: 8px; }
.view-switch button { height: 26px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: #7e8f85; display: inline-flex; align-items: center; gap: 4px; font-size: 10px; }
.view-switch button .icon { width: 12px; height: 12px; }
.view-switch button.active { background: #fff; color: #3b5449; box-shadow: 0 1px 3px rgba(20, 50, 40, .08); }
.filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-tabs { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.filter-tab { height: 30px; padding: 0 11px; border-radius: 7px; border: 0; background: transparent; color: #72867a; font-size: 10.5px; display: inline-flex; align-items: center; gap: 5px; }
.filter-tab:hover { background: #f1f5fb; }
.filter-tab.active { background: #223b58; color: #f2f5ef; }
.filter-tab .count { font-size: 8.5px; opacity: .72; }

/* Tabs */
.tabs { display: flex; align-items: center; gap: 24px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.tab { position: relative; padding: 0 1px 11px; border: 0; background: none; color: #7b8c82; font-size: 11.5px; display: inline-flex; align-items: center; gap: 6px; }
.tab:hover { color: #3b5448; }
.tab.active { color: #0a2b5f; font-weight: 600; }
.tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--brand); border-radius: 2px; }
.tab .tab-count { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 5px; background: #eff3ee; color: #7d8c83; font-size: 8.5px; display: inline-flex; align-items: center; justify-content: center; }
.tab.active .tab-count { background: var(--brand-soft); color: var(--brand); }

/* Forms */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.span-all { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .field-label { font-size: 10.5px; font-weight: 500; color: #43594e; display: flex; align-items: center; gap: 4px; }
.field > label .req, .req { color: #c0614f; font-size: 10px; }
.field-hint { font-size: 9.5px; color: #8496ab; line-height: 1.55; }
.label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.input, .field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea {
  width: 100%; height: 37px; border: 1px solid var(--line-strong); border-radius: 8px;
  background: #fff; padding: 0 11px; font-size: 11.5px; color: var(--ink);
  outline: 0; transition: border-color .18s, box-shadow .18s, background .18s;
}
.field textarea { height: auto; min-height: 92px; padding: 9px 11px; line-height: 1.7; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2372877d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; padding-right: 30px; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus { border-color: #a6c5b6; box-shadow: 0 0 0 3px rgba(27, 79, 174, .08); }
.field input::placeholder, .field textarea::placeholder { color: #94a5ba; }
.field input:disabled, .field select:disabled, .field textarea:disabled { background: #f6f8f4; color: #89978f; cursor: not-allowed; }
.form-section { padding: 18px 0; border-bottom: 1px solid #edf2f9; }
.form-section:first-child { padding-top: 0; }
.form-section:last-child { border-bottom: 0; padding-bottom: 0; }
.form-section-title { display: flex; align-items: center; gap: 7px; margin-bottom: 13px; font-size: 11.5px; font-weight: 600; color: #2d4439; }
.form-section-title .step-num { width: 19px; height: 19px; border-radius: 6px; background: var(--brand-soft); color: var(--brand); font-size: 9.5px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-num); }
.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 16px; }
.form-note { padding: 10px 12px; border-radius: 8px; background: #f7faff; border: 1px solid #e8eee8; font-size: 10px; color: #6c819b; line-height: 1.65; display: flex; gap: 6px; }
.form-note .icon { width: 13px; height: 13px; color: #8aa396; margin-top: 1px; flex: 0 0 auto; }
.check-row { display: flex; align-items: center; gap: 7px; font-size: 10.5px; color: #5a6d63; }
.checkbox { width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid #c9d4cc; appearance: none; display: grid; place-items: center; background: #fff; cursor: pointer; }
.checkbox:checked { background: var(--brand); border-color: var(--brand); }
.checkbox:checked::after { content: ""; width: 7px; height: 4px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(-45deg) translateY(-1px); }
.switch { position: relative; width: 32px; height: 18px; border-radius: 99px; background: #dbe2db; border: 0; padding: 0; transition: background .18s; }
.switch::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .16); transition: transform .18s; }
.switch.on { background: var(--brand); }
.switch.on::after { transform: translateX(14px); }
.amount-input { position: relative; }
.amount-input > span { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 11px; color: #8a9a91; }
.amount-input input { padding-left: 25px; font-family: var(--font-num); font-weight: 600; letter-spacing: .01em; }
.radio-cards { display: flex; gap: 7px; flex-wrap: wrap; }
.radio-card { position: relative; }
.radio-card input { position: absolute; opacity: 0; }
.radio-card span { display: inline-flex; align-items: center; gap: 5px; height: 33px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; font-size: 10.5px; color: #5f7368; cursor: pointer; }
.radio-card input:checked + span { border-color: #9db9e0; background: var(--brand-soft); color: #0a2b5f; font-weight: 500; }

/* Empty & loading */
.empty-state { padding: 48px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.empty-icon { width: 44px; height: 44px; border-radius: 13px; background: #f3f7fc; color: #9aaba1; display: grid; place-items: center; margin-bottom: 4px; }
.empty-icon .icon { width: 21px; height: 21px; }
.empty-title { font-size: 12px; font-weight: 600; color: #50665b; }
.empty-text { font-size: 10.5px; color: #8496ab; max-width: 300px; line-height: 1.7; }
.empty-state .btn { margin-top: 4px; }
.skeleton { border-radius: 8px; background: linear-gradient(90deg, #ecf1f9 25%, #f7faff 37%, #ecf1f9 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; }
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.loading-block { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 60px 20px; color: #7d8fa6; font-size: 11px; }
.loading-block .icon { animation: spin 1s linear infinite; }
.spinner { width: 15px; height: 15px; border: 2px solid #dae3ef; border-top-color: var(--brand); border-radius: 50%; animation: spin .8s linear infinite; }

/* Modal / drawer */
.modal-root { position: relative; z-index: 200; }
.modal-overlay {
  position: fixed; inset: 0; background: rgba(10, 28, 23, .42); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: overlayIn .18s ease; z-index: 200;
}
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
  width: min(560px, 100%); max-height: min(88vh, 880px); background: #fff; border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden;
  animation: modalIn .26s var(--ease); border: 1px solid rgba(255, 255, 255, .4);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
.modal-card.size-lg { width: min(780px, 100%); }
.modal-card.size-xl { width: min(1040px, 100%); }
.modal-card.size-sm { width: min(405px, 100%); }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 21px 24px 15px; flex: 0 0 auto; }
.modal-header h3 { font-size: 17px; font-weight: 650; letter-spacing: -.02em; line-height: 1.4; }
.modal-header p { font-size: 10.5px; color: var(--muted); margin-top: 4px; line-height: 1.6; }
.modal-close { width: 29px; height: 29px; border: 1px solid var(--line); background: #fafbf9; border-radius: 8px; display: grid; place-items: center; color: #82948a; flex: 0 0 auto; }
.modal-close:hover { background: #f0f5fb; color: var(--ink); }
.modal-close .icon { width: 13px; height: 13px; }
.modal-body { padding: 0 24px 22px; overflow-y: auto; flex: 1 1 auto; }
.modal-body.flush { padding: 0; }
.modal-footer { flex: 0 0 auto; padding: 14px 24px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: flex-end; gap: 8px; background: #fcfdff; }
.modal-footer.split { justify-content: space-between; }
.modal-footer .footer-note { color: #7e90a6; font-size: 9.5px; }
.modal-overlay.drawer { justify-content: flex-end; padding: 0; align-items: stretch; }
.modal-card.drawer-card { width: min(720px, 100%); max-height: 100vh; height: 100vh; border-radius: 20px 0 0 20px; animation: drawerIn .3s var(--ease); }
.modal-card.drawer-card.wide { width: min(840px, 100%); }
@keyframes drawerIn { from { transform: translateX(40px); opacity: .7; } to { transform: none; opacity: 1; } }
.drawer-card .modal-header { padding: 23px 26px 16px; border-bottom: 1px solid var(--line); }
.drawer-card .modal-body { padding: 20px 26px 30px; background: #fbfcff; }
.drawer-card .modal-footer { padding: 14px 26px; background: #fff; }
.drawer-subhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 20px 0 10px; }
.drawer-subhead:first-child { margin-top: 0; }
.drawer-subhead h4 { font-size: 11px; font-weight: 600; color: #2c425b; display: flex; align-items: center; gap: 5px; }
.drawer-subhead h4 .icon { width: 13px; height: 13px; color: #879b8f; }
.drawer-section { background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 16px; margin-bottom: 13px; }
.drawer-title-block { display: flex; gap: 12px; align-items: flex-start; }
.drawer-title-block h3 { font-size: 19px; font-weight: 650; line-height: 1.4; letter-spacing: -.02em; }
.drawer-title-block p { color: var(--muted); font-size: 10.5px; margin-top: 4px; }
.modal-close.danger:hover { background: var(--danger-soft); }
.confirm-icon { width: 42px; height: 42px; border-radius: 13px; background: var(--danger-soft); color: var(--danger); display: grid; place-items: center; margin-bottom: 13px; }
.confirm-icon.warning { background: var(--warning-soft); color: var(--warning); }
.confirm-copy { font-size: 11.5px; color: #60736a; line-height: 1.8; }
.confirm-copy strong { color: var(--ink); }

/* Toasts */
.toast-root { position: fixed; right: 24px; bottom: 24px; z-index: 400; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.toast {
  display: flex; align-items: flex-start; gap: 9px; min-width: 250px; max-width: 360px;
  padding: 11px 13px; background: #fff; border: 1px solid var(--line); border-radius: 11px;
  box-shadow: var(--shadow-md); animation: toastIn .24s var(--ease); pointer-events: auto;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.toast.out { animation: toastOut .2s ease forwards; }
@keyframes toastOut { to { opacity: 0; transform: translateY(5px); } }
.toast-icon { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; flex: 0 0 auto; background: var(--brand-soft); color: var(--brand); }
.toast-icon.error { background: var(--danger-soft); color: var(--danger); }
.toast-icon.warning { background: var(--warning-soft); color: var(--warning); }
.toast-icon .icon { width: 13px; height: 13px; }
.toast-content { min-width: 0; flex: 1; }
.toast-content strong { display: block; font-size: 11px; font-weight: 600; color: #344c41; }
.toast-content p { margin-top: 2px; font-size: 10px; color: #83938a; line-height: 1.55; }
.toast-close { border: 0; background: none; color: #94a5ba; padding: 0; width: 16px; height: 16px; display: grid; place-items: center; }
.toast-close .icon { width: 11px; height: 11px; }

/* --------------------------------------------------------------------------
   Dashboard
   -------------------------------------------------------------------------- */
.dash-welcome { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.dash-greeting h1 { font-size: 27px; font-weight: 700; letter-spacing: -.035em; line-height: 1.3; }
.dash-greeting h1 em { font-style: normal; color: var(--brand); }
.dash-greeting p { color: var(--muted); font-size: 11.5px; margin-top: 5px; }
.dash-greeting p strong { color: #4c6559; font-weight: 600; }
.dash-quick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.welcome-date { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid var(--line); background: #fbfcff; border-radius: 7px; font-size: 10px; color: #6a7f99; }
.welcome-date .icon { width: 12px; height: 12px; color: #95a69c; }
.chart-card .card-body { padding: 10px 22px 18px; }
.chart-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.chart-total { font-family: var(--font-num); font-size: 23px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.chart-total span { font-size: 10px; color: #7d8fa6; margin-left: 5px; font-weight: 400; letter-spacing: 0; }
.chart-legend { display: flex; align-items: center; gap: 12px; font-size: 9px; color: #8b9a92; }
.legend-dot { width: 6px; height: 6px; border-radius: 2px; background: var(--brand); display: inline-block; margin-right: 4px; }
.chart-svg-wrap { position: relative; width: 100%; height: 170px; }
.chart-svg { width: 100%; height: 100%; overflow: visible; }
.chart-grid-line { stroke: #ecf1f9; stroke-width: 1; stroke-dasharray: 3 4; }
.chart-axis-label { fill: #91a097; font-size: 8.5px; font-family: var(--font); }
.chart-line { fill: none; stroke: #2f62b6; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart-area { fill: url(#chartGradient); }
.chart-dot { fill: #fff; stroke: #2f62b6; stroke-width: 1.8; }
.chart-dot-label { fill: #476257; font-size: 8.5px; font-family: var(--font-num); font-weight: 600; }
.chart-note { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font-size: 9px; color: #8799ae; }
.chart-note strong { color: #597163; font-weight: 500; }
.chart-period { display: flex; padding: 2px; background: #f1f5fb; border-radius: 6px; }
.chart-period span { padding: 3px 7px; font-size: 8.5px; color: #8b9a91; border-radius: 4px; }
.chart-period span.active { background: #fff; color: #485f53; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }

.todo-list { display: flex; flex-direction: column; }
.todo-item { display: flex; gap: 10px; padding: 11px 20px; border-bottom: 1px solid #eef3f9; align-items: flex-start; transition: background .15s; }
.todo-item:hover { background: #fbfcff; }
.todo-item:last-child { border-bottom: 0; }
.todo-check { width: 15px; height: 15px; border-radius: 5px; border: 1.3px solid #c9d6e7; flex: 0 0 auto; margin-top: 2px; display: grid; place-items: center; background: #fff; cursor: pointer; color: transparent; }
.todo-check:hover { border-color: #8cb5a2; }
.todo-check .icon { width: 9px; height: 9px; }
.todo-main { min-width: 0; flex: 1; }
.todo-title { font-size: 11px; color: #2b4058; line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.todo-title:hover { color: var(--brand); }
.todo-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 3px; font-size: 9px; color: #8395aa; }
.todo-meta .priority { font-size: 9px; }
.todo-avatar { margin-top: 1px; }
.due-chip { display: inline-flex; align-items: center; gap: 3px; }
.due-chip .icon { width: 9px; height: 9px; }
.due-chip.late { color: var(--danger); }
.due-chip.today { color: var(--warning); }
.section-link-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 20px; border-top: 1px solid #eef3f9; }

.cert-alert-list { display: flex; flex-direction: column; }
.cert-alert { display: flex; align-items: center; gap: 10px; padding: 11px 20px; border-bottom: 1px solid #eef3f9; }
.cert-alert:last-child { border-bottom: 0; }
.cert-alert-icon { width: 31px; height: 31px; border-radius: 9px; background: #fcf2e3; color: #b27c2b; display: grid; place-items: center; flex: 0 0 auto; }
.cert-alert-icon.expired { background: var(--danger-soft); color: var(--danger); }
.cert-alert-icon .icon { width: 14px; height: 14px; }
.cert-alert-main { min-width: 0; flex: 1; }
.cert-alert-title { font-size: 10.5px; color: #3c5246; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cert-alert-sub { font-size: 9px; color: #8799ae; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cert-days { font-size: 9.5px; font-weight: 600; color: #a2752a; white-space: nowrap; }
.cert-days.expired { color: var(--danger); }
.cert-days small { display: block; text-align: right; font-size: 8.5px; color: #a3afa8; font-weight: 400; margin-top: 1px; }
.announcement-mini { display: flex; gap: 9px; padding: 11px 20px; border-bottom: 1px solid #eef3f9; }
.announcement-mini:last-child { border-bottom: 0; }
.announcement-mini-icon { width: 26px; height: 26px; border-radius: 8px; background: #f3f7fc; color: #84968b; display: grid; place-items: center; flex: 0 0 auto; }
.announcement-mini-icon.system { background: var(--info-soft); color: var(--info); }
.announcement-mini-icon .icon { width: 12px; height: 12px; }
.announcement-mini-main { min-width: 0; }
.announcement-mini-title { font-size: 10.5px; color: #3b5044; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
.announcement-mini-meta { font-size: 8.5px; color: #9ba8a1; margin-top: 2px; }
.workload-list { padding: 5px 20px 13px; }
.workload-row { display: grid; grid-template-columns: 22px 1fr 35px; align-items: center; gap: 8px; margin-top: 11px; }
.workload-bar { height: 5px; border-radius: 99px; background: #eef3f9; overflow: hidden; }
.workload-bar span { display: block; height: 100%; border-radius: 99px; background: var(--bar, #5b86d0); }
.workload-hours { font-family: var(--font-num); font-size: 9px; color: #7a8d82; text-align: right; }
.workload-name { font-size: 9px; color: #82938a; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.workload-grid { display: grid; grid-template-columns: 63px minmax(80px, 1fr) 44px; gap: 8px; align-items: center; }

.approval-mini { display: flex; align-items: flex-start; gap: 10px; padding: 11px 20px; border-bottom: 1px solid #eef3f9; }
.approval-mini:last-child { border-bottom: 0; }
.approval-mini-icon { width: 29px; height: 29px; border-radius: 8px; display: grid; place-items: center; flex: 0 0 auto; background: var(--gold-soft); color: var(--gold); }
.approval-mini-icon.contract { background: var(--brand-soft); color: var(--brand); }
.approval-mini-icon.cooperation { background: var(--info-soft); color: var(--info); }
.approval-mini-icon .icon { width: 13px; height: 13px; }
.approval-mini-main { flex: 1; min-width: 0; }
.approval-mini-title { font-size: 10.5px; color: #354b40; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.approval-mini-meta { display: flex; gap: 5px; align-items: center; font-size: 8.5px; color: #97a49c; margin-top: 2px; }
.approval-mini-amount { font-family: var(--font-num); font-size: 10px; color: #476356; white-space: nowrap; }
.section-empty { padding: 24px 18px; text-align: center; font-size: 10px; color: #889ab0; }

/* --------------------------------------------------------------------------
   Clients & certificates
   -------------------------------------------------------------------------- */
.stats-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; margin-bottom: 16px; overflow: hidden; box-shadow: var(--shadow-xs); }
.strip-item { padding: 14px 18px; border-right: 1px solid var(--line); display: flex; align-items: center; gap: 11px; min-width: 0; }
.strip-item:last-child { border-right: 0; }
.strip-icon { width: 33px; height: 33px; border-radius: 9px; background: var(--strip-soft, #f0f5fb); color: var(--strip-color, #648377); display: grid; place-items: center; flex: 0 0 auto; }
.strip-icon .icon { width: 15px; height: 15px; }
.strip-main { min-width: 0; }
.strip-value { font-family: var(--font-num); font-size: 18px; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; color: #263c32; }
.strip-value small { font-size: 9.5px; color: #7d8fa6; font-weight: 400; margin-left: 3px; }
.strip-label { font-size: 9.5px; color: #7b8da3; margin-top: 3px; }
.strip-item.alert { --strip-soft: var(--danger-soft); --strip-color: var(--danger); }
.strip-item.gold { --strip-soft: var(--gold-soft); --strip-color: var(--gold); }
.strip-item.blue { --strip-soft: var(--info-soft); --strip-color: var(--info); }
.client-name-cell { display: flex; align-items: center; gap: 10px; }
.client-logo { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 12px; font-weight: 600; flex: 0 0 auto; color: #fff; }
.client-logo.green { background: linear-gradient(145deg, #276b5d, #174b40); }
.client-logo.blue { background: linear-gradient(145deg, #41749a, #2d5474); }
.client-logo.gold { background: linear-gradient(145deg, #ad8445, #84602b); }
.client-logo.violet { background: linear-gradient(145deg, #77639c, #574776); }
.client-logo.rust { background: linear-gradient(145deg, #ab6f4e, #815038); }
.client-logo.teal { background: linear-gradient(145deg, #388f83, #24665d); }
.cert-indicators { display: inline-flex; align-items: center; gap: 3px; }
.cert-indicator { width: 5px; height: 5px; border-radius: 50%; background: #c9d6e7; }
.cert-indicator.expired { background: #c4584c; }
.cert-indicator.critical { background: #c69240; }
.cert-indicator.warning { background: #7b9cb3; }
.service-progress { width: 78px; height: 3px; background: #e9eff7; border-radius: 9px; overflow: hidden; margin-top: 5px; }
.service-progress span { display: block; height: 100%; background: #6fa38f; border-radius: 9px; }
.service-progress.warn span { background: #c18a34; }
.service-progress.danger span { background: #c45a4d; }

.client-hero { display: flex; align-items: flex-start; gap: 14px; padding-bottom: 17px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.client-hero .avatar { border-radius: 14px; }
.client-hero-main { flex: 1; min-width: 0; }
.client-hero h2 { font-size: 20px; font-weight: 650; letter-spacing: -.025em; }
.client-hero-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; align-items: center; }
.client-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 16px; }
.detail-item { min-width: 0; }
.detail-label { font-size: 9px; color: #8395aa; margin-bottom: 2px; }
.detail-value { font-size: 10.5px; color: #3d5448; line-height: 1.55; word-break: break-word; }
.detail-value .icon { width: 11px; height: 11px; display: inline-block; vertical-align: -1.5px; margin-right: 3px; color: #92a49a; }
.client-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 13px; }
.client-stat { background: #f7faff; border: 1px solid #e9eff7; border-radius: 9px; padding: 9px 10px; }
.client-stat strong { display: block; font-family: var(--font-num); font-size: 16px; font-weight: 600; color: #324c40; }
.client-stat span { font-size: 8.5px; color: #7d8fa6; }
.detail-tabs { margin-top: 15px; }
.mini-list { display: flex; flex-direction: column; gap: 6px; }
.mini-row { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid #e9eff7; border-radius: 9px; background: #fff; }
.mini-row .icon { width: 13px; height: 13px; color: #8fa198; }
.mini-row-main { flex: 1; min-width: 0; }
.mini-row-title { font-size: 10.5px; color: #3b5246; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-row-sub { font-size: 8.5px; color: #8799ae; margin-top: 1px; }
.mini-row-value { font-size: 9.5px; color: #6a8174; white-space: nowrap; }

.cert-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; margin-bottom: 16px; }
.cert-stat { position: relative; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.cert-stat::before { content: ""; position: absolute; left: 0; top: 15px; bottom: 15px; width: 3px; border-radius: 2px; background: var(--cert-color, #9fb3a8); }
.cert-stat.expired { --cert-color: #c25a4e; }
.cert-stat.critical { --cert-color: #c08c37; }
.cert-stat.warning { --cert-color: #7295af; }
.cert-stat.normal { --cert-color: #5f9a85; }
.cert-stat-label { display: flex; align-items: center; gap: 6px; font-size: 9.5px; color: #83948b; }
.cert-stat-label .icon { width: 12px; height: 12px; }
.cert-stat-value { margin-top: 7px; font-family: var(--font-num); font-size: 23px; font-weight: 600; line-height: 1; letter-spacing: -.02em; color: #2d4438; }
.cert-stat-value small { font-size: 9px; color: #8294aa; font-weight: 400; margin-left: 2px; }
.cert-stat-note { margin-top: 5px; font-size: 9px; color: #a0aca5; }
.cert-notice { display: flex; align-items: center; gap: 10px; padding: 11px 15px; background: #fbf7ee; border: 1px solid #f0e3c9; border-radius: 11px; margin-bottom: 15px; font-size: 10.5px; color: #816633; line-height: 1.6; }
.cert-notice .icon { width: 15px; height: 15px; color: #b08638; flex: 0 0 auto; }
.cert-notice strong { font-weight: 600; }
.cert-notice .link-btn { margin-left: auto; white-space: nowrap; color: #8b6825; }
.expiry-bar { width: 100px; }
.expiry-bar-track { width: 100%; height: 4px; border-radius: 9px; background: #e9eff7; overflow: hidden; }
.expiry-bar-track span { display: block; height: 100%; border-radius: 9px; background: #6ca18d; }
.expiry-bar-track.expired span { background: #c65a4e; }
.expiry-bar-track.critical span { background: #c28e39; }
.expiry-bar-track.warning span { background: #7699b2; }
.expiry-bar-label { margin-top: 4px; font-size: 8.5px; color: #8a9cb1; }
.cert-days-big { font-family: var(--font-num); font-size: 11px; font-weight: 600; color: #537263; }
.cert-days-big.negative { color: var(--danger); }
.cert-days-big small { font-size: 8.5px; font-weight: 400; color: #9ba89f; margin-left: 1px; }
.cert-name { font-weight: 500; color: #2c425b; }

/* --------------------------------------------------------------------------
   Contracts
   -------------------------------------------------------------------------- */
.contract-title-cell { display: flex; align-items: flex-start; gap: 9px; }
.contract-file-icon { width: 30px; height: 34px; border-radius: 7px; background: #f2f6f1; border: 1px solid #e4ebe3; display: grid; place-items: center; color: #6d8a7b; flex: 0 0 auto; position: relative; }
.contract-file-icon::after { content: ""; position: absolute; right: 0; top: 0; border-width: 0 6px 6px 0; border-style: solid; border-color: #fff #fff #d9e3ef #d9e3ef; }
.contract-file-icon .icon { width: 13px; height: 13px; }
.contract-number { font-family: var(--font-num); font-size: 8.5px; color: #8395aa; margin-top: 2px; }
.contract-amount { display: flex; flex-direction: column; }
.contract-amount .amount { font-family: var(--font-num); font-size: 12.5px; font-weight: 600; color: #233950; }
.contract-amount .tax { font-size: 8.5px; color: #8a9cb1; margin-top: 1px; }
.expiring-hint { display: inline-flex; align-items: center; gap: 3px; height: 19px; padding: 0 6px; border-radius: 5px; background: #fbf2e3; color: #9c6c21; font-size: 8.5px; margin-top: 4px; }
.expiring-hint .icon { width: 9px; height: 9px; }

.contract-preview-overlay { background: rgba(9, 24, 19, .48); }
.contract-preview-sheet { background: #fff; border-radius: 3px; width: 100%; max-width: 720px; padding: 44px 52px 48px; box-shadow: var(--shadow-lg); color: #202a26; font-family: "Songti SC", "SimSun", "Microsoft YaHei", serif; position: relative; }
.contract-preview-sheet::before { content: ""; position: absolute; inset: 12px; border: 1px solid #e9e5da; pointer-events: none; }
.contract-doc-head { text-align: center; padding-bottom: 22px; border-bottom: 2px solid #24372f; }
.contract-doc-brand { display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font); font-size: 11px; letter-spacing: .17em; color: #51675b; font-weight: 600; }
.contract-doc-brand .brand-seal { width: 23px; height: 23px; border-radius: 6px; background: #102f61; color: #efe1c1; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.contract-doc-title { margin-top: 15px; font-size: 25px; font-family: var(--font); font-weight: 700; letter-spacing: .04em; color: #1c2e27; }
.contract-doc-meta { margin-top: 8px; font-family: var(--font); font-size: 9.5px; color: #87958d; display: flex; justify-content: center; gap: 14px; }
.contract-party-table { width: 100%; margin: 22px 0 18px; border-collapse: collapse; font-family: var(--font); font-size: 10px; line-height: 1.65; }
.contract-party-table td { border: 1px solid #dde2db; padding: 9px 11px; vertical-align: top; }
.contract-party-table td:first-child { width: 58px; background: #f6f8fc; color: #6e7d75; text-align: center; white-space: nowrap; }
.contract-body { font-family: var(--font); font-size: 10px; line-height: 1.95; color: #4b5b53; }
.contract-body p { margin: 0 0 8px; }
.contract-body .doc-section { margin-top: 17px; }
.contract-body .doc-section-title { font-weight: 700; color: #26372e; font-size: 10.5px; margin-bottom: 5px; }
.contract-body .doc-text { white-space: pre-line; }
.contract-body .doc-pre { white-space: pre-line; }
.contract-body .doc-table { width: 100%; border-collapse: collapse; margin: 8px 0 12px; font-size: 9.5px; }
.contract-body .doc-table td, .contract-body .doc-table th { border: 1px solid #dfe4dc; padding: 6px 8px; text-align: left; }
.contract-body .doc-table th { background: #f6f8fc; color: #6b7c73; font-weight: 500; }
.contract-signatures { display: grid; grid-template-columns: 1fr 1fr; gap: 35px; margin-top: 38px; font-family: var(--font); font-size: 10px; line-height: 2; color: #4a5a51; }
.contract-signature-block { position: relative; }
.contract-signature-block .seal-space { height: 52px; display: flex; align-items: flex-end; }
.contract-seal { display: inline-grid; place-items: center; width: 74px; height: 74px; border: 2px solid rgba(190, 59, 46, .55); border-radius: 50%; color: rgba(180, 52, 41, .65); font-family: var(--font); font-size: 7.5px; text-align: center; line-height: 1.4; transform: rotate(-12deg); margin-left: 30px; opacity: .85; }
.contract-draft-mark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-28deg); font-family: var(--font); font-size: 90px; font-weight: 800; letter-spacing: .08em; color: rgba(15, 45, 95, .045); pointer-events: none; white-space: nowrap; }
.contract-preview-toolbar { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 720px; margin: 0 auto 10px; color: #edf3fb; justify-content: flex-end; }
.contract-preview-toolbar .btn-secondary { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .18); color: #f0f4ef; }
.contract-preview-toolbar .btn-secondary:hover { background: rgba(255, 255, 255, .2); }
.contract-preview-wrap { width: 100%; display: flex; flex-direction: column; align-items: center; max-height: calc(100vh - 80px); overflow-y: auto; padding: 10px; }
.contract-paper-scroll { width: 100%; max-width: 720px; }
.contract-preview-close { position: fixed; right: 20px; top: 17px; z-index: 210; background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.2); color: #fff; }
.contract-preview-close:hover { background: rgba(255,255,255,.24); }

/* --------------------------------------------------------------------------
   Tasks
   -------------------------------------------------------------------------- */
.task-stats { display: flex; gap: 0; border: 1px solid var(--line); background: #fff; border-radius: 14px; margin-bottom: 15px; overflow: hidden; }
.task-stat { flex: 1; padding: 13px 16px; border-right: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.task-stat:last-child { border-right: 0; }
.task-stat-icon { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--ts-soft, #f0f5fb); color: var(--ts-color, #6c897c); flex: 0 0 auto; }
.task-stat-icon .icon { width: 14px; height: 14px; }
.task-stat-value { font-family: var(--font-num); font-size: 18px; line-height: 1; font-weight: 600; letter-spacing: -.02em; color: #233950; }
.task-stat-label { margin-top: 4px; font-size: 9px; color: #8092a8; }
.task-stat.highlight { --ts-soft: var(--warning-soft); --ts-color: var(--warning); }
.task-stat.danger { --ts-soft: var(--danger-soft); --ts-color: var(--danger); }
.task-stat.blue { --ts-soft: var(--info-soft); --ts-color: var(--info); }
.kanban { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 11px; align-items: start; }
.kanban-col { background: #f7faff; border: 1px solid #e7eef7; border-radius: 13px; min-height: 180px; padding: 10px; transition: background .18s, border-color .18s; }
.kanban-col.drag-over { background: #eef6f0; border-color: #a9c8b8; }
.kanban-head { display: flex; align-items: center; justify-content: space-between; padding: 1px 3px 9px; }
.kanban-title { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; color: #4d6357; }
.kanban-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--col-color, #9fb2a7); }
.kanban-count { min-width: 17px; height: 17px; padding: 0 5px; border-radius: 5px; background: #ebf0ea; color: #7a8c81; font-family: var(--font-num); font-size: 9px; display: grid; place-items: center; }
.kanban-cards { display: flex; flex-direction: column; gap: 7px; min-height: 40px; }
.task-card { background: #fff; border: 1px solid #e5ecf5; border-radius: 10px; padding: 11px; cursor: grab; box-shadow: 0 1px 2px rgba(20, 50, 38, .03); transition: border-color .18s, box-shadow .18s, transform .18s; }
.task-card:hover { border-color: #c3d3e6; box-shadow: 0 5px 16px rgba(20, 55, 41, .075); transform: translateY(-1px); }
.task-card:active { cursor: grabbing; }
.task-card.dragging { opacity: .45; }
.task-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.task-card-title { font-size: 10.5px; line-height: 1.55; color: #283d55; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.task-card-client { display: inline-flex; align-items: center; gap: 3px; margin-top: 6px; font-size: 8.5px; color: #7e9186; background: #f3f7fc; padding: 2px 5px; border-radius: 4px; }
.task-card-client .icon { width: 9px; height: 9px; }
.task-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 9px; padding-top: 8px; border-top: 1px solid #f1f5fb; }
.task-card-meta { display: flex; align-items: center; gap: 7px; font-size: 8.5px; color: #8496ac; min-width: 0; flex-wrap: wrap; }
.task-card-meta .meta-item { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.task-card-meta .icon { width: 9px; height: 9px; }
.task-card-timer { width: 22px; height: 22px; border-radius: 6px; border: 0; background: #f0f5ef; color: #5d8170; display: grid; place-items: center; flex: 0 0 auto; }
.task-card-timer:hover { background: var(--brand-soft); color: var(--brand); }
.task-card-timer.running { background: #e5f2eb; color: #1d785e; }
.task-card-timer .icon { width: 10px; height: 10px; }
.kanban-empty { padding: 17px 7px; text-align: center; font-size: 9px; color: #94a5ba; border: 1px dashed #dfe6de; border-radius: 8px; }
.task-list-row { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid #edf2f9; }
.task-list-row:last-child { border-bottom: 0; }
.task-list-main { flex: 1; min-width: 0; }
.task-list-title { font-size: 11px; color: #2b4058; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.task-list-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 3px; font-size: 8.5px; color: #8799ae; }
.task-list-meta .icon { width: 9px; height: 9px; display: inline-block; vertical-align: -1px; }
.task-list-timer { display: flex; align-items: center; gap: 5px; }
.task-list-actions { display: flex; align-items: center; gap: 4px; }
.task-running-hint { display: inline-flex; align-items: center; gap: 3px; color: #1c735d; font-family: var(--font-num); font-size: 8.5px; }
.task-running-hint::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: #2d8a71; animation: pulse 1.8s infinite; }

.task-drawer-head { padding-right: 32px; }
.task-detail-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 16px; }
.task-meta-block { display: flex; flex-direction: column; gap: 2px; min-width: 80px; }
.task-meta-label { font-size: 8.5px; color: #889aaf; }
.task-meta-value { font-size: 10px; color: #42594d; display: flex; align-items: center; gap: 5px; }
.task-meta-value .icon { width: 11px; height: 11px; color: #93a59a; }
.task-desc { font-size: 10.5px; color: #5b6f88; line-height: 1.8; white-space: pre-line; }
.timer-box { background: linear-gradient(135deg, #0b2342, #123a68); color: #fff; border-radius: 13px; padding: 15px 17px; display: flex; align-items: center; gap: 14px; margin-bottom: 14px; position: relative; overflow: hidden; }
.timer-box::after { content: ""; position: absolute; right: -30px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: rgba(216, 184, 120, .08); }
.timer-clock-icon { width: 38px; height: 38px; border-radius: 11px; background: rgba(255, 255, 255, .08); color: #93c5fd; display: grid; place-items: center; flex: 0 0 auto; }
.timer-clock-icon .icon { width: 19px; height: 19px; }
.timer-main { flex: 1; min-width: 0; }
.timer-label { font-size: 8.5px; color: #a9c6e8; letter-spacing: .04em; }
.timer-value { margin-top: 1px; font-family: var(--font-num); font-size: 26px; font-weight: 500; line-height: 1.2; letter-spacing: .02em; color: #f7f2e6; }
.timer-status { font-size: 8.5px; color: #9cb6d5; margin-top: 2px; }
.timer-actions { display: flex; gap: 6px; align-items: center; position: relative; z-index: 1; }
.timer-btn { height: 31px; padding: 0 11px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .08); color: #eaf1f9; font-size: 10px; display: inline-flex; align-items: center; gap: 4px; }
.timer-btn:hover { background: rgba(255, 255, 255, .14); }
.timer-btn.primary { background: #3b82f6; border-color: #3b82f6; color: #fff; font-weight: 600; }
.timer-btn.primary:hover { background: #2f74e8; }
.timer-btn .icon { width: 11px; height: 11px; }
.time-log { display: flex; flex-direction: column; }
.time-log-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #eef3f9; font-size: 9.5px; color: #6d8176; }
.time-log-row:last-child { border-bottom: 0; }
.time-log-row .icon { width: 11px; height: 11px; color: #95a79c; }
.time-log-main { flex: 1; min-width: 0; }
.time-log-date { font-size: 8.5px; color: #8b9db2; }
.time-log-duration { font-family: var(--font-num); color: #405b4d; }
.comment-list { display: flex; flex-direction: column; gap: 11px; }
.comment { display: flex; gap: 8px; }
.comment-main { flex: 1; min-width: 0; }
.comment-head { display: flex; align-items: center; gap: 6px; }
.comment-head strong { font-size: 9.5px; font-weight: 600; color: #334862; }
.comment-head span { font-size: 8.5px; color: #8d9fb5; }
.comment-text { margin-top: 3px; padding: 8px 10px; background: #fff; border: 1px solid #e9eff7; border-radius: 4px 10px 10px 10px; font-size: 10px; line-height: 1.7; color: #5d7065; }
.comment-form { display: flex; gap: 7px; align-items: flex-end; margin-top: 12px; }
.comment-form textarea { min-height: 36px; height: 36px; flex: 1; padding: 7px 10px; font-size: 10px; border: 1px solid var(--line-strong); border-radius: 8px; resize: none; outline: none; }
.comment-form textarea:focus { border-color: #a9c6b6; box-shadow: 0 0 0 3px rgba(27, 79, 174, .07); }

/* --------------------------------------------------------------------------
   Approvals
   -------------------------------------------------------------------------- */
.approval-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; margin-bottom: 16px; }
.approval-summary-item { background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 13px 16px; display: flex; align-items: center; gap: 11px; }
.approval-summary-icon { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--as-soft, #f0f5fb); color: var(--as-color, #6f8b7e); flex: 0 0 auto; }
.approval-summary-icon .icon { width: 15px; height: 15px; }
.approval-summary-value { font-family: var(--font-num); font-size: 19px; font-weight: 600; line-height: 1; color: #293f34; letter-spacing: -.02em; }
.approval-summary-label { font-size: 9px; color: #8d9c94; margin-top: 4px; }
.approval-summary-item.highlight { --as-soft: var(--warning-soft); --as-color: var(--warning); }
.approval-summary-item.green { --as-soft: var(--brand-soft); --as-color: var(--brand); }
.approval-summary-item.blue { --as-soft: var(--info-soft); --as-color: var(--info); }
.approval-list { display: flex; flex-direction: column; }
.approval-card { display: flex; align-items: flex-start; gap: 12px; padding: 15px 19px; border-bottom: 1px solid #e9eff7; transition: background .15s; cursor: pointer; }
.approval-card:last-child { border-bottom: 0; }
.approval-card:hover { background: #fbfcff; }
.approval-type-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto; background: var(--ap-soft, #edf3fb); color: var(--ap-color, #4c7e6c); }
.approval-type-icon.contract { --ap-soft: #e9f0fb; --ap-color: #2657a6; }
.approval-type-icon.cooperation { --ap-soft: #edf3f9; --ap-color: #3d6f9d; }
.approval-type-icon.discount { --ap-soft: #fbf3e5; --ap-color: #aa7926; }
.approval-type-icon.onboarding { --ap-soft: #f2eef8; --ap-color: #78629f; }
.approval-type-icon .icon { width: 16px; height: 16px; }
.approval-main { flex: 1; min-width: 0; }
.approval-title-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.approval-title { font-size: 11.5px; font-weight: 500; color: #2f4539; line-height: 1.5; }
.approval-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-size: 8.5px; color: #8496ac; }
.approval-meta span { display: inline-flex; align-items: center; gap: 3px; }
.approval-meta .icon { width: 9px; height: 9px; }
.approval-side { flex: 0 0 auto; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.approval-amount { font-family: var(--font-num); font-size: 13px; font-weight: 600; color: #2b4236; }
.approval-step { font-size: 8.5px; color: #889aaf; }
.approval-action-hint { display: inline-flex; align-items: center; gap: 4px; height: 23px; padding: 0 8px; background: #f8f1e3; color: #966a20; border: 1px solid #efe1c5; border-radius: 6px; font-size: 8.5px; }
.approval-action-hint .icon { width: 10px; height: 10px; }
.approval-detail-summary { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 14px; }
.approval-detail-amount { font-family: var(--font-num); font-size: 24px; font-weight: 600; letter-spacing: -.03em; color: #2b4236; margin-top: 2px; }
.approval-detail-amount small { font-size: 10px; color: #8092a8; font-weight: 400; margin-left: 3px; }
.approval-description { font-size: 10.5px; color: #5c7065; line-height: 1.85; white-space: pre-line; }
.timeline { position: relative; padding-left: 21px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 7px; bottom: 13px; width: 1px; background: #e2e9f3; }
.timeline-item { position: relative; padding-bottom: 16px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot { position: absolute; left: -21px; top: 3px; width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 1.5px solid #d1dbd3; display: grid; place-items: center; z-index: 1; }
.timeline-dot .icon { width: 8px; height: 8px; color: transparent; }
.timeline-item.approved .timeline-dot { background: #e6f2ec; border-color: #8dbca9; color: var(--brand); }
.timeline-item.approved .timeline-dot .icon { color: var(--brand); }
.timeline-item.rejected .timeline-dot { background: #faeae7; border-color: #d69d95; }
.timeline-item.rejected .timeline-dot .icon { color: var(--danger); }
.timeline-item.current .timeline-dot { border-color: #c7a35f; background: #fbf5e7; box-shadow: 0 0 0 4px #fcf8ef; }
.timeline-item.current .timeline-dot::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #bd8f3f; }
.timeline-content { padding-left: 3px; }
.timeline-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.timeline-title { font-size: 10px; font-weight: 600; color: #334862; }
.timeline-time { font-size: 8.5px; color: #8d9fb4; }
.timeline-role { font-size: 8.5px; color: #8799ae; margin-top: 2px; }
.timeline-comment { margin-top: 5px; padding: 7px 9px; border-radius: 6px; background: #f7faff; border: 1px solid #e9eff7; font-size: 9.5px; color: #667a6f; line-height: 1.6; }
.approval-action-box { border: 1px solid #eadfc9; background: #fdfaf3; border-radius: 11px; padding: 14px; margin-top: 14px; }
.approval-action-box h4 { font-size: 10.5px; font-weight: 600; color: #6e5a30; display: flex; align-items: center; gap: 5px; }
.approval-action-box h4 .icon { width: 13px; height: 13px; color: #b38b43; }
.approval-action-box textarea { width: 100%; min-height: 64px; margin-top: 8px; border: 1px solid #e4d7be; border-radius: 8px; padding: 8px 10px; font-size: 10px; line-height: 1.7; background: #fff; resize: vertical; outline: none; }
.approval-action-box textarea:focus { border-color: #cbb282; box-shadow: 0 0 0 3px rgba(185, 135, 56, .07); }
.approval-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 9px; }

/* --------------------------------------------------------------------------
   Announcements
   -------------------------------------------------------------------------- */
.announcement-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .75fr); gap: 16px; align-items: start; }
.announcement-feature { padding: 20px; background: linear-gradient(145deg, #0f3128, #0b241e); border-radius: var(--radius-lg); color: #eaf1f9; position: relative; overflow: hidden; margin-bottom: 14px; }
.announcement-feature::after { content: ""; position: absolute; right: -50px; top: -60px; width: 210px; height: 210px; border-radius: 50%; border: 1px solid rgba(216, 184, 120, .15); box-shadow: 0 0 0 36px rgba(216, 184, 120, .025), 0 0 0 72px rgba(216, 184, 120, .02); }
.announcement-feature-label { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; background: rgba(216, 184, 120, .12); border: 1px solid rgba(216, 184, 120, .16); border-radius: 5px; color: #e0c68d; font-size: 8.5px; letter-spacing: .07em; }
.announcement-feature h2 { position: relative; z-index: 1; margin: 12px 0 7px; font-size: 19px; line-height: 1.55; font-weight: 600; letter-spacing: -.02em; max-width: 94%; }
.announcement-feature p { position: relative; z-index: 1; color: #a8bdb3; font-size: 10.5px; line-height: 1.8; max-width: 90%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.announcement-feature-meta { position: relative; z-index: 1; margin-top: 15px; display: flex; align-items: center; gap: 10px; font-size: 9px; color: #8ca69a; }
.announcement-card-list { display: flex; flex-direction: column; gap: 8px; }
.announcement-card { display: flex; gap: 12px; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 12px; transition: border-color .18s, box-shadow .18s, transform .18s; cursor: pointer; }
.announcement-card:hover { border-color: #c9d9cf; box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.announcement-card-icon { width: 34px; height: 34px; border-radius: 9px; background: #f0f5fb; color: #7f9488; display: grid; place-items: center; flex: 0 0 auto; }
.announcement-card-icon.system { background: var(--info-soft); color: var(--info); }
.announcement-card-icon .icon { width: 15px; height: 15px; }
.announcement-card-main { flex: 1; min-width: 0; }
.announcement-card-title { font-size: 11.5px; font-weight: 500; color: #334a3e; line-height: 1.5; display: flex; align-items: flex-start; gap: 5px; }
.announcement-card-title .unread-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--brand); flex: 0 0 auto; margin-top: 6px; }
.announcement-card-summary { font-size: 9.5px; color: #85968d; line-height: 1.7; margin-top: 3px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.announcement-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 9px; font-size: 8.5px; color: #8a9cb1; margin-top: 6px; }
.announcement-card-meta span { display: inline-flex; align-items: center; gap: 3px; }
.announcement-card-meta .icon { width: 9px; height: 9px; }
.announcement-card-right { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.announcement-date { font-family: var(--font-num); font-size: 8.5px; color: #889aaf; white-space: nowrap; }
.announcement-side-card { padding: 15px 16px; }
.announcement-side-title { font-size: 10.5px; font-weight: 600; color: #3a5145; display: flex; align-items: center; gap: 5px; margin-bottom: 10px; }
.announcement-side-title .icon { width: 13px; height: 13px; color: #8c9f93; }
.reading-stat { display: flex; gap: 12px; margin-bottom: 13px; }
.reading-stat div { flex: 1; }
.reading-stat strong { font-family: var(--font-num); font-size: 19px; font-weight: 600; color: #2e4539; display: block; line-height: 1.2; }
.reading-stat span { font-size: 8.5px; color: #92a097; }
.read-progress-line { height: 5px; border-radius: 9px; background: #e9eff7; overflow: hidden; margin-top: 6px; }
.read-progress-line span { display: block; height: 100%; border-radius: 9px; background: linear-gradient(90deg, #2d7b67, #6cae95); }
.system-release-list { display: flex; flex-direction: column; gap: 8px; }
.release-item { display: flex; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid #eef3f9; }
.release-item:last-child { padding-bottom: 0; border-bottom: 0; }
.release-version { flex: 0 0 auto; padding: 2px 5px; height: 17px; border-radius: 4px; background: #edf3fb; color: #4d7a67; font-family: var(--font-num); font-size: 8px; }
.release-main { min-width: 0; }
.release-title { font-size: 9.5px; color: #50665a; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.release-date { font-size: 8px; color: #a1aca5; margin-top: 1px; }
.announcement-detail-head { padding-bottom: 15px; border-bottom: 1px solid var(--line); margin-bottom: 15px; }
.announcement-detail-head h2 { font-size: 19px; line-height: 1.55; font-weight: 650; letter-spacing: -.02em; color: #263b30; }
.announcement-detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; font-size: 9px; color: #8c9c93; }
.announcement-detail-body { font-size: 11px; line-height: 2; color: #4f6459; white-space: pre-line; }
.announcement-detail-body p { margin: 0 0 10px; }

/* --------------------------------------------------------------------------
   Team & permissions
   -------------------------------------------------------------------------- */
.team-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; margin-bottom: 16px; }
.team-summary-item { background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 13px 15px; display: flex; align-items: center; gap: 10px; }
.team-summary-icon { width: 31px; height: 31px; border-radius: 9px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; }
.team-summary-icon .icon { width: 14px; height: 14px; }
.team-summary-value { font-family: var(--font-num); font-size: 19px; font-weight: 600; line-height: 1; color: #233950; }
.team-summary-label { font-size: 8.5px; color: #8f9e95; margin-top: 3px; }
.member-role { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; color: #5f756a; background: #f3f7fc; border: 1px solid #ebefe9; height: 20px; padding: 0 6px; border-radius: 5px; }
.member-role::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--role-color, #879b90); }
.last-login { font-size: 9px; color: #90a097; }
.member-actions { display: flex; gap: 2px; }
.permission-layout { display: grid; grid-template-columns: 265px minmax(0, 1fr); gap: 16px; align-items: start; }
.role-list { display: flex; flex-direction: column; gap: 7px; }
.role-card { width: 100%; text-align: left; padding: 12px 13px; border: 1px solid var(--line); border-radius: 11px; background: #fff; transition: border-color .18s, box-shadow .18s; }
.role-card:hover { border-color: #c8d9cf; }
.role-card.active { border-color: #9cc2b1; background: #fbfcff; box-shadow: 0 0 0 2px rgba(27, 79, 174, .05); }
.role-card-top { display: flex; align-items: center; gap: 8px; }
.role-card-dot { width: 8px; height: 8px; border-radius: 3px; background: var(--role-color, #2f62b6); flex: 0 0 auto; }
.role-card-name { font-size: 11px; font-weight: 600; color: #354b3f; flex: 1; }
.role-card-count { font-family: var(--font-num); font-size: 8.5px; color: #86968d; }
.role-card-desc { font-size: 8.5px; color: #94a299; margin-top: 5px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.role-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; font-size: 8px; color: #9da9a2; }
.role-card-foot .builtin { color: #a6854b; }
.add-role-btn { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; height: 38px; border: 1px dashed #ccd9d0; border-radius: 10px; background: transparent; color: #80948a; font-size: 9.5px; }
.add-role-btn:hover { background: #f7faff; border-color: #a9c5b7; color: var(--brand); }
.permission-panel { min-height: 460px; }
.permission-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 20px 15px; border-bottom: 1px solid var(--line); gap: 12px; }
.permission-head h3 { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.permission-head p { font-size: 9.5px; color: #8d9c93; margin-top: 3px; }
.permission-groups { padding: 4px 20px 18px; }
.permission-group { padding: 13px 0; border-bottom: 1px solid #eef3f9; }
.permission-group:last-child { border-bottom: 0; }
.permission-group-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.permission-group-name { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; color: #3c5347; }
.permission-group-name .icon { width: 13px; height: 13px; color: #8c9f93; }
.permission-toggles { display: flex; flex-wrap: wrap; gap: 7px; }
.permission-toggle { position: relative; }
.permission-toggle input { position: absolute; opacity: 0; }
.permission-toggle span { display: inline-flex; align-items: center; gap: 4px; height: 27px; padding: 0 9px; border: 1px solid #dae3ef; border-radius: 7px; background: #f7faff; font-size: 9px; color: #687c70; cursor: pointer; transition: all .15s; }
.permission-toggle span::before { content: ""; width: 9px; height: 9px; border-radius: 3px; border: 1px solid #c3d1c6; background: #fff; }
.permission-toggle input:checked + span { background: var(--brand-soft); border-color: #a8bfe0; color: #1d6a56; }
.permission-toggle input:checked + span::before { background: var(--brand); border-color: var(--brand); box-shadow: inset 0 0 0 2px #fff; }
.permission-toggle input:disabled + span { opacity: .65; cursor: not-allowed; }
.permission-footer { display: flex; align-items: center; justify-content: space-between; padding: 13px 20px; border-top: 1px solid var(--line); background: #fcfdff; }
.permission-footer-note { font-size: 9px; color: #93a098; }
.permission-count { font-size: 9px; color: #6f8377; }
.permission-count strong { color: var(--brand); font-family: var(--font-num); }

/* --------------------------------------------------------------------------
   Audit
   -------------------------------------------------------------------------- */
.audit-log { display: flex; flex-direction: column; }
.audit-row { display: flex; align-items: flex-start; gap: 11px; padding: 12px 19px; border-bottom: 1px solid #edf2f9; }
.audit-row:last-child { border-bottom: 0; }
.audit-icon { width: 29px; height: 29px; border-radius: 8px; background: #f3f6f2; color: #7f9689; display: grid; place-items: center; flex: 0 0 auto; }
.audit-icon .icon { width: 13px; height: 13px; }
.audit-main { flex: 1; min-width: 0; }
.audit-title { font-size: 10.5px; color: #3a5044; line-height: 1.55; }
.audit-title strong { font-weight: 600; }
.audit-meta { display: flex; flex-wrap: wrap; gap: 4px 9px; font-size: 8.5px; color: #8799ae; margin-top: 3px; }
.audit-meta span { display: inline-flex; align-items: center; gap: 2px; }
.audit-meta .icon { width: 9px; height: 9px; }
.audit-time { font-size: 8.5px; color: #9ca8a1; white-space: nowrap; text-align: right; }
.audit-time small { display: block; font-size: 8px; color: #b0b9b3; margin-top: 2px; }
.audit-action { font-family: var(--font-num); font-size: 8px; color: #7d9185; background: #f3f7fc; border-radius: 4px; padding: 1px 4px; }

/* --------------------------------------------------------------------------
   CRM
   -------------------------------------------------------------------------- */
.crm-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.crm-stat { position: relative; display: flex; gap: 11px; align-items: flex-start; padding: 15px 16px; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-xs); }
.crm-stat::after { content: ""; position: absolute; right: -26px; bottom: -40px; width: 100px; height: 100px; border-radius: 50%; background: #f1f6f2; opacity: .75; }
.crm-stat-icon { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 9px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; flex: 0 0 auto; }
.crm-stat-icon.gold { background: var(--gold-soft); color: var(--gold); }
.crm-stat-icon.blue { background: var(--info-soft); color: var(--info); }
.crm-stat-icon.green { background: var(--brand-soft); color: var(--brand); }
.crm-stat-icon .icon { width: 15px; height: 15px; }
.crm-stat > div { position: relative; z-index: 1; min-width: 0; }
.crm-stat-value { font-family: var(--font-num); font-size: 23px; line-height: 1.15; font-weight: 600; letter-spacing: -.03em; color: #283e33; }
.crm-stat-value small { font-size: 9px; color: #7d8fa6; font-weight: 400; margin-left: 2px; letter-spacing: 0; }
.crm-stat-label { font-size: 9.5px; color: #687d71; margin-top: 4px; }
.crm-stat-sub { font-size: 8.5px; color: #8a9cb1; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-board { display: grid; grid-template-columns: repeat(5, minmax(195px, 1fr)); gap: 9px; align-items: start; overflow-x: auto; padding-bottom: 4px; }
.crm-scroll-hint { display: none; align-items: center; gap: 5px; padding: 0 3px 8px; font-size: 9px; color: #889ab0; }
.crm-scroll-hint .icon { width: 11px; height: 11px; }
.crm-column { background: #f7faff; border: 1px solid #e7eef7; border-radius: 12px; min-height: 220px; padding: 9px; transition: background .18s, border-color .18s; }
.crm-column.drag-over { background: #eef7f1; border-color: #a9c8b8; }
.crm-column-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 5px; padding: 1px 2px 8px; }
.crm-column-title { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; font-size: 10.5px; font-weight: 600; color: #465d51; }
.crm-column-title small { width: 100%; padding-left: 11px; color: #a1ada6; font-size: 8px; font-weight: 400; margin-top: -2px; }
.crm-cards { display: flex; flex-direction: column; gap: 7px; min-height: 42px; }
.lead-card { background: #fff; border: 1px solid #e5ecf5; border-radius: 10px; padding: 10px; cursor: grab; transition: border-color .18s, box-shadow .18s, transform .18s; box-shadow: 0 1px 2px rgba(20, 50, 38, .03); }
.lead-card:hover { border-color: #c3d3e6; box-shadow: 0 5px 16px rgba(20, 55, 41, .075); transform: translateY(-1px); }
.lead-card.dragging { opacity: .45; }
.lead-card.is-converted { background: #fbfcff; cursor: pointer; }
.lead-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 5px; }
.lead-card-name { font-size: 10.5px; color: #283d55; font-weight: 600; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lead-priority { width: 5px; height: 5px; border-radius: 50%; background: #99aabf; flex: 0 0 auto; margin-top: 4px; }
.lead-priority.high { background: #c69240; box-shadow: 0 0 0 3px #fbf3e6; }
.lead-priority.low { background: #99aabf; }
.lead-card-contact { display: flex; align-items: center; gap: 3px; margin-top: 5px; color: #7d8fa6; font-size: 8.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lead-card-contact .icon { width: 9px; height: 9px; }
.lead-card-value { margin-top: 8px; font-family: var(--font-num); font-size: 14px; font-weight: 600; color: #2d483b; letter-spacing: -.02em; }
.lead-card-value span { font-family: var(--font); font-size: 8px; color: #99a79f; font-weight: 400; letter-spacing: 0; margin-left: 2px; }
.lead-card-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 6px; }
.lead-card-tags .tag { font-size: 8px; height: 18px; padding: 0 5px; }
.lead-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin-top: 8px; padding-top: 7px; border-top: 1px solid #f1f5fb; }
.lead-card-meta { display: flex; align-items: center; gap: 5px; min-width: 0; flex-wrap: wrap; }
.lead-followup { display: inline-flex; align-items: center; gap: 2px; font-size: 8px; color: #7e90a6; white-space: nowrap; }
.lead-followup .icon { width: 9px; height: 9px; }
.lead-followup.overdue { color: var(--danger); }
.lead-followup.today { color: var(--warning); }
.lead-followup.converted { color: var(--brand); }
.lead-followup.muted { color: #a1aca5; }
.lead-activity-count { display: inline-flex; align-items: center; gap: 2px; font-size: 8px; color: #8a9cb1; }
.lead-activity-count .icon { width: 9px; height: 9px; }
.lead-stage-pill { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border-radius: 6px; background: color-mix(in srgb, var(--stage-color) 12%, white); color: var(--stage-color); font-size: 9px; font-weight: 500; white-space: nowrap; }
.lead-stage-pill::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.lead-detail-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 15px; }
.lead-stage-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 6px; background: color-mix(in srgb, var(--stage-color) 12%, white); color: var(--stage-color); font-size: 9.5px; font-weight: 600; }
.lead-stage-badge .icon { width: 11px; height: 11px; }
.lead-detail-side { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.lead-detail-side .filter-select { height: 29px; min-width: 106px; font-size: 9.5px; }
.lead-timeline { position: relative; padding-left: 22px; }
.lead-timeline::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 8px; width: 1px; background: #e4ebe4; }
.lead-timeline-item { position: relative; padding-bottom: 14px; }
.lead-timeline-item:last-child { padding-bottom: 0; }
.lead-timeline-dot { position: absolute; left: -22px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 1px solid color-mix(in srgb, var(--activity-color) 45%, white); color: var(--activity-color); display: grid; place-items: center; z-index: 1; }
.lead-timeline-dot .icon { width: 8px; height: 8px; }
.lead-timeline-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lead-timeline-head strong { font-size: 10px; color: #334862; font-weight: 600; }
.lead-timeline-head span { font-size: 8.5px; color: #8d9fb4; }
.lead-timeline-text { margin-top: 4px; padding: 7px 9px; background: #fff; border: 1px solid #e9eff7; border-radius: 3px 8px 8px 8px; font-size: 9.5px; line-height: 1.7; color: #5b6f88; }
.lead-timeline-foot { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 8px; color: #8b9db2; }
.lead-followup-form { margin-top: 14px; padding: 12px; border: 1px solid #dfe9e0; border-radius: 10px; background: #f8fbf7; }
.lead-followup-head { font-size: 10.5px; font-weight: 600; color: #3e5b4b; display: flex; align-items: center; gap: 5px; margin-bottom: 10px; }
.lead-followup-head .icon { width: 13px; height: 13px; color: #7f9a8b; }
.lead-followup-form .form-grid { gap: 9px 10px; }
.lead-followup-form .field > label { font-size: 9px; }
.lead-followup-form textarea { min-height: 62px; }
.lead-followup-actions { display: flex; justify-content: flex-end; margin-top: 8px; }

/* --------------------------------------------------------------------------
   Operations radar & tax
   -------------------------------------------------------------------------- */
.ops-radar { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 16px; }
.ops-card { position: relative; display: flex; align-items: flex-start; gap: 11px; min-width: 0; padding: 14px 15px; border: 1px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer; box-shadow: var(--shadow-xs); transition: border-color .18s, box-shadow .18s, transform .18s; }
.ops-card:hover { border-color: #c6d9cd; box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.ops-card::before { content: ""; position: absolute; left: 0; top: 15px; bottom: 15px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand); }
.ops-card.is-warning::before { background: var(--warning); }
.ops-card.is-danger::before { background: var(--danger); }
.ops-icon { width: 31px; height: 31px; border-radius: 9px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; flex: 0 0 auto; }
.ops-icon.tax { background: var(--info-soft); color: var(--info); }
.ops-icon.finance { background: var(--danger-soft); color: var(--danger); }
.ops-icon.qualification { background: var(--gold-soft); color: var(--gold); }
.ops-icon .icon { width: 15px; height: 15px; }
.ops-main { min-width: 0; flex: 1; }
.ops-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 9px; color: #7b8da3; }
.ops-badge { font-size: 8px; color: #9b6b22; background: #fbf3e4; padding: 2px 5px; border-radius: 4px; white-space: nowrap; }
.ops-badge.danger { color: #ad463c; background: #faece9; }
.ops-badge.ok { color: #4e8874; background: #edf5ef; }
.ops-value { margin-top: 3px; font-family: var(--font-num); font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: -.025em; color: #2c4337; }
.ops-value small { font-family: var(--font); font-size: 8.5px; font-weight: 400; letter-spacing: 0; color: #8294aa; margin-left: 3px; }
.ops-note { font-size: 8.5px; color: #98a59e; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ops-arrow { width: 12px; height: 12px; color: #a7b3ac; flex: 0 0 auto; margin-top: 2px; }

.tax-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 13px; }
.tax-stat { display: flex; align-items: flex-start; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 15px; box-shadow: var(--shadow-xs); }
.tax-stat-icon { width: 31px; height: 31px; border-radius: 9px; background: #eef3f9; color: #6d8579; display: grid; place-items: center; flex: 0 0 auto; }
.tax-stat.success .tax-stat-icon { background: var(--brand-soft); color: var(--brand); }
.tax-stat.pending .tax-stat-icon { background: var(--warning-soft); color: var(--warning); }
.tax-stat.danger .tax-stat-icon { background: var(--danger-soft); color: var(--danger); }
.tax-stat-icon .icon { width: 15px; height: 15px; }
.tax-stat-value { font-family: var(--font-num); font-size: 22px; font-weight: 600; line-height: 1.1; color: #2d4338; letter-spacing: -.02em; }
.tax-stat-label { font-size: 9.5px; color: #697d72; margin-top: 4px; }
.tax-stat-sub { font-size: 8.5px; color: #8a9cb1; margin-top: 3px; }
.tax-progress-card { background: linear-gradient(120deg, #f8fbf7, #fff); border: 1px solid var(--line); border-radius: 14px; padding: 13px 17px 11px; margin-bottom: 16px; }
.tax-progress-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.tax-progress-head strong { font-size: 10.5px; color: #3e584b; }
.tax-progress-head span { margin-left: 7px; font-size: 9px; color: #8395aa; }
.tax-progress-amount { text-align: right; font-size: 9px; color: #8799ae; white-space: nowrap; }
.tax-progress-amount strong { font-size: 11px; color: #3c5b4c; margin: 0 3px; }
.tax-progress-amount span { margin-left: 8px; }
.tax-progress-track { height: 7px; border-radius: 9px; background: #e9eff8; overflow: hidden; margin-top: 10px; }
.tax-progress-track span { display: block; height: 100%; border-radius: 9px; background: linear-gradient(90deg, #2f62b6, #7fa6e0); transition: width .4s; }
.tax-progress-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 7px; font-size: 8.5px; color: #8a9cb1; }
.tax-progress-foot span { display: inline-flex; align-items: center; gap: 3px; }
.tax-progress-foot .icon { width: 10px; height: 10px; color: #7d93ad; }
.tax-timeline { position: relative; padding-left: 22px; }
.tax-timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 12px; width: 1px; background: #e2e9f3; }
.tax-timeline-item { position: relative; display: flex; gap: 10px; padding-bottom: 17px; }
.tax-timeline-item:last-child { padding-bottom: 0; }
.tax-timeline-item > div { min-width: 0; }
.tax-timeline-item strong { font-size: 10px; color: #334862; display: block; }
.tax-timeline-dot { position: absolute; left: -22px; top: 2px; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid #d5ded6; background: #fff; color: #9eada4; display: grid; place-items: center; z-index: 1; }
.tax-timeline-dot .icon { width: 8px; height: 8px; }
.tax-timeline-item.done .tax-timeline-dot { background: #e8f4ee; border-color: #8dbca9; color: var(--brand); }
.tax-timeline-item.active .tax-timeline-dot { background: #fbf5e7; border-color: #c7a35f; color: #b18435; box-shadow: 0 0 0 3px #fcf8ef; }

/* --------------------------------------------------------------------------
   Finance
   -------------------------------------------------------------------------- */
.finance-insights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.finance-insight-card .card-body { padding: 13px 20px 15px; }
.aging-row { margin-bottom: 10px; }
.aging-row:last-child { margin-bottom: 0; }
.aging-labels { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 9px; color: #7d8f84; }
.aging-labels span { display: inline-flex; align-items: center; gap: 5px; }
.aging-labels i { width: 6px; height: 6px; border-radius: 2px; display: inline-block; }
.aging-labels strong { font-family: var(--font-num); font-size: 9.5px; color: #4c6357; font-weight: 500; }
.aging-track { height: 5px; border-radius: 9px; background: #eef3f9; overflow: hidden; margin-top: 5px; }
.aging-track span { display: block; height: 100%; border-radius: 9px; opacity: .9; }
.finance-inline-progress { width: 86px; height: 3px; border-radius: 9px; background: #e9eff7; overflow: hidden; margin-top: 5px; }
.finance-inline-progress span { display: block; height: 100%; background: #5b86d0; border-radius: 9px; }
.collection-bars { height: 122px; display: flex; align-items: flex-end; gap: 8px; padding-top: 4px; }
.collection-col { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; }
.collection-value { font-family: var(--font-num); font-size: 7.5px; color: #8c9b92; white-space: nowrap; }
.collection-bar-track { width: 100%; max-width: 29px; height: 85px; display: flex; align-items: flex-end; }
.collection-bar-track span { width: 100%; border-radius: 5px 5px 2px 2px; background: #d6e2f3; transition: height .4s; }
.collection-bar-track span.current { background: linear-gradient(180deg, #5b86d0, #1b4fae); }
.collection-label { font-size: 8px; color: #8a9cb1; white-space: nowrap; }
.finance-detail-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.finance-collect-progress { margin-bottom: 14px; }
.finance-collect-labels { display: flex; justify-content: space-between; align-items: center; font-size: 9px; color: #7d8fa6; }
.finance-collect-labels strong { font-family: var(--font-num); font-size: 10px; color: var(--brand); }
.finance-collect-track { height: 6px; border-radius: 9px; background: #ecf1f9; overflow: hidden; margin-top: 5px; }
.finance-collect-track span { display: block; height: 100%; border-radius: 9px; background: linear-gradient(90deg, #3c8d76, #7bb59e); }
.invoice-card { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px 14px; padding: 12px; background: #f7faff; border: 1px solid #e9eff7; border-radius: 9px; }
.invoice-card div { display: flex; flex-direction: column; gap: 2px; }
.invoice-card span { font-size: 8.5px; color: #8395aa; }
.invoice-card strong { font-size: 10px; color: #334862; font-weight: 500; word-break: break-all; }
.payment-list { display: flex; flex-direction: column; gap: 6px; }
.payment-row { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid #e9eff7; border-radius: 9px; background: #fff; }
.payment-icon { width: 27px; height: 27px; border-radius: 7px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); flex: 0 0 auto; }
.payment-icon .icon { width: 12px; height: 12px; }
.payment-main { flex: 1; min-width: 0; }
.payment-title { font-family: var(--font-num); font-size: 10.5px; font-weight: 600; color: #365044; }
.payment-title span { font-family: var(--font); font-size: 8.5px; font-weight: 400; color: #8e9e94; margin-left: 4px; }
.payment-sub { font-size: 8.5px; color: #8b9db2; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.finance-pay-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 14px; padding: 11px; border-radius: 10px; background: #f7faff; border: 1px solid #e9eff7; }
.finance-pay-summary div { display: flex; flex-direction: column; gap: 2px; }
.finance-pay-summary span { font-size: 8.5px; color: #8395aa; }
.finance-pay-summary strong { font-family: var(--font-num); font-size: 12px; color: #3c5447; }

/* --------------------------------------------------------------------------
   Administrative approval intelligence center
   -------------------------------------------------------------------------- */
.app-main { background: radial-gradient(circle at 18% 0%, rgba(215, 228, 247, .55), transparent 32%), radial-gradient(circle at 85% 10%, rgba(226, 236, 250, .45), transparent 30%), var(--bg); }
.approval-hero { position: relative; overflow: hidden; border-radius: 18px; padding: 25px 28px 21px; margin-bottom: 14px; color: #edf3fc; background: radial-gradient(circle at 86% 0%, rgba(201, 163, 92, .17), transparent 34%), radial-gradient(circle at 62% 120%, rgba(48, 112, 232, .22), transparent 45%), linear-gradient(125deg, #071b3a 0%, #0a2b5f 54%, #103c82 100%); box-shadow: 0 18px 42px rgba(8, 30, 70, .24), inset 0 1px 0 rgba(255, 255, 255, .06); }
.approval-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .28; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(90deg, #000, transparent 75%); }
.approval-hero::after { content: ""; position: absolute; left: 28px; right: 28px; top: 0; height: 1px; background: linear-gradient(90deg, rgba(217, 183, 112, .8), rgba(217, 183, 112, .08) 55%, transparent); }
.approval-hero-glow { position: absolute; width: 360px; height: 360px; right: -120px; top: -210px; border-radius: 50%; background: radial-gradient(circle, rgba(211, 176, 103, .18), transparent 68%); pointer-events: none; }
.approval-hero-top { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.approval-hero-copy { max-width: 690px; }
.approval-hero-eyebrow { display: flex; align-items: center; gap: 8px; color: #cbb177; font-size: 8px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.approval-hero-eyebrow span { width: 22px; height: 1px; background: #c7a96b; }
.approval-hero h1 { margin: 10px 0 7px; font-family: "Songti SC", "Noto Serif SC", "Source Han Serif SC", "STSong", serif; font-size: 35px; line-height: 1.15; font-weight: 600; letter-spacing: .025em; color: #fbf9f2; }
.approval-hero-copy p { margin: 0; max-width: 620px; color: #a8bdd8; font-size: 10px; line-height: 1.8; }
.approval-hero-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.btn-hero-ghost, .btn-hero-gold { height: 33px; padding: 0 13px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 500; transition: background .18s, border-color .18s, transform .18s; }
.btn-hero-ghost { border: 1px solid rgba(214, 228, 248, .24); color: #dbe7f7; background: rgba(255, 255, 255, .04); }
.btn-hero-ghost:hover { background: rgba(255, 255, 255, .1); border-color: rgba(214, 228, 248, .44); }
.btn-hero-gold { border: 1px solid #d9b66e; background: linear-gradient(180deg, #e8c987, #d3ad60); color: #102448; box-shadow: 0 5px 14px rgba(0, 0, 0, .2); }
.btn-hero-gold:hover { filter: brightness(1.04); transform: translateY(-1px); }
.btn-hero-ghost .icon, .btn-hero-gold .icon { width: 12px; height: 12px; }
.approval-hero-bottom { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 22px; margin-top: 20px; }
.approval-level-cards { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.approval-level-card { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 9px 10px; border-radius: 10px; border: 1px solid rgba(211, 227, 250, .12); background: rgba(255, 255, 255, .05); color: #dfe9f7; text-align: left; transition: background .18s, border-color .18s, transform .18s; }
.approval-level-card:hover { background: rgba(255, 255, 255, .09); border-color: rgba(220, 193, 137, .38); transform: translateY(-1px); }
.approval-level-seal { width: 29px; height: 29px; border-radius: 8px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(215, 182, 111, .34); background: rgba(207, 170, 92, .09); color: #d8bc80; font-family: "Songti SC", "STSong", serif; font-size: 13px; }
.approval-level-card.level-provincial .approval-level-seal { color: #a9c6ff; border-color: rgba(121, 164, 244, .36); }
.approval-level-card.level-municipal .approval-level-seal { color: #a8dcf4; border-color: rgba(120, 188, 226, .33); }
.approval-level-card.level-county .approval-level-seal { color: #cbbcf2; border-color: rgba(171, 151, 226, .34); }
.approval-level-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.approval-level-info strong { font-size: 10px; font-weight: 500; color: #f1f5fc; }
.approval-level-info small { font-size: 7.5px; color: #8ba1bd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.approval-level-count { margin-left: auto; display: flex; align-items: baseline; gap: 2px; color: #dcc58e; }
.approval-level-count strong { font-family: var(--font-num); font-size: 17px; font-weight: 500; }
.approval-level-count small { font-size: 7.5px; color: #8ba1bd; }
.approval-hero-metrics { display: flex; align-items: center; gap: 0; padding: 0 2px 1px 20px; border-left: 1px solid rgba(211, 227, 250, .14); }
.approval-hero-metrics div { display: flex; flex-direction: column; gap: 2px; min-width: 73px; padding: 0 15px; border-right: 1px solid rgba(211, 227, 250, .1); }
.approval-hero-metrics div:last-child { border-right: 0; padding-right: 0; }
.approval-hero-metrics strong { font-family: var(--font-num); font-size: 21px; line-height: 1.1; font-weight: 500; color: #f4ecda; }
.approval-hero-metrics span { font-size: 8px; color: #8ba1bd; white-space: nowrap; }
.approval-tabs { display: flex; align-items: center; gap: 3px; border-bottom: 1px solid var(--line); margin-bottom: 13px; }
.approval-tab { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 13px; border: 0; background: transparent; color: #7d90a7; font-size: 10.5px; font-weight: 500; transition: color .18s; }
.approval-tab:hover { color: var(--brand-dark); }
.approval-tab.active { color: var(--brand-dark); }
.approval-tab.active::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--gold), #d9bd84); border-radius: 2px 2px 0 0; }
.approval-tab b { min-width: 18px; height: 16px; padding: 0 5px; border-radius: 5px; background: #ecf1f9; color: #71859d; font-family: var(--font-num); font-size: 8px; font-weight: 500; display: grid; place-items: center; }
.approval-tab.active b { background: var(--brand-soft); color: var(--brand); }
.approval-tabs-note { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; color: #8b9db2; font-size: 8.5px; }
.approval-tabs-note .icon { width: 11px; height: 11px; color: var(--gold); }
.catalog-command { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 19px 22px; border-radius: 15px; border: 1px solid #dfe8f4; background: radial-gradient(circle at 92% 10%, rgba(184, 139, 65, .1), transparent 32%), linear-gradient(112deg, #fbfdff, #f1f6fd); margin-bottom: 12px; }
.catalog-command .eyebrow { color: #9a7c46; }
.catalog-command h2 { margin: 7px 0 4px; font-family: "Songti SC", "Noto Serif SC", "STSong", serif; font-size: 23px; font-weight: 600; color: #203a5f; letter-spacing: .02em; }
.catalog-command p { margin: 0; color: #7d8ea5; font-size: 9px; line-height: 1.7; }
.catalog-command-stats { display: flex; align-items: center; gap: 15px; flex: 0 0 auto; }
.catalog-command-stats span { display: flex; align-items: baseline; gap: 3px; color: #8e9b92; font-size: 8px; }
.catalog-command-stats strong { font-family: var(--font-num); font-size: 21px; font-weight: 500; color: #1e4f96; }
.catalog-filter-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.catalog-level-tabs { display: flex; gap: 2px; padding: 3px; background: #e7eef7; border-radius: 9px; }
.catalog-level-tab { height: 27px; padding: 0 9px; border: 0; border-radius: 6px; background: transparent; color: #7a8da4; font-size: 8.5px; transition: background .16s, color .16s; }
.catalog-level-tab b { font-family: var(--font-num); font-size: 7.5px; margin-left: 2px; color: #8d9fb4; }
.catalog-level-tab:hover { color: var(--brand-dark); }
.catalog-level-tab.active { background: #fff; color: var(--brand-dark); box-shadow: 0 1px 4px rgba(16, 39, 76, .09); }
.catalog-level-tab.active b { color: var(--gold); }
.catalog-toolbar { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.catalog-toolbar .search-field { width: 245px; }
.catalog-level-section { margin-bottom: 22px; }
.catalog-level-head { display: flex; align-items: center; gap: 9px; padding: 0 2px 9px; margin-bottom: 9px; border-bottom: 1px solid #e7eef7; }
.catalog-level-seal { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: 0 0 auto; font-family: "Songti SC", "STSong", serif; font-size: 13px; border: 1px solid #e6d7b9; background: #fbf7ed; color: #a47c36; }
.catalog-level-seal.level-provincial { border-color: #cfdcf0; background: #f1f6fd; color: #2f5da8; }
.catalog-level-seal.level-municipal { border-color: #d5e3ec; background: #f1f7fa; color: #4c7d9c; }
.catalog-level-seal.level-county { border-color: #e0d7ea; background: #f7f2fa; color: #7b639b; }
.catalog-level-head h3 { margin: 0; font-size: 12px; font-weight: 600; color: #29415f; }
.catalog-level-head p { margin: 2px 0 0; color: #8b9db2; font-size: 8.5px; }
.catalog-level-count { margin-left: auto; color: #8b9db2; font-size: 8.5px; }
.catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.catalog-card { position: relative; min-width: 0; padding: 12px 13px 10px; border: 1px solid #e4ebf4; border-radius: 11px; background: #fff; box-shadow: 0 1px 2px rgba(16, 39, 76, .035); cursor: pointer; transition: transform .18s, box-shadow .18s, border-color .18s; }
.catalog-card::before { content: ""; position: absolute; left: 13px; right: 13px; top: 0; height: 1px; background: linear-gradient(90deg, rgba(196, 155, 84, .35), transparent 80%); opacity: 0; transition: opacity .18s; }
.catalog-card:hover { transform: translateY(-2px); border-color: #c6d6e8; box-shadow: 0 10px 22px rgba(16, 39, 76, .08); }
.catalog-card:hover::before { opacity: 1; }
.catalog-card-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 7px; }
.catalog-code { font-family: var(--font-num); font-size: 7.5px; color: #94a4b8; letter-spacing: .03em; }
.catalog-title { margin: 0; min-height: 34px; font-size: 11.5px; line-height: 1.55; font-weight: 600; color: #293f5c; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.catalog-authority { display: flex; align-items: center; gap: 4px; margin-top: 5px; color: #8192a8; font-size: 8.5px; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.catalog-authority .icon { width: 9px; height: 9px; flex: 0 0 auto; color: #adb9b0; }
.catalog-meta { display: flex; align-items: center; gap: 0; flex-wrap: wrap; margin-top: 7px; color: #8799ae; font-size: 8px; }
.catalog-meta span { padding: 0 6px; border-right: 1px solid #e4ebf4; line-height: 1.5; }
.catalog-meta span:first-child { padding-left: 0; }
.catalog-meta span:last-child { border-right: 0; padding-right: 0; }
.catalog-meta b { font-family: var(--font-num); font-weight: 500; color: #536b86; }
.catalog-foot { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin-top: 8px; padding-top: 7px; border-top: 1px solid #eef3fa; }
.catalog-link, .catalog-generate { display: inline-flex; align-items: center; gap: 3px; border: 0; background: transparent; padding: 0; font-size: 8.5px; color: #7d90a7; }
.catalog-link:hover { color: var(--brand); }
.catalog-link .icon, .catalog-generate .icon { width: 9px; height: 9px; }
.catalog-generate { color: #a47b35; font-weight: 500; }
.catalog-generate:hover { color: #8a6426; }
.approval-level-pill { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px 0 3px; border-radius: 5px; border: 1px solid color-mix(in srgb, var(--level-color) 25%, white); background: color-mix(in srgb, var(--level-color) 9%, white); color: color-mix(in srgb, var(--level-color) 88%, #1a3558); font-size: 7.5px; font-weight: 500; white-space: nowrap; }
.level-mark { width: 12px; height: 12px; border-radius: 3px; background: color-mix(in srgb, var(--level-color) 16%, white); display: grid; place-items: center; font-family: "Songti SC", "STSong", serif; font-size: 7px; color: var(--level-color); }
.qual-type-cell { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.generate-source { padding: 12px 13px; border: 1px solid #dce7f4; border-radius: 10px; background: linear-gradient(100deg, #fbfdff, #f4f8fd); margin-bottom: 14px; }
.generate-source > div:first-child { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.generate-source strong { font-size: 10.5px; color: #2c4564; }
.generate-source > div:first-child > span:last-child { font-size: 8px; color: #8b9db2; }
.generate-source-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 7px; color: #8193a9; font-size: 8px; }
.generate-source-meta span { display: inline-flex; align-items: center; gap: 3px; }
.generate-source-meta .icon { width: 9px; height: 9px; color: #b29257; }

.notice-hero { position: relative; display: flex; align-items: center; gap: 14px; padding: 18px 19px; margin-bottom: 13px; border-radius: 13px; overflow: hidden; background: radial-gradient(circle at 90% 0, rgba(204, 169, 96, .2), transparent 35%), linear-gradient(120deg, #071b3a, #0d326c); color: #edf3fc; }
.notice-hero::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 34px 34px; opacity: .3; pointer-events: none; }
.notice-hero-seal { position: relative; z-index: 1; width: 54px; height: 54px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(220, 184, 108, .55); color: #e1c17e; font-family: "Songti SC", "STSong", serif; font-size: 12px; line-height: 1.35; text-align: center; letter-spacing: .12em; border-radius: 7px; background: rgba(217, 180, 100, .06); box-shadow: inset 0 0 0 3px rgba(217, 180, 100, .06); }
.notice-hero-main { position: relative; z-index: 1; min-width: 0; }
.notice-eyebrow { font-size: 7px; letter-spacing: .18em; color: #bba36d; font-weight: 600; }
.notice-hero-main h3 { margin: 5px 0 4px; font-family: "Songti SC", "Noto Serif SC", "STSong", serif; font-size: 18px; font-weight: 600; color: #faf7ef; line-height: 1.35; }
.notice-hero-main p { margin: 0; color: #9bb4d5; font-size: 8.5px; }
.notice-level { position: relative; z-index: 1; margin-left: auto; flex: 0 0 auto; padding: 4px 8px; border: 1px solid rgba(213, 182, 113, .35); border-radius: 5px; color: #d6ba81; font-size: 8px; }
.notice-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid #e7eef7; border-radius: 10px; overflow: hidden; background: #e7eef7; margin-bottom: 15px; }
.notice-facts div { display: flex; flex-direction: column; gap: 3px; padding: 9px 10px; background: #fbfcff; }
.notice-facts span { font-size: 7.5px; color: #8b9db2; }
.notice-facts strong { font-size: 9px; color: #3a5275; font-weight: 500; }
.notice-section { margin-bottom: 16px; }
.notice-section-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.notice-index { font-family: var(--font-num); font-size: 8px; color: #ac8b4f; border: 1px solid #e7d8bb; background: #fdfaf3; border-radius: 4px; padding: 2px 4px; line-height: 1.2; margin-top: 1px; }
.notice-section-head h4 { margin: 0; font-size: 11px; font-weight: 600; color: #243d5c; }
.notice-section-head p { margin: 2px 0 0; color: #8b9db2; font-size: 8px; }
.notice-conditions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 12px; margin: 0; padding: 0; list-style: none; }
.notice-conditions li { display: flex; align-items: flex-start; gap: 5px; padding: 6px 0; color: #5f7590; font-size: 8.5px; line-height: 1.65; border-bottom: 1px dashed #e9eff7; }
.notice-conditions .icon { width: 10px; height: 10px; flex: 0 0 auto; color: #4f7fbe; margin-top: 2px; }
.notice-material-list { border: 1px solid #e7eef7; border-radius: 9px; overflow: hidden; }
.notice-material-row { display: flex; align-items: flex-start; gap: 9px; padding: 8px 10px; border-bottom: 1px solid #eef3fa; background: #fff; }
.notice-material-row:last-child { border-bottom: 0; }
.notice-material-index { width: 20px; height: 20px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 5px; background: #f1f6fd; color: #7b90a7; font-family: var(--font-num); font-size: 8px; }
.notice-material-name { font-size: 9px; color: #314a68; font-weight: 500; line-height: 1.5; }
.notice-material-name em { font-style: normal; font-size: 7px; color: #b08335; background: #fbf4e7; border-radius: 3px; padding: 1px 4px; margin-left: 3px; }
.notice-material-requirement { margin-top: 2px; font-size: 7.5px; color: #8b9db2; line-height: 1.6; }
.notice-process { display: flex; gap: 0; padding: 11px 12px; border: 1px solid #e7eef7; border-radius: 9px; background: #fbfcff; overflow-x: auto; }
.notice-process-step { position: relative; flex: 1; min-width: 100px; display: flex; align-items: flex-start; gap: 6px; padding-right: 12px; }
.notice-step-no { width: 20px; height: 20px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; border: 1px solid #d5c29b; background: #fdfaf3; color: #a57f3f; font-family: var(--font-num); font-size: 7px; }
.notice-process-step strong { display: block; font-size: 8.5px; color: #3a5272; font-weight: 500; }
.notice-process-step p { margin: 2px 0 0; color: #8b9db2; font-size: 7.5px; line-height: 1.55; }
.notice-step-line { position: absolute; top: 10px; right: 4px; width: 8px; height: 1px; background: #e3d7bf; }
.notice-basis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.notice-basis-grid > div { padding: 9px 10px; border-left: 2px solid #dfcb9f; background: #fbfaf6; border-radius: 0 7px 7px 0; }
.notice-basis-grid span { color: #a78c5d; font-size: 7.5px; }
.notice-basis-grid p { margin: 3px 0 0; color: #5d738e; font-size: 8.5px; line-height: 1.7; }
.notice-footnote { display: flex; align-items: flex-start; gap: 6px; padding: 9px 10px; border-radius: 8px; background: #f5f8fc; color: #8497ad; font-size: 7.5px; line-height: 1.7; }
.notice-footnote .icon { width: 11px; height: 11px; flex: 0 0 auto; color: #8da2ba; margin-top: 1px; }
.notice-footnote p { margin: 0 0 2px; }
.notice-footnote p:last-child { margin-bottom: 0; }

@media (max-width: 1180px) {
  .approval-hero-metrics { display: none; }
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   Qualification agency
   -------------------------------------------------------------------------- */
.qual-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 13px; }
.qual-stat { display: flex; align-items: flex-start; gap: 10px; padding: 14px 15px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-xs); }
.qual-stat-icon { width: 31px; height: 31px; border-radius: 9px; background: var(--gold-soft); color: var(--gold); display: grid; place-items: center; flex: 0 0 auto; }
.qual-stat.warning .qual-stat-icon { background: var(--warning-soft); color: var(--warning); }
.qual-stat.purple .qual-stat-icon { background: var(--violet-soft); color: var(--violet); }
.qual-stat.danger .qual-stat-icon { background: var(--danger-soft); color: var(--danger); }
.qual-stat-icon .icon { width: 15px; height: 15px; }
.qual-stat-value { font-family: var(--font-num); font-size: 22px; font-weight: 600; line-height: 1.1; color: #2d4338; letter-spacing: -.02em; }
.qual-stat-label { font-size: 9.5px; color: #697d72; margin-top: 4px; }
.qual-stat-sub { font-size: 8.5px; color: #8a9cb1; margin-top: 3px; }
.qual-stage-strip { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 13px; }
.qual-stage-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 9px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: #6f8377; font-size: 9px; transition: background .16s, border-color .16s, color .16s; }
.qual-stage-chip:hover { border-color: #cbd9cf; background: #fbfcff; }
.qual-stage-chip.active { background: #223b58; border-color: #223b58; color: #f3f5f0; }
.qual-stage-chip b { font-family: var(--font-num); font-size: 8.5px; min-width: 17px; height: 16px; border-radius: 5px; background: #eef3f9; color: #7d8f84; display: inline-grid; place-items: center; font-weight: 500; }
.qual-stage-chip.active b { background: rgba(255, 255, 255, .13); color: #e7ece7; }
.qual-stage-chip .kanban-dot { flex: 0 0 auto; }
.qual-cell-icon { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--stage-color) 12%, white); color: var(--stage-color); flex: 0 0 auto; }
.qual-cell-icon .icon { width: 14px; height: 14px; }
.qual-table td { vertical-align: middle; }
.data-table.qual-table { min-width: 960px; }
.qual-stage-pill { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border-radius: 6px; background: color-mix(in srgb, var(--stage-color) 12%, white); color: var(--stage-color); font-size: 9px; font-weight: 500; white-space: nowrap; }
.qual-stage-pill::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.qual-due { display: inline-flex; align-items: center; gap: 3px; font-size: 9.5px; color: #60786b; white-space: nowrap; }
.qual-due .icon { width: 10px; height: 10px; }
.qual-due.overdue { color: var(--danger); }
.qual-due.soon { color: var(--warning); }
.qual-due.completed { color: var(--brand); }
.material-cell { width: 118px; }
.material-cell-top { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 8.5px; color: #70857a; }
.material-cell-top span:last-child { font-family: var(--font-num); color: #4f6d5d; }
.material-progress-track { width: 100%; height: 4px; border-radius: 9px; background: #e9eff7; overflow: hidden; margin-top: 4px; }
.material-progress-track span { display: block; height: 100%; border-radius: 9px; background: linear-gradient(90deg, #7fa6e0, #2f62b6); }
.qual-completed-row { background: #fcfdff; }
.qual-completed-row .cell-title { color: #50665a; }
.qual-detail-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.qual-detail-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.qual-return-notice { display: flex; gap: 9px; padding: 10px 12px; border: 1px solid #f0d6cf; background: #fdf6f3; border-radius: 9px; margin-bottom: 14px; color: #a45142; }
.qual-return-notice .icon { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; }
.qual-return-notice div { display: flex; flex-direction: column; gap: 2px; font-size: 9.5px; line-height: 1.6; }
.qual-return-notice strong { font-size: 10px; font-weight: 600; }
.qual-stepper { display: flex; gap: 0; padding: 13px 14px; background: #fff; border: 1px solid var(--line); border-radius: 11px; margin-bottom: 14px; overflow-x: auto; }
.qual-step { flex: 1; min-width: 83px; position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 8.5px; color: #8d9fb5; text-align: center; }
.qual-step::before { content: ""; position: absolute; top: 8px; right: -50%; width: 100%; height: 1px; background: #e9eff7; z-index: 0; }
.qual-step:last-child::before { display: none; }
.qual-step-dot { width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; background: #f3f7fc; border: 1px solid #dfe7e0; color: #98a89f; font-family: var(--font-num); font-size: 8px; position: relative; z-index: 1; }
.qual-step-dot .icon { width: 8px; height: 8px; }
.qual-step.done { color: #5d8c78; }
.qual-step.done .qual-step-dot { background: #e9f0fb; border-color: #9db9e0; color: var(--brand); }
.qual-step.current { color: #9c712b; font-weight: 600; }
.qual-step.current .qual-step-dot { background: #fbf4e5; border-color: #d2ad6b; color: #a87829; box-shadow: 0 0 0 3px #fdfaf3; }
.qual-material-progress { background: #f7faff; border: 1px solid #e9eff7; border-radius: 9px; padding: 10px 11px; margin-bottom: 10px; }
.qual-material-progress-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 9px; color: #7c9084; }
.qual-material-progress-head strong { font-size: 9px; font-weight: 500; color: #4d695b; }
.material-progress-large { height: 6px; margin-top: 6px; }
.qual-material-counts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 7px; font-size: 8px; color: #889aaf; }
.qual-material-counts .ok { color: #3f806a; }
.qual-material-counts .submitted { color: #9d742d; }
.qual-material-counts .danger { color: var(--danger); }
.material-list { display: flex; flex-direction: column; gap: 5px; }
.material-row { display: flex; align-items: center; gap: 8px; padding: 8px 9px; border: 1px solid #e9eff7; border-radius: 8px; background: #fff; }
.material-row.rejected { border-color: #f0d6d0; background: #fdf8f7; }
.material-row.approved { background: #fbfcff; }
.material-status-icon { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: #f3f7fc; color: #8b9d93; flex: 0 0 auto; }
.material-row.approved .material-status-icon { background: var(--brand-soft); color: var(--brand); }
.material-row.submitted .material-status-icon { background: var(--warning-soft); color: var(--warning); }
.material-row.rejected .material-status-icon { background: var(--danger-soft); color: var(--danger); }
.material-status-icon .icon { width: 11px; height: 11px; }
.material-main { flex: 1; min-width: 0; }
.material-name { font-size: 9.5px; color: #334862; line-height: 1.5; }
.material-name .req { font-size: 8px; }
.material-note { font-size: 8px; color: #a08a70; margin-top: 2px; line-height: 1.5; }
.material-select { height: 27px; min-width: 76px; padding: 0 20px 0 7px; font-size: 8.5px; color: #5f7669; border: 1px solid #dfe8e0; border-radius: 6px; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23798c80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 6px center; appearance: none; outline: none; }
.material-select:focus { border-color: #a9c6b6; box-shadow: 0 0 0 3px rgba(27, 79, 174, .07); }
.qual-timeline { position: relative; padding-left: 21px; }
.qual-timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 9px; width: 1px; background: #e2e9f3; }
.qual-timeline-item { position: relative; padding-bottom: 14px; }
.qual-timeline-item:last-child { padding-bottom: 0; }
.qual-timeline-dot { position: absolute; left: -21px; top: 2px; width: 15px; height: 15px; border-radius: 50%; border: 1px solid #c8d8ce; background: #fff; color: #6f9583; display: grid; place-items: center; z-index: 1; }
.qual-timeline-dot .icon { width: 8px; height: 8px; }
.qual-timeline-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.qual-timeline-head strong { font-size: 9.5px; font-weight: 600; color: #334862; }
.qual-timeline-head span { font-size: 8px; color: #8d9fb4; }
.qual-timeline-text { margin-top: 3px; padding: 6px 8px; border: 1px solid #e9eff7; background: #fff; border-radius: 3px 7px 7px 7px; font-size: 9px; color: #667a6f; line-height: 1.65; }
.qual-timeline-foot { display: flex; align-items: center; gap: 4px; font-size: 8px; color: #8b9db2; margin-top: 3px; }
.qual-complete-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; padding: 11px; border-radius: 9px; background: #f7faff; border: 1px solid #e9eff7; }
.qual-complete-summary div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qual-complete-summary span { font-size: 8px; color: #8395aa; }
.qual-complete-summary strong { font-size: 9.5px; color: #334862; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --------------------------------------------------------------------------
   Utilities & responsive
   -------------------------------------------------------------------------- */
.mobile-only { display: none; }
.desktop-only { display: initial; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.divider { height: 1px; background: var(--line); margin: 12px 0; }
.mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; }
.flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .flex-1 { flex: 1; } .min-w-0 { min-width: 0; }

@media (max-width: 1360px) {
  .view { padding: 24px 24px 50px; }
  .topbar { padding: 0 24px; }
  .stat-grid { gap: 11px; }
  .stat-card { padding: 14px 14px 13px; min-height: 116px; }
  .stat-value { font-size: 24px; }
  .dash-grid { grid-template-columns: minmax(0, 1.45fr) minmax(290px, .8fr); }
}
@media (max-width: 1180px) {
  :root { --sidebar-w: 232px; }
  .login-visual { padding: 38px 40px 26px; }
  .login-copy h1 { font-size: 43px; }
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
  .dash-grid > .dash-col:last-child { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .dash-grid > .dash-col:last-child > .card { margin: 0; }
  .kanban { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
  .permission-layout { grid-template-columns: 230px minmax(0, 1fr); }
  .announcement-layout { grid-template-columns: minmax(0, 1.4fr) minmax(250px, .7fr); }
}
@media (max-width: 980px) {
  :root { --sidebar-w: 258px; }
  .sidebar { transform: translateX(-100%); box-shadow: 20px 0 50px rgba(8, 25, 19, .2); }
  .sidebar.open { transform: translateX(0); }
  .app-main { margin-left: 0; }
  .topbar .mobile-menu-btn { display: grid; }
  .mobile-overlay { display: block; position: fixed; inset: 0; background: rgba(10, 28, 23, .4); z-index: 45; opacity: 0; pointer-events: none; transition: opacity .25s; }
  .mobile-overlay.show { opacity: 1; pointer-events: auto; }
  .topbar-date { display: none; }
  .login-screen { grid-template-columns: minmax(0, 1fr) minmax(400px, .9fr); }
  .login-visual { padding: 34px 30px 24px; }
  .login-copy h1 { font-size: 36px; }
  .login-feature-row { grid-template-columns: 1fr; gap: 0; }
  .login-feature:nth-child(n+3) { display: none; }
  .login-proof { gap: 18px; }
  .proof-stat strong { font-size: 21px; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cert-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .approval-summary { grid-template-columns: repeat(2, 1fr); }
  .team-summary { grid-template-columns: repeat(2, 1fr); }
  .stats-strip { grid-template-columns: repeat(2, 1fr); }
  .strip-item:nth-child(2) { border-right: 0; }
  .strip-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .announcement-layout { grid-template-columns: minmax(0, 1fr); }
  .announcement-side { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .permission-layout { grid-template-columns: 1fr; }
  .role-list { display: grid; grid-template-columns: repeat(2, 1fr); }
  .add-role-btn { grid-column: span 2; }
  .dash-grid-balanced { grid-template-columns: 1fr; }
  .crm-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tax-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qual-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-insights { grid-template-columns: 1fr; }
  .ops-radar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crm-board { grid-template-columns: repeat(5, 220px); }
  .approval-hero { padding: 21px 22px 18px; }
  .approval-hero h1 { font-size: 30px; }
  .approval-level-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .approval-hero-bottom { gap: 12px; }
  .approval-tabs-note { display: none; }
  .catalog-toolbar { width: 100%; margin-left: 0; }
  .catalog-toolbar .search-field { flex: 1; width: auto; }
}
@media (max-width: 820px) {
  .login-screen { display: block; min-height: 100vh; }
  .login-visual { display: none; }
  .login-panel { min-height: 100vh; padding: 28px 7vw 22px; }
  .login-mobile-brand { display: flex; }
  .login-form-wrap { max-width: 430px; }
  .login-form-wrap .login-heading h2 { font-size: 26px; }
  .topbar { padding: 0 15px; gap: 10px; height: 64px; }
  .topbar-search { max-width: none; }
  .topbar-right { gap: 4px; }
  .topbar-date, .topbar-divider, .user-meta, .user-button > .icon { display: none; }
  .topbar .timer-pill { max-width: 150px; }
  .timer-pill .timer-task { display: none; }
  .view { padding: 19px 15px 40px; }
  .page-head { gap: 12px; margin-bottom: 18px; }
  .page-title { font-size: 24px; }
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1; }
  .stat-grid { gap: 9px; }
  .stat-card { min-height: 106px; padding: 13px; }
  .stat-value { font-size: 22px; }
  .stat-icon { width: 28px; height: 28px; }
  .dash-grid > .dash-col:last-child { grid-template-columns: 1fr; }
  .kanban { grid-template-columns: 1fr; }
  .kanban-col { min-height: auto; }
  .task-stats { display: grid; grid-template-columns: repeat(2, 1fr); }
  .task-stat { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .task-stat:nth-child(2n) { border-right: 0; }
  .task-stat:nth-last-child(-n+2) { border-bottom: 0; }
  .modal-overlay { padding: 10px; align-items: flex-end; }
  .modal-card { max-height: 92vh; border-radius: 18px 18px 0 0; }
  .modal-card.drawer-card { border-radius: 18px 18px 0 0; width: 100%; height: 91vh; margin-top: auto; }
  .modal-header { padding: 17px 18px 13px; }
  .modal-body { padding: 0 18px 18px; }
  .drawer-card .modal-body { padding: 16px 18px 24px; }
  .modal-footer { padding: 12px 18px; }
  .form-grid, .form-grid.three { grid-template-columns: 1fr; }
  .form-grid .span-all { grid-column: auto; }
  .contract-preview-sheet { padding: 27px 21px 32px; }
  .contract-doc-title { font-size: 20px; }
  .contract-signatures { gap: 15px; }
  .contract-draft-mark { font-size: 55px; }
  .client-detail-grid { grid-template-columns: 1fr; }
  .table-wrap { overflow-x: auto; }
  .data-table { min-width: 720px; }
  .topbar-search kbd { display: none; }
  .stat-foot { flex-wrap: wrap; }
  .dropdown-panel { position: fixed; top: 65px; left: 10px; right: 10px; width: auto; max-width: none; }
  .role-list { grid-template-columns: 1fr; }
  .add-role-btn { grid-column: auto; }
  .announcement-side { grid-template-columns: 1fr; }
  .contract-preview-toolbar { justify-content: flex-end; }
  .contract-preview-close { right: 12px; top: 10px; }
  .audit-row { padding: 11px 14px; }
  .audit-time { display: none; }
  .ops-radar { grid-template-columns: 1fr; gap: 8px; }
  .crm-stat-grid { gap: 8px; }
  .crm-stat { padding: 12px; }
  .tax-stat { padding: 12px; }
  .tax-progress-head { flex-direction: column; gap: 4px; }
  .tax-progress-head span { display: block; margin: 2px 0 0; }
  .tax-progress-amount { text-align: left; white-space: normal; }
  .tax-progress-foot { flex-wrap: wrap; }
  .finance-insights { grid-template-columns: 1fr; gap: 12px; }
  .finance-detail-top { flex-wrap: wrap; }
  .crm-board { grid-template-columns: repeat(5, 220px); }
  .crm-scroll-hint { display: flex; }
  .crm-column { min-height: 0; }
  .qual-detail-hero { flex-wrap: wrap; }
  .qual-stage-strip { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .qual-stage-chip { flex: 0 0 auto; }
  .qual-stepper { padding: 11px 8px; }
  .qual-step { min-width: 72px; }
  .qual-complete-summary { grid-template-columns: 1fr; }
  .approval-hero-top { flex-direction: column; gap: 13px; }
  .approval-hero-actions { align-self: flex-start; }
  .approval-hero h1 { font-size: 28px; }
  .approval-hero-bottom { margin-top: 15px; }
  .catalog-command { align-items: flex-start; flex-direction: column; gap: 10px; padding: 16px 17px; }
  .catalog-command h2 { font-size: 21px; }
  .catalog-filter-row { align-items: flex-start; }
  .catalog-level-tabs { width: 100%; overflow-x: auto; }
  .catalog-level-tab { flex: 0 0 auto; }
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .notice-facts { grid-template-columns: repeat(2, 1fr); }
  .notice-conditions { grid-template-columns: 1fr; }
  .notice-basis-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .topbar-search { display: none; }
  .topbar-left { flex: 1; }
  .topbar-right { margin-left: auto; }
  .login-panel { padding: 24px 20px 18px; }
  .login-form-wrap .login-heading h2 { font-size: 24px; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat-card { min-height: 100px; border-radius: 13px; }
  .stat-label { font-size: 9.5px; }
  .stat-note { display: none; }
  .stats-strip { grid-template-columns: 1fr; }
  .strip-item { border-right: 0 !important; border-bottom: 1px solid var(--line); }
  .strip-item:last-child { border-bottom: 0; }
  .cert-stat-grid { grid-template-columns: 1fr 1fr; }
  .crm-stat-grid { gap: 8px; }
  .crm-stat { padding: 11px; gap: 8px; border-radius: 12px; }
  .crm-stat-icon { width: 27px; height: 27px; }
  .crm-stat-value { font-size: 19px; }
  .crm-stat-sub { display: none; }
  .tax-stat-grid { gap: 8px; }
  .tax-stat { padding: 11px; gap: 8px; border-radius: 12px; }
  .tax-stat-icon { width: 27px; height: 27px; }
  .tax-stat-value { font-size: 19px; }
  .tax-stat-sub { font-size: 8px; }
  .qual-stat-grid { gap: 8px; }
  .qual-stat { padding: 11px; gap: 8px; border-radius: 12px; }
  .qual-stat-icon { width: 27px; height: 27px; }
  .qual-stat-value { font-size: 19px; }
  .qual-stat-sub { font-size: 8px; }
  .qual-stage-chip { height: 28px; font-size: 8.5px; }
  .material-select { min-width: 70px; }
  .qual-material-counts { gap: 5px; }
  .qual-step { min-width: 67px; font-size: 8px; }
  .tax-progress-card { padding: 11px 13px 10px; border-radius: 12px; }
  .approval-hero { padding: 18px 16px 15px; border-radius: 14px; }
  .approval-hero h1 { font-size: 25px; }
  .approval-hero-copy p { font-size: 9px; line-height: 1.7; }
  .approval-hero-eyebrow { font-size: 6.8px; }
  .approval-hero-actions { width: 100%; }
  .approval-hero-actions .btn { flex: 1; justify-content: center; }
  .approval-level-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .approval-level-card { padding: 8px; }
  .approval-level-info small { display: none; }
  .approval-level-count strong { font-size: 15px; }
  .approval-tabs { overflow-x: auto; }
  .approval-tab { flex: 0 0 auto; padding: 0 10px; }
  .catalog-command { padding: 14px; }
  .catalog-command h2 { font-size: 19px; }
  .catalog-command-stats strong { font-size: 18px; }
  .catalog-grid { grid-template-columns: 1fr; }
  .catalog-level-head p { display: none; }
  .catalog-toolbar .search-field { flex-basis: 100%; }
  .catalog-toolbar .filter-select { flex: 1; min-width: 0; }
  .notice-hero { flex-wrap: wrap; padding: 14px; gap: 10px; }
  .notice-hero-seal { width: 44px; height: 44px; font-size: 10px; }
  .notice-hero-main h3 { font-size: 15px; }
  .notice-level { margin-left: 0; }
  .notice-facts { grid-template-columns: 1fr 1fr; }
  .notice-process { flex-direction: column; gap: 8px; overflow: visible; }
  .notice-process-step { padding-right: 0; }
  .notice-step-line { display: none; }
  .approval-hero-metrics { display: none; }
  .finance-pay-summary { grid-template-columns: 1fr 1fr; }
  .invoice-card { grid-template-columns: 1fr; }
  .collection-bars { gap: 4px; height: 112px; }
  .collection-bar-track { max-width: 24px; height: 76px; }
  .ops-note { white-space: normal; }
  .ops-card { padding: 12px 13px; }
  .ops-value { font-size: 18px; }
  .approval-summary { grid-template-columns: 1fr 1fr; gap: 8px; }
  .team-summary { grid-template-columns: 1fr 1fr; gap: 8px; }
  .task-stat { padding: 10px; }
  .task-stat-value { font-size: 16px; }
  .page-actions .btn { height: 34px; font-size: 10.5px; }
  .filter-select { flex: 1; min-width: 0; }
  .toolbar .filter-select { flex: 1 1 calc(50% - 8px); }
  .toolbar .search-field { flex-basis: 100%; max-width: none; }
  .toolbar .toolbar-spacer { display: none; }
  .toolbar .filter-chip { flex: 0 0 100%; justify-content: center; }
  .toolbar #crm-mine { flex: 0 0 100%; justify-content: center; }
  .search-field { flex-basis: 100%; max-width: none; }
  .toolbar { padding: 11px 13px; }
  .toolbar .btn { width: 100%; }
  .client-hero { flex-wrap: wrap; }
  .approval-side { display: none; }
  .approval-card { padding: 13px; gap: 9px; }
  .cert-notice { align-items: flex-start; }
  .cert-notice .link-btn { display: none; }
  .contract-preview-sheet { padding: 20px 15px 28px; }
  .contract-doc-meta { flex-direction: column; gap: 3px; }
  .contract-party-table { font-size: 9px; }
  .contract-party-table td { padding: 6px 7px; }
  .contract-body { font-size: 9px; }
  .contract-signatures { grid-template-columns: 1fr; gap: 18px; }
  .contract-doc-title { font-size: 17px; }
  .announcement-feature { padding: 16px; }
  .announcement-feature h2 { font-size: 16px; }
}

@media print {
  body { background: #fff; }
  .sidebar, .topbar, .modal-header, .modal-footer, .contract-preview-toolbar, .toast-root { display: none !important; }
  .modal-overlay, .contract-preview-overlay { position: static; background: #fff; padding: 0; display: block; }
  .contract-preview-wrap { max-height: none; padding: 0; }
  .contract-preview-sheet { box-shadow: none; max-width: none; padding: 0; }
  .contract-preview-sheet::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}








/* Certificate scope, urgent filter and risk rows */
.cert-scope-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid #dbe7f7;
  border-radius: 8px;
  background: rgba(255, 255, 255, .9);
  color: #526983;
  font-size: 8px;
  white-space: nowrap;
}
.cert-scope-pill .icon { width: 11px; height: 11px; color: #2563eb; }
.cert-urgent-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 29px;
  margin-left: auto;
  padding: 0 9px;
  border: 1px solid #f1c7c7;
  border-radius: 8px;
  background: #fff7f7;
  color: #a33b3b;
  font-size: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.cert-urgent-filter:hover { border-color: #e9a8a8; background: #fff1f1; }
.cert-urgent-filter .icon { width: 11px; height: 11px; }
.cert-urgent-filter strong {
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  background: #dc2626;
  color: #fff;
  font-family: var(--font-num);
  font-size: 7px;
}
.cert-row-risk td { background: #fff8f8; }
.cert-row-risk:hover td { background: #fff1f1; }
.cert-row-risk td:first-child { box-shadow: inset 3px 0 0 #dc2626; }
.cert-row-risk .cert-name { color: #b91c1c; }
.cert-risk-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 5px;
  border: 1px solid #fecaca;
  border-radius: 4px;
  background: #fee2e2;
  color: #b91c1c;
  font-size: 7px;
  font-weight: 600;
  vertical-align: middle;
}

/* Qualification / talent certificate split */
.certificate-tabs {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  margin-bottom: 15px;
  border: 1px solid #dfe9f5;
  border-radius: 10px;
  background: #eef4fc;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
}
.certificate-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 31px;
  padding: 0 13px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #61758d;
  font-size: 9.5px;
  cursor: pointer;
}
.certificate-tab .icon { width: 12px; height: 12px; }
.certificate-tab span {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: inline-grid;
  place-items: center;
  border-radius: 5px;
  background: rgba(100, 116, 139, .10);
  color: #71859c;
  font-family: var(--font-num);
  font-size: 7px;
}
.certificate-tab.active { background: #fff; color: #1d4ed8; box-shadow: 0 1px 3px rgba(15, 23, 42, .09); }
.certificate-tab.active span { background: #eaf2ff; color: #1d4ed8; }

.talent-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin: 18px 0 13px;
}
.talent-head h2 { margin-top: 3px; color: #000; font-size: 19px; font-weight: 650; letter-spacing: -.03em; }
.talent-head p { margin-top: 4px; color: #70839a; font-size: 9px; }
.talent-head-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.talent-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 13px;
}
.talent-summary-item {
  padding: 11px 13px;
  border: 1px solid #e4ecf6;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .03);
}
.talent-summary-item span { display: block; color: #8294a9; font-size: 8px; }
.talent-summary-item strong { display: inline-block; margin-top: 3px; color: #05070b; font-size: 18px; font-weight: 650; font-family: var(--font-num); }
.talent-summary-item small { margin-left: 2px; color: #9aa9ba; font-size: 8px; }
.talent-summary-item.risk strong { color: #b91c1c; }
.talent-linked {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #1d4ed8;
  font-size: 8px;
}
.talent-linked .icon { width: 10px; height: 10px; flex: 0 0 auto; }

.cert-personnel-block {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #eef3f9;
}
.cert-personnel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.cert-personnel-head h4 { display: flex; align-items: center; gap: 5px; color: #111827; font-size: 10.5px; font-weight: 600; }
.cert-personnel-head h4 .icon { width: 13px; height: 13px; color: #2563eb; }
.cert-personnel-head p { margin-top: 3px; color: #8193a8; font-size: 8px; line-height: 1.55; }
.cert-personnel-count { color: #2563eb; font-size: 8px; font-weight: 500; }
.cert-personnel-list { display: flex; flex-direction: column; gap: 6px; }
.cert-personnel-row {
  display: grid;
  grid-template-columns: 1fr 1.05fr 1.45fr .8fr .9fr 28px;
  align-items: end;
  gap: 8px;
  padding: 8px;
  border: 1px solid #e6eef7;
  border-radius: 8px;
  background: #fbfdff;
}
.cert-personnel-row .field { gap: 3px; }
.cert-personnel-row .field label { color: #7b8ea3; font-size: 7.5px; }
.cert-personnel-row .field input, .cert-personnel-row .field select { height: 29px; font-size: 8.5px; padding: 0 7px; }
.cert-personnel-remove {
  width: 27px;
  height: 29px;
  display: grid;
  place-items: center;
  border: 1px solid #f0dada;
  border-radius: 6px;
  background: #fff8f8;
  color: #b45a5a;
  cursor: pointer;
}
.cert-personnel-remove:hover { background: #fff1f1; color: #b91c1c; }
.cert-personnel-remove .icon { width: 12px; height: 12px; }
.cert-personnel-empty {
  padding: 11px;
  border: 1px dashed #dfe8f3;
  border-radius: 8px;
  background: #fbfdff;
  color: #8a9bad;
  font-size: 8px;
  text-align: center;
}
.cert-linked-note {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-top: 11px;
  padding: 8px 9px;
  border: 1px solid #e3edf9;
  border-radius: 7px;
  background: #f8fbff;
  color: #5d7691;
  font-size: 8px;
  line-height: 1.6;
}
.cert-linked-note .icon { width: 11px; height: 11px; flex: 0 0 auto; color: #2563eb; }
.cert-detail-personnel { display: flex; flex-direction: column; gap: 6px; }
.cert-detail-person { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 9px; border: 1px solid #e8eff7; border-radius: 8px; background: #fbfdff; }
.cert-detail-person .cell-main { gap: 7px; }
.cert-detail-person-meta { display: flex; flex-direction: column; gap: 2px; color: #71859c; font-size: 7.5px; text-align: right; }
@media (max-width: 1100px) {
  .cert-personnel-row { grid-template-columns: 1fr 1fr 1.4fr .8fr .9fr 28px; }
  .talent-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .certificate-tabs { display: flex; width: 100%; }
  .certificate-tab { flex: 1; justify-content: center; }
  .talent-head { align-items: flex-start; flex-direction: column; gap: 9px; }
  .cert-personnel-row { grid-template-columns: 1fr 1fr 28px; }
  .cert-personnel-row .field:nth-child(3), .cert-personnel-row .field:nth-child(4) { grid-column: span 1; }
  .cert-detail-person { align-items: flex-start; flex-direction: column; }
  .cert-detail-person-meta { text-align: left; }
}
.cert-head-actions { display: inline-flex; align-items: center; gap: 7px; }
.cert-optional { color: #91a1b3; font-size: 8px; font-weight: 400; }
.cert-client-picker { display: flex; align-items: center; gap: 6px; }
.cert-client-picker select { flex: 1; }
.cert-client-picker .btn { flex: 0 0 auto; height: 34px; white-space: nowrap; }
.cert-client-picker + #manual-client-name { margin-top: 2px; }
#manual-client-name { border-color: #b9d5f0; background: #fbfdff; }

.person-reminder { flex: 1 1 100%; min-width: 0; padding-top: 2px; }
.cert-personnel-row .person-reminder { grid-column: 1 / -1; margin-top: 2px; }
.person-reminder-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; color: #7d90a6; font-size: 7.5px; }
.person-reminder-head span:last-child { color: #4f6b8a; font-family: var(--font-num); font-size: 7.5px; }
.person-reminder-track {
  position: relative;
  height: 7px;
  overflow: hidden;
  border-radius: 99px;
  background: linear-gradient(90deg, #edf6ff 0%, #d7e8fa 36%, #a9c9eb 68%, #6f9dd4 100%);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .06);
}
.person-reminder-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #dbeafe 0%, #bfdbfe 24%, #60a5fa 52%, #2563eb 76%, #1e40af 100%);
  box-shadow: 0 1px 3px rgba(37, 99, 235, .18);
  transition: width .45s ease;
}
.person-reminder-fill { position: relative; z-index: 1; }
.person-reminder-marker {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 4px;
  height: 11px;
  border: 1px solid #1d4ed8;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .2);
  transform: translate(-50%, -50%);
}
.person-reminder.overdue .person-reminder-track { background: linear-gradient(90deg, #fff1f1, #fecaca 54%, #dc2626); }
.person-reminder.overdue .person-reminder-fill { background: linear-gradient(90deg, #fee2e2 0%, #fca5a5 38%, #dc2626 74%, #991b1b 100%); box-shadow: 0 1px 3px rgba(220, 38, 38, .16); }
.person-reminder.overdue .person-reminder-marker { border-color: #b91c1c; }
.person-reminder.overdue .person-reminder-head span:last-child { color: #b91c1c; }
.person-reminder.long-term .person-reminder-fill { background: linear-gradient(90deg, #dbeafe, #60a5fa, #1e40af); }
.person-reminder.long-term .person-reminder-marker { display: none; }
.cert-detail-person { flex-wrap: wrap; }
.cert-detail-person .person-reminder { margin-top: 2px; }


/* Distinct certificate category tabs */
.certificate-tabs {
  gap: 4px;
  padding: 4px;
  border-color: #d9e4f1;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 4px 14px rgba(15, 23, 42, .08);
}
.certificate-tab {
  height: 33px;
  padding: 0 14px;
  border: 1px solid transparent;
  font-weight: 500;
  transition: background .18s, color .18s, border-color .18s, transform .18s, box-shadow .18s;
}
.certificate-tab:hover { transform: translateY(-1px); }
.certificate-tab[data-cert-tab="qualification"] {
  border-color: #c8ddf7;
  background: #e7f1ff;
  color: #1d4ed8;
}
.certificate-tab[data-cert-tab="talent"] {
  border-color: #e2cef9;
  background: #f3e9ff;
  color: #7e22ce;
}
.certificate-tab[data-cert-tab="qualification"] span { background: #d3e5fb; color: #1d4ed8; }
.certificate-tab[data-cert-tab="talent"] span { background: #e8d8fa; color: #6b21a8; }
.certificate-tab.active {
  color: #fff;
  border-color: transparent;
}
.certificate-tab.active[data-cert-tab="qualification"] {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  box-shadow: 0 5px 14px rgba(37, 99, 235, .28);
}
.certificate-tab.active[data-cert-tab="talent"] {
  background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%);
  box-shadow: 0 5px 14px rgba(126, 34, 206, .24);
}
.certificate-tab.active span {
  background: rgba(255, 255, 255, .22);
  color: #fff;
}

/* Vivid certificate risk summary cards */
.cert-stat { box-shadow: 0 3px 12px rgba(15, 23, 42, .045); transition: transform .18s ease, box-shadow .18s ease; }
.cert-stat:hover { transform: translateY(-2px); box-shadow: 0 7px 20px rgba(15, 23, 42, .09); }
.cert-stat::before { width: 4px; top: 12px; bottom: 12px; }
.cert-stat.expired {
  --cert-color: #dc2626;
  border-color: #fecdd3;
  background: linear-gradient(135deg, #ffe4e6 0%, #fff1f2 56%, #ffffff 100%);
  box-shadow: 0 4px 14px rgba(225, 29, 72, .1);
}
.cert-stat.critical {
  --cert-color: #f59e0b;
  border-color: #fed7aa;
  background: linear-gradient(135deg, #ffedd5 0%, #fff7ed 56%, #ffffff 100%);
  box-shadow: 0 4px 14px rgba(245, 158, 11, .1);
}
.cert-stat.warning {
  --cert-color: #2563eb;
  border-color: #bfdbfe;
  background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 56%, #ffffff 100%);
  box-shadow: 0 4px 14px rgba(37, 99, 235, .09);
}
.cert-stat.normal {
  --cert-color: #4f46e5;
  border-color: #c7d2fe;
  background: linear-gradient(135deg, #e0e7ff 0%, #eef2ff 56%, #ffffff 100%);
  box-shadow: 0 4px 14px rgba(79, 70, 229, .09);
}
.cert-stat.expired .cert-stat-label, .cert-stat.expired .cert-stat-value { color: #9f1239; }
.cert-stat.critical .cert-stat-label, .cert-stat.critical .cert-stat-value { color: #b45309; }
.cert-stat.warning .cert-stat-label, .cert-stat.warning .cert-stat-value { color: #1d4ed8; }
.cert-stat.normal .cert-stat-label, .cert-stat.normal .cert-stat-value { color: #3730a3; }
.cert-stat.expired .cert-stat-note { color: #be123c; }
.cert-stat.critical .cert-stat-note { color: #b45309; }
.cert-stat.warning .cert-stat-note { color: #2563eb; }
.cert-stat.normal .cert-stat-note { color: #4f46e5; }
.cert-stat .cert-stat-value small { color: currentColor; opacity: .62; }

/* iOS Reminders inspired color modules */
:root {
  --ios-blue-gradient: linear-gradient(145deg, #67d4ff 0%, #2f9ff5 48%, #0a6cff 100%);
  --ios-coral-gradient: linear-gradient(145deg, #ffadaf 0%, #ff7272 48%, #ff3b30 100%);
  --ios-charcoal-gradient: linear-gradient(145deg, #66666a 0%, #404043 48%, #1c1c1e 100%);
  --ios-silver-gradient: linear-gradient(145deg, #dedee2 0%, #b4b4bc 46%, #7e7e86 100%);
}
.stat-card {
  min-height: 132px;
  padding: 18px 18px 16px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 18px;
  background: var(--ios-blue-gradient);
  box-shadow: 0 9px 22px rgba(15, 23, 42, .12);
  color: #fff;
  text-shadow: 0 1px 2px rgba(20, 40, 80, .12);
  transition: transform .18s ease, box-shadow .18s ease;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15, 23, 42, .18); }
.stat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 48%);
  pointer-events: none;
}
.stat-card::after { z-index: 0; background: rgba(255, 255, 255, .16); opacity: 1; }
.stat-card.ios-blue { background: var(--ios-blue-gradient); }
.stat-card.ios-coral, .stat-card.red { background: var(--ios-coral-gradient); }
.stat-card.ios-charcoal, .stat-card.gold, .stat-card.violet { background: var(--ios-charcoal-gradient); }
.stat-card.ios-silver, .stat-card.blue { background: var(--ios-silver-gradient); }
.stat-label { color: rgba(255, 255, 255, .92); }
.stat-label .icon { color: rgba(255, 255, 255, .82); }
.stat-index { color: rgba(255, 255, 255, .52); }
.stat-icon {
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .17);
  color: #fff;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .22);
  backdrop-filter: blur(9px);
}
.stat-value { color: #fff; text-shadow: 0 1px 3px rgba(20, 40, 80, .16); }
.stat-value .unit, .stat-value .prefix { color: rgba(255, 255, 255, .8); text-shadow: none; }
.stat-foot { color: rgba(255, 255, 255, .9); }
.stat-trend, .stat-trend.up, .stat-trend.warn, .stat-trend.danger { color: rgba(255, 255, 255, .9); }
.stat-trend .icon { color: rgba(255, 255, 255, .8); }
.stat-note { color: rgba(255, 255, 255, .72); }
.stat-card.ios-silver .stat-label, .stat-card.ios-silver .stat-value, .stat-card.blue .stat-label, .stat-card.blue .stat-value { text-shadow: 0 1px 2px rgba(20, 25, 35, .2); }

/* Long group name fits the fixed sidebar */
.sidebar .brand-name-long {
  font-size: 14px;
  letter-spacing: .015em;
  white-space: nowrap;
}


/* Amount fields: the currency prefix and the number are separate flex segments,
   so a typed first digit can never sit underneath the symbol. */
.amount-input {
  display: flex;
  align-items: stretch;
  position: relative;
  height: 37px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
  transition: border-color .18s, box-shadow .18s;
}
.amount-input > span {
  position: static;
  transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 31px;
  padding: 0 9px;
  border-right: 1px solid #e1eaf5;
  background: #f1f6fc;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
.field .amount-input input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 35px;
  padding: 0 11px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.amount-input:focus-within {
  border-color: #a6c5b6;
  box-shadow: 0 0 0 3px rgba(27, 79, 174, .08);
}
.field .amount-input input:focus {
  border-color: transparent;
  box-shadow: none;
}

/* Certificate original / copy upload and preview */
.cert-documents-block {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #eef3f9;
}
.cert-documents-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}
.cert-documents-head h4 {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #111827;
  font-size: 10.5px;
  font-weight: 600;
}
.cert-documents-head h4 .icon { width: 13px; height: 13px; color: #2563eb; }
.cert-documents-head p { margin-top: 3px; color: #8193a8; font-size: 8px; line-height: 1.55; }
.cert-documents-hint { flex: 0 0 auto; color: #93a3b5; font-size: 7.5px; }
.cert-upload-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cert-upload-card {
  min-width: 0;
  padding: 8px;
  border: 1px dashed #d5e2f1;
  border-radius: 11px;
  background: #f8fbff;
}
.cert-upload-card.has-file { border-style: solid; border-color: #c8dcf4; background: #fff; }
.cert-upload-preview {
  position: relative;
  height: 118px;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(145deg, #eef4fb, #e4edf8);
  display: grid;
  place-items: center;
}
.cert-upload-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cert-upload-placeholder { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #9aabbe; }
.cert-upload-placeholder .icon { width: 26px; height: 26px; }
.cert-upload-placeholder small { font-size: 7px; letter-spacing: .03em; }
.cert-upload-info { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 7px; min-width: 0; }
.cert-upload-info strong { color: #31465e; font-size: 8.5px; font-weight: 600; flex: 0 0 auto; }
.cert-upload-info span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8a9bad; font-size: 7.5px; }
.cert-upload-actions { display: flex; align-items: center; gap: 5px; margin-top: 6px; }
.cert-upload-actions .btn { height: 25px; padding: 0 7px; font-size: 7.5px; }
.cert-upload-actions .icon { width: 11px; height: 11px; }

.cert-document-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cert-document-card {
  min-width: 0;
  font: inherit;
  color: inherit;
  appearance: none;
  padding: 8px;
  border: 1px solid #e4edf7;
  border-radius: 11px;
  background: #fbfdff;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.cert-document-card.has-file:hover {
  border-color: #bed6f1;
  box-shadow: 0 5px 14px rgba(37, 99, 235, .1);
  transform: translateY(-1px);
}
.cert-document-card:disabled { cursor: default; opacity: .78; }
.cert-document-preview {
  height: 132px;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(145deg, #eef4fb, #e4edf8);
  display: grid;
  place-items: center;
}
.cert-document-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cert-document-placeholder { display: flex; flex-direction: column; align-items: center; gap: 5px; color: #9aabbe; }
.cert-document-placeholder .icon { width: 25px; height: 25px; }
.cert-document-placeholder small { font-size: 7px; }
.cert-document-copy { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 7px; min-width: 0; }
.cert-document-copy strong { color: #31465e; font-size: 9px; flex: 0 0 auto; }
.cert-document-copy span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8a9bad; font-size: 7.5px; }
.cert-document-view { display: inline-flex; align-items: center; gap: 3px; margin-top: 5px; color: #2563eb; font-size: 7.5px; }
.cert-document-view .icon { width: 10px; height: 10px; }
.cert-document-view.muted { color: #9aabbe; }

.cert-image-viewer {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  max-height: 70vh;
  padding: 10px;
  border-radius: 10px;
  background: #0e131b;
}
.cert-image-viewer img { max-width: 100%; max-height: 68vh; object-fit: contain; border-radius: 5px; }
@media (max-width: 700px) {
  .cert-upload-grid, .cert-document-grid { grid-template-columns: 1fr; }
  .cert-documents-head { flex-direction: column; gap: 4px; }
}

.cert-upload-preview img[hidden],
.cert-document-preview img[hidden] {
  display: none !important;
}

/* "Only mine" task filter: unmistakable on/off state */
#mine-toggle {
  background: #fff;
  border-color: #d5e0ed;
  color: #52657a;
  transition: background .18s, border-color .18s, color .18s, box-shadow .18s;
}
#mine-toggle:hover {
  background: #f4f8ff;
  border-color: #b8cee7;
  color: #1d4ed8;
}
#mine-toggle.active {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  border-color: #1d4ed8;
  color: #fff;
  box-shadow: 0 4px 12px rgba(37, 99, 235, .24);
}
#mine-toggle.active .icon { color: #fff; }
#mine-toggle.active:hover {
  background: linear-gradient(135deg, #2f74e8 0%, #173fb8 100%);
  border-color: #173fb8;
  color: #fff;
}

/* Task collaborators */
.task-collaborator-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 8px;
  border: 1px solid #e3ebf5;
  border-radius: 9px;
  background: #fbfdff;
}
.task-collaborator-option {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid #e7edf5;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color .16s, background .16s, box-shadow .16s;
}
.task-collaborator-option:hover { border-color: #c5d9ef; background: #f8fbff; }
.task-collaborator-option:has(input:checked) {
  border-color: #9dc3ee;
  background: #f0f7ff;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .06);
}
.task-collaborator-option input {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  accent-color: #2563eb;
}
.task-collaborator-avatar {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 7px;
  color: #fff;
  font-size: 9px;
  font-weight: 600;
}
.task-collaborator-copy { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.task-collaborator-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #31465e; font-size: 9px; font-weight: 600; }
.task-collaborator-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8a9bad; font-size: 7.5px; }
.task-card-collabs { display: inline-flex; align-items: center; gap: -3px; }
.task-card-collabs .avatar { margin-left: -4px; border: 1px solid #fff; }
.task-detail-collaborators { display: flex; flex-wrap: wrap; gap: 6px; }
.task-detail-collaborator { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px 3px 3px; border: 1px solid #e3ebf5; border-radius: 99px; background: #f8fbff; color: #40546c; font-size: 8px; }
.task-detail-collaborator .avatar { border: 0; }
.task-handoff-choice { display: flex; flex-direction: column; gap: 10px; }
.task-handoff-choice label { display: flex; align-items: center; gap: 8px; padding: 9px; border: 1px solid #e3ebf5; border-radius: 9px; cursor: pointer; }
.task-handoff-choice label:has(input:checked) { border-color: #9dc3ee; background: #f0f7ff; }
.task-handoff-choice input { accent-color: #2563eb; }
@media (max-width: 700px) {
  .task-collaborator-picker { grid-template-columns: 1fr; }
}
.task-card-collab-more { margin-left: 2px; color: #7b8ea3; font-size: 7px; }
.task-locked-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px dashed #dbe6f3;
  border-radius: 9px;
  background: #f8fbff;
  color: #7b8ea3;
  font-size: 9px;
}
.task-locked-note .icon { width: 12px; height: 12px; }
.task-handoff-choice label strong { color: #31465e; font-size: 9.5px; font-weight: 600; }
.task-handoff-choice label small { display: block; color: #8a9bad; font-size: 8px; margin-top: 1px; }
.task-handoff-choice label > span { display: flex; flex-direction: column; }

/* Task progress, team and initiated-timer controls */
.task-progress { margin: 11px 0 2px; }
.task-progress.is-compact { margin: 7px 0 0; }
.task-progress-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; color: #7c8da2; font-size: 8.5px; }
.task-progress-head strong { color: #2563eb; font-family: var(--font-num); font-size: 9.5px; font-weight: 600; }
.task-progress-track { height: 6px; overflow: hidden; border-radius: 99px; background: #e9f0f9; }
.task-progress-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #60a5fa, #2563eb); transition: width .25s; }
.task-progress.is-compact .task-progress-track { height: 4px; }
.task-progress-range { width: 100%; height: 5px; accent-color: #2563eb; cursor: pointer; }
#task-progress-value { color: #2563eb; font-family: var(--font-num); font-size: 10px; font-weight: 600; }
.task-team-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.task-team-member { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 9px; border: 1px solid #e5edf7; border-radius: 9px; background: #fbfdff; }
.task-team-copy { min-width: 0; flex: 1; }
.task-team-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #31465e; font-size: 9.5px; font-weight: 600; }
.task-team-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8a9bad; font-size: 8px; }
.task-team-roles { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; justify-content: flex-end; }
.task-team-role { padding: 2px 5px; border-radius: 99px; background: #eef4fc; color: #55708d; font-size: 7px; white-space: nowrap; }
.task-team-role.is-creator { background: #fff4df; color: #986a23; }
.task-team-role.is-lead { background: #e9f1ff; color: #2563eb; }
.task-card-timer:disabled { opacity: .72; cursor: not-allowed; }
.timer-btn:disabled { cursor: not-allowed; opacity: .65; }
.timer-lock { width: 23px; height: 23px; display: grid; place-items: center; color: #8a9bad; }
.timer-lock .icon { width: 11px; height: 11px; }
@media (max-width: 700px) {
  .task-team-list { grid-template-columns: 1fr; }
}


.field input.task-progress-range {
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  accent-color: #2563eb;
}

/* Task final payment settlement badge */
.task-card-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 6px; }
.task-card-tags .task-card-client { margin-top: 0; }
.task-settlement {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border: 1px solid transparent;
  border-radius: 5px;
  font-size: 7.5px;
  line-height: 1.5;
  white-space: nowrap;
}
.task-settlement .icon { width: 9px; height: 9px; }
.task-settlement.is-yes { border-color: #f3d9a7; background: #fff8e8; color: #a16207; }
.task-settlement.is-no { border-color: #e5ebf3; background: #f5f8fc; color: #64748b; }
.task-settlement.is-unset { border-style: dashed; border-color: #d9e4f0; background: #fff; color: #94a3b8; }
.task-meta-value .task-settlement { font-size: 8px; padding: 3px 7px; }
.task-meta-value .task-settlement .icon { width: 10px; height: 10px; }

/* Clickable, high-contrast task summary modules */
.task-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.task-stat {
  --ts-color: #334155;
  --ts-soft: #eef2f7;
  --ts-border: #d7e0eb;
  --ts-glow: rgba(51, 65, 85, .18);
  position: relative;
  min-width: 0;
  min-height: 66px;
  padding: 12px 13px;
  border: 1px solid var(--ts-border);
  border-radius: 12px;
  background: linear-gradient(135deg, #fff 0%, #f5f8fc 100%);
  cursor: pointer;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.task-stat:last-child { border-right: 1px solid var(--ts-border); }
.task-stat[data-task-stat="todo"] {
  --ts-color: #334155;
  --ts-soft: #e8edf4;
  --ts-border: #d6e0eb;
  --ts-glow: rgba(51, 65, 85, .22);
  background: linear-gradient(135deg, #fff 0%, #f4f7fb 100%);
}
.task-stat[data-task-stat="in_progress"] {
  --ts-color: #1d4ed8;
  --ts-soft: #e7f0ff;
  --ts-border: #cddff9;
  --ts-glow: rgba(37, 99, 235, .24);
  background: linear-gradient(135deg, #fff 0%, #eef5ff 100%);
}
.task-stat[data-task-stat="dueToday"] {
  --ts-color: #be123c;
  --ts-soft: #ffe8ee;
  --ts-border: #f4ccd7;
  --ts-glow: rgba(190, 18, 60, .22);
  background: linear-gradient(135deg, #fff 0%, #fff2f5 100%);
}
.task-stat[data-task-stat="weekHours"] {
  --ts-color: #b45309;
  --ts-soft: #fff4df;
  --ts-border: #f0d9ae;
  --ts-glow: rgba(180, 83, 9, .22);
  background: linear-gradient(135deg, #fff 0%, #fff8eb 100%);
}
.task-stat:hover {
  transform: translateY(-2px);
  border-color: var(--ts-color);
  box-shadow: 0 8px 18px var(--ts-glow);
}
.task-stat.is-active {
  border-color: var(--ts-color);
  box-shadow: 0 0 0 2px var(--ts-soft), 0 7px 16px var(--ts-glow);
}
.task-stat-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--ts-color);
  color: #fff;
  box-shadow: 0 5px 11px var(--ts-glow);
}
.task-stat-icon .icon { width: 15px; height: 15px; }
.task-stat-copy { min-width: 0; }
.task-stat-value { color: var(--ts-color); font-size: 20px; font-weight: 700; }
.task-stat-label { color: #70839a; font-size: 9px; }
.task-stat-arrow {
  margin-left: auto;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: var(--ts-color);
  background: var(--ts-soft);
  opacity: .55;
  transition: opacity .18s, transform .18s;
}
.task-stat-arrow .icon { width: 11px; height: 11px; }
.task-stat:hover .task-stat-arrow,
.task-stat.is-active .task-stat-arrow { opacity: 1; transform: translate(1px, -1px); }
@media (max-width: 980px) {
  .task-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .task-stats { grid-template-columns: 1fr; }
}

/* Weekly hours detail */
.weekly-hours-list { display: flex; flex-direction: column; gap: 2px; }
.weekly-hours-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 2px;
  border-bottom: 1px solid #eef3f9;
}
.weekly-hours-row:last-child { border-bottom: 0; }
.weekly-hours-main { flex: 1; min-width: 0; }
.weekly-hours-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #31465e; font-size: 10px; font-weight: 600; }
.weekly-hours-meta { margin-top: 2px; color: #8a9bad; font-size: 8px; }
.weekly-hours-track { height: 4px; margin-top: 6px; overflow: hidden; border-radius: 99px; background: #eef3f9; }
.weekly-hours-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #fbbf24, #d97706); }
.weekly-hours-value { flex: 0 0 auto; color: #b45309; font-family: var(--font-num); font-size: 10px; font-weight: 600; }

/* Colored task summary module backgrounds */
.task-stat {
  --ts-bg:
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, .14), transparent 42%),
    linear-gradient(135deg, #26364a 0%, #3b4f68 100%);
  border-color: rgba(255, 255, 255, .13);
  background: var(--ts-bg);
  box-shadow: 0 6px 16px rgba(15, 23, 42, .14);
  color: #fff;
}
.task-stat[data-task-stat="todo"] {
  --ts-bg:
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, .12), transparent 42%),
    linear-gradient(135deg, #26364a 0%, #3b4f68 100%);
}
.task-stat[data-task-stat="in_progress"] {
  --ts-bg:
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, .18), transparent 44%),
    linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
}
.task-stat[data-task-stat="dueToday"] {
  --ts-bg:
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, .16), transparent 44%),
    linear-gradient(135deg, #881337 0%, #be123c 100%);
}
.task-stat[data-task-stat="weekHours"] {
  --ts-bg:
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, .16), transparent 44%),
    linear-gradient(135deg, #92400e 0%, #c2740b 100%);
}
.task-stat:last-child { border-right-color: rgba(255, 255, 255, .13); }
.task-stat-icon {
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .16);
  color: #fff;
  box-shadow: none;
}
.task-stat-value { color: #fff; text-shadow: 0 1px 6px rgba(2, 6, 23, .18); }
.task-stat-label { color: rgba(255, 255, 255, .72); }
.task-stat-arrow {
  background: rgba(255, 255, 255, .13);
  color: #fff;
  opacity: .7;
}
.task-stat:hover {
  border-color: rgba(255, 255, 255, .34);
  box-shadow: 0 10px 22px rgba(15, 23, 42, .22);
}
.task-stat.is-active {
  border-color: rgba(255, 255, 255, .9);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 9px 20px rgba(15, 23, 42, .22);
}
.task-stat[data-task-stat] { background: var(--ts-bg); }
/* Remove white card and icon borders from task summary modules */
.task-stat,
.task-stat:last-child,
.task-stat:hover,
.task-stat.is-active {
  border: 0;
}
.task-stat-icon {
  border: 0;
}
.task-stat.is-active {
  box-shadow: inset 0 0 0 2px rgba(15, 23, 42, .3), 0 10px 22px rgba(15, 23, 42, .26);
  filter: brightness(1.05) saturate(1.06);
}
.task-stat:focus-visible {
  outline: 2px solid rgba(15, 23, 42, .5);
  outline-offset: 2px;
}

/* Administrative approval ↔ task collaboration */
.task-card-qualification {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border: 1px solid #cfe0f5;
  border-radius: 5px;
  background: #f2f7ff;
  color: #2563eb;
  font-size: 7.5px;
  white-space: nowrap;
}
.task-card-qualification .icon { width: 9px; height: 9px; }
.task-qualification-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 220px;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: transparent;
  color: #2563eb;
  font-size: 9px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.task-qualification-link:hover { text-decoration: underline; }
.task-qualification-link .icon { width: 11px; height: 11px; flex: 0 0 auto; }
.qual-task-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.qual-linked-tasks { display: flex; flex-direction: column; gap: 5px; }
.qual-linked-task {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 9px;
  border: 1px solid #e5edf7;
  border-radius: 9px;
  background: #fbfdff;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s, background .16s, transform .16s;
}
.qual-linked-task:hover { border-color: #bcd5ef; background: #f4f9ff; transform: translateY(-1px); }
.qual-linked-task-status { flex: 0 0 auto; }
.qual-linked-task-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.qual-linked-task-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #31465e; font-size: 9.5px; font-weight: 600; }
.qual-linked-task-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8a9bad; font-size: 8px; }
.qual-linked-task-arrow { flex: 0 0 auto; color: #8fa2b8; }
.qual-linked-task-arrow .icon { width: 12px; height: 12px; }

/* Leave and vehicle approvals */
.approval-type-icon.leave { --ap-soft: #eaf3ff; --ap-color: #2563eb; }
.approval-type-icon.vehicle { --ap-soft: #f3effc; --ap-color: #6d5aa8; }
.approval-extra { padding: 10px; border: 1px solid #e5edf7; border-radius: 9px; background: #fbfdff; }
.approval-extra .form-grid { margin: 0; }
.approval-waiver { display: flex; flex-direction: column; gap: 8px; padding: 9px 10px; border: 1px dashed #dbe6f3; border-radius: 8px; background: #fff; }
.approval-waiver > label { display: flex; align-items: flex-start; gap: 7px; color: #52677f; font-size: 8.5px; line-height: 1.65; cursor: pointer; }
.approval-waiver input[type="checkbox"] { margin-top: 2px; accent-color: #2563eb; }
.approval-waiver .field { margin: 0; }
.approval-waiver-status { color: #2563eb; }
.approval-waiver-status .icon { width: 11px; height: 11px; }

/* Deep linked approval summary modules */
.approval-summary-item {
  --as-bg:
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, .14), transparent 44%),
    linear-gradient(135deg, #26364a 0%, #3b4f68 100%);
  position: relative;
  min-width: 0;
  border: 0;
  background: var(--as-bg);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .16);
  transition: transform .18s, box-shadow .18s, filter .18s;
}
.approval-summary-item[data-approval-stat="todo"] {
  --as-bg:
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, .18), transparent 44%),
    linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
}
.approval-summary-item[data-approval-stat="mine"] {
  --as-bg:
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, .12), transparent 42%),
    linear-gradient(135deg, #26364a 0%, #3b4f68 100%);
}
.approval-summary-item[data-approval-stat="approved"] {
  --as-bg:
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, .16), transparent 44%),
    linear-gradient(135deg, #3730a3 0%, #4f46e5 100%);
}
.approval-summary-item[data-approval-stat="hours"] {
  --as-bg:
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, .16), transparent 44%),
    linear-gradient(135deg, #92400e 0%, #c2740b 100%);
}
.approval-summary-item:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(15, 23, 42, .24); }
.approval-summary-item.is-active {
  box-shadow: inset 0 0 0 2px rgba(15, 23, 42, .32), 0 10px 22px rgba(15, 23, 42, .24);
  filter: brightness(1.05) saturate(1.06);
}
.approval-summary-item .approval-summary-icon { border: 0; background: rgba(255, 255, 255, .16); color: #fff; box-shadow: none; }
.approval-summary-item .approval-summary-value { color: #fff; text-shadow: 0 1px 6px rgba(2, 6, 23, .18); }
.approval-summary-item .approval-summary-label { color: rgba(255, 255, 255, .72); }
.approval-summary-arrow { width: 22px; height: 22px; display: grid; place-items: center; margin-left: auto; border-radius: 7px; background: rgba(255, 255, 255, .13); color: #fff; opacity: .7; transition: opacity .18s, transform .18s; }
.approval-summary-arrow .icon { width: 11px; height: 11px; }
.approval-summary-item:hover .approval-summary-arrow,
.approval-summary-item.is-active .approval-summary-arrow { opacity: 1; transform: translate(1px, -1px); }
.approval-summary-item:focus-visible { outline: 2px solid rgba(15, 23, 42, .5); outline-offset: 2px; }

/* Approval efficiency modal */
.approval-efficiency-list { display: flex; flex-direction: column; }
.approval-efficiency-row { display: flex; align-items: center; gap: 9px; padding: 9px 2px; border-bottom: 1px solid #eef3f9; }
.approval-efficiency-row:last-child { border-bottom: 0; }
.approval-efficiency-status { flex: 0 0 auto; padding: 2px 6px; border-radius: 4px; font-size: 7px; }
.approval-efficiency-status.approved { background: #e9f1ff; color: #2563eb; }
.approval-efficiency-status.rejected { background: #ffe8ee; color: #be123c; }
.approval-efficiency-main { flex: 1; min-width: 0; }
.approval-efficiency-main strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #31465e; font-size: 9.5px; }
.approval-efficiency-main small { display: block; margin-top: 2px; color: #8a9bad; font-size: 7.5px; }
.approval-efficiency-time { flex: 0 0 auto; color: #b45309; font-family: var(--font-num); font-size: 9px; font-weight: 600; }

/* Task card people and timer controls: stronger contrast */
.task-card-people { display: flex; align-items: center; gap: 5px; }
.task-card-collabs { display: inline-flex; align-items: center; gap: 0; }
.task-card-collabs .avatar {
  margin-left: -4px;
  border: 0;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .2);
  filter: saturate(1.16) brightness(.93);
}
.task-card-collabs .avatar:first-child { margin-left: 0; }
.task-card-assignee { display: inline-flex; align-items: center; }
.task-card-assignee .avatar {
  border: 0;
  box-shadow: 0 0 0 2px #0f172a, 0 2px 5px rgba(15, 23, 42, .18);
  filter: saturate(1.12) brightness(.94);
}
.task-card-collab-more {
  width: 21px;
  height: 21px;
  display: inline-grid;
  place-items: center;
  margin-left: -4px;
  border-radius: 6px;
  background: #334155;
  color: #fff;
  font-family: var(--font-num);
  font-size: 7px;
  font-weight: 600;
}
.task-card-timer {
  background: #1d4ed8;
  color: #fff;
  box-shadow: 0 3px 8px rgba(29, 78, 216, .25);
  transition: background .16s, box-shadow .16s, transform .16s;
}
.task-card-timer:hover { background: #1e40af; color: #fff; box-shadow: 0 4px 10px rgba(29, 78, 216, .34); }
.task-card-timer.running { background: #be123c; color: #fff; box-shadow: 0 3px 8px rgba(190, 18, 60, .28); }
.task-card-timer.running:hover { background: #9f1239; }
.task-card-timer:disabled { background: #475569; color: #fff; opacity: .9; box-shadow: 0 2px 6px rgba(15, 23, 42, .2); }
.task-card-timer .icon { width: 11px; height: 11px; }

/* Evenly spaced task people, no dark stacked overlays */
.task-card-people { gap: 6px; justify-content: flex-end; }
.task-card-collabs { gap: 5px; }
.task-card-collabs .avatar {
  margin-left: 0;
  filter: none;
  box-shadow: none;
}
.task-card-collabs .avatar:first-child { margin-left: 0; }
.task-card-assignee .avatar {
  filter: none;
  box-shadow: none;
}
.task-card-collab-more {
  margin-left: 0;
  background: #eef3f9;
  color: #52677f;
  box-shadow: none;
}


/* iOS-style task typography: black text */
.task-card,
.task-card-title,
.task-card-client,
.task-card-meta,
.task-card-meta .meta-item,
.task-card .task-progress-head,
.task-card .task-progress-head strong,
.task-list-title,
.task-list-meta {
  font-family: var(--font);
  color: #000;
}
.task-card-title,
.task-list-title { font-weight: 600; }
.task-card-meta .icon,
.task-card-client .icon { color: #000; }

/* Deep three-dimensional kanban surface */
.kanban {
  gap: 10px;
  padding: 10px;
  border-radius: 16px;
  background: linear-gradient(180deg, #e7eff9 0%, #dce7f4 100%);
  box-shadow:
    inset 0 2px 6px rgba(15, 23, 42, .08),
    inset 0 -1px 0 rgba(255, 255, 255, .7);
}
.kanban-col {
  background: linear-gradient(180deg, #d8e5f3 0%, #e7f0fa 100%);
  border: 1px solid #c4d5e8;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 -2px 5px rgba(15, 23, 42, .05),
    0 5px 12px rgba(15, 23, 42, .08);
  transition: background .18s, border-color .18s, box-shadow .18s;
}
.kanban-col.drag-over {
  background: linear-gradient(180deg, #d5e7ff 0%, #e8f2ff 100%);
  border-color: #7aa7e8;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 0 0 2px rgba(37, 99, 235, .12),
    0 7px 16px rgba(37, 99, 235, .14);
}
.kanban-head {
  margin: -2px -2px 8px;
  padding: 7px 8px 8px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .68), rgba(255, 255, 255, .18));
  border-bottom: 1px solid rgba(37, 99, 235, .12);
}
.kanban-title { color: #000; }
.kanban-count {
  background: #fff;
  color: #1d4ed8;
  border: 1px solid rgba(37, 99, 235, .16);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}
.kanban-empty {
  border-color: rgba(37, 99, 235, .2);
  background: rgba(255, 255, 255, .38);
  color: #51677f;
}

/* Deep task list surface with a tactile selection state */
.task-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 9px;
  border-radius: 14px;
  background: linear-gradient(180deg, #e4edf8 0%, #d6e3f1 100%);
  box-shadow: inset 0 2px 6px rgba(15, 23, 42, .08), inset 0 -1px 0 rgba(255, 255, 255, .7);
}
.task-list-row {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 11px 14px;
  border: 1px solid #cfdeee;
  border-radius: 10px;
  background: linear-gradient(135deg, #f7fafe 0%, #e8f1fa 100%);
  box-shadow: 0 3px 8px rgba(15, 23, 42, .06), inset 0 1px 0 rgba(255, 255, 255, .9);
  transition: background .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.task-list-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #1d4ed8;
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .2s;
}
.task-list-row:hover {
  border-color: #a9c5e5;
  background: linear-gradient(135deg, #eef5fd 0%, #dfeaf7 100%);
  box-shadow: 0 6px 14px rgba(15, 23, 42, .1);
  transform: translateY(-1px);
}
.task-list-row:hover::before { transform: scaleY(1); }
.task-list-row.is-selected {
  border-color: #1d4ed8;
  background: linear-gradient(135deg, #1d4ed8 0%, #0f2f6b 100%);
  box-shadow: 0 8px 18px rgba(15, 47, 107, .28), inset 0 1px 0 rgba(255, 255, 255, .18);
  animation: taskListSelect .3s cubic-bezier(.22, .8, .3, 1);
}
.task-list-row.is-selected::before { transform: scaleY(1); background: #bfdbfe; }
.task-list-row.is-selected .task-list-title,
.task-list-row.is-selected .task-list-meta,
.task-list-row.is-selected .task-list-meta span,
.task-list-row.is-selected .task-list-meta .icon,
.task-list-row.is-selected .task-list-actions .btn {
  color: #fff;
}
.task-list-row.is-selected .task-card-timer { box-shadow: 0 0 0 1px rgba(255, 255, 255, .4), 0 3px 8px rgba(2, 6, 23, .22); }
@keyframes taskListSelect {
  0% { transform: scale(1); }
  45% { transform: scale(.994) translateX(3px); }
  100% { transform: scale(1) translateX(0); }
}

.task-list-row.is-selected .status-pill,
.task-list-row.is-selected .tag {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .3);
  color: #fff;
}
.task-list-row.is-selected .task-list-actions .btn {
  background: rgba(255, 255, 255, .13);
  border-color: rgba(255, 255, 255, .3);
  color: #fff;
}
.task-list-row.is-selected .task-list-actions .btn:hover {
  background: rgba(255, 255, 255, .22);
  border-color: rgba(255, 255, 255, .5);
  color: #fff;
}

/* Integrated center bulletin board */
.bulletin-board {
  display: grid;
  grid-template-columns: minmax(205px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding: 11px 15px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 92% 0%, rgba(59, 130, 246, .28), transparent 38%),
    linear-gradient(120deg, #0b1f38 0%, #14365b 62%, #1e4b7a 100%);
  color: #fff;
  box-shadow: 0 9px 22px rgba(8, 28, 55, .18);
}
.bulletin-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.bulletin-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(96, 165, 250, .2);
  color: #bfdbfe;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}
.bulletin-icon .icon { width: 16px; height: 16px; }
.bulletin-brand-copy { min-width: 0; }
.bulletin-kicker { display: block; color: #93b4d8; font-size: 7px; letter-spacing: .12em; text-transform: uppercase; }
.bulletin-brand-copy strong { display: block; margin-top: 2px; color: #fff; font-size: 12px; font-weight: 600; }
.bulletin-unread {
  align-self: flex-start;
  margin-left: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  background: #f59e0b;
  color: #1e293b;
  font-size: 7px;
  font-weight: 600;
  white-space: nowrap;
}
.bulletin-unread.is-read { background: rgba(148, 197, 255, .18); color: #bfdbfe; }
.bulletin-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.bulletin-item {
  min-width: 0;
  padding: 7px 10px;
  border: 0;
  border-radius: 9px;
  background: rgba(255, 255, 255, .075);
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: background .18s, transform .18s, box-shadow .18s;
}
.bulletin-item:hover { background: rgba(255, 255, 255, .14); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(2, 10, 25, .2); }
.bulletin-item-meta { display: flex; align-items: center; gap: 5px; color: #93b4d8; font-size: 7px; }
.bulletin-item-meta span:first-child { color: #bfdbfe; }
.bulletin-dot { width: 5px; height: 5px; border-radius: 50%; background: #fbbf24; box-shadow: 0 0 0 2px rgba(251, 191, 36, .15); }
.bulletin-item-title { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-size: 9.5px; font-weight: 600; }
.bulletin-item-summary { display: block; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #9db8d5; font-size: 7.5px; }
.bulletin-empty { grid-column: 1/-1; padding: 8px 2px; color: #93b4d8; font-size: 9px; }
.bulletin-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 9px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .1);
  color: #dbeafe;
  font-size: 8px;
  font-weight: 500;
  white-space: nowrap;
  transition: background .18s, color .18s;
}
.bulletin-more:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.bulletin-more .icon { width: 10px; height: 10px; }
@media (max-width: 1180px) {
  .bulletin-board { grid-template-columns: minmax(180px, auto) minmax(0, 1fr); gap: 10px 14px; }
  .bulletin-more { grid-column: 2; justify-self: start; }
}
@media (max-width: 760px) {
  .bulletin-board { grid-template-columns: 1fr; gap: 10px; }
  .bulletin-items { grid-template-columns: 1fr; }
  .bulletin-more { grid-column: 1; }
}

/* Task detail drawer: deep surface, highlighted header, black iOS text */
.task-detail-drawer { background: #e3edf8; }
.task-detail-drawer,
.task-detail-drawer * { font-family: var(--font); }
.task-detail-drawer .modal-header {
  background: linear-gradient(135deg, #d5e5f7 0%, #edf5fd 100%);
  border-bottom: 2px solid #1d4ed8;
  box-shadow: 0 5px 14px rgba(15, 23, 42, .08);
}
.task-detail-drawer .modal-header h3,
.task-detail-drawer .modal-header p { color: #000; }
.task-detail-drawer .modal-header p { opacity: 1; }
.task-detail-drawer .modal-close { color: #000; background: rgba(255, 255, 255, .62); }
.task-detail-drawer .modal-body {
  background: linear-gradient(180deg, #e6eff9 0%, #dbe8f5 100%) !important;
  color: #000;
}
.task-detail-drawer .task-detail-meta {
  padding: 13px 14px;
  gap: 11px 16px;
  border: 1px solid #bcd2e8;
  border-left: 4px solid #1d4ed8;
  border-radius: 12px;
  background: linear-gradient(135deg, #d6e5f5 0%, #eef5fc 100%);
  box-shadow: 0 5px 12px rgba(15, 23, 42, .09), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.task-detail-drawer .task-meta-label { color: #000; font-weight: 500; }
.task-detail-drawer .task-meta-value { color: #000; }
.task-detail-drawer .task-meta-value .icon { color: #1d4ed8; }
.task-detail-drawer .task-progress {
  padding: 10px 12px;
  border: 1px solid #c4d7ea;
  border-radius: 10px;
  background: linear-gradient(180deg, #f1f7fe 0%, #e6f0fa 100%);
  box-shadow: 0 3px 8px rgba(15, 23, 42, .06), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.task-detail-drawer .task-progress-head,
.task-detail-drawer .task-progress-head strong { color: #000; }
.task-detail-drawer .task-progress-track { background: #cfdff1; }
.task-detail-drawer .drawer-section {
  background: #f7fafe;
  border-color: #c9dced;
  box-shadow: 0 4px 10px rgba(15, 23, 42, .06), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.task-detail-drawer .drawer-subhead h4,
.task-detail-drawer .drawer-subhead h4 .icon { color: #000; }
.task-detail-drawer .task-desc,
.task-detail-drawer .time-log-date,
.task-detail-drawer .time-log-duration,
.task-detail-drawer .comment-head strong,
.task-detail-drawer .comment-head span,
.task-detail-drawer .comment-text,
.task-detail-drawer .task-team-copy strong,
.task-detail-drawer .task-team-copy small,
.task-detail-drawer .task-locked-note,
.task-detail-drawer .text-muted,
.task-detail-drawer .text-xs.text-muted { color: #000; }
.task-detail-drawer .task-team-member { background: #eaf2fb; border-color: #c9dced; }
.task-detail-drawer .comment-text { background: #eaf2fb; border-color: #d4e2f0; }
.task-detail-drawer .modal-footer { background: #e3edf8; border-top: 1px solid #c9dced; }

/* Member visible-module controls */
.member-visible-field { padding: 10px; border: 1px solid #dbe7f4; border-radius: 10px; background: #f8fbff; }
.member-visible-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.member-visible-head label { margin: 0; font-size: 9px; font-weight: 600; color: #243b55; }
.member-visible-head span { color: #7b8da2; font-size: 7.5px; }
.member-visible-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.member-visible-option {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 6px 7px;
  border: 1px solid #dce7f3;
  border-radius: 7px;
  background: #fff;
  color: #31465e;
  font-size: 8px;
  cursor: pointer;
  transition: border-color .16s, background .16s, color .16s;
}
.member-visible-option:hover { border-color: #a9c4e2; background: #eef6ff; }
.member-visible-option:has(input:checked) { border-color: #8db5e3; background: #e9f3ff; color: #174a8b; }
.member-visible-option input { accent-color: #1d4ed8; margin: 0; }
.member-visible-option input:disabled { opacity: .55; }
.member-visible-field .field-hint { margin-top: 7px; }
@media (max-width: 900px) {
  .member-visible-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Integrated center employee performance chart */
.employee-performance { margin-bottom: 16px; overflow: hidden; }
.employee-performance .card-head { padding-bottom: 4px; }
.performance-body { padding: 4px 16px 10px; }
.performance-chart { display: flex; gap: 8px; }
.performance-y-axis {
  width: 24px;
  height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 0;
  color: #7c8ea4;
  font-family: var(--font-num);
  font-size: 7px;
  text-align: right;
}
.performance-stage { position: relative; flex: 1; min-width: 0; height: 214px; }
.performance-grid { position: absolute; inset: 0 0 34px 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.performance-grid i { display: block; height: 1px; background: rgba(148, 171, 196, .23); }
.performance-grid i:last-child { background: rgba(37, 99, 235, .24); }
.performance-bars { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; height: 100%; align-items: end; }
.performance-column { min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.performance-plot { position: relative; width: 100%; height: 180px; display: flex; align-items: flex-end; justify-content: center; }
.performance-bar {
  width: 34px;
  height: var(--bar-h);
  border-radius: 7px 7px 3px 3px;
  background: linear-gradient(180deg, #60a5fa 0%, #2563eb 58%, #1e40af 100%);
  box-shadow: 0 5px 12px rgba(37, 99, 235, .22), inset 0 1px 0 rgba(255, 255, 255, .32);
  position: relative;
  transition: filter .18s, transform .18s;
}
.performance-column:hover .performance-bar { filter: brightness(1.08); transform: translateY(-2px); }
.performance-bar span {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-family: var(--font-num);
  font-size: 9.5px;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(15, 23, 42, .3);
}
.performance-character {
  position: absolute;
  left: 50%;
  bottom: calc(var(--bar-h) + 3px);
  width: 54px;
  margin-left: -27px;
  z-index: 2;
  animation: employeeCharacterJump 1.65s ease-in-out infinite;
  animation-delay: var(--jump-delay, 0s);
  filter: drop-shadow(0 4px 4px rgba(15, 23, 42, .12));
  pointer-events: none;
}
.performance-character .character-svg { display: block; width: 54px; height: auto; }
.performance-person { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 5px; max-width: 100%; }
.performance-person strong { color: #000; font-size: 9px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.performance-rank { flex: 0 0 auto; padding: 1px 4px; border-radius: 3px; background: #e8f1fb; color: #1d4ed8; font-family: var(--font-num); font-size: 6.5px; font-weight: 600; }
.performance-rank.is-top { background: #fef3c7; color: #92400e; }
.performance-metrics { margin-top: 2px; color: #7b8da2; font-size: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.performance-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #e8eff8; color: #7b8da2; font-size: 7.5px; }
.performance-foot .icon { width: 10px; height: 10px; vertical-align: -1px; }
@keyframes employeeCharacterJump {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(-7px); }
  58% { transform: translateY(-7px); }
}
@media (max-width: 1000px) {
  .performance-bars { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
  .performance-stage { height: auto; }
  .performance-chart { align-items: flex-start; }
  .performance-y-axis { display: none; }
  .performance-grid { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .performance-character { animation: none; }
}

/* Settings: employee performance character studio */
.settings-character-card { grid-column: 1 / -1; }
.character-studio { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; padding: 2px 0 14px; }
.character-preview-panel { min-width: 0; }
.character-preview-stage {
  position: relative;
  height: 224px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  border: 1px solid #c7d9ec;
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 24%, rgba(96, 165, 250, .3), transparent 38%),
    linear-gradient(155deg, #dbe9f8 0%, #eef5fc 58%, #d8e6f5 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 4px 12px rgba(15, 23, 42, .07);
}
.character-preview-stage::after {
  content: "";
  position: absolute;
  left: 25%;
  right: 25%;
  bottom: 16px;
  height: 6px;
  border-radius: 50%;
  background: rgba(15, 23, 42, .12);
  filter: blur(3px);
}
.character-preview-jump {
  position: relative;
  z-index: 1;
  margin-bottom: 10px;
  animation: characterStudioJump 1.6s ease-in-out infinite;
  filter: drop-shadow(0 7px 6px rgba(15, 23, 42, .13));
}
.character-preview-jump .character-svg { display: block; width: 150px; height: auto; }
.character-preview-caption { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 7px; color: #6f8298; font-size: 7.5px; }
.character-preview-caption .icon { width: 10px; height: 10px; }
.character-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 10px 14px; }
.character-field { min-width: 0; }
.character-field > label { display: block; margin-bottom: 5px; color: #243b55; font-size: 8.5px; font-weight: 600; }
.character-options { display: flex; flex-wrap: wrap; gap: 5px; }
.character-option {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 7px;
  border: 1px solid #d9e5f2;
  border-radius: 6px;
  background: #fff;
  color: #53677d;
  font-size: 7.5px;
  cursor: pointer;
  transition: background .16s, border-color .16s, color .16s, transform .16s;
}
.character-option:hover { border-color: #9fc0e3; background: #f0f7ff; transform: translateY(-1px); }
.character-option.active { border-color: #1d4ed8; background: #1d4ed8; color: #fff; box-shadow: 0 2px 6px rgba(29, 78, 216, .2); }
.character-swatch { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: var(--swatch); box-shadow: 0 0 0 1px rgba(15, 23, 42, .16); }
.character-option.active .character-swatch { box-shadow: 0 0 0 1px rgba(255, 255, 255, .7); }
@keyframes characterStudioJump {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(-9px); }
  58% { transform: translateY(-9px); }
}
@media (max-width: 900px) {
  .character-studio { grid-template-columns: 1fr; }
  .character-preview-stage { height: 200px; }
  .character-controls { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .character-preview-jump { animation: none; }
}

/* Announcement center: iOS typography with black text */
.announcement-center,
.announcement-detail-modal,
.announcement-form-modal { font-family: var(--font); color: #000; }
.announcement-center .eyebrow,
.announcement-center .page-title,
.announcement-center .page-subtitle,
.announcement-center .announcement-feature-label,
.announcement-center .announcement-feature h2,
.announcement-center .announcement-feature p,
.announcement-center .announcement-feature-meta,
.announcement-center .announcement-card-title,
.announcement-center .announcement-card-summary,
.announcement-center .announcement-card-meta,
.announcement-center .announcement-card-meta span,
.announcement-center .announcement-date,
.announcement-center .announcement-side-title,
.announcement-center .reading-stat strong,
.announcement-center .reading-stat span,
.announcement-center .announcement-read-caption,
.announcement-center .release-title,
.announcement-center .release-date,
.announcement-center .task-desc,
.announcement-center .text-muted,
.announcement-center .text-xs.text-muted,
.announcement-detail-modal .modal-header h2,
.announcement-detail-modal .announcement-detail-meta,
.announcement-detail-modal .announcement-detail-body,
.announcement-form-modal .modal-header h3,
.announcement-form-modal .modal-header p,
.announcement-form-modal .field label,
.announcement-form-modal .form-note { color: #000; }
.announcement-center .tag,
.announcement-center .badge,
.announcement-detail-modal .tag,
.announcement-detail-modal .badge { color: #000; }

.announcement-center .announcement-feature {
  background:
    radial-gradient(circle at 92% 0%, rgba(37, 99, 235, .16), transparent 38%),
    linear-gradient(145deg, #dbeafe 0%, #eef6ff 64%, #f8fbff 100%);
  border: 1px solid #bfd6ef;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .07), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.announcement-center .announcement-feature::after {
  background: radial-gradient(circle, rgba(37, 99, 235, .13), transparent 68%);
}
.announcement-center .announcement-feature-label {
  background: rgba(255, 255, 255, .78);
  color: #000;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}
.announcement-center .announcement-feature h2 { color: #000; }
.announcement-center .announcement-feature p { color: #000; }
.announcement-center .announcement-feature-meta { color: #000; }
.announcement-center .announcement-read-caption {
  display: flex;
  justify-content: space-between;
  font-size: 8.5px;
  color: #000;
}
.announcement-center .announcement-card:hover { border-color: #bfd4ea; }
.announcement-form-modal .field,
.announcement-form-modal .form-note { font-family: var(--font); }

/* Announcement header surface keeps black typography legible */
.announcement-center .page-head {
  padding: 17px 19px;
  margin-bottom: 16px;
  border: 1px solid #d4e2f2;
  border-radius: 16px;
  background: linear-gradient(135deg, #f4f9ff 0%, #e8f1fb 100%);
  box-shadow: 0 6px 16px rgba(15, 23, 42, .07), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.announcement-center .page-head .eyebrow,
.announcement-center .page-head .page-title,
.announcement-center .page-head .page-subtitle {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: none !important;
}
.announcement-center .tabs {
  padding: 4px;
  border: 1px solid #d7e4f1;
  border-radius: 9px;
  background: #eef5fc;
}
.announcement-center .tab { color: #000; }
.announcement-center .tab.active { color: #fff; }

.announcement-center .tab {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background: transparent;
}
.announcement-center .tab .tab-count {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}
.announcement-center .tab.active {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #1d4ed8;
  box-shadow: 0 2px 6px rgba(29, 78, 216, .22);
}
.announcement-center .tab.active .tab-count {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.announcement-center .toolbar {
  margin-bottom: 10px;
  padding: 6px 8px !important;
  border: 1px solid #d7e4f1;
  border-radius: 9px;
  background: #eef5fc;
}
.announcement-center .toolbar #announcement-count { color: #000 !important; }

.announcement-center .release-version { color: #000; }
.announcement-center .unread-dot { background: #1d4ed8; }

/* Rounded announcement search/filter toolbar */
.announcement-center .toolbar {
  border-radius: 14px !important;
  overflow: hidden;
}
.announcement-center .toolbar .search-field {
  border-radius: 9px;
  overflow: hidden;
}

/* Announcement search focus: deepen the field background */
.announcement-center .toolbar .search-field input {
  background: #fff;
  transition: background .18s, border-color .18s, box-shadow .18s;
}
.announcement-center .toolbar .search-field input:focus {
  background: #d7e7fb;
  border-color: #79a7df;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .14), inset 0 1px 3px rgba(15, 23, 42, .06);
  outline: none;
}
.announcement-center .toolbar .search-field:focus-within .icon { color: #1d4ed8; }

/* Balance dashboard columns so paired cards finish on the same baseline */
.dash-grid { align-items: stretch; }
.dash-col { height: 100%; }
.dash-col > .card:last-child { flex: 1 1 auto; }

/* Internal client detail: portal access and two-way messages */
.client-portal-card { margin-top: 16px; background: #f5f9ff; border-color: #d4e4f5; }
.client-portal-code { font-family: var(--font-num); color: #1d4ed8; font-size: 8px; letter-spacing: .03em; }
.client-portal-access { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; border: 1px solid #d9e7f6; border-radius: 9px; background: #fff; }
.client-portal-access > span { color: #566b81; font-size: 8.5px; line-height: 1.6; }
.client-portal-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.client-portal-thread { display: flex; flex-direction: column; gap: 7px; max-height: 230px; overflow-y: auto; margin-top: 10px; padding: 9px; border: 1px solid #e0eaf5; border-radius: 9px; background: #fff; }
.client-portal-message { max-width: 82%; padding: 7px 9px; border-radius: 9px; font-size: 9px; line-height: 1.65; }
.client-portal-message.is-client { align-self: flex-end; background: #1d4ed8; color: #fff; }
.client-portal-message.is-staff { align-self: flex-start; background: #eef4fb; color: #1e344d; }
.client-portal-message-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 3px; font-size: 7px; opacity: .8; }
.client-portal-message-head strong { font-weight: 600; }
.client-portal-form { display: flex; gap: 7px; align-items: flex-end; margin-top: 8px; }
.client-portal-form textarea { flex: 1; min-height: 34px; height: 34px; padding: 7px 9px; border: 1px solid #d9e6f3; border-radius: 8px; background: #fff; resize: none; font-size: 9px; }
.client-portal-form textarea:focus { outline: none; border-color: #8db5e3; box-shadow: 0 0 0 3px rgba(37, 99, 235, .1); }

.performance-y-axis { width: 44px; font-size: 6.5px; }

.client-portal-credentials { display: flex; flex-wrap: wrap; gap: 10px 18px; min-width: 0; }
.client-portal-credentials > div { min-width: 0; }
.client-portal-credentials span { display: block; color: #8396aa; font-size: 7px; }
.client-portal-credentials strong { display: block; margin-top: 3px; color: #172f49; font-family: var(--font-num); font-size: 8.5px; word-break: break-all; }
.client-portal-credential-result { display: flex; flex-direction: column; gap: 9px; padding: 12px; border: 1px solid #d8e6f4; border-radius: 10px; background: #f6faff; }
.client-portal-credential-result span { display: block; color: #8296aa; font-size: 7.5px; }
.client-portal-credential-result strong { display: block; margin-top: 3px; color: #102a45; font-family: var(--font-num); font-size: 13px; letter-spacing: .02em; }

/* Public website settings */
.site-settings-shell { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px; align-items: start; }
.site-settings-tabs { position: sticky; top: 16px; padding: 8px; display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.site-settings-tabs button { height: 36px; padding: 0 9px; display: flex; align-items: center; gap: 7px; border: 0; border-radius: 7px; background: transparent; color: #60758b; font-size: 9px; text-align: left; }
.site-settings-tabs button .icon { width: 14px; height: 14px; }
.site-settings-tabs button:hover { background: #f3f8fe; color: #1d4ed8; }
.site-settings-tabs button.active { background: #eaf3ff; color: #1d4ed8; font-weight: 600; }
.site-settings-status { margin-top: 8px; padding: 8px; border-top: 1px solid #edf2f8; color: #92a4b6; font-size: 7px; line-height: 1.6; }
.site-settings-status.is-saved { color: #1d4ed8; }
.site-settings-panel { min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.site-settings-section { padding: 18px; }
.site-settings-section + .site-settings-section { border-top: 1px solid #edf2f8; }
.site-settings-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.site-settings-section-head h3 { margin: 0; color: #1c334b; font-size: 12px; }
.site-settings-section-head p { margin: 4px 0 0; color: #8498ac; font-size: 8px; line-height: 1.6; }
.site-settings-tip { margin-top: 12px; padding: 8px 10px; border: 1px solid #dce8f4; border-radius: 7px; background: #f7fbff; color: #71879b; font-size: 8px; line-height: 1.6; }
.site-settings-tip .icon { width: 11px; height: 11px; vertical-align: -1px; }
.site-repeat-list { display: flex; flex-direction: column; gap: 9px; }
.site-repeat-card { padding: 12px; border: 1px solid #e0e9f3; border-radius: 9px; background: #fafcff; }
.site-repeat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.site-repeat-head strong { color: #2a425a; font-size: 9px; }
.site-repeat-actions { display: flex; align-items: center; gap: 8px; }
.site-visible { display: inline-flex; align-items: center; gap: 4px; color: #6f8499; font-size: 8px; cursor: pointer; }
.site-visible input { accent-color: #1d4ed8; }
.site-settings-panel .form-grid { gap: 10px 12px; }
.site-settings-panel .field label { margin-bottom: 4px; color: #61768b; font-size: 8px; }
.site-settings-panel .field input, .site-settings-panel .field select, .site-settings-panel .field textarea { font-size: 9px; }
.site-settings-panel .field textarea { min-height: 70px; }
@media (max-width: 860px) {
  .site-settings-shell { grid-template-columns: 1fr; }
  .site-settings-tabs { position: static; flex-direction: row; overflow-x: auto; }
  .site-settings-tabs button { flex: 0 0 auto; }
  .site-settings-status { display: none; }
}

/* Client import & batch actions */
.client-select-cell { width: 34px; padding-left: 12px !important; padding-right: 4px !important; text-align: center; }
.client-select-cell input, .client-select { width: 13px; height: 13px; accent-color: #1d4ed8; cursor: pointer; }
#import-clients { gap: 5px; }
.batch-delete-result { display: flex; gap: 10px; align-items: flex-start; color: #5d7288; font-size: 9px; line-height: 1.75; }
.batch-delete-result > .icon { flex: 0 0 auto; width: 18px; height: 18px; color: #b45309; margin-top: 1px; }
.batch-delete-result ul { margin: 7px 0 0; padding-left: 16px; color: #6d8196; }
.import-panel { display: flex; flex-direction: column; gap: 12px; }
.import-guide { display: flex; gap: 11px; padding: 13px; border: 1px solid #dce8f4; border-radius: 9px; background: #f7fbff; }
.import-guide-icon { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px; background: #e8f2ff; color: #1d4ed8; }
.import-guide-icon .icon { width: 17px; height: 17px; }
.import-guide strong { color: #203850; font-size: 10px; }
.import-guide p { margin: 4px 0 0; color: #7d90a4; font-size: 8px; line-height: 1.65; }
.import-actions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
.import-file-btn { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.import-file-btn input { display: none; }
.import-owner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.import-owner label { color: #5e7489; font-size: 8px; }
.import-owner span { color: #94a6b7; font-size: 7px; }
.import-empty { min-height: 92px; padding: 22px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 1px dashed #cfdeea; border-radius: 8px; background: #fbfdff; color: #8ca0b3; font-size: 8px; text-align: center; }
.import-empty .icon { width: 15px; height: 15px; }
.import-empty.import-error { border-color: #f1cfc9; background: #fff8f7; color: #b04438; }
.import-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 9px; border: 1px solid #e1ebf4; border-radius: 6px; background: #fff; color: #5e7489; font-size: 8px; }
.import-summary > span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.import-summary .icon { width: 12px; height: 12px; flex: 0 0 auto; color: #1d4ed8; }
.import-summary strong { color: #1d4ed8; font-size: 8px; white-space: nowrap; }
.import-preview-wrap { max-height: 240px; overflow: auto; border: 1px solid #e1ebf4; border-radius: 7px; background: #fff; }
.import-preview { min-width: 500px; }
.import-preview th, .import-preview td { padding: 7px 9px; font-size: 8px; }
.import-preview th { font-size: 7px; }
.import-more { padding: 6px 9px; border-top: 1px solid #eef3f8; color: #8ca0b3; font-size: 7px; text-align: center; }
.import-result { margin-top: 8px; padding: 9px 10px; border-radius: 7px; font-size: 8px; line-height: 1.7; }
.import-result-warn { border: 1px solid #f1dfb8; background: #fffbf1; color: #8a5c13; }
.import-result-error { border: 1px solid #f1cfc9; background: #fff8f7; color: #b04438; }
.import-result .icon { width: 14px; height: 14px; vertical-align: -2px; }
.import-result ul { margin: 5px 0 8px; padding-left: 15px; }
@media (max-width: 760px) {
  .client-select-cell { width: 26px; padding-left: 6px !important; }
  .import-summary { align-items: flex-start; flex-direction: column; }
}

/* Permission sub-modules */
.permission-submodules { margin-top: 9px; padding: 8px 9px 9px; border: 1px solid #e4edf6; border-radius: 8px; background: #f8fbfe; }
.permission-submodules-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.permission-submodules-head span { color: #5e7892; font-size: 8px; font-weight: 600; letter-spacing: .03em; }
.permission-submodules-head small { color: #93a6b8; font-size: 6.5px; }
.permission-module-toggles { gap: 5px; }
.permission-module-toggle span { height: 23px; padding: 0 7px; border-radius: 5px; background: #fff; font-size: 7.5px; }
.permission-module-toggle input:checked + span { background: #edf5ff; border-color: #b8d1ec; color: #1d4ed8; }

.module-perm-hidden { display: none !important; }

/* Colourful, animated permission groups */
.permission-group[data-perm-group="dashboard"] { --perm-color: #2563eb; --perm-deep: #1d4ed8; --perm-soft: #eef5ff; --perm-border: #c7ddf6; --perm-ring: rgba(37, 99, 235, .22); --perm-tint: #f7faff; }
.permission-group[data-perm-group="clients"] { --perm-color: #0284c7; --perm-deep: #0369a1; --perm-soft: #eef8ff; --perm-border: #c4e5f7; --perm-ring: rgba(2, 132, 199, .2); --perm-tint: #f6fbfe; }
.permission-group[data-perm-group="crm"] { --perm-color: #7c3aed; --perm-deep: #6d28d9; --perm-soft: #f5f1ff; --perm-border: #ddd1f8; --perm-ring: rgba(124, 58, 237, .18); --perm-tint: #faf8ff; }
.permission-group[data-perm-group="contracts"] { --perm-color: #b45309; --perm-deep: #92400e; --perm-soft: #fff8ec; --perm-border: #f0d9b5; --perm-ring: rgba(180, 83, 9, .17); --perm-tint: #fffcf6; }
.permission-group[data-perm-group="tax"] { --perm-color: #4f46e5; --perm-deep: #4338ca; --perm-soft: #f1f1ff; --perm-border: #d6d4fb; --perm-ring: rgba(79, 70, 229, .18); --perm-tint: #f9f9ff; }
.permission-group[data-perm-group="qualification"] { --perm-color: #c2410c; --perm-deep: #9a3412; --perm-soft: #fff5ed; --perm-border: #f3d3c2; --perm-ring: rgba(194, 65, 12, .17); --perm-tint: #fffaf7; }
.permission-group[data-perm-group="finance"] { --perm-color: #0369a1; --perm-deep: #075985; --perm-soft: #eef8ff; --perm-border: #bfe1f0; --perm-ring: rgba(3, 105, 161, .2); --perm-tint: #f6fbfe; }
.permission-group[data-perm-group="certificates"] { --perm-color: #be123c; --perm-deep: #9f1239; --perm-soft: #fff1f4; --perm-border: #f4c9d4; --perm-ring: rgba(190, 18, 60, .17); --perm-tint: #fff8fa; }
.permission-group[data-perm-group="tasks"] { --perm-color: #475569; --perm-deep: #334155; --perm-soft: #f2f5f9; --perm-border: #d5dfea; --perm-ring: rgba(71, 85, 105, .17); --perm-tint: #f9fafc; }
.permission-group[data-perm-group="approvals"] { --perm-color: #6d28d9; --perm-deep: #5b21b6; --perm-soft: #f6f2ff; --perm-border: #ded1fa; --perm-ring: rgba(109, 40, 217, .18); --perm-tint: #faf8ff; }
.permission-group[data-perm-group="announcements"] { --perm-color: #c2410c; --perm-deep: #9a3412; --perm-soft: #fff6ed; --perm-border: #f3d3c2; --perm-ring: rgba(194, 65, 12, .17); --perm-tint: #fffaf7; }
.permission-group[data-perm-group="chat"] { --perm-color: #1d4ed8; --perm-deep: #1e40af; --perm-soft: #eef5ff; --perm-border: #c7ddf6; --perm-ring: rgba(29, 78, 216, .2); --perm-tint: #f7faff; }
.permission-group[data-perm-group="team"] { --perm-color: #334155; --perm-deep: #1e293b; --perm-soft: #f1f5f9; --perm-border: #cbd5e1; --perm-ring: rgba(51, 65, 85, .17); --perm-tint: #f8fafc; }
.permission-group[data-perm-group="hr"] { --perm-color: #a21caf; --perm-deep: #86198f; --perm-soft: #fdf2ff; --perm-border: #efc9f2; --perm-ring: rgba(162, 28, 175, .16); --perm-tint: #fef8ff; }
.permission-group[data-perm-group="site"] { --perm-color: #0e7490; --perm-deep: #155e75; --perm-soft: #eefbff; --perm-border: #bfe5ee; --perm-ring: rgba(14, 116, 144, .18); --perm-tint: #f6fcfe; }
.permission-group[data-perm-group="departments"] { --perm-color: #0369a1; --perm-deep: #075985; --perm-soft: #eef8ff; --perm-border: #bfe1f0; --perm-ring: rgba(3, 105, 161, .2); --perm-tint: #f6fbfe; }
.permission-group[data-perm-group="audit"] { --perm-color: #64748b; --perm-deep: #475569; --perm-soft: #f2f5f9; --perm-border: #d5dfea; --perm-ring: rgba(100, 116, 139, .16); --perm-tint: #f9fafc; }
.permission-group[data-perm-group="account"] { --perm-color: #64748b; --perm-deep: #475569; --perm-soft: #f2f5f9; --perm-border: #d5dfea; --perm-ring: rgba(100, 116, 139, .16); --perm-tint: #f9fafc; }

.permission-group {
  margin: 8px 0; padding: 12px 12px 13px;
  border: 1px solid #edf2f8; border-left: 3px solid var(--perm-color, #64748b); border-radius: 9px;
  background: #fff; transition: background .24s, box-shadow .24s, border-color .24s;
}
.permission-group:hover { box-shadow: 0 3px 12px rgba(15, 23, 42, .045); }
.permission-group.has-selected { background: linear-gradient(90deg, var(--perm-soft, #f8fafc), #fff 58%); border-color: var(--perm-border, #e2e8f0); }
.permission-group-head { margin-bottom: 9px; }
.permission-group-name { color: #24384e; }
.permission-group-name .icon { color: var(--perm-color, #64748b); }
.permission-count { padding: 2px 6px; border: 1px solid var(--perm-border, #e2e8f0); border-radius: 4px; background: var(--perm-soft, #f8fafc); color: var(--perm-color, #64748b); font-size: 7px; font-variant-numeric: tabular-nums; transition: color .2s, background .2s; }
.permission-toggle span {
  background: #fbfcfe; border-color: #e4ebf3; color: #5e7186;
  transition: background .2s, border-color .2s, color .2s, transform .18s, box-shadow .2s;
}
.permission-toggle:hover span { border-color: var(--perm-border, #dbe5ef); background: var(--perm-soft, #f1f5f9); color: var(--perm-color, #334155); transform: translateY(-1px); }
.permission-toggle input:checked + span {
  border-color: var(--perm-color, #1d4ed8);
  background: linear-gradient(135deg, var(--perm-color, #2563eb), var(--perm-deep, #1d4ed8));
  color: #fff; box-shadow: 0 3px 9px var(--perm-ring, rgba(37, 99, 235, .2));
}
.permission-toggle input:checked + span::before { border-color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .2); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.permission-submodules { border-color: var(--perm-border, #e2e8f0); background: var(--perm-tint, #f8fafc); transition: background .2s, border-color .2s; }
.permission-submodules-head span { color: var(--perm-color, #5e7892); }
.permission-submodules-head small { color: #93a6b8; }
.permission-module-toggle span { border-color: var(--perm-border, #e1e9f2); background: #fff; color: #64788c; }
.permission-module-toggle:hover span { background: var(--perm-soft, #f1f5f9); color: var(--perm-color, #334155); }
.permission-module-toggle input:checked + span {
  border-color: var(--perm-color, #1d4ed8);
  background: linear-gradient(135deg, var(--perm-color, #2563eb), var(--perm-deep, #1d4ed8));
  color: #fff; box-shadow: 0 3px 8px var(--perm-ring, rgba(37, 99, 235, .2));
}
.permission-toggle.perm-pop span { animation: permPillPop .38s cubic-bezier(.2, .8, .2, 1); }
@keyframes permPillPop {
  0% { transform: scale(.92); }
  55% { transform: scale(1.045); }
  100% { transform: scale(1); }
}
.permission-footer .permission-count { background: #eef5ff; border-color: #c7ddf6; color: #1d4ed8; }

/* Permission templates */
.permission-template-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.permission-template-head h2 { margin: 6px 0 4px; color: #172d45; font-size: 18px; letter-spacing: -.025em; }
.permission-template-head p { margin: 0; color: #7f93a7; font-size: 8px; line-height: 1.7; }
.permission-template-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.permission-template-card { position: relative; overflow: hidden; padding: 14px; border: 1px solid #e0e9f3; border-top: 3px solid var(--tpl-color, #2563eb); border-radius: 9px; background: linear-gradient(160deg, color-mix(in srgb, var(--tpl-color) 6%, #fff), #fff 55%); box-shadow: 0 5px 15px rgba(15, 23, 42, .035); transition: transform .18s, box-shadow .18s, border-color .18s; }
.permission-template-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15, 23, 42, .08); }
.template-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.template-card-head > div { display: flex; align-items: center; gap: 6px; min-width: 0; }
.template-color-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--tpl-color, #2563eb); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tpl-color) 14%, transparent); }
.template-card-head h3 { margin: 0; color: #1d344d; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.template-badge { flex: 0 0 auto; padding: 2px 5px; border-radius: 3px; background: color-mix(in srgb, var(--tpl-color) 10%, #fff); color: var(--tpl-color, #2563eb); font-size: 5.5px; }
.permission-template-card > p { min-height: 24px; margin: 9px 0 0; color: #7b8fa3; font-size: 7.5px; line-height: 1.65; }
.template-card-stats { display: flex; align-items: baseline; gap: 4px; margin-top: 10px; color: #6f8499; font-size: 6.5px; }
.template-card-stats strong { color: var(--tpl-color, #2563eb); font-size: 17px; line-height: 1; }
.template-card-stats span { margin-left: auto; color: #94a6b8; }
.template-card-tags { display: flex; flex-wrap: wrap; gap: 3px; min-height: 38px; margin-top: 9px; align-content: flex-start; }
.template-card-tags span { padding: 2px 5px; border-radius: 3px; background: #f2f6fa; color: #6d849a; font-size: 5.8px; }
.template-card-actions { display: flex; align-items: center; gap: 4px; margin-top: 10px; padding-top: 9px; border-top: 1px solid #edf2f8; }
.template-card-actions .btn:first-child { flex: 1; justify-content: center; }
.template-perm-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 8px; padding: 9px 10px; border: 1px solid #e1ebf4; border-radius: 7px; background: #f8fbfe; }
.template-perm-toolbar strong { display: block; color: #28415a; font-size: 9px; }
.template-perm-toolbar span { display: block; margin-top: 2px; color: #8a9eaf; font-size: 6.5px; }
.template-perm-toolbar .btn-row { align-items: center; }
.template-perm-groups { max-height: 390px; overflow: auto; padding-right: 3px; display: flex; flex-direction: column; gap: 9px; }
.template-perm-group { padding: 9px 10px; border: 1px solid #e7eef6; border-radius: 7px; background: #fbfdff; }
.template-perm-group-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.template-perm-group-head strong { color: #435a70; font-size: 8px; }
.template-perm-group-head span { color: #8fa2b5; font-size: 6.5px; }
.template-perm-toggle span { height: 22px; padding: 0 6px; font-size: 7px; background: #fff; border-color: #e1e9f2; }
.template-perm-toggle input:checked + span { background: #eef5ff; border-color: #a9c8ea; color: #1d4ed8; }
.template-perm-toggle input:checked + span::before { background: #1d4ed8; border-color: #1d4ed8; }
@media (max-width: 1080px) { .permission-template-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .permission-template-grid { grid-template-columns: 1fr; } .permission-template-head { flex-direction: column; align-items: flex-start; } .template-perm-toolbar { align-items: flex-start; flex-direction: column; } }

/* Template tab contrast on dark workspace */
.permission-template-head h2 { color: #f3f8fe; }
.permission-template-head p { color: #9eb2c6; }
.permission-template-head .eyebrow { color: #7e9ab5; }
.template-card-head h3 { color: #0d1f33; font-size: 12px; }
.permission-template-card > p { color: #5f7489; }
.template-card-stats { color: #5e7489; }
.template-card-tags span { background: #eef3f9; color: #5c7287; }

/* Template colour picker */
.template-color-row { display: flex; align-items: center; gap: 7px; height: 30px; }
.template-color-row input[type="color"] { width: 33px; height: 30px; padding: 2px; border: 1px solid #d9e5f1; border-radius: 5px; background: #fff; cursor: pointer; }
.template-color-swatches { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.template-color-swatch { width: 14px; height: 14px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: var(--swatch); box-shadow: 0 0 0 1px #dce6f1; transition: transform .15s, box-shadow .15s; }
.template-color-swatch:hover { transform: scale(1.13); }
.template-color-swatch.active { box-shadow: 0 0 0 2px #1d4ed8; transform: scale(1.08); }

.template-color-row input[type="color"] { flex: 0 0 40px; width: 40px !important; min-width: 40px; max-width: 40px; height: 30px; }

/* Interactive team summary modules */
.team-summary { gap: 12px; }
.team-summary-item {
  position: relative; overflow: hidden; padding: 14px 15px 17px; display: flex; align-items: center; gap: 10px;
  border-radius: 13px; border: 1px solid rgba(96, 165, 250, .12); background: linear-gradient(145deg, #10253e, #071a30 72%);
  color: #e6f0fb; text-align: left; font: inherit; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 6px 18px rgba(2, 9, 20, .18);
  transition: transform .2s, border-color .2s, box-shadow .2s, background .2s;
}
.team-summary-item[data-tone="blue"] { --sum-accent: #60a5fa; --sum-deep: #2563eb; --sum-glow: rgba(37, 99, 235, .26); }
.team-summary-item[data-tone="cyan"] { --sum-accent: #22d3ee; --sum-deep: #0e7490; --sum-glow: rgba(14, 116, 144, .24); }
.team-summary-item[data-tone="amber"] { --sum-accent: #fbbf24; --sum-deep: #b45309; --sum-glow: rgba(180, 83, 9, .22); }
.team-summary-item[data-tone="violet"] { --sum-accent: #a78bfa; --sum-deep: #6d28d9; --sum-glow: rgba(109, 40, 217, .24); }
.team-summary-item::before {
  content: ""; position: absolute; right: -30px; top: -42px; width: 105px; height: 105px; border-radius: 50%;
  background: radial-gradient(circle, var(--sum-glow), transparent 68%); pointer-events: none;
}
.team-summary-item::after {
  content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--sum-accent), transparent); opacity: .7;
}
.team-summary-item:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--sum-accent) 44%, transparent); box-shadow: 0 12px 26px var(--sum-glow), inset 0 1px 0 rgba(255, 255, 255, .05); background: linear-gradient(145deg, #14304e, #081c33 74%); }
.team-summary-item:active { transform: translateY(-1px) scale(.995); }
.team-summary-item:focus-visible { outline: 2px solid var(--sum-accent); outline-offset: 2px; }
.team-summary-item.is-active { border-color: color-mix(in srgb, var(--sum-accent) 36%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sum-accent) 12%, transparent), 0 7px 20px var(--sum-glow); }
.team-summary-icon {
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid color-mix(in srgb, var(--sum-accent) 24%, transparent);
  background: color-mix(in srgb, var(--sum-accent) 13%, transparent); color: var(--sum-accent);
  transition: transform .2s, background .2s;
}
.team-summary-item:hover .team-summary-icon { transform: scale(1.06) rotate(-3deg); background: color-mix(in srgb, var(--sum-accent) 20%, transparent); }
.team-summary-icon .icon { width: 15px; height: 15px; }
.team-summary-copy { min-width: 0; flex: 1; }
.team-summary-value { color: #f3f8ff; font-size: 22px; font-weight: 650; letter-spacing: -.03em; }
.team-summary-value small { margin-left: 2px; color: var(--sum-accent); font-size: 9px; font-weight: 500; }
.team-summary-label { margin-top: 3px; color: #8ea7c0; font-size: 8px; letter-spacing: .02em; }
.team-summary-arrow { align-self: flex-start; color: var(--sum-accent); font-size: 10px; opacity: .5; transition: opacity .2s, transform .2s; }
.team-summary-item:hover .team-summary-arrow { opacity: 1; transform: translate(1px, -1px); }
.team-summary-track { position: absolute; left: 15px; right: 15px; bottom: 8px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.team-summary-track i { display: block; height: 100%; width: var(--bar, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--sum-accent), var(--sum-deep)); box-shadow: 0 0 8px var(--sum-glow); animation: teamSummaryBar .85s cubic-bezier(.2, .8, .2, 1) both; }
.team-summary-item:hover .team-summary-track i { filter: brightness(1.18); }
@keyframes teamSummaryBar { from { width: 0; } to { width: var(--bar, 0%); } }
@media (max-width: 760px) {
  .team-summary-item { padding: 11px 11px 15px; }
  .team-summary-value { font-size: 19px; }
  .team-summary-icon { width: 29px; height: 29px; }
}

/* Team module detail modal */
.team-load-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.team-load-summary > div { padding: 11px 12px; border: 1px solid #e2ebf4; border-radius: 8px; background: linear-gradient(145deg, #f7fbff, #fff); }
.team-load-summary span { display: block; color: #7c91a5; font-size: 6.5px; }
.team-load-summary strong { display: block; margin-top: 5px; color: #1a334d; font-size: 19px; line-height: 1; letter-spacing: -.03em; }
.team-load-summary strong small { margin-left: 2px; color: #7e93a8; font-size: 7px; font-weight: 400; }
.team-load-list { display: flex; flex-direction: column; gap: 5px; max-height: 380px; overflow: auto; padding-right: 2px; }
.team-load-row { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid #edf2f8; border-radius: 8px; background: #fbfdff; transition: background .18s, border-color .18s; }
.team-load-row:hover { background: #f4f9ff; border-color: #d5e5f5; }
.team-load-main { flex: 1; min-width: 0; }
.team-load-name { color: #253d56; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-load-name small { margin-left: 4px; color: #91a3b5; font-size: 6.5px; font-weight: 400; }
.team-load-track { height: 3px; margin-top: 6px; border-radius: 2px; background: #eaf1f8; overflow: hidden; }
.team-load-track i { display: block; height: 100%; width: var(--width, 0%); border-radius: inherit; background: linear-gradient(90deg, #2563eb, #60a5fa); animation: teamLoadGrow .55s ease both; }
.team-load-row:nth-child(2n) .team-load-track i { background: linear-gradient(90deg, #7c3aed, #a78bfa); }
.team-load-row:nth-child(3n) .team-load-track i { background: linear-gradient(90deg, #b45309, #fbbf24); }
.team-load-value { flex: 0 0 auto; text-align: right; }
.team-load-value strong { display: block; color: #1d344d; font-family: var(--font-num); font-size: 14px; line-height: 1; }
.team-load-value span { display: block; margin-top: 3px; color: #91a3b5; font-size: 5.5px; white-space: nowrap; }
@keyframes teamLoadGrow { from { width: 0; } to { width: var(--width, 0%); } }
@media (max-width: 600px) { .team-load-summary { grid-template-columns: 1fr; } }

/* Enterprise intelligence */
.enterprise-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 15px; }
.enterprise-summary-item { position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px; padding: 13px 14px; border: 1px solid rgba(96, 165, 250, .12); border-radius: 12px; background: linear-gradient(145deg, #10253e, #071a30 75%); box-shadow: 0 5px 16px rgba(2, 9, 20, .16); }
.enterprise-summary-item::after { content: ""; position: absolute; right: -28px; top: -30px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, var(--ent-glow), transparent 70%); }
.enterprise-summary-item.blue { --ent-accent: #60a5fa; --ent-glow: rgba(37, 99, 235, .2); }
.enterprise-summary-item.cyan { --ent-accent: #22d3ee; --ent-glow: rgba(14, 116, 144, .2); }
.enterprise-summary-item.violet { --ent-accent: #a78bfa; --ent-glow: rgba(109, 40, 217, .2); }
.enterprise-summary-item.amber { --ent-accent: #fbbf24; --ent-glow: rgba(180, 83, 9, .18); }
.enterprise-summary-item > span { width: 31px; height: 31px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--ent-accent) 24%, transparent); background: color-mix(in srgb, var(--ent-accent) 12%, transparent); color: var(--ent-accent); }
.enterprise-summary-item > span .icon { width: 14px; height: 14px; }
.enterprise-summary-item strong { display: block; color: #f3f8ff; font-family: var(--font-num); font-size: 18px; line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.enterprise-summary-item small { display: block; margin-top: 4px; color: #8da6bf; font-size: 7px; }
.enterprise-card { overflow: hidden; }
.enterprise-filter-bar { display: flex; align-items: center; gap: 7px; padding: 12px 14px 9px; flex-wrap: wrap; }
.enterprise-filter-bar .search-field { flex: 1 1 220px; min-width: 190px; }
.enterprise-capital-input { width: 112px; }
.enterprise-result-count { margin-left: auto; color: #8ca0b4; font-size: 7.5px; white-space: nowrap; }
.enterprise-compliance-inline { display: flex; align-items: center; gap: 5px; margin: 0 14px 9px; padding: 6px 8px; border: 1px solid #dce8f4; border-radius: 5px; background: #f7fbff; color: #738ba3; font-size: 6.5px; line-height: 1.5; }
.enterprise-compliance-inline .icon { width: 10px; height: 10px; color: #1d4ed8; flex: 0 0 auto; }
.enterprise-table { min-width: 960px; }
.enterprise-name-cell { display: flex; align-items: center; gap: 8px; min-width: 220px; }
.enterprise-logo { width: 31px; height: 31px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px; background: linear-gradient(145deg, #eaf3ff, #dcecff); color: #1d4ed8; font-size: 11px; font-weight: 600; }
.enterprise-capital { color: #d04a19; font-family: var(--font-num); font-size: 10px; font-weight: 600; }
.enterprise-capital small { color: #9aabba; font-size: 5.5px; font-weight: 400; }
.enterprise-status { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 4px; font-size: 7px; white-space: nowrap; }
.enterprise-status i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.enterprise-status.active { background: #eef5ff; color: #1d4ed8; }
.enterprise-status.paused { background: #fff8e8; color: #9a5c00; }
.enterprise-status.draft { background: #f1f5f9; color: #64748b; }
.enterprise-status.danger { background: #fff1f2; color: #be123c; }
.source-badge { display: inline-block; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 6px; border-radius: 3px; background: #f1f6fc; color: #6685a5; font-size: 6.5px; }
.enterprise-detail { font-size: 9px; }
.enterprise-detail-hero { display: flex; gap: 11px; align-items: flex-start; padding-bottom: 14px; border-bottom: 1px solid #edf2f8; }
.enterprise-detail-hero .enterprise-logo { width: 42px; height: 42px; border-radius: 10px; font-size: 15px; }
.enterprise-detail-hero strong { display: block; color: #182f48; font-size: 11px; line-height: 1.4; }
.enterprise-detail-hero span { display: block; margin-top: 4px; color: #7e93a8; font-size: 7.5px; }
.enterprise-detail-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 8px; }
.enterprise-detail-tags span { padding: 2px 5px; border-radius: 3px; background: #eef5ff; color: #4b78a8; font-size: 6px; }
.enterprise-detail-section { padding: 11px 0; border-bottom: 1px solid #f0f4f8; }
.enterprise-detail-section:last-of-type { border-bottom: 0; }
.enterprise-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 14px; }
.enterprise-detail-grid span { display: block; color: #8da0b3; font-size: 6.5px; }
.enterprise-detail-grid strong { display: block; margin-top: 3px; color: #31495f; font-size: 8px; font-weight: 500; word-break: break-all; }
.enterprise-detail-text { margin: 0; color: #5e7489; font-size: 8px; line-height: 1.8; }
.enterprise-shareholders { display: flex; flex-direction: column; gap: 4px; }
.enterprise-shareholders div { display: flex; justify-content: space-between; gap: 10px; padding: 5px 7px; border-radius: 4px; background: #f8fbfe; color: #4f687f; font-size: 7.5px; }
.enterprise-shareholders strong { color: #1d4ed8; font-family: var(--font-num); }
.enterprise-source-note { margin-top: 10px; padding: 8px 9px; border: 1px solid #dce8f4; border-radius: 6px; background: #f7fbff; color: #7c91a4; font-size: 6.5px; line-height: 1.7; }
.enterprise-source-note .icon { width: 10px; height: 10px; vertical-align: -1px; color: #1d4ed8; }
.enterprise-source-note a { color: #1d4ed8; }
.enterprise-compliance { display: flex; gap: 9px; align-items: flex-start; padding: 10px 11px; margin-bottom: 12px; border: 1px solid #d7e7f7; border-radius: 7px; background: linear-gradient(135deg, #f2f8ff, #fbfdff); color: #6f879d; font-size: 7px; line-height: 1.7; }
.enterprise-compliance > .icon { width: 17px; height: 17px; flex: 0 0 auto; color: #1d4ed8; }
.enterprise-compliance strong { display: block; color: #2e4a64; font-size: 8px; margin-bottom: 2px; }
.enterprise-compliance span { display: block; }
.enterprise-source-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.enterprise-source-card { padding: 11px; border: 1px solid #e0e9f3; border-radius: 8px; background: #fff; }
.enterprise-source-card.is-muted { background: #fbfcfe; }
.enterprise-source-head { display: flex; align-items: center; gap: 6px; }
.enterprise-source-head strong { flex: 1; color: #27415a; font-size: 9px; }
.source-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #94a3b8; }
.source-status-dot.ready { background: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .1); }
.source-status-dot.unconfigured { background: #d97706; }
.source-type { padding: 2px 4px; border-radius: 3px; background: #f1f5f9; color: #7b8fa3; font-size: 5.5px; }
.enterprise-source-card > p { min-height: 30px; margin: 8px 0; color: #7b8fa3; font-size: 6.5px; line-height: 1.6; }
.enterprise-source-meta { display: flex; justify-content: space-between; gap: 6px; color: #91a3b5; font-size: 5.8px; }
.enterprise-source-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 9px; padding-top: 7px; border-top: 1px solid #eef3f8; }
.enterprise-source-foot small { color: #8a9eb1; font-size: 5.8px; }
.enterprise-sync-logs { margin-top: 12px; padding-top: 8px; border-top: 1px solid #edf2f8; }
.enterprise-sync-log { display: flex; align-items: center; gap: 7px; padding: 4px 0; color: #758a9e; font-size: 6.5px; }
.enterprise-sync-log > span:first-child { flex: 0 0 auto; padding: 1px 4px; border-radius: 3px; font-size: 5.5px; }
.enterprise-sync-log .ok { background: #eef5ff; color: #1d4ed8; }
.enterprise-sync-log .fail { background: #fff1f2; color: #be123c; }
.enterprise-sync-log > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enterprise-sync-log time { color: #9aabba; font-size: 5.5px; }
.enterprise-import { display: flex; flex-direction: column; gap: 11px; }
.enterprise-import .import-guide { border-color: #d7e7f7; background: #f7fbff; }
.enterprise-import .import-guide-icon { color: #1d4ed8; background: #e8f2ff; }
@media (max-width: 1100px) { .enterprise-summary { grid-template-columns: 1fr 1fr; } .enterprise-source-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .enterprise-filter-bar { align-items: stretch; } .enterprise-filter-bar .search-field { flex-basis: 100%; } .enterprise-capital-input { width: calc(50% - 4px); } .enterprise-summary { grid-template-columns: 1fr 1fr; } .enterprise-result-count { margin-left: 0; } }

/* Clickable client summary modules */
.stats-strip button.strip-item { font: inherit; color: inherit; text-align: left; cursor: pointer; background: #fff; border: 0; border-right: 1px solid var(--line); transition: background .18s, box-shadow .18s; }
.stats-strip button.strip-item:last-child { border-right: 0; }
.stats-strip button.strip-item:hover { background: #f8fbff; }
.stats-strip button.strip-item.is-active { background: linear-gradient(90deg, var(--strip-soft, #f0f5fb), #fff 78%); box-shadow: inset 0 -2px 0 var(--strip-color, #648377); }
.stats-strip button.strip-item.is-active .strip-icon { background: var(--strip-color, #648377); color: #fff; }
.strip-arrow { margin-left: auto; color: var(--strip-color, #7b8da3); font-size: 10px; opacity: .45; transition: opacity .18s, transform .18s; }
.stats-strip button.strip-item:hover .strip-arrow, .stats-strip button.strip-item.is-active .strip-arrow { opacity: 1; transform: translate(1px, -1px); }
.client-scope-bar { display: flex; align-items: center; gap: 8px; margin: -5px 0 13px; padding: 7px 10px; border: 1px solid #d8e7f6; border-radius: 7px; background: #f4f9ff; color: #73899e; font-size: 7.5px; }
.client-scope-bar[hidden] { display: none; }
.client-scope-bar strong { color: #1d4ed8; font-size: 8px; }
.client-scope-bar button { margin-left: auto; padding: 2px 6px; border: 1px solid #cbdff3; border-radius: 4px; background: #fff; color: #5b7b9c; font-size: 6.5px; cursor: pointer; }
.client-scope-bar button:hover { border-color: #9dc2e8; color: #1d4ed8; }
@media (max-width: 760px) {
  .stats-strip button.strip-item { border-right: 0; border-bottom: 1px solid var(--line); }
  .stats-strip button.strip-item:last-child { border-bottom: 0; }
}