* { margin:0; padding:0; box-sizing:border-box; }
body {
  margin:0; padding:0;
  font-family:'Courier New',Courier,monospace;
  overflow:hidden;
  background:#000; color:#fff;
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
}

#panels-container {
  width:100%; height:100%;
  display:flex; justify-content:center; align-items:center;
  padding:20px;
}

#right-panel {
  width:700px; max-width:92%; background:#1a1a1a; border-radius:14px;
  border:3px solid #444; box-shadow:0 8px 24px rgba(0,0,0,0.7);
  display:flex; flex-direction:column; overflow:hidden;
}

#right-panel #terminal-header {
  background:linear-gradient(to bottom,#2a2a2a,#222);
  border-top-left-radius:11px; border-top-right-radius:11px;
  padding:12px; display:flex; justify-content:flex-start;
}

#right-panel #terminal-buttons { display:flex;
  gap:10px;
}

.terminal-button {
  width:15px; height:15px; border-radius:50%;
  cursor:default; transition:background-color 0.3s;
}

.terminal-button:hover { background-color:rgba(255,255,255,0.2); }

#close-button { background-color:#FF5F57; }
#minimize-button { background-color:#FFBD2E; }
#maximize-button { background-color:#28CA42; }

#right-panel #terminal-content {
  padding:40px 22px; flex-grow:1; text-align:center;
  display:flex; flex-direction:column; align-items:center;
  justify-content:center;
}

.message {
  color:#f04747; margin:15px 0; font-size:14px;
}

form { width:100%; max-width:400px; }

label {
  display:block; text-align:left; margin:20px 0 8px; font-size:14px; color:#bbb;
}

input {
  width:100%; padding:12px; background:#111;
  border:1px solid #444; border-radius:6px;
  color:#fff; font-family:'Courier New',monospace;
  font-size:16px; transition:all 0.3s;
}

input:focus {
  outline:none; border-color:#7289da; box-shadow:0 0 10px rgba(114,137,218,0.4);
}

.login-button {
  margin-top:30px; padding:14px 20px; background:#5865F2; color:white;
  border:none; border-radius:6px; font-family:'Courier New',monospace;
  font-size:1em; font-weight:bold; cursor:pointer;
  transition:all 0.3s ease; width:100%; text-transform:uppercase; letter-spacing:1px;
}

.login-button:hover {
  background:#4752c4; transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(88,101,242,0.4);
}

@media (max-width: 900px) {
  #right-panel { width:320px; max-width:90%; }
}
.sidebar ul li {
  color:#bbb;
  transition:all 0.3s;
}

.sidebar ul li:hover {
  color:#fff;
  background:#222;
}

.sidebar ul li.active {
  color:#7289da;
  background:#222;
}

.card {
  transition:all 0.3s;
}

.card:hover {
  box-shadow:0 6px 16px rgba(114,137,218,0.3);
  border-color:#7289da;
}
#dashboard-container {
  width:100%; height:100%;
  display:flex; justify-content:center; align-items:center;
  gap:30px; padding:20px; flex-wrap:wrap;
}

#left-sidebar {
  width:240px; max-width:90%;
  background:#1a1a1a; border-radius:14px;
  border:3px solid #444; box-shadow:0 8px 24px rgba(0,0,0,0.7);
  display:flex; flex-direction:column; overflow:hidden;
  padding:20px;
}

#left-sidebar ul {
  list-style:none; padding:0; margin:0;
}

#left-sidebar li {
  padding:12px 16px; margin:8px 0; border-radius:6px;
  cursor:pointer; transition:all 0.3s; color:#bbb;
}

#left-sidebar li:hover {
  background:#222; color:#fff;
}

#left-sidebar li.active {
  background:#5865F2; color:#fff;
}

#main-dashboard-panel {
  flex:1; max-width:800px;
}

@media (max-width: 1000px) {
  #dashboard-container { flex-direction:column; gap:25px; }
  #left-sidebar { width:320px; max-width:90%; }
}