.px-desk { font-size: 1rem; min-width: 0; }
.px-tabs { display: flex; align-items: stretch; gap: 6px; border-bottom: 1px solid #b9ccd6; margin: 0 0 20px; }
.px-tabs [role="tab"] { display: inline-flex; align-items: center; gap: 10px; color: #506877; padding: 12px 20px; font-weight: 700; font-size: 1rem; border: 0; border-bottom: 3px solid transparent; background: transparent; border-radius: 8px 8px 0 0; }
.px-tabs [role="tab"][aria-selected="true"] { color: #123e53; background: #dceef4; border-bottom-color: #176b8a; }
.px-tabs [role="tab"] span { padding: 1px 8px; background: #e5edf2; color: #345467; border-radius: 20px; font-size: .875rem; min-width: 28px; }
.px-tabs [role="tab"][aria-selected="true"] span { background: #fff; }
.px-refresh { margin: 0 0 8px auto; align-self: center; }
.px-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 20px; }
.px-metric { padding: 16px 18px; border: 1px solid #c9dce5; border-radius: 12px; background: #fff; min-width: 0; }
.px-metric > span, .px-metric small { display: block; color: #536b78; font-size: .875rem; }
.px-metric strong { display: block; font-size: 1.875rem; line-height: 1.15; letter-spacing: -.025em; margin: 8px 0; }
.px-metric-interest { background: #e6f4ee; border-color: #add2bf; }
.px-metric-interest strong { color: #185f45; }
.px-notice { border: 1px solid #acd1dc; border-left: 4px solid #2d7e9d; border-radius: 9px; padding: 12px 16px; margin-bottom: 18px; color: #214d63; background: #eaf5f9; font-size: .875rem; overflow-wrap: anywhere; }
.px-notice-error { border-color: #d997a4; border-left-color: #a72f45; background: #fff0f3; color: #92243c; }
.px-filters, .px-platform-toolbar { display: grid; grid-template-columns: minmax(220px,2fr) minmax(140px,1fr) minmax(130px,.8fr) minmax(155px,1fr); gap: 12px; align-items: end; }
.px-desk .field { margin-bottom: 0; min-width: 0; }
.px-desk .field label, .px-dialog .field label { font-size: .875rem; color: #345368; font-weight: 650; }
.px-desk input:not([type="checkbox"]), .px-desk select, .px-dialog input:not([type="checkbox"]), .px-dialog select, .px-dialog textarea { width: 100%; min-width: 0; border: 1px solid #a4bdcb; border-radius: 8px; background: #fff; color: #173849; padding: 9px 11px; font-size: .875rem; min-height: 44px; }
.px-desk input::placeholder, .px-dialog input::placeholder, .px-dialog textarea::placeholder { color: var(--muted); opacity: 1; }
.px-desk input[type="checkbox"], .px-dialog input[type="checkbox"] { width: 19px; height: 19px; min-height: 19px; flex: 0 0 19px; accent-color: #247756; }
.px-list-tools { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 16px 0; font-size: .875rem; }
.px-list-tools select { width: auto; min-width: 180px; background: transparent; border-color: transparent; }
.px-list-tools > span:last-child { margin-left: auto; color: #536d7c; }
.px-check { display: inline-flex; align-items: center; gap: 9px; font-size: .875rem; color: #2d4a5d; cursor: pointer; min-height: 44px; }
.px-text-btn { border: 0; background: none; color: #1a6584; font-weight: 650; font-size: .875rem; padding: 5px 0; min-height: 44px; text-align: left; text-decoration: underline; text-underline-offset: 4px; }
.px-text-btn:hover { color: #082f44; }
.px-orders { display: grid; gap: 14px; }
.px-order { border: 1px solid #c4d5de; border-left: 4px solid #c4d5de; background: #fff; padding: 16px 20px 12px; border-radius: 11px; box-shadow: 0 3px 12px #17364905; min-width: 0; }
.px-order-interest { border-color: #9dc8b4; border-left-color: #287f5c; background: linear-gradient(100deg,#edf8f2 0%,#fff 60%); }
.px-order-muted { background: #f7f9fa; border-left-color: #bac6cd; }
.px-order-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.px-tags, .px-detail-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: .8125rem; }
.px-source { color: #2e5c71; font-weight: 650; overflow-wrap: anywhere; }
.px-badge { padding: 3px 8px; color: #536e7d; background: #edf2f5; border-radius: 5px; font-size: .8125rem; }
.px-interest-badge { background: #d4eddf; color: #165c3d; font-weight: 700; }
.px-warning-badge { color: #775017; background: #fff0d6; }
.px-star { width: 44px; height: 44px; min-height: 44px; flex: 0 0 44px; padding: 0; border: 1px solid #c4d7df; color: #54798d; border-radius: 8px; background: #fff; font-size: 26px; line-height: 1; }
.px-star.selected { background: #fff3d9; color: #8b5911; border-color: #d8b87f; }
.px-order-title { display: block; margin: -1px 0 10px; padding: 0; border: 0; background: transparent; color: #13374c; font-size: 1.125rem; font-weight: 750; line-height: 1.4; min-height: 0; text-align: left; overflow-wrap: anywhere; }
.px-order-title:hover { color: #0d698c; text-decoration: underline; text-underline-offset: 3px; }
.px-route { display: grid; grid-template-columns: minmax(0,1fr) 30px minmax(0,1fr); align-items: center; gap: 14px; background: #edf4f7; border-radius: 8px; padding: 12px 14px; }
.px-order-interest .px-route { background: #e7f2ed; }
.px-route > div > span { display: block; font-size: .8125rem; color: #5b7380; margin-bottom: 3px; }
.px-route strong { display: block; font-size: 1rem; color: #1a4357; overflow-wrap: anywhere; line-height: 1.45; }
.px-route-arrow { text-align: center; font-size: 23px; color: #527c8e; }
.px-order-facts { display: grid; grid-template-columns: 1.2fr 1.2fr 1fr; gap: 16px; padding: 14px 0 10px; }
.px-order-facts > div { min-width: 0; }
.px-order-facts span { display: block; font-size: .8125rem; color: #597381; }
.px-order-facts strong { display: block; font-size: .875rem; color: #234657; font-weight: 650; margin: 4px 0; overflow-wrap: anywhere; }
.px-reasons { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 10px; color: #236345; font-size: .8125rem; padding-bottom: 10px; }
.px-reasons strong { font-size: .8125rem; }
.px-reasons span { background: #e7f3eb; padding: 3px 7px; border-radius: 4px; }
.px-candidate { display: flex; align-items: baseline; gap: 7px 10px; flex-wrap: wrap; border-top: 1px solid #dce7ec; padding-top: 10px; }
.px-candidate > span { color: #587383; font-size: .8125rem; }
.px-candidate > button { font-size: .875rem; font-weight: 750; color: #1f607e; border: 0; padding: 3px 0; background: none; min-height: 32px; text-decoration: underline; text-underline-offset: 3px; }
.px-candidate small { font-size: .8125rem; color: #587383; }
.px-order-foot { display: flex; gap: 8px 16px; align-items: center; flex-wrap: wrap; font-size: .8125rem; color: var(--muted); border-top: 1px solid #e0e9ee; margin-top: 10px; padding-top: 7px; }
.px-order-foot > span:first-child { margin-right: auto; }
.px-work-status { font-size: .8125rem; font-weight: 650; color: #5a7280; }
.px-work-status.in-work { color: #1a5f91; }
.px-empty { text-align: center; padding: 40px 24px; border: 1px dashed #a7bfcd; border-radius: 12px; background: #f7fbfd; grid-column: 1 / -1; }
.px-empty h3 { margin: 0 0 10px; font-size: 1.125rem; }
.px-empty p { color: #557281; font-size: .875rem; }
.px-platform-toolbar { grid-template-columns: minmax(200px,1.5fr) minmax(180px,1.2fr) minmax(160px,1fr) auto; }
.px-platform-toolbar > button { align-self: end; }
.px-legend { display: flex; gap: 10px 20px; flex-wrap: wrap; align-items: center; margin: 17px 0; font-size: .8125rem; color: #4e6a7a; }
.px-legend > span { display: inline-flex; gap: 7px; align-items: center; }
.px-legend > span:last-child { margin-left: auto; }
.px-dot { display: inline-block; border-radius: 50%; width: 8px; height: 8px; flex: 0 0 8px; }
.px-dot.green { background: #217b51; }
.px-dot.red { background: #bf3e52; }
.px-dot.amber { background: #ae701d; }
.px-platform-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; align-items: stretch; }
.px-platform { min-width: 0; display: flex; flex-direction: column; border: 1px solid #c4d5de; background: #fff; border-radius: 12px; padding: 19px; box-shadow: 0 3px 12px #17364905; }
.px-platform-top { display: flex; gap: 12px; align-items: flex-start; min-width: 0; margin-bottom: 12px; }
.px-platform-top > div:last-child { min-width: 0; }
.px-platform-mark { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; background: #e4eff5; color: #1b526d; border: 1px solid #c0d4df; border-radius: 10px; font-size: .875rem; font-weight: 800; }
.px-platform-name { display: block; border: 0; background: none; padding: 0; min-height: 0; color: #153b52; font-size: 1rem; font-weight: 750; text-align: left; line-height: 1.4; overflow-wrap: anywhere; }
.px-platform-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.px-platform-category { display: block; color: var(--muted); font-size: .8125rem; margin-top: 4px; }
.px-connection { display: flex; align-items: center; gap: 8px; font-size: .875rem; margin-bottom: 11px; }
.px-connection.green { color: #196343; }
.px-connection.red { color: #a02c41; }
.px-connection.amber { color: #8a5a15; }
.px-platform-description { color: #466577; font-size: .875rem; line-height: 1.6; margin: 0 0 14px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.px-platform-data { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: .8125rem; color: var(--muted); padding-top: 10px; border-top: 1px solid #dce7ed; margin-top: auto; }
.px-platform-data b { color: #204b62; font-size: .875rem; margin-left: 4px; }
.px-cost { margin: 13px 0; padding: 10px 12px; background: #f2f6f9; border-radius: 7px; }
.px-cost > span { font-size: .8125rem; color: var(--muted); }
.px-cost p { margin: 4px 0 0; color: #35586c; font-size: .8125rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.px-platform-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.px-connect { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #c7808d; background: #fff0f3; color: #a02a40; border-radius: 8px; padding: 9px 13px; font-weight: 750; font-size: .875rem; min-height: 44px; }
.px-connect.green { background: #ddefe5; border-color: #94c6ac; color: #165c3e; }
.px-connect.amber { background: #fff4e1; border-color: #d6b57d; color: #875a16; }
.px-platform-actions .ghost-btn { font-size: .8125rem; }
.px-platform-actions .px-text-btn { font-size: .8125rem; }
.px-updated { color: var(--muted); font-size: .8125rem; margin: 20px 0 0; }
dialog.px-dialog { position: fixed; inset: 0; margin: auto; width: min(820px,calc(100vw - 32px)); max-width: none; max-height: min(92dvh,1100px); padding: 0; border: 1px solid #9db7c8; border-radius: 15px; background: #fff; color: #183b51; box-shadow: 0 22px 80px #061c3b44; overflow: auto; }
.px-dialog::backdrop { background: #06172588; backdrop-filter: blur(2px); }
.px-dialog-head { display: flex; gap: 14px; justify-content: space-between; align-items: flex-start; position: sticky; top: 0; padding: 20px 24px 16px; background: #fff; border-bottom: 1px solid #d7e4eb; z-index: 2; }
.px-dialog-head h2 { font-size: 1.375rem; font-weight: 750; margin: 4px 0; line-height: 1.4; overflow-wrap: anywhere; }
.px-close { border: 1px solid #b6ccd9; color: #3b6075; background: #f4f8fa; border-radius: 8px; width: 44px; min-width: 44px; height: 44px; font-size: 26px; line-height: 1; padding: 0; }
#pxDialogBody { padding: 22px 24px 28px; font-size: 1rem; }
.px-detail-intro { color: #426478; line-height: 1.65; }
.px-detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 24px; margin: 22px 0; }
.px-detail-grid > div { min-width: 0; }
.px-detail-grid dt { color: #5e7b8d; font-size: .875rem; margin-bottom: 5px; }
.px-detail-grid dd { color: #23495e; font-size: .9375rem; margin: 0; line-height: 1.6; overflow-wrap: anywhere; }
.px-detail-section { padding-top: 20px; margin-top: 22px; border-top: 1px solid #d9e6ed; }
.px-detail-section h3 { font-size: 1rem; margin: 0 0 10px; }
.px-detail-section p, .px-detail-section li { color: #355c72; font-size: .9375rem; line-height: 1.65; overflow-wrap: anywhere; }
.px-detail-section ul { padding-left: 21px; margin: 10px 0; }
.px-detail-section li + li { margin-top: 6px; }
.px-detail-section summary { color: #2d5d76; font-size: .9375rem; min-height: 44px; }
.px-detail-match { background: #edf5f8; border: 1px solid #c4dbe5; padding: 18px; border-radius: 10px; }
.px-detail-match .px-detail-grid { margin-bottom: 0; }
.px-dialog-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 16px 0 20px; }
.px-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.px-form-row { display: flex; gap: 20px; align-items: end; margin-bottom: 16px; }
.px-form-row > .field { min-width: 160px; }
.px-dialog form > .field, .px-dialog .px-form-grid { margin-bottom: 16px; }
.px-dialog .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.px-dialog textarea { resize: vertical; }
.px-dialog [data-form-feedback] { margin: 13px 0; color: #277055; font-size: .875rem; }
.px-dialog [data-form-feedback][role="alert"] { color: #9d2a42; }
.px-note { color: var(--muted); font-size: .875rem; line-height: 1.6; }
.px-prewrap { white-space: pre-wrap; }
.px-contact { user-select: all; }
.px-upload { border: 1px dashed #87afc3; border-radius: 10px; padding: 20px; background: #eef6fa; margin: 20px 0; }
.px-upload p { font-size: .875rem; color: #53778c; margin: 12px 0 2px; }
.px-upload input[type="file"] { background: #fff; height: auto; padding: 10px; }
.px-import-result { background: #eaf6ee; border: 1px solid #a9d1b9; border-radius: 9px; padding: 16px; margin: 16px 0; color: #275f42; }
.px-import-result p, .px-import-result li { font-size: .875rem; }
.px-import-result ul { padding-left: 18px; }
@media (min-width: 1640px) { .px-platform-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } .px-orders { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; } }
@media (max-width: 1180px) { .px-platform-toolbar { grid-template-columns: minmax(200px,1.5fr) minmax(180px,1fr); } .px-filters { grid-template-columns: repeat(2,minmax(0,1fr)); } .px-platform-toolbar > button { justify-self: start; } }
@media (max-width: 760px) { .px-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; } .px-metric { padding: 13px 14px; } .px-metric strong { font-size: 1.625rem; } .px-platform-grid { grid-template-columns: minmax(0,1fr); } .px-tabs [role="tab"] { padding: 10px 13px; font-size: .9375rem; gap: 6px; } .px-refresh { padding: 8px 10px; font-size: .8125rem; } .px-order { padding: 15px 15px 10px; } .px-order-facts { gap: 12px; } .px-list-tools { gap: 5px 15px; } .px-list-tools > span:last-child { margin-left: 0; } .px-legend > span:last-child { margin-left: 0; } .px-platform-toolbar { grid-template-columns: repeat(2,minmax(0,1fr)); } .px-platform-toolbar .px-search { grid-column: 1/-1; } }
@media (max-width: 500px) { .px-filters { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; } .px-filters .px-search { grid-column: 1/-1; } .px-filters > .field:nth-child(2) { grid-column: 1/-1; } .px-route { gap: 8px; padding: 10px; grid-template-columns: minmax(0,1fr) 18px minmax(0,1fr); } .px-route strong { font-size: .9375rem; } .px-order-facts { grid-template-columns: 1fr 1fr; } .px-order-facts > div:last-child { grid-column: 1/-1; } .px-order-title { font-size: 1.0625rem; } .px-tabs { gap: 1px; } .px-tabs [role="tab"] { padding: 10px 9px; } .px-tabs [role="tab"] span { padding: 1px 5px; min-width: 23px; } .px-refresh { font-size: .75rem; padding: 8px; } .px-form-grid, .px-detail-grid { grid-template-columns: minmax(0,1fr); } .px-form-row { flex-direction: column; align-items: stretch; gap: 8px; } .px-dialog-head { padding: 14px 16px; } #pxDialogBody { padding: 16px; } .px-dialog-head h2 { font-size: 1.125rem; } dialog.px-dialog { width: calc(100vw - 16px); max-height: 96dvh; border-radius: 12px; } .px-platform-toolbar { grid-template-columns: minmax(0,1fr); } .px-platform-toolbar > button { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .px-desk *, .px-dialog * { scroll-behavior: auto; transition: none; } }