* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #0d1117; color: #c9d1d9; padding: 20px; }
a { color: #58a6ff; text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin-bottom: 16px; }
.description { color: #8b949e; margin-bottom: 16px; }
.comment-body { background: #21262d; border-left: 3px solid #58a6ff; padding: 12px 16px; margin-bottom: 16px; border-radius: 0 6px 6px 0; }
.comment-body strong { color: #8b949e; font-size: 12px; }
.comment-body p { color: #c9d1d9; margin-top: 8px; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; }
.container { max-width: 1000px; margin: 0 auto; }
nav { margin-bottom: 24px; display: flex; align-items: center; gap: 32px; }
.nav-title { font-size: 20px; font-weight: 700; color: #fff; }
.nav-title:hover { text-decoration: none; color: #fff; }
.nav-links { display: flex; gap: 16px; }
.nav-links a { display: inline-flex; align-items: center; gap: 4px; }
.card { background: #161b22; border: 1px solid #30363d; border-radius: 6px; padding: 16px; margin-bottom: 16px; }
.card h3 { color: #fff; font-size: 14px; margin-bottom: 8px; }
.meta { font-size: 12px; color: #8b949e; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.badge-received { background: #1f6feb; color: #fff; }
.badge-queued { background: #f0883e; color: #fff; }
.badge-running { background: #a371f7; color: #fff; }
.badge-done { background: #238636; color: #fff; }
.badge-failed { background: #da3633; color: #fff; }
.badge-paused { background: #8b949e; color: #fff; }
.badge-cancelled { background: #6e7681; color: #fff; }
input, textarea, select { background: #0d1117; border: 1px solid #30363d; color: #c9d1d9; padding: 8px 12px; border-radius: 6px; width: 100%; margin-bottom: 12px; }
button { background: #238636; color: #fff; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 14px; }
button:hover { background: #2ea043; }
button.secondary { background: #21262d; border: 1px solid #30363d; }
button.secondary:hover { background: #30363d; }
.feed { display: flex; flex-direction: column; gap: 8px; }
.feed-item { background: #21262d; padding: 12px; border-radius: 6px; transition: background 0.15s; }
.feed-item:hover { background: #30363d; }
.feed-item-header { cursor: pointer; }
.feed-item-logs { margin-top: 8px; padding: 8px; background: #161b22; border-radius: 4px; font-family: monospace; font-size: 11px; max-height: 100px; overflow-y: auto; }
.flex { display: flex; gap: 16px; align-items: flex-start; }
.flex-1 { flex: 1 1 0%; min-width: 0; }
pre { background: #161b22; padding: 16px; border-radius: 6px; overflow-x: auto; font-size: 12px; }
.webhook-url { background: #21262d; padding: 12px; border-radius: 6px; display: flex; gap: 8px; align-items: center; margin-bottom: 16px; }
.webhook-url code { flex: 1; font-family: monospace; word-break: break-all; }
.msg { padding: 12px; border-radius: 6px; margin-bottom: 16px; }
.msg-success { background: #238636; }
.msg-error { background: #da3633; }
.hidden { display: none; }
label { display: block; font-size: 12px; color: #8b949e; margin-bottom: 4px; }
.logs-container { background: #161b22; border: 1px solid #30363d; border-radius: 6px; padding: 12px; margin-bottom: 16px; max-height: 300px; overflow-y: auto; font-family: monospace; font-size: 12px; }
.log-line { padding: 2px 0; }
.log-prefix { font-weight: 600; }
.log-stdout .log-prefix { color: #58a6ff; }
.log-stdout .log-content { color: #c9d1d9; }
.log-stderr .log-prefix { color: #f85149; }
.log-stderr .log-content { color: #f85149; }
.log-system .log-prefix { color: #238636; }
.log-system .log-content { color: #8b949e; }
.log-content p { margin: 0; }
.log-content pre { margin: 4px 0; padding: 8px; background: #0d1117; border-radius: 4px; }
.log-content code { background: #21262d; padding: 2px 4px; border-radius: 3px; font-size: 0.9em; }
.log-content pre code { background: none; padding: 0; }
.log-content ul, .log-content ol { margin: 4px 0 4px 20px; }
.log-content a { color: #58a6ff; }
.feed-title { font-weight: 600; color: #fff; margin-top: 6px; }
.feed-summary { font-size: 12px; color: #8b949e; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.checks-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 16px; font-size: 12px; margin-top: 8px; }
.btn-danger { background: #da3633; }
.btn-danger:hover { background: #f85149; }
.modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal.hidden { display: none; }
.modal-content { background: #161b22; border: 1px solid #30363d; border-radius: 6px; width: 90%; max-width: 600px; max-height: 80vh; display: flex; flex-direction: column; }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid #30363d; }
.modal-header h3 { margin: 0; font-size: 16px; }
.modal-close { background: none; border: none; color: #8b949e; font-size: 24px; cursor: pointer; padding: 0; line-height: 1; }
.modal-close:hover { color: #c9d1d9; }
.modal-path { padding: 12px 16px; background: #0d1117; font-size: 12px; border-bottom: 1px solid #30363d; }
.modal-path code { color: #58a6ff; }
.modal-body { flex: 1; overflow-y: auto; padding: 8px; min-height: 200px; max-height: 400px; }
.modal-footer { padding: 12px 16px; border-top: 1px solid #30363d; display: flex; gap: 8px; justify-content: flex-end; }
.folder-item { padding: 8px 12px; cursor: pointer; border-radius: 4px; display: flex; align-items: center; gap: 8px; }
.folder-item:hover { background: #21262d; }
.folder-up { color: #8b949e; }
.folder-git { font-size: 10px; background: #238636; color: #fff; padding: 2px 6px; border-radius: 10px; }
.filter-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.filter-pill { background: #21262d; border: 1px solid #30363d; color: #8b949e; padding: 4px 10px; border-radius: 16px; font-size: 12px; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all 0.15s; }
.filter-pill:hover { background: #30363d; color: #c9d1d9; }
.filter-pill.active { background: #1f6feb; border-color: #1f6feb; color: #fff; }
.pill-count { background: rgba(0,0,0,0.2); padding: 1px 6px; border-radius: 10px; font-size: 10px; }
.filter-pill.active .pill-count { background: rgba(255,255,255,0.2); }
.filtered-out { display: none; }
ow-expandable-text { display: block; position: relative; margin-bottom: 16px; }
.expandable-text-content { overflow: hidden; transition: max-height 0.3s ease; color: #8b949e; word-wrap: break-word; overflow-wrap: break-word; }
.expandable-text-content p { margin: 0 0 8px; }
.expandable-text-content p:last-child { margin-bottom: 0; }
.expandable-text-content a { color: #58a6ff; }
.expandable-text-content code { background: #21262d; padding: 2px 4px; border-radius: 3px; font-size: 0.9em; }
.expandable-text-content pre { margin: 8px 0; padding: 8px; background: #0d1117; border-radius: 4px; }
.expandable-text-content pre code { background: none; padding: 0; }
.expandable-text-content ul, .expandable-text-content ol { margin: 4px 0 4px 20px; }
.expandable-text-fade { position: absolute; bottom: 20px; left: 0; right: 0; height: 40px; background: linear-gradient(transparent, #0d1117); pointer-events: none; transition: opacity 0.3s ease; }
.expandable-text-toggle { display: block; color: #58a6ff; font-size: 12px; cursor: pointer; }
.expandable-text-toggle:hover { text-decoration: underline; }
.nav-user { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 13px; }
.avatar { width: 24px; height: 24px; border-radius: 50%; }
.btn-link { background: none; border: none; color: #8b949e; padding: 0; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.btn-link:hover { color: #c9d1d9; text-decoration: underline; background: none; }
.login-container { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; text-align: center; }
.login-container h1 { font-size: 32px; margin-bottom: 8px; }
.login-container .meta { margin-bottom: 24px; }
.btn-github { display: inline-flex; align-items: center; gap: 8px; background: #24292f; color: #fff; padding: 12px 24px; border-radius: 6px; font-size: 16px; font-weight: 500; text-decoration: none; transition: background 0.15s; }
.btn-github:hover { background: #30363d; text-decoration: none; }
.org-tab { background: #21262d; border: 1px solid #30363d; color: #8b949e; padding: 6px 12px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.org-tab:hover { background: #30363d; color: #c9d1d9; }
.org-tab.active { background: #1f6feb; border-color: #1f6feb; color: #fff; }
.import-btn { white-space: nowrap; }
.import-btn[disabled] { background: #30363d; color: #8b949e; cursor: not-allowed; }
.import-btn[disabled]:hover { background: #30363d; }
.tx-layout { display: flex; gap: 16px; margin-bottom: 16px; }
.tx-logs { flex: 1; min-width: 0; }
.tx-chat { width: 350px; flex-shrink: 0; }
.chat-panel { background: #161b22; border: 1px solid #30363d; border-radius: 6px; display: flex; flex-direction: column; height: 400px; }
.chat-header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #30363d; font-size: 13px; font-weight: 600; }
.chat-status { font-size: 11px; font-weight: 400; padding: 2px 8px; border-radius: 10px; }
.chat-status-active { background: #238636; color: #fff; }
.chat-status-inactive { background: #6e7681; color: #fff; }
.chat-header button { margin-left: auto; padding: 4px 10px; font-size: 12px; }
.chat-messages { flex: 1; overflow-y: auto; padding: 12px; font-family: monospace; font-size: 12px; }
.chat-message { padding: 4px 0; word-wrap: break-word; }
.chat-prefix { font-weight: 600; margin-right: 8px; }
.chat-user .chat-prefix { color: #a371f7; }
.chat-user .chat-content { color: #c9d1d9; }
.chat-assistant .chat-prefix { color: #58a6ff; }
.chat-assistant .chat-content { color: #c9d1d9; }
.chat-system .chat-prefix { color: #238636; }
.chat-system .chat-content { color: #8b949e; }
.chat-content p { margin: 0; }
.chat-content pre { margin: 4px 0; padding: 8px; background: #0d1117; border-radius: 4px; }
.chat-content code { background: #21262d; padding: 2px 4px; border-radius: 3px; font-size: 0.9em; }
.chat-content pre code { background: none; padding: 0; }
.chat-input-container { display: flex; gap: 8px; padding: 8px 12px; border-top: 1px solid #30363d; }
.chat-input { flex: 1; margin: 0; padding: 6px 10px; font-size: 13px; }
.chat-send { padding: 6px 12px; font-size: 13px; }
@media (max-width: 768px) { .tx-layout { flex-direction: column; } .tx-chat { width: 100%; } }

.terminal { background: #0d1117; border: 1px solid #30363d; border-radius: 8px; display: flex; flex-direction: column; height: 500px; margin-bottom: 16px; }
.term-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid #21262d; background: #161b22; border-radius: 8px 8px 0 0; }
.term-toolbar-left { display: flex; align-items: center; gap: 8px; }
.term-toolbar-right { display: flex; align-items: center; gap: 8px; }
.term-title { font-size: 12px; font-weight: 600; color: #8b949e; text-transform: uppercase; letter-spacing: 0.5px; }
.term-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #484f58; transition: background 0.2s; }
.term-status-dot.active { background: #3fb950; box-shadow: 0 0 6px rgba(63, 185, 80, 0.4); }
.term-session-btn { font-size: 12px; padding: 4px 12px; background: #21262d; border: 1px solid #30363d; color: #c9d1d9; }
.term-session-btn:hover { background: #30363d; }
.term-session-btn.term-close { color: #f85149; border-color: #f8514933; }
.term-session-btn.term-close:hover { background: #f8514922; }
.term-output { flex: 1; overflow-y: auto; padding: 12px 0; font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace; font-size: 13px; line-height: 1.6; scrollbar-width: thin; scrollbar-color: #30363d transparent; }
.term-output::-webkit-scrollbar { width: 6px; }
.term-output::-webkit-scrollbar-track { background: transparent; }
.term-output::-webkit-scrollbar-thumb { background: #30363d; border-radius: 3px; }
.term-output::-webkit-scrollbar-thumb:hover { background: #484f58; }
.term-empty { color: #484f58; font-style: italic; padding: 0 16px; }
.term-line { padding: 4px 16px; word-wrap: break-word; display: flex; gap: 8px; position: relative; transition: background 0.15s ease; }
.term-line:hover { background: #161b22; }
.term-prefix { font-weight: 600; flex-shrink: 0; min-width: 64px; }
.term-timestamp { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 11px; color: #484f58; opacity: 0; transition: opacity 0.15s ease; pointer-events: none; }
.term-line:hover .term-timestamp { opacity: 1; }
.term-copy { position: absolute; right: 80px; top: 50%; transform: translateY(-50%); background: #21262d; border: 1px solid #30363d; color: #8b949e; padding: 2px 6px; border-radius: 4px; font-size: 11px; cursor: pointer; opacity: 0; transition: opacity 0.15s ease, background 0.15s ease; display: flex; align-items: center; gap: 4px; }
.term-line:hover .term-copy { opacity: 1; }
.term-copy:hover { background: #30363d; color: #c9d1d9; }
.term-copy svg { width: 12px; height: 12px; }
.term-copy.copied { background: #238636; border-color: #238636; color: #fff; }
.term-content { flex: 1; min-width: 0; }
.term-stdout .term-prefix { color: #58a6ff; }
.term-stdout .term-content { color: #c9d1d9; }
.term-stderr .term-prefix { color: #f85149; }
.term-stderr .term-content { color: #f85149; }
.term-system .term-prefix { color: #3fb950; }
.term-system .term-content { color: #8b949e; }
.term-chat-section { margin-top: 12px; padding-top: 12px; border-top: 1px dashed #30363d; }
.term-chat-user .term-prefix { color: #a371f7; }
.term-chat-user .term-content { color: #c9d1d9; }
.term-chat-assistant .term-prefix { color: #58a6ff; }
.term-chat-assistant .term-content { color: #c9d1d9; }
.term-chat-system .term-prefix { color: #3fb950; }
.term-chat-system .term-content { color: #8b949e; font-style: italic; }
.term-content p { margin: 0 0 4px; }
.term-content p:last-child { margin-bottom: 0; }
.term-content pre { margin: 4px 0; padding: 8px; background: #161b22; border-radius: 4px; overflow-x: auto; }
.term-content code { background: #21262d; padding: 2px 4px; border-radius: 3px; font-size: 0.9em; }
.term-content pre code { background: none; padding: 0; }
.term-content ul, .term-content ol { margin: 4px 0 4px 20px; }
.term-content a { color: #58a6ff; }
.term-input-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid #21262d; background: #161b22; border-radius: 0 0 8px 8px; }
.term-prompt { color: #3fb950; font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace; font-weight: 600; }
.term-input { flex: 1; background: #0d1117; border: 1px solid #30363d; color: #c9d1d9; padding: 8px 12px; border-radius: 6px; font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace; font-size: 13px; margin: 0; }
.term-input:focus { outline: none; border-color: #58a6ff; box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.2); }
.term-input:disabled { opacity: 0.5; cursor: not-allowed; }
.term-send { padding: 8px 16px; font-size: 13px; }
.term-send:disabled { opacity: 0.5; cursor: not-allowed; }
.term-start { padding: 8px 16px; font-size: 13px; background: #238636; border-color: #238636; }
.term-start:hover { background: #2ea043; border-color: #2ea043; }
.term-start:disabled { opacity: 0.7; cursor: not-allowed; }
.term-typing .typing-dots { display: inline-flex; gap: 2px; }
.term-typing .typing-dots span { animation: typing-dot 1.4s infinite; opacity: 0.2; }
.term-typing .typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.term-typing .typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing-dot { 0%, 60%, 100% { opacity: 0.2; } 30% { opacity: 1; } }
.term-streaming { }
.term-streaming-content { }

/* Container Cards */
ow-container-card { display: block; }
.container-card { background: #161b22; border: 1px solid #30363d; border-radius: 6px; padding: 12px; margin-bottom: 8px; }
.container-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.container-info { flex: 1; min-width: 0; }
.container-name { font-weight: 600; color: #fff; font-size: 14px; margin-bottom: 4px; }
.container-name a { color: #58a6ff; }
.container-issue-name { margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.container-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.container-state { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; }
.state-dot { width: 8px; height: 8px; border-radius: 50%; }
.container-repo { font-size: 12px; color: #8b949e; }
.container-repo a { color: #58a6ff; }
.container-status { margin-top: 2px; }
.container-stats { display: flex; gap: 24px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #21262d; }
.container-stats .stat { display: flex; flex-direction: column; gap: 2px; }
.container-stats .stat-label { font-size: 10px; color: #6e7681; text-transform: uppercase; letter-spacing: 0.5px; }
.container-stats .stat-value { font-size: 13px; color: #c9d1d9; font-family: 'SF Mono', monospace; }
.containers-grid { display: grid; gap: 8px; }
.containers-empty { padding: 24px; text-align: center; color: #6e7681; }

/* Container Skeleton Loading */
.container-skeleton .skeleton-line {
  background: linear-gradient(90deg, #21262d 25%, #30363d 50%, #21262d 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: 4px;
}
.skeleton-name { width: 60%; height: 16px; margin-bottom: 8px; }
.skeleton-state { width: 80px; height: 12px; }
.skeleton-status { width: 40%; height: 12px; margin-top: 4px; }
.skeleton-stat { width: 60px; height: 14px; margin-top: 4px; }
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Condensed Container Cards (Sidebar) */
.container-card-condensed { background: #161b22; border: 1px solid #30363d; border-radius: 6px; padding: 8px 10px; margin-bottom: 6px; }
.condensed-header { display: flex; align-items: center; gap: 8px; }
.condensed-state { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.condensed-name { flex: 1; min-width: 0; font-size: 12px; font-weight: 500; color: #c9d1d9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.condensed-name a { color: #58a6ff; }
.condensed-name a:hover { text-decoration: underline; }
.condensed-stop { background: none; border: none; color: #6e7681; font-size: 16px; line-height: 1; padding: 0 2px; cursor: pointer; opacity: 0; transition: opacity 0.15s; }
.container-card-condensed:hover .condensed-stop { opacity: 1; }
.condensed-stop:hover { color: #f85149; }
.condensed-stats { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.condensed-stat { display: flex; align-items: center; gap: 6px; }
.condensed-stat-name { font-size: 9px; color: #6e7681; text-transform: uppercase; letter-spacing: 0.3px; width: 24px; flex-shrink: 0; }
.condensed-stat-track { position: relative; flex: 1; height: 4px; background: #21262d; border-radius: 2px; overflow: hidden; }
.condensed-stat-bar { position: absolute; top: 0; left: 0; height: 100%; background: #238636; border-radius: 2px; transition: width 0.3s ease; }
.condensed-stat-bar.memory { background: #1f6feb; }
.condensed-stat-value { font-size: 9px; color: #6e7681; width: 28px; text-align: right; flex-shrink: 0; }
.condensed-status { font-size: 11px; margin-top: 4px; }
.sidebar-containers { margin-top: 12px; }
.sidebar-containers-empty { padding: 12px 0; text-align: center; font-size: 12px; }
.sidebar-containers-error { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 0; }
.sidebar-retry-btn { background: transparent; border: 1px solid #30363d; color: #8b949e; width: 24px; height: 24px; border-radius: 4px; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; transition: all 0.15s ease; }
.sidebar-retry-btn:hover { background: #21262d; border-color: #8b949e; color: #c9d1d9; }
.sidebar-containers-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sidebar-containers-title { font-size: 11px; font-weight: 600; color: #8b949e; text-transform: uppercase; letter-spacing: 0.5px; }
.sidebar-containers-count { font-size: 11px; color: #6e7681; }

/* Image Card */
.image-card { background: #161b22; border: 1px solid #30363d; border-radius: 6px; padding: 16px; margin-bottom: 24px; }
.image-card h3 { margin: 0 0 8px; font-size: 16px; color: #fff; }
.image-info { display: flex; gap: 24px; align-items: center; margin-bottom: 12px; }
.image-stat { display: flex; flex-direction: column; gap: 2px; }
.image-stat-label { font-size: 10px; color: #6e7681; text-transform: uppercase; letter-spacing: 0.5px; }
.image-stat-value { font-size: 13px; color: #c9d1d9; }
.image-actions { display: flex; gap: 8px; }
.image-not-built { color: #8b949e; font-size: 13px; margin-bottom: 12px; }

/* Repo Cards */
.repo-card { background: #161b22; border: 1px solid #30363d; border-radius: 6px; margin-bottom: 12px; }
.repo-card-compact { padding: 12px 16px; }
.repo-card-full { padding: 16px; }
.repo-card-header { margin-bottom: 8px; }
.repo-card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.repo-card-name { font-size: 14px; font-weight: 600; color: #58a6ff; }
.repo-card-name:hover { text-decoration: underline; }
.repo-card-badges { display: flex; gap: 6px; flex-shrink: 0; }
.repo-github-path { font-size: 12px; color: #6e7681; font-family: 'SF Mono', monospace; margin-top: 2px; }
.repo-card-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #8b949e; }
.repo-separator { color: #484f58; }
.repo-slug { font-family: 'SF Mono', monospace; color: #6e7681; }
.repo-agents { color: #8b949e; }
.repo-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 500; }
.repo-badge-review { background: rgba(35, 134, 54, 0.15); color: #3fb950; }
.repo-badge svg { flex-shrink: 0; }
.repo-card-body { padding: 8px 0; border-top: 1px solid #21262d; margin-top: 8px; }
.repo-card-details { display: flex; flex-direction: column; gap: 6px; }
.repo-detail-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.repo-detail-label { color: #6e7681; min-width: 64px; }
.repo-detail-value { color: #c9d1d9; }
.repo-detail-mention { color: #a371f7; font-family: 'SF Mono', monospace; }
.repo-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid #21262d; margin-top: 12px; }
.repo-card-meta-row { display: flex; align-items: center; gap: 12px; }
.repo-importer { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #8b949e; }
.repo-importer-avatar { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; }
.repo-importer-avatar-placeholder { display: inline-flex; align-items: center; justify-content: center; background: #30363d; color: #8b949e; font-size: 10px; font-weight: 600; }
.repo-importer-name { color: #c9d1d9; }
.repo-created { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #6e7681; font-family: 'SF Mono', monospace; }
.repo-created svg { color: #484f58; }
.repo-settings-link { font-size: 12px; color: #8b949e; }
.repo-settings-link:hover { color: #58a6ff; }
.repo-reviewer { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #a371f7; }
.repo-reviewer svg { color: #6e7681; }
.repo-reviewer-name { font-family: 'SF Mono', monospace; }

/* Footer */
.footer { margin-top: 32px; padding: 24px 0 12px; border-top: 1px solid #21262d; }
.footer-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.footer-copyright { font-size: 12px; color: #484f58; }
.footer-links { display: flex; gap: 16px; }
.footer-links a { font-size: 12px; color: #484f58; transition: color 0.15s; }
.footer-links a:hover { color: #8b949e; text-decoration: none; }
@media (max-width: 600px) { .footer-content { flex-direction: column; text-align: center; } }

/* Toast Notifications */
#toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 10000; display: flex; flex-direction: column; gap: 8px; max-width: 380px; width: 100%; pointer-events: none; }
.toast { background: #161b22; border: 1px solid #30363d; border-radius: 8px; padding: 12px; cursor: pointer; pointer-events: auto; transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); }
.toast:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); border-color: #484f58; }
.toast-pulse { animation: toast-pulse 2s ease-in-out infinite; }
@keyframes toast-pulse { 0%, 100% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); } 50% { box-shadow: 0 4px 12px rgba(163, 113, 247, 0.3), 0 0 0 2px rgba(163, 113, 247, 0.2); } }
.toast-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.toast-title { font-weight: 600; color: #fff; font-size: 13px; line-height: 1.3; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast-close { background: none; border: none; color: #6e7681; font-size: 18px; line-height: 1; cursor: pointer; padding: 0; margin: -4px -4px 0 0; transition: color 0.15s; }
.toast-close:hover { color: #c9d1d9; background: none; }
.toast-body { font-size: 12px; color: #8b949e; line-height: 1.4; margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.toast-footer { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.toast-agent { color: #a371f7; font-weight: 500; }
.toast-time { color: #6e7681; margin-left: auto; }
.toast-overflow { background: #21262d; border: 1px solid #30363d; border-radius: 6px; padding: 8px 12px; text-align: center; font-size: 12px; color: #8b949e; cursor: pointer; pointer-events: auto; transition: background 0.15s; }
.toast-overflow:hover { background: #30363d; color: #c9d1d9; }

/* Toast CTA buttons */
.toast-cta { display: inline-block; background: #238636; color: #fff; padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 500; text-decoration: none; margin-left: auto; transition: background 0.15s; }
.toast-cta:hover { background: #2ea043; text-decoration: none; }

/* Toast outcome badges */
.toast-outcome-badge { font-size: 11px; }
.toast-outcome-plan_pending { background: #f0883e; color: #fff; }
.toast-outcome-pr_created { background: #1f6feb; color: #fff; }
.toast-outcome-pr_merged { background: #a371f7; color: #fff; }
.toast-outcome-review_requested { background: #f0883e; color: #fff; }
.toast-outcome-changes_requested { background: #da3633; color: #fff; }
.toast-outcome-completed { background: #238636; color: #fff; }
.toast-outcome-failed { background: #da3633; color: #fff; }

/* Toast responsive */
@media (max-width: 480px) {
  #toast-container { left: 12px; right: 12px; bottom: 12px; max-width: none; }
  .toast { padding: 10px; }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
  .toast-pulse { animation: none; }
  @keyframes toast-pulse { 0%, 100% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); } }
}

/* Transaction Page Layout */
.tx-page { display: flex; flex-direction: column; min-height: calc(100vh - 100px); }
.tx-header { position: sticky; top: 0; z-index: 100; background: #0d1117; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #21262d; }
.tx-header-top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.tx-back { display: inline-flex; align-items: center; gap: 4px; color: #8b949e; font-size: 13px; padding: 4px 8px; margin-left: -8px; border-radius: 4px; transition: background 0.15s, color 0.15s; }
.tx-back:hover { background: #21262d; color: #c9d1d9; text-decoration: none; }
.tx-back svg { width: 16px; height: 16px; }
.tx-title { flex: 1; font-size: 18px; font-weight: 600; color: #fff; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-header-actions { display: flex; gap: 8px; flex-shrink: 0; }
.tx-header-actions button { font-size: 13px; padding: 6px 12px; }
.tx-header-sub { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #8b949e; }
.tx-header-sep { color: #484f58; }

/* Split Layout */
.tx-split { display: grid; grid-template-columns: 1fr 320px; gap: 16px; flex: 1; min-height: 0; }
.tx-split.sidebar-collapsed { grid-template-columns: 1fr; }
.tx-main { display: flex; flex-direction: column; min-height: 0; }
.tx-sidebar { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
.tx-split.sidebar-collapsed .tx-sidebar { display: none; }

/* Terminal in split layout - fills available space with scrollable output */
.tx-main .terminal { flex: 1; height: 0; min-height: 400px; margin-bottom: 0; }

/* Sidebar Toggle */
.sidebar-toggle { position: fixed; right: 16px; top: 50%; transform: translateY(-50%); background: #21262d; border: 1px solid #30363d; color: #8b949e; width: 28px; height: 48px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 99; transition: background 0.15s, color 0.15s, opacity 0.2s; }
.sidebar-toggle:hover { background: #30363d; color: #c9d1d9; }
.sidebar-toggle svg { width: 16px; height: 16px; }
.tx-split:not(.sidebar-collapsed) .sidebar-toggle { opacity: 0; pointer-events: none; }
.tx-split.sidebar-collapsed .sidebar-toggle { opacity: 1; pointer-events: auto; }
.repo-split:not(.sidebar-collapsed) .sidebar-toggle { opacity: 0; pointer-events: none; }
.repo-split.sidebar-collapsed .sidebar-toggle { opacity: 1; pointer-events: auto; }

/* Context Panel */
.context-panel { background: #161b22; border: 1px solid #30363d; border-radius: 8px; display: flex; flex-direction: column; }
.ctx-section { border-bottom: 1px solid #21262d; }
.ctx-section:last-child { border-bottom: none; }
.ctx-section-header { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px; background: none; border: none; color: #c9d1d9; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; transition: background 0.15s; }
.ctx-section-header:hover { background: #21262d; }
.ctx-chevron { width: 16px; height: 16px; color: #6e7681; transition: transform 0.2s ease; flex-shrink: 0; }
.ctx-collapsed .ctx-chevron { transform: rotate(-90deg); }
.ctx-section-body { padding: 0 12px 12px; overflow: hidden; transition: max-height 0.2s ease, padding 0.2s ease, opacity 0.2s ease; }
.ctx-collapsed .ctx-section-body { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; }

/* Context Panel Content Styles */
.ctx-issue-title { font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 8px; line-height: 1.4; }
.ctx-issue-title a { color: #58a6ff; }
.ctx-issue-title a:hover { text-decoration: underline; }
.ctx-issue-body { color: #8b949e; font-size: 13px; line-height: 1.5; max-height: 120px; overflow-y: auto; }
.ctx-issue-body p { margin: 0 0 8px; }
.ctx-issue-body p:last-child { margin-bottom: 0; }
.ctx-comment { background: #21262d; border-left: 3px solid #58a6ff; padding: 10px 12px; border-radius: 0 6px 6px 0; margin-bottom: 8px; }
.ctx-comment-label { font-size: 11px; color: #8b949e; margin-bottom: 4px; }
.ctx-comment-body { color: #c9d1d9; font-size: 13px; white-space: pre-wrap; word-wrap: break-word; line-height: 1.5; }
.ctx-meta-grid { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 12px; }
.ctx-meta-label { color: #6e7681; }
.ctx-meta-value { color: #c9d1d9; word-break: break-word; }
.ctx-meta-value a { color: #58a6ff; }
.ctx-payload { background: #0d1117; border-radius: 6px; padding: 12px; font-family: 'SF Mono', monospace; font-size: 11px; max-height: 300px; overflow: auto; color: #8b949e; white-space: pre-wrap; word-break: break-all; }
.ctx-empty { color: #6e7681; font-size: 12px; font-style: italic; }

/* Keyboard shortcuts hint */
.kbd { display: inline-block; background: #21262d; border: 1px solid #30363d; border-radius: 3px; padding: 1px 5px; font-family: 'SF Mono', monospace; font-size: 11px; color: #8b949e; }

/* Responsive */
@media (max-width: 1024px) {
  .tx-split { grid-template-columns: 1fr; }
  .tx-sidebar { display: none; }
  .tx-split.sidebar-collapsed .sidebar-toggle { display: none; }
  .sidebar-toggle { display: none; }
  .tx-main .terminal { height: 60vh; min-height: 350px; }
}

@media (max-width: 768px) {
  .tx-header-top { flex-wrap: wrap; }
  .tx-title { font-size: 16px; order: 2; flex-basis: 100%; }
  .tx-back { order: 1; }
  .tx-header-actions { order: 3; flex-basis: 100%; }
  .tx-header-actions button { flex: 1; }
}

/* Kanban Board */
.kanban-board { overflow-x: auto; padding-bottom: 16px; }
.kanban-lanes { display: flex; gap: 16px; min-width: min-content; }

/* Kanban Lane */
.kanban-lane { flex: 0 0 280px; min-width: 280px; background: #161b22; border-radius: 8px; display: flex; flex-direction: column; max-height: calc(100vh - 200px); }
.kanban-lane-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 2px solid var(--lane-color, #30363d); }
.kanban-lane-title { font-size: 13px; font-weight: 600; color: #c9d1d9; }
.kanban-lane-count { font-size: 12px; font-weight: 500; color: #8b949e; background: #21262d; padding: 2px 8px; border-radius: 10px; min-width: 20px; text-align: center; }
.kanban-lane-content { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.kanban-lane-empty { color: #6e7681; font-size: 13px; text-align: center; padding: 24px 16px; font-style: italic; }

/* Kanban Card */
.kanban-card { background: #21262d; border: 1px solid #30363d; border-radius: 6px; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.kanban-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); }
.kanban-card-link { display: block; padding: 12px; text-decoration: none; color: inherit; }
.kanban-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.kanban-card-title { font-size: 13px; font-weight: 500; color: #c9d1d9; line-height: 1.4; flex: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kanban-card-github { flex-shrink: 0; color: #8b949e; transition: color 0.15s; }
.kanban-card-github:hover { color: #58a6ff; }
.kanban-card-summary { font-size: 12px; color: #8b949e; line-height: 1.5; margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kanban-card-footer { display: flex; align-items: center; justify-content: space-between; font-size: 11px; }
.kanban-card-agent { display: flex; align-items: center; gap: 4px; color: #8b949e; }
.kanban-card-agent .agent-dot { width: 6px; height: 6px; border-radius: 50%; background: #8b949e; }
.kanban-card-agent.role-worker .agent-dot { background: #a371f7; }
.kanban-card-agent.role-reviewer .agent-dot { background: #39d4e0; }
.kanban-card-time { color: #6e7681; }

/* Kanban Responsive */
@media (max-width: 1024px) {
  .kanban-lane { flex: 0 0 260px; min-width: 260px; }
}

@media (max-width: 768px) {
  .kanban-lanes { padding: 0 12px; }
  .kanban-lane { flex: 0 0 240px; min-width: 240px; }
}

/* Repository Page Layout */
.repo-page { display: flex; flex-direction: column; min-height: calc(100vh - 100px); }
.repo-header { position: sticky; top: 0; z-index: 100; background: #0d1117; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #21262d; }
.repo-header-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.repo-back { display: inline-flex; align-items: center; justify-content: center; color: #8b949e; padding: 6px; margin-left: -6px; border-radius: 4px; transition: background 0.15s, color 0.15s; flex-shrink: 0; }
.repo-back:hover { background: #21262d; color: #c9d1d9; text-decoration: none; }
.repo-back svg { width: 16px; height: 16px; }
.repo-breadcrumb { display: flex; align-items: center; gap: 4px; font-size: 13px; color: #8b949e; flex-shrink: 0; }
.repo-breadcrumb-item { color: #8b949e; display: inline-flex; align-items: center; }
.repo-breadcrumb-sep { color: #484f58; display: inline-flex; align-items: center; }
.repo-title { flex: 1; font-size: 18px; font-weight: 600; color: #fff; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; }
.repo-title-link { color: #58a6ff; display: inline-flex; align-items: center; gap: 4px; }
.repo-title-link:hover { text-decoration: underline; }
.repo-external-icon { color: #6e7681; flex-shrink: 0; }
.repo-header-actions { display: flex; gap: 8px; flex-shrink: 0; }
.repo-header-actions .btn { font-size: 13px; padding: 6px 12px; display: inline-flex; align-items: center; text-decoration: none; }
.repo-header-sub { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #8b949e; flex-wrap: wrap; }
.repo-header-sep { color: #484f58; }
.repo-slug-badge { background: #21262d; padding: 2px 8px; border-radius: 4px; font-size: 11px; color: #8b949e; }
.repo-agents-count { color: #8b949e; }
.repo-container-badge, .repo-review-badge { display: inline-flex; align-items: center; gap: 4px; color: #8b949e; }
.repo-container-badge svg, .repo-review-badge svg { color: #6e7681; }

/* Repo Split Layout */
.repo-split { display: grid; grid-template-columns: 1fr 320px; gap: 16px; flex: 1; min-height: 0; }
.repo-split.sidebar-collapsed { grid-template-columns: 1fr; }
.repo-main { display: flex; flex-direction: column; gap: 24px; min-height: 0; }
.repo-sidebar { display: flex; flex-direction: column; min-height: 0; }
.repo-split.sidebar-collapsed .repo-sidebar { display: none; }

/* Repo Section */
.repo-section { }
.repo-section-title { font-size: 14px; font-weight: 600; color: #c9d1d9; margin: 0 0 12px 0; text-transform: uppercase; letter-spacing: 0.5px; }

/* Repo Stats Grid */
.repo-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.repo-stat { display: flex; flex-direction: column; align-items: center; padding: 8px; background: #0d1117; border-radius: 6px; text-align: center; }
.repo-stat-value { font-size: 18px; font-weight: 600; color: #fff; font-family: 'SF Mono', monospace; }
.repo-stat-value[data-loading="true"] { color: #484f58; }
.repo-stat-label { font-size: 10px; color: #6e7681; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }

/* Repo Config Grid */
.repo-config-grid { display: flex; flex-direction: column; gap: 8px; }
.repo-config-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.repo-config-label { font-size: 12px; color: #6e7681; flex-shrink: 0; }
.repo-config-value { font-size: 12px; color: #c9d1d9; text-align: right; display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.repo-agent-tag { display: inline-block; background: #21262d; color: #a371f7; padding: 2px 6px; border-radius: 4px; font-family: 'SF Mono', monospace; font-size: 11px; }
.repo-agent-tag.reviewer { color: #58a6ff; }

/* Repo Webhook Section */
.repo-webhook-section { }
.repo-webhook-url { display: flex; align-items: center; gap: 8px; background: #0d1117; border: 1px solid #30363d; border-radius: 6px; padding: 8px 12px; }
.repo-webhook-url code { flex: 1; font-size: 11px; color: #c9d1d9; word-break: break-all; }
.repo-webhook-copy { background: none; border: none; color: #6e7681; padding: 4px; cursor: pointer; border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: color 0.15s, background 0.15s; flex-shrink: 0; }
.repo-webhook-copy:hover { color: #c9d1d9; background: #21262d; }
.repo-webhook-copy.copied { color: #3fb950; }

/* Repo Empty State */
.repo-empty-state { color: #6e7681; font-size: 13px; padding: 24px; text-align: center; background: #161b22; border: 1px dashed #30363d; border-radius: 6px; }

/* Repo Page Responsive */
@media (max-width: 1024px) {
  .repo-split { grid-template-columns: 1fr; }
  .repo-sidebar { display: none; }
  .repo-split.sidebar-collapsed .sidebar-toggle { display: none; }
}

@media (max-width: 768px) {
  .repo-header-top { flex-wrap: wrap; gap: 8px; }
  .repo-breadcrumb { display: none; }
  .repo-title { font-size: 16px; order: 2; flex-basis: 100%; }
  .repo-back { order: 1; }
  .repo-header-actions { order: 3; flex-basis: 100%; }
  .repo-header-actions .btn { flex: 1; justify-content: center; }
  .repo-stats-grid { grid-template-columns: 1fr; }
}

/* Monitor Page */
.monitor-page { }
.monitor-header { margin-bottom: 24px; }
.monitor-header-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.monitor-title { font-size: 24px; font-weight: 600; color: #fff; margin: 0; }

/* Monitor Filters */
.monitor-filters { display: flex; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.monitor-filter-group { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.monitor-filter-group label { font-size: 11px; font-weight: 600; color: #8b949e; text-transform: uppercase; letter-spacing: 0.5px; }
.monitor-filter-group select { background: #0d1117; border: 1px solid #30363d; color: #c9d1d9; padding: 8px 12px; border-radius: 6px; font-size: 13px; margin: 0; cursor: pointer; }
.monitor-filter-group select:hover { border-color: #8b949e; }
.monitor-filter-group select:focus { outline: none; border-color: #58a6ff; box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.2); }

/* Monitor Log Container */
.monitor-log-container { background: #161b22; border: 1px solid #30363d; border-radius: 8px; max-height: 600px; overflow-y: auto; }

/* Monitor Log Entry */
.monitor-log-entry { display: flex; gap: 16px; padding: 12px 16px; border-bottom: 1px solid #21262d; transition: background 0.15s; }
.monitor-log-entry:last-child { border-bottom: none; }
.monitor-log-entry:hover { background: #21262d; }
.monitor-log-entry.filtered-out { display: none; }

.monitor-log-time { flex-shrink: 0; width: 80px; display: flex; flex-direction: column; gap: 2px; }
.monitor-time { font-family: 'SF Mono', monospace; font-size: 13px; color: #c9d1d9; font-weight: 500; }
.monitor-date { font-size: 11px; color: #6e7681; }

.monitor-log-content { flex: 1; min-width: 0; }
.monitor-log-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.monitor-repo { font-weight: 600; color: #58a6ff; font-size: 14px; }
.monitor-repo:hover { text-decoration: underline; }

.monitor-log-details { font-size: 13px; color: #8b949e; }
.monitor-change { font-family: 'SF Mono', monospace; color: #c9d1d9; }
.monitor-reason { color: #6e7681; margin-left: 8px; }

/* Monitor Empty State */
.monitor-empty { padding: 48px 24px; text-align: center; color: #6e7681; font-size: 14px; }

/* Monitor Pagination */
.monitor-pagination { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 16px; padding: 12px; }
.monitor-page-link { font-size: 13px; color: #58a6ff; padding: 6px 12px; border-radius: 6px; background: #21262d; border: 1px solid #30363d; text-decoration: none; transition: background 0.15s, color 0.15s; }
.monitor-page-link:hover { background: #30363d; text-decoration: none; }
.monitor-page-link.disabled { color: #484f58; background: transparent; border-color: transparent; cursor: not-allowed; }
.monitor-page-info { font-size: 13px; color: #8b949e; }

/* Monitor Tune Results */
.monitor-tune-results { max-height: 300px; overflow-y: auto; }
.monitor-tune-item { background: #0d1117; border: 1px solid #30363d; border-radius: 6px; padding: 12px; margin-bottom: 8px; }
.monitor-tune-item:last-child { margin-bottom: 0; }
.monitor-tune-repo { font-weight: 600; color: #58a6ff; font-size: 14px; margin-bottom: 4px; }
.monitor-tune-change { font-family: 'SF Mono', monospace; font-size: 13px; color: #c9d1d9; margin-top: 4px; }

/* Monitor Responsive */
@media (max-width: 768px) {
  .monitor-header-top { flex-direction: column; gap: 12px; align-items: stretch; }
  .monitor-header-top .btn { width: 100%; }
  .monitor-filters { flex-direction: column; }
  .monitor-filter-group { min-width: 100%; }
  .monitor-log-entry { flex-direction: column; gap: 8px; }
  .monitor-log-time { width: auto; flex-direction: row; gap: 8px; }
}

/* Resource Usage Charts */
.chart-container { background: #161b22; border: 1px solid #30363d; border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.chart-title { font-size: 14px; font-weight: 600; color: #c9d1d9; margin: 0; }
.chart-wrapper { position: relative; height: 200px; }
.chart-wrapper.chart-tall { height: 300px; }
.chart-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: #6e7681; font-size: 13px; }
.chart-loading { display: flex; align-items: center; justify-content: center; height: 100%; color: #6e7681; font-size: 13px; }
.chart-error { display: flex; align-items: center; justify-content: center; height: 100%; color: #f85149; font-size: 13px; }

/* Period Selector */
.period-selector { display: flex; gap: 4px; }
.period-btn { background: #21262d; border: 1px solid #30363d; color: #8b949e; padding: 4px 10px; border-radius: 4px; font-size: 12px; cursor: pointer; transition: all 0.15s; }
.period-btn:hover { background: #30363d; color: #c9d1d9; }
.period-btn.active { background: #1f6feb; border-color: #1f6feb; color: #fff; }

/* Monitor Charts Section */
.monitor-charts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 24px; }
@media (max-width: 900px) { .monitor-charts { grid-template-columns: 1fr; } }

/* Repo Stats Chart */
.repo-chart-section { margin-bottom: 24px; }
.repo-chart-section .chart-container { margin-bottom: 0; }

/* ============================================================================
   Dashboard Styles
   ============================================================================ */

/* Dashboard Page Layout */
.dashboard-page { max-width: 1200px; margin: 0 auto; }

/* Health Bar */
.dashboard-health-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 12px 24px;
  margin-bottom: 24px;
}

.health-stat {
  display: flex;
  align-items: center;
  gap: 8px;
}

.health-stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #21262d;
  color: #8b949e;
}

.health-stat-containers { color: #58a6ff; }
.health-stat-agents { color: #a371f7; }
.health-stat-approval { color: #d29922; }

.health-stat-pulse {
  animation: health-pulse 2s ease-in-out infinite;
}

@keyframes health-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.health-stat-value {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  min-width: 24px;
  text-align: center;
}

.health-stat-value[data-loading] {
  background: linear-gradient(90deg, #21262d 25%, #30363d 50%, #21262d 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: 4px;
  width: 24px;
  height: 24px;
  color: transparent;
}

.health-stat-label {
  font-size: 13px;
  color: #8b949e;
}

.health-stat-attention .health-stat-icon {
  background: rgba(210, 153, 34, 0.15);
  color: #d29922;
}

.health-stat-attention .health-stat-value {
  color: #d29922;
}

.health-divider {
  width: 1px;
  height: 28px;
  background: #30363d;
}

/* Dashboard Layout */
.dashboard-layout {
  display: flex;
  gap: 24px;
}

.dashboard-main {
  flex: 1;
  min-width: 0;
}

.dashboard-sidebar {
  width: 280px;
  flex-shrink: 0;
}

/* Dashboard Sections */
.dashboard-section {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  margin-bottom: 16px;
}

.dashboard-section-attention {
  border-color: rgba(210, 153, 34, 0.4);
}

.dashboard-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid #21262d;
  user-select: none;
}

.dashboard-section-header:hover {
  background: #21262d;
}

.dashboard-section-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6e7681;
  transition: transform 0.2s;
}

.dashboard-section-toggle svg {
  transition: transform 0.2s ease;
}

.dashboard-section-collapsed .dashboard-section-toggle svg {
  transform: rotate(0deg);
}

.dashboard-section:not(.dashboard-section-collapsed) .dashboard-section-toggle svg {
  transform: rotate(90deg);
}

.dashboard-section-title {
  font-size: 12px;
  font-weight: 600;
  color: #8b949e;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dashboard-section-attention .dashboard-section-title {
  color: #d29922;
}

.dashboard-section-count {
  font-size: 11px;
  font-weight: 500;
  background: #21262d;
  color: #8b949e;
  padding: 2px 8px;
  border-radius: 10px;
}

.dashboard-section-attention .dashboard-section-count {
  background: rgba(210, 153, 34, 0.15);
  color: #d29922;
}

.dashboard-section-content {
  padding: 12px 16px;
}

.dashboard-section-collapsed .dashboard-section-content {
  display: none;
}

.dashboard-section-collapsed .dashboard-section-header {
  border-bottom: none;
}

/* Dashboard Empty State */
.dashboard-empty {
  text-align: center;
  padding: 16px;
  color: #6e7681;
}

/* Dashboard Cards Grid */
.dashboard-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.dashboard-cards-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Dashboard Work Card */
.dashboard-work-card {
  background: #21262d;
  border: 1px solid #30363d;
  border-radius: 6px;
  transition: background 0.15s, border-color 0.15s, opacity 0.25s, transform 0.25s;
}

.dashboard-work-card:hover {
  background: #30363d;
  border-color: #484f58;
}

/* New card animation - briefly highlight */
.dashboard-work-card-new {
  animation: dashboard-card-enter 0.3s ease-out;
  border-color: #58a6ff;
}

@keyframes dashboard-card-enter {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.dashboard-work-card-link {
  display: block;
  padding: 12px;
  text-decoration: none;
  color: inherit;
}

.dashboard-work-card-link:hover {
  text-decoration: none;
}

.dashboard-work-card-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}

.dashboard-work-state-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
  transition: background 0.3s ease;
}

.dashboard-work-title {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: #c9d1d9;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.dashboard-work-github {
  color: #6e7681;
  padding: 2px;
  flex-shrink: 0;
}

.dashboard-work-github:hover {
  color: #c9d1d9;
}

.dashboard-work-card-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #6e7681;
}

.dashboard-work-repo {
  color: #58a6ff;
}

.dashboard-work-agent {
  color: #a371f7;
}

.dashboard-work-time {
  margin-left: auto;
}

/* Dashboard Subsections */
.dashboard-subsections {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dashboard-subsection-header {
  font-size: 12px;
  font-weight: 500;
  color: #8b949e;
  margin-bottom: 8px;
}

/* Dashboard Sidebar */
.dashboard-sidebar-section {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 12px;
}

.dashboard-sidebar-header {
  font-size: 11px;
  font-weight: 600;
  color: #8b949e;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  padding: 0 8px;
}

.dashboard-repos-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dashboard-repo-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  color: #c9d1d9;
  text-decoration: none;
  transition: background 0.15s;
}

.dashboard-repo-item:hover {
  background: #21262d;
  text-decoration: none;
}

.dashboard-repo-name {
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-repo-count {
  font-size: 11px;
  font-weight: 500;
  background: #238636;
  color: #fff;
  padding: 2px 6px;
  border-radius: 10px;
  flex-shrink: 0;
}

/* Dashboard Responsive */
@media (max-width: 1024px) {
  .dashboard-layout {
    flex-direction: column;
  }

  .dashboard-sidebar {
    width: 100%;
  }

  .dashboard-repos-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }

  .dashboard-repo-item {
    flex: 0 1 auto;
  }
}

@media (max-width: 768px) {
  .dashboard-health-bar {
    flex-direction: column;
    gap: 12px;
    padding: 16px;
  }

  .health-divider {
    width: 100%;
    height: 1px;
  }

  .dashboard-cards-grid {
    grid-template-columns: 1fr;
  }
}