* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #0c1a1f; color: #e2e8f0; min-height: 100vh; }
.hidden { display: none !important; }

.login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.login-card { background: #132a30; border: 1px solid #1a3d45; border-radius: 12px; padding: 2rem; width: min(380px, 96vw); text-align: center; }
.login-logo { width: 160px; margin-bottom: 1rem; }
.login-card h1 { font-size: 1.25rem; margin-bottom: 0.35rem; }
.login-sub { color: #6ba3ae; font-size: 0.85rem; margin-bottom: 1.25rem; }
.login-card input { width: 100%; background: #0c1a1f; border: 1px solid #1a3d45; color: #e2e8f0; padding: 0.65rem 0.75rem; border-radius: 6px; font-size: 0.95rem; margin-bottom: 0.5rem; }
.login-card button { width: 100%; background: #1a6b7a; color: white; border: none; padding: 0.65rem 1rem; border-radius: 6px; font-size: 0.95rem; cursor: pointer; }
.login-card button:hover { background: #1f8090; }
.login-error { color: #fca5a5; font-size: 0.8rem; min-height: 1.2rem; margin-bottom: 0.5rem; }

.layout { display: flex; height: calc(100vh - 36px); }
.sidebar { width: 320px; background: #132a30; border-right: 1px solid #1a3d45; display: flex; flex-direction: column; flex-shrink: 0; transition: width 0.2s ease, opacity 0.2s ease; overflow: hidden; }
.layout.sidebar-collapsed .sidebar { width: 0; min-width: 0; opacity: 0; border-right: none; pointer-events: none; }
.sidebar-reopen { position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 25; background: #132a30; border: 1px solid #1a3d45; border-left: none; border-radius: 0 8px 8px 0; color: #6ba3ae; padding: 0.75rem 0.4rem; cursor: pointer; font-size: 0.75rem; writing-mode: vertical-rl; }
.sidebar-header { padding: 1.25rem; border-bottom: 1px solid #1a3d45; text-align: center; }
.sidebar-header img { width: 160px; margin-bottom: 0.35rem; }
.sidebar-header .sub { color: #5a8a94; font-size: 0.8rem; }
.btn-logout { margin-top: 0.75rem; background: transparent; border: 1px solid #1a3d45; color: #6ba3ae; padding: 0.35rem 0.75rem; border-radius: 6px; cursor: pointer; font-size: 0.75rem; }
.btn-logout:hover { border-color: #1a6b7a; color: #e2e8f0; }
.join-form { padding: 1rem; border-bottom: 1px solid #1a3d45; }
.join-form .server-url { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; align-items: center; }
.join-form .server-url input { flex: 1; margin-bottom: 0; }
.join-form .server-url .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.join-form .server-url .dot.green { background: #22c55e; }
.join-form .server-url .dot.red { background: #ef4444; }
.join-form .server-url .dot.yellow { background: #eab308; }
.join-form input { background: #0c1a1f; border: 1px solid #1a3d45; color: #e2e8f0; padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.9rem; width: 100%; margin-bottom: 0.5rem; }
.join-form button { background: #1a6b7a; color: white; border: none; padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.9rem; cursor: pointer; width: 100%; }
.session-list { flex: 1; overflow-y: auto; padding: 0.5rem; }
.session-item { background: #0c1a1f; border-radius: 8px; padding: 0.75rem; margin-bottom: 0.5rem; cursor: pointer; border: 1px solid transparent; }
.session-item:hover { border-color: #1a6b7a; }
.session-item .code { font-family: 'Courier New', monospace; color: #2db5c9; font-size: 1rem; }
.session-item .meta { color: #5a8a94; font-size: 0.75rem; margin-top: 0.25rem; }
.badge { display: inline-block; padding: 0.1rem 0.4rem; border-radius: 4px; font-size: 0.7rem; font-weight: 600; }
.badge.open { background: #0f3525; color: #86efac; }
.badge.occupied { background: #3a2e10; color: #fde68a; }
.viewer { flex: 1; display: flex; flex-direction: column; background: #000; position: relative; }
.viewer-placeholder { flex: 1; display: flex; align-items: center; justify-content: center; color: #3a6a72; font-size: 1.1rem; }
.viewer video { width: 100%; height: 100%; object-fit: contain; }
.viewer-toolbar { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.85)); padding: 1rem; display: flex; gap: 0.75rem; align-items: center; justify-content: center; }
.viewer-toolbar button { background: rgba(26,107,122,0.4); color: white; border: 1px solid rgba(26,107,122,0.5); padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer; font-size: 0.85rem; }
.viewer-toolbar button.danger { background: rgba(166,48,48,0.5); border-color: rgba(166,48,48,0.5); }
.viewer-toolbar button.active { background: rgba(34,197,94,0.5); border-color: rgba(34,197,94,0.5); }
.control-indicator { position: absolute; top: 0.75rem; right: 0.75rem; padding: 0.35rem 0.75rem; border-radius: 6px; font-size: 0.75rem; font-weight: 600; z-index: 10; }
.control-indicator.on { background: rgba(34,197,94,0.3); color: #86efac; border: 1px solid rgba(34,197,94,0.4); }
.control-indicator.off { background: rgba(26,61,69,0.5); color: #6ba3ae; border: 1px solid rgba(26,61,69,0.6); }
.status-bar { padding: 0.5rem 1rem; font-size: 0.8rem; display: flex; align-items: center; gap: 0.5rem; background: #132a30; border-top: 1px solid #1a3d45; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; }
.status-dot.green { background: #22c55e; }
.status-dot.yellow { background: #eab308; }
.status-dot.red { background: #ef4444; }
.status-dot.gray { background: #5a8a94; }
.file-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.file-modal { background: #132a30; border: 1px solid #1a3d45; border-radius: 12px; width: min(920px, 96vw); max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; }
.file-modal-header { display: flex; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid #1a3d45; }
.file-modal-close { background: transparent; border: none; color: #6ba3ae; font-size: 1.5rem; cursor: pointer; }
.file-modal-body { padding: 1rem 1.25rem; overflow-y: auto; flex: 1; }
.file-panes-row { display: flex; gap: 0.75rem; min-height: 300px; }
.file-pane { flex: 1; display: flex; flex-direction: column; min-width: 0; background: #0c1a1f; border: 1px solid #1a3d45; border-radius: 8px; overflow: hidden; }
.file-pane-title { font-size: 0.8rem; font-weight: 600; color: #2db5c9; padding: 0.5rem 0.75rem; border-bottom: 1px solid #1a3d45; background: #132a30; }
.file-pane-nav { display: flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.5rem; border-bottom: 1px solid #1a3d45; flex-wrap: wrap; }
.file-pane-nav button { background: #1a3d45; color: #e2e8f0; border: none; padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.75rem; cursor: pointer; }
.file-breadcrumb { font-size: 0.75rem; color: #6ba3ae; flex: 1; }
.file-list { flex: 1; overflow-y: auto; font-size: 0.85rem; min-height: 200px; }
.file-entry { padding: 0.45rem 0.65rem; cursor: pointer; display: flex; justify-content: space-between; gap: 0.5rem; border-bottom: 1px solid #132a30; }
.file-entry:hover { background: #132a30; }
.file-entry.selected { background: #1a3d45; outline: 1px solid #1a6b7a; }
.file-entry.dir .name { color: #2db5c9; }
.file-entry .size { color: #5a8a94; font-size: 0.75rem; }
.file-actions-col { display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; width: 130px; flex-shrink: 0; }
.file-actions-col button { background: #1a6b7a; color: white; border: none; padding: 0.55rem 0.65rem; border-radius: 8px; font-size: 0.78rem; cursor: pointer; }
.file-actions-col button:disabled { background: #2a4a52; cursor: not-allowed; color: #6a8a90; }
.file-hint { margin-top: 0.75rem; padding: 0.6rem 0.85rem; background: #0f2e35; border: 1px solid #1a4a55; border-radius: 8px; font-size: 0.8rem; color: #6ba3ae; }
.file-error { color: #fca5a5; font-size: 0.75rem; padding: 0.35rem 0.65rem; }
.file-modal-transfers { border-top: 1px solid #1a3d45; padding: 0.75rem 1.25rem; background: #0c1a1f; max-height: 140px; overflow-y: auto; }
.file-modal-transfers h4 { font-size: 0.75rem; color: #5a8a94; margin-bottom: 0.5rem; text-transform: uppercase; }
.transfer-item { background: #132a30; border-radius: 6px; padding: 0.5rem 0.65rem; font-size: 0.78rem; border: 1px solid #1a3d45; margin-bottom: 0.4rem; }
.transfer-item .progress-bar { height: 4px; background: #1a3d45; border-radius: 2px; overflow: hidden; margin: 0.25rem 0; }
.transfer-item .progress-fill { height: 100%; background: #1a6b7a; }
.transfer-item .info.done { color: #86efac; }
.transfer-item .info.cancelled { color: #fbbf24; }
.toolbar-btn-files { background: rgba(45,181,201,0.25); border-color: rgba(45,181,201,0.4); }