.seat-plan-page { display: grid; gap: 18px; }
.seat-plan-page[hidden] { display: none; }
.seat-plan-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 3px 2px 0; }
.seat-plan-heading h2 { margin: 5px 0 6px; color: #17283f; font-size: 25px; letter-spacing: -.03em; }
.seat-plan-heading p { margin: 0; color: #6e8098; font-size: 13px; }
.seat-plan-source { padding: 8px 11px; border: 1px solid #dce7f5; border-radius: 10px; background: #f6f9fe; color: #6e8098; font-size: 11px; white-space: nowrap; }
.seat-plan-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px; border: 1px solid #dce7f5; border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(34, 67, 105, .045); }
.seat-plan-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 11px; background: #f1f5fb; }
.seat-plan-tabs button { min-height: 36px; padding: 0 15px; border: 0; border-radius: 8px; background: transparent; color: #536982; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.seat-plan-tabs button[aria-selected="true"] { background: #fff; color: #0966cf; box-shadow: 0 2px 8px rgba(25, 75, 143, .12); }
.seat-plan-toolbar-actions { display: flex; align-items: center; gap: 9px; }
.seat-groups-toggle { min-height: 39px; padding: 0 12px; border: 1px solid #cdddf3; border-radius: 9px; background: #f6f9ff; color: #1965bd; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.seat-groups-manager { padding: 15px; border: 1px solid #dce7f5; border-radius: 13px; background: #fff; }
.seat-plan-detail .seat-groups-manager { margin-top: 14px; padding: 12px; background: #f8fbff; }
.seat-inline-groups-toggle { justify-self: start; margin-top: 2px; padding: 2px 0; border: 0; background: transparent; color: #096ad5; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.seat-inline-groups-toggle:hover { text-decoration: underline; }
.seat-groups-manager[hidden], .seat-groups-toggle[hidden], .seat-plan-detail [hidden] { display: none !important; }
.seat-groups-head { display: flex; justify-content: space-between; gap: 10px; color: #183d71; font-size: 13px; }
.seat-groups-head span { color: #8191a6; font-size: 11px; }
.seat-groups-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 13px 0; }
.seat-groups-list > div { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 11px; border-radius: 9px; background: #f3f7fe; color: #284668; font-size: 12px; }
.seat-groups-list button { border: 0; background: transparent; color: #d14343; cursor: pointer; }
.seat-groups-list button:disabled { color: #a8b6c6; cursor: not-allowed; }
#seatGroupAddForm { display: flex; gap: 8px; max-width: 330px; }
#seatGroupAddForm input { min-width: 0; flex: 1; padding: 8px 10px; border: 1px solid #dce7f5; border-radius: 8px; font: inherit; font-size: 12px; }
#seatGroupAddForm button { padding: 0 13px; border: 0; border-radius: 8px; background: #096ad5; color: #fff; font: inherit; font-size: 12px; cursor: pointer; }
.seat-group-field { display: grid; align-content: start; gap: 6px; min-width: 0; }
.seat-group-picker { position: relative; min-width: 0; }
.seat-group-trigger { display: flex; align-items: center; justify-content: space-between; gap: 5px; width: 100%; min-height: 36px; padding: 7px 9px; border: 1px solid #dce7f5; border-radius: 8px; background: #fff; color: #17283f; font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.seat-group-trigger[aria-expanded="true"] { border-color: #4387e4; box-shadow: 0 0 0 3px rgba(31, 118, 230, .1); }
.seat-group-menu { position: absolute; z-index: 40; top: calc(100% + 5px); right: 0; width: min(310px, calc(100vw - 34px)); max-height: 355px; overflow-y: auto; border: 1px solid #dce7f5; border-radius: 12px; background: #fff; box-shadow: 0 14px 36px rgba(22, 51, 88, .18); }
.seat-plan-detail .seat-group-menu .seat-groups-manager { margin: 0; padding: 10px; border: 0; border-radius: 12px; background: #fff; }
.seat-group-menu .seat-groups-list { display: grid; gap: 2px; margin: 7px 0; }
.seat-group-menu .seat-groups-list > div { display: flex; gap: 4px; padding: 0; background: transparent; }
.seat-group-menu .seat-group-choice { flex: 1; display: flex; justify-content: space-between; gap: 7px; min-height: 33px; padding: 7px 8px; border: 0; border-radius: 7px; background: transparent; color: #254565; font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.seat-group-menu .seat-group-choice:hover { background: #edf5ff; color: #096ad5; }
.seat-group-menu .seat-group-choice small { color: #8a9bb0; white-space: nowrap; }
.seat-group-menu .seat-group-delete { padding: 0 5px; border: 0; background: transparent; color: #d14343; font: inherit; font-size: 11px; cursor: pointer; }
.seat-group-menu .seat-group-delete:disabled { color: #b7c2ce; cursor: not-allowed; }
.seat-group-add { display: flex; gap: 5px; padding-top: 9px; border-top: 1px solid #e5edf7; }
.seat-group-add input { flex: 1; min-width: 0; min-height: 32px; padding: 6px 8px; border: 1px solid #dce7f5; border-radius: 7px; font: inherit; font-size: 12px; }
.seat-group-add button { padding: 0 10px; border: 0; border-radius: 7px; background: #096ad5; color: #fff; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.seat-group-hint { margin: 7px 0 0; color: #8799ac; font-size: 10px; line-height: 1.4; }
.seat-plan-tabs button:active, .seat-tile:active, .seat-list-row:active, .seat-save:active { transform: scale(.98); }
.seat-plan-search { display: flex; align-items: center; gap: 8px; min-width: 260px; padding: 0 10px; border: 1px solid #dce7f5; border-radius: 10px; color: #7789a0; font-size: 12px; }
.seat-plan-search input { width: 100%; min-height: 39px; border: 0; outline: 0; background: transparent; color: #17283f; font: inherit; font-size: 13px; }
.seat-plan-search:focus-within { border-color: #4a88e7; box-shadow: 0 0 0 3px rgba(31, 118, 230, .1); }
.seat-plan-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.seat-plan-summary > div { display: grid; gap: 5px; min-height: 65px; padding: 13px 16px; border: 1px solid #dce7f5; border-radius: 13px; background: #fff; }
.seat-plan-summary small { color: #7a8da3; font-size: 11px; }
.seat-plan-summary strong { color: #183d71; font-size: 23px; line-height: 1; font-variant-numeric: tabular-nums; }
.seat-plan-summary em { color: #8b9ab0; font-size: 12px; font-style: normal; font-weight: 500; }
.seat-plan-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.seat-plan-main, .seat-plan-detail { min-width: 0; border: 1px solid #dce7f5; border-radius: 16px; background: #fff; box-shadow: 0 10px 28px rgba(31, 69, 110, .045); }
.seat-plan-main { padding: 18px; }
.seat-plan-map-wrap { overflow-x: auto; }
.seat-plan-map-caption { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 15px; }
.seat-plan-map-caption strong { color: #17283f; font-size: 15px; }
.seat-plan-map-caption span { color: #8393a7; font-size: 11px; }
.seat-plan-map { position: relative; display: grid; grid-template-columns: repeat(3, minmax(116px, 1fr)) 18px repeat(2, minmax(116px, 1fr)); gap: 8px; min-width: 644px; }
.seat-plan-map::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(60% - 2.3px); width: 1px; background: #e6edf5; pointer-events: none; }
.seat-plan-map::after { content: "过道"; position: absolute; z-index: 2; top: 58px; left: calc(60% - 10.8px); box-sizing: border-box; width: 18px; padding: 8px 0; background: #fff; color: #a1afc0; font-size: 10px; line-height: 18px; letter-spacing: .3em; text-align: center; writing-mode: vertical-rl; pointer-events: none; }
.seat-vertical-aisle { grid-column: 4; display: flex; align-items: center; justify-content: center; min-width: 18px; }
.seat-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-height: 132px; padding: 12px; border: 1px solid #dce7f5; border-radius: 11px; background: #f9fbff; color: #182c45; font: inherit; text-align: left; cursor: pointer; transition: transform 140ms cubic-bezier(.23,1,.32,1), border-color 140ms ease, box-shadow 140ms ease; }
.seat-tile:hover { border-color: #9fc4fa; box-shadow: 0 6px 14px rgba(43, 112, 207, .09); }
.seat-tile.selected { border-color: #2876dc; background: #f1f7ff; box-shadow: inset 0 0 0 1px #2876dc; }
.seat-tile.dimmed { opacity: .36; }
.seat-tile-meta { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; }
.seat-tile .seat-role { flex: 1; min-width: 0; overflow: hidden; color: #7489a2; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.seat-tile strong { max-width: 100%; margin-top: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.seat-tile small { margin-top: 4px; color: #7a8da3; font-size: 11px; }
.seat-operating-accounts { display: -webkit-box; max-width: 100%; margin: 5px 0 7px; overflow: hidden; color: #476b95; font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.seat-jianying-account { display: block; max-width: 100%; margin-top: 5px; overflow: hidden; color: #1769d3; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.seat-tile .seat-no, .seat-list-no { display: inline-flex; align-items: center; justify-content: center; min-width: 25px; min-height: 23px; padding: 0 3px; border-radius: 7px; background: #e9f2ff; color: #1769d3; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.seat-group { display: inline-flex; align-items: center; width: fit-content; padding: 3px 7px; border-radius: 6px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.seat-tile .seat-group, .seat-tile .seat-kind { margin-left: auto; }
.seat-group-A { background: #e8f1ff; color: #2168c2; }
.seat-group-B { background: #e9f8ef; color: #25825b; }
.seat-group-C { background: #f4eeff; color: #7952b4; }
.seat-group-D { background: #fff1df; color: #a76417; }
.seat-kind { color: #9aa8b9; font-size: 11px; }
.seat-empty { background: #fafbfc; border-style: dashed; }
.seat-empty strong { color: #98a6b7; font-weight: 600; }
.seat-equipment, .seat-unavailable { background: #f3f5f8; }
.seat-aisle { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; height: 20px; color: #a1afc0; font-size: 10px; letter-spacing: .3em; }
.seat-aisle::before, .seat-aisle::after { content: ""; flex: 1; height: 1px; background: #e6edf5; }
.seat-aisle span { padding: 0 12px; }
.seat-plan-map-legend { display: flex; flex-wrap: wrap; gap: 17px; margin-top: 15px; color: #7e90a5; font-size: 11px; }
.seat-plan-map-legend span { display: inline-flex; align-items: center; gap: 5px; }
.seat-plan-map-legend i { width: 8px; height: 8px; border-radius: 50%; }
.seat-plan-map-legend .occupied { background: #3181e6; }
.seat-plan-map-legend .vacant { background: #c7d2df; }
.seat-plan-map-legend .equipment { background: #8293a8; }
.seat-plan-detail { position: sticky; top: 20px; padding: 20px; }
.seat-plan-detail > p { margin: 0; color: #8a9aad; font-size: 13px; }
.seat-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding-bottom: 15px; border-bottom: 1px solid #e5edf7; }
.seat-detail-head small { color: #4782cc; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.seat-detail-head h3 { margin: 5px 0 0; color: #17283f; font-size: 20px; }
.seat-plan-detail dl { margin: 0; }
.seat-plan-detail dl div { display: grid; grid-template-columns: 95px 1fr; gap: 7px; padding: 12px 0; border-bottom: 1px solid #eff3f8; font-size: 12px; }
.seat-plan-detail dt { color: #8191a5; }
.seat-plan-detail dd { margin: 0; color: #213d5e; font-weight: 650; overflow-wrap: anywhere; }
.seat-muted { color: #a4b0bf; font-weight: 500; }
.seat-detail-note { margin: 15px 0 0; color: #8e9eb0; font-size: 11px; line-height: 1.55; }
.seat-plan-detail form { display: grid; gap: 12px; }
.seat-plan-detail form label { display: grid; gap: 6px; color: #5a718c; font-size: 11px; font-weight: 700; }
.seat-plan-detail form input, .seat-plan-detail form select, .seat-plan-detail form textarea { box-sizing: border-box; width: 100%; min-height: 36px; padding: 8px 9px; border: 1px solid #dce7f5; border-radius: 8px; outline: 0; background: #fff; color: #17283f; font: inherit; font-size: 12px; resize: vertical; }
.seat-plan-detail form input:focus, .seat-plan-detail form select:focus, .seat-plan-detail form textarea:focus { border-color: #4387e4; box-shadow: 0 0 0 3px rgba(31, 118, 230, .1); }
.seat-detail-fields { display: grid; grid-template-columns: 1fr 1.35fr; gap: 8px; }
.seat-operating-detail { display: grid; gap: 6px; }
.seat-operating-list { display: grid; gap: 7px; }
.seat-operating-item { display: grid; gap: 5px; padding: 8px; border: 1px solid #e2eaf5; border-radius: 9px; background: #f8fbff; }
.seat-operating-original { overflow-wrap: anywhere; color: #405b79; font-size: 11px; }
.seat-operating-edit { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.seat-operating-edit button { padding: 0 8px; border: 1px solid #b9d3f7; border-radius: 8px; background: #fff; color: #096ad5; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.seat-operating-edit button:disabled { opacity: .55; cursor: wait; }
.seat-alias-hint { color: #8496ac; font-size: 10px; line-height: 1.45; }
.seat-operating-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.seat-operating-chips span { max-width: 100%; padding: 4px 7px; border-radius: 7px; background: #eaf3ff; color: #246ab8; font-size: 11px; overflow-wrap: anywhere; }
.seat-field-label { color: #5a718c; font-size: 11px; font-weight: 700; }
.seat-coworker-field { display: grid; gap: 6px; }
.seat-coworker-picker { border: 1px solid #dce7f5; border-radius: 8px; background: #fff; }
.seat-coworker-picker summary { display: flex; justify-content: space-between; gap: 8px; padding: 9px 10px; color: #254565; font-size: 12px; cursor: pointer; list-style: none; }
.seat-coworker-picker summary::-webkit-details-marker { display: none; }
.seat-coworker-picker summary::after { content: "⌄"; color: #7b91a9; }
.seat-coworker-picker summary small { margin-left: auto; color: #1972d5; }
.seat-coworker-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; max-height: 190px; overflow-y: auto; padding: 8px; border-top: 1px solid #e6edf7; }
.seat-plan-detail form .seat-coworker-options label { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 5px; border-radius: 6px; color: #2f4965; font-weight: 500; cursor: pointer; }
.seat-plan-detail form .seat-coworker-options label:hover { background: #f3f8ff; }
.seat-plan-detail form .seat-coworker-options input { width: 15px; min-height: 15px; height: 15px; margin: 0; padding: 0; }
.seat-legacy-note { margin: 0; color: #a16b25; font-size: 11px; line-height: 1.5; }
.seat-save { min-height: 39px; border: 0; border-radius: 9px; background: #096ad5; color: #fff; font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
.seat-save:disabled { opacity: .55; cursor: wait; }
.seat-plan-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.seat-list-section { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid #dce7f5; border-radius: 14px; background: #fff; box-shadow: 0 6px 18px rgba(31, 69, 110, .045); }
.seat-list-section header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-height: 47px; box-sizing: border-box; padding: 12px 13px; border-bottom: 1px solid #e8eef7; background: #f6f9fe; }
.seat-list-section header h3 { min-width: 0; margin: 0; overflow-wrap: anywhere; color: #1d395b; font-size: 14px; }
.seat-list-section header span { flex: none; color: #8191a6; font-size: 11px; white-space: nowrap; }
.seat-list-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; align-content: start; padding: 9px; }
.seat-list-row { display: grid; grid-template-columns: 25px minmax(0, 1fr); gap: 3px 6px; align-items: center; width: 100%; min-width: 0; min-height: 56px; padding: 7px; border: 1px solid #e5edf7; border-radius: 9px; background: #f9fbff; color: #223b58; font: inherit; text-align: left; cursor: pointer; transition: border-color 140ms ease, background-color 140ms ease; }
.seat-list-row:hover { border-color: #b9d3f7; background: #f1f7ff; }
.seat-list-row.selected { border-color: #70a8f1; background: #eaf3ff; }
.seat-list-person { display: grid; grid-column: 2; gap: 2px; min-width: 0; }
.seat-list-person strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.seat-list-person small { overflow: hidden; color: #8191a6; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.seat-list-extra { grid-column: 2; grid-row: 2; min-width: 0; color: #39678e; font-size: 11px; overflow-wrap: anywhere; }
.seat-cooperation-intro { grid-column: 1 / -1; margin: 0 0 2px; color: #6e8098; font-size: 12px; line-height: 1.5; }
.seat-coworker-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.seat-coworker-chip { padding: 4px 7px; border-radius: 7px; background: #eaf3ff; color: #246ab8; font-size: 11px; white-space: nowrap; }
.seat-list-arrow { display: none; }
.seat-plan-list > .seat-plan-empty { grid-column: 1 / -1; }
.seat-plan-empty, .seat-plan-loading, .seat-plan-error { margin: 0; padding: 25px; color: #8a9aad; font-size: 13px; text-align: center; }
.seat-plan-error button { margin-top: 8px; padding: 7px 12px; border: 1px solid #bad3f6; border-radius: 8px; background: #eef5ff; color: #096ad5; cursor: pointer; }
.seat-plan-status { min-height: 17px; margin: -4px 0 0; color: #43805f; font-size: 11px; }
@media (max-width: 1400px) { .seat-plan-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1120px) { .seat-plan-layout { grid-template-columns: minmax(0, 1fr) 270px; } .seat-plan-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 840px) { .seat-plan-heading, .seat-plan-toolbar { align-items: stretch; flex-direction: column; } .seat-plan-source { white-space: normal; } .seat-plan-layout { grid-template-columns: 1fr; } .seat-plan-detail { position: static; } .seat-plan-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .seat-plan-search { min-width: 0; } }
@media (max-width: 680px) { .seat-plan-list { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .seat-plan-heading h2 { font-size: 22px; } .seat-plan-main { padding: 12px; } .seat-plan-tabs button { flex: 1 1 40%; } .seat-plan-map-caption { display: grid; } .seat-list-rows { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .seat-tile { transition: none; } }