.tunnel-page { padding: 24px; max-width: 1100px; margin: 0 auto; }
.tunnel-page__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.tunnel-table { width: 100%; border-collapse: collapse; }
.tunnel-table th, .tunnel-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid #e5e7eb; }
.tunnel-table th { color: #6b7280; font-weight: 500; font-size: 13px; }
.chip { font-size: 12px; padding: 2px 8px; border-radius: 12px; }
.chip--active  { background: #d1fae5; color: #065f46; }
.chip--revoked { background: #fee2e2; color: #991b1b; }

.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: grid; place-items: center; z-index: 50; }
.modal { background: #fff; border-radius: 8px; padding: 24px; min-width: 380px; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.modal--wide { min-width: 520px; }
.modal h3 { margin: 0 0 12px; }
.modal label { display: block; margin-top: 12px; font-size: 14px; }
.modal label input { width: 100%; padding: 6px 8px; margin-top: 4px; box-sizing: border-box; }
.modal .row { display: flex; gap: 8px; margin-top: 4px; }
.modal .row input { flex: 1; padding: 6px 8px; font-family: monospace; }
.modal .warn { background: #fef3c7; color: #92400e; padding: 8px 12px; border-radius: 4px; margin: 8px 0; }
.modal .divider { text-align: center; color: #9ca3af; margin: 16px 0 12px; font-size: 12px; letter-spacing: 1px; }
.modal .hint { color: #6b7280; font-size: 12px; margin-top: 8px; }
.modal .hint code { background: #f3f4f6; padding: 2px 4px; border-radius: 3px; }
.modal__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* .btn and its modifiers moved to main.css — they were never
 * tunnel-specific, and duplicating them here overrode main.css for the
 * whole app (see the note there). */

.nav-section h4 { font-size: 11px; text-transform: uppercase; color: #9ca3af; margin: 16px 12px 4px; letter-spacing: 1px; }

.terminal-page { display: flex; flex-direction: column; height: 100vh; }
.terminal-page__head { display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: #111827; color: #e5e7eb; border-bottom: 1px solid #1f2937; }
.terminal-page__head .grow { flex: 1; }
.terminal-page__head .chip { cursor: pointer; }
.terminal-page__xterm { flex: 1; background: #1e1e1e; }