.collaboration-toggle { position: relative; border-color: #8d6b31; background: #34372f; color: #ffe5a2; }
.collaboration-toggle::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #d6a33f; box-shadow: 0 0 0 2px rgba(214,163,63,.2); }
.collaboration-drawer { position: fixed; z-index: 32; top: 16px; right: 16px; bottom: 16px; width: 384px; overflow: auto; border: 1px solid #7f6c4a; border-radius: 12px; background: #f4f0e4; box-shadow: 0 18px 50px rgba(27,29,25,.38); color: #2e332d; }
.collaboration-drawer[hidden] { display: none; }
.collaboration-drawer > header { position: sticky; z-index: 2; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 15px 16px 12px; border-bottom: 1px solid #cfc4ae; background: #34372f; color: #fff3cf; }
.collaboration-drawer header small { display: block; color: #d6a33f; font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.collaboration-drawer h2 { margin: 2px 0 0; font: 700 22px Georgia, "Noto Serif KR", serif; }
.collaboration-drawer header button { width: 32px; height: 32px; padding: 0; border-color: #6e705f; background: #272a24; color: #fff3cf; }
.collaboration-identity { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px; border-bottom: 1px solid #d7cebc; background: #e8e1d2; font-size: 12px; }
#collaboration-state::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #9b3b35; }
#collaboration-state[data-state="ONLINE"]::before { background: #2d8051; }
#collaboration-state[data-state="REALTIME_DEGRADED"]::before { background: #be7f1c; }
#collaboration-role { padding: 4px 9px; border: 1px solid #987440; border-radius: 999px; color: #684918; background: #fff8e8; font-size: 11px; }
#collaboration-role[data-role="admin"] { border-color: #72413a; color: #782f28; }
.collaboration-message { min-height: 22px; padding: 7px 16px; color: #376243; background: #edf3e9; font-size: 11px; }
.collaboration-message[data-state="error"] { color: #912e2a; background: #f8e9e5; font-weight: 800; }
.collaboration-drawer section { padding: 14px 16px 16px; border-bottom: 1px solid #d7cebc; }
.collaboration-drawer section[hidden] { display: none; }
.collaboration-drawer h3 { margin: 0 0 9px; color: #665334; font: 800 13px Georgia, "Noto Serif KR", serif; letter-spacing: .04em; }
.collaboration-drawer p { margin: 0 0 10px; color: #746c5d; font-size: 11px; line-height: 1.5; }
.collaboration-drawer form { display: grid; gap: 8px; }
.collaboration-drawer label { display: grid; gap: 4px; color: #6c6252; font-size: 11px; font-weight: 800; }
.collaboration-drawer input, .collaboration-drawer select { width: 100%; padding: 0 9px; }
.collaboration-drawer button { min-height: 34px; height: auto; }
.collaboration-primary { border-color: #6d542c !important; background: #34372f !important; color: #ffe6a5 !important; }
.collaboration-secondary { border-color: #8d6b31 !important; background: #fff8e8 !important; color: #6d4a17 !important; }
.collaboration-list { display: grid; gap: 7px; margin-top: 10px; }
.collaboration-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; align-items: center; padding: 9px 10px; border: 1px solid #d5c9b2; border-left: 3px solid #9a7436; border-radius: 7px; background: #fffdf7; }
.collaboration-card strong { font-size: 12px; }
.collaboration-card small { grid-column: 1; color: #786f60; font: 10px ui-monospace, Consolas, monospace; }
.collaboration-card-actions { grid-column: 2; grid-row: 1 / 3; display: flex; gap: 5px; }
.collaboration-card-actions button { min-height: 28px; padding: 0 8px; font-size: 10px; }
.collaboration-dialog { width: min(660px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; padding: 22px; border: 1px solid #7f6c4a; border-radius: 12px; background: #f8f4e9; color: #30342e; box-shadow: 0 24px 80px rgba(18,20,17,.5); }
.collaboration-dialog::backdrop { background: rgba(24,27,23,.62); }
.collaboration-dialog-close { position: absolute; top: 12px; right: 12px; width: 32px; padding: 0; }
.collaboration-dialog h2 { margin: 0 42px 16px 0; font: 700 21px Georgia, "Noto Serif KR", serif; }
.collaboration-dialog textarea { width: 100%; min-height: 90px; resize: vertical; padding: 10px; border: 1px solid #c6b99f; border-radius: 7px; background: #fffdf7; color: #30342e; font: inherit; }
.collaboration-note { color: #6f6657; font-size: 12px; }
.collaboration-diff { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-bottom: 12px; border: 1px solid #c8bda9; background: #c8bda9; }
.collaboration-diff div { padding: 9px; background: #eee7d8; font: 11px ui-monospace, Consolas, monospace; }
.collaboration-diff-list { max-height: 230px; overflow: auto; margin: 0 0 12px; padding: 8px 8px 8px 32px; border: 1px solid #d5cab6; background: #fffdf7; font: 11px ui-monospace, Consolas, monospace; }
.collaboration-diff-list li { padding: 3px 5px; }
.collaboration-diff-list .is-conflict { color: #942e29; background: #f7e7e2; font-weight: 900; }
.collaboration-dialog-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.collaboration-conflict { flex-basis: 100%; margin: 0; color: #8d302b; font-size: 12px; font-weight: 800; }
body.collaboration-open #map { right: 416px; width: auto; }
body.collaboration-open .topbar { right: 416px; }
body.collaboration-open #tile-info-panel { display: none; }
@media (max-width: 1100px) { body.collaboration-open .topbar { right: 416px; } .collaboration-drawer { width: 384px; } }
@media (max-width: 760px) {
  .collaboration-drawer { top: auto; left: 10px; right: 10px; bottom: 10px; width: auto; height: 54vh; }
  body.collaboration-open #map { right: 0; bottom: calc(54vh + 10px); width: 100%; height: auto; }
  body.collaboration-open .topbar { right: 16px; }
  body.collaboration-open .topbar,
  body.collaboration-open .province-menu,
  body.collaboration-open .status,
  body.collaboration-open .operations-panel,
  body.collaboration-open .route-planner,
  body.collaboration-open .display-settings,
  body.collaboration-open .ownership-panel { display: none; }
  .collaboration-diff { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .collaboration-drawer, .collaboration-dialog { scroll-behavior: auto; } }