/* Review-driven layout refinements, scoped to the management app. */
.app-shell {
  --nav-bg: var(--bg);
  --nav-text: #374151;
  --nav-muted: #6B7280;
  --nav-line: var(--line);
  --nav-hover: #EDF1F4;
  --nav-active: #E3F6E9;
}
.app-shell .sidebar { border-right-color: var(--nav-line); }
.app-shell .logo-row { border-bottom-color: var(--nav-line); }
.app-shell .logo-row { height: 82px; padding: 0 10px; align-items: center; justify-content: center; }
.app-shell .logo-row .brand-logo { display: block; width: 100%; height: auto; max-width: 220px; max-height: 48px; object-fit: contain; }
.app-shell .nav-group-label { color: #A8BBD0; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; }
.app-shell .nav-group-system { margin-top: 12px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08); }
.app-shell .nav-item { border-left: 3px solid transparent; border-radius: 0 10px 10px 0; }
.app-shell .nav-item .nav-icon { width: 26px; height: 26px; border-radius: 7px; background: rgba(255,255,255,.06); display: grid; place-items: center; flex: 0 0 auto; }
.app-shell .nav-item .nav-icon svg { width: 15px; height: 15px; }
.app-shell .nav-item.active .nav-icon { background: #D4F1DE; }
.app-shell .nav-item:hover { color: var(--ink); }
.app-shell .nav-item.active,
.app-shell .nav-item-primary.active { color: #07954A; background: #E3F6E9; border-left-color: #16A34A; }
.app-shell .nav-item.active svg { color: #07954A; }
.app-shell .nav-item-primary { margin: 10px 10px 8px; border: 1px solid rgba(255,255,255,.12); border-left: 3px solid transparent; border-radius: 10px; background: rgba(255,255,255,.06); color: #F1F5F9; }
.app-shell .nav-primary-arrow { margin-left: auto; font-size: 21px; line-height: 1; color: #93C5FD; }
.app-shell .nav-item-primary:hover { background: var(--nav-hover); color: #fff; }
.app-shell .nav-item-primary.active { border-color: transparent; border-left-color: #16A34A; background: #E3F6E9; }
.app-shell .nav-item:focus-visible,
.app-shell button:focus-visible,
.app-shell a:focus-visible { outline: 2px solid #84B8FF; outline-offset: 2px; }
.app-shell .nav-count { margin-left: auto; min-width: 20px; padding: 2px 6px; border-radius: 999px; background: #D93F3F; color: #fff; font-size: 10.5px; font-weight: 700; text-align: center; }
.app-shell .nav-count-neutral { background: rgba(255,255,255,.13); color: #DCE8F8; }
.app-shell .nav-pending-label { margin-left: auto; color: var(--nav-muted); font-size: 10px; white-space: nowrap; }
.app-shell .nav-pending-label + .nav-count { margin-left: 4px; }
.app-shell .user-block { border-top-color: var(--nav-line); }
.app-shell .user-block { cursor: pointer; }
.app-shell .user-block:hover { background: var(--nav-hover); }
.app-shell .user-name { color: #F5F9FF; }
.app-shell .user-role { color: var(--nav-muted); }
.app-shell .user-role { display: flex; align-items: center; gap: 5px; }
.app-shell .user-online-dot { width: 5px; height: 5px; border-radius: 50%; background: #0E9F6E; }
.app-shell .user-chevron { margin-left: auto; color: #9FB5CF; font-size: 18px; }
.app-shell .header { height: 64px; background: var(--surface); border-bottom-color: var(--line); }
.app-shell .page-crumb { color: var(--ink); }
.app-shell .content { background: var(--bg); }
.app-shell .cc-page-header { min-height: 64px; margin-bottom: 8px; align-items: center; }
.app-shell .page-title { color: var(--ink); font-size: 22px; font-weight: 600; }
.app-shell .page-title::before { width: 3px; height: 23px; }
.app-shell .page-subtitle { font-size: 13px; }
.app-shell .cc-detail-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 24px; padding: 0; }
.app-shell .cc-detail-heading strong { font-size: 22px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.app-shell .cc-detail-heading strong::before { content: ''; display: block; width: 3px; height: 23px; border-radius: 2px; background: var(--brand); }
.app-shell .cc-detail-heading small { color: var(--muted); font-size: 13px; }
.app-shell .cc-workspace-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0 0 24px; }
.app-shell .cc-detail-stat { display: flex; flex-direction: column; gap: 6px; min-height: 102px; padding: 16px; border: 1px solid var(--line); border-left-width: 3px; border-radius: 10px; background: var(--surface); color: var(--muted); font-size: 12px; }
.app-shell .cc-detail-stat strong { color: var(--ink); font-size: 28px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.app-shell .cc-detail-stat small { color: var(--muted); }
.app-shell .cc-card-statuses { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.app-shell .cc-status, .app-shell .cc-due { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 9px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.app-shell .cc-status i, .app-shell .cc-due i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.app-shell .cc-status-success { color: #0B7D56; background: #E7F6F0; }
.app-shell .cc-status-warning { color: #965900; background: #FDF3E3; }
.app-shell .cc-status-danger { color: #B4232A; background: #FDEEEE; }
.app-shell .cc-status-brand { color: #1D4ED8; background: #EEF3FF; }
.app-shell .cc-status-neutral { color: #626D7C; background: #F0F1F3; }
.app-shell[data-theme="dark"] .cc-status-success { color: #7EDBB6; background: #103B2E; }
.app-shell[data-theme="dark"] .cc-status-warning { color: #FFD78A; background: #493417; }
.app-shell[data-theme="dark"] .cc-status-danger { color: #FFACB4; background: #4B2429; }
.app-shell[data-theme="dark"] .cc-status-brand { color: #A3C6FF; background: #1C3B63; }
.app-shell[data-theme="dark"] .cc-status-neutral { color: #AEBED2; background: #293D55; }
.app-shell .cc-task-progress { width: 100%; height: 7px; accent-color: #1D4ED8; }
.app-shell .cc-upload-zone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 138px; margin-top: 12px; padding: 20px; border: 2px dashed var(--tint-200); border-radius: 12px; background: var(--tint-50); color: var(--ink); text-align: center; cursor: pointer; }
.app-shell .cc-upload-zone.dragover, .app-shell .cc-upload-zone:hover { border-color: var(--brand); background: var(--tint-100); }
.app-shell .cc-upload-zone > span { color: var(--brand); font-size: 30px; line-height: 1; }
.app-shell .cc-upload-zone small { color: var(--muted); font-size: 12px; }
.app-shell .cc-upload-zone input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.app-shell .cc-upload-zone:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.app-shell .cc-empty-state { min-height: 160px; padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--muted); text-align: center; }
.app-shell .cc-empty-state strong { color: var(--ink); font-size: 15px; }
.app-shell .cc-empty-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--tint-50); color: var(--brand); font-size: 24px; }
.app-shell .cc-workflow-pager .btn.active { color: #fff; background: #1D4ED8; border-color: #1D4ED8; }
.app-shell .cc-workflow-filters [data-workflow-reset], .app-shell .cc-task-filters [data-task-reset] { border: 0; background: transparent; padding: 0 6px; }
.app-shell .pill-frozen::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #8A909B; margin-right: 5px; vertical-align: middle; }
.app-shell .pill-active .d { background: #0E9F6E; }
.app-shell .cc-field:has([required]) > span::after,
.modal-root .cc-field:has([required]) > span::after,
.app-shell .modal-form-row label:has([required]) > span::after { content: ' *'; color: #D93F3F; font-weight: 700; }
.app-shell .cc-field .was-touched:invalid,
.modal-root .cc-field .was-touched:invalid { border-color: #D93F3F; }
.app-shell .field-error,
.modal-root .field-error { margin-top: 3px; color: #B4232A; font-size: 11.5px; }
/* 账号管理操作按钮（2026-10-08 改为「图标 + 文字」）：
   原为 31×31 纯图标按钮，现按内容自适应宽度。
   ⚠️ 本文件在 styles.css 之后加载，此处的 .app-shell 前缀优先级更高 ——
   改 cc-icon-action 的尺寸必须改这里，只改 styles.css 不生效。 */
.app-shell .cc-icon-action { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 5px; min-width: 31px; height: 31px; padding: 0 10px; font-size: 12.5px; white-space: nowrap; }
.app-shell .cc-icon-action.cc-positive { color: #0B7D56; }
.app-shell .cc-icon-action.cc-warning { color: #965900; }
.app-shell .cc-icon-action.cc-danger { color: #B4232A; }
.app-shell #pwdForm .modal-form-row label:has([required]) > span::after { content: ' *'; color: #D93F3F; font-weight: 700; }
.app-shell .cc-region-card { margin-bottom: 18px; padding: 18px; }
.app-shell .cc-region-card .card-subtitle { margin: 4px 0 16px; }
.app-shell .cc-region-row { display: grid; grid-template-columns: minmax(100px, 170px) minmax(80px, 1fr) 34px; align-items: center; gap: 12px; margin: 11px 0; font-size: 13px; color: var(--ink); }
.app-shell .cc-region-row strong { font-variant-numeric: tabular-nums; text-align: right; }
.app-shell .cc-region-track { height: 9px; border-radius: 99px; background: var(--tint-100); overflow: hidden; }
.app-shell .cc-region-track i { display: block; height: 100%; border-radius: 99px; background: var(--brand); }
.app-shell .cc-form-grid > .cc-wide:has(> button[type="submit"]),
.app-shell .cc-form-grid > div:has(> button.btn-primary) { display: flex; justify-content: flex-end; }
.app-shell .cc-page-header time { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.app-shell .cc-overview { margin-top: 8px; }
.app-shell .cc-overview-grid { gap: 16px; }
.app-shell .cc-overview-card { min-height: 118px; gap: 9px; padding: 16px; border-radius: 14px; background: var(--surface); color: var(--muted); }
.app-shell .cc-overview-card strong { font-size: 28px; line-height: 1.1; font-weight: 600; font-variant-numeric: tabular-nums; }
.app-shell .cc-overview-card small { color: var(--brand); font-weight: 600; }
.app-shell .cc-tone-warning { border-top: 3px solid #C2760A; }
.app-shell .cc-tone-brand { border-top: 3px solid #1D4ED8; }
.app-shell .cc-tone-danger { border-top: 3px solid #D93F3F; }
.app-shell .cc-tone-neutral { border-top: 3px solid #8A909B; }
.app-shell .cc-tone-success { border-top: 3px solid #0E9F6E; }
.app-shell .cc-tone-success strong, .app-shell .cc-tone-success small { color: var(--ok-ink); }
.app-shell .cc-tone-error { border-top: 3px solid #D93F3F; }
.app-shell .cc-tone-error strong, .app-shell .cc-tone-error small { color: var(--danger-ink); }
.app-shell .cc-announcement-ticker { margin: 16px 0 24px; border-color: var(--line); border-left: 3px solid #1D4ED8; background: var(--surface); color: var(--ink); }
.app-shell .cc-announcement-ticker button { color: var(--brand); }
.app-shell .cc-announcement-ticker:focus-within .cc-ticker-content { animation-play-state: paused; }
.app-shell .cc-dashboard-grid { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 24px; }
.app-shell .cc-dashboard-panel { min-height: 0; padding: 16px; background: var(--surface); }
.app-shell .cc-dashboard-panel h3 { margin-bottom: 12px; }
.app-shell .cc-actions-panel { grid-column: 1 / -1; }
.app-shell .cc-quick-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.app-shell .cc-quick-actions button { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 12px; border-color: var(--line); background: var(--surface); color: var(--ink); font-weight: 600; white-space: normal; }
.app-shell .cc-quick-actions button:hover { border-color: var(--brand); background: var(--tint-50); }
.app-shell .cc-quick-actions button > span:first-child { color: var(--brand); font-size: 20px; }
.app-shell .cc-quick-actions button b { margin-left: auto; color: var(--brand); }
.app-shell .cc-dashboard-list { gap: 0; }
.app-shell .cc-dashboard-list button { align-items: center; min-height: 48px; padding: 8px 0; }
.app-shell .cc-dashboard-list button > span:first-child { display: grid; gap: 3px; min-width: 0; white-space: normal; }
.app-shell .cc-dashboard-list button > span:first-child strong { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-shell .cc-dashboard-list em { color: var(--brand); font-size: 11px; font-style: normal; }
.app-shell .cc-dashboard-list small { color: var(--muted); font-size: 11px; }
.app-shell .cc-list-status { flex: 0 0 auto; color: var(--brand); font-size: 12px; }
.app-shell .cc-count-badge { flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; background: var(--tint-100); color: var(--brand); font-size: 12px; }
.app-shell .cc-loading { padding: 24px; }
.app-shell .cc-home-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; min-height:112px; margin:0 0 12px; padding:10px 2px 16px; }
.app-shell .cc-home-hero { position:relative; overflow:hidden; min-height:144px; margin:0 0 16px; padding:24px 28px; border:1px solid #dfeafb; border-radius:16px; background:linear-gradient(100deg, #f7fbff 0%, #e8f5ff 53%, rgba(230,245,255,.62) 100%); }
.app-shell .cc-home-hero::after { content:''; position:absolute; z-index:0; right:-18px; bottom:-54px; width:47%; height:168px; opacity:.85; background:linear-gradient(143deg, transparent 0 35%, rgba(30,113,210,.18) 35.4% 38%, transparent 38.4% 51%, rgba(30,113,210,.16) 51.4% 54%, transparent 54.4%), linear-gradient(32deg, rgba(18,117,198,.17) 1px, transparent 1px); background-size:auto, 24px 20px; transform:skewX(-16deg); pointer-events:none; }
.app-shell .cc-home-hero::before { content:'☀'; position:absolute; z-index:0; right:33%; top:19px; color:#f6b31a; font-size:42px; opacity:.92; }
.app-shell .cc-home-hero-copy, .app-shell .cc-home-date { position:relative; z-index:1; }
.app-shell .cc-home-eyebrow { margin-bottom:8px; color:var(--brand); font-size:10px; font-weight:700; letter-spacing:.12em; }
.app-shell .cc-home-hero h1 { margin:0; color:var(--ink); font-size:26px; line-height:1.25; font-weight:700; letter-spacing:-.02em; }
.app-shell .cc-home-hero p { margin:7px 0 0; color:var(--muted); font-size:14px; }
.app-shell .cc-home-date { display:grid; gap:8px; max-width:360px; color:var(--muted); font-size:12px; text-align:right; }
.app-shell .cc-home-date strong { color:#244A78; font-family:'Noto Sans SC','PingFang SC',sans-serif; font-size:15px; font-weight:600; }
.app-shell .cc-admin-home .cc-overview-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.app-shell .cc-admin-home .cc-overview-card { min-height:120px; justify-content:center; border:1px solid var(--line); border-left:3px solid var(--brand); box-shadow:0 7px 18px rgba(15,43,78,.05); transition:transform .16s ease, box-shadow .16s ease; }
.app-shell .cc-admin-home .cc-overview-card:hover { transform:translateY(-2px); box-shadow:0 12px 25px rgba(15,43,78,.11); }
.app-shell .cc-admin-home .cc-overview-card.cc-tone-warning { border-left-color:var(--warn-ink); }
.app-shell .cc-admin-home .cc-overview-card.cc-tone-danger { border-left-color:var(--danger-ink); }
.app-shell .cc-admin-home .cc-overview-card.cc-tone-success { border-left-color:var(--ok-ink); }
.app-shell .cc-admin-home .cc-overview-card.cc-tone-neutral { border-left-color:var(--neutral-ink); }
.app-shell .cc-admin-home .cc-overview-card small { font-size:11px; }
.app-shell .cc-dashboard-grid { grid-template-columns:minmax(0,1.4fr) minmax(280px,1fr); gap:14px; }
.app-shell .cc-dashboard-panel { border-color:#E7EBF0; box-shadow:var(--shadow-card-rest); }
.app-shell .cc-dashboard-panel h3 { color:var(--ink); font-size:15px; }
.app-shell .cc-home-actions { grid-column:1/-1; order:9; }
.app-shell .cc-home-actions .cc-quick-actions { grid-template-columns:repeat(4,minmax(0,1fr)); }
.app-shell .cc-home-actions .cc-quick-actions button { min-height:72px; border-radius:12px; background:linear-gradient(135deg, var(--surface), var(--tint-50)); }
.app-shell .cc-home-actions .cc-quick-actions button > span:first-child { display:grid; place-items:center; width:34px; height:34px; border-radius:9px; background:#e8f2ff; }
.app-shell .cc-home-panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.app-shell .cc-home-panel-head h3 { margin:0; }
.app-shell .cc-home-panel-head > button { border:0; background:none; color:var(--brand); font:inherit; font-size:12px; cursor:pointer; white-space:nowrap; }
.app-shell .cc-home-progress-value { display:flex; align-items:baseline; gap:8px; margin:8px 0 12px; color:var(--muted); }
.app-shell .cc-home-progress-value strong { color:var(--ink); font-size:30px; font-variant-numeric:tabular-nums; }
.app-shell .cc-home-progress-track { height:9px; border-radius:99px; background:var(--line-soft); overflow:hidden; }
.app-shell .cc-home-progress-track i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#2563EB,#20B892); }
.app-shell .cc-home-legend { display:grid; gap:9px; margin-top:16px; }
.app-shell .cc-home-legend span { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; }
.app-shell .cc-home-legend i { width:8px; height:8px; border-radius:50%; background:#B9C2CE; }
.app-shell .cc-home-legend i.done { background:#0E9F6E; }
.app-shell .cc-home-legend i.active { background:#2563EB; }
.app-shell .cc-home-legend i.waiting { background:#F59E0B; }
.app-shell .cc-home-legend b { margin-left:auto; color:var(--ink); font-variant-numeric:tabular-nums; }
.app-shell .cc-home-source { margin-top:14px; padding-top:10px; border-top:1px solid var(--line-soft); color:var(--subtle); font-size:10.5px; line-height:1.45; }
.app-shell .cc-home-op-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.app-shell .cc-home-op-grid button { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; min-height:46px; padding:9px 10px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--muted); font:inherit; font-size:12px; text-align:left; cursor:pointer; }
.app-shell .cc-home-op-grid button:hover { border-color:var(--brand); background:var(--tint-50); }
.app-shell .cc-home-op-grid strong { color:var(--ink); font-size:18px; font-variant-numeric:tabular-nums; }
.app-shell .cc-home-today .cc-dashboard-list button { min-height:56px; }
.app-shell .cc-home-today { border-top:3px solid #2563eb; }
.app-shell .cc-home-operations { border-top:3px solid #0e9f6e; }
.app-shell .cc-status-ring { min-height:148px; }
.app-shell[data-theme="dark"] .cc-home-hero { border-color:var(--line); background:linear-gradient(110deg,#142d4b,#183b5d); }
.app-shell[data-theme="dark"] .cc-home-date strong { color:#A8C8EF; }
.app-shell[data-theme="dark"] .cc-dashboard-panel { border-color:var(--line); }
.app-shell .cc-loading-title, .app-shell .cc-loading-card, .app-shell .cc-loading-panel { background: linear-gradient(90deg, var(--line-soft), var(--line), var(--line-soft)); background-size: 200% 100%; animation: cc-shimmer 1.5s infinite; border-radius: 14px; }
.app-shell .cc-loading-title { height: 32px; width: 180px; margin-bottom: 24px; }
.app-shell .cc-loading-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.app-shell .cc-loading-card { height: 118px; }
.app-shell .cc-loading-panel { height: 220px; margin-top: 24px; }
@keyframes cc-shimmer { to { background-position: -200% 0; } }
.app-shell[data-theme="dark"] .card,
.app-shell[data-theme="dark"] .cc-section,
.app-shell[data-theme="dark"] input,
.app-shell[data-theme="dark"] select,
.app-shell[data-theme="dark"] textarea { color: var(--ink); }
.app-shell[data-theme="dark"] .cc-dashboard-panel,
.app-shell[data-theme="dark"] .cc-overview-card,
.app-shell[data-theme="dark"] .cc-quick-actions button { background: var(--surface); }
.app-shell[data-theme="dark"] .btn-primary { background: #2563EB; border-color: #2563EB; color: #fff; }
@media (max-width: 1200px) { .app-shell .cc-quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } .app-shell .cc-admin-home .cc-overview-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width: 900px) { .app-shell .cc-overview-grid, .app-shell .cc-loading-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .app-shell .cc-admin-home .cc-overview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .app-shell .cc-dashboard-grid { grid-template-columns: 1fr 1fr; gap: 14px; } .app-shell .cc-actions-panel { grid-column: 1/-1; } }
@media (max-width: 900px) { .app-shell .cc-workspace-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .app-shell .cc-quick-actions { grid-template-columns: 1fr 1fr; } .app-shell .cc-page-header time { display: none; } .app-shell .cc-overview-grid { gap: 8px; } .app-shell .cc-overview-card { min-height: 100px; padding: 12px; } .app-shell .cc-overview-card strong { font-size: 24px; } .app-shell .cc-dashboard-grid { grid-template-columns:1fr; gap:12px; } .app-shell .cc-dashboard-panel { padding: 16px; } .app-shell .cc-home-hero { min-height:0; align-items:flex-start; flex-direction:column; gap:12px; padding:8px 0 12px; } .app-shell .cc-home-hero h1 { font-size:22px; } .app-shell .cc-home-date { text-align:left; gap:3px; } .app-shell .cc-home-date strong { font-size:13px; } .app-shell .cc-home-actions { grid-column:auto; } }
@media (prefers-reduced-motion: reduce) { .app-shell .cc-loading-title, .app-shell .cc-loading-card, .app-shell .cc-loading-panel { animation: none; } }

/* ========== 2026-10-07 公告页「列表优先」布局 ==========
   页面只承载列表 + 筛选；新建与编辑统一走弹窗。
   分段控件、筛选栏、结果计数、卡片操作区，均使用既有令牌，无新增颜色。 */
.app-shell .cc-ann-section { display: block; }
.app-shell .cc-ann-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.app-shell .cc-ann-head h3 { margin: 0; }
.app-shell .cc-ann-head-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.app-shell .cc-segmented {
  display: inline-flex; gap: 2px; padding: 2px;
  background: var(--line-soft); border: 1px solid var(--line); border-radius: 10px;
}
.app-shell .cc-segmented button {
  border: 0; background: transparent; cursor: pointer;
  font: 500 13px/1 inherit; font-family: inherit;
  color: var(--muted); padding: 8px 14px; border-radius: 8px;
  transition: background .14s, color .14s;
}
.app-shell .cc-segmented button:hover { color: var(--ink); }
.app-shell .cc-segmented button.on { background: var(--surface); color: var(--brand); box-shadow: 0 1px 2px rgba(16,24,40,.08); }
.app-shell .cc-segmented button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.app-shell .cc-ann-filters {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-bottom: 12px;
}
.app-shell .cc-ann-filters input[type="search"] {
  flex: 1 1 240px; min-width: 0; max-width: 420px;
  padding: 9px 12px; font: 400 13px/1.5 inherit; font-family: inherit;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px;
}
.app-shell .cc-ann-filters input[type="search"]::placeholder { color: var(--subtle); }
.app-shell .cc-ann-filters input[type="search"]:focus {
  outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(29,78,216,.13);
}
.app-shell .cc-ann-filters select {
  padding: 9px 12px; font: 400 13px/1.5 inherit; font-family: inherit;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
}
.app-shell .cc-ann-filters select:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(29,78,216,.13); }

.app-shell .cc-ann-resultbar {
  font-size: 12px; color: var(--subtle); padding: 0 2px 10px;
}
.app-shell .cc-ann-item-actions { margin-top: 12px; display: flex; gap: 8px; }
.app-shell .cc-announcement-item .cc-card-top { align-items: flex-start; gap: 12px; }
.app-shell .cc-pin { margin-right: 2px; }
.app-shell .cc-inline-check {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-2); cursor: pointer;
}
.app-shell[data-theme="dark"] .cc-segmented { background: var(--line-soft); }
.app-shell[data-theme="dark"] .cc-segmented button.on { background: var(--surface); }
@media (max-width: 640px) {
  .app-shell .cc-ann-head { align-items: flex-start; }
  .app-shell .cc-ann-head-actions { width: 100%; justify-content: space-between; }
  .app-shell .cc-ann-filters input[type="search"] { max-width: none; }
}

/* ============================================================================
   2026-10-07 全站细则整改（依据浏览器实测：11 页18 类控件的计算样式比对）
   原则：用覆盖层实现，不改动styles.css 既有规则，降低回归风险。
   每项均标注「实测值 → 新值」，全部使用既有令牌，无新增颜色。
   ============================================================================ */

/* --- 1. 输入框 / 下拉 / 文本域：38px→42px，字号 12px→13.5px ---
   原因：实测行高 18px 落在 38px 控件内，字被压扁。 */
.app-shell .cc-field input,
.app-shell .cc-field select,
.app-shell .cc-field textarea {
  font-size: 13.5px;
  line-height: 1.5;
  min-height: 42px;
  padding: 11px 13px;
  border-radius: 8px;
}
.app-shell .cc-field textarea { min-height: 76px; line-height: 1.6; }
.app-shell .cc-field > span:first-child,
.app-shell .cc-field > label:first-child { font-size: 12.5px; line-height: 1.4; }

/* 筛选条与列表内输入框同步（实测同为 38px/12px） */
.app-shell .cc-task-filters input,
.app-shell .cc-task-filters select,
.app-shell .cc-workflow-filters input,
.app-shell .cc-workflow-filters select,
.app-shell .cc-ann-filters input,
.app-shell .cc-ann-filters select {
  font-size: 13px; min-height: 38px; padding: 9px 12px; border-radius: 8px;
}

/* --- 2. 日期控件：接管原生态 ---
   实测问题：mm/dd/yyyy 未本地化，浏览器原生日历图标与蓝色系不搭。 */
.app-shell input[type="date"],
.app-shell input[type="month"],
.app-shell input[type="datetime-local"] {
  font-size: 13.5px; min-height: 42px; padding: 11px 13px;
  border-radius: 8px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
  font-family: inherit; line-height: 1.5;
}
.app-shell input[type="date"]:focus,
.app-shell input[type="month"]:focus,
.app-shell input[type="datetime-local"]:focus {
  outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(29,78,216,.13);
}
/* 日历图标染为品牌蓝（WebKit/Blink 用filter 反色，Gecko 用 accent-color） */
.app-shell input[type="date"]::-webkit-calendar-picker-indicator,
.app-shell input[type="month"]::-webkit-calendar-picker-indicator,
.app-shell input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(24%) sepate(72%) saturate(1400%) hue-rotate(202deg) brightness(94%) contrast(96%);
  cursor: pointer; opacity: .75; transition: opacity .14s;
}
.app-shell input[type="date"]::-webkit-calendar-picker-indicator:hover,
.app-shell input[type="month"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.app-shell input[type="date"]::-webkit-datetime-edit,
.app-shell input[type="month"]::-webkit-datetime-edit { font-family: inherit; }

/* --- 3. 按钮三档体系：主 42 / 次 42 / 小 30 ---
   实测问题：只有 38 与 32 两档，主次按钮同高，层级拉不开。 */
.app-shell .btn {
  height: 42px; padding: 0 18px;
  font-size: 13.5px; font-weight: 600; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.app-shell .btn-sm { height: 30px; padding: 0 11px; font-size: 12px; border-radius: 7px; }

/* --- 4. 导航项圆角：0 10px 10px 0 → 8px 四角统一 --- */
.app-shell .nav-item { border-radius: 8px; }
.app-shell .nav-item.active::before,
.app-shell .nav-item-primary.active::before { top: 9px; bottom: 9px; border-radius: 0 2px 2px 0; }

/* --- 5. 统计卡：102px → 96px，零值降级 --- */
.app-shell .cc-detail-stat { min-height: 96px; padding: 15px 16px; gap: 5px; }
.app-shell .cc-detail-stat strong { font-size: 24px; }

/* 零值态：数字缩小、左条改完成绿，避免「零」也占满视觉重量 */
.app-shell .cc-detail-stat.is-zero { border-left-color: var(--ok-ink) !important; }
.app-shell .cc-detail-stat.is-zero strong { font-size: 22px; color: var(--muted); }
.app-shell .cc-detail-stat.is-zero small { color: var(--subtle); }
/* 读取失败态：左条改中性灰，不用警戒红 */
.app-shell .cc-detail-stat.is-error { border-left-color: var(--line) !important; }
.app-shell .cc-detail-stat.is-error strong { font-size: 15px; color: var(--muted); line-height: 1.35; }

/* --- 6. 表头：700 → 600，字号 11 → 11.5px，行高压缩 --- */
.app-shell table thead th {
  font-size: 11.5px; font-weight: 600; padding: 9px 14px; letter-spacing: .01em;
}
.app-shell table tbody td { padding: 10px 14px; font-size: 13px; }

/* --- 7. 卡片层次：普通卡片收紧，让位统计卡 --- */
.app-shell .cc-card { padding: 14px 16px; border-radius: 12px; }
.app-shell .card:not(.cc-detail-stat):not(.cc-overview-card) { border-radius: 12px; }
.app-shell .cc-detail-stat { box-shadow: 0 1px 2px rgba(16,24,40,.04); }

/* --- 8. 空状态与表单容器间距 --- */
.app-shell .cc-form-grid { gap: 14px 20px; }

/* --- 9. 深色模式同步 --- */
.app-shell[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
.app-shell[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator,
.app-shell[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(72%) sepate(64%) saturate(1200%) hue-rotate(198deg) brightness(104%) contrast(92%);
}
.app-shell[data-theme="dark"] .cc-detail-stat.is-zero { border-left-color: var(--ok-ink) !important; }
.app-shell[data-theme="dark"] .cc-detail-stat.is-error { border-left-color: var(--line) !important; }
.app-shell[data-theme="dark"] .cc-detail-stat.is-error strong { color: var(--muted); }

/* --- 10. 移动端触控目标不小于 40px（WCAG 2.5.5） --- */
@media (max-width: 640px) {
  .app-shell .btn { min-height: 44px; }
  .app-shell .btn-sm { min-height: 36px; }
  .app-shell .nav-item { min-height: 44px; }
}

/* --- 11. 数据主库：ID 列开关条 --- */
.app-shell .raw-tbl-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--line-soft);
}
.app-shell .raw-tbl-info { font-size: 12px; color: var(--subtle); }
.app-shell .link-btn {
  border: 0; background: transparent; padding: 0; cursor: pointer;
  font: 500 12px/1.4 inherit; color: var(--brand);
  text-decoration: underline; text-underline-offset: 2px;
}
.app-shell .link-btn:hover { color: var(--brand-dark); }
.app-shell .link-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 3px; }
.app-shell[data-theme="dark"] .link-btn { color: var(--brand-bright); }

/* ============================================================================
   2026-10-08 全站「审批聚焦」改造 —— 侧栏炭灰主题覆盖层
   覆盖前文遗留的深蓝硬编码，保持向后兼容；全部颜色走 tokens.css 变量。
   ============================================================================ */

/* 侧栏：深炭灰，选中态用中性灰而非蓝色高亮 */
.app-shell .sidebar { background: var(--nav-bg); }
.app-shell .nav-group-label { color: var(--nav-dim2); letter-spacing: .11em; }
.app-shell .nav-item { border-radius: 8px; border-left: 3px solid transparent; }
.app-shell .nav-item:hover { color: #fff; background: var(--nav-hover); }
.app-shell .nav-item.active,
.app-shell .nav-item-primary.active { color: #07954A; background: var(--nav-active); border-left-color: #16A34A; }
.app-shell .nav-item.active svg { color: #07954A; }
.app-shell .nav-item-primary {
  /* The overview entry is navigation, not a dark call-to-action button.
     Match every other unselected sidebar item; selected and hover states
     continue to use the shared rules above. */
  background: transparent; border: 0; border-left: 3px solid transparent;
  border-radius: 8px; color: var(--nav-text);
}
/* Other navigation rows have no trailing affordance; do not make the overview
   look like a special action while it is inactive. */
.app-shell .nav-item-primary .nav-primary-arrow { display: none; }
.app-shell .nav-item-primary.active {
  border-color: transparent; border-left-color: #16A34A;
  background: var(--nav-active);
}
.app-shell .nav-item:focus-visible,
.app-shell button:focus-visible,
.app-shell a:focus-visible { outline-color: var(--nav-accent); }
.frontend-update-notice { position:fixed; z-index:1200; right:20px; bottom:20px; width:min(380px,calc(100vw - 40px)); padding:18px; border:1px solid var(--line,#dce7e0); border-radius:12px; background:var(--surface,#fff); color:var(--ink,#183b30); box-shadow:0 8px 32px rgba(0,0,0,.15); }
.frontend-update-notice[hidden] { display:none; }
.frontend-update-notice p { margin:8px 0 14px; color:var(--muted,#64748b); font-size:14px; }
.frontend-update-actions { display:flex; justify-content:flex-end; gap:10px; }
.app-shell .nav-count { background: var(--danger-ink); }
.app-shell .user-name { color: #E6EDF3; }
.app-shell .user-chevron { color: var(--nav-muted); }
.app-shell .nav-group-system { border-top-color: var(--nav-line); }

/* 侧栏 LOGO：白字版，去掉白块 */
.app-shell .logo-row { background: var(--nav-bg); box-shadow: none; }
.app-shell .logo-row .brand-logo { background: transparent; box-shadow: none; filter: none; mix-blend-mode: multiply; }

/* ============================================================================
   2026-10-08 首页与全局「审批聚焦」配色统一 —— 绿主色 → 蓝主色
   公告条、快捷按钮等仍残留「绿色主色」时代配色，统一改为蓝色系。
   ============================================================================ */
.app-shell .cc-announcement-ticker {
  border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-dark);
}
.app-shell .cc-announcement-ticker button { color: var(--brand-dark); }
.app-shell .cc-quick-actions button {
  border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-dark);
}
.app-shell .cc-quick-actions button:hover { border-color: var(--brand); background: #E6EFFF; }

/* 首页四宫格卡片：统一左侧状态色描边（替代原先顶部描边的写法差异） */
.app-shell .cc-overview-card { border-left: 3px solid var(--line); }
.app-shell .cc-overview-card.cc-tone-warning { border-left-color: var(--warn-ink); }
.app-shell .cc-overview-card.cc-tone-brand { border-left-color: var(--brand); }
.app-shell .cc-overview-card.cc-tone-danger { border-left-color: var(--danger-ink); }
.app-shell .cc-overview-card.cc-tone-success { border-left-color: var(--ok-ink); }
.app-shell .cc-overview-card.cc-tone-neutral { border-left-color: var(--neutral-ink); }
.app-shell .cc-overview-card strong { font-variant-numeric: tabular-nums; }

/* 审批状态分布环形图 */
.app-shell .cc-status-ring { display: flex; align-items: center; gap: 20px; padding: 4px 0; }
.app-shell .cc-status-ring svg { flex: 0 0 auto; }
.app-shell .cc-status-legend { flex: 1; display: grid; gap: 8px; font-size: 12.5px; }
.app-shell .cc-status-legend .lg { display: flex; align-items: center; gap: 9px; }
.app-shell .cc-status-legend .lg b { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.app-shell .cc-status-legend .lg span { flex: 1; color: var(--body); }
.app-shell .cc-status-legend .lg em { font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.app-shell .cc-ring-source { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); font-size: 11.5px; color: var(--subtle); }

@media (max-width: 650px) {
  .app-shell .cc-status-ring { flex-direction: column; align-items: flex-start; }
}

/* 2026-10-08 补充：KPI 卡统一「仅左侧 3px 状态色条」，去掉旧的顶部描边。
   空值(0)也按语义显示完成绿，但整体不抢眼。 */
.app-shell .cc-overview-card { border-top: 0 !important; }

/* ============================================================================
   2026-10-08 审批中心「左列表 ＋ 右详情」双栏
   左栏为精炼行（标题/类型/提交人/状态），右栏保留完整功能卡（审批、备注、
   附件、明细、历史、全部操作按钮），点击左侧行纯前端切换，不重新请求。
   ============================================================================ */
.app-shell .cc-approval-split { display: grid; grid-template-columns: 316px minmax(0, 1fr); gap: 14px; align-items: start; }
.app-shell .cc-approval-side {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; position: sticky; top: 76px;
  max-height: calc(100vh - 96px); display: flex; flex-direction: column;
}
.app-shell .cc-approval-list { overflow-y: auto; }
.app-shell .cc-approval-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 13px; border: 0; border-bottom: 1px solid var(--line-soft);
  background: transparent; font: inherit; font-family: inherit;
  text-align: left; cursor: pointer;
}
.app-shell .cc-approval-row:last-child { border-bottom: 0; }
.app-shell .cc-approval-row:hover { background: #FAFBFC; }
.app-shell .cc-approval-row.on { background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); }
.app-shell .cc-approval-row-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.app-shell .cc-approval-row-main strong {
  font-size: 12.5px; font-weight: 500; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-shell .cc-approval-row-main small {
  font-size: 11.5px; color: var(--subtle);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Select an approval person directly from the organization hierarchy. */
.app-shell .cc-route-directory { margin: 14px 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.app-shell .cc-route-directory-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; color:var(--ink); font-size:13px; }
.app-shell .cc-route-directory-head span { color:var(--muted); font-size:11px; font-weight:400; }
.app-shell .cc-route-org { border-top:1px solid var(--line-soft); }
.app-shell .cc-route-org > summary, .app-shell .cc-route-org .cc-tree-children > details > summary { min-height:36px; }
.app-shell .cc-route-directory summary { display:flex; align-items:center; gap:9px; cursor:pointer; list-style:none; padding:5px 2px; }
.app-shell .cc-route-directory summary::-webkit-details-marker { display:none; }
.app-shell .cc-route-directory summary::before { content:'▾'; color:var(--brand); font-size:12px; }
.app-shell .cc-route-directory details:not([open]) > summary::before { content:'▸'; }
.app-shell .cc-route-directory summary small { margin-left:auto; color:var(--muted); }
.app-shell .cc-route-person-list { display:grid; gap:5px; padding:4px 0 10px 12px; }
.app-shell .cc-route-person { display:flex; align-items:center; gap:9px; width:100%; min-height:44px; padding:5px 10px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--ink); text-align:left; cursor:pointer; }
.app-shell .cc-route-person:hover { border-color:var(--brand); background:var(--tint-50); }
.app-shell .cc-route-person.selected { border-color:var(--brand); background:var(--tint-50); box-shadow:inset 3px 0 0 var(--brand); }
.app-shell .cc-route-person-avatar { display:grid; place-items:center; width:30px; height:30px; flex:0 0 auto; border-radius:50%; background:var(--tint-100); color:var(--brand-dark); font-weight:700; }
.app-shell .cc-route-person > span:nth-child(2) { display:grid; min-width:0; gap:2px; }
.app-shell .cc-route-person strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.app-shell .cc-route-person small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:10.5px; }
.app-shell .cc-route-person i { margin-left:auto; color:var(--brand); font-style:normal; font-size:17px; }
.app-shell .cc-route-other { margin-top:8px; border-top:1px solid var(--line-soft); }
.app-shell .cc-route-other > summary { color:var(--muted); font-size:12px; }
.app-shell .cc-route-other-options { display:flex; flex-wrap:wrap; gap:7px; padding:8px 0; }
.app-shell .cc-route-other-options [data-route-token].selected { color:var(--brand-dark); border-color:var(--brand); background:var(--tint-50); }
.app-shell .cc-route-picker { display:flex; flex-wrap:wrap; gap:8px; }
.app-shell .cc-org-management { margin:16px 0 2px; border-top:1px solid var(--line-soft); }
.app-shell .cc-org-management > summary { padding:12px 2px 4px; color:var(--brand-dark); font-size:12px; font-weight:600; cursor:pointer; }
.app-shell .cc-org-management[open] > summary { margin-bottom:12px; }
.app-shell .cc-org-management .cc-inline-form { margin-top:10px; }
.app-shell .cc-tree-person, .app-shell .cc-tree-store { display:flex; align-items:center; gap:8px; min-height:30px; padding:3px 4px; color:var(--body); }
.app-shell .cc-tree-person small, .app-shell .cc-tree-store small { margin-left:auto; color:var(--muted); font-size:11px; }
.app-shell .cc-org-position > summary { gap:9px; }
.app-shell .cc-org-position > summary > strong { min-width:0; }
.app-shell .cc-org-position > summary > small { margin-left:auto; white-space:nowrap; }
.app-shell .cc-position-actions { display:flex; justify-content:flex-end; margin:0 0 5px; }
.app-shell .cc-position-add-person { flex:0 0 auto; min-height:30px; padding:4px 10px; color:var(--brand); border-color:var(--line); background:#fff; }
.app-shell .cc-position-add-person:hover { background:var(--tint-50); border-color:var(--brand); }
.app-shell .cc-person-modal-note { margin:0 0 16px; }
@media (max-width:640px) {
  .app-shell .cc-org-position > summary { flex-wrap:wrap; }
  .app-shell .cc-position-actions { justify-content:flex-start; padding-left:27px; }
  .app-shell .cc-tree-people { margin-left:10px; padding-left:12px; }
  .app-shell .cc-route-directory { padding:10px; }
  .app-shell .cc-route-directory-head { align-items:flex-start; flex-direction:column; gap:3px; }
  .app-shell .cc-route-picker > button { flex:1 1 145px; }
}
.app-shell .cc-approval-row-side { flex: 0 0 auto; }
.app-shell[data-theme="dark"] .cc-approval-row:hover { background: var(--nav-hover); }
@media (max-width: 1000px) {
  .app-shell .cc-approval-split { grid-template-columns: 1fr; }
  .app-shell .cc-approval-side { position: static; max-height: 260px; }
}

/* Login B — NSS Solar 品牌视觉单独作用于登录页，不进入已登录管理后台。 */
.login-page {
  --login-accent: #06945d;
  --login-accent-strong: #087a51;
  --login-accent-soft: rgba(6,148,93,.16);
  font-family: Inter, "Noto Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(ellipse at 84% 7%, rgba(190,226,255,.82) 0%, rgba(207,237,255,.58) 29%, transparent 57%),
    radial-gradient(ellipse at 11% 87%, rgba(223,248,237,.78) 0%, rgba(240,251,246,.56) 36%, transparent 64%),
    radial-gradient(ellipse at 51% 48%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.82) 35%, transparent 72%),
    linear-gradient(138deg, #e8f5ff 0%, #f8fcff 42%, #f1fbf6 100%);
  color: #102b54;
}
.login-page .login-center {
  position: relative; z-index: 2;
  width: min(1500px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: 74px clamp(30px, 4.4vw, 72px) 46px;
  display: grid;
  grid-template-columns: minmax(270px, .95fr) minmax(350px, 1.05fr) minmax(330px, 1.1fr);
  align-items: center;
  gap: clamp(28px, 3vw, 54px);
}
.login-brand-copy { position: relative; z-index: 1; max-width: 410px; }
.login-page .login-logo { display: block; width: min(238px, 100%); height: auto; margin: 0 0 30px; }
.login-page .login-title {
  display: flex; flex-direction: column; align-items: flex-start;
  color: #102b54; font-size: clamp(30px, 2.25vw, 35px); letter-spacing: -.035em;
  line-height: 1.16; text-shadow: none;
}
.login-page .login-title-accent {
  display: block; margin-top: 7px; color: #34536f; font-size: .54em; font-weight: 600; letter-spacing: .035em; background: none;
  -webkit-text-fill-color: currentColor;
}
.login-page .login-subtitle {
  margin-top: 15px; color: #52718a; font-size: 14px; font-weight: 600;
  letter-spacing: .045em; line-height: 1.5; text-indent: 0; text-transform: none; text-shadow: none;
}
.login-values { display: flex; align-items: flex-start; gap: clamp(14px, 1.7vw, 24px); margin-top: clamp(34px, 4.5vw, 62px); color: #245d53; }
.login-values > div { display: grid; grid-template-rows: 44px auto auto; justify-items: center; align-content: start; gap: 7px; min-width: 82px; font-size: 12px; font-weight: 700; line-height: 1.35; text-align: center; }
.login-values small { color: #668579; font-size: 9px; line-height: 1.3; white-space: nowrap; font-weight: 500; }
.login-value-icon { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto; border-radius: 14px; background: rgba(255,255,255,.8); color: #0a9a61; box-shadow: 0 5px 18px rgba(24,88,103,.08); }
.login-value-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.login-card-wrap { position: relative; z-index: 2; width: 100%; max-width: 410px; justify-self: center; }
.login-page .login-panel {
  width: 100%; margin: 0; gap: 17px; padding: 32px 30px 29px;
  background: rgba(255,255,255,.94); border: 1px solid rgba(255,255,255,.94);
  border-radius: 17px; box-shadow: 0 16px 42px rgba(31,83,112,.12), 0 2px 8px rgba(31,83,112,.04);
}
.login-form-heading { margin-bottom: 3px; }
.login-form-heading h2 { margin: 0; color: #102b54; font-size: 23px; line-height: 1.3; font-weight: 700; letter-spacing: .01em; }
.login-form-heading p { margin: 7px 0 0; color: #7189a0; font-size: 13px; line-height: 1.5; }
.login-page .field-label { color: #405b75; letter-spacing: .01em; font-size: 12.5px; }
.login-page .input-icon { color: #64809a; }
.login-page .login-panel input {
  height: 44px; color: #153457; background: #f5f9fd; border-color: #e0eaf3; border-radius: 8px;
}
.login-page .login-panel input::placeholder { color: #9aabb9; }
.login-page .login-panel input:focus { background: #fff; border-color: #5ba9e1; }
.login-page .pwd-toggle { color: #68819a; }
.login-page .pwd-toggle:hover { color: #195a86; background: #edf5fb; }
.login-page .login-error { color: #c33b42; }
.login-page .login-submit { background: linear-gradient(92deg, #078457, #0ba46a); border-radius: 8px; letter-spacing: .18em; text-indent: .18em; }
.login-page .login-submit:hover { box-shadow: 0 8px 22px -8px rgba(6,148,93,.55); }
.login-card-foot { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; color: #55718a; font-size: 10px; white-space: nowrap; }
.login-card-foot i { width: 1px; height: 13px; background: rgba(51,91,119,.35); }
.login-language-switch { position: absolute; z-index: 5; top: 26px; right: 28px; display: inline-flex; overflow: hidden; border: 1px solid #b8d5ee; border-radius: 10px; background: rgba(255,255,255,.84); box-shadow: 0 4px 14px rgba(35,88,115,.08); }
.login-language-switch button { min-width: 48px; height: 32px; padding: 0 11px; border: 0; background: transparent; color: #24638e; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.login-language-switch button.active { background: #075bb6; color: #fff; }
.login-visual { position: relative; align-self: stretch; min-height: 520px; overflow: hidden; isolation: isolate; }
.login-visual img {
  position: absolute; z-index: 0; right: -17%; bottom: -2%; width: 132%; height: 79%;
  object-fit: cover; object-position: 76% 53%; border-radius: 28px 0 0 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.04) 12%, rgba(0,0,0,.18) 30%, rgba(0,0,0,.52) 54%, #000 76%), linear-gradient(0deg, #000 0%, #000 54%, rgba(0,0,0,.86) 67%, rgba(0,0,0,.48) 81%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.04) 12%, rgba(0,0,0,.18) 30%, rgba(0,0,0,.52) 54%, #000 76%), linear-gradient(0deg, #000 0%, #000 54%, rgba(0,0,0,.86) 67%, rgba(0,0,0,.48) 81%, transparent 100%);
  mask-composite: intersect;
}
.login-visual::after {
  content: ''; position: absolute; z-index: 1; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(241,250,255,.97) 0%, rgba(241,250,255,.88) 13%, rgba(241,250,255,.58) 31%, rgba(241,250,255,.2) 53%, transparent 76%),
    linear-gradient(180deg, rgba(232,245,255,.92) 0%, rgba(232,245,255,.64) 12%, rgba(232,245,255,.18) 29%, transparent 44%),
    linear-gradient(0deg, rgba(239,250,245,.96) 0%, rgba(239,250,245,.6) 12%, rgba(239,250,245,.2) 26%, transparent 42%);
}
.login-visual-slogan { position: absolute; z-index: 2; top: 5%; right: 8%; color: #102b54; font-family: Inter, "Noto Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; font-size: clamp(18px, 1.55vw, 24px); font-weight: 650; font-style: normal; line-height: 1.55; letter-spacing: .045em; text-align: right; transform: none; }
.login-visual-slogan::after { content: ''; display: block; width: 74%; height: 3px; margin: 6px 0 0 auto; border-radius: 50%; background: #15985b; transform: rotate(-8deg); }
.login-visual-caption { position: absolute; z-index: 2; right: 0; bottom: 1%; color: #55718a; font-size: 10px; }
.login-center:has(#mandatoryPasswordForm) { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; }
.login-center:has(#mandatoryPasswordForm) .login-title { text-align: center; }
.login-center:has(#mandatoryPasswordForm) .login-subtitle { margin: 0; text-align: center; }
.login-center:has(#mandatoryPasswordForm) .login-panel { max-width: 440px; margin-top: 10px; }
@media (max-width: 1100px) {
  .login-page .login-center { grid-template-columns: minmax(220px, .9fr) minmax(280px, 1fr) minmax(220px, .9fr); gap: 20px; padding-inline: 24px; }
  .login-card-wrap { max-width: 420px; }
  .login-page .login-title { font-size: clamp(28px, 3vw, 34px); }
}
@media (max-width: 860px) {
  .login-page .login-center { grid-template-columns: minmax(250px, .9fr) minmax(320px, 1.1fr); gap: 34px; padding-inline: 34px; }
  .login-visual { display: none; }
}
@media (max-width: 700px) {
  .login-page .login-center { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 18px; padding: 72px 20px 28px; }
  .login-card-wrap { order: 1; max-width: 420px; width: 100%; margin: 0 auto; }
  .login-brand-copy { order: 2; width: 100%; max-width: 420px; margin: 0 auto; text-align: center; }
  .login-page .login-logo { width: 190px; margin: 0 auto 12px; }
  .login-page .login-title { align-items: center; font-size: 29px; }
  .login-page .login-subtitle { margin-top: 8px; font-size: 12px; }
  .login-values { justify-content: center; gap: 14px; margin-top: 18px; }
  .login-values > div { min-width: 77px; font-size: 10px; }
  .login-values small { font-size: 8px; }
  .login-value-icon { width: 36px; height: 36px; border-radius: 11px; }
  .login-value-icon svg { width: 22px; height: 22px; }
  .login-page .login-panel { padding: 25px 22px 22px; gap: 15px; }
  .login-form-heading h2 { font-size: 21px; }
  .login-card-foot { font-size: 8.5px; gap: 8px; }
}
@media (max-width: 480px) {
  .login-page .login-center { padding-inline: 16px; }
}
@media (max-width: 360px) {
  .login-page .login-center { padding-inline: 14px; }
  .login-values { gap: 7px; }
  .login-values > div { min-width: 72px; }
}

@media (max-width: 640px) {
  .app-shell .cc-home-actions .cc-quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-shell .cc-home-actions .cc-quick-actions button { min-width: 0; gap: 5px; padding: 9px 8px; font-size: 11px; white-space: nowrap; }
  .app-shell .cc-home-actions .cc-quick-actions button > span:first-child { flex: 0 0 auto; font-size: 17px; }
  .app-shell .cc-home-actions .cc-quick-actions button b { margin-left: auto; }
}

/* SolarPoints V2 Login A: one continuous photo backdrop with independent brand and sign-in content. */
.login-a-page {
  position: fixed;
  inset: 0;
  overflow: auto;
  background: #b8d8f1;
  color: #102b54;
}
.login-a-page .login-language-switch {
  position: fixed;
  top: 22px;
  right: 26px;
  z-index: 10;
  border-color: #d6e1ee;
  background: rgba(255,255,255,.92);
  box-shadow: 0 4px 14px rgba(18,49,84,.08);
}
.login-a-design-badge {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 54px;
  padding: 0 24px 0 8px;
  border-radius: 17px 0 30px 17px;
  background: linear-gradient(90deg, rgba(8,91,202,.97), rgba(8,91,202,.78) 72%, rgba(8,91,202,0));
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,35,94,.28);
}
.login-a-design-badge span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(145deg,#31a2ff,#0873e8);
  box-shadow: 0 2px 7px rgba(0,39,103,.24);
  font-size: 34px;
  font-weight: 750;
  line-height: 1;
}
.login-a-design-badge strong { font-size: clamp(14px,1.42vw,20px); font-weight: 750; white-space: nowrap; }
.login-a-layout {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(420px, 1.12fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "brand auth";
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
}
.login-a-layout::before,
.login-a-layout::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0;
  pointer-events: none;
}
.login-a-layout::before {
  position: fixed;
  inset: 0;
  width: 100%;
  background-image: url('/login-a-background-v3.png?v=1');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.login-a-layout::after {
  position: fixed;
  inset: 0;
  width: 100%;
  background: linear-gradient(180deg, rgba(225,240,255,.08) 0%, rgba(225,240,255,0) 48%, rgba(7,27,49,.27) 100%);
}
.login-a-brand {
  grid-area: brand;
  display: flex;
  align-items: flex-start;
  min-width: 0;
  padding: clamp(138px, 22vh, 180px) clamp(30px, 4.8vw, 70px) 12px;
}
.login-a-brand-copy { display: flex; flex-direction: column; align-items: center; width: min(100%, 590px); transform: none; }
.login-a-page .login-logo {
  display: block;
  width: min(350px, 94%);
  height: auto;
  margin: 0;
  filter: none;
}
.login-a-page .login-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  color: #102b54;
  font-size: clamp(34px, 3.5vw, 52px);
  font-weight: 750;
  letter-spacing: -.035em;
  line-height: 1.15;
  text-shadow: 0 1px 12px rgba(255,255,255,.2);
}
.login-a-page .login-title-accent {
  display: block;
  margin-top: 2px;
  background: none;
  color: #102b54;
  font-size: .76em;
  font-weight: 700;
  letter-spacing: .02em;
  -webkit-text-fill-color: currentColor;
}
.login-a-page .login-subtitle {
  margin-top: 20px;
  color: #244c71;
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 600;
  letter-spacing: .04em;
  text-indent: 0;
  text-shadow: 0 1px 5px rgba(255,255,255,.98), 0 0 12px rgba(255,255,255,.8);
  text-transform: none;
}
.login-a-values {
  position: static;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(12px, 2vw, 28px);
  min-width: 0;
  margin: clamp(100px, 16vh, 130px) 0 0;
  padding: 0;
  color: #fff;
}
.login-a-values > div {
  display: grid;
  grid-template-rows: 30px auto;
  justify-items: center;
  align-content: center;
  gap: 4px;
  min-width: max-content;
  color: #fff;
  font-size: clamp(14px,1.4vw,17px);
  font-weight: 650;
  line-height: 1.3;
  text-align: center;
  text-shadow: 0 1px 5px rgba(0,0,0,.25);
}
.login-a-values .login-value-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  margin: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  box-shadow: none;
}
.login-a-values .login-value-icon svg { width: 24px; height: 24px; stroke-width: 2; }
.login-a-values small { display: none; }
.login-a-auth {
  grid-area: auth;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 82px clamp(30px, 5vw, 76px) 42px;
  background: transparent;
}
.login-a-auth .login-card-wrap { width: min(100%, 560px); max-width: 560px; }
.login-a-page .login-panel {
  width: 100%;
  margin: 0;
  gap: 16px;
  padding: 34px 38px 32px;
  border: 1px solid #edf1f6;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(23,54,91,.12), 0 2px 7px rgba(23,54,91,.04);
}
.login-a-page .login-form-heading { margin-bottom: 2px; }
.login-a-page .login-form-heading h2 { color: #102b54; font-size: clamp(24px,2.15vw,30px); line-height: 1.3; }
.login-a-page .login-form-heading p { margin-top: 7px; color: #758ba3; font-size: clamp(14px,1.2vw,17px); }
.login-a-page .field-label { color: #405b75; font-size: 12.5px; letter-spacing: .01em; }
.login-a-page .login-panel input {
  height: 52px;
  border-color: #e3ebf4;
  border-radius: 8px;
  background: #f4f8fc;
  color: #153457;
}
.login-a-page .login-panel input::placeholder { color: #96a9bc; }
.login-a-page .login-panel input:focus { border-color: #4389ef; background: #fff; }
.login-a-page .input-icon,
.login-a-page .pwd-toggle { color: #667f9a; }
.login-a-page .pwd-toggle:hover { color: #185fca; background: #edf4ff; }
.login-a-page .login-error { color: #bd3340; }
.login-a-page .login-submit {
  height: 54px;
  border-radius: 9px;
  background: linear-gradient(100deg,#1760ef 0%,#1a9df0 100%);
  box-shadow: 0 7px 18px rgba(28,104,221,.22);
  letter-spacing: .18em;
  text-indent: .18em;
}
.login-a-page .login-submit:hover { box-shadow: 0 9px 21px rgba(28,104,221,.3); }
.login-a-page .login-card-foot { margin-top: 18px; color: #7b91a8; font-size: 10px; }
.login-a-page .login-card-foot i { background: #c6d4e2; }

@media (max-width: 980px) and (min-width: 701px) {
  .login-a-layout { grid-template-columns: minmax(0,.94fr) minmax(360px,1.06fr); grid-template-rows: minmax(0,1fr); }
  .login-a-brand { padding-inline: 34px; }
  .login-a-values { gap: 10px; }
  .login-a-values > div { font-size: 12px; }
  .login-a-auth { padding-inline: 28px; }
}
@media (max-width: 700px) {
  .login-a-page { overflow-x: hidden; }
  .login-a-page .login-language-switch { top: 14px; right: 14px; }
  .login-a-design-badge { top: 8px; left: 8px; height: 43px; gap: 6px; padding: 0 12px 0 5px; border-radius: 12px 0 22px 12px; }
  .login-a-design-badge span { width: 38px; height: 38px; border-radius: 10px; font-size: 27px; }
  .login-a-design-badge strong { font-size: clamp(10px,2.7vw,14px); }
  .login-a-layout {
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: 328px auto;
    grid-template-areas: "brand" "auth";
    min-height: 100vh;
    min-height: 100svh;
  }
  .login-a-layout::before { background-position: center center; }
  .login-a-layout::after { background: linear-gradient(180deg,rgba(225,240,255,.08) 0%,rgba(225,240,255,0) 28%,rgba(7,27,49,.30) 100%); }
  .login-a-brand { align-items: flex-start; padding: 82px 24px 0; }
  .login-a-brand-copy { width: 100%; }
  .login-a-brand-copy { transform: translateY(0); }
  .login-a-brand-copy { align-items: flex-start; }
  .login-a-page .login-logo { width: min(210px,72%); }
  .login-a-values {
    position: static;
    width: min(100%, 370px);
    justify-content: space-between;
    flex-direction: row;
    gap: 8px;
    margin: 23px auto 0;
    padding: 0;
  }
  .login-a-values > div { display: grid; grid-template-rows: 28px auto; justify-items: center; gap: 4px; min-width: 0; font-size: 10px; text-align: center; }
  .login-a-values .login-value-icon svg { width: 21px; height: 21px; }
  .login-a-auth { padding: 28px 20px 34px; background: transparent; }
  .login-a-auth .login-card-wrap { width: 100%; max-width: 420px; }
  .login-a-page .login-panel { padding: 27px 24px 25px; gap: 15px; }
  .login-a-page .login-panel input { height: 48px; font-size: 16px; }
  .login-a-page .login-form-heading h2 { font-size: 22px; }
  .login-a-page .login-card-foot { font-size: 9px; gap: 9px; }
}
@media (max-width: 380px) {
  .login-a-layout { grid-template-rows: 312px auto; }
  .login-a-brand { padding-inline: 20px; }
  .login-a-values { margin-top: 18px; }
  .login-a-values > div { font-size: 9px; }
  .login-a-auth { padding-inline: 15px; }
  .login-a-page .login-panel { padding-inline: 20px; }
}

/* Minimal login composition: brand mark and authentication card only. */
.login-a-brand {
  align-items: center;
  justify-content: center;
  padding: 24px 24px 10px;
}
.login-a-brand-copy { align-items: center; transform: none; }
.login-a-page .login-logo { width: min(320px, 82vw); filter: none; }
.login-a-layout {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  grid-template-areas: "brand" "auth";
  align-content: center;
  justify-items: center;
  width: min(100%, 900px);
}
.login-a-auth { padding: 10px 24px 24px; }
.login-a-auth .login-card-wrap { width: min(100%, 560px); }
@media (max-width: 700px) {
  .login-a-layout {
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: auto auto;
    grid-template-areas: "brand" "auth";
  }
  .login-a-brand { padding: 18px 24px 10px; }
  .login-a-brand-copy { align-items: center; width: 100%; }
  .login-a-page .login-logo { width: min(230px, 70vw); }
  .login-a-auth { padding: 10px 18px 24px; }
}
@media (max-width: 380px) {
  .login-a-auth { padding-inline: 14px; }
}

/* Compact workflow forms and genuine attachment inputs. */
#ccWorkflowForm { max-width: 920px; }
#ccWorkflowForm > button { margin-top: 18px; }
.cc-photo-field, .cc-upload-panel { padding: 18px; border: 1px dashed var(--border, #cbd5e1); border-radius: 12px; background: var(--surface, #fff); }
.cc-photo-field small { color: var(--text-muted, #64748b); font-weight: 400; line-height: 1.6; }
.cc-photo-field input { max-width: 100%; min-width: 0; }
.cc-photo-preview { display: flex; flex-wrap: wrap; gap: 12px; }
.app-shell .cc-field.cc-photo-field > span.cc-photo-preview::after { content: none; }
.app-shell .crumb-home { border: 0; background: none; color: var(--muted); font: inherit; cursor: pointer; padding: 0; }
.app-shell .page-crumb { display: flex; align-items: center; gap: 10px; }
.cc-photo-preview figure { margin: 0; width: 88px; }
.cc-photo-preview img { width: 88px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid #e2e8f0; }
.cc-photo-preview figcaption { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 400; }
.cc-field[hidden] { display: none !important; }
.cc-eta-stat strong { font-size: clamp(20px, 2vw, 28px); white-space: nowrap; }
.cc-upload-panel { margin-top: 24px; }
.cc-region-directory-row { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--border, #e2e8f0); }
.cc-region-directory-row:last-child { border-bottom: 0; }
.cc-region-directory-row small { display: block; color: var(--text-muted, #64748b); margin-top: 5px; }
.content[aria-busy="true"] { cursor: progress; }
.content[aria-busy="true"]::before { content: ""; position: fixed; height: 3px; top: 0; left: 0; right: 0; background: #2563eb; z-index: 100; }
@media (max-width: 900px) {
  .app-shell:not(.nav-open) .sidebar { box-shadow: none; }
}
@media (max-width: 700px) {
  .cc-photo-field, .cc-upload-panel { padding: 12px; }
  .cc-region-directory-row { gap: 10px; }
  .cc-region-directory-row > div { min-width: 0; overflow-wrap: anywhere; }
  .cc-region-directory-row button { flex-shrink: 0; }
}
/* Explicitly isolated sample-data panels for the approved dashboard layout preview. */
.cc-layout-preview { border:1px dashed #9dbce5; background:linear-gradient(135deg,#fff 0%,#f4f9ff 100%); }
.cc-sample-badge { display:inline-flex; align-items:center; border:1px solid #78a9e7; border-radius:999px; color:#175cae; background:#edf6ff; font-size:.75rem; font-weight:700; padding:.18rem .52rem; white-space:nowrap; }
.cc-layout-preview small { display:block; color:#5e7595; font-size:.78rem; margin-top:.65rem; }
.cc-sample-progress { display:grid; gap:.62rem; margin-top:.2rem; }
.cc-sample-progress span { display:grid; grid-template-columns:70px minmax(72px,1fr) 34px; gap:.45rem; align-items:center; color:#173d71; font-weight:650; font-size:.86rem; }
.cc-sample-progress i { display:block; height:.55rem; background:#e5edf7; border-radius:999px; overflow:hidden; }
.cc-sample-progress b { display:block; height:100%; background:linear-gradient(90deg,#1688eb,#12ba96); border-radius:inherit; }
.cc-sample-list { list-style:none; padding:0; margin:.15rem 0 0; }
.cc-sample-list li { border-top:1px solid #e5edf7; color:#173d71; font-size:.88rem; padding:.55rem 0 .55rem 1.25rem; position:relative; }
.cc-sample-list li::before { content:'•'; color:#1474ed; font-size:1.25rem; left:.25rem; position:absolute; top:.36rem; }
@media (max-width:700px){.cc-sample-progress span{grid-template-columns:62px minmax(60px,1fr) 32px}.cc-layout-preview{min-width:0}}
.app-shell .cc-ui-icon{width:24px;height:24px;flex:0 0 24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.app-shell .cc-overview-card>.cc-ui-icon{color:var(--brand);margin-bottom:6px}.app-shell .cc-dashboard-list button>.cc-ui-icon{color:var(--brand);margin-right:10px}

.app-shell .nav-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; background: #D93F3F; color: #fff; border: 0; }
.app-shell .nav-count[hidden] { display: none; }

/* Approved pastel metric cards: control center and daily deposits only. */
.app-shell .cc-c-header { border-bottom: 0; padding-bottom: 24px; }
.app-shell .dashboard-metric-tray {
  display: grid; grid-template-columns: repeat(4,minmax(0,1fr)) minmax(225px,1.2fr);
  gap: 14px; padding: 14px; margin: 0 0 12px; border: 1px solid #fff;
  border-radius: 23px; background: rgba(255,255,255,.68); box-shadow: 0 5px 22px #24395106;
}
.app-shell .dashboard-metric-tray .dashboard-metric {
  --metric-accent: #2971ff; --metric-value: #18355e; --metric-tint: #ecf3ff; --metric-end: #e8f0ff;
  display: flex; flex-direction: row; align-items: center; gap: 12px; min-width: 0;
  min-height: 124px; padding: 22px 16px; border: 1px solid #ffffff8a; border-radius: 16px;
  background: linear-gradient(125deg,var(--metric-tint),var(--metric-end));
  box-shadow: 0 4px 12px #304c7506; text-align: left; font: inherit;
}
.app-shell .dashboard-metric-tray .dashboard-metric-green { --metric-accent:#0caa73; --metric-value:#0b805b; --metric-tint:#edfbf5; --metric-end:#e7f7f0; }
.app-shell .dashboard-metric-tray .dashboard-metric-orange { --metric-accent:#fa841d; --metric-value:#d96312; --metric-tint:#fff7ef; --metric-end:#fff1e7; }
.app-shell .dashboard-metric-tray .dashboard-metric-purple { --metric-accent:#9048e7; --metric-value:#7431ba; --metric-tint:#f6f0ff; --metric-end:#f1eaff; }
.app-shell .dashboard-metric-tray .dashboard-metric-sky { --metric-accent:#247aff; --metric-value:#0e61e5; --metric-tint:#eef7ff; --metric-end:#e6f3ff; }
.app-shell .dashboard-metric-tray .dashboard-metric-icon {
  display:grid; place-items:center; flex:0 0 auto; width:52px; height:52px; border-radius:50%;
  border:1px solid #fff8; background:#ffffffa6; color:var(--metric-accent);
}
.app-shell .dashboard-metric-icon svg { width:29px; height:29px; }
.app-shell .dashboard-metric-copy { display:flex; flex-direction:column; gap:11px; min-width:0; }
.app-shell .dashboard-metric-tray .dashboard-metric-label { color:#5f6f81; font-size:14px; font-weight:550; line-height:1.35; overflow-wrap:anywhere; }
.app-shell .dashboard-metric-tray .dashboard-metric strong { color:var(--metric-value); font-size:32px; font-weight:700; line-height:1.05; font-variant-numeric:tabular-nums; letter-spacing:-.7px; overflow-wrap:anywhere; }
.app-shell .dashboard-metric-tray .dashboard-metric-chevron { color:var(--metric-accent); opacity:.65; margin-left:auto; width:14px; height:18px; flex:0 0 auto; }
.app-shell .dashboard-metric-tray .dashboard-metric-date strong { font-size:25px; letter-spacing:-.8px; white-space:nowrap; overflow-wrap:normal; }
.app-shell .dashboard-metric-date .dashboard-metric-icon { width:50px; height:50px; }
.app-shell .dashboard-metric-tray button.dashboard-metric:hover { filter:brightness(.98); box-shadow:0 6px 16px #304c7510; }
.app-shell .dashboard-metric-tray button.dashboard-metric:focus-visible { outline:3px solid #93b7ff; outline-offset:3px; }
.app-shell .deposit-summary.dashboard-metric-tray { grid-template-columns:repeat(3,minmax(0,1fr)) minmax(280px,1.25fr); margin:16px 0 24px; }
.app-shell .deposit-summary .dashboard-metric { min-height:138px; }
.app-shell .dashboard-metric-tray .deposit-progress { display:flex; flex-direction:column; align-items:stretch; justify-content:center; gap:12px; padding:22px 23px; }
.app-shell .dashboard-metric-tray .deposit-progress-top { align-items:center; color:#5f6f81; font-size:14px; font-weight:550; }
.app-shell .dashboard-metric-tray .deposit-progress-top strong { font-size:28px; white-space:nowrap; }
.app-shell .dashboard-metric-tray .deposit-progress-track { height:7px; flex-shrink:0; background:#d4e7f9; }
.app-shell .dashboard-metric-tray .deposit-progress-track span { background:#3586ed; }
.app-shell .dashboard-metric-tray .deposit-progress small { font-size:12px; color:#60788e; line-height:1.5; }
.app-shell[data-theme="dark"] .dashboard-metric-tray { background:#152232; border-color:#29394c; }
.app-shell[data-theme="dark"] .dashboard-metric-tray .dashboard-metric { --metric-accent:#7eaaff; --metric-value:#b6ceff; --metric-tint:#1d304a; --metric-end:#223654; border-color:#ffffff09; }
.app-shell[data-theme="dark"] .dashboard-metric-tray .dashboard-metric-green { --metric-accent:#49d6a8; --metric-value:#80e3be; --metric-tint:#173b34; --metric-end:#1a4039; }
.app-shell[data-theme="dark"] .dashboard-metric-tray .dashboard-metric-orange { --metric-accent:#ffb26e; --metric-value:#ffc08a; --metric-tint:#3e3027; --metric-end:#493329; }
.app-shell[data-theme="dark"] .dashboard-metric-tray .dashboard-metric-purple { --metric-accent:#bc95ff; --metric-value:#cbb0ff; --metric-tint:#302741; --metric-end:#382c4c; }
.app-shell[data-theme="dark"] .dashboard-metric-tray .dashboard-metric-sky { --metric-accent:#72baff; --metric-value:#9bccff; --metric-tint:#1b3549; --metric-end:#1e3c55; }
.app-shell[data-theme="dark"] .dashboard-metric-tray .dashboard-metric-icon { background:#ffffff0c; border-color:#ffffff0a; }
.app-shell[data-theme="dark"] .dashboard-metric-tray .dashboard-metric-label,
.app-shell[data-theme="dark"] .dashboard-metric-tray .deposit-progress-top,
.app-shell[data-theme="dark"] .dashboard-metric-tray .deposit-progress small { color:#b8c9da; }
.app-shell[data-theme="dark"] .dashboard-metric-tray .deposit-progress-track { background:#38556e; }
@media (max-width:1450px) {
  .app-shell .cc-c-metrics.dashboard-metric-tray { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .app-shell .cc-c-metrics .dashboard-metric-date { grid-column:span 2; }
  .app-shell .deposit-summary.dashboard-metric-tray { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px) {
  .app-shell .cc-c-metrics.dashboard-metric-tray { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .app-shell .dashboard-metric-tray { padding:10px; gap:10px; border-radius:18px; }
  .app-shell .dashboard-metric-tray .dashboard-metric-date { grid-column:1/-1; }
}
@media (max-width:600px) {
  .app-shell .dashboard-metric-tray { padding:8px; gap:8px; }
  .app-shell .dashboard-metric-tray .dashboard-metric { padding:18px 12px; min-height:118px; gap:9px; }
  .app-shell .dashboard-metric-tray .dashboard-metric-icon { width:38px; height:38px; }
  .app-shell .dashboard-metric-icon svg { width:23px; height:23px; }
  .app-shell .dashboard-metric-tray .dashboard-metric-label { font-size:12px; }
  .app-shell .dashboard-metric-tray .dashboard-metric strong { font-size:28px; }
  .app-shell .dashboard-metric-tray .dashboard-metric-chevron { display:none; }
  .app-shell .dashboard-metric-tray .dashboard-metric-date strong { font-size:25px; }
  .app-shell .deposit-summary .dashboard-metric { min-height:135px; }
  .app-shell .dashboard-metric-tray .deposit-progress { padding:18px 12px; gap:9px; }
  .app-shell .dashboard-metric-tray .deposit-progress-top { align-items:flex-start; flex-direction:column; font-size:12px; gap:6px; }
  .app-shell .dashboard-metric-tray .deposit-progress-top strong { font-size:24px; }
  .app-shell .dashboard-metric-tray .deposit-progress small { font-size:11px; }
}
@media (max-width:360px) {
  .app-shell .dashboard-metric-tray .dashboard-metric:not(.dashboard-metric-date):not(.deposit-progress) { flex-direction:column; align-items:flex-start; }
}

/* Department/personnel split view — approved scheme 2. */
.app-shell .cc-personnel-workspace { padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.app-shell .cc-personnel-workspace .cc-org-page-header { align-items:center; gap:20px; margin:6px 0 26px; }
.app-shell .cc-personnel-workspace .cc-org-page-header h2 { font-size:29px; font-weight:650; letter-spacing:-.5px; }
.app-shell .cc-personnel-workspace .cc-org-page-header p { margin-top:9px; color:var(--muted); font-size:14px; }
.app-shell .cc-personnel-header-actions { display:flex; flex-wrap:wrap; gap:12px; }
.app-shell .cc-personnel-header-actions .btn { padding:12px 18px; border-radius:10px; font-size:14px; }
.app-shell .cc-personnel-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; }
.app-shell .cc-personnel-toolbar > span { font-size:12px; color:var(--muted); }
.app-shell .cc-personnel-search { display:flex; align-items:center; gap:10px; width:min(460px,100%); min-width:0; padding:11px 14px; border:1px solid #e2e8f0; border-radius:10px; background:#fff; color:#98a5b5; }
.app-shell .cc-personnel-search svg { flex:0 0 auto; width:18px; height:18px; }
.app-shell .cc-personnel-search input { min-width:0; width:100%; padding:0; border:0; background:transparent; box-shadow:none; color:var(--ink); font:inherit; font-size:13px; }
.app-shell .cc-personnel-search:focus-within { outline:2px solid #94b9ff; outline-offset:2px; }
.app-shell .cc-personnel-layout { display:grid; grid-template-columns:285px minmax(0,1fr); gap:24px; align-items:start; }
.app-shell .cc-personnel-layout * { box-sizing:border-box; }
.app-shell .cc-personnel-blue { --personnel-tint:#eaf2ff; --personnel-ink:#2868db; --personnel-pale:#f6f9ff; --personnel-line:#d9e5fb; }
.app-shell .cc-personnel-green { --personnel-tint:#e6f7ef; --personnel-ink:#13956a; --personnel-pale:#f4fbf7; --personnel-line:#cfecdf; }
.app-shell .cc-personnel-purple { --personnel-tint:#f2ebff; --personnel-ink:#8952cb; --personnel-pale:#faf7ff; --personnel-line:#e6dcf5; }
.app-shell .cc-personnel-orange { --personnel-tint:#fff2e5; --personnel-ink:#db7a27; --personnel-pale:#fffbf5; --personnel-line:#f5e3ce; }
.app-shell .cc-personnel-sky { --personnel-tint:#e8f5ff; --personnel-ink:#268cc9; --personnel-pale:#f5fbff; --personnel-line:#d6eaf8; }
.app-shell .cc-personnel-rose { --personnel-tint:#ffedf2; --personnel-ink:#cf618b; --personnel-pale:#fff8fa; --personnel-line:#f4dce6; }
.app-shell .cc-personnel-slate { --personnel-tint:#edf2f7; --personnel-ink:#627895; --personnel-pale:#f8fafc; --personnel-line:#dce5ef; }
.app-shell .cc-personnel-departments { display:flex; flex-direction:column; gap:11px; padding:12px; border:1px solid #e4ebf3; border-radius:20px; background:#fff; }
.app-shell .cc-personnel-choice { display:flex; align-items:center; gap:14px; width:100%; min-width:0; min-height:78px; padding:16px 14px; border:1px solid transparent; border-radius:14px; background:var(--personnel-pale); color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.app-shell .cc-personnel-choice:hover { border-color:var(--personnel-line); }
.app-shell .cc-personnel-choice.active { background:var(--personnel-tint); border-color:var(--personnel-line); box-shadow:0 3px 9px #2f68df08; }
.app-shell .cc-personnel-department-icon { display:grid; place-items:center; flex:0 0 auto; width:42px; height:42px; background:#ffffffb3; border:1px solid #ffffffb8; border-radius:50%; color:var(--personnel-ink); }
.app-shell .cc-personnel-department-icon svg { width:22px; height:22px; }
.app-shell .cc-personnel-department-copy { min-width:0; flex:1; }
.app-shell .cc-personnel-department-copy strong { display:block; font-size:17px; font-weight:650; line-height:1.4; overflow-wrap:anywhere; }
.app-shell .cc-personnel-department-copy small { display:block; color:var(--muted); font-size:12px; margin-top:5px; line-height:1.5; }
.app-shell .cc-personnel-count { margin-left:auto; flex:0 0 auto; color:var(--personnel-ink); font-size:23px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.app-shell .cc-personnel-count small { margin-left:4px; color:var(--muted); font-size:12px; font-weight:400; }
html[lang="en"] .app-shell .cc-personnel-choice { gap:10px; }
html[lang="en"] .app-shell .cc-personnel-count { display:flex; flex-direction:column; align-items:flex-end; line-height:1.2; }
html[lang="en"] .app-shell .cc-personnel-count small { margin:3px 0 0; font-size:10px; }
.app-shell .cc-personnel-detail { min-width:0; }
.app-shell .cc-personnel-panel { overflow:hidden; min-width:0; border:1px solid #e2e9f2; border-radius:20px; background:#fff; }
.app-shell .cc-personnel-detail-head { display:flex; align-items:center; gap:16px; min-width:0; padding:25px; background:linear-gradient(110deg,var(--personnel-tint),var(--personnel-pale)); }
.app-shell .cc-personnel-detail-head > div { min-width:0; }
.app-shell .cc-personnel-detail-head .cc-personnel-department-icon { width:62px; height:62px; }
.app-shell .cc-personnel-detail-head .cc-personnel-department-icon svg { width:29px; height:29px; }
.app-shell .cc-personnel-detail-head h3 { margin:0; font-size:24px; font-weight:650; color:var(--ink); overflow-wrap:anywhere; }
.app-shell .cc-personnel-detail-head p { margin:8px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }
.app-shell .cc-personnel-detail-head .btn { flex:0 0 auto; margin-left:auto; background:#fff; }
.app-shell .cc-personnel-detail-body { padding:22px 25px; }
.app-shell .cc-personnel-list-heading { display:flex; justify-content:space-between; gap:14px; color:var(--muted); font-size:13px; margin-bottom:14px; }
.app-shell .cc-personnel-layout .cc-person-row { display:flex; align-items:center; gap:15px; width:100%; min-width:0; margin:0 0 14px; padding:21px; border:1px solid #e8edf4; border-radius:13px; background:#fff; color:var(--ink); text-align:left; }
.app-shell .cc-personnel-layout .cc-person-row::before { content:none; }
.app-shell .cc-personnel-layout .cc-person-row:hover { border-color:var(--personnel-line); background:var(--personnel-pale); }
.app-shell .cc-personnel-layout .cc-person-row:focus-visible,
.app-shell .cc-personnel-choice:focus-visible { outline:3px solid #94b9ff; outline-offset:3px; }
.app-shell .cc-personnel-avatar { display:grid; place-items:center; width:48px; height:48px; flex:0 0 auto; border-radius:50%; background:var(--personnel-tint); color:var(--personnel-ink); font-size:16px; font-weight:650; }
.app-shell .cc-personnel-person-copy { flex:1 1 auto; min-width:0; }
.app-shell .cc-personnel-person-copy strong { display:block; color:var(--ink); font-size:15px; font-weight:600; overflow-wrap:anywhere; }
.app-shell .cc-personnel-person-copy small { display:block; color:var(--muted); font-size:12px; margin-top:7px; line-height:1.5; overflow-wrap:anywhere; }
.app-shell .cc-personnel-status { display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; padding:7px 12px; border-radius:20px; background:#eff9f4; color:#219168; font-size:11px; white-space:nowrap; }
.app-shell .cc-personnel-status::before { content:''; width:5px; height:5px; flex:0 0 auto; border-radius:50%; background:currentColor; }
.app-shell .cc-personnel-status.is-disabled { color:#b75357; background:#fff0f0; }
.app-shell .cc-personnel-status.is-unlinked { color:#758397; background:#f0f3f7; }
.app-shell .cc-personnel-edit { flex:0 0 auto; color:#4e7ad5; font-size:12px; padding-left:8px; }
.app-shell .cc-personnel-add { margin-top:2px; }
.app-shell .cc-personnel-footnote { margin:30px 0 0; padding-top:18px; border-top:1px solid #edf0f5; color:var(--muted); font-size:12px; line-height:1.7; }
.app-shell .cc-personnel-empty { color:var(--muted); text-align:center; padding:22px 8px; font-size:13px; }
.app-shell .cc-personnel-empty-panel { border:1px solid #e4ebf3; border-radius:20px; background:#fff; padding:50px 25px; color:var(--muted); text-align:center; }
.app-shell .cc-personnel-empty-panel h3 { color:var(--ink); font-size:20px; margin:0 0 12px; }
.app-shell .cc-personnel-empty-panel p { font-size:13px; }
.app-shell[data-theme="dark"] .cc-personnel-blue { --personnel-tint:#223654; --personnel-ink:#9ec0ff; --personnel-pale:#1b2b42; --personnel-line:#355078; }
.app-shell[data-theme="dark"] .cc-personnel-green { --personnel-tint:#1a4039; --personnel-ink:#80e3be; --personnel-pale:#17312d; --personnel-line:#2e5b4d; }
.app-shell[data-theme="dark"] .cc-personnel-purple { --personnel-tint:#382c4c; --personnel-ink:#cbb0ff; --personnel-pale:#2b233b; --personnel-line:#51436b; }
.app-shell[data-theme="dark"] .cc-personnel-orange { --personnel-tint:#493329; --personnel-ink:#ffc08a; --personnel-pale:#37291f; --personnel-line:#68503b; }
.app-shell[data-theme="dark"] .cc-personnel-sky { --personnel-tint:#1e3c55; --personnel-ink:#9bccff; --personnel-pale:#192f41; --personnel-line:#355570; }
.app-shell[data-theme="dark"] .cc-personnel-rose { --personnel-tint:#432b3b; --personnel-ink:#f5aac7; --personnel-pale:#35212e; --personnel-line:#674157; }
.app-shell[data-theme="dark"] .cc-personnel-slate { --personnel-tint:#2a3645; --personnel-ink:#b4c6df; --personnel-pale:#202c3a; --personnel-line:#3c4d61; }
.app-shell[data-theme="dark"] .cc-personnel-departments,
.app-shell[data-theme="dark"] .cc-personnel-panel,
.app-shell[data-theme="dark"] .cc-personnel-empty-panel,
.app-shell[data-theme="dark"] .cc-personnel-search,
.app-shell[data-theme="dark"] .cc-personnel-detail-head .btn,
.app-shell[data-theme="dark"] .cc-personnel-layout .cc-person-row { background:var(--surface); border-color:var(--line); }
.app-shell[data-theme="dark"] .cc-personnel-department-icon { background:#ffffff0a; border-color:#ffffff0c; }
.app-shell[data-theme="dark"] .cc-personnel-status { background:#163d30; color:#85d9b4; }
.app-shell[data-theme="dark"] .cc-personnel-status.is-disabled { background:#482b30; color:#f6a6ab; }
.app-shell[data-theme="dark"] .cc-personnel-status.is-unlinked { background:#2b3747; color:#b8c9df; }
.app-shell[data-theme="dark"] .cc-personnel-edit { color:#9abfff; }
.app-shell[data-theme="dark"] .cc-personnel-footnote { border-color:var(--line); }
@media(max-width:1200px) {
  .app-shell .cc-personnel-layout { grid-template-columns:250px minmax(0,1fr); gap:18px; }
  .app-shell .cc-personnel-choice { padding:14px 10px; gap:9px; }
  .app-shell .cc-personnel-detail-head { padding:22px 18px; gap:12px; }
  .app-shell .cc-personnel-detail-body { padding:20px 18px; }
  .app-shell .cc-personnel-layout .cc-person-row { flex-wrap:wrap; padding:18px; gap:12px; }
  .app-shell .cc-personnel-person-copy { flex-basis:calc(100% - 62px); }
  .app-shell .cc-personnel-status { margin-left:60px; }
  .app-shell .cc-personnel-edit { margin-left:auto; }
}
@media(max-width:760px) {
  .app-shell .cc-personnel-layout { grid-template-columns:1fr; gap:18px; }
  .app-shell .cc-personnel-departments { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; padding:10px; border-radius:16px; }
  .app-shell .cc-personnel-choice { gap:8px; padding:13px 10px; }
  .app-shell .cc-personnel-department-copy strong { font-size:15px; }
  .app-shell .cc-personnel-department-copy small { font-size:11px; }
  .app-shell .cc-personnel-department-icon { width:34px; height:34px; }
  .app-shell .cc-personnel-count { font-size:20px; }
  .app-shell .cc-personnel-count small { font-size:11px; }
  .app-shell .cc-personnel-toolbar > span { display:none; }
  .app-shell .cc-personnel-search { width:100%; }
  .app-shell .cc-personnel-search input { font-size:16px; }
  .app-shell .cc-personnel-workspace .cc-org-page-header { align-items:flex-start; flex-direction:column; gap:20px; margin-bottom:20px; }
  .app-shell .cc-personnel-header-actions .btn { font-size:13px; padding:10px 14px; }
  .app-shell .cc-personnel-detail-head { flex-wrap:wrap; }
  .app-shell .cc-personnel-detail-head .cc-personnel-department-icon { width:48px; height:48px; }
  .app-shell .cc-personnel-detail-head h3 { font-size:21px; }
  .app-shell .cc-personnel-detail-head > div { flex:1 1 calc(100% - 64px); }
  .app-shell .cc-personnel-detail-head .btn { margin-left:60px; }
}
@media(max-width:400px) {
  .app-shell .cc-personnel-departments { grid-template-columns:1fr; }
  .app-shell .cc-personnel-choice { padding:12px; }
  .app-shell .cc-personnel-status { margin-left:0; }
  .app-shell .cc-personnel-layout .cc-person-row { padding:16px; }
}