.brand-lockup { display: flex; align-items: center; gap: .7rem; min-height: 46px; padding: 0 .4rem; }
.brand-emblem { position: relative; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 13px; background: linear-gradient(145deg, var(--blue), #1399f2); box-shadow: 0 9px 22px rgba(8,120,238,.22); }
.brand-emblem::before, .brand-emblem::after { content: ""; position: absolute; left: 14px; width: 17px; height: 2px; background: #fff; transform-origin: left center; }
.brand-emblem::before { top: 20px; transform: rotate(-34deg); }.brand-emblem::after { top: 21px; transform: rotate(34deg); }
.brand-emblem span { position: absolute; width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; background: rgba(255,255,255,.18); }
.brand-emblem span:nth-child(1) { left: 8px; top: 17px; }.brand-emblem span:nth-child(2) { right: 7px; top: 7px; }.brand-emblem span:nth-child(3) { right: 7px; bottom: 7px; }.brand-emblem span:nth-child(4) { display: none; }
.brand-name { color: var(--navy); font-size: 1.24rem; font-weight: 790; letter-spacing: -.035em; }.brand-name span { color: var(--blue); }.brand-subtitle { margin-top: .08rem; color: var(--quiet); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.organization-card { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: .7rem; padding: .75rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); }
.organization-avatar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--navy); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .04em; }
.organization-copy { min-width: 0; }.organization-copy strong, .organization-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.organization-copy strong { color: var(--navy); font-size: .8rem; }.organization-copy span { margin-top: .18rem; color: var(--quiet); font-size: .68rem; }
.primary-navigation { display: grid; gap: .23rem; overflow-y: auto; }
.nav-button, .advanced-link { width: 100%; min-height: 43px; display: flex; align-items: center; gap: .75rem; padding: .55rem .72rem; border: 1px solid transparent; border-radius: 11px; background: transparent; color: var(--muted); text-align: left; font-size: .84rem; font-weight: 650; }
.nav-button:hover, .advanced-link:hover { background: var(--surface-blue); color: var(--navy); }.nav-button.is-active { border-color: rgba(8,120,238,.12); background: linear-gradient(100deg, var(--blue), #1399f2); color: #fff; box-shadow: 0 8px 20px rgba(8,120,238,.18); }
.nav-symbol { width: 22px; flex: 0 0 22px; text-align: center; font-size: 1rem; }.nav-count { margin-left: auto; min-width: 22px; height: 22px; display: grid; place-items: center; padding: 0 .35rem; border-radius: 100px; background: #eef3f8; color: var(--muted); font-size: .66rem; }.nav-button.is-active .nav-count { background: rgba(255,255,255,.2); color: #fff; }
.connection-summary { display: flex; align-items: center; gap: .65rem; padding: .45rem .72rem; color: var(--muted); }.connection-summary strong,.connection-summary span { display: block; }.connection-summary strong { color: var(--navy); font-size: .75rem; }.connection-summary span { margin-top: .12rem; font-size: .67rem; }.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(16,166,106,.1); }
.global-search { height: 46px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: .65rem; padding: 0 .85rem; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-soft); color: var(--quiet); }.global-search input { min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: .86rem; }.global-search input::placeholder { color: #8da0b6; }.global-search kbd { padding: .16rem .4rem; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--quiet); font-size: .65rem; box-shadow: var(--shadow-xs); }
.icon-button, .text-button, .profile-button, .primary-button, .secondary-button { border: 1px solid var(--line); background: #fff; }
.icon-button { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; }.icon-button:hover, .text-button:hover, .profile-button:hover, .secondary-button:hover { border-color: #a8cae9; background: #f5faff; }.text-button { min-height: 40px; padding: 0 .8rem; border-radius: 10px; color: var(--navy); font-size: .76rem; font-weight: 700; }.profile-button { min-height: 44px; display: flex; align-items: center; gap: .6rem; padding: .3rem .65rem .3rem .35rem; border-radius: 13px; }.profile-button > span:first-child { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(145deg,var(--blue),#1399f2); color:#fff; font-size:.7rem; font-weight:800; }.profile-copy { display: block; min-width: 92px; text-align: left; }.profile-copy strong,.profile-copy small { display:block; }.profile-copy strong { color:var(--navy);font-size:.76rem; }.profile-copy small { margin-top:.1rem;color:var(--quiet);font-size:.65rem; }
.notification-button { position: relative; }.notification-count { position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; display:grid;place-items:center;padding:0 .28rem;border:2px solid #fff;border-radius:100px;background:var(--red);color:#fff;font-size:.59rem;font-weight:800; }
.menu-toggle { display:none; }.demo-badge { padding: .2rem .42rem; border-radius: 5px; background: #fff2d9; color: #945b00; font-size: .63rem; font-weight: 800; letter-spacing: .08em; }.demo-selectors label { color: var(--quiet); font-weight: 650; }.demo-selectors select { min-height: 32px; padding: 0 1.8rem 0 .55rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--text); font-size: .73rem; }
.eyebrow { display: block; color: var(--blue); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.primary-button,.secondary-button { min-height: 40px; padding: 0 .9rem; border-radius: 10px; font-size: .78rem; font-weight: 750; }.primary-button { border-color: var(--blue); background: var(--blue); color:#fff; }.primary-button:hover { background:var(--blue-dark); }.secondary-button { color:var(--navy); }
.card { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow-xs); }.card:hover { border-color:#c7dbea; box-shadow:var(--shadow-sm); }.card-pad { padding:1.05rem; }.card-head { display:flex;justify-content:space-between;align-items:flex-start;gap:.75rem;margin-bottom:.85rem; }.card-head h2,.card-head h3 { margin:0;color:var(--navy);font-size:.94rem;line-height:1.3; }.card-head p { margin:.22rem 0 0;color:var(--quiet);font-size:.72rem;line-height:1.4; }.card-action { flex:0 0 auto;border:0;background:transparent;color:var(--blue);font-size:.71rem;font-weight:750; }.card-action:hover { text-decoration:underline; }.card-icon { width:37px;height:37px;display:grid;place-items:center;border-radius:11px;background:var(--surface-blue);color:var(--blue);font-weight:800; }
.metric-row { display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.75rem; }.metric-block { min-width:0;padding:.78rem;border:1px solid #e5edf5;border-radius:12px;background:var(--surface-soft); }.metric-label { display:block;color:var(--muted);font-size:.7rem;font-weight:650; }.metric-value { display:block;margin-top:.32rem;color:var(--navy);font-size:1.5rem;font-weight:800;letter-spacing:-.04em; }.metric-meta { display:flex;align-items:center;gap:.3rem;margin-top:.3rem;color:var(--quiet);font-size:.65rem; }.up { color:var(--green); }.down { color:var(--red); }.attention { color:var(--amber); }
.summary-strip { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.85rem;margin-bottom:1rem; }.summary-card { display:flex;align-items:center;gap:.8rem;padding:.95rem 1rem; }.summary-card .card-icon { flex:0 0 auto; }.summary-card strong,.summary-card span { display:block; }.summary-card strong { color:var(--navy);font-size:1.25rem;letter-spacing:-.03em; }.summary-card span { margin-top:.12rem;color:var(--muted);font-size:.69rem; }
.list { display:grid; }.list-row { display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.72rem;padding:.72rem 0;border-bottom:1px solid #e8eff5; }.list-row:last-child { border-bottom:0; }.list-marker { width:10px;height:10px;border-radius:50%;background:var(--blue); }.list-marker.high,.list-marker.critical { background:var(--red); }.list-marker.medium { background:var(--amber); }.list-marker.healthy,.list-marker.complete { background:var(--green); }.list-copy { min-width:0; }.list-copy strong,.list-copy span { display:block; }.list-copy strong { color:var(--navy);font-size:.78rem;line-height:1.35; }.list-copy span { margin-top:.15rem;color:var(--muted);font-size:.68rem;line-height:1.4; }.list-meta { color:var(--quiet);font-size:.65rem;white-space:nowrap; }
.pill { display:inline-flex;align-items:center;min-height:24px;padding:.2rem .5rem;border:1px solid var(--line);border-radius:100px;background:#f6f9fc;color:var(--muted);font-size:.63rem;font-weight:750;text-transform:capitalize; }.pill.high,.pill.critical { border-color:#f1c4c8;background:#fff1f2;color:#b62531; }.pill.medium,.pill.attention { border-color:#edd6aa;background:#fff8e9;color:#92600e; }.pill.healthy,.pill.complete,.pill.on-track { border-color:#bde5d4;background:#eefbf5;color:#087949; }.pill.blue { border-color:#bfdcff;background:#eef7ff;color:#0961c5; }
.alert-card { background:linear-gradient(120deg,#fff,#fff8f8); }.task-check { width:20px;height:20px;border:2px solid #aec0d2;border-radius:6px;background:#fff; }.task-check.complete { border-color:var(--green);background:var(--green);position:relative; }.task-check.complete::after { content:"✓";position:absolute;inset:-2px;display:grid;place-items:center;color:#fff;font-size:.7rem;font-weight:900; }
.app-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:.7rem; }.app-tile { display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.6rem;padding:.72rem;border:1px solid var(--line);border-radius:12px;background:var(--surface-soft); }.app-logo { width:33px;height:33px;display:grid;place-items:center;border-radius:10px;color:#fff;font-size:.7rem;font-weight:850; }.app-tile strong,.app-tile span { display:block; }.app-tile strong { color:var(--navy);font-size:.72rem; }.app-tile span { margin-top:.12rem;color:var(--quiet);font-size:.61rem; }.app-state { width:8px;height:8px;border-radius:50%;background:var(--green); }.app-state.warning { background:var(--amber); }
.progress-track { height:7px;overflow:hidden;border-radius:100px;background:#e7eef5; }.progress-fill { height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--blue),var(--cyan)); }.progress-label { display:flex;justify-content:space-between;gap:.6rem;margin-bottom:.35rem;color:var(--muted);font-size:.68rem; }.progress-label strong { color:var(--navy); }
.sparkline { width:100%;height:auto;display:block;overflow:visible; }.sparkline .grid { stroke:#e5edf5;stroke-width:1; }.sparkline .area { fill:url(#sparkArea); }.sparkline .line { fill:none;stroke:var(--blue);stroke-width:3;stroke-linecap:round;stroke-linejoin:round; }.sparkline .dot { fill:#fff;stroke:var(--cyan);stroke-width:3; }
.table-wrap { overflow-x:auto; }.data-table { width:100%;border-collapse:collapse;font-size:.74rem; }.data-table th,.data-table td { padding:.75rem .6rem;border-bottom:1px solid #e6edf4;text-align:left; }.data-table th { color:var(--quiet);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase; }.data-table td { color:var(--text); }.data-table tbody tr:hover { background:#f8fbfe; }
.recommendation { display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.7rem;align-items:start;padding:.8rem;border:1px solid #dbe8f4;border-radius:12px;background:linear-gradient(120deg,#f7fbff,#fff); }.recommendation + .recommendation { margin-top:.65rem; }.recommendation .card-icon { width:32px;height:32px; }.recommendation strong,.recommendation span { display:block; }.recommendation strong { color:var(--navy);font-size:.76rem; }.recommendation span { margin-top:.18rem;color:var(--muted);font-size:.67rem;line-height:1.45; }
.activity-avatar { width:30px;height:30px;display:grid;place-items:center;border-radius:10px;background:#e8f3ff;color:var(--blue-dark);font-size:.62rem;font-weight:800; }
.search-results { position:fixed;z-index:60;top:70px;left:calc(var(--sidebar-width) + 2rem);width:min(620px,calc(100vw - var(--sidebar-width) - 4rem));max-height:62vh;overflow:auto;padding:.6rem;border:1px solid var(--line);border-radius:15px;background:#fff;box-shadow:var(--shadow-md); }.search-result { width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.7rem;align-items:center;padding:.7rem;border:0;border-radius:10px;background:transparent;text-align:left; }.search-result:hover { background:var(--surface-blue); }.search-result strong,.search-result span { display:block; }.search-result strong { font-size:.76rem; }.search-result span { margin-top:.15rem;color:var(--muted);font-size:.66rem; }.search-empty { padding:1.3rem;color:var(--muted);text-align:center;font-size:.78rem; }
.toast-region { position:fixed;right:1.2rem;bottom:1.2rem;z-index:90;display:grid;gap:.5rem; }.toast { max-width:360px;padding:.85rem 1rem;border:1px solid #cfe0ee;border-radius:12px;background:var(--navy);color:#fff;box-shadow:var(--shadow-md);font-size:.76rem;line-height:1.4;animation:toast-in .18s ease-out; }@keyframes toast-in{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
dialog { width:min(760px,calc(100vw - 2rem));max-height:86vh;padding:0;border:1px solid var(--line);border-radius:20px;background:#fff;color:var(--text);box-shadow:var(--shadow-md); }dialog::backdrop { background:rgba(16,34,74,.4);backdrop-filter:blur(3px); }.dialog-shell { display:grid;max-height:86vh; }.dialog-head { display:flex;justify-content:space-between;gap:1rem;padding:1.1rem 1.2rem;border-bottom:1px solid var(--line); }.dialog-head h2 { margin:.2rem 0 0;color:var(--navy);font-size:1.25rem; }.dialog-head p { margin:.35rem 0 0;color:var(--muted);font-size:.72rem; }.dialog-content,.customize-content { overflow:auto;padding:1.2rem; }.dialog-actions { display:flex;justify-content:flex-end;gap:.6rem;padding:1rem 1.2rem;border-top:1px solid var(--line); }.customize-row { display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:.7rem;padding:.72rem 0;border-bottom:1px solid #e8eff5; }.customize-row input { width:18px;height:18px;accent-color:var(--blue); }.order-button { width:30px;height:30px;border:1px solid var(--line);border-radius:8px;background:#fff; }.order-button:disabled { opacity:.35;cursor:not-allowed; }
.hidden-card { display:none !important; }