@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;500;600;700;800&family=Varela+Round&display=swap");

:root {
  font-family: "Nunito Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #253246;
  background: #edf3f8;
  --primary: #496987;
  --primary-deep: #365673;
  --accent: #df5d22;
  --surface: #f8fbfd;
  --surface-strong: #ffffff;
  --background: #edf3f8;
  --foreground: #253246;
  --muted: #66778b;
  --border: rgba(129, 151, 174, .18);
  --success: #24785e;
  --warning: #b96218;
  --danger: #bc3e47;
  --violet: #7564a7;
  --shadow-soft: 10px 10px 25px rgba(114, 136, 158, .13), -10px -10px 24px rgba(255, 255, 255, .78);
  --shadow-card: 0 10px 32px rgba(72, 95, 119, .08), inset 0 1px 0 rgba(255,255,255,.9);
  --shadow-raised: 0 15px 35px rgba(72, 95, 119, .14), inset 0 1px 0 #fff;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --transition: 240ms cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--background); }
body.modal-active { overflow: hidden; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[v-cloak] { display: none; }
[hidden] { display: none !important; }

.skip-link { position: fixed; left: 16px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 10px; color: white; background: var(--primary-deep); transition: top var(--transition); }
.skip-link:focus { top: 16px; }
:focus-visible { outline: 3px solid rgba(73, 105, 135, .36); outline-offset: 3px; }

.app-shell { min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: 256px; z-index: 30; display: flex; flex-direction: column;
  padding: 24px 18px; color: #415269; background: rgba(248, 251, 253, .92);
  border-right: 1px solid rgba(255,255,255,.9); box-shadow: 8px 0 30px rgba(93, 116, 139, .07);
  backdrop-filter: blur(20px);
}
.brand { display: flex; align-items: center; gap: 12px; padding: 0 9px 24px; }
.brand > span:last-child { display: flex; flex-direction: column; }
.brand strong { font-family: "Varela Round", "PingFang SC", sans-serif; color: #26384b; font-size: 18px; letter-spacing: .03em; }
.brand small { margin-top: 1px; color: #8a9aad; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.brand-mark { position: relative; width: 36px; height: 36px; border-radius: 12px 12px 16px 12px; background: linear-gradient(145deg, #5b7d9d, #355b7c); box-shadow: 5px 7px 14px rgba(52, 83, 111, .22), inset 1px 1px 1px rgba(255,255,255,.38); overflow: hidden; }
.brand-mark span { position: absolute; background: rgba(255,255,255,.9); border-radius: 6px; }
.brand-mark span:nth-child(1) { width: 6px; height: 20px; left: 9px; top: 9px; }
.brand-mark span:nth-child(2) { width: 6px; height: 14px; left: 19px; top: 15px; }
.brand-mark span:nth-child(3) { width: 16px; height: 4px; left: 10px; top: 17px; transform: rotate(-35deg); opacity: .8; }
.workspace-chip { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 10px; border: 1px solid rgba(255,255,255,.9); border-radius: var(--radius-md); background: rgba(237, 243, 248, .74); box-shadow: inset 3px 3px 8px rgba(104,125,146,.08), inset -3px -3px 8px #fff; }
.workspace-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 13px; color: white; background: linear-gradient(145deg,#e77d4b,#c84e19); box-shadow: 4px 5px 12px rgba(204,82,29,.2); }
.workspace-chip > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.workspace-chip small, .profile small { color: #8493a4; font-size: 11px; }
.workspace-chip strong { color: #3a4a5e; font-size: 13px; }
.chevron { color: #8493a4; }
.sidebar nav { display: flex; flex-direction: column; gap: 5px; margin-top: 26px; }
.sidebar nav p { margin: 0 12px 8px; color: #9aa6b4; font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.sidebar nav button { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 13px; border: 0; border-radius: 15px; color: #68788b; background: transparent; text-align: left; transition: color var(--transition), background var(--transition), box-shadow var(--transition), transform var(--transition); }
.sidebar nav button:hover { color: #365673; background: rgba(255,255,255,.7); transform: translateX(2px); }
.sidebar nav button.active { color: #365d7e; background: #edf3f8; box-shadow: 5px 6px 14px rgba(101,125,147,.13), -4px -4px 11px rgba(255,255,255,.86); }
.sidebar nav button b { margin-left: auto; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; color: #a84b21; background: #fbe5db; border-radius: 8px; font-size: 11px; }
.nav-icon { display: inline-flex; flex: 0 0 auto; }
.nav-icon svg { width: 19px; height: 19px; }
.sidebar-help { position: relative; margin-top: auto; padding: 17px 15px 16px 45px; border-radius: var(--radius-md); background: linear-gradient(145deg,#eff7f3,#e4f0ea); border: 1px solid rgba(255,255,255,.8); box-shadow: var(--shadow-soft); }
.sidebar-help .nav-icon { position: absolute; left: 15px; top: 18px; color: var(--success); }
.sidebar-help strong, .sidebar-help small { display: block; }
.sidebar-help strong { color: #376553; font-size: 12px; }
.sidebar-help small { margin-top: 3px; color: #718b80; font-size: 10px; }
.profile { display: flex; align-items: center; gap: 10px; padding: 20px 8px 0; margin-top: 20px; border-top: 1px solid var(--border); }
.profile > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; }
.profile strong { font-size: 12px; }
.avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 13px; color: #506378; background: #edf3f8; box-shadow: 4px 5px 10px rgba(101,125,147,.14), -3px -3px 8px #fff; font-weight: 800; }
.profile-more { color: #95a2b0; letter-spacing: 1px; }

main { min-height: 100vh; margin-left: 256px; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; min-height: 76px; padding: 0 36px; border-bottom: 1px solid rgba(255,255,255,.65); background: rgba(237,243,248,.82); backdrop-filter: blur(18px); }
.global-search { display: flex; align-items: center; gap: 10px; width: min(420px, 42vw); height: 43px; padding: 0 13px; border: 1px solid rgba(255,255,255,.82); border-radius: 15px; color: #7c8b9c; background: #edf3f8; box-shadow: inset 3px 3px 8px rgba(93,114,135,.08), inset -4px -4px 9px rgba(255,255,255,.84); transition: box-shadow var(--transition); }
.global-search:focus-within { box-shadow: inset 2px 2px 6px rgba(93,114,135,.08), inset -3px -3px 8px #fff, 0 0 0 3px rgba(73,105,135,.12); }
.global-search svg { width: 18px; }
.global-search input { flex: 1; min-width: 0; border: 0; outline: 0; color: var(--foreground); background: transparent; font-size: 13px; }
.global-search kbd { padding: 3px 6px; border: 1px solid var(--border); border-radius: 6px; color: #8a98a8; background: rgba(255,255,255,.65); font-size: 10px; }
.topbar-actions { display: flex; align-items: center; gap: 16px; }
.icon-button { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 14px; color: #637488; background: #edf3f8; box-shadow: 4px 5px 12px rgba(101,125,147,.12), -4px -4px 10px rgba(255,255,255,.82); transition: transform var(--transition), color var(--transition), box-shadow var(--transition); }
.icon-button:hover { color: var(--primary-deep); transform: translateY(-2px); box-shadow: 6px 8px 16px rgba(101,125,147,.16), -4px -4px 10px #fff; }
.icon-button:active { transform: translateY(0) scale(.97); box-shadow: inset 2px 2px 5px rgba(101,125,147,.13); }
.notification { position: relative; }
.notification::after { content:""; position: absolute; top: 9px; right: 9px; width: 7px; height: 7px; border: 2px solid var(--background); border-radius: 50%; background: var(--accent); }
.today { color: #718196; font-size: 12px; }
.mobile-menu { display: none; }

.content { width: 100%; margin: 0; padding: 36px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.page-heading h1 { margin: 5px 0 8px; color: #28394d; font-family: "Varela Round","PingFang SC",sans-serif; font-size: clamp(27px, 3vw, 36px); font-weight: 700; letter-spacing: -.025em; }
.page-heading > div > p:last-child { margin: 0; color: #708095; font-size: 14px; }
.eyebrow { display: flex; align-items: center; gap: 7px; margin: 0; color: #647991; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.eyebrow span { width: 20px; height: 5px; border-radius: 10px; background: var(--accent); }
.primary, .secondary, .ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 43px; padding: 0 18px; border-radius: 14px; font-weight: 700; font-size: 13px; transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition); }
.primary { border: 1px solid rgba(255,255,255,.2); color: white; background: linear-gradient(145deg,#597b99,#365a79); box-shadow: 6px 8px 18px rgba(51,82,109,.22), inset 1px 1px 1px rgba(255,255,255,.34); }
.primary:hover { transform: translateY(-2px); box-shadow: 8px 11px 22px rgba(51,82,109,.25), inset 1px 1px 1px rgba(255,255,255,.34); }
.primary:active { transform: translateY(0) scale(.98); }
.primary svg { width: 17px; height: 17px; }
.secondary { border: 1px solid rgba(255,255,255,.86); color: #54677d; background: var(--background); box-shadow: 4px 5px 11px rgba(101,125,147,.12), -4px -4px 9px #fff; }
.secondary:hover { color: var(--primary-deep); transform: translateY(-1px); }
.ghost { border: 0; color: #738398; background: transparent; }
.ghost:hover { color: var(--primary-deep); background: rgba(255,255,255,.62); }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; margin-bottom: 22px; }
.stats article { position: relative; min-height: 146px; padding: 21px 22px; overflow: hidden; border: 1px solid rgba(255,255,255,.84); border-radius: var(--radius-lg); background: rgba(248,251,253,.78); box-shadow: var(--shadow-card); transition: transform var(--transition), box-shadow var(--transition); }
.stats article:hover { transform: translateY(-4px); box-shadow: var(--shadow-raised); }
.stat-top { display: flex; align-items: center; justify-content: space-between; color: #68798e; font-size: 12px; font-weight: 700; }
.stat-top i { width: 9px; height: 9px; border: 3px solid currentColor; border-radius: 50%; opacity: .7; }
.stats article > div:nth-child(2) { margin-top: 13px; }
.stats article strong { color: #2b3c50; font-size: 31px; line-height: 1; font-variant-numeric: tabular-nums; }
.stats article em { margin-left: 5px; color: #76879a; font-size: 12px; font-style: normal; }
.stats article > small { display: block; margin-top: 14px; color: #687b91; font-size: 13px; line-height: 1.4; }
.stats article > small b { margin-right: 5px; font-size: 10px; }
.tone-blue { color: #54799a; }.tone-green { color: var(--success); }.tone-amber { color: var(--warning); }.tone-violet { color: var(--violet); }
.organic-orb { position: absolute; width: 95px; height: 80px; right: -34px; bottom: -37px; border-radius: 61% 39% 48% 52% / 46% 57% 43% 54%; background: currentColor; opacity: .07; transform: rotate(-16deg); }

.panel { overflow: hidden; border: 1px solid rgba(255,255,255,.84); border-radius: var(--radius-lg); background: rgba(248,251,253,.78); box-shadow: var(--shadow-card); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; padding: 23px 24px 17px; }
.panel-heading h2 { margin: 0 0 4px; color: #2e4053; font-family: "Varela Round","PingFang SC",sans-serif; font-size: 18px; }
.panel-heading p { margin: 0; color: #8391a1; font-size: 11px; }
.view-switch button { display: grid; place-items: center; width: 37px; height: 37px; border: 0; border-radius: 12px; color: #56728d; background: #edf3f8; box-shadow: inset 2px 2px 5px rgba(98,120,142,.1), inset -3px -3px 7px #fff; }
.view-switch svg { width: 17px; height: 17px; }
.filters { display: flex; align-items: center; gap: 11px; padding: 14px 24px; border-block: 1px solid rgba(132,153,174,.11); background: rgba(237,243,248,.56); }
.search-field { display: flex; align-items: center; gap: 9px; width: min(340px, 38vw); min-height: 42px; padding: 0 13px; border: 1px solid rgba(255,255,255,.85); border-radius: 13px; background: var(--surface); box-shadow: inset 2px 2px 5px rgba(93,114,135,.06); }
.search-field svg { width: 17px; color: #8493a3; }
.search-field input { flex: 1; min-width: 0; border: 0; outline: 0; color: var(--foreground); background: transparent; font-size: 12px; }
.filters select, .form-grid input, .form-grid select { min-height: 42px; padding: 0 12px; border: 1px solid rgba(132,153,174,.2); border-radius: 13px; outline: 0; color: #4e6074; background: rgba(255,255,255,.76); transition: border var(--transition), box-shadow var(--transition), background var(--transition); }
.filters select { width: 132px; font-size: 12px; }
.filters select:focus, .form-grid input:focus, .form-grid select:focus { border-color: rgba(73,105,135,.52); background: white; box-shadow: 0 0 0 3px rgba(73,105,135,.11); }
.result-count { margin-left: auto; color: #8693a2; font-size: 11px; }
.project-list { padding: 8px 14px 14px; }
.project-card { display: grid; grid-template-columns: minmax(230px,1.3fr) minmax(300px,1.5fr) minmax(125px,.65fr) auto auto; align-items: center; gap: 18px; min-height: 108px; margin-top: 8px; padding: 18px 16px; border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; transition: transform var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition); }
.project-card:hover, .project-card:focus-within { z-index: 1; border-color: rgba(255,255,255,.9); background: rgba(255,255,255,.7); box-shadow: 6px 8px 18px rgba(92,115,138,.1), -4px -4px 12px rgba(255,255,255,.78); transform: translateY(-2px); }
.project-identity { display: flex; align-items: center; gap: 13px; min-width: 0; }
.project-icon { display: grid; flex: 0 0 auto; place-items: center; width: 45px; height: 45px; border-radius: 15px 15px 18px 13px; color: #527491; background: #e7eff5; box-shadow: inset 2px 2px 4px rgba(96,120,143,.09), inset -2px -2px 5px white; }
.project-icon svg { width: 20px; }
.project-identity div { min-width: 0; }
.project-identity h3 { overflow: hidden; margin: 0 0 6px; color: #304156; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.project-identity p { overflow: hidden; margin: 0; color: #76879a; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.project-meta { display: grid; grid-template-columns: .8fr 1.4fr 1fr; gap: 14px; }
.project-meta span, .progress-block { display: flex; flex-direction: column; min-width: 0; }
.project-meta small, .progress-block small { margin-bottom: 6px; color: #7f90a3; font-size: 12px; line-height: 1.35; }
.project-meta strong { overflow: hidden; color: #4c6077; font-size: 14px; font-weight: 700; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.progress-block > span { display: flex; flex-direction: row; justify-content: space-between; }
.progress-block b { color: #536a82; font-size: 13px; }
.progress { height: 6px; overflow: hidden; border-radius: 10px; background: #e3eaf0; box-shadow: inset 1px 1px 2px rgba(80,101,121,.1); }
.progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#6b8eaa,#466e91); }
.status-pill { display: inline-flex; align-items: center; gap: 6px; justify-content: center; min-width: 78px; min-height: 32px; padding: 0 11px; border-radius: 11px; font-size: 12px; font-weight: 800; }
.status-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-pill.green { color: #29725c; background: #e3f0ea; }.status-pill.amber { color: #a55a1b; background: #f7eadc; }.status-pill.red { color: #a9434b; background: #f8e4e6; }.status-pill.slate { color: #657689; background: #e8edf2; }
.detail-link { display: inline-flex; align-items: center; gap: 3px; min-height: 40px; padding: 0 11px; border: 0; border-radius: 11px; color: #567492; background: transparent; font-size: 12px; font-weight: 800; transition: background var(--transition), transform var(--transition); }
.detail-link:hover { background: #e9f0f5; transform: translateX(2px); }
.detail-link svg { width: 14px; height: 14px; }
.state-message { display: grid; justify-items: center; padding: 62px 20px; color: #7c8b9d; text-align: center; }
.state-message strong { margin-top: 12px; color: #4b5d72; }
.state-message p { margin: 5px 0 16px; font-size: 12px; }
.empty-orb { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 45% 55% 62% 38% / 48% 38% 62% 52%; color: #738da6; background: #e7eef4; box-shadow: var(--shadow-soft); }
.loading-grid { padding: 18px 24px; }
.skeleton { height: 72px; margin: 9px 0; border-radius: 17px; background: linear-gradient(105deg,#e9eff4 25%,#f8fbfd 40%,#e9eff4 60%); background-size: 250% 100%; animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { background-position-x: -250%; } }

.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 22px; background: rgba(48,64,80,.38); backdrop-filter: blur(8px); }
.modal { width: min(720px, 100%); max-height: calc(100vh - 44px); overflow: auto; border: 1px solid rgba(255,255,255,.88); border-radius: 28px; background: #f3f7fa; box-shadow: 0 32px 90px rgba(34,50,66,.28), inset 0 1px 0 #fff; }
.modal-heading { display: flex; align-items: center; justify-content: space-between; padding: 24px 26px 19px; border-bottom: 1px solid rgba(132,153,174,.13); }
.modal-heading > div { display: flex; align-items: center; gap: 13px; }
.modal-symbol { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 15px; color: #527491; background: #e5edf4; box-shadow: var(--shadow-soft); }
.modal-heading h2 { margin: 0 0 4px; color: #304156; font-size: 19px; }
.modal-heading p { margin: 0; color: #7d8c9e; font-size: 11px; }
.modal form { padding: 23px 26px 25px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid label { display: flex; flex-direction: column; gap: 7px; color: #536579; font-size: 11px; font-weight: 700; }
.form-grid label > span b { color: var(--danger); }
.form-grid .wide { grid-column: 1 / -1; }
.form-grid input, .form-grid select { width: 100%; }
.form-grid input::placeholder { color: #a0adba; }
.form-error { margin: 14px 0 0; padding: 10px 12px; border-radius: 11px; color: #9e3941; background: #f8e5e7; font-size: 11px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 11px; margin-top: 22px; }
.spinner { width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.4); border-top-color: white; border-radius: 50%; animation: spin .7s linear infinite; }
.spinner.dark { border-color: rgba(73,105,135,.25); border-top-color: var(--primary); }
@keyframes spin { to { transform: rotate(360deg); } }
.fade-enter-active, .fade-leave-active { transition: opacity 200ms ease; }
.fade-enter-active .modal, .fade-leave-active .modal { transition: transform var(--transition), opacity var(--transition); }
.fade-enter-from, .fade-leave-to { opacity: 0; }
.fade-enter-from .modal, .fade-leave-to .modal { opacity: 0; transform: translateY(14px) scale(.98); }
.toast { position: fixed; right: 28px; top: 28px; z-index: 80; display: flex; align-items: center; gap: 9px; padding: 12px 17px; border: 1px solid rgba(255,255,255,.5); border-radius: 14px; color: white; background: #3f6c5a; box-shadow: 0 14px 35px rgba(39,76,61,.25); font-size: 12px; }
.toast span { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; color: #3f6c5a; background: white; font-weight: 900; }
.toast-enter-active, .toast-leave-active { transition: opacity var(--transition), transform var(--transition); }
.toast-enter-from, .toast-leave-to { opacity: 0; transform: translateY(-10px); }
.mobile-scrim { display: none; }

.detail-breadcrumb { display: flex; align-items: center; gap: 9px; margin-bottom: 17px; color: #8594a5; font-size: 12px; }
.detail-breadcrumb button { padding: 5px 0; border: 0; color: #5d7690; background: transparent; font-weight: 700; }
.detail-breadcrumb button:hover { color: var(--primary-deep); }
.detail-breadcrumb .back-nav { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 11px 0 8px; border: 1px solid rgba(255,255,255,.86); border-radius: 11px; background: #edf3f8; box-shadow: 3px 4px 9px rgba(101,125,147,.1), -3px -3px 8px #fff; transition: transform var(--transition), color var(--transition), box-shadow var(--transition); }
.detail-breadcrumb .back-nav span:first-child { font-size: 17px; line-height: 1; }
.detail-breadcrumb .back-nav:hover { transform: translateX(-2px); box-shadow: 2px 3px 7px rgba(101,125,147,.13), -3px -3px 8px #fff; }
.detail-breadcrumb strong { overflow: hidden; max-width: 50vw; color: #64758a; text-overflow: ellipsis; white-space: nowrap; }
.detail-hero { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 174px; padding: 30px 32px; overflow: hidden; border: 1px solid rgba(255,255,255,.86); border-radius: 30px; background: linear-gradient(135deg,rgba(250,252,254,.94),rgba(232,240,247,.88)); box-shadow: var(--shadow-card); }
.detail-title { position: relative; z-index: 1; display: flex; align-items: center; gap: 17px; }
.detail-project-icon { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 22px 22px 28px 18px; color: #4f718f; background: #e2ebf2; box-shadow: 8px 10px 20px rgba(92,115,138,.14), -6px -6px 16px rgba(255,255,255,.86); }
.detail-project-icon svg { width: 28px; height: 28px; }
.detail-title h1 { margin: 9px 0 6px; color: #2a3d52; font-family: "Varela Round","PingFang SC",sans-serif; font-size: clamp(25px,3vw,34px); }
.detail-title p { margin: 0; color: #718297; font-size: 13px; }
.detail-title .status-pill { min-height: 27px; font-size: 11px; }
.detail-hero > .primary { position: relative; z-index: 1; flex: 0 0 auto; }
.detail-hero-actions { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; }
.danger-soft { display: inline-flex; align-items: center; justify-content: center; min-height: 41px; padding: 0 14px; border: 1px solid rgba(188,62,71,.15); border-radius: 13px; color: #a33e47; background: #f7e6e8; font-size: 12px; font-weight: 700; transition: transform var(--transition), background var(--transition); }
.danger-soft:hover { background: #f2dadd; transform: translateY(-1px); }
.verification-pass-button { border-color: rgba(255,255,255,.28); background: linear-gradient(145deg,#4f9b79,#2e765c); box-shadow: 6px 8px 18px rgba(46,118,92,.22), inset 1px 1px 1px rgba(255,255,255,.34); }
.verification-pass-button:hover { box-shadow: 8px 11px 22px rgba(46,118,92,.27), inset 1px 1px 1px rgba(255,255,255,.34); }
.detail-orb { position: absolute; width: 270px; height: 230px; right: -70px; bottom: -150px; border-radius: 61% 39% 48% 52% / 46% 57% 43% 54%; background: #6e8da7; opacity: .09; transform: rotate(-18deg); }
.detail-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 15px; margin: 18px 0; }
.detail-stats article { display: flex; flex-direction: column; min-height: 118px; padding: 20px; border: 1px solid rgba(255,255,255,.82); border-radius: 21px; background: rgba(248,251,253,.78); box-shadow: var(--shadow-card); }
.detail-stats small { color: #7f90a3; font-size: 12px; }
.detail-stats strong { margin: 10px 0 3px; overflow: hidden; color: #3c5066; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.detail-stats strong em { font-size: 12px; font-style: normal; }
.detail-stats article > span { color: #8997a7; font-size: 11px; }
.detail-grid { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 18px; }
.detail-panel { min-width: 0; }
.company-list { padding: 7px 14px 14px; }
.company-list article { display: grid; grid-template-columns: auto minmax(180px,1fr) minmax(100px,.45fr) minmax(90px,.35fr) auto; align-items: center; gap: 14px; min-height: 78px; padding: 12px 10px; border-radius: 17px; transition: background var(--transition), box-shadow var(--transition), transform var(--transition); }
.company-list article:hover { background: rgba(255,255,255,.65); box-shadow: 5px 7px 16px rgba(92,115,138,.09); transform: translateY(-2px); }
.company-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: #567692; background: #e6eef4; }
.company-icon svg { width: 19px; }
.company-list article > div { display: flex; flex-direction: column; min-width: 0; }
.company-list article strong { overflow: hidden; color: #3f5267; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.company-list article small { margin-top: 3px; color: #8997a7; font-size: 11px; }
.company-list article > span:not(.company-icon) { display: flex; flex-direction: column; }
.company-list article b { margin-top: 3px; color: #54687e; font-size: 12px; }
.company-list article button { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 11px; color: #66809a; background: transparent; }
.company-list article button:hover { background: #e8eff4; }
.company-list article button svg { width: 16px; }
.state-message.compact { padding: 36px 20px 45px; }
.safety-summary { padding-bottom: 24px; text-align: center; }
.safety-summary .panel-heading { text-align: left; }
.health-ring { display: grid; place-items: center; width: 116px; height: 116px; margin: 10px auto 18px; border-radius: 50%; background: conic-gradient(#587b98 0 68%,#dfe7ed 68%); box-shadow: 7px 9px 19px rgba(92,115,138,.13), -6px -6px 15px rgba(255,255,255,.86); }
.health-ring::before { content:""; grid-area: 1/1; width: 88px; height: 88px; border-radius: 50%; background: #f3f7fa; box-shadow: inset 2px 2px 6px rgba(92,115,138,.1); }
.health-ring span { z-index: 1; grid-area: 1/1; color: #3f566c; }
.health-ring strong { font-size: 27px; }
.health-ring small { font-size: 11px; }
.safety-summary h3 { margin: 0 0 7px; color: #42576d; font-size: 15px; }
.safety-summary > p { margin: 0 auto 19px; max-width: 220px; color: #8493a4; font-size: 11px; line-height: 1.6; }
.workspace { margin-top: 18px; }
.workspace-tabs { display: flex; gap: 7px; margin-bottom: 13px; padding: 6px; overflow-x: auto; border: 1px solid rgba(255,255,255,.75); border-radius: 17px; background: rgba(229,237,244,.7); box-shadow: inset 2px 2px 6px rgba(93,114,135,.07), inset -3px -3px 8px rgba(255,255,255,.8); }
.workspace-tabs button { flex: 0 0 auto; min-height: 41px; padding: 0 16px; border: 0; border-radius: 12px; color: #687a8f; background: transparent; font-size: 12px; font-weight: 700; transition: color var(--transition), background var(--transition), box-shadow var(--transition); }
.workspace-tabs button:hover { color: var(--primary-deep); background: rgba(255,255,255,.48); }
.workspace-tabs button.active { color: #365d7e; background: #f4f8fb; box-shadow: 4px 5px 12px rgba(101,125,147,.12), -3px -3px 8px #fff; }
.workspace-tabs button b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 5px; padding: 0 5px; border-radius: 7px; color: #6d7f91; background: #e5ecf2; font-size: 10px; }
.workspace-panel { min-height: 330px; }
.workspace-filters { display: flex; align-items: center; gap: 10px; width: min(760px,calc(100% - 48px)); margin: 16px 24px 0; flex-wrap: wrap; }
.workspace-search { display: flex; align-items: center; gap: 9px; width: min(390px,100%); min-height: 41px; margin: 0; padding: 0 12px; border: 1px solid rgba(132,153,174,.18); border-radius: 13px; color: #8091a3; background: rgba(237,243,248,.72); box-shadow: inset 2px 2px 5px rgba(93,114,135,.06); }
.workspace-search svg { width: 17px; }
.workspace-search input { flex: 1; min-width: 0; border: 0; outline: 0; color: var(--foreground); background: transparent; font-size: 12px; }
.team-filter { display: inline-flex; align-items: center; gap: 8px; min-height: 41px; padding: 0 10px 0 12px; border: 1px solid rgba(132,153,174,.18); border-radius: 13px; color: #71859a; background: rgba(237,243,248,.72); box-shadow: inset 2px 2px 5px rgba(93,114,135,.06); font-size: 11px; font-weight: 700; }
.team-filter select { min-width: 130px; min-height: 31px; padding: 0 25px 0 8px; border: 0; outline: 0; color: #536a80; background: transparent; font-size: 11px; font-weight: 700; }
.team-filter select:disabled { color: #9aa8b5; cursor: not-allowed; }
.compact-button { min-height: 38px; padding-inline: 14px; font-size: 12px; text-decoration: none; }
.heading-actions { display: flex; align-items: center; gap: 8px; }
.export-select { display: inline-flex; align-items: center; gap: 6px; color: #4f6b83; background: #e8eff4; cursor: pointer; }
.export-select select { min-height: 27px; padding: 0 20px 0 6px; border: 0; border-left: 1px solid rgba(83,119,148,.18); outline: 0; color: #426987; background: transparent; font-size: 11px; font-weight: 800; cursor: pointer; }
.export-action-group { display: inline-flex; align-items: center; gap: 6px; }
.export-download-button { white-space: nowrap; }
.file-action { position: relative; cursor: pointer; }
.file-action input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.file-action.dragging { color: #fff; background: var(--primary); transform: translateY(-1px); box-shadow: 0 8px 18px rgba(83,119,148,.25); }
.file-action.uploading { color: #fff; background: var(--primary); }
.data-table { width: 100%; max-width: 100%; padding: 0 14px 14px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-color: rgba(83,119,148,.55) rgba(219,228,235,.72); scrollbar-gutter: stable; scrollbar-width: auto; -webkit-overflow-scrolling: touch; }
.data-table::-webkit-scrollbar { height: 10px; }
.data-table::-webkit-scrollbar-track { border-radius: 999px; background: rgba(219,228,235,.72); }
.data-table::-webkit-scrollbar-thumb { border: 2px solid rgba(219,228,235,.72); border-radius: 999px; background: rgba(83,119,148,.55); }
.table-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 24px 18px; color: #8191a1; font-size: 10px; }
.table-pager > div { display: flex; gap: 7px; }
.table-pager button:disabled { cursor: not-allowed; opacity: .45; }
.table-controls { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 0 24px 12px; color: #8191a1; font-size: 11px; }
.table-controls label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.table-controls select { min-height: 30px; padding: 0 25px 0 9px; border: 1px solid rgba(132,153,174,.18); border-radius: 9px; color: #536a80; background: rgba(237,243,248,.72); font-size: 11px; }
.members-horizontal-scroll-row { display: flex; align-items: center; gap: 10px; padding: 0 24px 7px; color: #8091a2; font-size: 10px; }
.members-horizontal-scroll-row > span { flex: 0 0 auto; white-space: nowrap; }
.members-horizontal-scroll { flex: 1 1 auto; min-width: 0; height: 14px; overflow-x: auto; overflow-y: hidden; border-radius: 999px; scrollbar-color: rgba(83,119,148,.58) rgba(219,228,235,.76); scrollbar-width: auto; }
.members-horizontal-scroll::-webkit-scrollbar { height: 9px; }
.members-horizontal-scroll::-webkit-scrollbar-track { border-radius: 999px; background: rgba(219,228,235,.76); }
.members-horizontal-scroll::-webkit-scrollbar-thumb { border: 2px solid rgba(219,228,235,.76); border-radius: 999px; background: rgba(83,119,148,.58); }
.members-horizontal-scroll > div { height: 1px; }
.data-row { display: grid; grid-template-columns: minmax(190px,1.3fr) minmax(120px,.75fr) minmax(120px,.7fr) minmax(120px,.65fr) minmax(170px,.85fr); align-items: center; gap: 14px; min-height: 66px; padding: 10px 12px; border-bottom: 1px solid rgba(132,153,174,.11); color: #56697e; font-size: 12px; transition: background var(--transition), transform var(--transition); }
.data-row:not(.table-head):hover { border-radius: 15px; background: rgba(255,255,255,.6); transform: translateY(-1px); }
.data-row.table-head { min-height: 42px; color: #8795a5; font-size: 11px; font-weight: 700; }
.members-table .data-row { min-width: 1740px; grid-template-columns: 38px minmax(170px,1.1fr) minmax(175px,1fr) minmax(130px,.8fr) minmax(110px,.7fr) minmax(120px,.75fr) minmax(64px,.4fr) minmax(150px,.9fr) minmax(270px,1.55fr) minmax(100px,.65fr) minmax(205px,1.1fr); }
.certificate-table .data-row { grid-template-columns: minmax(170px,1.2fr) minmax(190px,1.3fr) minmax(140px,.9fr) minmax(175px,1.1fr) minmax(105px,.75fr) minmax(250px,1.6fr); }
.select-cell { display: grid; place-items: center; }
.select-cell input { width: 17px; height: 17px; accent-color: var(--primary); cursor: pointer; }
.member-contact, .member-dates { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.member-company-cell { display: flex; min-width: 0; flex-direction: column; gap: 4px; padding: 4px 6px; }
.member-company-cell b { overflow: hidden; color: #53677c; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.member-company-cell small { overflow: hidden; color: #8a98a8; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.team-leader-warning { display: inline-grid; width: 15px; height: 15px; margin-left: 5px; place-items: center; border-radius: 50%; color: #fff; background: #c56b35; font-size: 9px; font-style: normal; font-weight: 800; vertical-align: -2px; cursor: help; box-shadow: 0 0 0 3px rgba(197,107,53,.1); }
.member-contact b, .member-dates b { overflow: hidden; color: #53677c; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.member-contact small, .member-dates small { overflow: hidden; color: #8a98a8; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.editable-cell { cursor: pointer; border-radius: 9px; transition: color var(--transition), background var(--transition); }
.editable-cell:hover { color: var(--primary-deep); background: rgba(225,236,244,.55); }
.member-age { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.member-age b { color: #53677c; font-size: 12px; }
.member-age small { color: #a74b52; font-size: 9px; font-weight: 700; }
.member-age.age-warning { padding: 5px 7px; background: #fff1e7; }
.member-age.age-warning b { color: #a9572d; }
.warning-count { display: inline-flex; align-items: center; min-height: 23px; margin-left: 8px; padding: 0 8px; border-radius: 8px; color: #a9572d; background: #fff1e7; font-family: "PingFang SC",sans-serif; font-size: 10px; font-weight: 700; vertical-align: middle; }
.member-documents { display: flex; min-width: 0; align-items: center; gap: 5px; }
.member-document-drop { position: relative; display: grid; width: 49px; height: 43px; place-items: center; overflow: hidden; border: 1px dashed rgba(94,119,143,.3); border-radius: 10px; color: #8a98a8; background: #edf3f7; cursor: pointer; text-align: center; }
.member-document-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.member-document-drop img { width: 100%; height: 100%; object-fit: cover; }
.member-document-drop small { display: none; }
.member-document-drop > span:not(.member-photo-uploading) { color: #75889a; font-size: 8px; line-height: 1.2; }
.member-document-drop.dragging { border-color: var(--primary); background: #e4eff6; box-shadow: inset 0 0 0 2px rgba(83,119,148,.12); }
.member-document-drop.uploading { border-color: var(--primary); }
.member-photo-uploading { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; color: #fff; background: rgba(55,83,105,.62); }
.member-documents button, .member-documents i { position: relative; display: grid; width: 49px; height: 43px; place-items: center; overflow: hidden; border: 1px solid rgba(132,153,174,.16); border-radius: 10px; color: #8a98a8; background: #edf3f7; font-size: 9px; font-style: normal; }
.member-documents button { padding: 0; cursor: pointer; }
.member-documents button img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition); }
.member-documents button small { display: none; }
.member-documents button:hover img { transform: scale(1.07); }
.record-title { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 10px; min-width: 0; }
.certificate-person-link { padding: 4px 6px; }
.certificate-person-link:hover b { color: var(--primary-deep); }
.record-title .company-icon { grid-row: 1 / 3; width: 38px; height: 38px; }
.record-title b { overflow: hidden; color: #405469; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.record-title small { overflow: hidden; color: #8a98a8; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.row-actions { display: flex; align-items: center; gap: 7px; }
.members-table .member-actions-heading, .members-table .member-actions { min-width: 205px; padding-left: 12px; border-left: 1px solid rgba(132,153,174,.16); }
.members-table .member-actions-heading { position: relative; grid-column: 11; }
.members-table .member-actions-heading::before { content: "教育交底"; position: absolute; left: -106px; width: 100px; text-align: center; }
.members-table .member-actions { justify-content: flex-start; white-space: nowrap; }
.members-table .entry-training-heading, .members-table .entry-training-cell { text-align: center; }
.members-table .entry-training-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.entry-training-status { min-width: 68px; min-height: 30px; padding: 0 10px; border: 0; border-radius: 10px; font-size: 10px; font-weight: 700; cursor: pointer; transition: transform var(--transition), filter var(--transition); }
.entry-training-status:hover { filter: brightness(.97); transform: translateY(-1px); }
.entry-training-status.completed { color: #2f7a59; background: #e2f3e9; }
.entry-training-status.pending { color: #b64d55; background: #fde7e5; }
.bulk-state-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(132,153,174,.16); }
.bulk-state-actions strong { width: 100%; color: #53677c; font-size: 11px; }
.bulk-state-actions button { min-height: 30px; padding: 0 10px; border: 0; border-radius: 9px; color: #53728e; background: #e8eff4; font-size: 10px; font-weight: 700; cursor: pointer; }
.bulk-state-actions button:hover { background: #dfe9f0; }
.row-actions button { min-height: 32px; padding: 0 9px; border: 0; border-radius: 10px; color: #53728e; background: #e8eff4; font-size: 10px; font-weight: 700; }
.row-actions button:hover { background: #dfe9f0; }
.verification-status { display: inline-flex; align-items: center; gap: 6px; width: max-content; min-height: 27px; padding: 0 9px; border-radius: 9px; font-size: 10px; font-weight: 700; cursor: pointer; transition: transform var(--transition), filter var(--transition); }
.verification-status:hover { filter: brightness(.97); transform: translateY(-1px); }
.verification-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.verification-status.verified { color: #3f8066; background: #e6f3ec; }
.verification-status.failed { color: #b84242; background: #fdecec; }
.verification-status.pending { color: #a47738; background: #fff3df; }
.certificate-expiry { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.certificate-expiry > b { color: #53677c; font-size: 12px; }
.certificate-state { display: inline-flex; align-items: center; gap: 5px; width: max-content; min-height: 22px; padding: 0 7px; border-radius: 7px; font-size: 9px; font-weight: 700; }
.certificate-state i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.certificate-state.normal { color: #3f8066; background: #e6f3ec; }
.certificate-state.expiring { color: #a47738; background: #fff3df; animation: warning-pulse 1.8s ease-in-out infinite; }
.certificate-state.expired { color: #a74b52; background: #f8e5e7; animation: warning-pulse 1.8s ease-in-out infinite; }
.certificate-state.no-expiry { color: #7c8b9d; background: #edf2f5; }
@keyframes warning-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(185,98,24,0); } 50% { box-shadow: 0 0 0 4px rgba(185,98,24,.08); } }
.row-actions .danger-text { color: #a74b52; background: #f7e8e9; }
.certificate-number-cell { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.certificate-number-edit { max-width: 170px; padding: 3px 6px; overflow: hidden; border: 0; border-bottom: 1px dashed rgba(83,119,148,.35); color: #526b83; background: transparent; font: inherit; font-weight: 700; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.certificate-number-edit:hover { color: var(--primary); border-bottom-color: var(--primary); background: #eef5f9; }
.photo-link { margin-right: 7px; padding: 3px 7px; border: 0; border-radius: 7px; color: #52738f; background: #e8eff4; font-size: 10px; }
.avatar-photo { grid-row: 1 / 3; width: 38px; height: 38px; padding: 0; overflow: hidden; border: 0; border-radius: 13px; background: #e6eef4; }
.avatar-photo img { width: 100%; height: 100%; object-fit: cover; }
.certificate-summary { display: flex; gap: 10px; padding: 0 24px 17px; }
.certificate-summary-card { padding: 8px 11px; border: 1px solid transparent; border-radius: 10px; color: #708196; background: #e9eff4; font-size: 11px; cursor: pointer; transition: background var(--transition), border-color var(--transition), transform var(--transition); }
.certificate-summary-card:hover, .certificate-summary-card.active { border-color: rgba(83,119,148,.3); color: #426987; background: #dfeaf2; transform: translateY(-1px); }
.certificate-summary b { margin-left: 4px; color: #41576c; font-size: 13px; }
.clickable-row { cursor: pointer; }
.clickable-row:hover .record-title b { color: var(--primary-deep); }
.company-context { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 13px; margin-bottom: 13px; padding: 16px 18px; border: 1px solid rgba(255,255,255,.82); border-radius: 19px; background: rgba(248,251,253,.72); box-shadow: var(--shadow-card); }
.company-context > button { min-height: 38px; padding: 0 11px; border: 0; border-radius: 11px; color: #58738d; background: #e7eef4; font-size: 11px; font-weight: 700; }
.company-context h2 { margin: 2px 0 3px; color: #344a60; font-size: 18px; }
.company-context small, .company-context p { color: #7b8c9e; font-size: 10px; }
.company-context p { margin: 0; }
.record-modal { width: min(790px,100%); }
.field-editor-modal { width: min(460px,100%); }
.field-hint { margin: 11px 0 0; color: #7d8d9d; font-size: 11px; line-height: 1.6; }
.photo-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.photo-fields-hint { grid-column: 1 / -1; margin: 0; color: #7d8d9d; font-size: 11px; line-height: 1.5; }
.photo-picker { position: relative; display: grid !important; place-items: center; min-height: 150px; padding: 12px; overflow: hidden; border: 1px dashed rgba(94,119,143,.3); border-radius: 17px; color: #687b90 !important; background: rgba(232,239,245,.65); cursor: pointer; text-align: center; }
.photo-picker > span { position: absolute; z-index: 2; left: 11px; top: 9px; padding: 3px 7px; border-radius: 7px; color: #526b83; background: rgba(248,251,253,.9); font-size: 10px; }
.photo-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.photo-picker img { width: 100%; height: 128px; border-radius: 12px; object-fit: contain; background: white; }
.photo-picker b { color: #6f8296; font-size: 12px; }
.photo-picker.dragging { border-color: var(--primary); background: #e4eff6; box-shadow: inset 0 0 0 2px rgba(83,119,148,.12); }
.uploading-overlay { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; gap: 8px; color: #fff; background: rgba(55,83,105,.62); backdrop-filter: blur(3px); font-size: 12px; font-weight: 700; }
.uploading-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; animation: upload-spin .75s linear infinite; }
.uploading-spinner.small { width: 12px; height: 12px; border-width: 2px; vertical-align: -2px; }
@keyframes upload-spin { to { transform: rotate(360deg); } }
.certificate-uploader { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 13px; }
.certificate-photo { min-height: 190px; }
.certificate-photo img { height: 168px; }
.verification-modal { display: flex; width: min(calc(100vw - 44px),1800px); height: min(calc(100vh - 44px),1400px); max-width: none; max-height: calc(100vh - 44px); flex-direction: column; overflow: hidden; }
.verification-body { min-height: 0; padding: 22px 25px 25px; outline: none; overflow-y: auto; }
.verification-info { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.verification-info-item { display: grid; min-width: 0; gap: 8px; padding: 11px; border-radius: 13px; background: #e8eff4; }
.verification-info-item[role="button"] { cursor: pointer; transition: background var(--transition), box-shadow var(--transition), transform var(--transition); }
.verification-info-item[role="button"]:hover, .verification-info-item[role="button"]:focus-visible { background: #f1f6f9; box-shadow: 0 0 0 2px rgba(83,119,148,.14); transform: translateY(-1px); }
.verification-info-item.is-editing { background: #f1f6f9; box-shadow: 0 0 0 2px rgba(83,119,148,.18); }
.verification-info-item > span { display: flex; min-width: 0; flex-direction: column; }
.verification-inline-input { width: 100%; min-width: 0; margin-top: 4px; padding: 3px 5px; border: 1px solid rgba(83,119,148,.52); border-radius: 6px; outline: none; color: #455a70; background: #fff; font: inherit; font-size: 12px; font-weight: 700; box-shadow: 0 0 0 2px rgba(83,119,148,.1); }
.verification-inline-input:disabled { cursor: wait; opacity: .62; }
.verification-inline-error { margin: 9px 0 0; }
.verification-copy-button { justify-self: start; min-height: 25px; padding: 0 9px; border: 1px solid rgba(83,119,148,.2); border-radius: 8px; color: #53728e; background: rgba(255,255,255,.6); font-size: 10px; font-weight: 700; cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); }
.verification-copy-button:hover:not(:disabled) { border-color: rgba(83,119,148,.4); color: #385a76; background: #fff; }
.verification-copy-button:disabled { cursor: wait; opacity: .62; }
.verification-info small { color: #8090a2; font-size: 10px; }
.verification-info strong { overflow: hidden; margin-top: 4px; color: #455a70; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.verification-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.verification-toolbar > strong { color: #536c84; font-size: 12px; }
.verification-edit-hint { color: #8797a7; font-size: 10px; }
.verification-person-editor { margin-top: 10px; padding: 14px; border: 1px solid rgba(132,153,174,.16); border-radius: 15px; background: rgba(237,243,248,.56); }
.verification-person-editor .form-grid { gap: 12px; }
.verification-edit-certificate { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px; border-radius: 13px; background: #e8eff4; }
.verification-edit-certificate > label { flex: 1; min-width: 0; }
.verification-certificate-card { display: grid; grid-template-columns: minmax(0,1fr) 190px; align-items: center; gap: 14px; margin-top: 14px; padding: 13px; border: 1px solid rgba(132,153,174,.16); border-radius: 15px; background: rgba(237,243,248,.56); }
.verification-certificate-card > div:first-child { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.verification-certificate-card strong { color: #455a70; font-size: 13px; }
.verification-certificate-card small { color: #8795a5; font-size: 10px; }
.verification-certificate-image { display: block; width: 190px; height: 145px; padding: 5px; overflow: hidden; border: 1px solid rgba(132,153,174,.16); border-radius: 11px; background: #fff; cursor: zoom-in; }
.verification-certificate-image img { width: 100%; height: 100%; object-fit: contain; }
.verification-empty-certificate { display: grid; place-items: center; width: 190px; height: 145px; border: 1px dashed rgba(132,153,174,.28); border-radius: 11px; color: #91a0af; background: rgba(255,255,255,.55); font-size: 11px; }
.official-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 14px 0; }
.official-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; margin: 0; padding: 12px 14px; border-radius: 13px; color: #426987; background: #e0ebf3; font-size: 12px; font-weight: 700; text-decoration: none; }
.official-link { width: 100%; border: 0; text-align: left; cursor: pointer; }
.official-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.official-link b { flex: 0 0 auto; color: #6f8ca4; font-size: 10px; }
.official-embed { margin: 14px 0; padding: 10px; border: 1px solid rgba(83,119,148,.2); border-radius: 15px; background: #eef4f8; }
.official-embed-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 3px 9px; color: #526d84; font-size: 11px; }
.official-embed-actions { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.official-zoom-controls { display: inline-flex; align-items: center; gap: 4px; padding: 2px; border: 1px solid rgba(83,119,148,.18); border-radius: 9px; background: rgba(255,255,255,.68); }
.official-zoom-controls button { display: grid; place-items: center; min-width: 25px; height: 24px; padding: 0 6px; border: 0; border-radius: 6px; color: #426987; background: transparent; font: inherit; font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer; }
.official-zoom-controls button:hover { background: #e0ebf3; }
.official-zoom-controls .official-zoom-value { min-width: 45px; color: #526d84; font-size: 10px; }
.official-open-new { color: #1769d2; text-decoration: none; }
.official-embed-frame { height: calc(650px * var(--official-scale, 1)); max-width: 100%; overflow-x: hidden; overflow-y: auto; border: 1px solid rgba(83,119,148,.18); border-radius: 10px; background: #fff; }
.official-embed-canvas { width: var(--official-canvas-width, 100%); height: 650px; margin: 0 auto; transform: scale(var(--official-scale, 1)); transform-origin: top center; }
.official-embed iframe { display: block; width: 100%; min-width: 0; height: 650px; border: 0; background: #fff; }
.paste-zone { display: grid; place-items: center; min-height: 240px; overflow: hidden; border: 2px dashed rgba(93,118,141,.25); border-radius: 18px; color: #728397; background: rgba(235,241,246,.65); text-align: center; cursor: pointer; }
.paste-zone:focus-visible { outline: 3px solid rgba(61,113,151,.24); outline-offset: 3px; }
.paste-zone.has-image { border-style: solid; }
.paste-zone img { width: 100%; max-height: 420px; object-fit: contain; }
.paste-zone p { margin: 5px 0 0; font-size: 11px; }
.paste-zone.dragging { border-color: var(--primary); color: #4f718f; background: #e4eff6; box-shadow: inset 0 0 0 2px rgba(83,119,148,.12); }
.paste-zone.uploading { border-color: var(--primary); }
.verification-file-picker { position: relative; margin-top: 10px; cursor: pointer; }
.verification-file-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.verification-check-actions { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.verification-action-hint { display: flex; flex: 1 0 100%; align-items: flex-start; gap: 8px; min-width: 0; padding: 9px 11px; border: 1px solid rgba(22,119,210,.2); border-radius: 10px; color: #52728e; background: #eef7ff; line-height: 1.35; }
.verification-action-hint-icon { display: grid; flex: 0 0 20px; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; background: #1677d2; font-size: 12px; font-weight: 800; }
.verification-action-hint strong { display: block; color: #1f5d91; font-size: 11px; }
.verification-action-hint small { display: block; margin-top: 2px; color: #6f8396; font-size: 10px; }
.verification-check-button { min-width: 122px; border-color: #1677d2; color: #fff; background: #1677d2; box-shadow: 0 6px 14px rgba(22,119,210,.22); font-weight: 800; }
.verification-check-button:hover:not(:disabled) { border-color: #0f62b1; background: #0f62b1; box-shadow: 0 8px 18px rgba(22,119,210,.3); transform: translateY(-1px); }
.verification-check-button:focus-visible { outline: 3px solid rgba(22,119,210,.25); outline-offset: 2px; }
.verification-check-button:disabled { border-color: #dbe5ed; color: #8b9aaa; background: #e6edf3; box-shadow: none; cursor: not-allowed; transform: none; }
.verification-check-result { display: flex; flex: 1 1 260px; min-width: 0; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: 10px; color: #5c6e80; background: #eef3f7; font-size: 10px; line-height: 1.45; }
.verification-check-result strong { color: inherit; font-size: 11px; }
.verification-check-result small { color: #8090a2; font-size: 10px; }
.verification-check-result.is-matched { color: #2c7659; background: #e6f4ec; }
.verification-check-result.is-failed { color: #a0474f; background: #f8e5e7; }
.verification-check-result.is-checking { color: #52728e; background: #e8f0f6; }
.verification-raw-text { margin-top: 8px; color: #647589; font-size: 10px; }
.verification-raw-text summary { cursor: pointer; color: #52728e; font-weight: 700; }
.verification-raw-text pre { max-height: 150px; margin: 6px 0 0; overflow: auto; padding: 8px 10px; border: 1px solid #dbe5ed; border-radius: 8px; background: #f7fafc; color: #506174; white-space: pre-wrap; word-break: break-all; font: inherit; line-height: 1.5; }
.image-viewer { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; overflow: auto; padding: 65px 24px 24px; background: rgba(15,24,32,.9); backdrop-filter: blur(12px); }
.image-viewer > button { position: absolute; right: 24px; top: 20px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 14px; color: white; background: rgba(255,255,255,.12); }
.image-viewer img { max-width: min(1100px,94vw); max-height: 78vh; object-fit: contain; border-radius: 16px; box-shadow: 0 22px 80px rgba(0,0,0,.45); transition: transform 160ms ease-out; transform-origin: center center; }
.image-viewer p { margin: 0; color: #dce5ec; font-size: 13px; }
.image-viewer-gallery { display: flex; align-items: center; justify-content: center; gap: 12px; color: #fff; }
.image-viewer-gallery button { min-height: 35px; padding: 0 14px; border: 0; border-radius: 10px; color: #fff; background: rgba(255,255,255,.14); font-size: 12px; font-weight: 700; cursor: pointer; }
.image-viewer-gallery button:hover { background: rgba(255,255,255,.24); }
.image-viewer-gallery span { min-width: 42px; text-align: center; font-size: 12px; font-weight: 700; }
.image-editor-stage { display: grid; place-items: center; max-width: 94vw; max-height: 68vh; }
.image-editor-canvas { position: relative; overflow: hidden; background: #101820; box-shadow: 0 22px 80px rgba(0,0,0,.45); touch-action: none; }
.image-editor-canvas > img { display: block; width: 100%; height: 100%; max-width: none; max-height: none; border-radius: 0; object-fit: contain; }
.image-crop-box { position: absolute; border: 2px solid #fff; box-shadow: 0 0 0 9999px rgba(0,0,0,.48); cursor: move; touch-action: none; }
.image-crop-handle { position: absolute; width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; background: #426987; touch-action: none; }
.image-crop-handle-nw { left: -8px; top: -8px; cursor: nwse-resize; }
.image-crop-handle-ne { right: -8px; top: -8px; cursor: nesw-resize; }
.image-crop-handle-sw { left: -8px; bottom: -8px; cursor: nesw-resize; }
.image-crop-handle-se { right: -8px; bottom: -8px; cursor: nwse-resize; }
.image-editor-toolbar, .image-viewer-actions { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.image-editor-toolbar button, .image-viewer-actions button { min-height: 35px; padding: 0 13px; border: 0; border-radius: 10px; color: #fff; background: rgba(255,255,255,.14); font-size: 12px; font-weight: 700; cursor: pointer; }
.image-editor-toolbar button:hover, .image-viewer-actions button:hover { background: rgba(255,255,255,.24); }
.image-editor-toolbar button.primary { background: #4e7898; }
.image-editor-toolbar button:disabled, .image-viewer-actions button:disabled { opacity: .5; cursor: not-allowed; }
.image-editor-error { margin-top: 2px !important; }
.auth-screen { min-height: 100vh; display: grid; place-items: center; padding: 28px; background: radial-gradient(circle at 18% 10%, rgba(255,255,255,.95), transparent 31%), linear-gradient(135deg,#eaf1f6,#dce7ee); }
.auth-card { width: min(430px,100%); padding: 38px; border: 1px solid rgba(255,255,255,.92); border-radius: 28px; color: #3f5267; background: rgba(249,252,254,.84); box-shadow: 16px 20px 48px rgba(83,111,135,.2), -10px -10px 25px rgba(255,255,255,.85); }
.auth-card.loading-auth { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; min-height: 190px; }
.auth-card > .brand-mark { display: inline-flex; margin-bottom: 20px; }
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.auth-brand .brand-mark { flex: 0 0 auto; }
.auth-brand strong { display: block; color: #304d66; font-family: "Varela Round","PingFang SC",sans-serif; font-size: 20px; }
.auth-brand small { display: block; margin-top: 3px; color: #8293a4; font-size: 10px; letter-spacing: .1em; }
.auth-card h1 { margin: 8px 0 9px; color: #2d4358; font-family: "Varela Round","PingFang SC",sans-serif; font-size: 28px; }
.auth-intro { margin: 0 0 24px; color: #7a8b9c; font-size: 13px; line-height: 1.7; }
.auth-form { display: grid; gap: 15px; }
.auth-form label { display: grid; gap: 7px; }
.auth-form label > span { color: #62778b; font-size: 11px; font-weight: 700; }
.auth-form input { min-height: 44px; padding: 0 13px; border: 1px solid rgba(127,151,171,.24); border-radius: 13px; outline: 0; color: #40566b; background: rgba(239,245,249,.78); box-shadow: inset 2px 2px 6px rgba(93,114,135,.06); }
.auth-form input:focus { border-color: rgba(83,119,148,.6); box-shadow: 0 0 0 3px rgba(83,119,148,.12); }
.auth-submit { width: 100%; min-height: 45px; margin-top: 4px; }
.auth-hint { display: block; margin-top: 20px; color: #92a0ad; font-size: 10px; line-height: 1.6; }
.profile-logout { cursor: pointer; }
.detail-completeness { display: flex; align-items: center; gap: 10px; min-width: 210px; padding: 9px 13px; border: 1px solid rgba(255,255,255,.8); border-radius: 15px; color: #536b81; background: rgba(239,246,250,.76); box-shadow: inset 2px 2px 5px rgba(93,114,135,.05), 4px 5px 12px rgba(93,114,135,.08); text-align: left; cursor: pointer; }
.detail-completeness:hover { transform: translateY(-1px); }
.detail-completeness > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.detail-completeness strong { font-size: 12px; }
.detail-completeness small { color: #8999a8; font-size: 10px; }
.completeness-ring { display: grid; place-items: center; width: 42px; height: 42px; border: 4px solid #dbe8ef; border-top-color: #587b98; border-right-color: #80a5ba; border-radius: 50%; }
.completeness-ring b { color: #3e617b; font-size: 13px; line-height: 1; }
.completeness-ring small { margin-left: 1px; color: #7690a2; font-size: 8px; }
.integrity-badge { display: inline-flex; align-items: center; margin-left: 6px; padding: 2px 5px; border-radius: 5px; color: #a45f2f; background: #fff0e3; font-size: 9px; font-style: normal; font-weight: 700; vertical-align: 1px; }
.alert-modal { width: min(720px,100%); }
.alert-center-body { padding: 20px 24px 25px; }
.alert-summary-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; color: #738598; font-size: 11px; }
.alert-summary-row > span { min-height: 27px; padding: 6px 9px; border-radius: 8px; background: #e8eff4; }
.alert-summary-row select { min-height: 30px; margin-left: auto; padding: 0 9px; border: 1px solid rgba(127,151,171,.2); border-radius: 8px; color: #5b7185; background: #f4f8fa; font-size: 10px; }
.alert-summary-row .alert-critical { color: #a44b52; background: #f8e5e7; }
.alert-summary-row .alert-high { color: #a45f2f; background: #fff0e3; }
.alert-summary-row .alert-medium { color: #8e713a; background: #fff4dc; }
.alert-list { display: grid; gap: 8px; max-height: 54vh; overflow: auto; padding: 2px; }
.alert-item { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 12px; width: 100%; padding: 13px 12px; border: 1px solid rgba(129,151,171,.12); border-radius: 13px; color: #51677b; background: rgba(240,246,249,.74); text-align: left; cursor: pointer; transition: transform var(--transition), background var(--transition); }
.alert-item:hover { transform: translateY(-1px); background: #f8fbfc; }
.alert-dot { width: 9px; height: 9px; border-radius: 50%; background: #99a8b5; }
.alert-dot.critical { background: #b04f5a; box-shadow: 0 0 0 4px rgba(176,79,90,.1); }
.alert-dot.high { background: #c27a3d; }
.alert-dot.medium { background: #bd9a51; }
.alert-dot.low { background: #7d9caf; }
.alert-item-main { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.alert-item-main strong { overflow: hidden; color: #485f74; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.alert-item-main small { overflow: hidden; color: #8494a3; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.alert-entity { display: flex; flex-direction: column; gap: 4px; color: #8b9aa7; font-size: 9px; text-align: right; }
.alert-entity b { color: #4f7592; font-size: 10px; }
.certificate-table .data-row { grid-template-columns: 38px minmax(170px,1.2fr) minmax(190px,1.3fr) minmax(140px,.9fr) minmax(175px,1.1fr) minmax(105px,.75fr) minmax(250px,1.6fr); }

.account-modal { width: min(860px, 100%); }
.account-tabs { display: flex; gap: 8px; padding: 14px 26px 0; border-bottom: 1px solid rgba(132,153,174,.13); }
.account-tabs button { min-height: 38px; padding: 0 14px; border: 0; border-radius: 11px 11px 0 0; color: #7d8da0; background: transparent; font-size: 12px; font-weight: 800; }
.account-tabs button.active { color: #365d7e; background: #e7eff5; }
.account-tabs button b { margin-left: 5px; color: #a84b21; }
.account-body { padding: 24px 26px 28px; }
.account-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin: 4px 0 14px; padding-top: 17px; border-top: 1px solid rgba(132,153,174,.13); }
.account-section-heading strong, .account-list-heading strong { color: #3e5268; font-size: 14px; }
.account-section-heading small, .account-list-heading small { color: #8190a0; font-size: 11px; }
.account-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.account-list-heading > div { display: flex; flex-direction: column; gap: 4px; }
.account-list { display: grid; gap: 8px; }
.account-row { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 8px 10px; border: 1px solid rgba(132,153,174,.13); border-radius: 15px; background: rgba(255,255,255,.62); }
.small-avatar { width: 32px; height: 32px; border-radius: 11px; font-size: 12px; }
.account-row-main { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.account-row-main strong { overflow: hidden; color: #3e5268; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.account-row-main small { margin-top: 3px; color: #8594a4; font-size: 11px; }
.account-row .status-pill { min-width: auto; min-height: 26px; font-size: 10px; }
.account-project-note { margin: 16px 0; padding: 12px 14px; border: 1px solid rgba(77,111,151,.16); border-radius: 13px; color: #53708b; background: #edf4f9; font-size: 12px; }
.account-project-picker { margin-top: 16px; }
.account-project-picker .account-section-heading { margin-top: 0; }
.account-project-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; max-height: 210px; overflow: auto; padding: 2px; }
.account-project-option { display: flex; align-items: flex-start; gap: 9px; min-width: 0; padding: 11px 12px; border: 1px solid rgba(132,153,174,.15); border-radius: 13px; background: rgba(255,255,255,.64); cursor: pointer; }
.account-project-option:has(input:checked) { border-color: rgba(77,111,151,.45); background: #edf4f9; box-shadow: 0 4px 12px rgba(75,105,128,.08); }
.account-project-option input { flex: 0 0 auto; margin-top: 2px; accent-color: #4d6f97; }
.account-project-option span { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.account-project-option strong { overflow: hidden; color: #40546a; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.account-project-option small { overflow: hidden; color: #8795a3; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.import-preview-modal { width: min(1080px, 100%); }
.import-preview-body { padding: 22px 26px 26px; }
.import-progress { margin-bottom: 16px; padding: 13px 15px; border: 1px solid rgba(75,111,151,.17); border-radius: 14px; background: rgba(237,245,251,.82); }
.import-progress-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #48647e; font-size: 11px; }
.import-progress-top span { color: #1769d2; font-variant-numeric: tabular-nums; font-weight: 800; }
.import-progress-track { height: 8px; margin-top: 9px; overflow: hidden; border-radius: 999px; background: #d8e5f0; }
.import-progress-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#4d86c5,#71b7a0); box-shadow: 0 2px 8px rgba(53,105,157,.2); transition: width .25s ease; }
.import-progress small { display: block; margin-top: 7px; color: #8495a5; font-size: 10px; }
.import-safety-tag { display: inline-block; margin-left: 5px; padding: 2px 5px; border-radius: 5px; color: #387b68; background: #e5f3ed; font-size: 9px; font-style: normal; font-weight: 700; }
.import-summary-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; }
.import-summary-grid span, .import-summary-grid button { display: flex; flex-direction: column; gap: 3px; padding: 13px 14px; border: 1px solid rgba(132,153,174,.13); border-radius: 14px; background: rgba(255,255,255,.6); }
.import-summary-grid button { width: 100%; color: inherit; text-align: left; cursor: pointer; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease; }
.import-summary-grid button:hover, .import-summary-grid button:focus-visible { border-color: rgba(77,111,151,.42); background: rgba(237,245,251,.9); box-shadow: 0 5px 14px rgba(75,105,128,.1); transform: translateY(-1px); outline: none; }
.import-summary-grid button.active { border-color: #4d6f97; background: #e8f1f8; box-shadow: 0 0 0 2px rgba(77,111,151,.12), 0 6px 16px rgba(75,105,128,.12); }
.import-summary-grid b { color: #365d7e; font-size: 21px; font-variant-numeric: tabular-nums; }
.import-summary-grid small { color: #8090a1; font-size: 11px; }
.import-preview-filter-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 9px 12px; border: 1px solid rgba(77,111,151,.18); border-radius: 10px; background: #edf5fb; color: #59718a; font-size: 11px; }
.import-preview-filter-bar strong { color: #365d7e; }
.import-filter-empty { margin-top: 15px; }
.import-error-summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; padding: 12px 14px; border: 1px solid #f0d3b5; border-radius: 14px; background: #fff7ed; color: #7d6a58; }
.import-error-summary > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.import-error-summary strong { color: #a75d25; font-size: 12px; }
.import-error-summary span { color: #9a8069; font-size: 11px; }
.import-failure-banner { align-items: center; border-color: #edb1a9; background: linear-gradient(135deg,#fff0ee,#fff8f1); box-shadow: 0 8px 22px rgba(189,85,65,.08); }
.import-failure-mark { display: grid; flex: 0 0 auto; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; background: #d85748; font-size: 17px; font-weight: 900; }
.import-bulk-controls { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; padding: 12px 14px; border: 1px solid rgba(75,111,151,.16); border-radius: 14px; background: rgba(237,245,251,.68); }
.import-bulk-heading { display: flex; align-items: baseline; gap: 9px; color: #405f7a; }
.import-bulk-heading small { color: #8292a2; font-size: 10px; }
.import-bulk-group { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; color: #61778b; font-size: 11px; }
.import-bulk-group > span { font-weight: 700; }
.import-bulk-group > span b { color: #365d7e; font-size: 14px; }
.import-bulk-group label { display: inline-flex; align-items: center; gap: 6px; }
.import-bulk-group input, .import-bulk-group select { min-width: 110px; padding: 5px 7px; border: 1px solid rgba(132,153,174,.32); border-radius: 7px; color: #40546a; background: #fff; font-size: 10px; }
.import-update-checkboxes { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 12px; margin: 0; padding: 7px 10px; border: 1px solid rgba(90,126,159,.24); border-radius: 9px; background: rgba(255,255,255,.62); }
.import-update-checkboxes legend { padding: 0 5px; color: #526b82; font-size: 10px; font-weight: 700; }
.import-update-checkboxes label { cursor: pointer; font-weight: 700; }
.import-update-checkboxes input[type="checkbox"] { min-width: 0; width: 15px; height: 15px; margin: 0; accent-color: #2f75b5; }
.import-failure-banner strong { color: #b23c30; font-size: 13px; }
.import-failure-banner span:not(.import-failure-mark) { color: #8c625d; }
.import-failure-result { margin-top: 12px; }
.text-button { flex: 0 0 auto; border: 0; color: #1769d2; background: transparent; font-size: 11px; font-weight: 800; cursor: pointer; }
.text-button:hover { text-decoration: underline; }
.import-preview-table { max-height: min(48vh, 520px); overflow: auto; margin-top: 15px; border: 1px solid rgba(132,153,174,.16); border-radius: 15px; background: rgba(255,255,255,.54); }
.import-preview-row { display: grid; grid-template-columns: 56px minmax(150px,1.2fr) minmax(150px,1.1fr) 110px minmax(220px,1.6fr) minmax(160px,1fr); align-items: center; gap: 12px; min-height: 52px; padding: 8px 13px; border-bottom: 1px solid rgba(132,153,174,.1); color: #52667b; font-size: 12px; }
.import-preview-row:last-child { border-bottom: 0; }
.import-preview-head { position: sticky; top: 0; z-index: 1; min-height: 38px; color: #7a8a9a; background: #edf3f8; font-size: 11px; font-weight: 800; }
.import-preview-row span:nth-child(2), .import-preview-row span:nth-child(6) { display: flex; flex-direction: column; min-width: 0; }
.import-preview-row strong { overflow: hidden; color: #40546a; text-overflow: ellipsis; white-space: nowrap; }
.import-preview-row small { margin-top: 3px; overflow: hidden; color: #8a98a7; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.import-action, .import-ok, .import-warning, .import-error { display: inline-block; max-width: 100%; overflow: hidden; font-size: 11px; font-style: normal; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.import-action.create { color: #2b765d; }.import-action.update { color: #4d6f97; }.import-action.duplicate { color: #a86221; }.import-action.skip { color: #8a98a7; }.import-action.blocked { color: #b3464f; }
.import-change-summary { display: block; margin-top: 3px; color: #527697; font-size: 10px; line-height: 1.35; white-space: normal; }
.import-ok { color: #2b765d; }.import-warning { color: #a86221; }.import-error { color: #b3464f; }
.import-update-choice { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; padding: 7px 8px; border: 1px solid rgba(75,111,151,.16); border-radius: 9px; background: rgba(237,245,251,.72); }
.import-update-choice strong { color: #405f7a; font-size: 11px; }
.import-update-choice small { white-space: normal; }
.import-result-card { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid #cce8da; border-radius: 17px; background: #edf8f2; }
.import-result-icon { display: grid; flex: 0 0 auto; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: white; background: #2b765d; font-size: 23px; }
.import-result-card strong { color: #2b765d; font-size: 16px; }.import-result-card p { margin: 5px 0 0; color: #5e7e70; font-size: 12px; }.import-result-card small { display: block; margin-top: 4px; color: #7e9c8e; font-size: 11px; }
.import-result-card.has-import-failures { border-color: #f0d3b5; background: #fff7ed; }
.import-result-card.has-import-failures .import-result-icon { background: #b86b2b; }
.import-result-card.has-import-failures strong { color: #a75d25; }
.import-result-card.has-import-failures p { color: #896d53; }
.import-failure-list { max-height: min(34vh, 330px); overflow: auto; margin-top: 15px; padding: 13px; border: 1px solid #f0d3b5; border-radius: 15px; background: #fffaf4; }
.import-failure-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 3px 8px; color: #a75d25; }
.import-failure-heading strong { font-size: 13px; }
.import-failure-heading small { color: #9a8069; font-size: 10px; }
.import-failure-row { display: grid; grid-template-columns: 65px minmax(90px,.7fr) minmax(140px,1fr) minmax(180px,1.5fr); align-items: center; gap: 9px; min-height: 38px; padding: 7px 3px; border-top: 1px solid rgba(224,177,129,.2); color: #7d6a58; font-size: 11px; }
.import-failure-row strong { overflow: hidden; color: #6f513a; text-overflow: ellipsis; white-space: nowrap; }
.import-failure-row small, .import-failure-row em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.import-failure-row em { color: #b3464f; font-style: normal; }
.import-update-list { max-height: min(28vh, 280px); overflow: auto; margin-top: 15px; padding: 13px; border: 1px solid #cbdceb; border-radius: 15px; background: #f5f9fc; }
.import-update-list .import-failure-heading { color: #527697; }
.import-update-row { display: grid; grid-template-columns: 65px minmax(90px,.7fr) minmax(140px,1fr) minmax(180px,1.5fr); align-items: center; gap: 9px; min-height: 38px; padding: 7px 3px; border-top: 1px solid rgba(132,153,174,.18); color: #6f8396; font-size: 11px; }
.import-update-row strong { overflow: hidden; color: #405f7a; text-overflow: ellipsis; white-space: nowrap; }
.import-update-row small, .import-update-row em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.import-update-row em { color: #527697; font-style: normal; font-weight: 700; }

@media (max-width: 1180px) {
  .stats { grid-template-columns: repeat(2,1fr); }
  .project-card { grid-template-columns: minmax(230px,1.2fr) minmax(300px,1.6fr) auto; }
  .progress-block { display: none; }
  .project-meta { grid-template-columns: repeat(3,1fr); }
  .detail-stats { grid-template-columns: repeat(2,1fr); }
  .data-row { min-width: 850px; }
  .certificate-table .data-row { min-width: 1120px; }
}

@media (max-width: 860px) {
  .sidebar { transform: translateX(-105%); transition: transform var(--transition); }
  .sidebar.open { transform: translateX(0); }
  .mobile-scrim { position: fixed; inset: 0; z-index: 29; display: block; visibility: hidden; opacity: 0; background: rgba(48,64,80,.3); backdrop-filter: blur(3px); transition: opacity var(--transition), visibility var(--transition); }
  .mobile-scrim.visible { visibility: visible; opacity: 1; }
  main { margin-left: 0; }
  .mobile-menu { display: grid; }
  .topbar { gap: 12px; padding: 0 20px; }
  .global-search { width: 100%; }
  .today { display: none; }
  .content { padding: 28px 20px; }
  .project-card { grid-template-columns: 1fr auto; }
  .project-meta { grid-column: 1 / -1; grid-row: 2; }
  .status-pill { grid-column: 2; grid-row: 1; }
  .detail-link { grid-column: 2; grid-row: 2; justify-self: end; }
  .detail-grid { grid-template-columns: 1fr; }
  .safety-summary { display: none; }
  .responsive-heading { align-items: flex-start; gap: 14px; flex-direction: column; }
  .detail-completeness { width: 100%; }
}

@media (max-width: 600px) {
  .topbar { min-height: 66px; padding: 0 14px; }
  .topbar-actions { gap: 8px; }
  .notification { display: none; }
  .global-search kbd { display: none; }
  .content { padding: 23px 14px 36px; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .page-heading .primary { width: 100%; }
  .stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stats article { min-height: 132px; padding: 17px; border-radius: 21px; }
  .stats article strong { font-size: 27px; }
  .panel-heading { padding: 20px 18px 15px; }
  .filters { align-items: stretch; flex-wrap: wrap; padding: 13px 18px; }
  .search-field { width: 100%; }
  .filters select { flex: 1; width: auto; }
  .result-count { width: 100%; margin: 0; }
  .project-list { padding: 6px 9px 12px; }
  .project-card { gap: 12px; padding: 14px 10px; }
  .project-meta { grid-template-columns: 1fr 1fr; padding-left: 58px; }
  .project-meta span:nth-child(2) { display: none; }
  .project-identity h3 { max-width: 170px; }
  .detail-link { display: none; }
  .detail-hero { align-items: flex-start; flex-direction: column; gap: 24px; padding: 24px 19px; }
  .detail-title { align-items: flex-start; gap: 11px; }
  .detail-project-icon { width: 52px; height: 52px; border-radius: 17px; }
  .detail-title h1 { font-size: 23px; }
  .detail-hero > .primary { width: 100%; }
  .detail-hero-actions { align-items: stretch; flex-wrap: wrap; width: 100%; }
  .detail-hero-actions > * { flex: 1 1 auto; }
  .detail-completeness { width: 100%; }
  .detail-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .detail-stats article { min-height: 105px; padding: 16px; }
  .company-list article { grid-template-columns: auto 1fr auto; }
  .company-list article > span:not(.company-icon) { display: none; }
  .workspace-tabs { margin-inline: -2px; }
  .workspace-tabs button { padding-inline: 12px; }
  .workspace-filters { width: auto; margin-inline: 18px; }
  .workspace-search { flex: 1 1 100%; }
  .team-filter { flex: 1 1 100%; justify-content: space-between; }
  .heading-actions { align-items: stretch; flex-wrap: wrap; width: 100%; }
  .heading-actions > * { flex: 1 1 auto; }
  .table-controls { justify-content: flex-start; flex-wrap: wrap; padding-inline: 18px; }
  .certificate-summary { flex-wrap: wrap; padding-inline: 18px; }
  .photo-fields { grid-template-columns: 1fr; }
  .certificate-uploader { grid-template-columns: 1fr; }
  .verification-info { grid-template-columns: 1fr; }
  .verification-certificate-card { grid-template-columns: 1fr; }
  .official-links { grid-template-columns: 1fr; }
  .verification-certificate-image, .verification-empty-certificate { width: 100%; height: 180px; }
  .paste-zone { min-height: 190px; }
  .modal-backdrop { align-items: end; padding: 0; }
  .modal { max-height: 92vh; border-radius: 26px 26px 0 0; }
  .verification-modal { width: 100%; height: 92vh; max-height: 92vh; }
  .modal-heading { padding: 20px 18px 17px; }
  .modal-heading p { display: none; }
  .modal form { padding: 19px 18px 24px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .wide { grid-column: auto; }
  .modal-actions > button { flex: 1; }
  .account-project-grid { grid-template-columns: 1fr; }
  .import-failure-row, .import-update-row { grid-template-columns: 55px minmax(85px,.7fr) minmax(130px,1fr) minmax(170px,1.4fr); }
  .import-preview-body { padding: 14px 14px 18px; }
  .import-summary-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
  .import-summary-grid span { padding: 11px 12px; }
  .import-summary-grid span:last-child, .import-summary-grid button:last-child { grid-column: 1 / -1; }
  .import-error-summary { align-items: flex-start; flex-direction: column; gap: 9px; }
  .import-error-summary .text-button { align-self: flex-start; }
  .import-preview-table { max-height: none; overflow: visible; border: 0; background: transparent; }
  .import-preview-row.import-preview-head { display: none; }
  .import-preview-row { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 12px; min-height: 0; margin-top: 10px; padding: 12px; border: 1px solid rgba(132,153,174,.16); border-radius: 14px; background: rgba(255,255,255,.64); font-size: 11px; }
  .import-preview-row > span { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
  .import-preview-row > span::before { content: attr(data-label); color: #7a8a9a; font-size: 10px; font-weight: 800; }
  .import-preview-row strong, .import-preview-row small, .import-action, .import-ok, .import-warning, .import-error { overflow: visible; text-overflow: clip; white-space: normal; }
  .import-preview-row > span:nth-child(6) { grid-column: 1 / -1; padding-top: 6px; border-top: 1px solid rgba(224,177,129,.2); }
  .import-preview-row > span:nth-child(6)::before { color: #a75d25; }
}

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