:root {
  --bg: linear-gradient(135deg, #05080f 0%, #0a1628 50%, #05080f 100%);
  --card: rgba(10, 15, 26, 0.70);
  --border: rgba(140, 176, 255, 0.28);
  --text: #ffffff;
  --muted: #9ca3af;
  --accent: #8cb0ff;
}

html, body { height: 100%; }

body {
  margin: 0;
  font-family: 'Cairo', sans-serif;
  background: var(--bg);
  color: var(--text);
}

.leo-topbar{
  background:rgba(10,15,26,0.9);
  border-bottom:1px solid rgba(140,176,255,0.25);
  padding:10px 20px;
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:100;
}
.leo-topbar-left{display:flex;align-items:center;gap:10px;}
.leo-topbar-left img{height:32px;}
.leo-topbar-title{font-size:1rem;color:var(--accent);font-weight:600;}
.leo-topbar-right{display:flex;align-items:center;gap:12px;}
.leo-status-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px rgba(140,176,255,0.8);}
.leo-user-label{font-size:0.85rem;text-align:right;}
.leo-user-label span{display:block;}
.leo-user-role{color:#80e27e;font-size:0.8rem;}

.leo-topbar-nav {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-inline-end: 12px;
  border-inline-end: 1px solid rgba(140, 176, 255, 0.15);
  padding-inline-start: 12px;
}
.leo-topbar-nav a {
  font-size: 0.8rem;
  color: #e5e7eb;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  transition: all 0.2s;
}
.leo-topbar-nav a:hover {
  background: rgba(140, 176, 255, 0.18);
  color: #a3c3ff;
}

.leo-btn-logout{
  background:rgba(239,68,68,0.18);
  color:#ef4444;
  border:1px solid rgba(239,68,68,0.4);
  border-radius:999px;
  padding:6px 14px;
  font-size:0.8rem;
  cursor:pointer;
  font-family:inherit;
}

.shell { max-width: 1100px; margin: 30px auto; padding: 0 16px 40px; }

.card {
  background: var(--card);
  border-radius: 18px;
  border: 1px solid var(--border);
  box-shadow: 0 14px 40px rgba(0,0,0,0.45);
  padding: 22px 18px 26px;
}

.header h1 { margin: 0 0 6px; color: var(--accent); }
.sub { margin: 0 0 10px; color: #d1fae5; font-size: 0.95rem; }

.panel {
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.07);
  padding: 16px;
  margin-top: 14px;
}

label {
  display: block;
  margin: 10px 0 6px;
  color: #a3c3ff;
  font-weight: 600;
}

input[type="text"], input[type="password"], select, textarea, input[type="file"] {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  font-size: 0.95rem;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
}

textarea { min-height: 140px; resize: vertical; }

.row { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px 16px;
  border-radius:10px;
  border:1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(135deg, #5a7ec9, #8cb0ff);
  color:#ffffff;
  font-size:0.85rem;
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

button:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(140, 176, 255, 0.45); }

.btn-secondary { background: rgba(15, 23, 42, 0.9); border-color: rgba(148, 163, 184, 0.5); }
.btn-secondary:hover { background: rgba(30, 64, 175, 0.9); }

.settings-btn { margin-top: 10px; }
.hint { margin: 10px 0 0; color: var(--muted); }

.result-area {
  margin-top: 14px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.07);
  padding: 16px;
}

.status { color: #fde68a; margin-bottom: 10px; }

.output {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 14px;
  white-space: pre-wrap;
  line-height: 1.7;
}

/* Markdown basics */
.output h1, .output h2, .output h3 { color: #a3c3ff; }
.output a { color: #93c5fd; }
.output code { background: rgba(255,255,255,0.08); padding: 2px 6px; border-radius: 8px; }
.output pre { background: rgba(255,255,255,0.06); padding: 10px; border-radius: 12px; overflow:auto; }