:root {
  --primary: #20c997;
  --hover: #138d75;
  --navy: #001f3f;
  --dark-navy: #001737;
  --gray-bg: #f4f4f4;
  --white: #ffffff;
  --dark-bg: #1f1f1f;
  --dark-card: #2c2c2c;
  --light-text: #f0f0f0;
  --muted: #aaa;

  /* Theme skin switcher colors */
  --theme-yellow: #f9c74f;
  --theme-purple: #9b5de5;
  --theme-orange: #f9844a;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: var(--gray-bg);
  color: #333;
  transition: background 0.3s, color 0.3s;
}

.container {
  max-width: 600px;
  margin: auto;
  padding: 2rem;
}

.brand-title {
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  background: linear-gradient(to right, #20c997, #001f3f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

input[type="text"], select {
  width: 100%;
  padding: 0.5rem;
  margin: 0.4rem 0;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 1rem;
}

button {
  cursor: pointer;
  margin-top: 0.5rem;
  font-size: 1rem;
}

/* Improved button appearance */
.vote-btn, #add-option, #generate-poll, .reset-btn {
  background: var(--primary);
  color: white;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: background 0.3s ease, transform 0.1s ease;
}

.vote-btn:hover, #add-option:hover, #generate-poll:hover, .reset-btn:hover {
  background: var(--hover);
  transform: scale(1.02);
}

.poll-widget {
  background: var(--white);
  border-radius: 12px;
  padding: 1.5rem;
  margin-top: 2rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.bar-container div {
  position: relative;
  margin: 6px 0;
  background: var(--primary);
  color: white;
  padding: 0.4rem 0.6rem;
  border-radius: 5px;
  transition: width 0.6s ease;
  min-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar-container div:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  top: -28px;
  left: 0;
  background: var(--dark-navy);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.85rem;
  white-space: nowrap;
  z-index: 10;
}

.bar-zero {
  background: var(--muted);
  opacity: 0.5;
}

.toggle-mode {
  margin-top: 1.5rem;
  background: var(--navy);
  color: white;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  width: 100%;
}

.toggle-mode:hover {
  background: var(--dark-navy);
}

.hidden {
  display: none;
}

.dark {
  background: var(--dark-bg);
  color: var(--light-text);
}

.dark .poll-widget {
  background: var(--dark-card);
}

.dark .toggle-mode {
  background: var(--primary);
  color: black;
}

.layout-horizontal label {
  display: inline-block;
  margin-right: 1rem;
}

.layout-compact label {
  display: inline;
  margin-right: 0.5rem;
}

/* Theme skins */
.theme-yellow .poll-widget,
.theme-yellow .vote-btn,
.theme-yellow #add-option,
.theme-yellow #generate-poll,
.theme-yellow .reset-btn {
  background: var(--theme-yellow);
}

.theme-purple .poll-widget,
.theme-purple .vote-btn,
.theme-purple #add-option,
.theme-purple #generate-poll,
.theme-purple .reset-btn {
  background: var(--theme-purple);
}

.theme-orange .poll-widget,
.theme-orange .vote-btn,
.theme-orange #add-option,
.theme-orange #generate-poll,
.theme-orange .reset-btn {
  background: var(--theme-orange);
}

@media (max-width: 600px) {
  .container {
    padding: 1rem;
  }

  input, select, button {
    font-size: 1rem;
  }

  .vote-btn, #add-option, #generate-poll, .reset-btn, .toggle-mode {
    width: 100%;
    font-size: 1rem;
  }

  .layout-horizontal label,
  .layout-compact label {
    display: block;
    margin-bottom: 0.4rem;
  }
}