body { font-family: Arial, sans-serif; background:#121212; color:#e0e0e0; margin:0; padding:0; }
.container { width:320px; margin:100px auto; padding:20px; background:#1e1e1e; border-radius:8px; box-shadow:0 0 15px rgba(0,0,0,0.7); }
h1,h2 { text-align:center; margin-bottom:20px; color:#fff; }

input { width:100%; padding:10px; margin:8px 0; border:1px solid #444; border-radius:4px; background:#2c2c2c; color:#e0e0e0; }
input::placeholder { color:#888; }

button { width:100%; padding:10px; background:#007BFF; border:none; color:#fff; border-radius:4px; cursor:pointer; font-weight:bold; }
button:hover { background:#0056b3; }

.btn { display:inline-block; margin:20px; padding:20px 40px; background:#007BFF; color:#fff; text-decoration:none; border-radius:8px; font-size:18px; transition: background 0.3s ease; }
.btn:hover { background:#0056b3; }

.error-box { background:#3d1f1f; color:#ff8a80; padding:15px; border:1px solid #ff4444; border-radius:8px; text-align:center; }
/* Modal / Pop-up */
.modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:9999; }
.modal-content { position:relative; width:min(1000px, 96vw); height:min(75vh, 90vh); margin:4vh auto; background:#1e1e1e; border-radius:10px; box-shadow:0 10px 40px rgba(0,0,0,0.6); display:flex; flex-direction:column; }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid #333; }
.modal-header #sshTitle { font-weight:bold; }
.modal-close { width:auto; padding:6px 10px; background:#333; border:none; color:#fff; border-radius:6px; cursor:pointer; }
.modal-close:hover { background:#444; }
.terminal-container { flex:1; padding:8px; }
.modal-footer { border-top:1px solid #333; padding:8px 14px; color:#aaa; }

.hint { color:#aaa; font-size:0.9em; margin-top:6px; }