:root { --ws-blue:#286bff; --ws-ink:#081433; --ws-muted:#6c7fa5; --ws-line:#dce7f8; }
body { background:#f3f8ff; }
.wsx-shell { min-width:1180px; min-height:100vh; display:grid; grid-template-columns:270px minmax(0,1fr); grid-template-rows:92px auto; gap:0; padding:20px; color:var(--ws-ink); background:#f3f8ff; }
.wsx-sidebar { grid-column:1; grid-row:1 / -1; position:sticky; top:20px; height:calc(100vh - 40px); min-height:760px; margin-right:20px; padding:18px 14px 16px; display:flex; flex-direction:column; border:1px solid var(--ws-line); border-radius:19px; background:#fff; box-shadow:0 16px 42px rgba(59,93,154,.06); overflow:hidden; }
.wsx-brand { height:66px; display:grid; grid-template-columns:48px minmax(0,1fr) 38px; align-items:center; gap:12px; padding:0 2px 14px; }
.wsx-brand img { width:48px; height:48px; object-fit:contain; }
.wsx-brand strong { overflow:hidden; white-space:nowrap; font-size:20px; }
.wsx-brand button { width:38px; height:38px; border:1px solid var(--ws-line); border-radius:11px; color:#57709b; background:#fff; font-size:15px; }
.wsx-brand button img { width:100%; height:100%; object-fit:contain; }
.wsx-nav { display:grid; gap:10px; padding-top:14px; }
.wsx-nav button { position:relative; min-height:57px; border:0; border-radius:13px; padding:0 12px; display:grid; grid-template-columns:38px minmax(0,1fr) 18px; align-items:center; gap:10px; color:#38537e; background:transparent; text-align:left; }
.wsx-nav button.active { color:#1260ef; background:#edf5ff; }
.wsx-nav button.active::before { content:""; position:absolute; left:0; top:10px; bottom:10px; width:3px; border-radius:3px; background:#2c70ff; }
.wsx-nav img { width:38px; height:38px; object-fit:contain; }
.wsx-nav span { font-size:14px; font-weight:700; }
.wsx-nav b { display:grid; place-items:center; }
.wsx-nav b img { width:18px; height:18px; object-fit:contain; }
.wsx-sidebar-robot { width:215px; max-height:255px; margin:auto auto 8px; object-fit:contain; }
.wsx-sidebar-foot { border-top:1px solid #edf2fa; padding-top:9px; display:grid; gap:3px; }
.wsx-sidebar-foot button { min-height:43px; border:0; padding:0 9px; display:flex; align-items:center; gap:10px; color:#526b96; background:transparent; font-weight:650; }
.wsx-sidebar-foot img { width:31px; height:31px; object-fit:contain; }

.wsx-topbar { grid-column:2; grid-row:1; height:74px; padding:0 18px; display:flex; align-items:center; justify-content:space-between; border:1px solid var(--ws-line); border-radius:18px; background:#fff; box-shadow:0 13px 36px rgba(59,93,154,.05); }
.wsx-ip-switch { display:flex; align-items:center; gap:9px; }
.wsx-ip-switch img { width:42px; height:42px; object-fit:contain; }
.wsx-ip-switch strong { font-size:17px; }
.wsx-ip-switch select { min-width:210px; border:0; outline:0; color:var(--ws-ink); background:#fff; font-size:17px; font-weight:750; }
.wsx-top-actions { display:flex; align-items:center; gap:14px; }
.wsx-top-actions button { position:relative; min-width:110px; height:54px; border:1px solid var(--ws-line); border-radius:15px; padding:0 14px; display:grid; grid-template-columns:28px auto; grid-template-rows:1fr 1fr; align-items:center; background:#fff; color:var(--ws-ink); }
.wsx-top-actions button:first-child { display:flex; justify-content:center; gap:8px; font-weight:700; }
.wsx-top-actions button > img { grid-row:1 / 3; width:28px; height:28px; object-fit:contain; }
.wsx-top-actions button small { align-self:end; font-size:12px; }
.wsx-top-actions button strong { align-self:start; font-size:17px; }
.wsx-top-actions button i { position:absolute; right:8px; top:5px; min-width:18px; height:18px; border-radius:9px; display:grid; place-items:center; color:#fff; background:#f34c56; font-size:10px; font-style:normal; }
.wsx-top-actions > img,
.wsx-top-actions .wsx-avatar { width:58px; height:58px; border:0; border-radius:50%; padding:0; overflow:hidden; background:transparent; }
.wsx-top-actions .wsx-avatar { min-width:58px; display:block; }
.wsx-top-actions .wsx-avatar img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
.wsx-content { grid-column:2; grid-row:2; min-width:0; padding:0; }

.wsx-dashboard { display:grid; grid-template-columns:repeat(24,minmax(0,1fr)); gap:8px; align-items:stretch; }
.wsx-panel { min-width:0; border:1px solid var(--ws-line); border-radius:18px; background:#fff; overflow:hidden; }
.wsx-panel > header { padding:16px 20px 8px; }
.wsx-panel h2 { margin:0; font-size:18px; line-height:1.25; }
.wsx-panel h2 { display:flex; align-items:center; gap:7px; }
.wsx-panel h2 img { width:21px; height:21px; object-fit:contain; }
.wsx-panel header p { margin:4px 0 0; color:var(--ws-muted); font-size:12px; }

.wsx-hero { grid-column:1 / span 10; height:348px; display:grid; grid-template-columns:minmax(0,1fr) 47%; padding:24px 18px 18px 26px; }
.wsx-hero-copy { position:relative; z-index:1; }
.wsx-hero h1 { margin:0; font-size:36px; line-height:1.25; }
.wsx-hero-copy > p { margin:3px 0 15px; color:#61749a; font-size:15px; }
.wsx-stage-list { border:1px solid var(--ws-line); border-radius:11px; padding:5px 11px; background:#fff; }
.wsx-stage-list div { min-height:36px; display:grid; grid-template-columns:24px 90px minmax(0,1fr); align-items:center; gap:5px; border-bottom:1px solid #edf2fa; }
.wsx-stage-list img { width:22px; height:22px; object-fit:contain; }
.wsx-stage-list div:last-child { border-bottom:0; }
.wsx-stage-list b { color:#5b7097; font-size:12px; }
.wsx-stage-list strong { color:#2864ea; font-size:12px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.wsx-hero-buttons { display:flex; gap:10px; margin-top:10px; }
.wsx-hero-buttons button { flex:1; height:43px; border:1px solid var(--ws-line); border-radius:9px; color:#1d315a; background:#fff; font-weight:750; }
.wsx-hero-buttons button { display:flex; align-items:center; justify-content:center; gap:7px; }
.wsx-hero-buttons img { width:21px; height:21px; object-fit:contain; }
.wsx-hero-buttons .primary { color:#fff; border-color:#286bff; background:#286bff; }
.wsx-score { position:relative; display:grid; place-items:center; }
.wsx-score > img { width:100%; max-width:330px; object-fit:contain; }
.wsx-score > div { position:absolute; width:118px; height:92px; display:grid; place-items:center; align-content:center; background:#fff; }
.wsx-score strong { font-size:48px; line-height:1; }
.wsx-score span { margin-top:7px; color:#63769c; font-size:13px; }

.wsx-check { grid-column:11 / -1; height:348px; padding:0 0 14px; }
.wsx-check-grid { height:257px; padding:8px 20px 0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.wsx-check article { min-width:0; padding:12px 10px; display:grid; grid-template-rows:94px 38px 32px 7px; justify-items:center; align-items:center; border:1px solid var(--ws-line); border-radius:13px; }
.wsx-check article > img { width:92px; height:92px; object-fit:contain; }
.wsx-check article > strong { text-align:center; font-size:13px; }
.wsx-check article > div { width:100%; display:flex; justify-content:space-around; color:#1e3157; font-size:12px; }
.wsx-check article span { color:#22a691; }
.wsx-check article > i,.wsx-radar article > i { width:88%; height:6px; border-radius:5px; overflow:hidden; background:#e7edf6; }
.wsx-check article em,.wsx-radar article em { display:block; height:100%; border-radius:5px; background:#159ce6; }

.wsx-flow { grid-column:1 / span 13; height:305px; }
.wsx-flow-grid { padding:9px 26px 14px; display:grid; grid-template-columns:repeat(5,minmax(110px,145px)); justify-content:space-between; gap:10px; }
.wsx-flow article { position:relative; min-width:0; height:230px; padding:7px 8px 9px; display:grid; grid-template-rows:94px 20px 34px minmax(42px,1fr) 29px; justify-items:center; text-align:center; border:1px solid var(--ws-line); border-radius:12px; }
.wsx-flow article > img { width:88px; height:92px; object-fit:contain; object-position:center; }
.wsx-flow small { color:#2387d9; font-weight:700; }
.wsx-flow strong { max-width:100%; font-size:12px; overflow:hidden; }
.wsx-flow p { margin:0; max-width:100%; color:#687b9f; font-size:10px; line-height:1.45; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.wsx-flow button { width:90%; height:28px; border:1px solid #cfe0fa; border-radius:6px; color:#2664ce; background:#fff; font-size:10px; }

.wsx-radar { grid-column:14 / -1; height:305px; }
.wsx-radar-grid { padding:8px 16px 14px; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; }
.wsx-radar article { min-width:0; height:218px; padding:9px 5px; display:grid; grid-template-rows:74px 30px 27px 6px 24px; justify-items:center; align-items:center; border:1px solid var(--ws-line); border-radius:11px; text-align:center; }
.wsx-radar img { width:70px; height:70px; object-fit:contain; }
.wsx-radar strong { max-width:100%; font-size:11px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.wsx-radar b { font-size:11px; }
.wsx-radar span { color:#1ca28e; font-size:10px; }

.wsx-profile { grid-column:1 / span 10; height:174px; }
.wsx-profile > div { padding:5px 12px 13px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.wsx-profile article { min-width:0; height:94px; padding:8px; display:grid; grid-template-columns:42px minmax(0,1fr); align-items:center; gap:6px; border:1px solid var(--ws-line); border-radius:12px; }
.wsx-profile article img { width:42px; height:42px; object-fit:contain; }
.wsx-profile article div { min-width:0; display:grid; gap:2px; }
.wsx-profile b { color:#26385c; font-size:10px; }
.wsx-profile strong { font-size:10px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.wsx-profile span { width:max-content; max-width:100%; border-radius:8px; padding:1px 6px; color:#2872df; background:#edf5ff; font-size:9px; }

.wsx-recent { grid-column:11 / -1; height:174px; }
.wsx-recent header { position:relative; }
.wsx-recent header button { position:absolute; right:20px; top:20px; border:0; color:#2567e9; background:transparent; font-size:11px; }
.wsx-recent > div { padding:5px 18px 12px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.wsx-recent article { min-width:0; height:94px; padding:8px; display:grid; grid-template-columns:48px minmax(0,1fr); align-items:center; gap:8px; border:1px solid var(--ws-line); border-radius:12px; }
.wsx-recent article img { width:46px; height:46px; object-fit:contain; }
.wsx-recent article div { min-width:0; display:grid; gap:2px; }
.wsx-recent b { color:#2c65c7; font-size:10px; }
.wsx-recent strong { font-size:11px; }
.wsx-recent span { color:#6b7da1; font-size:9px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }

.wsx-reasons { grid-column:1 / span 10; height:221px; }
.wsx-reasons > div { padding:8px 18px 14px; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:5px; }
.wsx-reasons article { min-width:0; display:grid; grid-template-rows:83px 22px 32px; justify-items:center; text-align:center; }
.wsx-reasons img { width:82px; height:82px; object-fit:contain; }
.wsx-reasons strong { font-size:10px; }
.wsx-reasons span { color:#7183a7; font-size:9px; line-height:1.35; }

.wsx-employees { grid-column:11 / -1; height:221px; }
.wsx-employees > div { padding:5px 14px 14px; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.wsx-employees article { min-width:0; height:140px; padding:8px; display:grid; grid-template-columns:60px minmax(0,1fr); grid-template-rows:94px 28px; gap:5px; border:1px solid var(--ws-line); border-radius:12px; }
.wsx-employees img { width:60px; height:88px; object-fit:cover; object-position:top; }
.wsx-employees article div { min-width:0; display:grid; align-content:start; gap:4px; }
.wsx-employees strong { font-size:11px; }
.wsx-employees span { color:#65789d; font-size:9px; }
.wsx-employees i { width:max-content; padding:1px 6px; border-radius:8px; color:#13a16f; background:#e9fbf4; font-size:9px; font-style:normal; }
.wsx-employees button { grid-column:1 / -1; height:27px; border:1px solid #cfe0fa; border-radius:6px; color:#2566dc; background:#fff; font-size:10px; }

@media (max-width:1500px) {
  .wsx-shell { grid-template-columns:230px minmax(0,1fr); padding:12px; grid-template-rows:80px auto; }
  .wsx-sidebar { top:12px; height:calc(100vh - 24px); min-height:700px; margin-right:12px; padding-inline:10px; }
  .wsx-brand { grid-template-columns:42px minmax(0,1fr) 34px; gap:8px; }
  .wsx-brand img { width:42px; height:42px; }
  .wsx-brand strong { font-size:17px; }
  .wsx-nav { gap:5px; }
  .wsx-nav button { min-height:50px; grid-template-columns:34px minmax(0,1fr) 14px; padding-inline:8px; }
  .wsx-nav img { width:34px; height:34px; }
  .wsx-nav span { font-size:14px; }
  .wsx-sidebar-robot { width:190px; }
  .wsx-topbar { height:66px; }
  .wsx-dashboard { gap:7px; }
  .wsx-hero,.wsx-check { height:330px; }
  .wsx-hero { padding:20px 12px 15px 20px; grid-template-columns:minmax(0,1fr) 43%; }
  .wsx-hero h1 { font-size:30px; }
  .wsx-score > img { max-width:260px; }
  .wsx-check-grid { height:240px; padding-inline:12px; gap:7px; }
  .wsx-check article { grid-template-rows:78px 38px 30px 6px; padding-inline:5px; }
  .wsx-check article > img { width:76px; height:76px; }
  .wsx-flow,.wsx-radar { height:260px; }
  .wsx-flow-grid { padding-inline:12px; gap:6px; }
  .wsx-flow article { height:181px; grid-template-rows:68px 18px 30px 1fr 27px; }
  .wsx-flow article > img { width:66px; height:66px; }
  .wsx-radar-grid { padding-inline:10px; gap:5px; }
  .wsx-radar article { height:174px; grid-template-rows:60px 26px 22px 6px 18px; }
  .wsx-radar img { width:58px; height:58px; }
  .wsx-panel > header { padding:13px 15px 7px; }
  .wsx-panel h2 { font-size:16px; }
}

@media (max-width:1099px) {
  .wsx-shell { min-width:0; display:block; padding:10px; }
  .wsx-sidebar { position:static; width:100%; height:auto; min-height:0; margin:0 0 10px; }
  .wsx-nav { grid-template-columns:repeat(3,1fr); }
  .wsx-sidebar-robot,.wsx-sidebar-foot { display:none; }
  .wsx-topbar { margin-bottom:10px; }
  .wsx-dashboard { display:block; }
  .wsx-panel { height:auto; min-height:260px; margin-bottom:10px; }
}