.orange-theme {
  background: #ff9800;
  color: #222;
}
.orange-theme .social-bar a {
  background: #ff9800;
  color: #222;
  box-shadow: 0 0 5px #ff9800;
}
.orange-theme .social-bar a:hover {
  background: #ffb74d;
  color: #ff9800;
  box-shadow: 0 0 10px #ff9800;
}
.orange-theme .grid {
  background: transparent;
}
.orange-theme .card {
  background: #fff3e0;
  border: 2px solid #ff9800;
  color: #ff9800;
}
.orange-theme .card:hover {
  background: #ffe0b2;
  border-color: #ff9800;
  color: #222;
}

.yellow-theme {
  background: #fffde7;
  color: #222;
}
.yellow-theme .social-bar a {
  background: #ffeb3b;
  color: #222;
  box-shadow: 0 0 5px #ffeb3b;
}
.yellow-theme .social-bar a:hover {
  background: #fffde7;
  color: #ffeb3b;
  box-shadow: 0 0 10px #ffeb3b;
}
.yellow-theme .grid {
  background: transparent;
}
.yellow-theme .card {
  background: #fffde7;
  border: 2px solid #ffeb3b;
  color: #ffeb3b;
}
.yellow-theme .card:hover {
  background: #fffde7;
  border-color: #ffeb3b;
  color: #222;
}

.green-theme {
  background: #e8f5e9;
  color: #222;
}
.green-theme .social-bar a {
  background: #4caf50;
  color: #fff;
  box-shadow: 0 0 5px #4caf50;
}
.green-theme .social-bar a:hover {
  background: #81c784;
  color: #4caf50;
  box-shadow: 0 0 10px #4caf50;
}
.green-theme .grid {
  background: transparent;
}
.green-theme .card {
  background: #e8f5e9;
  border: 2px solid #4caf50;
  color: #388e3c;
}
.green-theme .card:hover {
  background: #a5d6a7;
  border-color: #388e3c;
  color: #222;
}

.blue-theme {
  background: #e3f2fd;
  color: #222;
}
.blue-theme .social-bar a {
  background: #2196f3;
  color: #fff;
  box-shadow: 0 0 5px #2196f3;
}
.blue-theme .social-bar a:hover {
  background: #90caf9;
  color: #2196f3;
  box-shadow: 0 0 10px #2196f3;
}
.blue-theme .grid {
  background: transparent;
}
.blue-theme .card {
  background: #e3f2fd;
  border: 2px solid #2196f3;
  color: #1976d2;
}
.blue-theme .card:hover {
  background: #90caf9;
  border-color: #1976d2;
  color: #222;
}

.indigo-theme {
  background: #e8eaf6;
  color: #222;
}
.indigo-theme .social-bar a {
  background: #3f51b5;
  color: #fff;
  box-shadow: 0 0 5px #3f51b5;
}
.indigo-theme .social-bar a:hover {
  background: #9fa8da;
  color: #3f51b5;
  box-shadow: 0 0 10px #3f51b5;
}
.indigo-theme .grid {
  background: transparent;
}
.indigo-theme .card {
  background: #e8eaf6;
  border: 2px solid #3f51b5;
  color: #1a237e;
}
.indigo-theme .card:hover {
  background: #9fa8da;
  border-color: #1a237e;
  color: #222;
}

.violet-theme {
  background: #f3e5f5;
  color: #222;
}
.violet-theme .social-bar a {
  background: #9c27b0;
  color: #fff;
  box-shadow: 0 0 5px #9c27b0;
}
.violet-theme .social-bar a:hover {
  background: #ce93d8;
  color: #9c27b0;
  box-shadow: 0 0 10px #9c27b0;
}
.violet-theme .grid {
  background: transparent;
}
.violet-theme .card {
  background: #f3e5f5;
  border: 2px solid #9c27b0;
  color: #6a1b9a;
}
.violet-theme .card:hover {
  background: #ce93d8;
  border-color: #6a1b9a;
  color: #222;
}
.red-theme {
  background: #ff0000;
  color: #222;
}

.red-theme .social-bar a {
  background: rgb(255, 0, 0);
  color: #222;
  box-shadow: 0 0 5px rgb(255, 0, 242);
}
.red-theme .social-bar a:hover {
  background: #ff0000;
  color: rgb(204, 0, 0);
  box-shadow: 0 0 10px rgb(247, 0, 255);
}
.red-theme .grid {
  background: transparent;
}
.red-theme .card {
  background: #fff;
  border: 2px solid #bbb;
  color: rgb(226, 2, 255);
}
.red-theme .card:hover {
  background: #e0ffe0;
  border-color: #0c0;
  color: #222;
}
.social-bar {
  display: flex;
  justify-content: center;
  gap: 1em;
  margin-bottom: 1em;
  font-family: monospace;
}

.social-bar a {
  background: #0f0;
  color: #000;
  padding: 5px 10px;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  box-shadow: 0 0 5px #0f0;
  transition: 0.2s;
}

.social-bar a:hover {
  background: #333;
  color: #0f0;
  box-shadow: 0 0 10px #0f0;
}

body {
  background: #111;
  color: #eee;
  font-family: monospace;
  text-align: center;
  padding: 2em;
}

h1 {
  font-size: 2em;
  margin-bottom: 1em;
}

.grid {
  display: flex;
  justify-content: center;
  gap: 1em;
  flex-wrap: wrap;
}

.card {
  background: #222;
  border: 2px solid #444;
  padding: 1em 2em;
  text-decoration: none;
  color: #0f0;
  font-weight: bold;
  transition: 0.2s;
}

.card:hover {
  background: #333;
  border-color: #0f0;
  color: #fff;
}

/* Clever-like theme: clean blue header, white cards, sans-serif UI */
.clever-theme {
  background: linear-gradient(180deg, #e9f2fb 0%, #f8fbff 100%);
  color: #0b2545;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
}
.clever-header {
  background: linear-gradient(90deg,#0d6efd,#0b5ed7);
  color: #fff;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 10px rgba(11,37,69,0.12);
  border-bottom: 1px solid rgba(11,37,69,0.08);
}
.clever-header .brand {
  display:flex;align-items:center;gap:12px;font-weight:700;font-size:1.05rem;
}
.clever-header .brand .logo-dot{
  width:34px;height:34px;border-radius:6px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,0.08);display:inline-block;
}
.clever-theme .social-bar { justify-content:flex-end; gap:0.5em; margin:0; padding-right:20px }
.clever-theme .social-bar a { background: transparent; color: #fff; padding:6px 10px; box-shadow:none; border-radius:6px; border:1px solid rgba(255,255,255,0.08); font-weight:600 }
.clever-theme .social-bar a:hover { background: rgba(255,255,255,0.06); color:#fff; box-shadow:none }
.clever-theme .grid { gap:1rem; }
.clever-theme .card {
  background: #fff;
  border: 1px solid rgba(11,37,69,0.06);
  color: #0b2545;
  box-shadow: 0 6px 18px rgba(11,37,69,0.06);
  border-radius: 8px;
}
.clever-theme .card:hover {
  background: #f6fbff;
  border-color: rgba(11,93,215,0.12);
  color: #05203a;
  transform: translateY(-4px);
}
.clever-theme h1, .clever-theme h2, .clever-theme h3 { color: #05203a }
.clever-theme input, .clever-theme select, .clever-theme button {
  font-family: inherit; border-radius:6px; outline:none;
}
.clever-theme #searchBar { border:1px solid rgba(11,37,69,0.12); background:#fff }
.clever-theme #loginBtn, .clever-theme #saveUser, .clever-theme #saveSettings, .clever-theme #downloadUser, .clever-theme #themeToggle {
  background: linear-gradient(180deg,#0d6efd,#0b5ed7); color:#fff; border:none; box-shadow:0 6px 14px rgba(11,93,215,0.14);
}

/* small responsive tweak */
@media (max-width:720px){
  .clever-header{padding:12px}
  .clever-header .brand{font-size:0.95rem}
}