html, body { height: 100%; margin: 0; background: #0b0e11; color: #e6e6e6; font-family: -apple-system, system-ui, sans-serif; }
.bar { display: flex; gap: 8px; align-items: center; padding: 10px 12px; background: #121720; border-bottom: 1px solid #1f2833; }
.bar input { background: #0b0e11; color: #e6e6e6; border: 1px solid #2a3441; padding: 6px 8px; border-radius: 6px; }
.bar button { background: #2b7cff; color: white; border: 0; padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.bar button:disabled { background: #2a3441; cursor: default; }
#status-container { margin-left: auto; display: flex; align-items: center; gap: 10px; }
#status { color: #9bb3c7; font-size: 12px; }
.led { width: 10px; height: 10px; border-radius: 50%; background: #333; transition: background 0.3s; display: inline-block; margin-right: 5px; }
.led.on { background: #00ff00; box-shadow: 0 0 5px #00ff00; }
.led.off { background: #ff0000; box-shadow: 0 0 5px #ff0000; }
.led.busy { background: #ffaa00; box-shadow: 0 0 5px #ffaa00; }
.label { font-size: 11px; color: #666; margin-right: 4px; }
#workspace { height: calc(100% - 52px); display: flex; }
#shell-sidebar { width: 220px; border-right: 1px solid #1f2833; background: #0f141b; display: flex; flex-direction: column; }
.shell-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid #1f2833; font-size: 12px; }
.shell-header button { background: #2b7cff; color: white; border: 0; padding: 4px 8px; border-radius: 6px; cursor: pointer; }
.shell-header button:disabled { background: #2a3441; cursor: default; }
#shell-list { flex: 1; overflow-y: auto; }
.shell-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; font-size: 12px; color: #e6e6e6; border-bottom: 1px solid #141b24; cursor: pointer; }
.shell-item:hover { background: #141b24; }
.shell-item.active { background: #1a212d; border-left: 3px solid #2b7cff; padding-left: 7px; }
.shell-actions { display: flex; gap: 6px; }
.shell-btn { background: none; border: 0; color: #9bb3c7; cursor: pointer; font-size: 12px; }
#main-area { flex: 1; position: relative; }
#terminal { height: 100%; width: 100%; }
#dashboard { display: none; padding: 20px; max-width: 800px; margin: 0 auto; }
#dashboard h1 { font-size: 20px; color: #fff; margin-bottom: 20px; }
.session-card { background: #121720; border: 1px solid #1f2833; border-radius: 8px; padding: 15px; margin-bottom: 10px; cursor: pointer; transition: background 0.2s; display: flex; justify-content: space-between; align-items: center; }
.session-card:hover { background: #1a212d; border-color: #2b7cff; }
.session-info { display: flex; flex-direction: column; gap: 4px; }
.session-id { font-weight: bold; color: #2b7cff; font-size: 16px; }
.session-meta { font-size: 12px; color: #666; }
.session-stats { display: flex; gap: 15px; align-items: center; }
.stat-pill { background: #0b0e11; padding: 4px 8px; border-radius: 4px; font-size: 12px; color: #9bb3c7; border: 1px solid #2a3441; }
.empty-state { text-align: center; color: #666; padding: 40px; }

/* File Explorer */
#file-explorer { position: absolute; top: 53px; right: 0; bottom: 0; width: 300px; background: #121720; border-left: 1px solid #1f2833; display: none; flex-direction: column; }
.fe-header { padding: 10px; border-bottom: 1px solid #1f2833; display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: bold; }
.fe-path { padding: 8px; background: #0b0e11; font-size: 11px; color: #9bb3c7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fe-list { flex: 1; overflow-y: auto; }
.fe-item { padding: 4px 10px; display: flex; align-items: center; gap: 6px; font-size: 12px; color: #e6e6e6; cursor: default; }
.fe-item:hover { background: #1f2833; }
.fe-name { flex: 1; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fe-actions { display: none; gap: 4px; }
.fe-item:hover .fe-actions { display: flex; }
.fe-btn { background: none; border: 0; padding: 2px; cursor: pointer; font-size: 12px; opacity: 0.7; }
.fe-btn:hover { opacity: 1; }
.fe-icon { width: 14px; text-align: center; color: #9bb3c7; }
.fe-item.dir .fe-icon { color: #2b7cff; }

/* Editor Modal */
#editor-modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8); z-index: 100; align-items: center; justify-content: center; }
.editor-container { width: 80%; height: 80%; background: #121720; border: 1px solid #1f2833; border-radius: 8px; display: flex; flex-direction: column; }
.editor-header { padding: 10px; border-bottom: 1px solid #1f2833; display: flex; justify-content: space-between; align-items: center; }
.editor-content { flex: 1; padding: 0; background: #0b0e11; border: 0; color: #e6e6e6; font-family: monospace; font-size: 13px; resize: none; outline: none; padding: 10px; }
.btn-sm { padding: 4px 8px; font-size: 11px; }

/* Share Modal */
#share-modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8); z-index: 100; align-items: center; justify-content: center; }
.share-container { width: 400px; background: #121720; border: 1px solid #1f2833; border-radius: 8px; padding: 20px; }
.share-container h3 { margin: 0 0 15px 0; font-size: 16px; }
.share-modes { display: flex; gap: 10px; margin-bottom: 15px; }
.share-modes label { display: flex; align-items: center; gap: 5px; cursor: pointer; font-size: 13px; }
.share-result { margin-top: 10px; }
.share-link { display: flex; gap: 6px; margin-top: 8px; }
.share-link input { flex: 1; background: #0b0e11; color: #e6e6e6; border: 1px solid #2a3441; padding: 6px 8px; border-radius: 6px; font-size: 12px; }

/* Transfer progress */
.transfer-bar { background: #1f2833; border-radius: 4px; height: 6px; margin: 4px 10px; overflow: hidden; display: none; }
.transfer-bar .fill { height: 100%; background: #2b7cff; transition: width 0.2s; width: 0%; }
.transfer-info { font-size: 10px; color: #666; padding: 0 10px; display: none; }

/* Tunnel Modal */
#tunnel-modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8); z-index: 100; align-items: center; justify-content: center; }
.tunnel-container { width: 500px; background: #121720; border: 1px solid #1f2833; border-radius: 8px; padding: 20px; max-height: 80vh; overflow-y: auto; }
.tunnel-container h3 { margin: 0 0 15px 0; font-size: 16px; }
.tunnel-form { display: flex; gap: 6px; margin-top: 10px; align-items: center; }
.tunnel-form input { background: #0b0e11; color: #e6e6e6; border: 1px solid #2a3441; padding: 6px 8px; border-radius: 6px; font-size: 12px; width: 100px; }
.tunnel-form input[type="text"] { width: 100px; }
.tunnel-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #1f2833; font-size: 12px; color: #e6e6e6; }
.tunnel-item .tunnel-info { display: flex; gap: 8px; align-items: center; }
.tunnel-item .tunnel-port { color: #2b7cff; font-weight: bold; }
.tunnel-item .tunnel-link { color: #2b7cff; font-weight: bold; text-decoration: none; }
.tunnel-item .tunnel-link:hover { text-decoration: underline; }
.tunnel-item .tunnel-arrow { color: #666; }
.tunnel-item .tunnel-target { color: #9bb3c7; }
.tunnel-empty { text-align: center; color: #666; padding: 15px; font-size: 12px; }
