:root { color: #172238; background: #f3f5f8; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; font-synthesis: none; --ink: #152137; --muted: #778397; --line: #e2e7ed; --panel: #ffffff; --navy: #0a172a; --navy-soft: #133954; --teal: #0a7477; --teal-soft: #e8f5f3; --blue: #2c5d7d; --amber: #aa6b22; --red: #b84654; --shadow: 0 14px 38px rgba(20, 37, 59, 0.07); } * { box-sizing: border-box; } html, body { min-width: 0; min-height: 100%; margin: 0; } body { background: #f3f5f8; } button, input, select, textarea { color: inherit; font: inherit; } button { cursor: pointer; } [hidden] { display: none !important; } button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid rgba(24, 126, 132, .3); outline-offset: 2px; } .skip-link { position: fixed; z-index: 1000; top: 10px; left: 10px; padding: 10px 14px; border-radius: 8px; color: #fff; background: #0b6066; transform: translateY(-150%); transition: transform .16s; } .skip-link:focus { transform: translateY(0); } .eyebrow { margin: 0 0 9px; color: var(--teal); font-size: 11px; font-weight: 750; letter-spacing: .18em; text-transform: uppercase; } .brand { display: flex; align-items: center; gap: 13px; } .brand__mark { display: grid; width: 39px; height: 39px; place-items: center; border: 1px solid rgba(255,255,255,.32); border-radius: 11px; background: rgba(255,255,255,.08); font-size: 20px; font-weight: 800; } .brand strong, .brand small { display: block; } .brand strong { font-size: 16px; letter-spacing: .14em; } .brand small { margin-top: 4px; color: rgba(236,244,252,.52); font-size: 9px; letter-spacing: .14em; } .brand--light { color: #f8fbff; } .brand--company { flex-direction: column; align-items: flex-start; gap: 8px; } .brand__logo-plate { position: relative; display: flex; width: 236px; height: auto; aspect-ratio: 3 / 1; align-items: center; overflow: hidden; background: transparent; } .brand__logo-plate img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: left center; } .brand__logo-base { filter: grayscale(1) brightness(0) invert(1); } .brand__logo-red { position: absolute; inset: 0; clip-path: inset(0 66.23% 0 0); pointer-events: none; } .brand--company > small { color: rgba(236,244,252,.58); font-size: 9px; font-weight: 650; letter-spacing: .17em; } .login-view { position: relative; display: grid; min-height: 100vh; overflow: hidden; grid-template-columns: minmax(560px, 1.12fr) minmax(500px, .88fr); background: #0a172a; } .login-showcase { position: relative; z-index: 2; display: flex; min-height: 100vh; padding: 48px 7vw 56px; flex-direction: column; color: #f7fbff; background: linear-gradient(145deg, rgba(9,24,44,.94), rgba(15,61,80,.88)); } .login-showcase__content { max-width: 680px; margin: auto 0 42px; } .login-showcase__content .eyebrow { color: #6fd0c8; } .login-showcase h1 { margin: 20px 0 24px; font-size: clamp(44px, 4.4vw, 72px); font-weight: 660; line-height: 1.16; letter-spacing: -.045em; } .login-showcase__content > p:last-child { max-width: 600px; margin: 0; color: rgba(232,241,249,.68); font-size: 16px; line-height: 1.9; } #login-quote-source { color: #79d5cd; font-size: 12px; font-weight: 700; letter-spacing: .04em; } .login-proof { display: grid; padding-top: 30px; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.14); } .login-proof div { padding-right: 28px; border-right: 1px solid rgba(255,255,255,.1); } .login-proof div + div { padding-left: 28px; } .login-proof div:last-child { border-right: 0; } .login-proof strong, .login-proof span { display: block; } .login-proof strong { color: #f8fbff; font-size: 16px; font-weight: 650; } .login-proof span { margin-top: 7px; color: rgba(234,243,251,.5); font-size: 12px; } .login-panel { position: relative; z-index: 3; display: grid; padding: 54px; place-items: center; background: #f7f8fa; } .login-card { width: min(420px, 100%); } .login-card__mobile-brand { display: none; } .login-card h2 { margin: 0; color: var(--ink); font-size: 31px; font-weight: 680; letter-spacing: -.025em; } .login-card__intro { margin: 13px 0 35px; color: var(--muted); font-size: 14px; line-height: 1.7; } .input-label { display: block; margin-top: 21px; color: #435066; font-size: 12px; font-weight: 650; } .input-shell { display: flex; height: 52px; margin-top: 9px; padding: 0 15px; align-items: center; border: 1px solid #d9e0e8; border-radius: 11px; background: #fff; transition: border .2s, box-shadow .2s; } .input-shell:focus-within { border-color: #548a96; box-shadow: 0 0 0 4px rgba(15,114,119,.08); } .input-shell b { margin-right: 13px; padding-right: 13px; border-right: 1px solid #e1e6eb; color: #516076; font-size: 13px; } .input-shell input { min-width: 0; height: 100%; flex: 1; border: 0; outline: 0; background: transparent; font-size: 14px; } .input-shell input::placeholder { color: #a9b1bc; } .text-button { padding: 7px 0 7px 14px; border: 0; color: var(--teal); background: transparent; font-size: 12px; font-weight: 680; } .text-button--strong { padding: 7px 10px; border-radius: 7px; color: #fff; background: linear-gradient(135deg, #174b65, #0b7778); } .form-error { min-height: 20px; margin: 10px 0 0; color: var(--red); font-size: 12px; } .button { height: 42px; padding: 0 18px; border: 0; border-radius: 9px; font-size: 13px; font-weight: 650; } .button--primary { color: #fff; background: linear-gradient(135deg, #173a58, #0b7378); box-shadow: 0 12px 24px rgba(13,80,95,.17); } .button--wide { width: 100%; height: 52px; font-size: 14px; } .button--quiet { border: 1px solid var(--line); color: #5d697a; background: #fff; } .button--soft { color: #0b696c; background: var(--teal-soft); } .button--danger { border: 1px solid #ebc8ce; color: #a33e4c; background: #fff5f6; } .privacy-copy { margin: 14px 0 28px; color: #9aa3af; font-size: 11px; text-align: center; } .demo-login { padding-top: 23px; border-top: 1px solid var(--line); } .demo-login > div { display: flex; margin-bottom: 12px; align-items: center; justify-content: space-between; } .demo-login span { color: #495669; font-size: 12px; font-weight: 680; } .demo-login small { color: #9aa3ae; font-size: 10px; } .demo-login > button { width: 100%; height: 39px; margin-top: 8px; border: 1px solid #e0e5eb; border-radius: 8px; color: #5c6879; background: #fff; font-size: 12px; text-align: left; padding: 0 13px; } .demo-login > button:hover { border-color: #89afb4; color: #0b696c; background: #f3f9f8; } .login-ambient { position: absolute; z-index: 1; border-radius: 50%; filter: blur(2px); opacity: .6; } .login-ambient--one { top: -180px; left: 31%; width: 510px; height: 510px; background: radial-gradient(circle, rgba(25,155,153,.28), transparent 68%); } .login-ambient--two { bottom: -280px; left: -100px; width: 640px; height: 640px; background: radial-gradient(circle, rgba(49,99,135,.36), transparent 68%); } .app-shell { display: grid; min-width: 0; min-height: 100vh; grid-template-columns: 238px minmax(0, 1fr); } .sidebar { position: sticky; top: 0; display: flex; height: 100vh; padding: 27px 20px 22px; flex-direction: column; color: #dce7f1; background: linear-gradient(180deg, #091629 0%, #0e263c 68%, #0c3c4c 100%); } .sidebar__brand { padding: 0 8px 28px; border-bottom: 1px solid rgba(255,255,255,.09); } .sidebar__brand .brand__logo-plate { width: 100%; max-width: 236px; height: auto; aspect-ratio: 3 / 1; } .sidebar__brand > small { letter-spacing: .12em; } .scope-card { margin: 22px 4px 18px; padding: 15px 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 11px; background: rgba(255,255,255,.055); } .scope-card strong, .scope-card span { display: block; } .scope-card strong { color: #f5f9fc; font-size: 13px; } .scope-card span { margin-top: 6px; color: rgba(223,235,244,.52); font-size: 10px; line-height: 1.5; } .primary-nav { display: grid; gap: 5px; } .nav-group-label { margin: 15px 13px 7px; color: rgba(221,232,241,.35); font-size: 9px; font-weight: 700; letter-spacing: .14em; } .nav-item { display: flex; width: 100%; height: 43px; padding: 0 13px; align-items: center; border: 0; border-radius: 9px; color: rgba(227,236,245,.67); background: transparent; font-size: 12px; text-align: left; transition: .18s ease; } .nav-item:hover { color: #fff; background: rgba(255,255,255,.07); } .nav-item.is-active { color: #fff; background: linear-gradient(90deg, rgba(31,128,133,.42), rgba(255,255,255,.07)); box-shadow: inset 2px 0 #71d2ca; } .nav-item__index { width: 25px; color: rgba(211,230,237,.4); font-size: 9px; letter-spacing: .08em; } .nav-item.is-active .nav-item__index { color: #7ed7d0; } .capacity-mini { margin-top: auto; padding: 16px 14px; border-top: 1px solid rgba(255,255,255,.09); } .capacity-mini > div:first-child { display: flex; justify-content: space-between; color: rgba(232,241,247,.67); font-size: 10px; } .capacity-mini strong { color: #fff; font-size: 11px; } .capacity-mini__track { height: 4px; margin: 11px 0 9px; overflow: hidden; border-radius: 3px; background: rgba(255,255,255,.1); } .capacity-mini__track i { display: block; height: 100%; border-radius: inherit; background: #6ed1c8; } .capacity-mini small { color: rgba(222,234,242,.38); font-size: 9px; } .workspace { min-width: 0; } .topbar { position: sticky; z-index: 10; top: 0; display: flex; min-height: 96px; padding: 19px 32px 17px; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(217,224,232,.86); background: rgba(248,249,251,.94); backdrop-filter: blur(16px); } .topbar > div:first-child { min-width: 0; } .topbar h1 { margin: 0; color: var(--ink); font-size: 25px; font-weight: 680; letter-spacing: -.025em; } .topbar__subtitle { margin: 5px 0 0; color: #8993a1; font-size: 11px; } .topbar__actions { display: flex; align-items: center; gap: 10px; } .compact-select { display: flex; height: 42px; padding: 0 12px; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 9px; color: #8993a1; background: #fff; font-size: 10px; } .compact-select select { border: 0; outline: 0; color: #364357; background: transparent; font-size: 12px; font-weight: 650; } .user-pill { display: flex; min-width: 172px; height: 42px; padding: 0 13px; align-items: center; border: 1px solid var(--line); border-radius: 9px; color: #314055; background: #fff; font-size: 11px; text-align: left; } .user-pill > .profile-avatar { width: 26px; height: 26px; margin-right: 9px; flex: 0 0 26px; border-radius: 8px; font-size: 10px; } .user-pill strong, .user-pill small { display: block; } .user-pill strong { font-size: 11px; } .user-pill small { margin-top: 2px; color: #8a95a5; font-size: 9px; font-weight: 400; } .page-content { min-width: 0; padding: 26px 32px 46px; overflow-x: clip; } .daily-quote { display: grid; min-width: 0; margin-bottom: 18px; padding: 14px 18px; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; overflow: hidden; border: 1px solid #dce7e9; border-radius: 12px; color: #30475b; background: linear-gradient(90deg, #eef8f6 0%, #ffffff 68%); box-shadow: 0 8px 24px rgba(24, 55, 74, .04); } .daily-quote > span { color: #087276; font-size: 9px; font-weight: 800; letter-spacing: .12em; white-space: nowrap; } .daily-quote > strong { min-width: 0; font-size: 13px; font-weight: 680; overflow-wrap: anywhere; } .daily-quote > small { color: #8a96a3; font-size: 9px; white-space: nowrap; } .daily-knowledge-grid { display: grid; margin-bottom: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; } .daily-knowledge-grid .daily-quote { margin: 0; grid-template-columns: auto minmax(0, 1fr); } .daily-knowledge-grid .daily-quote > small { grid-column: 2; } .daily-learning { display: grid; min-width: 0; padding: 14px 18px; grid-template-columns: 116px minmax(0, 1fr); gap: 16px; align-items: center; overflow: hidden; border: 1px solid #dce5eb; border-radius: 12px; background: linear-gradient(110deg, #edf3f8, #fff); box-shadow: 0 8px 24px rgba(24, 55, 74, .04); } .daily-learning__label span, .daily-learning__label small, .daily-learning__copy strong, .daily-learning__copy p, .daily-learning__copy small { display: block; } .daily-learning__label span { color: #087276; font-size: 11px; font-weight: 800; letter-spacing: .1em; } .daily-learning__label small { margin-top: 5px; color: #8a96a3; font-size: 8px; line-height: 1.5; } .daily-learning__copy strong { color: #263c52; font-size: 13px; } .daily-learning__copy p { margin: 4px 0; color: #69788a; font-size: 9px; line-height: 1.55; } .daily-learning__copy small { color: #0b7476; font-size: 8px; line-height: 1.5; } .section-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; } .metric-grid { display: grid; margin-bottom: 18px; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; } .panel { min-width: 0; border: 1px solid rgba(218,225,233,.9); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow); } .metric-card { position: relative; min-height: 132px; padding: 20px; overflow: hidden; } .metric-card::after { position: absolute; right: -28px; bottom: -52px; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, rgba(13,115,119,.07), transparent 70%); content: ''; } .metric-card__head { display: flex; align-items: center; justify-content: space-between; color: #7e8999; font-size: 11px; } .metric-card__signal { width: 31px; height: 3px; border-radius: 3px; background: var(--teal); } .metric-card strong { display: block; margin-top: 19px; color: var(--ink); font-size: 29px; font-weight: 700; letter-spacing: -.03em; } .metric-card p { margin: 9px 0 0; color: #9099a6; font-size: 10px; } .metric-card p.is-good { color: var(--teal); } .metric-card p.is-risk { color: var(--red); } .panel__head { display: flex; min-height: 61px; padding: 12px 20px; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid #edf0f3; } .panel__head > div { min-width: 0; } .panel__head h2 { margin: 0; color: #1c293d; font-size: 14px; font-weight: 680; } .panel__head p { margin: 4px 0 0; color: #98a1ad; font-size: 10px; line-height: 1.55; overflow-wrap: anywhere; } .panel__head .text-button { padding: 0; font-size: 10px; } .chart-panel { padding-bottom: 15px; } .chart-wrap { height: 260px; padding: 15px 18px 0; } .chart-wrap canvas { width: 100%; height: 100%; } .chart-legend { display: flex; padding: 7px 20px 0; gap: 20px; color: #7f8a99; font-size: 10px; } .chart-legend span::before { display: inline-block; width: 8px; height: 3px; margin: 0 6px 2px 0; border-radius: 2px; background: var(--teal); content: ''; } .chart-legend span:last-child::before { background: #8ba3b6; } .funnel-panel { margin-top: 18px; } .funnel-wrap { height: 205px; padding: 14px 18px; } .funnel-wrap canvas { width: 100%; height: 100%; } .risk-list { padding: 5px 18px 13px; } .risk-item { display: grid; width: 100%; min-height: 68px; padding: 14px 0; grid-template-columns: 9px minmax(0,1fr) auto; gap: 10px; align-items: center; border: 0; border-bottom: 1px solid #edf0f3; color: inherit; background: transparent; text-align: left; } .risk-item:hover { background: linear-gradient(90deg, transparent, #f7faf9); } .risk-item:last-child { border-bottom: 0; } .risk-item i { width: 7px; height: 7px; border-radius: 50%; background: #bc7a2b; } .risk-item strong, .risk-item span { display: block; } .risk-item strong { color: #344156; font-size: 11px; } .risk-item span { margin-top: 4px; color: #929ca9; font-size: 9px; } .risk-item b { color: var(--red); font-size: 13px; text-align: right; white-space: nowrap; } .team-list { padding: 5px 18px 13px; } .team-row { display: grid; min-height: 58px; grid-template-columns: 34px minmax(0,1fr) 70px 56px; gap: 9px; align-items: center; border-bottom: 1px solid #edf0f3; } .team-row:last-child { border-bottom: 0; } .avatar { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; color: #164057; background: #dceceb; font-size: 10px; font-weight: 720; } .profile-avatar { overflow: hidden; color: #fff; background: var(--profile-avatar-color, #31566f); } .profile-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; } .team-row strong, .team-row span { display: block; } .team-row .avatar { display: grid; margin-top: 0; color: #164057; } .team-row strong { color: #344156; font-size: 11px; } .team-row span { margin-top: 3px; color: #98a1ad; font-size: 9px; } .team-row__amount { color: #26384d; font-size: 11px; font-weight: 650; text-align: right; } .status { display: inline-flex; min-height: 23px; padding: 0 8px; align-items: center; justify-content: center; border-radius: 6px; color: #0a6d70; background: #e7f5f3; font-size: 9px; font-style: normal; white-space: nowrap; } .status--risk { color: #a44550; background: #fbecef; } .status--warn { color: #99611d; background: #fbf2e5; } .status--neutral { color: #657184; background: #edf0f4; } .toolbar { display: flex; margin-bottom: 15px; align-items: center; justify-content: space-between; } .toolbar__filters { display: flex; align-items: center; gap: 9px; } .toolbar__actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; } .category-tabs { display: inline-flex; margin-bottom: 16px; padding: 5px; gap: 3px; border-radius: 11px; background: #e8eef2; } .category-tabs button { min-height: 35px; padding: 0 16px; border: 0; border-radius: 8px; color: #6f7c8d; background: transparent; font-size: 10px; } .category-tabs button.is-active { color: #173b55; background: #fff; box-shadow: 0 3px 12px rgba(25,48,66,.08); font-weight: 700; } .search-input, .filter-select { height: 39px; border: 1px solid var(--line); border-radius: 8px; outline: 0; background: #fff; font-size: 11px; } .search-input { width: 250px; padding: 0 13px; } .filter-select { min-width: 126px; padding: 0 10px; color: #516075; } .data-panel { overflow-x: auto; overflow-y: hidden; } .table-scroll { overflow-x: auto; } .data-table { width: 100%; min-width: 820px; border-collapse: collapse; } .data-table th { height: 43px; padding: 0 15px; color: #8994a3; background: #f8f9fb; font-size: 9px; font-weight: 650; letter-spacing: .03em; text-align: left; } .data-table td { height: 61px; padding: 0 15px; border-top: 1px solid #edf0f3; color: #4d5a6d; font-size: 10px; } .data-table tbody tr { transition: background .15s; } .data-table tbody tr[data-open] { cursor: pointer; } .data-table tbody tr[data-open]:hover { background: #f7faf9; } .data-table td strong { color: #243248; font-size: 11px; font-weight: 650; } .data-table td small { display: block; margin-top: 4px; color: #969faa; font-size: 9px; } .pagination { display: flex; min-height: 52px; padding: 0 16px; align-items: center; justify-content: space-between; border-top: 1px solid #edf0f3; color: #9099a5; font-size: 9px; } .pagination button { width: 30px; height: 28px; margin-left: 5px; border: 1px solid var(--line); border-radius: 6px; color: #667285; background: #fff; } .org-layout { display: grid; grid-template-columns: 310px minmax(0,1fr); gap: 18px; } .org-tree { padding: 15px; } .org-node { margin-top: 7px; } .org-node__line { display: flex; min-height: 42px; padding: 0 12px; align-items: center; justify-content: space-between; border-radius: 8px; color: #4d5a6e; font-size: 11px; } .org-node__line:hover, .org-node__line.is-selected { color: #0b666a; background: #edf7f5; } .org-node__line span:last-child { color: #9aa3af; font-size: 9px; } .org-node--child { margin-left: 16px; padding-left: 11px; border-left: 1px solid #dfe5eb; } .org-summary { display: grid; padding: 20px; grid-template-columns: repeat(3, 1fr); gap: 12px; } .org-summary div { padding: 18px; border-radius: 10px; background: #f6f8fa; } .org-summary span, .org-summary strong { display: block; } .org-summary span { color: #8994a3; font-size: 10px; } .org-summary strong { margin-top: 10px; color: #203046; font-size: 20px; } .role-grid { display: grid; margin-bottom: 18px; grid-template-columns: repeat(4, 1fr); gap: 13px; } .role-card { padding: 18px; } .role-card__top { display: flex; align-items: center; justify-content: space-between; } .role-card__top strong { color: #27354a; font-size: 12px; } .role-card__top span { color: #0b7376; font-size: 18px; font-weight: 730; } .role-card p { min-height: 32px; margin: 13px 0; color: #8993a1; font-size: 9px; line-height: 1.7; } .role-tags { display: flex; flex-wrap: wrap; gap: 5px; } .role-tags span { padding: 5px 7px; border-radius: 5px; color: #637083; background: #f0f3f6; font-size: 8px; } .capacity-panel { display: grid; margin-bottom: 18px; padding: 20px; grid-template-columns: 1fr auto; gap: 16px; align-items: center; } .capacity-panel h2 { margin: 0; color: #26354a; font-size: 14px; } .capacity-panel p { margin: 6px 0 0; color: #8a95a4; font-size: 10px; } .capacity-panel strong { color: #0b7073; font-size: 24px; } .capacity-bar { grid-column: 1 / -1; height: 7px; overflow: hidden; border-radius: 6px; background: #e9edf1; } .capacity-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #285e7a, #0c7d7b); } .empty-copy { padding: 70px 20px; color: #8b96a5; font-size: 12px; text-align: center; } .security-note { display: flex; margin-top: 16px; padding: 13px 15px; align-items: center; justify-content: space-between; border: 1px solid #dbe8e6; border-radius: 10px; color: #5a6a7c; background: #f1f8f7; font-size: 10px; } .security-note strong { color: #0b6d70; } .security-note__risk { color: #9b5f18; font-weight: 650; } .crm-panel { grid-column: 1 / -1; } .crm-reminder-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .crm-reminder-list > button { display: grid; min-height: 76px; padding: 14px 18px; grid-template-columns: 9px minmax(0, 1fr) auto auto; gap: 11px; align-items: center; border: 0; border-right: 1px solid #edf0f3; border-bottom: 1px solid #edf0f3; background: transparent; text-align: left; } .crm-reminder-list > button:nth-child(2n) { border-right: 0; } .crm-reminder-dot { width: 8px; height: 8px; border-radius: 50%; background: #bd6a3d; box-shadow: 0 0 0 5px #fbede6; } .crm-reminder-list strong, .crm-reminder-list small { display: block; } .crm-reminder-list strong { color: #2a394d; font-size: 11px; } .crm-reminder-list small { margin-top: 5px; color: #929ca9; font-size: 9px; } .crm-reminder-list em { padding: 6px 8px; border-radius: 6px; color: #9c4f37; background: #fbece6; font-size: 9px; font-style: normal; white-space: nowrap; } .crm-reminder-list b { color: #263b50; font-size: 12px; white-space: nowrap; } .crm-reminder-empty { grid-column: 1 / -1; padding: 34px; color: #0b7477; text-align: center; } .report-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .export-button { min-width: 190px; } .export-hero { display: grid; margin: 0 0 18px; padding: 24px 26px; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; overflow: hidden; background: linear-gradient(135deg, #fff, #f0f8f6); } .export-hero h2 { margin: 0; color: #19344d; font-size: 19px; } .export-hero p:last-child { max-width: 720px; margin: 9px 0 0; color: #778595; font-size: 11px; line-height: 1.75; } .export-hero__meta { display: flex; min-width: 170px; min-height: 92px; padding: 15px 18px; flex-direction: column; justify-content: center; border: 1px solid #d7e7e4; border-radius: 12px; background: rgba(255,255,255,.82); } .export-hero__meta span, .export-hero__meta small { color: #84909d; font-size: 9px; } .export-hero__meta strong { margin: 8px 0 5px; color: #0b7174; font-size: 18px; } .modal-backdrop { position: fixed; z-index: 100; inset: 0; display: grid; padding: 30px; place-items: center; background: rgba(7,15,28,.48); backdrop-filter: blur(5px); } .modal { width: min(560px, 100%); max-height: 84vh; overflow: auto; border: 1px solid rgba(255,255,255,.6); border-radius: 16px; background: #fff; box-shadow: 0 30px 80px rgba(7,17,31,.24); } .modal--wide { width: min(820px, 100%); } .modal__head { display: flex; min-height: 65px; padding: 0 22px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); } .modal__head > div { min-width: 0; padding: 12px 0; } .modal__head h2 { margin: 0; color: #1e2c41; font-size: 16px; } .modal__head p { margin: 5px 0 0; color: #8a96a5; font-size: 10px; } .modal__close { width: auto; min-width: 58px; height: 34px; padding: 0 13px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 8px; color: #6b7788; background: #fff; white-space: nowrap; } .modal__body { padding: 22px; } .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; } .detail-grid div { padding: 13px; border-radius: 9px; background: #f6f8fa; } .detail-grid span, .detail-grid strong { display: block; } .detail-grid span { color: #8d97a5; font-size: 9px; } .detail-grid strong { margin-top: 7px; color: #29374c; font-size: 11px; } .modal__summary { margin: 18px 0 0; padding: 15px; border-left: 3px solid #3d8588; color: #536176; background: #f1f7f6; font-size: 11px; line-height: 1.8; } .modal-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .modal-form label { color: #5c697b; font-size: 10px; } .modal-form input, .modal-form select, .modal-form textarea { width: 100%; margin-top: 7px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; outline: 0; background: #fff; font-size: 11px; } .modal-form input, .modal-form select { height: 40px; } .modal-form textarea { min-height: 86px; padding-top: 10px; padding-bottom: 10px; resize: vertical; line-height: 1.6; } .modal-form input:focus, .modal-form select:focus, .modal-form textarea:focus { border-color: #70a4aa; box-shadow: 0 0 0 3px rgba(17, 119, 123, .08); } .modal-form .span-two { grid-column: 1 / -1; } .institution-lookup { padding: 16px; border: 1px solid #d9e8e7; border-radius: 12px; background: linear-gradient(145deg, #f8fbfb, #f3f8fa); } .institution-lookup__head, .institution-selected, .institution-results button { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .institution-lookup__head > div, .institution-selected > div, .institution-results button > span { display: flex; min-width: 0; flex-direction: column; } .institution-lookup__head strong { color: #17354b; font-size: 13px; } .institution-lookup__head span { margin-top: 5px; color: #81909d; font-size: 10px; } .institution-lookup__head em { padding: 5px 8px; border-radius: 8px; color: #9a651f; background: #fff3df; font-size: 9px; font-style: normal; } .institution-lookup__search { display: grid; margin-top: 13px; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; } .institution-lookup__search input { margin: 0; } .institution-selected { margin-top: 12px; padding: 12px; border-radius: 10px; background: #e9f5f3; } .institution-selected strong { color: #17354b; font-size: 11px; } .institution-selected span { margin-top: 5px; color: #5e7a80; font-size: 9px; } .institution-selected em { color: #087477; font-size: 9px; font-style: normal; font-weight: 700; } .institution-selected p, .institution-results > p { margin: 0; color: #87929f; font-size: 10px; } .institution-results { display: grid; margin-top: 10px; gap: 7px; } .institution-results button { width: 100%; padding: 11px 12px; border: 1px solid #e1e7ec; border-radius: 9px; color: #24364b; background: #fff; text-align: left; cursor: pointer; } .institution-results button:hover { border-color: #7cadad; box-shadow: 0 5px 14px rgba(30, 89, 96, .08); } .institution-results button strong { font-size: 10px; } .institution-results button small { margin-top: 4px; color: #87929f; font-size: 8px; } .institution-results button > span:last-child { align-items: flex-end; color: #0b7275; } .institution-results button b { margin-top: 4px; font-size: 9px; } .institution-name-lock > div { display: flex; min-height: 40px; margin-top: 7px; padding: 8px 11px; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #dce6e8; border-radius: 8px; background: #f5f9f9; } .institution-name-lock strong { color: #20364a; font-size: 11px; } .institution-name-lock span { flex: 0 0 auto; color: #0a7678; font-size: 9px; } .form-section-title { margin: 5px 0 -2px; padding-bottom: 8px; border-bottom: 1px solid #edf1f3; color: #163c56; font-size: 11px; font-weight: 760; letter-spacing: .04em; } .required-mark { color: var(--red); font-style: normal; } .modal__footer { display: flex; padding: 15px 22px 20px; justify-content: flex-end; gap: 9px; } .toast { position: fixed; z-index: 160; right: 28px; bottom: 28px; max-width: 420px; padding: 14px 18px; border: 1px solid rgba(255,255,255,.16); border-radius: 11px; color: #f7fbff; background: #12354d; box-shadow: 0 18px 45px rgba(11,26,43,.24); font-size: 12px; line-height: 1.6; } .trial-badge { display: inline-flex; height: 28px; padding: 0 10px; align-items: center; border: 1px solid #d3e7e4; border-radius: 999px; color: #0b6e70; background: #edf7f5; font-size: 10px; font-weight: 700; white-space: nowrap; } @media (max-width: 1280px) { .app-shell { grid-template-columns: 218px 1fr; } .page-content { padding-right: 24px; padding-left: 24px; } .topbar { padding-right: 24px; padding-left: 24px; } .metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .section-grid { grid-template-columns: minmax(0,1fr) 310px; } } @media (max-width: 900px) { .login-view { grid-template-columns: 1fr; } .login-showcase { display: none; } .login-panel { min-height: 100vh; padding: 36px 28px; } .login-card__mobile-brand { display: flex; margin: -22px -20px 28px; padding: 20px 20px 17px; flex-direction: column; align-items: flex-start; border-radius: 16px; background: linear-gradient(135deg, #0a172a, #123f58); } .login-card__mobile-brand .brand__logo-plate { width: 220px; } .login-card__mobile-brand small { margin-top: 3px; color: rgba(236,244,252,.58); font-size: 9px; font-weight: 700; letter-spacing: .15em; } } /* 0.4.0 business workspace additions */ .scope-strip { display: flex; margin-bottom: 18px; padding: 14px 18px; align-items: center; justify-content: space-between; border: 1px solid #dfe7ec; border-radius: 14px; color: #405368; background: linear-gradient(120deg, #f8fbfc, #f0f7f6); } .scope-strip > div { display: flex; min-width: 0; gap: 12px; align-items: center; } .scope-strip span { color: #84909d; font-size: 12px; } .scope-strip strong { color: #18364f; font-size: 13px; } .scope-strip__actions { flex: 0 0 auto; } .metric-grid--dense { grid-template-columns: repeat(4, minmax(0, 1fr)); } .dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(320px, 1fr); gap: 18px; align-items: start; grid-auto-flow: dense; } .dashboard-grid > * { min-width: 0; } .command-ranking-grid { display: grid; margin-bottom: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .command-ranking-grid.is-single { grid-template-columns: minmax(0, 1fr); } .ranking-panel { overflow: hidden; } .ranking-legend { display: flex; gap: 14px; color: #8b96a2; font-size: 9px; } .ranking-list { display: grid; padding: 4px 20px 14px; } .rank-row { display: grid; min-width: 0; min-height: 76px; padding: 11px 0; grid-template-columns: 34px minmax(120px, 1fr) minmax(96px, auto) minmax(58px, auto); gap: 12px; align-items: center; border-bottom: 1px solid #edf0f3; } .rank-row:last-child { border-bottom: 0; } .rank-row__index { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 9px; color: #fff; background: #183f5c; font-size: 11px; font-weight: 800; } .rank-row__index.is-top { background: #aa6b22; } .rank-row__identity, .rank-row__numbers { min-width: 0; } .rank-row strong, .rank-row small { display: block; min-width: 0; overflow-wrap: anywhere; } .rank-row__identity strong { color: #283a4e; font-size: 11px; } .rank-row__identity small { margin-top: 4px; color: #919ca8; font-size: 9px; } .rank-row__identity i { display: block; height: 3px; margin-top: 8px; border-radius: 2px; background: linear-gradient(90deg, #1f5879, #0e8a83); } .rank-row__numbers { text-align: right; } .rank-row__numbers strong { color: #183f5b; font-size: 12px; } .rank-row__numbers small { margin-top: 4px; color: #8995a3; font-size: 8px; font-weight: 500; } .rank-row > b { color: #0a7376; font-size: 12px; text-align: right; white-space: nowrap; } .rank-row > b small { margin-top: 4px; color: #8794a2; font-size: 8px; font-weight: 500; } .live-pill { padding: 6px 8px; border-radius: 7px; color: #087275; background: #e7f4f2; font-size: 8px; font-weight: 750; white-space: nowrap; } .ranking-legend { padding: 11px 20px 15px; border-top: 1px solid #edf0f3; flex-wrap: wrap; } .personal-command { display: grid; margin-bottom: 18px; padding: 22px 24px; grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr); gap: 24px; align-items: center; overflow: hidden; background: linear-gradient(135deg, #ffffff 0%, #edf8f6 100%); } .personal-command h2 { margin: 0; color: #173149; font-size: 20px; } .personal-command p:last-child { margin: 8px 0 0; color: #7f8c99; font-size: 10px; line-height: 1.65; } .personal-rank { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .personal-rank--extended { grid-template-columns: repeat(4, minmax(0, 1fr)); } .personal-rank > span { display: flex; min-width: 0; min-height: 82px; padding: 13px; flex-direction: column; justify-content: center; border: 1px solid rgba(215, 227, 230, .9); border-radius: 11px; background: rgba(255, 255, 255, .82); } .personal-rank small, .personal-rank strong, .personal-rank em { display: block; min-width: 0; overflow-wrap: anywhere; } .personal-rank small { color: #84909d; font-size: 8px; } .personal-rank strong { margin-top: 5px; color: #123f5b; font-size: 18px; } .personal-rank em { margin-top: 5px; color: #0c7776; font-size: 8px; font-style: normal; } .export-locked { display: inline-flex; min-height: 34px; padding: 0 12px; align-items: center; border: 1px solid #e3d8da; border-radius: 8px; color: #8d6268 !important; background: #fbf7f7; font-size: 9px !important; font-weight: 650; white-space: nowrap; } .period-completion-strip { display: grid; margin-bottom: 18px; padding: 18px 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .period-completion-strip > div { display: grid; min-width: 0; grid-template-columns: 1fr auto; gap: 5px 12px; } .period-completion-strip span { color: #677589; font-size: 10px; } .period-completion-strip strong { color: #173f5a; font-size: 15px; } .period-completion-strip small { color: #8c98a5; font-size: 8px; } .period-completion-strip i { display: block; height: 5px; grid-column: 1 / -1; overflow: hidden; border-radius: 999px; background: #e7edf0; } .period-completion-strip i b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #245b79, #0b8b83); } .executive-funnel { margin-bottom: 18px; overflow: hidden; } .executive-funnel .panel__head { padding-bottom: 15px; } .executive-funnel .panel__head .eyebrow { margin-bottom: 5px; color: #0b7778; font-size: 8px; letter-spacing: .18em; } .executive-funnel__rail { display: flex; min-width: 1050px; min-height: 124px; padding: 10px 14px 12px; align-items: center; overflow: hidden; } .executive-funnel__rail article { position: relative; display: grid; height: var(--funnel-height); min-width: 0; padding: 10px 16px 9px 24px; flex: 1; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 8px 18px minmax(18px, 1fr) 10px; column-gap: 6px; align-items: center; overflow: hidden; color: #fff; background: linear-gradient(135deg, #214f70, #176a79); clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 18px 50%); } .executive-funnel__rail article:first-child { padding-left: 18px; border-radius: 12px 0 0 12px; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%); } .executive-funnel__rail article:last-child { border-radius: 0 12px 12px 0; } .executive-funnel__rail article:nth-child(2) { background: linear-gradient(135deg, #1e607b, #147b82); } .executive-funnel__rail article:nth-child(3) { background: linear-gradient(135deg, #16727f, #0d8984); } .executive-funnel__rail article:nth-child(4) { background: linear-gradient(135deg, #0d817e, #0b947f); } .executive-funnel__rail article:nth-child(5) { background: linear-gradient(135deg, #0a7e70, #258f6e); } .executive-funnel__rail article:nth-child(6) { background: linear-gradient(135deg, #186b5c, #327b58); } .executive-funnel__rail article:nth-child(7) { background: linear-gradient(135deg, #216853, #427c53); } .executive-funnel__rail article:nth-child(8) { background: linear-gradient(135deg, #35664a, #687747); } .executive-funnel__rail article:nth-child(9) { background: linear-gradient(135deg, #4d6344, #827140); } .executive-funnel__rail article:nth-child(10) { background: linear-gradient(135deg, #665f3e, #9a6938); } .executive-funnel__rail article:nth-child(11) { background: linear-gradient(135deg, #7d5839, #ac6033); } .executive-funnel__rail article > span { grid-column: 1 / -1; color: rgba(255,255,255,.55); font-size: 7px; font-weight: 750; letter-spacing: .12em; } .executive-funnel__rail article > b { min-width: 0; grid-row: 2; grid-column: 1 / -1; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .executive-funnel__rail article > strong { grid-row: 3; grid-column: 1; font-size: 21px; line-height: 1; text-align: left; white-space: nowrap; } .executive-funnel__rail article > strong small { margin-left: 2px; font-size: 8px; font-weight: 500; } .executive-funnel__rail article > em { grid-row: 3; grid-column: 2; color: rgba(255,255,255,.86); font-size: 9px; font-style: normal; font-weight: 700; text-align: right; } .executive-funnel__rail article > i { grid-row: 4; grid-column: 1 / -1; color: rgba(255,255,255,.62); font-size: 7px; font-style: normal; text-align: left; white-space: nowrap; } .executive-funnel footer { display: flex; padding: 12px 20px 15px; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid #edf1f3; color: #8794a0; font-size: 8px; } .executive-funnel footer strong { color: #0b7375; font-size: 9px; white-space: nowrap; } .wide-panel { min-width: 0; } .bridge-panel { overflow: hidden; } .bridge-chart { display: grid; min-width: 0; padding: 18px 20px 22px; gap: 18px; } .bridge-chart > div { display: grid; min-width: 0; grid-template-columns: minmax(70px, 110px) minmax(66px, 90px) minmax(0, 1fr); align-items: center; gap: 14px; } .bridge-chart span { color: #617083; font-size: 13px; } .bridge-chart strong { min-width: 0; color: #183b58; font-size: 15px; text-align: right; overflow-wrap: anywhere; } .bridge-chart i { display: block; width: 100%; min-width: 0; max-width: 100%; height: 12px; justify-self: start; border-radius: 999px; background: linear-gradient(90deg, #1f5879, #0e8a83); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); } .org-performance { display: grid; min-width: 0; padding: 4px 20px 12px; gap: 4px; overflow: hidden; } .org-performance > div { display: grid; min-width: 0; padding: 14px 0; grid-template-columns: minmax(0, 1fr) minmax(92px, 130px) minmax(92px, 130px); gap: 10px; align-items: center; border-bottom: 1px solid #ebeff2; } .org-performance > div:last-child { border-bottom: 0; } .org-performance span { color: #6d7b8b; font-size: 13px; } .org-performance span:first-child { display: flex; flex-direction: column; } .org-performance span, .org-performance strong, .org-performance small { min-width: 0; overflow-wrap: anywhere; } .org-performance strong { color: #22374d; font-size: 14px; } .org-performance small { margin-top: 4px; color: #95a0aa; } .org-performance b { margin-left: 6px; color: #0c7777; } .segmented { display: inline-flex; margin-bottom: 18px; padding: 5px; border-radius: 12px; background: #e8eef2; } .segmented button { padding: 9px 24px; border: 0; border-radius: 9px; color: #728091; background: transparent; cursor: pointer; } .segmented button.is-active { color: #153a56; background: #fff; box-shadow: 0 3px 12px rgba(25,48,66,.08); font-weight: 700; } .intel-summary { display: flex; margin-bottom: 18px; padding: 28px 32px; align-items: center; justify-content: space-between; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #123c5f 0%, #0b6a70 100%); box-shadow: 0 16px 38px rgba(15,58,80,.16); } .intel-summary h2 { margin: 5px 0 8px; font-size: 25px; } .intel-summary p:last-child { margin: 0; color: rgba(255,255,255,.76); } .intel-summary .eyebrow { color: #83d4ca; } .intel-score { display: flex; width: 96px; height: 96px; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.22); border-radius: 24px; background: rgba(255,255,255,.09); } .intel-score strong { font-size: 34px; } .intel-score span { margin-top: 4px; color: rgba(255,255,255,.72); font-size: 12px; } .grade-badge { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 9px; color: #fff; background: #df4857; font-weight: 800; } .intel-project-grid { display: grid; margin-bottom: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .intel-project { padding: 20px; } .intel-project:first-child { grid-column: 1 / -1; } .intel-project__top { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: start; } .intel-project__top p, .intel-project__top h3 { margin: 0; } .intel-project__top p { color: #84909d; font-size: 9px; } .intel-project__top h3 { margin-top: 5px; color: #20364c; font-size: 15px; line-height: 1.5; } .intel-project__top > strong { color: #b33e4c; font-size: 16px; white-space: nowrap; } .intel-project__facts { display: grid; margin-top: 18px; padding: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; border-radius: 10px; background: #f5f8fa; } .intel-project__facts small, .intel-project__facts b { display: block; min-width: 0; overflow-wrap: anywhere; } .intel-project__facts small { color: #8f99a5; font-size: 8px; } .intel-project__facts b { margin-top: 5px; color: #34495e; font-size: 9px; } .intel-project__contact { display: grid; margin-top: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .intel-project__contact span { padding: 12px 14px; border: 1px solid #e3eaee; border-radius: 9px; } .intel-project__contact small, .intel-project__contact strong { display: block; } .intel-project__contact small { color: #84909c; font-size: 8px; } .intel-project__contact strong { margin-top: 6px; color: #284156; font-size: 9px; line-height: 1.6; } .intel-project__footer { display: flex; margin-top: 15px; padding-top: 14px; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid #edf0f2; } .intel-project__footer > span { color: #8d98a4; font-size: 8px; } .intel-layer { margin-bottom: 22px; } .intel-layer__head { display: flex; margin-bottom: 12px; padding: 0 3px; align-items: flex-end; justify-content: space-between; gap: 18px; } .intel-layer__head h2, .intel-layer__head p { margin: 0; } .intel-layer__head h2 { color: #20364c; font-size: 18px; } .intel-layer__head p { margin-top: 4px; color: #8995a1; font-size: 9px; } .intel-layer__head > span { padding: 6px 10px; border-radius: 999px; color: #0b7476; background: #e6f4f1; font-size: 9px; font-weight: 700; white-space: nowrap; } .intel-public-contacts { margin-top: 14px; padding: 12px 14px; border: 1px solid #dfe9eb; border-radius: 10px; background: #fbfdfd; } .intel-public-contacts header { display: flex; margin-bottom: 5px; align-items: center; justify-content: space-between; } .intel-public-contacts header span { color: #284156; font-size: 9px; font-weight: 750; } .intel-public-contacts header em { color: #0b7476; font-size: 8px; font-style: normal; } .intel-contact-row { display: grid; min-width: 0; padding: 8px 0; grid-template-columns: minmax(0, 1fr) minmax(90px, auto) minmax(78px, auto); gap: 10px; align-items: center; border-top: 1px solid #edf2f3; } .intel-contact-row:first-of-type { border-top: 0; } .intel-contact-row div, .intel-contact-row strong, .intel-contact-row small { display: block; min-width: 0; } .intel-contact-row strong { color: #263f54; font-size: 9px; } .intel-contact-row small { margin-top: 3px; color: #8a96a3; font-size: 7px; } .intel-contact-row span { color: #6f7d8d; font-size: 8px; } .intel-contact-row b { color: #0b7476; font-size: 9px; text-align: right; } .intel-contact-empty { padding: 8px 0 2px; color: #8a96a3; font-size: 8px; } .toolbar-copy { display: block; margin-top: 5px; color: #8995a2; } .org-admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .org-admin-card { min-width: 0; } .org-admin-members { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .org-member { display: grid; min-width: 0; min-height: 58px; padding: 10px 12px; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; border-radius: 10px; background: #f6f8fa; } .org-member > span { min-width: 0; } .org-member .text-button { padding: 6px; font-size: 9px; } .org-member--empty { grid-template-columns: 1fr; } .org-admin-members b { color: #263a4f; } .org-admin-members b, .org-admin-members small { display: block; min-width: 0; overflow-wrap: anywhere; } .org-admin-members small { margin-top: 4px; color: #83909d; } .integration-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; } .integration-card__head { display: flex; align-items: flex-start; gap: 12px; } .integration-card__head > div { min-width: 0; flex: 1; } .integration-card__head h2 { margin: 0; color: #253a50; font-size: 17px; } .integration-card__head p { overflow: hidden; margin: 5px 0 0; color: #8b96a2; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .integration-dot { width: 11px; height: 11px; margin-top: 5px; flex: 0 0 11px; border-radius: 50%; background: #d49a3c; box-shadow: 0 0 0 5px #fbf1dc; } .integration-dot.is-online { background: #1ba796; box-shadow: 0 0 0 5px #e3f5f1; } .integration-stats { display: grid; margin-top: 22px; grid-template-columns: repeat(3, 1fr); gap: 10px; } .integration-stats span { display: flex; padding: 13px; flex-direction: column; border-radius: 10px; background: #f5f8fa; } .integration-stats small { color: #8b96a1; } .integration-stats strong { margin-top: 5px; color: #243a4f; font-size: 13px; } .integration-actions { display: flex; margin-top: 18px; gap: 10px; } .process-flow { display: flex; padding: 22px 0 6px; align-items: center; justify-content: space-between; gap: 10px; } .process-flow span { padding: 12px 14px; border: 1px solid #dfe7eb; border-radius: 10px; color: #40566b; background: #f8fafb; font-size: 12px; text-align: center; } .process-flow b { color: #93a0ac; } .form-help { margin: 0; color: #7c8997; font-size: 12px; line-height: 1.6; } .progress-policy { display: flex; padding: 13px 15px; flex-direction: column; border: 1px solid #cfe4e1; border-radius: 9px; color: #627585; background: #eef8f6; font-size: 10px; line-height: 1.65; } .progress-policy strong { color: #155b61; font-size: 11px; } .progress-policy span { margin-top: 3px; } .employee-identity { display: flex; min-width: 142px; align-items: center; gap: 10px; } .employee-identity > span { min-width: 0; } .table-actions { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; } .table-actions--wrap { min-width: 138px; flex-wrap: wrap; row-gap: 2px; white-space: normal; } .table-actions .text-button { padding: 6px 0; } .table-actions .text-button--strong { padding: 6px 10px; } .text-button--danger { color: #a44550; } .text-button--resume { color: #0a706d; } .record-table-actions { display: grid; width: 174px; min-width: 174px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; white-space: normal; } .record-table-actions .text-button { display: flex; width: 100%; min-width: 0; min-height: 31px; padding: 5px 8px; box-sizing: border-box; align-items: center; justify-content: center; border: 1px solid #dce5e9; border-radius: 8px; color: #176d70; background: #f7faf9; font-size: 10px; line-height: 1.2; text-align: center; white-space: nowrap; } .record-table-actions .text-button--strong { border-color: #0b7778; color: #fff; background: #0b7778; box-shadow: none; } .record-table-actions .text-button--danger { border-color: #efd6da; color: #a44550; background: #fff6f7; } .record-table-actions .text-button--resume { border-color: #cfe4df; color: #0a706d; background: #eef8f5; } .record-table-actions .text-button:disabled { cursor: not-allowed; border-color: #e4e8ec; color: #909aa5; background: #f3f5f7; } .record-table-actions .text-button--follow-disabled:disabled { border-color: #eadfe1; color: #aa7b81; background: #fbf7f7; opacity: 1; } .opportunity-data-panel .data-table { min-width: 1180px; } .customer-data-panel .data-table { min-width: 1050px; } .customer-visit-summary { display: grid; margin-bottom: 16px; padding: 13px 15px; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; border: 1px solid #dde7e8; border-radius: 10px; background: #f7faf9; } .customer-visit-summary strong, .customer-visit-summary p { display: block; margin: 0; } .customer-visit-summary strong { color: #33475a; font-size: 10px; } .customer-visit-summary p { margin-top: 4px; color: #7a8795; font-size: 9px; line-height: 1.55; } .customer-visit-form { margin-bottom: 4px; } .customer-care-panel { overflow: hidden; } .customer-care-list { display: grid; padding: 8px 18px 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; } .customer-care-row { display: grid; min-width: 0; min-height: 66px; padding: 10px 0; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 0; border-bottom: 1px solid #edf0f3; color: inherit; background: transparent; text-align: left; } .customer-care-row div { min-width: 0; } .customer-care-row strong, .customer-care-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .customer-care-row strong { color: #304256; font-size: 10px; } .customer-care-row small { margin-top: 5px; color: #8b96a2; font-size: 9px; } .customer-care-row > em { color: #7a8795; font-size: 9px; font-style: normal; white-space: nowrap; } .customer-care-row.is-collision > em, .customer-care-row.is-red > em { color: #a44550; } .customer-care-row.is-yellow > em { color: #99611d; } .shipment-panel { overflow: hidden; } .shipment-list { display: grid; padding: 4px 20px; } .shipment-list > div:not(.empty-copy) { display: grid; min-width: 0; min-height: 68px; padding: 11px 0; grid-template-columns: minmax(0, 1fr) 92px 74px 44px; gap: 12px; align-items: center; border-bottom: 1px solid #edf0f3; } .shipment-list > div:last-child { border-bottom: 0; } .shipment-list > div > span:first-child { display: flex; min-width: 0; align-items: center; gap: 10px; } .shipment-list > div > span:first-child > span:last-child { min-width: 0; } .shipment-list strong, .shipment-list small { display: block; min-width: 0; overflow-wrap: anywhere; } .shipment-list strong { color: #273b50; font-size: 11px; } .shipment-list small { margin-top: 4px; color: #8d98a6; font-size: 9px; } .shipment-list > div > b { color: #173e59; font-size: 14px; text-align: right; white-space: nowrap; } .shipment-list > div > em { padding: 5px 7px; border-radius: 6px; color: #6d7988; background: #eef2f5; font-size: 9px; font-style: normal; text-align: center; white-space: nowrap; } .shipment-list .text-button { padding: 6px 0; } .shipment-erp-note { display: flex; padding: 12px 20px; align-items: center; gap: 10px; border-top: 1px solid #edf0f3; color: #7e8b99; background: #f7fafb; font-size: 9px; } .shipment-erp-note strong { color: #0b7274; white-space: nowrap; } .acceptance-list { display: grid; padding: 4px 20px 14px; } .acceptance-list > button { display: grid; width: 100%; min-width: 0; min-height: 62px; padding: 11px 0; grid-template-columns: minmax(0, 1fr) 88px 76px; gap: 12px; align-items: center; border: 0; border-bottom: 1px solid #edf0f3; color: inherit; background: transparent; text-align: left; } .acceptance-list > button:last-child { border-bottom: 0; } .acceptance-list > button:hover { background: #f8fbfb; } .acceptance-list span { min-width: 0; } .acceptance-list strong, .acceptance-list small { display: block; min-width: 0; overflow-wrap: anywhere; } .acceptance-list strong { color: #293c50; font-size: 11px; } .acceptance-list small { margin-top: 4px; color: #8e99a5; font-size: 9px; } .acceptance-list b { color: #173f5b; font-size: 13px; text-align: right; white-space: nowrap; } .acceptance-list em { padding: 5px 7px; border-radius: 6px; color: #0a6f72; background: #e8f5f3; font-size: 9px; font-style: normal; text-align: center; } .erp-placeholder { display: flex; padding: 13px 15px; flex-direction: column; gap: 5px; border: 1px dashed #bfd6d5; border-radius: 9px; color: #69798a; background: #f2f8f7; } .erp-placeholder span { color: #0b7174; font-size: 9px; font-weight: 750; letter-spacing: .08em; } .erp-placeholder strong { color: #284257; font-size: 11px; } .erp-placeholder small { color: #84919e; font-size: 9px; line-height: 1.6; } .target-table { min-width: 1120px; } .target-table th small { display: block; margin-top: 3px; font-weight: 500; letter-spacing: 0; } .target-form { padding: 22px; } .target-annual-row { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 16px; align-items: end; } .target-annual-row label { color: #5c697b; font-size: 10px; } .target-annual-row input { width: 100%; height: 44px; margin-top: 7px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; outline: 0; font-size: 13px; } .target-balance { display: flex; min-height: 68px; padding: 10px 14px; flex-direction: column; justify-content: center; border: 1px solid #d8e8e5; border-radius: 10px; background: #f1f8f7; } .target-balance span, .target-balance small { color: #7d8c99; font-size: 9px; } .target-balance strong { margin: 4px 0; color: #0b7174; font-size: 16px; } .target-balance.is-unbalanced { border-color: #edc4c9; background: #fcf2f3; } .target-balance.is-unbalanced strong, .target-balance.is-unbalanced small { color: #ae4050; } .quarter-editor-grid { display: grid; margin-top: 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .quarter-editor { display: flex; min-width: 0; padding: 14px; flex-direction: column; border: 1px solid #e0e7eb; border-radius: 11px; background: #fbfcfd; } .quarter-editor > span { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .quarter-editor span strong { color: #1e3c55; font-size: 14px; } .quarter-editor span small { color: #8d99a6; font-size: 8px; } .quarter-editor input { width: 100%; height: 41px; margin: 11px 0 9px; padding: 0 10px; border: 1px solid #dce3e8; border-radius: 8px; outline: 0; background: #fff; font-size: 12px; } .quarter-editor input:focus, .target-annual-row input:focus { border-color: #70a4aa; box-shadow: 0 0 0 3px rgba(17,119,123,.08); } .quarter-editor em { color: #8793a0; font-size: 9px; font-style: normal; line-height: 1.5; } .quarter-editor em b { color: #0b7174; } .quarter-editor.is-readonly { background: linear-gradient(145deg, #f8fbfc, #eef7f5); } .quarter-editor.is-readonly > b { display: block; margin: 14px 0 9px; color: #173d58; font-size: 18px; } .quarter-editor.is-readonly em strong { color: #0b7476; } .target-form > .form-help { padding-top: 13px; border-top: 1px solid #edf1f3; } .target-rule-card { display: grid; margin-bottom: 18px; padding: 22px 24px; grid-template-columns: minmax(260px, .9fr) minmax(0, 1.1fr); gap: 24px; align-items: center; } .target-rule-card h2 { margin: 0; color: #1a354d; font-size: 18px; } .target-rule-card p:last-child { margin: 8px 0 0; color: #7c8997; font-size: 10px; line-height: 1.65; } .target-rule-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; } .target-rule-flow span { display: flex; min-height: 88px; padding: 12px; flex-direction: column; justify-content: center; border: 1px solid #dce8e7; border-radius: 10px; background: #f4f9f8; } .target-rule-flow b, .target-rule-flow strong, .target-rule-flow small { display: block; } .target-rule-flow b { color: #7e8d9b; font-size: 9px; } .target-rule-flow strong { margin-top: 5px; color: #0b7274; font-size: 18px; } .target-rule-flow small { margin-top: 4px; color: #8d98a4; font-size: 8px; } /* Executive command center */ .command-center-view { min-height: calc(100vh - 150px); padding: 24px; overflow: hidden; border: 1px solid rgba(75, 152, 172, .2); border-radius: 18px; color: #ddecf5; background: radial-gradient(circle at 12% 8%, rgba(20, 134, 148, .18), transparent 26%), radial-gradient(circle at 92% 4%, rgba(48, 91, 156, .22), transparent 28%), linear-gradient(150deg, #071423, #0a2134 54%, #082d38); box-shadow: 0 24px 70px rgba(6, 26, 43, .24); } .command-center-view:fullscreen { width: 100vw; min-height: 100vh; padding: 28px 34px; overflow: auto; border: 0; border-radius: 0; } .command-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; } .command-head p { margin: 0; color: #5ad1c6; font-size: 9px; font-weight: 800; letter-spacing: .2em; } .command-head h2 { margin: 8px 0 5px; color: #f5fbff; font-size: clamp(22px, 2.2vw, 34px); letter-spacing: .04em; } .command-head span { color: rgba(208, 226, 238, .55); font-size: 9px; } .command-head__actions { display: flex; gap: 8px; } .command-head__actions button { height: 36px; padding: 0 13px; border: 1px solid rgba(146, 200, 216, .22); border-radius: 8px; color: #bcd3df; background: rgba(255,255,255,.035); font-size: 9px; } .command-head__actions button.is-primary { border-color: rgba(64, 214, 202, .35); color: #eafffd; background: rgba(23, 143, 145, .26); } .command-knowledge { display: grid; margin: 18px 0 14px; padding: 10px 14px; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 18px; border: 1px solid rgba(119, 177, 193, .13); border-radius: 9px; color: rgba(218, 234, 243, .68); background: rgba(255,255,255,.025); font-size: 9px; } .command-knowledge span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .command-knowledge b { margin-right: 10px; color: #5dd3c7; font-weight: 750; } .command-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; } .command-kpis article { position: relative; min-width: 0; padding: 15px 15px 14px; overflow: hidden; border: 1px solid rgba(99, 166, 184, .16); border-radius: 10px; background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018)); } .command-kpis article::before { position: absolute; top: 0; right: 0; left: 0; height: 2px; background: linear-gradient(90deg, #2a6f91, #36c7ba); content: ''; } .command-kpis span, .command-kpis strong, .command-kpis em { display: block; min-width: 0; overflow-wrap: anywhere; } .command-kpis span { color: rgba(204, 224, 236, .58); font-size: 8px; } .command-kpis strong { margin: 7px 0 5px; color: #f1fbff; font-size: clamp(17px, 1.7vw, 25px); } .command-kpis strong small { margin-left: 3px; color: #65cfc5; font-size: 8px; } .command-kpis em { color: rgba(194, 218, 230, .48); font-size: 7px; font-style: normal; line-height: 1.4; } .command-grid { display: grid; margin-top: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .command-card { min-width: 0; min-height: 230px; padding: 15px; overflow: hidden; border: 1px solid rgba(107, 173, 191, .15); border-radius: 11px; background: linear-gradient(145deg, rgba(16, 48, 69, .82), rgba(9, 31, 49, .92)); box-shadow: inset 0 1px rgba(255,255,255,.025); } .command-card--wide { grid-column: span 2; } .command-card--risk { grid-column: span 2; } .command-card--full { grid-column: 1 / -1; } .command-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .command-card header span, .command-card header h3, .command-card header small { display: block; } .command-card header span { color: #3eb8b1; font-size: 7px; font-weight: 800; letter-spacing: .15em; } .command-card header h3 { margin: 5px 0 0; color: #ecf6fb; font-size: 13px; } .command-card header small { color: rgba(190, 214, 228, .4); font-size: 7px; text-align: right; } .command-departments { display: grid; margin-top: 12px; } .command-departments > div { display: grid; min-width: 0; min-height: 66px; padding: 9px 0; grid-template-columns: 28px minmax(110px, 1fr) minmax(82px, auto) minmax(82px, auto); gap: 10px; align-items: center; border-bottom: 1px solid rgba(127, 176, 192, .1); } .command-departments > div:last-child { border-bottom: 0; } .command-departments > div > b { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 7px; color: #83e2d8; background: rgba(50, 176, 169, .13); font-size: 9px; } .command-departments span, .command-departments strong, .command-departments small { display: block; min-width: 0; } .command-departments strong { color: #dbeaf2; font-size: 10px; } .command-departments small { margin-top: 4px; color: rgba(192, 215, 227, .42); font-size: 7px; } .command-departments span > i { display: block; height: 3px; margin-top: 6px; overflow: hidden; border-radius: 2px; background: rgba(255,255,255,.08); } .command-departments span > i em { display: block; height: 100%; background: linear-gradient(90deg, #3181a2, #38c8b7); } .command-rings { display: grid; height: 178px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: center; } .command-rings > div { position: relative; display: flex; min-width: 0; flex-direction: column; align-items: center; } .command-rings i { position: absolute; z-index: 0; top: -11px; width: 76px; height: 76px; border-radius: 50%; background: conic-gradient(#44c9bd var(--rate), rgba(255,255,255,.07) 0); mask: radial-gradient(circle, transparent 54%, #000 56%); } .command-rings strong, .command-rings span, .command-rings small { position: relative; z-index: 1; display: block; text-align: center; } .command-rings strong { color: #eefbff; font-size: 14px; } .command-rings span { margin-top: 26px; color: #9db7c5; font-size: 8px; } .command-rings small { margin-top: 4px; color: rgba(178, 207, 221, .38); font-size: 6px; } .command-sales { display: grid; margin-top: 12px; } .command-sales > div { display: grid; min-width: 0; min-height: 34px; grid-template-columns: 22px minmax(90px, 1fr) repeat(3, minmax(66px, auto)); gap: 8px; align-items: center; border-bottom: 1px solid rgba(127, 176, 192, .08); } .command-sales > div > b { color: #68d5ca; font-size: 9px; } .command-sales span, .command-sales strong, .command-sales small, .command-sales em { display: block; min-width: 0; } .command-sales strong { color: #dbe9f1; font-size: 9px; } .command-sales small { color: rgba(183, 208, 221, .4); font-size: 6px; } .command-sales em { color: #a9d8dc; font-size: 8px; font-style: normal; text-align: right; } .command-bars { display: grid; margin-top: 14px; gap: 8px; } .command-bars > div { display: grid; grid-template-columns: 62px minmax(0, 1fr) 18px; gap: 8px; align-items: center; } .command-bars span { overflow: hidden; color: #a9beca; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; } .command-bars i { display: block; height: 6px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.06); } .command-bars i b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #326d95, #3bc9b9); } .command-bars.is-cyan i b { background: linear-gradient(90deg, #275c84, #46aecd); } .command-bars.is-gold i b { background: linear-gradient(90deg, #8b6030, #d4a651); } .command-bars strong { color: #d8e8f0; font-size: 8px; text-align: right; } .command-risks { display: grid; margin-top: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 16px; } .command-risks button { display: grid; min-width: 0; min-height: 48px; padding: 6px 0; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 8px; align-items: center; border: 0; border-bottom: 1px solid rgba(157, 183, 197, .08); color: inherit; background: transparent; text-align: left; } .command-risks button > i { width: 6px; height: 6px; border-radius: 50%; background: #d26d5f; box-shadow: 0 0 10px rgba(210, 109, 95, .55); } .command-risks span, .command-risks strong, .command-risks small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .command-risks strong { color: #dceaf1; font-size: 8px; } .command-risks small { margin-top: 4px; color: rgba(190, 211, 222, .42); font-size: 6px; } .command-risks button > b { color: #e1a091; font-size: 8px; white-space: nowrap; } .geo-layout { display: grid; height: 186px; margin-top: 10px; grid-template-columns: minmax(0, 1fr) 120px; gap: 12px; align-items: stretch; } .geo-layout canvas { width: 100%; height: 100%; min-width: 0; border-radius: 8px; background: radial-gradient(circle at 50% 45%, rgba(51, 128, 151, .12), rgba(6, 27, 44, .1)); } .geo-layout--compact { grid-template-columns: minmax(0, 1fr) 88px; } .geo-legend { display: flex; min-width: 0; flex-direction: column; justify-content: center; gap: 8px; } .geo-legend span { display: grid; grid-template-columns: 6px minmax(0, 1fr) auto; gap: 6px; align-items: center; } .geo-legend i { width: 6px; height: 6px; border-radius: 50%; background: #42c8ba; box-shadow: 0 0 8px rgba(66, 200, 186, .6); } .geo-legend b, .geo-legend strong, .geo-legend small { min-width: 0; color: #bed2dc; font-size: 7px; } .geo-legend strong { color: #edf9fc; font-size: 9px; } .geo-legend small { grid-column: 2 / -1; color: rgba(186, 211, 223, .42); line-height: 1.4; } .geo-legend > em { color: rgba(173, 205, 216, .36); font-size: 6px; font-style: normal; line-height: 1.5; } .command-type-mix { display: grid; margin-top: 15px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; } .command-type-mix > div { display: flex; min-height: 72px; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(86, 177, 188, .13); border-radius: 8px; background: rgba(255,255,255,.025); } .command-type-mix span, .command-type-mix strong, .command-type-mix small { display: block; text-align: center; } .command-type-mix span { color: #92b1bf; font-size: 7px; } .command-type-mix strong { margin: 5px 0 2px; color: #6ed7cc; font-size: 18px; } .command-type-mix small { color: rgba(170, 201, 214, .36); font-size: 6px; } .command-assets { display: grid; margin-top: 12px; } .command-assets { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; } .command-assets > div { display: grid; min-height: 44px; grid-template-columns: 20px minmax(86px, 1fr) minmax(0, 1.8fr); gap: 8px; align-items: center; border-bottom: 1px solid rgba(127, 176, 192, .08); } .command-assets > div > b { color: #5fd3c7; font-size: 8px; } .command-assets span, .command-assets strong, .command-assets small { display: block; min-width: 0; } .command-assets strong { color: #dce9f0; font-size: 8px; } .command-assets small { color: rgba(186, 211, 222, .38); font-size: 6px; } .command-assets em { color: #91bfca; font-size: 7px; font-style: normal; line-height: 1.5; text-align: right; } .command-footer { display: flex; margin-top: 12px; padding: 9px 12px; gap: 20px; justify-content: center; border: 1px solid rgba(112, 170, 187, .1); border-radius: 8px; color: rgba(187, 213, 225, .4); font-size: 7px; } .profile-form { padding: 22px; } .profile-preview { display: flex; min-width: 0; padding: 17px; align-items: center; gap: 15px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #173b58, #0b7378); } .profile-avatar--preview { width: 64px; height: 64px; flex: 0 0 64px; border: 2px solid rgba(255,255,255,.45); border-radius: 18px; font-size: 21px; } .profile-preview > div { min-width: 0; } .profile-preview strong, .profile-preview span, .profile-preview small { display: block; overflow-wrap: anywhere; } .profile-preview strong { font-size: 17px; } .profile-preview span { margin-top: 5px; color: rgba(255,255,255,.72); font-size: 10px; } .profile-preview small { margin-top: 8px; color: rgba(255,255,255,.58); font-size: 9px; } .identity-lock { display: grid; margin: 15px 0; padding: 13px 15px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; border: 1px solid #e2e7ec; border-radius: 10px; background: #f7f9fa; } .identity-lock small, .identity-lock strong { display: block; } .identity-lock small { color: #919ba6; font-size: 8px; } .identity-lock strong { margin-top: 4px; color: #35475a; font-size: 10px; overflow-wrap: anywhere; } .identity-lock p { grid-column: 1 / -1; margin: 3px 0 0; color: #8a95a1; font-size: 9px; line-height: 1.55; } .file-field > input { height: auto; padding: 10px; } .file-field > small { display: block; margin-top: 5px; color: #929ca8; font-size: 8px; } .modal-form input[type="color"] { width: 76px; padding: 4px; cursor: pointer; } .profile-remove { display: flex; align-items: center; gap: 8px; } .profile-remove input { width: 16px; height: 16px; margin: 0; } .history-section { margin-top: 18px; padding-top: 17px; border-top: 1px solid #e7ebef; } .history-section > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .history-section h3 { margin: 0; color: #25394e; font-size: 13px; } .history-section > div > span { color: #8b96a2; font-size: 9px; } .history-list { display: grid; margin: 14px 0 0; padding: 0; gap: 0; list-style: none; } .history-list li { position: relative; padding: 0 0 17px 24px; } .history-list li::before { position: absolute; top: 4px; left: 4px; width: 8px; height: 8px; border-radius: 50%; background: #0b7778; box-shadow: 0 0 0 5px #e8f4f2; content: ''; } .history-list li::after { position: absolute; top: 17px; bottom: 0; left: 7px; width: 1px; background: #dce5e7; content: ''; } .history-list li:last-child::after { display: none; } .history-list strong { color: #304256; font-size: 10px; } .history-list p { margin: 5px 0 0; color: #798694; font-size: 9px; line-height: 1.65; } .history-list small { display: block; margin-top: 5px; color: #0d6c70; font-size: 9px; line-height: 1.55; } .history-list .history-risk { color: #a04d40; } .auto-summary-card { display: flex; padding: 15px 17px; flex-direction: column; border: 1px solid #d8e8e5; border-radius: 11px; color: #536578; background: linear-gradient(135deg, #f0f8f7, #ffffff); } .auto-summary-card > span { color: #087174; font-size: 8px; font-weight: 800; letter-spacing: .08em; } .auto-summary-card > strong { margin-top: 7px; color: #2e4357; font-size: 11px; font-weight: 600; line-height: 1.75; } .auto-summary-card > small { margin-top: 7px; color: #8a96a2; font-size: 8px; line-height: 1.6; } .review-readonly { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .review-readonly > div { padding: 14px 16px; border: 1px solid #e1e8ec; border-radius: 10px; background: #f7f9fa; } .review-readonly .span-two { grid-column: 1 / -1; } .review-readonly span, .review-readonly strong { display: block; } .review-readonly span { color: #83909c; font-size: 9px; } .review-readonly strong { margin-top: 7px; color: #31465b; font-size: 10px; line-height: 1.7; } .report-detail-readonly strong { font-size: 12px; white-space: pre-wrap; } .review-comment { display: block; margin-top: 16px; color: #4c5e70; font-size: 10px; } .review-comment textarea { width: 100%; min-height: 92px; margin-top: 7px; padding: 12px; resize: vertical; border: 1px solid #dce3e8; border-radius: 9px; color: #33465a; background: #fff; } /* 0.4.1 trial-readiness polish */ .opportunity-switcher { display: grid; margin-bottom: 16px; grid-template-columns: repeat(2, minmax(0, 250px)); gap: 10px; } .opportunity-switcher button { display: grid; min-height: 60px; padding: 10px 14px; grid-template-columns: 1fr auto; gap: 3px 12px; align-items: center; border: 1px solid #dce3e9; border-radius: 11px; color: #627084; background: #fff; text-align: left; } .opportunity-switcher button:hover { border-color: #9ab9bd; } .opportunity-switcher button.is-active { border-color: #87aeb3; color: #173b55; background: #eff8f6; box-shadow: inset 3px 0 #0c7779; } .opportunity-switcher span { font-size: 12px; font-weight: 680; } .opportunity-switcher strong { color: #143e58; font-size: 18px; } .opportunity-switcher small { grid-column: 1 / -1; color: #8c97a4; font-size: 9px; } .organization-hero { display: grid; margin-bottom: 18px; padding: 24px; grid-template-columns: minmax(260px, 1fr) auto auto; gap: 24px; align-items: center; background: linear-gradient(135deg, #fff, #f2f8f7); } .organization-hero h2 { margin: 0; color: #183149; font-size: 22px; } .organization-hero p:last-child { margin: 9px 0 0; color: #778696; font-size: 11px; line-height: 1.7; } .organization-hero__metrics { display: grid; grid-template-columns: repeat(4, 82px); gap: 8px; } .organization-hero__metrics span { display: flex; min-height: 67px; padding: 10px; flex-direction: column; justify-content: center; border-radius: 9px; background: rgba(255,255,255,.8); box-shadow: inset 0 0 0 1px #e4eaee; } .organization-hero__metrics small { color: #8b96a3; font-size: 8px; } .organization-hero__metrics strong { margin-top: 5px; color: #183c55; font-size: 19px; } .organization-hero__metrics span.is-risk strong { color: #a7651e; } .hierarchy-panel { margin-bottom: 23px; overflow: hidden; } .hierarchy-flow { display: grid; padding: 20px; grid-template-columns: minmax(150px, 1fr) 20px minmax(150px, 1fr) 20px minmax(150px, 1fr) 20px minmax(170px, 1fr); gap: 8px; align-items: stretch; } .hierarchy-step { position: relative; min-width: 0; padding: 16px; border: 1px solid #e1e7ec; border-radius: 12px; background: #fbfcfd; } .hierarchy-step.is-current { border-color: #7eafb3; box-shadow: 0 9px 24px rgba(13,100,105,.1); } .hierarchy-step--system_admin { border-style: dashed; background: #fbf8f3; } .hierarchy-step__top { display: flex; min-height: 24px; align-items: center; gap: 7px; } .hierarchy-step__top i { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 7px; color: #fff; background: #234b67; font-size: 8px; font-style: normal; font-weight: 750; } .hierarchy-step--department_head .hierarchy-step__top i { background: #0b7779; } .hierarchy-step--general_manager .hierarchy-step__top i { background: #6559b4; } .hierarchy-step--system_admin .hierarchy-step__top i { background: #a2672a; } .hierarchy-step__top span { color: #82909f; font-size: 8px; font-weight: 650; } .hierarchy-step__top em { margin-left: auto; padding: 4px 6px; border-radius: 5px; color: #087074; background: #e5f3f1; font-size: 7px; font-style: normal; } .hierarchy-step h3 { margin: 13px 0 6px; color: #22374c; font-size: 15px; } .hierarchy-step > p { min-height: 31px; margin: 0; color: #7b8796; font-size: 9px; line-height: 1.65; } .hierarchy-step__people { display: flex; margin-top: 15px; align-items: baseline; gap: 6px; } .hierarchy-step__people strong { color: #17435c; font-size: 20px; } .hierarchy-step__people span { color: #8994a1; font-size: 8px; } .hierarchy-step > small { display: block; min-height: 26px; margin-top: 4px; overflow: hidden; color: #0a7374; font-size: 9px; line-height: 1.5; text-overflow: ellipsis; } .hierarchy-step__duty { margin-top: 11px; padding-top: 10px; border-top: 1px solid #e7ebef; color: #667485; font-size: 8px; line-height: 1.55; } .hierarchy-arrow { display: grid; color: #9aa6b1; place-items: center; font-size: 16px; } .hierarchy-explainer { display: grid; margin: 0 20px 20px; padding: 13px 15px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; border-radius: 10px; color: #667687; background: #f2f6f7; font-size: 9px; line-height: 1.65; } .hierarchy-explainer span { display: flex; gap: 8px; } .hierarchy-explainer strong { color: #0d6f72; white-space: nowrap; } .section-title-row { display: flex; margin: 27px 2px 13px; align-items: flex-end; justify-content: space-between; } .section-title-row h2 { margin: 0; color: #20344a; font-size: 18px; } .department-leader { display: flex; margin: 14px 16px 0; padding: 12px 14px; align-items: center; justify-content: space-between; border-radius: 10px; background: #eef7f5; } .department-leader.is-warning { background: #fbf4e9; } .department-leader small, .department-leader strong { display: block; } .department-leader small { color: #82909e; font-size: 8px; } .department-leader strong { margin-top: 4px; color: #263b50; font-size: 11px; } .org-admin-members { padding: 14px 16px 17px; } @media (max-width: 1180px) { .metric-grid--dense { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dashboard-grid, .integration-grid { grid-template-columns: 1fr; } .org-admin-grid { grid-template-columns: 1fr; } .organization-hero { grid-template-columns: 1fr auto; } .organization-hero__metrics { grid-row: 2; grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(70px, 1fr)); } .hierarchy-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hierarchy-arrow { display: none; } .quarter-editor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .command-ranking-grid { grid-template-columns: 1fr; } .personal-command { grid-template-columns: 1fr; } .personal-rank { grid-template-columns: repeat(2, minmax(0, 1fr)); } .daily-knowledge-grid { grid-template-columns: 1fr; } .executive-funnel { overflow-x: auto; } .executive-funnel__rail article { padding-right: 11px; padding-left: 19px; column-gap: 4px; } .executive-funnel__rail article:first-child { padding-left: 13px; } .executive-funnel__rail article > b { font-size: 9px; } .executive-funnel__rail article > strong { font-size: 18px; } .target-rule-card { grid-template-columns: 1fr; } .command-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .command-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 780px) { .topbar { min-height: 88px; padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap; gap: 12px; } .topbar__actions { width: 100%; justify-content: flex-end; } .scope-strip, .process-flow { align-items: stretch; flex-direction: column; } .scope-strip > div { justify-content: space-between; } .scope-strip__actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); } .bridge-chart { padding: 16px 18px 20px; } .bridge-chart > div { grid-template-columns: minmax(64px, 80px) minmax(62px, 76px) minmax(0, 1fr); gap: 10px; } .org-performance > div { grid-template-columns: 1fr; gap: 8px; } .integration-stats { grid-template-columns: 1fr; } .app-shell { grid-template-columns: 164px minmax(0, 1fr); } .sidebar { padding-right: 12px; padding-left: 12px; } .topbar { padding-right: 18px; padding-left: 18px; } .page-content { padding-right: 18px; padding-left: 18px; } .topbar__actions .compact-select, .trial-badge { display: none; } .user-pill { min-width: 42px; } .user-pill > div { display: none; } .organization-hero { grid-template-columns: 1fr; } .organization-hero__metrics { grid-column: 1; } .hierarchy-flow, .hierarchy-explainer { grid-template-columns: 1fr; } .opportunity-switcher { grid-template-columns: 1fr 1fr; } .toolbar { align-items: stretch; flex-direction: column; gap: 10px; } .toolbar__actions { justify-content: stretch; } .toolbar__actions .button { flex: 1; } .search-input { width: 100%; } .category-tabs { display: flex; overflow-x: auto; } .category-tabs button { white-space: nowrap; } .crm-reminder-list { grid-template-columns: 1fr; } .crm-reminder-list > button { border-right: 0; } .report-toolbar, .export-hero { align-items: stretch; grid-template-columns: 1fr; flex-direction: column; } .report-toolbar .toolbar__actions { display: grid; grid-template-columns: 1fr; } .modal-backdrop { padding: 14px; } .modal-form { grid-template-columns: 1fr; } .modal-form .span-two { grid-column: 1; } .detail-grid { grid-template-columns: 1fr; } .panel__head { align-items: flex-start; flex-direction: column; } .shipment-list > div:not(.empty-copy) { grid-template-columns: minmax(0, 1fr) auto auto; } .shipment-list > div > b { text-align: left; } .shipment-list .text-button { grid-column: 1 / -1; justify-self: start; } .target-annual-row { grid-template-columns: 1fr; } .identity-lock { grid-template-columns: 1fr; } .identity-lock p { grid-column: 1; } .role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .daily-quote { grid-template-columns: 1fr; gap: 7px; } .daily-quote > small { white-space: normal; } .rank-row { grid-template-columns: 30px minmax(100px, 1fr) minmax(86px, auto); } .rank-row > b { grid-column: 2 / -1; text-align: left; } .personal-rank { grid-template-columns: 1fr; } .period-completion-strip { grid-template-columns: 1fr; } .daily-learning { grid-template-columns: 1fr; } .target-rule-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .command-card--wide, .command-card--risk { grid-column: 1 / -1; } } @media (max-width: 640px) { .app-shell { grid-template-columns: minmax(0, 1fr); } .sidebar { position: static; height: auto; padding: 18px; } .sidebar__brand { padding-bottom: 16px; } .scope-card { margin: 14px 0 10px; } .primary-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nav-group-label { grid-column: 1 / -1; margin: 8px 10px 2px; } .capacity-mini { display: none; } .topbar { position: static; } .page-content { padding: 18px 14px 36px; } .topbar { padding-right: 14px; padding-left: 14px; } .metric-grid, .metric-grid--dense { grid-template-columns: repeat(2, minmax(0, 1fr)); } .organization-hero__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .org-performance, .shipment-list { padding-right: 16px; padding-left: 16px; } .org-admin-members { grid-template-columns: 1fr; } .command-center-view { padding: 18px; } .command-head { align-items: flex-start; flex-direction: column; } .command-kpis, .command-grid { grid-template-columns: 1fr; } .command-card--wide, .command-card--risk { grid-column: 1; } .command-knowledge, .command-risks { grid-template-columns: 1fr; } .command-departments > div { grid-template-columns: 28px minmax(0, 1fr); } .command-departments > div > span:nth-last-child(-n+2) { grid-column: 2; } .command-sales > div { grid-template-columns: 22px minmax(80px, 1fr) minmax(58px, auto); } .command-sales > div > span:nth-last-child(-n+2) { display: none; } .command-assets { grid-template-columns: 1fr; } .command-assets > div { grid-template-columns: 20px minmax(80px, 1fr); } .command-assets em { grid-column: 2; text-align: left; } .command-footer { align-items: flex-start; flex-direction: column; gap: 5px; } } @media (max-width: 440px) { .metric-grid, .metric-grid--dense { grid-template-columns: 1fr; } .primary-nav { grid-template-columns: 1fr; } .quarter-editor-grid { grid-template-columns: 1fr; } .opportunity-switcher, .scope-strip__actions { grid-template-columns: 1fr; } .shipment-list > div:not(.empty-copy) { grid-template-columns: 1fr; } .shipment-erp-note { align-items: flex-start; flex-direction: column; } .role-grid { grid-template-columns: 1fr; } } /* one-screen executive command center */ body.is-command-center-mode { overflow: hidden; background: #030a12; } body.is-command-center-mode .app-shell { display: block !important; width: 100vw; height: 100vh; overflow: hidden; } body.is-command-center-mode .sidebar, body.is-command-center-mode .topbar { display: none; } body.is-command-center-mode .workspace { width: 100vw; height: 100vh; overflow: hidden; } body.is-command-center-mode .page-content { position: relative; width: 100vw; height: 100vh; padding: 0; overflow: hidden; background: #030a12; } body.is-command-center-mode .command-center-view { --command-scale: 1; position: absolute; top: 50%; left: 50%; display: grid; width: 1600px; height: 900px; min-height: 0; padding: 14px 16px 12px; grid-template-rows: 58px 30px 78px minmax(0, 1fr) 126px 20px; gap: 8px; overflow: hidden; border: 0; border-radius: 0; color: #ddecf5; background: radial-gradient(circle at 48% 35%, rgba(26, 115, 147, .16), transparent 34%), radial-gradient(circle at 88% 4%, rgba(38, 109, 151, .16), transparent 28%), linear-gradient(145deg, #050e19, #071b2c 48%, #062530); box-shadow: none; transform: translate(-50%, -50%) scale(var(--command-scale)); transform-origin: center; } body.is-command-center-mode .command-center-view::after { position: absolute; right: 16px; bottom: 11px; left: 16px; height: 1px; background: linear-gradient(90deg, transparent, rgba(76, 213, 201, .28), transparent); content: ''; pointer-events: none; } body.is-command-center-mode .command-head { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 24px; } .command-brand { display: flex; min-width: 0; align-items: center; gap: 18px; } .command-brand .brand__logo-plate { width: 190px; height: 48px; flex: 0 0 190px; aspect-ratio: auto; } .command-brand .brand__logo-plate img { width: 100%; height: 100%; object-fit: contain; object-position: left center; } .command-brand .brand__logo-red { clip-path: inset(0 calc(100% - 48.6px) 0 0); } .command-brand > div { padding-left: 18px; border-left: 1px solid rgba(112, 181, 198, .22); } body.is-command-center-mode .command-brand p { margin: 0; color: #58cfc5; font-size: 9px; font-weight: 800; letter-spacing: .24em; } body.is-command-center-mode .command-brand h2 { margin: 6px 0 0; color: #f4fbff; font-size: 24px; letter-spacing: .08em; } .command-head__right { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: 14px; } .command-clock { display: grid; padding-right: 15px; grid-template-columns: auto auto; column-gap: 9px; align-items: center; border-right: 1px solid rgba(117, 176, 194, .18); } .command-clock span { display: flex; grid-row: 1 / 3; align-items: center; gap: 6px; color: #56d0c5; font-size: 8px; font-weight: 800; letter-spacing: .14em; } .command-clock span i, .command-footer span:last-child i { width: 6px; height: 6px; border-radius: 50%; background: #50d2c5; box-shadow: 0 0 12px rgba(80, 210, 197, .8); } .command-clock strong { color: #f3fbff; font-size: 18px; font-variant-numeric: tabular-nums; letter-spacing: .06em; } .command-clock small { color: rgba(191, 216, 229, .46); font-size: 7px; letter-spacing: .12em; } .command-periods { display: flex; padding: 4px; gap: 3px; border: 1px solid rgba(120, 180, 196, .14); border-radius: 9px; background: rgba(255,255,255,.025); } .command-periods button, .command-map-switch button { height: 28px; padding: 0 11px; border: 0; border-radius: 6px; color: rgba(200, 221, 232, .5); background: transparent; font-size: 8px; } .command-periods button.is-active, .command-map-switch button.is-active { color: #eafffc; background: rgba(40, 160, 157, .28); box-shadow: inset 0 0 0 1px rgba(77, 211, 200, .2); } body.is-command-center-mode .command-head__actions { display: flex; gap: 7px; } body.is-command-center-mode .command-head__actions button { height: 34px; padding: 0 12px; border: 1px solid rgba(130, 186, 201, .18); border-radius: 8px; color: #bcd3df; background: rgba(255,255,255,.03); font-size: 8px; } body.is-command-center-mode .command-head__actions button.is-primary { color: #eafffd; background: rgba(26, 136, 140, .3); } body.is-command-center-mode .command-knowledge { display: grid; height: 30px; margin: 0; padding: 0 13px; grid-template-columns: .95fr 1.25fr auto; gap: 20px; align-items: center; border-color: rgba(103, 172, 190, .12); border-radius: 7px; color: rgba(210, 229, 239, .6); background: rgba(255,255,255,.022); font-size: 8px; } body.is-command-center-mode .command-knowledge span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.is-command-center-mode .command-knowledge b { margin-right: 8px; color: #55cec3; } body.is-command-center-mode .command-knowledge em { color: rgba(130, 203, 204, .58); font-size: 7px; font-style: normal; white-space: nowrap; } body.is-command-center-mode .command-kpis { display: grid; height: 78px; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; } body.is-command-center-mode .command-kpis article { min-width: 0; padding: 11px 14px 9px; border-color: rgba(102, 170, 189, .15); border-radius: 9px; background: linear-gradient(145deg, rgba(21, 53, 73, .78), rgba(8, 30, 48, .88)); } body.is-command-center-mode .command-kpis article::before { height: 1px; opacity: .75; } body.is-command-center-mode .command-kpis article.is-alert::before { background: linear-gradient(90deg, #8e4b43, #d07a65); } body.is-command-center-mode .command-kpis span { font-size: 8px; } body.is-command-center-mode .command-kpis strong { margin: 5px 0 2px; font-size: 23px; line-height: 1; } body.is-command-center-mode .command-kpis strong small { font-size: 8px; } body.is-command-center-mode .command-kpis em { font-size: 7px; } .command-main { display: grid; min-height: 0; grid-template-columns: 1fr 1.34fr 1fr; grid-template-rows: 1fr .9fr; gap: 8px; } body.is-command-center-mode .command-card { min-width: 0; min-height: 0; padding: 11px 12px; overflow: hidden; border-color: rgba(105, 174, 192, .14); border-radius: 9px; background: linear-gradient(145deg, rgba(14, 45, 65, .82), rgba(6, 25, 41, .94)); box-shadow: inset 0 1px rgba(255,255,255,.02); } body.is-command-center-mode .command-card header { min-height: 33px; } body.is-command-center-mode .command-card header span { font-size: 6px; } body.is-command-center-mode .command-card header h3 { margin-top: 4px; font-size: 12px; } body.is-command-center-mode .command-card header small { font-size: 6px; } .command-card--department { grid-column: 1; grid-row: 1; } .command-card--geo { display: grid; min-height: 0; grid-column: 2; grid-row: 1 / 3; grid-template-rows: 36px minmax(0, 1fr) 72px; } .command-card--ranking { grid-column: 3; grid-row: 1; } .command-card--completion { grid-column: 1; grid-row: 2; } .command-main .command-card--risk { grid-column: 3; grid-row: 2; } body.is-command-center-mode .command-departments { margin-top: 3px; } body.is-command-center-mode .command-departments > div { min-height: 70px; padding: 8px 0; grid-template-columns: 25px minmax(110px, 1fr) 72px 72px; gap: 8px; } body.is-command-center-mode .command-departments > div > b { width: 23px; height: 23px; } body.is-command-center-mode .command-departments strong { font-size: 9px; } body.is-command-center-mode .command-departments small { font-size: 6px; } .command-map-switch { display: flex; padding: 2px; gap: 2px; border: 1px solid rgba(113, 177, 194, .13); border-radius: 7px; background: rgba(255,255,255,.02); } .command-map-switch button { height: 24px; padding: 0 10px; } .command-geo-stage { position: relative; min-height: 0; overflow: hidden; border-radius: 7px; background: radial-gradient(circle at 50% 48%, rgba(52, 144, 157, .15), rgba(5, 23, 38, .12) 60%); } .command-geo-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; transform: scale(.97); transition: opacity .55s ease, transform .8s ease; } .command-geo-stage canvas.is-active { opacity: 1; pointer-events: auto; transform: scale(1); } .command-map-insight { position: absolute; bottom: 7px; left: 8px; z-index: 2; display: none; min-width: 132px; height: 38px; padding: 5px 8px; grid-template-columns: minmax(58px, 1fr) auto; grid-template-rows: 10px 13px 9px; column-gap: 8px; align-items: center; border: 1px solid rgba(89, 196, 194, .17); border-radius: 6px; background: rgba(4, 25, 39, .78); box-shadow: 0 8px 24px rgba(0, 7, 15, .2); backdrop-filter: blur(6px); } .command-map-insight.is-active { display: grid; } .command-map-insight span { grid-column: 1; color: rgba(78, 207, 198, .54); font-size: 5px; font-weight: 800; letter-spacing: .14em; } .command-map-insight b { grid-column: 1; overflow: hidden; color: #dff7f8; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; } .command-map-insight strong { grid-row: 1 / 4; grid-column: 2; color: #64d7cd; font-size: 18px; line-height: 1; } .command-map-insight small { grid-column: 1; color: rgba(178, 210, 220, .42); font-size: 5px; } .command-map-signal { position: absolute; right: 8px; bottom: 7px; display: flex; padding: 5px 7px; align-items: center; gap: 6px; border: 1px solid rgba(83, 196, 190, .15); border-radius: 6px; color: rgba(174, 218, 223, .58); background: rgba(5, 26, 40, .68); font-size: 6px; } .command-map-signal i { width: 5px; height: 5px; border-radius: 50%; background: #4fd0c4; box-shadow: 0 0 10px rgba(79, 208, 196, .75); } .command-map-signal em { font-style: normal; } .command-geo-panels { min-height: 0; padding-top: 7px; } .command-geo-panels > div { display: none; height: 100%; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; } .command-geo-panels > div.is-active { display: grid; } .command-geo-panels span { display: flex; min-width: 0; padding: 7px 8px; flex-direction: column; justify-content: center; border: 1px solid rgba(92, 163, 181, .1); border-radius: 6px; background: rgba(255,255,255,.018); } .command-geo-panels b, .command-geo-panels strong, .command-geo-panels small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .command-geo-panels b { color: #9fbac7; font-size: 7px; } .command-geo-panels strong { margin-top: 3px; color: #6ed9ce; font-size: 15px; } .command-geo-panels small { margin-top: 2px; color: rgba(177, 205, 217, .38); font-size: 5px; } body.is-command-center-mode .command-sales { margin-top: 1px; } body.is-command-center-mode .command-sales > div { min-height: 47px; grid-template-columns: 20px minmax(72px, 1fr) repeat(3, minmax(52px, auto)); gap: 6px; } body.is-command-center-mode .command-sales strong { font-size: 8px; } body.is-command-center-mode .command-sales small { font-size: 5px; } body.is-command-center-mode .command-sales em { font-size: 7px; } body.is-command-center-mode .command-rings { height: 92px; margin-top: 1px; } body.is-command-center-mode .command-rings i { top: -5px; width: 58px; height: 58px; } body.is-command-center-mode .command-rings strong { font-size: 11px; } body.is-command-center-mode .command-rings span { margin-top: 18px; font-size: 7px; } body.is-command-center-mode .command-rings small { font-size: 5px; } .command-type-mini { display: grid; margin-top: 2px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; } .command-type-mini span { display: flex; min-width: 0; padding: 6px 7px; align-items: center; justify-content: space-between; border-radius: 5px; color: #9bb7c4; background: rgba(255,255,255,.025); } .command-type-mini b { overflow: hidden; font-size: 6px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; } .command-type-mini strong { color: #61d2c6; font-size: 11px; } body.is-command-center-mode .command-risks { margin-top: 1px; grid-template-columns: 1fr; gap: 0; } body.is-command-center-mode .command-risks button { min-height: 43px; padding: 4px 0; } body.is-command-center-mode .command-risks strong { font-size: 7px; } body.is-command-center-mode .command-risks small { font-size: 5px; } body.is-command-center-mode .command-risks button > b { font-size: 7px; } .command-lower { display: grid; min-height: 0; grid-template-columns: 2fr 1fr .9fr; gap: 8px; } .command-lower .command-card { min-height: 0; } .command-funnel-rail { position: relative; display: flex; height: 74px; margin-top: 1px; align-items: center; overflow: hidden; } .command-funnel-rail::after { position: absolute; top: 0; bottom: 0; left: -18%; width: 16%; opacity: .35; background: linear-gradient(90deg, transparent, rgba(126, 255, 240, .28), transparent); content: ''; transform: skewX(-18deg); pointer-events: none; } .command-funnel-rail > span { position: relative; display: grid; height: var(--command-funnel-height); min-width: 0; padding: 4px 4px 3px 7px; flex: 1; grid-template-columns: minmax(0, 1fr); grid-template-rows: 7px 10px minmax(10px, 1fr) 8px; align-items: center; overflow: hidden; color: #dffaff; background: linear-gradient(135deg, rgba(38, 113, 139, .78), rgba(26, 151, 143, .62)); clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 50%, calc(100% - 5px) 100%, 0 100%, 5px 50%); } .command-funnel-rail > span:first-child { padding-left: 5px; clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 50%, calc(100% - 5px) 100%, 0 100%); } .command-funnel-rail > span:nth-child(2) { filter: brightness(1.04); } .command-funnel-rail > span:nth-child(3) { filter: brightness(1.08); } .command-funnel-rail > span:nth-child(4) { filter: brightness(1.12); } .command-funnel-rail > span:nth-child(5) { filter: hue-rotate(10deg) brightness(1.05); } .command-funnel-rail > span:nth-child(6) { filter: hue-rotate(22deg); } .command-funnel-rail > span:nth-child(n+7) { filter: hue-rotate(34deg) brightness(.98); } .command-funnel-rail > span:nth-child(n+9) { filter: hue-rotate(48deg) brightness(.94); } .command-funnel-rail i { grid-row: 1; color: rgba(189, 231, 237, .46); font-size: 4px; font-style: normal; letter-spacing: .08em; } .command-funnel-rail b { grid-row: 2; overflow: hidden; font-size: 5.5px; text-overflow: ellipsis; white-space: nowrap; } .command-funnel-rail strong { grid-row: 3; color: #f0ffff; font-size: 11px; line-height: 1; } .command-funnel-rail strong small { margin-left: 1px; color: rgba(205, 236, 239, .55); font-size: 4px; } .command-funnel-rail em { grid-row: 4; overflow: hidden; color: rgba(194, 231, 235, .58); font-size: 4px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; } .command-mix-columns { display: grid; margin-top: 1px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; } body.is-command-center-mode .command-mix-columns .command-bars { margin-top: 0; gap: 5px; } body.is-command-center-mode .command-mix-columns .command-bars > div { grid-template-columns: 54px minmax(0, 1fr) 13px; gap: 5px; } body.is-command-center-mode .command-mix-columns .command-bars span { font-size: 6px; } body.is-command-center-mode .command-mix-columns .command-bars i { height: 4px; } body.is-command-center-mode .command-mix-columns .command-bars strong { font-size: 6px; } body.is-command-center-mode .command-assets { margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; } body.is-command-center-mode .command-assets > div { min-height: 34px; grid-template-columns: 17px minmax(72px, 1fr) auto; gap: 5px; } body.is-command-center-mode .command-assets strong { font-size: 7px; } body.is-command-center-mode .command-assets small { font-size: 5px; } body.is-command-center-mode .command-assets em { color: #78c5cb; font-size: 6px; white-space: nowrap; } body.is-command-center-mode .command-footer { display: flex; height: 20px; margin: 0; padding: 0 9px; align-items: center; justify-content: space-between; gap: 15px; border-color: rgba(98, 166, 183, .08); border-radius: 5px; color: rgba(183, 211, 222, .38); background: rgba(255,255,255,.012); font-size: 6px; } body.is-command-center-mode .command-footer span:last-child { display: flex; align-items: center; gap: 6px; color: rgba(107, 205, 201, .55); } @keyframes command-pulse { 0%, 100% { opacity: .45; transform: scale(.88); } 50% { opacity: 1; transform: scale(1.2); } } @keyframes command-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes command-flow { from { left: -18%; } to { left: 112%; } } body.is-command-center-mode .command-clock span i, body.is-command-center-mode .command-map-signal i, body.is-command-center-mode .command-footer span:last-child i { animation: command-pulse 1.8s ease-in-out infinite; } body.is-command-center-mode .command-kpis article, body.is-command-center-mode .command-card { animation: command-rise .55s ease both; } body.is-command-center-mode .command-kpis article:nth-child(2), body.is-command-center-mode .command-card:nth-child(2) { animation-delay: .05s; } body.is-command-center-mode .command-kpis article:nth-child(3), body.is-command-center-mode .command-card:nth-child(3) { animation-delay: .1s; } body.is-command-center-mode .command-kpis article:nth-child(4), body.is-command-center-mode .command-card:nth-child(4) { animation-delay: .15s; } body.is-command-center-mode .command-kpis article:nth-child(5), body.is-command-center-mode .command-card:nth-child(5) { animation-delay: .2s; } body.is-command-center-mode .command-funnel-rail::after { animation: command-flow 3.6s ease-in-out infinite; } body.is-command-center-mode .command-card { transition: border-color .25s ease, background-color .25s ease; } body.is-command-center-mode .command-card:hover { border-color: rgba(85, 207, 198, .3); } @media (prefers-reduced-motion: reduce) { body.is-command-center-mode .command-clock span i, body.is-command-center-mode .command-map-signal i, body.is-command-center-mode .command-footer span:last-child i, body.is-command-center-mode .command-kpis article, body.is-command-center-mode .command-card, body.is-command-center-mode .command-funnel-rail::after { animation: none; } } /* 0.17.0 visual system — restrained, high-clarity business UI */ :root { --ink: #14263a; --muted: #66758a; --line: #dce3ea; --panel: #ffffff; --navy: #0b1f33; --navy-soft: #153b59; --teal: #147b7d; --teal-soft: #e9f4f2; --blue: #315f7c; --amber: #a56b22; --red: #d62f36; --shadow: 0 10px 28px rgba(16, 42, 67, .065); } body:not(.is-command-center-mode) { color: var(--ink); background: radial-gradient(circle at 95% 0, rgba(20, 123, 125, .045), transparent 25%), #f4f6f8; } body:not(.is-command-center-mode) button, body:not(.is-command-center-mode) input, body:not(.is-command-center-mode) select, body:not(.is-command-center-mode) textarea { letter-spacing: .01em; } button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline-color: rgba(214, 47, 54, .26); } .login-view { grid-template-columns: minmax(520px, 1.06fr) minmax(460px, .94fr); } .login-showcase { padding: 38px clamp(48px, 6vw, 88px) 42px; background: linear-gradient(145deg, rgba(8, 25, 43, .97), rgba(13, 49, 70, .94)), var(--navy); } .login-showcase__content { max-width: 620px; margin-bottom: 30px; } .login-showcase h1 { max-width: 600px; margin: 16px 0 20px; font-size: clamp(40px, 3.7vw, 60px); line-height: 1.17; letter-spacing: -.035em; } .login-showcase__content > p:last-child { max-width: 550px; font-size: 15px; line-height: 1.75; } .login-showcase__content .eyebrow, #login-quote-source { color: #d95a5f; } .login-proof { padding-top: 24px; } .login-proof strong { font-size: 15px; } .login-panel { padding: 44px; background: #f7f8fa; } .login-card { width: min(400px, 100%); } .login-card h2 { font-size: 29px; } .login-card__intro { margin: 10px 0 28px; } .input-shell { height: 50px; border-radius: 10px; } .input-shell:focus-within { border-color: #8b9cab; box-shadow: 0 0 0 4px rgba(20, 62, 88, .07); } .button { border-radius: 9px; } .button--primary { background: linear-gradient(135deg, #173a58, #0d2c46); box-shadow: 0 10px 22px rgba(11, 31, 51, .16); } .button--primary:hover { background: linear-gradient(135deg, #1b4668, #123650); } .demo-login > button { text-align: center; } .app-shell { grid-template-columns: 220px minmax(0, 1fr); } .sidebar { padding: 23px 16px 20px; background: linear-gradient(180deg, #08192b 0%, #0b2439 100%); } .sidebar__brand { padding: 0 8px 21px; } .scope-card { margin: 18px 4px 14px; border-radius: 10px; } .primary-nav { gap: 4px; } .nav-item { height: 42px; border-radius: 8px; font-size: 12px; } .nav-item.is-active { background: rgba(255,255,255,.095); box-shadow: inset 3px 0 #d62f36; } .nav-item.is-active .nav-item__index { color: #f06b70; } .capacity-mini__track i { background: #d62f36; } .topbar { min-height: 82px; padding: 15px 28px 14px; background: rgba(248,250,251,.95); } .topbar h1 { font-size: 24px; } .topbar__subtitle { color: #748195; font-size: 11px; } .page-content { padding: 22px 28px 40px; } .panel { border-color: rgba(215, 223, 232, .92); border-radius: 13px; box-shadow: var(--shadow); } .panel__head { min-height: 58px; padding: 12px 18px; } .panel__head h2 { font-size: 15px; } .panel__head p { color: #7f8c9d; font-size: 10.5px; } .daily-knowledge-grid { margin-bottom: 15px; gap: 12px; } .daily-quote, .daily-learning { min-height: 72px; padding: 12px 16px; border-radius: 11px; background: #fff; box-shadow: 0 7px 18px rgba(16,42,67,.035); } .daily-quote { border-left: 3px solid #d62f36; } .daily-learning { grid-template-columns: 104px minmax(0, 1fr); border-left: 3px solid #147b7d; } .daily-quote > span, .daily-learning__label span { color: #173e5b; } .daily-quote > strong, .daily-learning__copy strong { font-size: 13.5px; } .daily-learning__copy p { color: #66758a; font-size: 9.5px; } .metric-grid { margin-bottom: 15px; gap: 12px; } .metric-card { min-height: 116px; padding: 17px 18px; } .metric-card::after { opacity: .65; } .metric-card__head { color: #66758a; font-size: 11.5px; } .metric-card__signal { width: 28px; background: #315f7c; } .metric-card:nth-child(4n+2) .metric-card__signal { background: #147b7d; } .metric-card:nth-child(4n+3) .metric-card__signal { background: #8a6b35; } .metric-card:nth-child(4n+4) .metric-card__signal { background: #d62f36; } .metric-card strong { margin-top: 15px; font-size: 30px; } .metric-card p { margin-top: 7px; color: #7b8797; font-size: 10.5px; } .section-grid { gap: 15px; } .chart-wrap { height: 246px; } .funnel-panel { margin-top: 15px; } .toolbar { margin-bottom: 13px; } .category-tabs { margin-bottom: 14px; background: #e9edf1; } .category-tabs button { min-height: 36px; font-size: 11px; } .category-tabs button.is-active { color: #fff; background: #173a58; box-shadow: none; } .search-input, .filter-select { height: 40px; font-size: 11.5px; } .data-table th { height: 44px; color: #6f7c8d; font-size: 9.5px; } .data-table td { height: 64px; color: #46566a; font-size: 10.5px; } .data-table td strong { font-size: 11.5px; } .status { min-height: 24px; font-size: 9.5px; } .text-button { color: #116f73; } .button--soft { color: #0e6669; background: #e7f2f1; } .customer-data-panel .data-table { min-width: 980px; table-layout: fixed; } .customer-data-panel .data-table th, .customer-data-panel .data-table td { padding-right: 12px; padding-left: 12px; overflow-wrap: anywhere; } .customer-data-panel .data-table th:nth-child(1) { width: 17%; } .customer-data-panel .data-table th:nth-child(2) { width: 18%; } .customer-data-panel .data-table th:nth-child(3) { width: 14%; } .customer-data-panel .data-table th:nth-child(4) { width: 12%; } .customer-data-panel .data-table th:nth-child(5) { width: 14%; } .customer-data-panel .data-table th:nth-child(6) { width: 15%; } .customer-data-panel .data-table th:nth-child(7) { width: 174px; } .personal-command { background: #fff; } .personal-rank > span { background: #f7f9fa; } .segmented { background: #e9edf1; } .segmented button.is-active { color: #fff; background: #173a58; box-shadow: none; } .intel-summary { background: linear-gradient(135deg, #102f49, #0b1f33); box-shadow: 0 14px 32px rgba(11,31,51,.14); } .intel-summary .eyebrow { color: #f06b70; } @media (max-width: 1180px) { .app-shell { grid-template-columns: 204px minmax(0, 1fr); } .page-content { padding-right: 22px; padding-left: 22px; } .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 820px) { .login-view { display: block; background: #f7f8fa; } .login-showcase { min-height: auto; padding: 28px 24px; } .login-showcase__content { margin: 32px 0 18px; } .login-showcase h1 { font-size: 38px; } .login-proof { display: none; } .login-panel { padding: 34px 22px 44px; } .daily-knowledge-grid { grid-template-columns: 1fr; } }