:root {
  --glass-bg: rgba(255, 255, 255, 0);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-blur: 10px;
}

select option {
  background: #1a2980;
  color: white;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  cursor: pointer;
}

body {
  font-family: "Inter", sans-serif;
  min-height: 100vh;
  background-image: url("../BackgroundImages/DreamForest2.webp");
  /* padding: 2rem; */
  padding: 20px 20px;
  color: white;
  background-size: cover;
  overflow: auto;
  background-position: center;
  background-attachment: fixed;
  transition: background-image 0.3s ease;
}

.Main-container {
  /* width: 100vw; */
  width: 100%;
  /* max-width: 1900px; */
  /* max-width: 1024px; */
  /* min-width: 1024; */
  margin: 0 auto;
  overflow: visible;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 390px), 1fr));
  grid-auto-rows: minmax(200px, auto);
  gap: 2rem;
  width: 100%;
  /* gap: 20px; */
  /* max-width: 1400px; */
  /* max-width: 100%; */
  margin: 0 auto;
  position: relative;
}

/* Widget size modifiers */
.widget {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: 5px;
  padding: 1.5rem;
  transition: all 0.3s ease;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
  cursor: move;
  min-width: 380px;
  /* min-width: auto; */
  width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
  grid-column: span 1;
}

.widget:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.45);
}

.widget-header {
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0px auto;
  margin-bottom: 2rem;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
  border-radius: 5px;
  padding: 1rem;
  min-width: 380px;
  width: 100%;
  grid-column: 1 / -1;
}

.header-actions-left {
  display: flex;
  gap: 0.5rem;
  margin-right: 1rem;
}

.header-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  /* border-radius: 5px; */
  color: white;
  padding: 0.5rem;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: all 0.3s ease;
}

.header-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.search-profile {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 0 1 600px;
  /* Changed from flex: 1 to flex: 0 1 600px */
  max-width: 600px;
  justify-content: center;
  /* Added this line */
}

.profile-picture {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.profile-picture:hover {
  opacity: 0.8;
}

.profile-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-picture svg {
  width: 24px;
  height: 24px;
  fill: white;
}

.search-bar {
  flex: 1;
  width: 100%;
  padding: 0.8rem 1.2rem;
  border-radius: 30px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.1);
  color: white;
  outline: none;
  transition: all 0.3s ease;
  box-shadow: 0 0 0 rgba(255, 255, 255, 0.1);
}

.search-bar:hover,
.search-bar:focus {
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

.search-bar::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.todo-input-wrapper {
  display: flex;
  gap: 5px;
  margin-bottom: 0.5rem;
}

.todo-input {
  flex: 1;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: 0.3rem;
  color: white;
}

.todo-add-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
  cursor: pointer;
  border-radius: 0.3rem;
  width: 2.5rem;
  user-select: none;
  transition: background 0.3s ease;
}

.todo-input,
.todo-add-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

.todo-input,
.todo-add-btn:focus {
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

.todo-list {
  list-style: none;
}

.todo-list {
  max-height: 300px;
  overflow-y: auto;
  padding-right: 5px;
}

.todo-list::-webkit-scrollbar {
  width: 8px;
}

.todo-list::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

.todo-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.todo-item {
  display: flex;
  align-items: flex-start;
  /* Align checkbox to top of text */
  gap: 0.5rem;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 0.3rem;
  color: white;
  word-break: break-word;
  white-space: normal;
  margin-bottom: 5px;
}

.todo-item span {
  flex: 1;
  word-break: break-word;
  white-space: normal;
}

.todo-item input[type="checkbox"] {
  margin-right: 0.5rem;
}

.clock {
  font-size: 2.5rem;
  text-align: center;
  font-weight: 300;
}

.date {
  text-align: center;
  margin-top: 0.5rem;
  font-size: 1.1rem;
  opacity: 0.8;
}

.quick-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  max-width: 100%;
  overflow: auto;
  max-height: 400px;
  padding: 10px;
}

.quick-links::-webkit-scrollbar {
  width: 8px;
}

.quick-links::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

.quick-links::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.quick-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 0.3rem;
  text-decoration: none;
  color: white;

  /* Allow text to wrap and break long words */
  white-space: normal;
  word-break: break-word;
}

.add-link-btn {
  padding: 0.3rem 0.6rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 3px;
  color: white;
  cursor: pointer;
}

.add-YTlink-btn {
  padding: 0.3rem 0.6rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 3px;
  color: white;
  cursor: pointer;
}

.remove-link {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  opacity: 0.7;
  font-size: 1.2rem;
  padding: 0 0.5rem;

  /* Prevent shrinking and wrapping */
  flex-shrink: 0;
  white-space: nowrap;
}

.remove-link:hover {
  opacity: 1;
}

.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  overflow: auto;
  padding: 2rem 1rem;
  /* Padding to allow spacing from top/bottom on scroll */
  box-sizing: border-box;
}

/* Customize the scrollbar for Webkit-based browsers (Chrome, Safari, etc.) */
.modal::-webkit-scrollbar {
  width: 10px;
  /* Set the width of the scrollbar */
}

.modal::-webkit-scrollbar-thumb {
  /* background: var(--glass-border); */
  background-color: #26d0ce;
  border-radius: 10px;
  /* Rounded corners for the thumb */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  /* Shadow effect */
  border: 3px solid var(--glass-color);
  /* Optional: adds a glass-like effect */
}

.modal::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  /* Light glass effect on the track */
  border-radius: 10px;
}

.modal-content {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: 5px;
  padding: 1.5rem;
  min-width: 300px;
  max-width: 820px;
  margin: auto;
  /* This centers the modal horizontally */
  box-sizing: border-box;
}

.modal-input {
  width: 100%;
  padding: 0.5rem;
  margin: 0.5rem 0;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 3px;
  color: white;
}

.modal-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
}

.modal-btn {
  padding: 0.5rem 1rem;
  border-radius: 3px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  color: white;
}

.note-controls {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 10px;
  align-items: center;
  flex-direction: row;
}

.note-title-input {
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 5px;
  color: white;
  flex: 1;
  min-width: 120px;
}

.note-select {
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 5px;
  color: white;
  width: 100px;
}

.note-select option {
  background: #1a2980;
  color: white;
}

.note-btn {
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 3px;
  color: white;
  cursor: pointer;
  transition: background 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
}

.note-btn i {
  font-size: 1rem;
  pointer-events: none;
}

.note-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.note-btn i.active-save {
  color: #26d0ce;
  /* Bootstrap Blue */
}

.note-btn i.active-delete {
  color: #e57373;
  /* Pale red */
}

.notes-area {
  width: 100%;
  height: 300px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 0.5rem;
  padding: 0.5rem;
  color: white;
  resize: none;
}

/* Required to make scrollbar visible */
.notes-area::-webkit-scrollbar {
  width: 12px;
}

/* Scroll thumb (the draggable part) */
.notes-area::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  border: 3px solid var(--glass-color);
}

/* Scroll track (the background) */
.notes-area::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

.weather-widget {
  text-align: center;
}

.weather-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

.weather-temp {
  font-size: 2.5rem;
  font-weight: 300;
}

.weather-details {
  text-align: left;
  font-size: 0.9rem;
}

.calendar-widget {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
  margin-top: 1rem;
}

.calendar-day {
  text-align: center;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.calendar-day.today {
  background: rgba(255, 255, 255, 0.3);
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  text-align: center;
  font-weight: 500;
}

.calendar-header {
  text-align: center;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.news-widget {
  max-height: 400px;
  padding: 10px;
  overflow-y: auto;
}

/* Customize the scrollbar for Webkit-based browsers (Chrome, Safari, etc.) */
.news-widget::-webkit-scrollbar {
  width: 12px;
  /* Set the width of the scrollbar */
}

.news-widget::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  /* Glassy border for thumb */
  border-radius: 10px;
  /* Rounded corners for the thumb */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  /* Shadow effect */
  border: 3px solid var(--glass-color);
  /* Optional: adds a glass-like effect */
}

.news-widget::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  /* Light glass effect on the track */
  border-radius: 10px;
}

#newsCategory {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 3px;
  color: white;
  padding: 0.3rem;
  font-size: 0.8rem;
}

#newsCategory option {
  background: #1a2980;
  color: white;
}

.news-item {
  padding: 1rem;
  border-bottom: 1px solid var(--glass-border);
  transition: background-color 0.2s;
}

.news-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.news-item a {
  color: white;
  text-decoration: none;
}

.news-item:last-child {
  border-bottom: none;
}

.news-date {
  font-size: 0.8rem;
  opacity: 0.7;
  margin-top: 0.5rem;
}

.settings-widget {
  display: grid;
  gap: 1rem;
  height: 100%;
  max-height: 400px;
  overflow: auto;
  padding: 20px;
}

.settings-widget::-webkit-scrollbar {
  width: 8px;
}

.settings-widget::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

.settings-widget::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.toggle-switch {
  position: relative;
  width: 50px;
  height: 24px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.1);
  transition: 0.4s;
  border-radius: 24px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked+.slider {
  background-color: #26d0ce;
}

input:checked+.slider:before {
  transform: translateX(26px);
}

.bg-upload {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 5px;
  padding: 0.5rem;
  color: white;
}

.bg-select {
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 5px;
  color: white;
  width: 150px;
}

.bg-select option {
  background: #1a2980;
  color: white;
}

.LanguageSelect {
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 5px;
  color: white;
  width: 150px;
}

.bg-select option {
  background: #1a2980;
  color: white;
}

.widget:nth-child(2) {
  justify-content: center;
  padding: 2rem;
}

.widget:nth-child(2) .widget-header {
  width: 100%;
  text-align: center;
}

.widget:nth-child(2) .search-bar {
  width: 100%;
  max-width: 400px;
  margin: 1rem auto;
}

.media-player {
  width: 100%;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.2);
}

.media-widget,
.game-widget {
  min-height: 300px;
}

.media-widget iframe,
.game-widget iframe {
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.2);
}

.media-iframe-container {
  max-height: 400px;
  /* Adjust height as needed */
  overflow-y: auto;
  /* vertical scroll */
  padding: 10px;
  /* space for scrollbar */
}

.media-iframe-container::-webkit-scrollbar {
  width: 8px;
}

.media-iframe-container::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

.media-iframe-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  padding-right: 10px;
  max-height: 400px;
  overflow: auto;
}

.gallery-grid::-webkit-scrollbar {
  width: 8px;
}

.gallery-grid::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

.gallery-grid::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.gallery-grid img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 5px;
  transition: transform 0.3s ease;
}

.gallery-grid img:hover {
  transform: scale(1.05);
}

.calculator-widget {
  min-height: 400px;
}

.calculator {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.calc-display {
  width: 100%;
  padding: 1rem;
  font-size: 1.5rem;
  text-align: right;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 5px;
  color: white;
}

.calc-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}

.calc-btn {
  padding: 1rem;
  font-size: 1.2rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 5px;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.calc-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.calc-btn.operator {
  background: rgba(38, 208, 206, 0.2);
}

.calc-btn.equals {
  grid-column: span 4;
  background: rgba(38, 208, 206, 0.3);
}

.calc-btn.clear {
  background: rgba(255, 99, 71, 0.2);
}

input[type="file"] {
  max-width: 200px;
}

.opacity-slider {
  width: 100px;
  height: 4px;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  outline: none;
}

.opacity-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #26d0ce;
  cursor: pointer;
}

.opacity-value {
  min-width: 40px;
  text-align: right;
}

.blur-value {
  min-width: 40px;
  text-align: right;
}

.music-player {
  text-align: center;
}

.music-controls {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin: 1rem 0;
}

.music-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  /* Control icon size */
  line-height: 1;
  /* Prevent vertical shift */
  text-align: center;
}

.playlist {
  text-align: left;
  margin-top: 1rem;
  max-height: 300px;
  overflow: auto;
  padding: 10px;
}

.playlist-item {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  border-bottom: 1px solid var(--glass-border);
  gap: 1rem;
}

/* Let the text wrap and grow, pushing the button to the edge */
.playlist-item {
  flex-wrap: nowrap;
  white-space: normal;
  word-break: break-word;
}

.playlist-item .remove-music {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  opacity: 0.7;
  font-size: 1.2rem;
  padding: 0 0.5rem;
  flex-shrink: 0;
  white-space: nowrap;
  align-self: flex-start;
  /* 👈 Fixes vertical position */
  margin-left: auto;
  /* 👈 Pushes it to the right */
}

.playlist-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.playlist::-webkit-scrollbar {
  width: 8px;
}

.playlist::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

.playlist::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.google-apps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: 1rem;
  overflow: auto;
  max-height: 400px;
}

.google-app-icon {
  width: 30px;
  height: 30px;
  margin-bottom: 5px;
  filter: brightness(0) invert(1);
  /* Turns black SVGs white */
}

.google-apps-grid::-webkit-scrollbar {
  width: 8px;
}

.google-apps-grid::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

.google-apps-grid::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.google-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: white;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.google-app:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.google-app i {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.google-app span {
  font-size: 0.9rem;
}

.pomodoro-widget {
  text-align: center;
}

.pomodoro-timer {
  font-size: 3rem;
  margin: 1rem 0;
}

.pomodoro-controls {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.pomodoro-btn {
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 3px;
  color: white;
  cursor: pointer;
}

/* Stopwatch Widget Styles */
.stopwatch-display {
  font-size: 2.5rem;
  text-align: center;
  margin: 1rem 0;
}

.stopwatch-controls {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 1rem;
}

.stopwatch-btn {
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 3px;
  color: white;
  cursor: pointer;
}

.lap-times {
  max-height: 150px;
  overflow-y: auto;
  font-family: monospace;
}

.countdown-widget {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.countdown-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.countdown-input,
.countdown-datetime {
  width: 100%;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 3px;
  color: white;
}

.countdown-btn {
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 3px;
  color: white;
  cursor: pointer;
  transition: background 0.3s ease;
}

.countdown-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.countdown-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 300px;
  overflow-y: auto;
  padding: 10px;
}

.countdown-item {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 3px;
  padding: 0.8rem;
}

.countdown-item-header {
  display: flex;
  flex-wrap: wrap;
  /* allow items to break to new line */
  justify-content: space-between;
  align-items: flex-start;
  /* align top of each item */
  gap: 0.5rem;
  /* space between items when wrapped */
  margin-bottom: 0.5rem;
}

.countdown-item-name {
  font-weight: 500;
  flex: 1 1 100%;
  /* take full width and allow wrapping */
  word-break: break-word;
  white-space: normal;
}

.countdown-item-time {
  font-size: 1.2rem;
  text-align: center;
  font-family: monospace;
}

.countdown-remove {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  opacity: 0.7;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.countdown-remove:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
}

.countdown-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 300px;
  overflow-y: auto;
}

.countdown-list::-webkit-scrollbar {
  width: 8px;
}

.countdown-list::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

.countdown-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.countdown-item {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 3px;
  padding: 0.8rem;
}

/* New Widget Styles */
.world-clock-widget select,
.currency-converter-widget select,
.currency-converter-widget input {
  width: 100%;
  padding: 0.5rem;
  margin: 0.5rem 0;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 3px;
  color: white;
}

.world-clock {
  padding: 0.5rem;
  margin: 0.5rem 0;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.world-clocks {
  padding: 10px;
  overflow: auto;
  max-height: 400px;
}

.world-clocks::-webkit-scrollbar {
  width: 8px;
}

.world-clocks::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

.world-clocks::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.apps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 3 columns */
  gap: 1rem;
  /* Spacing between items */
  padding: 10px;
  overflow: auto;
  max-height: 400px;
}

.apps-grid::-webkit-scrollbar {
  width: 8px;
}

.apps-grid::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

.apps-grid:-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.app-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: white;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.1);
  /* Match the Google Apps Widget */
  border-radius: 8px;
  transition: all 0.3s ease;
}

.app-link:hover {
  background: rgba(255, 255, 255, 0.2);
  /* Slightly lighter on hover */
  transform: translateY(-2px);
  /* Lift on hover */
}

.app-link i {
  font-size: 1.5rem;
  /* Match the icon size of Google Apps Widget */
  margin-bottom: 0.5rem;
  color: white;
  transition: all 0.3s ease;
}

.app-link:hover i {
  color: white;
  /* Keep it white but add subtle polish */
}

.app-link span {
  font-size: 0.9rem;
  /* Match Google Apps text size */
  color: white;
  /* White text for consistency */
}

.games-widget {
  grid-column: 1 / -1;
  padding: 1.5rem;
}

.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  grid-auto-rows: minmax(200px, auto);
  gap: 20px;
  padding: 15px;
}

.game-card {
  padding: 0.5rem;
  margin: 0.5rem 0;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 3px;
  color: white;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s;
  cursor: pointer;
}

.game-card:hover {
  transform: translateY(-5px);
}

.game-thumbnail {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
}

.game-info {
  padding: 15px;
}

.game-title {
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 5px;
}

.game-description {
  font-size: 0.9rem;
  color: white;
}

.game-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.game-container {
  position: relative;
  width: 90%;
  height: 90%;
  background: white;
  border-radius: 8px;
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  background: white;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.game-frame {
  width: 90%;
  height: 90%;
  border: none;
  border-radius: 8px;
}

.games-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 1rem;
}

.widget-header {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.games-search {
  width: 100%;
  max-width: 500px;
  padding: 0.8rem 1.2rem;
  border-radius: 30px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.1);
  color: white;
  outline: none;
  transition: all 0.3s ease;
  text-align: center;
}

.games-search:focus {
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

.pagination-controls {
  margin-top: 20px;
}

.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3px;
}

.page-button {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid var(--glass-border);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
  color: white;
  border: none;
  padding: 10px;
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.page-button.active,
.page-button:focus {
  background: rgba(255, 255, 255, 0.5);
}

.page-button:hover {
  background: rgba(255, 255, 255, 0.3);
}

.search-profile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex: 1;
  max-width: 600px;
  margin: 0 auto;
}

.profile-picture {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--glass-border);
  /* position: absolute;
        left: 20px;
        top: 50%;
        transform: translateY(-50%); */
}

.profile-picture svg {
  width: 24px;
  height: 24px;
  fill: white;
}

.fullscreen-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  /* border-radius: 5px; */
  border-radius: 50%;
  color: white;
  padding: 0.5rem;
  cursor: pointer;
  margin-left: 1rem;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.fullscreen-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.fullscreen-btn i {
  font-size: 1.2rem;
}

:fullscreen .fullscreen-btn i,
:-webkit-full-screen .fullscreen-btn i {
  content: "\f066";
}

.reset-button {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 5px;
  color: white;
  padding: 0.5rem;
  cursor: pointer;
  margin-left: 1rem;
  transition: all 0.3s ease;
}

.remove-widget-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  opacity: 0.6;
  padding: 0.25rem;
  transition: opacity 0.2s ease-in-out;
  z-index: 10;
}

.remove-widget-btn:hover {
  opacity: 1;
}

.AddNew-widget-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 5px;
  color: white;
  padding: 0.5rem;
  cursor: pointer;
  margin-left: 1rem;
  transition: all 0.3s ease;
}

.Subscribe-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 5px;
  color: white;
  padding: 0.5rem;
  cursor: pointer;
  margin-left: 1rem;
  transition: all 0.3s ease;
}

.youtube-video-item,
.app-item-wrapper {
  position: relative;
}

.item-remove-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  z-index: 5;
  opacity: 0.7;
  transition: all 0.2s;
}

.item-remove-btn:hover {
  opacity: 1;
  background: rgba(200, 0, 0, 0.8);
}

.speech-to-text-btn,
.manual-search-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.speech-to-text-btn:hover,
.manual-search-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.speech-to-text-btn.listening {
  background: #26d0ce;
  animation: pulse 1.5s infinite;
}

.speech-to-text-btn i {
  font-size: 1.1rem;
}

.manual-search-btn i {
  font-size: 1.1rem;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(38, 208, 206, 0.7);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(38, 208, 206, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(38, 208, 206, 0);
  }
}

/* Battery Widget */
.battery-widget .widget-header {
  margin-bottom: 2rem;
}

.battery-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.battery-icon {
  width: 100px;
  height: 50px;
  border: 2px solid var(--glass-border);
  border-radius: 8px;
  position: relative;
  padding: 4px;
}

.battery-icon::after {
  content: "";
  position: absolute;
  right: -10px;
  top: 12.5px;
  width: 6px;
  height: 25px;
  background: var(--glass-border);
  border-radius: 0 4px 4px 0;
}

.battery-level {
  height: 100%;
  width: 75%;
  /* default */
  background-color: #4caf50;
  border-radius: 4px;
  transition: width 0.5s ease, background-color 0.5s ease;
}

.battery-charging-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 0 5px black;
}

.battery-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.battery-percentage {
  font-size: 2rem;
  font-weight: 500;
}

.battery-status {
  font-size: 1rem;
  opacity: 0.8;
}

/* Usage Stats Widget */
.usage-stats-widget .stats-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.usage-stats-widget .stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  padding: 0.75rem 1rem;
  border-radius: 4px;
}

.usage-stats-widget .stat-item span:first-child {
  opacity: 0.8;
}

.usage-stats-widget .stat-item span:last-child {
  font-weight: 500;
}

/* Device Info Widget */
.device-info-widget .stats-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.device-info-widget .stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  padding: 0.75rem 1rem;
  border-radius: 4px;
}

.device-info-widget .stat-item span:first-child {
  opacity: 0.8;
}

.device-info-widget .stat-item span:last-child {
  font-weight: 500;
}

/* AI Chatbot Widget */
.chatbot-widget {
  display: flex;
  flex-direction: column;
  min-height: 450px;
}

.chatbot-messages {
  flex-grow: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 400px;
}

.chatbot-messages::-webkit-scrollbar {
  width: 8px;
}

.chatbot-messages::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

.chatbot-messages::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.chatbot-message {
  padding: 0.75rem 1rem;
  border-radius: 1rem;
  max-width: 85%;
  word-wrap: break-word;
  line-height: 1.4;
}

.chatbot-message.user-message {
  background: rgba(38, 208, 206, 0.3);
  align-self: flex-end;
  border-bottom-right-radius: 0.25rem;
}

.chatbot-message.ai-message {
  background: rgba(255, 255, 255, 0.15);
  align-self: flex-start;
  border-bottom-left-radius: 0.25rem;
}

.chatbot-message.thinking {
  font-style: italic;
  opacity: 0.8;
}

.chatbot-input-area {
  display: flex;
  gap: 0.5rem;
  padding: 1rem;
  border-top: 1px solid var(--glass-border);
  margin-top: auto;
}

.chatbot-input {
  flex-grow: 1;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 2rem;
  color: white;
  outline: none;
}

.chatbot-input:focus {
  background: rgba(255, 255, 255, 0.2);
}

.chatbot-send-btn {
  background: #26d0ce;
  border: none;
  color: white;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.chatbot-send-btn:hover {
  background: #21b8b5;
}

.chatbot-send-btn:disabled {
  background: rgba(255, 255, 255, 0.2);
  cursor: not-allowed;
}

.encryptor-widget,
.compressor-widget,
.recorder-widget {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Hardware & Browser Info Widget */
.hardware-info-widget .stats-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hardware-info-widget .stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  padding: 0.75rem 1rem;
  border-radius: 4px;
}

.hardware-info-widget .stat-item span:first-child {
  opacity: 0.8;
}

.hardware-info-widget .stat-item span:last-child {
  font-weight: 500;
}

/* Site Locker & Blocker Widgets */
.site-locker-widget,
.site-blocker-widget {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.site-locker-widget input,
.site-locker-widget select,
.site-blocker-widget input,
.site-blocker-widget select {
  width: 100%;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 3px;
  color: white;
}

.site-locker-widget select option,
.site-blocker-widget select option {
  background: #1a2980;
  color: white;
}

.site-locker-main,
.site-blocker-main,
.site-locker-history,
.site-blocker-history {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.site-locker-history-list,
.site-blocker-history-list {
  list-style: none;
  max-height: 250px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-right: 0.5rem;
  /* for scrollbar */
}

.site-locker-history-item,
.site-blocker-history-item {
  background: rgba(255, 255, 255, 0.1);
  padding: 0.75rem;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.site-locker-history-item .url,
.site-blocker-history-item .url {
  word-break: break-all;
}

.site-locker-history-item .actions,
.site-blocker-history-item .actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.site-locker-history-item .actions button,
.site-blocker-history-item .actions button {
  padding: 0.3rem 0.6rem;
  font-size: 0.8rem;
}

.site-locker-history-item .change-password-form {
  display: none;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.site-locker-history-list::-webkit-scrollbar,
.site-blocker-history-list::-webkit-scrollbar {
  width: 8px;
}

.site-locker-history-list::-webkit-scrollbar-thumb,
.site-blocker-history-list::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 10px;
}

.site-locker-history-list::-webkit-scrollbar-track,
.site-blocker-history-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

/* Emoji Cursor Widget */
.emoji-cursor-widget {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.emoji-cursor-controls {
  display: flex;
  gap: 0.5rem;
}

.emoji-search-input {
  flex-grow: 1;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 3px;
  color: white;
}

.emoji-none-btn {
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 3px;
  color: white;
  cursor: pointer;
}

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 0.5rem;
  max-height: 300px;
  overflow-y: auto;
  padding: 0.5rem;
}

.emoji-grid::-webkit-scrollbar {
  width: 8px;
}

.emoji-grid::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

.emoji-item {
  font-size: 2rem;
  text-align: center;
  padding: 0.25rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

.emoji-item:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Profile Widget */
.profile-widget .profile-content {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  display: flex;
  flex-direction: column;
}

.profile-widget .profile-pic-container {
  flex-shrink: 0;
}

/* .profile-pic-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    } */

.profile-pic-container svg {
  width: 130px;
  height: 130px;
  fill: white;
  /* border-radius: 50%;
        border: 2px solid var(--glass-border); 
        color: white; */
}

.profile-widget .profile-widget-pic {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  /* border: 2px solid var(--glass-border); */
  color: white;
}

.profile-widget .profile-details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 15px;
}

.profile-details {
  width: 100%;
}

.profile-widget .profile-edit-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.profile-widget .header-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

.profile-widget .profile-edit-btn {
  padding: 0.3rem 0.6rem;
}

/* Advanced Stats Widget */
.advanced-stats-widget .stats-graphs {
  display: flex;
  flex-direction: column;
  height: calc(100% - 2.5rem);
  /* Adjust for header */
  gap: 1.5rem;
}

.advanced-stats-widget .graph-container {
  flex: 1;
  min-height: 150px;
  /* Ensure canvas has some height */
  display: flex;
  flex-direction: column;
}

.advanced-stats-widget .graph-container label {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  opacity: 0.8;
  text-align: center;
}

.advanced-stats-widget .chart-wrapper {
  position: relative;
  flex: 1;
  min-height: 0;
}

.advanced-stats-widget canvas {
  max-width: 100%;
}

.widget-interactions-widget {
  min-height: 400px;
  max-height: none;
  overflow: auto;
  transition: height 0.3s ease;
}

/* Aproximate Location Widget */
.live-location-widget .widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.live-location-widget .widget-header>div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.location-expand-btn {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0.25rem;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.location-expand-btn:hover {
  opacity: 1;
}

.minimap-container {
  height: calc(100% - 3rem);
  /* Adjust based on header height */
  min-height: 230px;
  width: 100%;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.location-modal .modal-content {
  width: 90vw;
  height: 90vh;
  max-width: 1200px;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.location-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0;
}

.location-modal-header h3 {
  font-weight: 500;
}

.location-modal-controls {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.location-modal-controls button {
  background: none;
  border: none;
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  opacity: 0.8;
  padding: 0.5rem;
  transition: opacity 0.2s;
}

.location-modal-controls button:hover {
  opacity: 1;
}

#mapModalCloseBtn {
  font-size: 1.8rem;
  font-weight: bold;
}

.fullmap-container {
  height: 100%;
  flex-grow: 1;
  background: #1a2980;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

/* Leaflet Overrides */
.leaflet-container {
  background-color: transparent !important;
  border-radius: inherit;
}

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
  background: var(--glass-bg) !important;
  color: white !important;
  border-radius: 4px !important;
  border: 1px solid var(--glass-border) !important;
}

.leaflet-control-zoom-in:hover,
.leaflet-control-zoom-out:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

.leaflet-control-layers {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 4px !important;
  color: white !important;
}

.leaflet-control-layers-selector {
  accent-color: #26d0ce;
}

/* Translator Widget */
.translator-widget .translator-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: calc(100% - 2.5rem);
}

.translator-widget .translator-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
}

.translator-widget .translator-lang-select {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 3px;
  color: white;
  padding: 0.5rem;
}

.translator-widget .translator-lang-select option {
  background: #1a2980;
  color: white;
}

.translator-widget .translator-textarea {
  width: 100%;
  flex-grow: 1;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 0.5rem;
  padding: 0.5rem;
  color: white;
  resize: none;
  font-family: "Inter", sans-serif;
}

.translator-widget .translator-mic-btn,
.translator-widget .translator-copy-btn {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.translator-widget .translator-mic-btn.listening {
  background: #26d0ce;
  animation: pulse 1.5s infinite;
}

/* QR Code Widget */
.qr-code-widget .qr-code-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.qr-code-widget .qr-code-output {
  margin-top: 1rem;
  background: white;
  padding: 1rem;
  border-radius: 5px;
  display: inline-block;
}

.qr-code-widget .qr-code-output canvas {
  display: block;
}

.qr-code-widget .qr-code-output img {
  display: block;
}

/* Secret Notes Widget */
.secret-notes-widget {
  display: flex;
  flex-direction: column;
}

.secret-notes-widget .secret-notes-main,
.secret-notes-widget .secret-notes-history {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex-grow: 1;
}

.secret-notes-widget .secret-notes-controls {
  display: flex;
  gap: 0.5rem;
}

.secret-notes-widget .secret-notes-history-list {
  list-style: none;
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.secret-notes-widget .secret-notes-history-item {
  background: rgba(255, 255, 255, 0.1);
  padding: 0.75rem;
  border-radius: 3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.secret-notes-widget .secret-notes-history-item:hover {
  background: rgba(255, 255, 255, 0.2);
}

.secret-notes-widget .secret-notes-viewer {
  margin-top: 1rem;
  border-top: 1px solid var(--glass-border);
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.secret-notes-history-list::-webkit-scrollbar {
  width: 8px;
}

.secret-notes-history-list::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

/* Speech To Text Widget */
.speech-to-text-widget .speech-to-text-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.speech-to-text-widget .speech-to-text-controls {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.speech-to-text-widget .speech-to-text-mic-btn.listening {
  background: #26d0ce;
  animation: pulse 1.5s infinite;
}

.converter-instructions {
  opacity: 0.9;
  margin-bottom: 1rem;
  text-align: center;
}

.file-converter-widget .converter-controls {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.file-converter-widget .bg-select.full-width,
.file-converter-widget .bg-upload.full-width {
  width: 100%;
  max-width: none;
}

.converter-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.converter-action-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  color: white;
  cursor: pointer;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: background 0.3s;
}

.converter-action-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

#convertBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

#downloadConvertedFile {
  display: none;
  /* managed by JS */
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* ============================================================
   FILE‑PREVIEW BLOCKS (shared by every converter widget)
   ============================================================ */
.file-preview-area {
  position: relative;
  min-height: 150px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  border: 2px dashed var(--glass-border);
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  /* click to re‑select file */
  text-align: center;
  transition: border-style 0.25s;
}

.file-preview-area.has-file {
  /* toggled via JS */
  border-style: solid;
}

/* --- Placeholder (shown before a file is picked) --- */
.file-preview-placeholder i {
  font-size: 2.4rem;
  display: block;
  margin-bottom: 0.4rem;
  color: rgba(255, 255, 255, 0.75);
}

.file-preview-placeholder span {
  opacity: 0.85;
  font-size: 0.9rem;
}

/* --- Image thumbnails (img) --- */
.file-preview-thumb {
  max-width: 100%;
  max-height: 250px;
  object-fit: contain;
  display: none;
  /* JS → display:block after load */
}

/* --- Audio & Video players --- */
.file-preview-player {
  /* <audio> or <video> */
  width: 100%;
  max-height: 250px;
  display: none;
}

.file-preview-player::-webkit-media-controls-enclosure {
  background: rgba(0, 0, 0, 0.15);
  /* match glass look */
}

/* --- Generic file info overlay --- */
.file-preview-info {
  position: absolute;
  bottom: 6px;
  left: 6px;
  background: rgba(0, 0, 0, 0.65);
  padding: 0.25rem 0.6rem;
  font-size: 0.8rem;
  border-radius: 3px;
  display: none;
  max-width: calc(100% - 60px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Remove/replace button --- */
.file-preview-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--glass-border);
  color: white;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.25s;
}

.file-preview-remove:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Optional: make <video> maintain 16:9 while shrinking */
.file-preview-area video {
  background: #000;
  object-fit: cover;
}

/* Page Editor Widget */
.page-editor-widget .page-editor-main,
.page-editor-widget .page-editor-history {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.page-editor-widget .editor-toggle-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.page-editor-widget .page-editor-history-list {
  list-style: none;
  max-height: 250px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-right: 0.5rem;
  /* for scrollbar */
}

.page-editor-history-list::-webkit-scrollbar {
  width: 8px;
}

.page-editor-history-list::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

/* Auth Modal */
.auth-modal-content {
  max-width: 90%;
  width: 900px;
  padding: 2rem;
}

.auth-view {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.auth-view.hidden {
  display: none;
}

.auth-modal-header {
  text-align: center;
  margin-bottom: 1rem;
}

.auth-modal-header h3 {
  font-size: 1.5rem;
  font-weight: 500;
}

.auth-modal-header p {
  opacity: 0.8;
  margin-top: 0.25rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group-row {
  display: flex;
  gap: 1rem;
}

.form-group-row .form-group {
  flex: 1;
}

.form-group label {
  font-size: 0.9rem;
  opacity: 0.9;
}

.password-group {
  position: relative;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  opacity: 0.7;
  padding: 0.25rem;
}

.radio-group {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  padding-top: 0.25rem;
}

.auth-link {
  color: #26d0ce;
  text-decoration: none;
  cursor: pointer;
  font-size: 0.9rem;
}

.auth-link:hover {
  text-decoration: underline;
}

.google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  color: white;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.3s;
}

.google-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.google-btn i {
  font-size: 1.2rem;
}

.divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8rem;
  margin: 0.5rem 0;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--glass-border);
}

.divider:not(:empty)::before {
  margin-right: 0.5em;
}

.divider:not(:empty)::after {
  margin-left: 0.5em;
}

.signup-profile-pic {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.signup-profile-pic img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  /* border: 2px solid var(--glass-border); */
}

.signup-profile-pic button {
  font-size: 0.9rem;
}

.search-engine-selector {
  position: relative;
  flex-shrink: 0;
}

.selected-engine {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.selected-engine:hover {
  background: rgba(255, 255, 255, 0.2);
}

.selected-engine i {
  font-size: 1.1rem;
}

.engine-option img,
.selected-engine img {
  width: 20px;
  height: 20px;
  margin-right: 0px auto;
  vertical-align: middle;
}

.engine-options {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: 5px;
  padding: 0.5rem;
  z-index: 1001;
  width: 180px;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
}

.engine-options.show {
  display: block;
}

.engine-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.2s;
}

.engine-option:hover {
  background: rgba(255, 255, 255, 0.1);
}

.engine-option i {
  font-size: 1.1rem;
  width: 20px;
  text-align: center;
}

/* Affiliate Marketing Widget */
.affiliate-widget .widget-header {
  margin-bottom: 1.5rem;
}

.affiliate-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.affiliate-main {
  display: flex;
  padding: 10px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.05);
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.affiliate-commission {
  text-align: center;
  padding: 1rem;
  /* background: rgba(255, 255, 255, 0.05); */
  border-radius: 5px;
  flex-shrink: 0;
}

.commission-value {
  font-size: 1.5rem;
  font-weight: 500;
  color: #26d0ce;
}

.commission-label {
  font-size: 0.8rem;
  opacity: 0.8;
}

.affiliate-stats {
  text-align: center;
  flex-grow: 1;
}

.affiliate-earnings {
  font-size: 2.5rem;
  font-weight: 500;
}

.affiliate-referrals {
  font-size: 1rem;
  opacity: 0.8;
  margin-top: 0.25rem;
}

.paypal-btn {
  background: rgba(0, 92, 185, 0.7);
  /* PayPal blue */
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  border-radius: 5px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  text-decoration: none;
  transition: background 0.3s;
  flex-shrink: 0;
}

.paypal-btn:hover {
  background: rgba(0, 92, 185, 1);
}

.affiliate-link-container {
  display: flex;
  gap: 0.5rem;
}

.affiliate-link-container input {
  flex-grow: 1;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 3px;
  color: white;
  font-family: monospace;
}

.copy-link-btn {
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 3px;
  color: white;
  cursor: pointer;
  transition: background 0.3s;
}

.copy-link-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.affiliate-payout-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--glass-border);
  flex-wrap: wrap;
}

.payout-detail-item {
  text-align: center;
  flex-grow: 1;
}

.payout-detail-item span {
  font-size: 0.8rem;
  opacity: 0.8;
  display: block;
}

.payout-detail-item strong {
  font-size: 1.1rem;
  font-weight: 500;
}

.payout-btn {
  background: rgba(38, 208, 206, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  padding: 0.75rem 1rem;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  transition: background 0.3s;
  flex-grow: 2;
  justify-content: center;
}

.payout-btn:hover {
  background: rgba(38, 208, 206, 1);
}

.payout-btn:disabled {
  background: rgba(255, 255, 255, 0.2);
  cursor: not-allowed;
  opacity: 0.7;
}

.payout-btn i {
  font-size: 1.1rem;
}

.payout-btn span {
  line-height: 1;
}

.news-widget {
  max-height: 300px;
  overflow-y: auto;
}

/* Customize the scrollbar for Webkit-based browsers (Chrome, Safari, etc.) */
.news-widget::-webkit-scrollbar {
  width: 12px;
  /* Set the width of the scrollbar */
}

.news-widget::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  /* Glassy border for thumb */
  border-radius: 10px;
  /* Rounded corners for the thumb */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  /* Shadow effect */
  border: 3px solid var(--glass-color);
  /* Optional: adds a glass-like effect */
}

/*.news-widget::-webkit-scrollbar-thumb:hover {
      background: var(--gradient-primary); 
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); 
    }*/

.news-widget::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  /* Light glass effect on the track */
  border-radius: 10px;
}

/*.news-widget::-webkit-scrollbar-track:hover {
       background: rgba(255, 255, 255, 0.2); 
    }*/

#newsCategory {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 3px;
  color: white;
  padding: 0.3rem;
  font-size: 0.8rem;
}

#newsCategory option {
  background: #1a2980;
  color: white;
}

.news-item {
  padding: 1rem;
  border-bottom: 1px solid var(--glass-border);
  transition: background-color 0.2s;
}

.news-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.news-item a {
  color: white;
  text-decoration: none;
}

.news-item:last-child {
  border-bottom: none;
}

.news-date {
  font-size: 0.8rem;
  opacity: 0.7;
  margin-top: 0.5rem;
}

/* Radio Widget */
.radio-widget .radio-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.radio-widget .now-playing-info {
  font-weight: 500;
  font-size: 1.1rem;
  text-align: center;
  min-height: 2.5em;
  /* To avoid layout shift */
  word-break: break-word;
}

.radio-widget .radio-visualizer-container {
  position: relative;
  width: 100%;
  height: 120px;
  /* taller */
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.radio-widget #radioVisualizer {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  /* fills container */
}

.radio-widget .radio-background-icon {
  position: absolute;
  top: 50%;
  /* adjust to add vertical padding */
  left: 50%;
  transform: translate(-50%, -50%);

  font-size: 4rem;
  /* smaller icon */
  color: rgba(255, 255, 255, 0.15);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.radio-widget .radio-controls {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

.radio-widget .radio-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  color: white;
  cursor: pointer;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: background 0.2s;
}

.radio-widget .radio-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.radio-widget .play-pause {
  width: 50px;
  height: 50px;
  font-size: 1.2rem;
}

.radio-widget .station-selector-container {
  width: 100%;
}

.radio-widget #stationSelector {
  width: 100%;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 5px;
  color: white;
}

.radio-widget #stationSelector option {
  background: #1a2980;
  color: white;
}

.radio-widget .volume-control-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  justify-content: center;
}

.radio-widget .volume-control-container .opacity-slider {
  flex-grow: 1;
}

.weather-widget {
  text-align: center;
  padding: 1rem;
  font-family: sans-serif;
  color: white;
}

.weather-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.5rem;
}

.weather-icon {
  font-size: 3rem;
  color: white;
}

.weather-temp {
  font-size: 2.5rem;
  font-weight: 600;
}

.weather-desc {
  font-size: 1.2rem;
  text-transform: capitalize;
  margin-top: 0.3rem;
}

.weather-location {
  font-size: 1rem;
  opacity: 0.8;
  margin: 0.3rem 0 1rem;
}

/* Weather Stats Section (2x2 grid) */
.weather-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  font-size: 0.95rem;
  margin-top: 1rem;
  text-align: left;
}

/* Stat Item Style */
.weather-details .stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  padding: 0.75rem 1rem;
  border-radius: 4px;
}

.weather-details .stat-item span:first-child {
  opacity: 0.8;
}

.weather-details .stat-item span:last-child {
  font-weight: 500;
}

/* Icon Color */
.weather-details i {
  color: white;
  margin-right: 0.5rem;
}

/* Memory Game Widget */
.memory-game-widget .memory-game-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.memory-game-info {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 1rem;
  font-weight: 500;
}

.memory-game-status {
  font-size: 1.1rem;
  font-weight: 500;
  min-height: 1.5em;
  text-align: center;
}

.memory-game-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1 / 1;
}

.memory-game-cell {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.1s ease-in-out;
}

.memory-game-cell.highlight {
  background: #26d0ce;
  box-shadow: 0 0 15px #26d0ce;
  transform: scale(1.05);
}

/* Math Quiz Widget */
.math-quiz-widget .quiz-setup,
.math-quiz-widget .quiz-main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.math-quiz-widget .quiz-main.hidden {
  display: none;
}

.math-quiz-widget .difficulty-select {
  padding: 10px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 3px;
  color: white;
}

.math-quiz-widget .quiz-stats {
  display: flex;
  justify-content: space-between;
  font-size: 1.1rem;
  font-weight: 500;
}

.math-quiz-widget .quiz-question {
  font-size: 2rem;
  text-align: center;
  margin: 1rem 0;
  font-weight: 300;
}

.math-quiz-widget .answer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.math-quiz-widget .answer-btn {
  padding: 10px 20px;
  font-size: 1.2rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 5px;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* .math-quiz-widget .answer-btn:hover {
        background: rgba(255, 255, 255, 0.2);
    } */

.math-quiz-widget .answer-btn.correct {
  background: #28a74680;
  border-color: #28a745;
}

.math-quiz-widget .answer-btn.incorrect {
  background: #dc354679;
  border-color: #dc3545;
}

.math-quiz-widget .answer-btn:disabled {
  cursor: not-allowed;
  opacity: 0.9;
}

/* .math-quiz-widget .answer-btn:disabled:hover {
        background: rgba(255, 255, 255, 0.1); 
    } */
.math-quiz-widget .answer-btn.correct:disabled,
.math-quiz-widget .answer-btn.incorrect:disabled {
  opacity: 1;
}

.math-quiz-widget .quiz-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.math-quiz-widget .quiz-control-btn {
  padding: 0.75rem;
  background: rgba(38, 208, 206, 0.7);
  border: 1px solid var(--glass-border);
  border-radius: 3px;
  color: white;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.3s;
}

.math-quiz-widget .quiz-control-btn.stop {
  background: rgba(220, 53, 69, 0.7);
  /* A red color for stop */
}

.math-quiz-widget .quiz-control-btn.stop:hover {
  background: rgba(220, 53, 69, 1);
}

.math-quiz-widget .quiz-start-btn,
.math-quiz-widget .quiz-stop-btn {
  padding: 0.75rem;
  background: rgba(38, 208, 206, 0.7);
  border: 1px solid var(--glass-border);
  border-radius: 3px;
  color: white;
  cursor: pointer;
  font-weight: 500;
}

/* Contact Us Widget */
.contact-us-widget .contact-us-body form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Motivational Quote Widget */
.motivational-quote-widget .quote-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 120px;
  /* Ensure a minimum height */
  gap: 1rem;
  margin-bottom: 1rem;
}

.motivational-quote-widget .quote-text {
  font-size: 1.2rem;
  font-style: italic;
  line-height: 1.5;
  text-align: center;
}

.motivational-quote-widget .quote-author {
  font-size: 1rem;
  font-weight: 500;
  text-align: right;
  opacity: 0.9;
}

.motivational-quote-widget .new-quote-btn {
  width: 100%;
}

.radio-widget .radio-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.radio-widget .now-playing-info {
  font-weight: 500;
  font-size: 1.1rem;
  text-align: center;
  min-height: 2.5em;
  /* To avoid layout shift */
  word-break: break-word;
}

.radio-widget .radio-visualizer-container {
  width: 100%;
  height: 80px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.radio-widget #radioVisualizer {
  width: 100%;
  height: 100%;
}

.radio-widget .radio-controls {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

.radio-widget .radio-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  color: white;
  cursor: pointer;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: background 0.2s;
}

.radio-widget .radio-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.radio-widget .play-pause {
  width: 50px;
  height: 50px;
  font-size: 1.2rem;
}

.radio-widget .station-selector-container {
  width: 100%;
}

.radio-widget #stationSelector {
  width: 100%;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 5px;
  color: white;
}

.radio-widget #stationSelector option {
  background: #1a2980;
  color: white;
}

.radio-widget .volume-control-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  /*         width: 100%; */
  justify-content: center;
}

.radio-widget .volume-control-container .opacity-slider {
  flex-grow: 1;
}

/* Tic-Tac-Toe Widget */
.tic-tac-toe-widget .tic-tac-toe-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.tic-tac-toe-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  width: 100%;
  max-width: 240px;
  aspect-ratio: 1 / 1;
}

.tic-tac-toe-cell {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
}

.tic-tac-toe-cell:hover {
  background: rgba(255, 255, 255, 0.2);
}

.tic-tac-toe-cell.x {
  color: #26d0ce;
}

.tic-tac-toe-cell.o {
  color: #ff6347;
}

.tic-tac-toe-status {
  font-size: 1.1rem;
  font-weight: 500;
  min-height: 1.5em;
  /* Prevent layout shift */
}

/* Memory Game Widget */
.memory-game-widget .memory-game-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.memory-game-info {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 1rem;
  font-weight: 500;
}

.memory-game-status {
  font-size: 1.1rem;
  font-weight: 500;
  min-height: 1.5em;
  text-align: center;
}

.memory-game-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1 / 1;
}

.memory-game-cell {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.1s ease-in-out;
}

.memory-game-cell.highlight {
  background: #26d0ce;
  box-shadow: 0 0 15px #26d0ce;
  transform: scale(1.05);
}

.math-quiz-stop-btn {
  flex: 1;
}

/* Contact Us Widget */
.contact-us-widget .contact-us-body form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-us-widget .contact-us-body {
  display: flex;
  flex-direction: column;
}

/* Motivational Quote Widget */
.motivational-quote-widget .quote-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 120px;
  /* Ensure a minimum height */
  gap: 1rem;
  margin-bottom: 1rem;
}

.motivational-quote-widget .quote-text {
  font-size: 1.2rem;
  font-style: italic;
  line-height: 1.5;
  text-align: center;
}

.motivational-quote-widget .quote-author {
  font-size: 1rem;
  font-weight: 500;
  text-align: right;
  opacity: 0.9;
}

.motivational-quote-widget .new-quote-btn {
  width: 100%;
}

input[type="file"] {
  max-width: 200px;
}

/* AI Image Generator Widget */
.ai-image-generator-widget .ai-image-generator-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ai-image-generator-widget .ai-image-prompt {
  height: 80px;
}

.ai-image-generator-widget .ai-image-output {
  margin-top: 1rem;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.ai-image-generator-widget .ai-image-placeholder {
  text-align: center;
  opacity: 0.7;
  padding: 1rem;
}

.ai-image-generator-widget .ai-image-output img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ai-image-generator-widget .ai-image-output .loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
  color: white;
}

.ai-image-generator-widget .ai-image-output .loading-overlay i {
  font-size: 2rem;
  animation: spin 1.5s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Currency Converter Widget */
.currency-converter-widget .currency-converter-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.currency-converter-widget .currency-group {
  display: flex;
  gap: 0.5rem;
}

.currency-converter-widget .currency-group input {
  flex-grow: 1;
}

.currency-converter-widget .currency-swap-container {
  display: flex;
  justify-content: center;
}

.currency-swap-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* .currency-swap-container i {
        font-size: 1.5rem;
        cursor: pointer;
        transition: color 0.2s;
        color: white;
        background: var(--glass-border);
        border: var(--glass-border);
        border-radius: 50%;
        padding: 0.25rem;
    } */

.currency-converter-widget #currency-swap-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
}

.currency-converter-widget #currency-rate-info {
  text-align: center;
  font-size: 0.9rem;
  opacity: 0.8;
  min-height: 1.2em;
}

/* Password Generator Widget */
.password-generator-widget .password-generator-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.password-generator-widget .password-output-container {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.password-generator-widget .password-output {
  flex-grow: 1;
  font-family: monospace;
  font-size: 1.1rem;
  cursor: default;
}

.password-generator-widget .password-copy-btn {
  flex-shrink: 0;
}

.password-copy-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-sizing: border-box;
}

.password-generator-widget .password-options {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.password-generator-widget .password-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.password-generator-widget .password-option .opacity-slider {
  width: 150px;
}

.password-generator-widget .password-generate-btn {
  width: 100%;
}

/* Ad Blocker Widget */
.adblocker-widget .widget-header {
  margin-bottom: 1.5rem;
}

.adblocker-content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.adblocker-main-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.adblocker-count-display {
  text-align: left;
}

.adblocker-count {
  font-size: 3rem;
  font-weight: 500;
  line-height: 1;
  color: #26d0ce;
}

.adblocker-count-label {
  font-size: 1rem;
  opacity: 0.8;
}

.adblocker-widget .toggle-switch {
  transform: scale(1.2);
}

.adblocker-controls {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.adblocker-controls .bg-select {
  flex-grow: 1;
  width: auto;
}

.adblocker-info {
  display: flex;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.05);
  padding: 0.75rem 1rem;
  border-radius: 4px;
}

.adblocker-info .info-item {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.adblocker-info .info-item span {
  font-size: 0.8rem;
  opacity: 0.8;
}

.adblocker-status-text.active {
  color: #4caf50;
}

.adblocker-status-text.inactive {
  color: #f44336;
}

.adblocker-features ul {
  list-style: none;
  padding-top: 0.5rem;
}

.adblocker-features li {
  padding: 0.25rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.adblocker-features i {
  color: #26d0ce;
}

/* Tic-Tac-Toe Widget */
.tic-tac-toe-widget .tic-tac-toe-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.tic-tac-toe-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  width: 100%;
  max-width: 240px;
  aspect-ratio: 1 / 1;
}

.tic-tac-toe-cell {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
}

.tic-tac-toe-cell:hover {
  background: rgba(255, 255, 255, 0.2);
}

.tic-tac-toe-cell.x {
  color: #26d0ce;
}

.tic-tac-toe-cell.o {
  color: #ff6347;
}

.tic-tac-toe-status {
  font-size: 1.1rem;
  font-weight: 500;
  min-height: 1.5em;
  /* Prevent layout shift */
}

/* Storage Usage Widget */
.Storage-widget .widget-header {
  margin-bottom: 1.5rem;
}

.Storage-widget .storage-usage-content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.Storage-widget .storage-usage-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
}

.Storage-widget .storage-usage-text {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1;
  color: #26d0ce;
}

.Storage-widget .storage-quota-text {
  font-size: 1rem;
  opacity: 0.8;
  white-space: nowrap;
}

.Storage-widget .storage-progress-bar {
  width: 100%;
  height: 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.Storage-widget .storage-progress-bar-fill {
  height: 100%;
  width: 0%;
  background-color: #26d0ce;
  border-radius: 10px;
  transition: width 0.5s ease, background-color 0.5s ease;
}

.Storage-widget .storage-progress-percentage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: 500;
  font-size: 0.8rem;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

.Storage-widget .bg-select {
  width: 100%;
}

.widget .premium-icon {
  position: absolute;
  top: 25px;
  right: 25px;
  height: 27px;
  width: 27px;
  color: #ffd700;
  font-size: 1rem;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  padding: 4px;
  text-shadow: 0 0 5px black;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.widget .premium-icon i {
  font-size: 1.8rem;
}

/* Unit Converter Widget */
.unit-converter-widget .unit-converter-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Drawing Pad Widget */
.drawing-pad-widget .drawing-pad-main,
.drawing-pad-widget .drawing-pad-history {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.drawing-pad-widget #drawing-pad-canvas {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  cursor: crosshair;
  width: 100%;
  touch-action: none;
  height: auto;
}

.drawing-pad-widget .drawing-pad-controls {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
}

.drawing-pad-widget .drawing-pad-controls input[type="color"] {
  background: none;
  border: none;
  width: 30px;
  height: 30px;
  padding: 0;
}

.drawing-pad-widget .drawing-pad-controls button {
  flex-shrink: 0;
}

.drawing-pad-widget .drawing-pad-history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1rem;
  width: 100%;
  max-height: 250px;
  overflow-y: auto;
  padding: 0.5rem;
}

.drawing-pad-history-grid::-webkit-scrollbar {
  width: 8px;
}

.drawing-pad-history-grid::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

.drawing-pad-widget .drawing-history-item {
  position: relative;
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.2);
  aspect-ratio: 3 / 2;
}

.drawing-pad-widget .drawing-history-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

.drawing-pad-widget .delete-drawing-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(200, 0, 0, 0.8);
  color: white;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.drawing-pad-widget .delete-drawing-btn:hover {
  opacity: 1;
}

.drawing-pad-return-btn {
  margin-left: 100px;
}

/* This Day in History Widget */
.day-in-history-widget .day-in-history-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.day-in-history-body {
  overflow: auto;
}

.day-in-history-widget #history-date {
  text-align: center;
  font-weight: 500;
  font-size: 1.1rem;
}

.day-in-history-widget #history-events-list {
  list-style: none;
  max-height: 250px;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.day-in-history-widget #history-events-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--glass-border);
  font-size: 0.9rem;
  line-height: 1.4;
}

.day-in-history-widget #history-events-list li:last-child {
  border-bottom: none;
}

.day-in-history-widget #history-events-list li .year {
  font-weight: bold;
  color: #26d0ce;
  margin-right: 0.5em;
}

.day-in-history-widget #history-events-list::-webkit-scrollbar {
  width: 8px;
}

.day-in-history-widget #history-events-list::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

/* Stock Market Widget */
.stock-market-widget .stock-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: 400px;
  max-height: 400px;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.stock-market-widget .stock-list::-webkit-scrollbar {
  width: 8px;
}

.stock-market-widget .stock-list::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

.stock-market-widget .stock-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 1rem;
  align-items: center;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.stock-market-widget .stock-symbol {
  font-weight: 600;
  font-size: 1.1rem;
}

.stock-market-widget .stock-price {
  font-size: 1.1rem;
}

.stock-market-widget .stock-change {
  font-weight: 500;
  padding: 0.2rem 0.4rem;
  border-radius: 3px;
  text-align: right;
}

.stock-market-widget .stock-change.positive {
  color: #4caf50;
}

.stock-market-widget .stock-change.negative {
  color: #f44336;
}

.stock-market-widget .stock-add-form {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  border-top: 1px solid var(--glass-border);
  padding-top: 1rem;
}

.stock-add-form {
  display: flex;
  flex-direction: column;
}

.stock-market-widget .remove-stock-btn {
  background: none;
  border: none;
  color: white;
  opacity: 0.5;
  cursor: pointer;
}

.stock-market-widget .remove-stock-btn:hover {
  opacity: 1;
  color: #f44336;
}

/* Horoscope Widget */
.horoscope-widget .horoscope-selector {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.horoscope-widget .zodiac-sign {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
  border: 1px solid transparent;
}

.horoscope-widget .zodiac-sign:hover {
  background: rgba(255, 255, 255, 0.2);
}

.horoscope-widget .zodiac-sign.active {
  background: rgba(38, 208, 206, 0.3);
  border-color: #26d0ce;
}

.horoscope-widget .zodiac-icon {
  font-size: 1.8rem;
}

.horoscope-widget .zodiac-name {
  font-size: 0.75rem;
}

.horoscope-widget .horoscope-content {
  min-height: 100px;
  background: rgba(0, 0, 0, 0.15);
  padding: 1rem;
  border-radius: 4px;
}

.horoscope-widget .horoscope-date {
  font-size: 0.9rem;
  opacity: 0.7;
  margin-bottom: 0.5rem;
}

/* IP Geolocation Widget */
.ip-geolocation-widget .ip-info-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ip-geolocation-widget .ip-info-item {
  display: flex;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.05);
  padding: 0.75rem 1rem;
  border-radius: 4px;
}

.ip-geolocation-widget .ip-info-item span:first-child {
  opacity: 0.8;
}

.ip-geolocation-widget .ip-info-item span:last-child {
  font-weight: 500;
  word-break: break-all;
}

/* History & Bookmarks Widget */
.history-widget,
.bookmarks-widget {
  min-height: 400px;
  display: flex;
  flex-direction: column;
}

.history-search-container {
  position: relative;
  margin-bottom: 1rem;
}

.history-search-input,
.bookmarks-search-input {
  width: 100%;
  padding: 0.5rem 2.5rem 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  color: white;
  outline: none;
}

.bookmarks-folder-select {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  color: white;
  width: 35px;
  height: 35px;
  border-radius: 50%;
}

.history-search-container>i {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.7;
}

.history-list,
.bookmarks-list,
.history-list-full {
  list-style: none;
  flex-grow: 1;
  overflow-y: auto;
  padding: 10px;
  /* space for scrollbar */
  max-height: 400px;
}

.history-list::-webkit-scrollbar,
.bookmarks-list::-webkit-scrollbar,
.history-list-full::-webkit-scrollbar {
  width: 8px;
}

.history-list::-webkit-scrollbar-thumb,
.bookmarks-list::-webkit-scrollbar-thumb,
.history-list-full::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

.folder-list::-webkit-scrollbar {
  width: 8px;
}

.folder-list::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

.history-item,
.bookmark-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid var(--glass-border);
  transition: background 0.2s;
}

.history-item:last-child,
.bookmark-item:last-child {
  border-bottom: none;
}

.history-item:hover,
.bookmark-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.history-item-main {
  flex-grow: 1;
  overflow: hidden;
  flex-direction: column;
  overflow: hidden;
  word-break: break-word;
}

.history-item-title,
.bookmark-item-title {
  font-weight: 500;
  white-space: normal;
  /* Allow wrapping */
  overflow-wrap: anywhere;
  /* Break long words/URLs */
  word-break: break-word;
  max-width: 100%;
}

.history-item-title a,
.bookmark-item-title a {
  color: white;
  text-decoration: none;
}

.history-item-title a:hover,
.bookmark-item-title a:hover {
  text-decoration: underline;
}

.history-item-url,
.bookmark-item-url,
.history-item-time {
  font-size: 0.8rem;
  opacity: 0.7;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}

.history-item-time {
  margin-top: 2px;
}

.history-item-actions,
.bookmark-item-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.history-action-btn,
.bookmark-action-btn {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 1rem;
  opacity: 0.7;
  padding: 0.25rem;
  transition: opacity 0.2s, color 0.2s;
}

.history-action-btn:hover,
.bookmark-action-btn:hover {
  opacity: 1;
}

.history-action-btn.star.bookmarked,
.bookmark-action-btn.star.bookmarked {
  color: #ffc107;
  /* yellow for bookmarked */
}

.bookmark-btn {
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  color: white;
  cursor: pointer;
  transition: background 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
}

.bookmark-btn i {
  font-size: 1rem;
  pointer-events: none;
}

.bookmark-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.BookmarksOptions {
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin: 0px auto;
}

.view-more-history-btn {
  width: 100%;
  margin-top: 1rem;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 3px;
  color: white;
  cursor: pointer;
  transition: background 0.2s;
}

.view-more-history-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.history-controls {
  display: flex;
  gap: 0.5rem;
}

.history-widget .widget-header {
  justify-content: space-between;
}

#historyModal .modal-content,
#editBookmarkModal .modal-content {
  max-width: 700px;
  width: 90%;
}

#editBookmarkModal .modal-content {
  max-width: 400px;
}

/* Theme Evolution Widget */
.theme-evolution-widget .widget-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.theme-evolution-widget .widget-header img {
  width: 24px;
  height: 24px;
}

.carousel-container {
  position: relative;
  margin: 1rem 0;
  overflow: hidden;
}

.carousel-track {
  display: flex;
  gap: 1rem;
  transition: transform 0.5s ease;
}

.carousel-card {
  width: 330px;
  height: auto;
  margin: 5px auto;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.carousel-card:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.carousel-card.active {
  border-color: #26d0ce;
  box-shadow: 0 0 15px #26d0ce;
}

.carousel-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 5px 5px 0 0;
  display: block;
}

.card-content {
  padding: 0.75rem;
}

.card-content h4 {
  margin-bottom: 0.25rem;
}

.card-content p {
  font-size: 0.8rem;
  opacity: 0.8;
  height: 40px;
  overflow: hidden;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.4);
  border: none;
  color: white;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  cursor: pointer;
  z-index: 10;
  font-size: 1.2rem;
}

.carousel-btn.prev {
  left: 5px;
}

.carousel-btn.next {
  right: 5px;
}

.theme-footer {
  text-align: center;
  margin-top: 1rem;
  font-size: 0.8rem;
  opacity: 0.8;
}

.theme-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 0.75rem;
}

/* Typing Test Widget */
.typing-test-widget {
  min-width: 350px;
  /* max-width: 400px; */
}

.typing-test-widget .typing-test-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.typing-test-widget .typing-test-setup {
  display: flex;
  justify-content: space-around;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: flex-end;
  /* Aligns items nicely at the bottom */
}

.typing-test-widget .typing-test-setup .setting-item {
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.typing-test-widget .typing-test-setup .setting-item label,
.typing-test-widget .typing-test-setup .setting-item span:first-child {
  font-size: 0.9rem;
  opacity: 0.9;
  margin-bottom: -0.25rem;
  /* Pull select up slightly */
}

.typing-test-widget .text-to-type {
  font-size: 1.25rem;
  line-height: 1.6;
  letter-spacing: 1px;
  background: rgba(0, 0, 0, 0.2);
  padding: 1rem;
  border-radius: 5px;
  margin-bottom: 1rem;
  height: 140px;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  /* prevents parent scroll chaining */
}

.text-to-type span {
  transition: color 0.1s ease-in-out;
}

.text-to-type span.correct {
  color: #33d838;
  /* Light green */
}

.text-to-type span.incorrect {
  color: #c01e1e;
  /* Light red */
  text-decoration: underline;
}

.text-to-type span.current {
  background-color: rgba(38, 208, 206, 0.5);
  border-radius: 2px;
  padding: 2px 0;
}

.typing-test-widget .typing-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 2;
  border: none;
  background: transparent;
  color: transparent;
  resize: none;
  outline: none;
  padding: 1rem;
  /* Match parent */
  font-size: 1.25rem;
  /* Match text */
  letter-spacing: 1px;
  /* Match text */
  line-height: 1.6;
  /* Match text */
  font-family: "Inter", sans-serif;
}

.typing-test-widget .typing-test-main {
  position: relative;
}

.typing-test-widget .typing-test-stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 1rem;
}

.typing-test-widget .progress-bar-container {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  margin-bottom: 1rem;
}

.typing-test-widget .progress-bar {
  width: 0%;
  height: 100%;
  background-color: #26d0ce;
  border-radius: 4px;
  transition: width 0.2s ease-in-out;
}

.typing-test-widget .typing-test-controls {
  display: flex;
  justify-content: center;
}

.typing-test-widget .typing-test-results {
  text-align: center;
  margin-top: 1rem;
}

.typing-test-widget .typing-test-results.hidden {
  display: none;
}

.typing-test-widget .result-details {
  display: flex;
  justify-content: space-around;
  margin-top: 1.5rem;
  font-size: 1.1rem;
}

.typing-test-widget .result-message {
  font-size: 1.2rem;
  color: #26d0ce;
  font-weight: 500;
  margin-top: 0.5rem;
}

/* Customize the scrollbar for Webkit-based browsers (Chrome, Safari, etc.) */
.text-to-type::-webkit-scrollbar {
  width: 12px;
  /* Set the width of the scrollbar */
}

.text-to-type::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  /* Glassy border for thumb */
  border-radius: 10px;
  /* Rounded corners for the thumb */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  /* Shadow effect */
  border: 3px solid var(--glass-color);
  /* Optional: adds a glass-like effect */
}

.text-to-type::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  /* Light glass effect on the track */
  border-radius: 10px;
}

.typing-restart-btn {
  z-index: 2;
}

/* Wikipedia Widget */
.countryExplorer-widget {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.countryExplorer-widget select {
  width: 100%;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 3px;
  color: white;
}

.countryExplorer-results {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow: hidden;
  min-height: 250px;
  /* Ensure space for content */
}

.wikipedia-header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: stretch;
}

.wikipedia-flag {
  width: 100%;
  height: auto;
  max-height: 210px;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid var(--glass-border);
  background-color: rgba(255, 255, 255, 0.1);
}

.wikipedia-title {
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
}

.wikipedia-extract {
  flex-grow: 1;
  overflow-y: auto;
  padding-right: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.5;
  opacity: 0.9;
  max-height: 150px;
}

.wikipedia-extract::-webkit-scrollbar {
  width: 8px;
}

.wikipedia-extract::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

.wikipedia-link {
  margin-top: auto;
  padding: 0.75rem;
  background: rgba(38, 208, 206, 0.7);
  border: 1px solid var(--glass-border);
  border-radius: 3px;
  color: white;
  text-decoration: none;
  text-align: center;
  transition: background 0.3s;
  display: block;
  /* Make it a block element */
}

.wikipedia-link:hover {
  background: rgba(38, 208, 206, 1);
}

.countryExplorer-loader {
  text-align: center;
  padding: 2rem;
  font-style: italic;
  opacity: 0.8;
}

/* wikipediaWidgets.js styles */
.on-this-day-widget .on-this-day-content,
.trending-articles-widget .trending-articles-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto;
  padding: 10px;
  height: 400px;
  max-height: 400px;
}

.on-this-day-widget .on-this-day-content::-webkit-scrollbar,
.trending-articles-widget .trending-articles-content::-webkit-scrollbar {
  width: 8px;
}

.on-this-day-widget .on-this-day-content::-webkit-scrollbar-thumb,
.trending-articles-widget .trending-articles-content::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

.on-this-day-event,
.trending-article-item {
  background: rgba(255, 255, 255, 0.05);
  padding: 0.75rem;
  border-radius: 4px;
}

.on-this-day-event a,
.trending-article-item a {
  color: white;
  text-decoration: none;
  font-weight: 500;
}

.on-this-day-event a:hover,
.trending-article-item a:hover {
  text-decoration: underline;
  color: #26d0ce;
}

.on-this-day-year {
  font-weight: bold;
  color: #26d0ce;
  display: block;
  margin-bottom: 0.25rem;
}

.what-is-widget .what-is-title {
  font-style: italic;
  opacity: 0.8;
  white-space: normal;
  /* allow wrapping */
  overflow: visible;
  /* no need to hide overflow */
  text-overflow: unset;
  /* disable ellipsis */
  flex-grow: 1;
  margin-bottom: 0.5rem;
  word-break: break-word;
  /* optional: break long unbroken words */
}

.what-is-widget .widget-header {
  display: flex;
  justify-content: space-between;
}

.what-is-widget .what-is-extract {
  margin-bottom: 1rem;
  /* max-height: 300px; */
  overflow: auto;
}

.what-is-widget .what-is-extract {
  margin-bottom: 1rem;
  max-height: 300px;
  overflow-y: auto;
}

.what-is-extract::-webkit-scrollbar {
  width: 8px;
}

.what-is-extract::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

.what-is-widget .what-is-link {
  color: #26d0ce;
  text-decoration: none;
  font-weight: 500;
}

/* Notifications History Widget */
.notifications-history-widget {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 450px;
  /* Ensure it has some height */
}

.notifications-header {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-direction: row;
}

.notifications-search {
  flex-grow: 1;
  min-width: 70px;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 5px;
  color: white;
}

.notifications-stats {
  display: flex;
  gap: 1rem;
  font-size: 0.9rem;
  align-items: center;
}

.new-notifications-badge {
  background-color: #26d0ce;
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  min-width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 0.8rem;
}

.notifications-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--glass-border);
}

.notifications-list {
  flex-grow: 1;
  overflow: auto;
  padding-right: 0.5rem;
  /* Space for scrollbar */
  margin-right: -0.5rem;
  max-height: 400px;
  /* Added max-height */
}

.notifications-list::-webkit-scrollbar {
  width: 8px;
}

.notifications-list::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

.notifications-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.notification-item {
  display: flex;
  gap: 1rem;
  padding: 0.75rem;
  /* border-radius: 4px; */
  transition: background 0.2s;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-item.selected {
  background: rgba(38, 208, 206, 0.2);
}

.notification-item-main {
  flex-grow: 1;
  display: flex;
  gap: 1rem;
}

.notification-item-select,
.notification-item-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.notification-item-image {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  align-self: flex-start;
}

.notification-item.poster-type .notification-item-image {
  width: 100px;
  height: auto;
  border-radius: 4px;
}

.notification-item-content {
  flex-grow: 1;
}

.notification-item-message {
  font-size: 0.95rem;
  line-height: 1.4;
}

.notification-item-message.collapsed {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.view-more-btn {
  background: none;
  border: none;
  color: #26d0ce;
  cursor: pointer;
  padding: 0;
  font-size: 0.8rem;
}

.notification-item-meta {
  font-size: 0.8rem;
  opacity: 0.7;
  margin-top: 0.5rem;
}

.notification-action-btn {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s, color 0.2s;
}

.notification-action-btn:hover {
  opacity: 1;
}

.notification-action-btn.star-btn.starred {
  color: #ffeb3b;
  opacity: 1;
}

.toast-content {
  flex-grow: 1;
}

/* Cloud Sync Widget */
.cloud-sync-widget .cloud-sync-content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.cloud-sync-widget .cloud-storage-summary,
.cloud-sync-widget .db-stats-summary {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cloud-sync-widget .stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cloud-sync-widget .stat-item span:first-child {
  opacity: 0.8;
}

.cloud-sync-widget .stat-item span:last-child {
  font-weight: 500;
  font-family: monospace;
}

.cloud-sync-widget .progress-bar-container {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.cloud-sync-widget .progress-bar {
  height: 100%;
  background-color: #26d0ce;
  border-radius: 4px;
  transition: width 0.5s ease-in-out;
}

.cloud-sync-widget .widget-sync-list-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  opacity: 0.7;
  padding: 0 0.5rem;
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 0.5rem;
}

.cloud-sync-widget .widget-sync-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 300px;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.widget-sync-list::-webkit-scrollbar {
  width: 8px;
}

.widget-sync-list::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

.widget-sync-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.cloud-sync-widget .sync-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  font-size: 0.9rem;
  transition: opacity 0.3s;
}

.cloud-sync-widget .sync-item.disconnected {
  opacity: 0.6;
}

.cloud-sync-widget .sync-item input[type="checkbox"] {
  transform: scale(0.9);
  cursor: pointer;
  accent-color: #26d0ce;
}

.cloud-sync-widget .sync-item-name {
  flex-grow: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cloud-sync-widget .sync-item-stats {
  text-align: right;
  font-family: monospace;
  font-size: 0.85rem;
  white-space: nowrap;
}

.cloud-sync-widget .sync-item-stats span {
  display: block;
  line-height: 1.2;
}

.cloud-sync-widget .cloud-sync-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--glass-border);
}

.cloud-sync-widget.disconnected-master {
  opacity: 0.7;
}

/* Audio Recorder Widget */
.audio-recorder-widget .audio-recorder-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.audio-recorder-widget .audio-recorder-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  flex-wrap: wrap;
}

.audio-recorder-widget .audio-source-toggles {
  display: flex;
  gap: 1rem;
  font-size: 0.9rem;
}

.audio-recorder-widget .audio-source-toggles label {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
}

.audio-recorder-widget .audio-source-toggles input {
  accent-color: #26d0ce;
}

.audio-recorder-widget .record-button {
  padding: 0.5rem 1rem;
  font-weight: 500;
  min-width: 120px;
}

.audio-recorder-widget .record-button.recording {
  background-color: rgba(220, 53, 69, 0.7);
  animation: pulse 1.5s infinite;
}

.audio-recorder-widget .record-button.recording:hover {
  background-color: rgba(220, 53, 69, 1);
}

.audio-recorder-widget .audio-recordings-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: 300px;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.audio-recordings-list::-webkit-scrollbar {
  width: 8px;
}

.audio-recordings-list::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

.audio-recorder-widget .recording-item {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  /* padding: 1rem; */
  padding: 10px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  border: 1px solid var(--glass-border);
  /* overflow-x: auto; */
}

.audio-recorder-widget .recording-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  font-size: 0.85rem;
}

.audio-recorder-widget .recording-name {
  font-weight: 500;
  font-size: 0.95rem;
  word-break: break-all;
}

.audio-recorder-widget .recording-meta {
  opacity: 0.8;
  text-align: right;
  flex-shrink: 0;
}

.audio-recorder-widget .recording-meta span {
  margin-left: 0.75rem;
}

.audio-recorder-widget .recording-player {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.audio-recorder-widget .player-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  color: white;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.audio-recorder-widget .player-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.audio-recorder-widget .seek-slider {
  flex-grow: 1;
  -webkit-appearance: none;
  height: 5px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2.5px;
  outline: none;
  cursor: pointer;
}

.audio-recorder-widget .seek-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #26d0ce;
}

.audio-recorder-widget .time-display {
  font-size: 0.8rem;
  font-family: monospace;
  min-width: 85px;
  text-align: center;
}

.time-display {
  display: block;
}

/* Video Recorder Widget */
.video-recorder-widget .video-recorder-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.video-recorder-widget .video-recorder-preview-area {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 5px;
  border: 1px solid var(--glass-border);
  position: relative;
  overflow: hidden;
}

.video-recorder-widget .video-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.video-recorder-widget .preview-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.5rem;
}

.video-recorder-widget .video-recorder-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  flex-wrap: wrap;
}

.video-recorder-widget .mic-toggle label {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  font-size: 0.9rem;
}

.video-recorder-widget .mic-toggle input {
  accent-color: #26d0ce;
}

.video-recorder-widget .record-button {
  padding: 0.5rem 1rem;
  font-weight: 500;
  min-width: 120px;
}

.video-recorder-widget .record-button.recording {
  background-color: rgba(220, 53, 69, 0.7);
  animation: pulse 1.5s infinite;
}

.video-recorder-widget .record-button.recording:hover {
  background-color: rgba(220, 53, 69, 1);
}

.video-recorder-widget .video-recordings-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: 250px;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.video-recordings-list::-webkit-scrollbar {
  width: 8px;
}

.video-recordings-list::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

.video-recorder-widget .recording-item {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  /* padding: 1rem; */
  padding: 5px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  border: 1px solid var(--glass-border);
}

.video-recorder-widget .recording-item-video-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #000;
  border-radius: 4px;
  overflow: hidden;
}

.video-recorder-widget .recording-item-video-wrapper video {
  width: 100%;
  height: 100%;
  display: block;
}

.video-recorder-widget .recording-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  font-size: 0.85rem;
}

.video-recorder-widget .recording-name {
  font-weight: 500;
  font-size: 0.95rem;
  word-break: break-all;
}

.video-recorder-widget .recording-meta {
  opacity: 0.8;
  text-align: right;
  flex-shrink: 0;
}

.video-recorder-widget .recording-meta span {
  margin-left: 0.75rem;
}

.video-recorder-widget .recording-player {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.video-recorder-widget .player-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  color: white;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.video-recorder-widget .player-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.video-recorder-widget .seek-slider {
  flex-grow: 1;
  -webkit-appearance: none;
  height: 5px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2.5px;
  outline: none;
  cursor: pointer;
}

.video-recorder-widget .seek-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #26d0ce;
}

.video-recorder-widget .time-display {
  font-size: 0.8rem;
  font-family: monospace;
  min-width: 85px;
  text-align: center;
}

/* Achievements Widget */
.achievements-widget {
  display: flex;
  flex-direction: column;
}

.achievements-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  text-align: center;
  margin-bottom: 1rem;
}

.achievement-stat span {
  display: block;
  opacity: 0.8;
  font-size: 0.9rem;
}

.achievement-stat strong {
  font-size: 1.5rem;
  font-weight: 500;
  color: #26d0ce;
}

.achievements-list {
  flex-grow: 1;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 0.5rem;
  margin-right: -0.5rem;
}

.achievements-list::-webkit-scrollbar {
  width: 8px;
}

.achievements-list::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

.achievements-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.achievement-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.2s;
}

.achievement-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.achievement-item.locked {
  opacity: 0.5;
}

.achievement-icon {
  font-size: 1.8rem;
  color: #ffd700;
  width: 40px;
  text-align: center;
}

.achievement-item.locked .achievement-icon {
  color: rgba(255, 255, 255, 0.5);
}

.achievement-details {
  flex-grow: 1;
}

.achievement-name {
  font-weight: 500;
}

.achievement-description {
  font-size: 0.9rem;
  opacity: 0.8;
  margin: 0.25rem 0;
}

.achievement-meta {
  font-size: 0.8rem;
  opacity: 0.7;
}

.achievement-meta span:not(:last-child)::after {
  content: " • ";
  margin: 0 0.25rem;
}

.achievement-actions {
  margin-left: auto;
}

.achievement-actions .star-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  font-size: 1.2rem;
  padding: 0.25rem;
}

.achievement-actions .star-btn.starred,
.achievement-actions .star-btn:hover {
  color: #ffeb3b;
}

/* Daily Quiz Widget */
.daily-quiz-widget .daily-quiz-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.daily-quiz-widget .quiz-view,
.daily-quiz-widget .results-view {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.daily-quiz-widget .results-view {
  text-align: center;
}

.daily-quiz-widget .hidden {
  display: none;
}

.daily-quiz-widget .quiz-header {
  display: flex;
  justify-content: space-between;
  font-weight: 500;
  opacity: 0.9;
}

.daily-quiz-widget .quiz-question {
  font-size: 1.2rem;
  text-align: center;
  min-height: 3em;
  /* Reserve space for question */
  display: flex;
  align-items: center;
  justify-content: center;
}

.daily-quiz-widget .answer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.daily-quiz-widget .answer-btn {
  padding: 1rem;
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 5px;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  word-break: break-word;
  white-space: normal;
  min-height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.daily-quiz-widget .answer-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.2);
}

.daily-quiz-widget .answer-btn.correct {
  background: #28a74677;
  border-color: #28a745;
}

.daily-quiz-widget .answer-btn.incorrect {
  background: #dc354671;
  border-color: #dc3545;
}

.daily-quiz-widget .answer-btn:disabled {
  cursor: not-allowed;
  opacity: 0.9;
}

.daily-quiz-widget .answer-btn.correct:disabled,
.daily-quiz-widget .answer-btn.incorrect:disabled {
  opacity: 1;
  /* Keep color on correct/incorrect */
}

.daily-quiz-widget .quiz-control-btn {
  margin-top: 1rem;
  padding: 0.75rem;
  background: rgba(38, 208, 206, 0.7);
  border: 1px solid var(--glass-border);
  border-radius: 3px;
  color: white;
  cursor: pointer;
  font-weight: 500;
}

.daily-quiz-widget .quiz-control-btn:hover {
  background: rgba(38, 208, 206, 1);
}

/* Extension Manager Widget */
.extension-manager-widget {
  /* grid-column: span 2; 
        grid-row: span 2;  */
  min-height: 450px;
  display: flex;
  flex-direction: column;
}

.extension-manager-controls {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.extension-search-bar {
  flex-grow: 1;
  min-width: 200px;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 2rem;
  color: white;
  outline: none;
}

.master-switch-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.extension-list {
  flex-grow: 1;
  overflow-y: auto;
  /* padding-right: 0.5rem;  */
  padding: 10px;
  max-height: 400px;
}

.extension-list::-webkit-scrollbar {
  width: 8px;
}

.extension-list::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

.extension-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.extension-item {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  margin-bottom: 0.75rem;
  padding: 1rem;
  transition: background 0.2s;
}

.extension-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.extension-item.hidden-by-search {
  display: none;
}

.extension-main {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.extension-icon {
  width: 40px;
  height: 40px;
  border-radius: 5px;
  object-fit: contain;
}

.extension-info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Prevents long names from breaking layout */
}

.extension-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.extension-version {
  font-size: 0.8rem;
  opacity: 0.7;
}

.extension-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.view-more-btn {
  padding: 0.3rem 0.6rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 3px;
  color: white;
  cursor: pointer;
  font-size: 0.8rem;
}

.extension-details {
  display: none;
  /* Hidden by default */
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--glass-border);
  font-size: 0.9rem;
  line-height: 1.5;
  word-break: break-word;
}

.extension-details.visible {
  display: block;
}

.extension-details p {
  margin-bottom: 0.5rem;
}

.permission-list {
  list-style: none;
  padding-left: 0;
  max-height: 200px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  padding: 0.5rem;
}

.permission-list::-webkit-scrollbar {
  width: 8px;
}

.permission-list::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

.permission-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.permission-list li {
  background: rgba(255, 255, 255, 0.05);
  padding: 0.25rem 0.5rem;
  border-radius: 2px;
  margin-bottom: 0.25rem;
  font-family: monospace;
  font-size: 0.8rem;
}

.battery-performance-widget {
  display: flex;
  flex-direction: column;
}

.battery-performance-chart-container {
  position: relative;
  flex-grow: 1;
  margin-bottom: 1rem;
}

.battery-performance-stats {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.performance-status {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.2rem;
  font-weight: 500;
}

.performance-status-icon {
  font-size: 1.5rem;
  width: 30px;
  text-align: center;
}

.performance-details {
  display: flex;
  justify-content: space-between;
  text-align: center;
}

.performance-details>div {
  flex: 1;
}

.performance-details .detail-label {
  font-size: 0.8rem;
  opacity: 0.8;
  margin-bottom: 0.25rem;
}

.performance-details .detail-value {
  font-weight: 500;
  font-size: 1.1rem;
}

/* Tab Manager Widget */
.tab-manager-widget {
  min-height: 450px;
  display: flex;
  flex-direction: column;
}

.tab-manager-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0 0.5rem;
}

.tab-count {
  margin-right: 40px;
  font-size: 1rem;
  opacity: 0.9;
}

.tab-list {
  flex-grow: 1;
  overflow-y: auto;
  /* padding-right: 0.5rem; */
  list-style: none;
  max-height: 300px;
  padding-right: 10px;
}

.tab-list::-webkit-scrollbar {
  width: 8px;
}

.tab-list::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

.tab-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.tab-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

.tab-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  object-fit: contain;
}

.tab-icon.default-icon {
  font-size: 20px;
  text-align: center;
  opacity: 0.8;
}

.tab-url {
  margin-left: 2px;
}

.tab-info {
  flex-grow: 1;
  overflow: hidden;
  /* Important for text-overflow */
}

.tab-title {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  /* for text-overflow to work */
}

.tab-metadata {
  font-size: 0.8rem;
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  /* for text-overflow to work */
  margin-top: 0.25rem;
}

.tab-buttons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.tab-action-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.tab-action-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.tab-action-btn.close-btn {
  font-size: 1.2rem;
}

.tab-actions-container {
  position: relative;
}

.tab-actions-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  background: rgba(40,
      45,
      70,
      0.75);
  /* Darker, more opaque background for readability */
  backdrop-filter: blur(12px);
  /* Consistent blur */
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 5px;
  z-index: 10;
  width: 220px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  /* Slightly stronger shadow for depth */
  padding: 0.5rem;
}

.tab-actions-dropdown.show {
  display: block;
}

.tab-actions-dropdown .action-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.2s;
  font-size: 0.9rem;
}

.tab-actions-dropdown .action-item:hover {
  background: rgba(255, 255, 255, 0.25);
}

.tab-actions-dropdown .action-item i {
  width: 16px;
  text-align: center;
  opacity: 0.8;
}

.tab-actions-dropdown hr {
  border: none;
  border-top: 1px solid var(--glass-border);
  margin: 0.25rem 0.5rem;
}

.tab-actions-dropdown hr {
  border: none;
  border-top: 1px solid var(--glass-border);
  margin: 0.25rem 0.5rem;
}

.tab-actions-dropdown .action-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.2s;
  font-size: 0.9rem;
}

.tab-actions-dropdown .action-item i {
  width: 16px;
  text-align: center;
  opacity: 0.8;
}

.tab-manager-widget {
  margin: 0 auto;
}

/* CPU Speedometer Widget */
.cpu-speed-widget {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cpu-gauge-container {
  position: relative;
  width: 100%;
  max-width: 280px;
  margin: 1rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cpu-gauge-canvas {
  width: 100% !important;
  height: auto !important;
}

.cpu-gauge-value {
  position: absolute;
  bottom: 25px;
  /* Adjust as needed */
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  line-height: 1.1;
  width: 100%;
}

.gauge-score {
  font-size: 2.2rem;
  font-weight: 500;
  display: block;
}

.gauge-unit {
  display: block;
  font-size: 0.8rem;
  opacity: 0.8;
}

.cpu-gauge-label {
  position: absolute;
  bottom: 0px;
  /* Adjust as needed */
  width: 100%;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 500;
}

.cpu-info-grid {
  display: flex;
  justify-content: space-around;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--glass-border);
}

.cpu-info-item {
  text-align: center;
  font-size: 0.9rem;
}

.cpu-info-item i {
  font-size: 1.5rem;
  display: block;
  margin-bottom: 0.5rem;
  opacity: 0.8;
  color: #26d0ce;
}

.cpu-grading-system {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0 1rem 0;
}

.cpu-tier-legend {
  display: flex;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
}

.cpu-tier-segment {
  height: 100%;
  transition: all 0.3s ease;
}

/* Gmail Manager Widget */
.gmail-manager-widget {
  display: flex;
  flex-direction: column;
  min-height: 450px;
}

.gmail-manager-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.gmail-disconnected-view {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
}

.gmail-connect-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1rem;
  padding: 0.75rem 1.5rem;
}

.gmail-connect-btn i {
  font-size: 1.2rem;
}

.gmail-connected-view {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.gmail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 0.5rem;
  flex-shrink: 0;
}

.gmail-user-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.gmail-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.gmail-user-info div {
  display: flex;
  flex-direction: column;
}

.gmail-user-name {
  font-weight: 500;
}

.gmail-user-email {
  font-size: 0.8rem;
  opacity: 0.7;
}

.gmail-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  flex-shrink: 0;
}

.gmail-tab {
  background: none;
  border: none;
  color: white;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  opacity: 0.7;
  transition: all 0.2s;
}

.gmail-tab:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px 4px 0 0;
}

.gmail-tab.active {
  opacity: 1;
  font-weight: 500;
  border-bottom-color: #26d0ce;
}

.gmail-email-list {
  flex-grow: 1;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.gmail-email-list::-webkit-scrollbar {
  width: 8px;
}

.gmail-email-list::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

.gmail-email-item {
  display: flex;
  gap: 1rem;
  padding: 0.75rem;
  border-bottom: 1px solid var(--glass-border);
  cursor: pointer;
  transition: background 0.2s;
}

.gmail-email-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.gmail-email-item.unread .email-sender,
.gmail-email-item.unread .email-subject {
  font-weight: bold;
}

.email-sender-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.email-content {
  flex-grow: 1;
  overflow: hidden;
}

.email-sender {
  font-size: 0.9rem;
}

.email-subject {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.email-snippet {
  font-size: 0.8rem;
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.email-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
}

.email-timestamp {
  font-size: 0.75rem;
  opacity: 0.7;
  white-space: nowrap;
}

.email-actions {
  display: flex;
  gap: 0.5rem;
  opacity: 0;
  transition: opacity 0.2s;
}

.gmail-email-item:hover .email-actions {
  opacity: 1;
}

.email-action-btn {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0.25rem;
  opacity: 0.7;
  width: 24px;
  height: 24px;
}

.email-action-btn:hover {
  opacity: 1;
  transform: scale(1.1);
}

.email-action-btn.starred {
  color: #ffd700;
  opacity: 1;
}

.gmail-compose-modal .modal-content {
  width: 90%;
  max-width: 700px;
  height: 80%;
  max-height: 600px;
  display: flex;
  flex-direction: column;
}

.gmail-compose-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.gmail-compose-body textarea {
  flex-grow: 1;
}

/* Daily Trivia Widget */
.daily-trivia-widget .daily-trivia-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  min-height: 250px;
  /* Adjusted height */
}

.daily-trivia-widget .trivia-start-btn {
  padding: 0.8rem 1.5rem;
}

.daily-trivia-widget .trivia-info {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 0.9rem;
  opacity: 0.9;
}

.daily-trivia-widget .trivia-question {
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  min-height: 60px;
  /* Ensure space for question */
}

.daily-trivia-widget .trivia-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  width: 100%;
}

.daily-trivia-widget .trivia-option-btn {
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  color: white;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s;
  width: 100%;
}

.daily-trivia-widget .trivia-option-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.2);
}

.daily-trivia-widget .trivia-option-btn:disabled {
  cursor: default;
  opacity: 0.9;
}

.daily-trivia-widget .trivia-option-btn.correct {
  background: rgba(46, 204, 112, 0.507);
  /* green */
  border-color: rgba(46, 204, 113, 0.9);
}

.daily-trivia-widget .trivia-option-btn.incorrect {
  background: rgba(231, 77, 60, 0.486);
  /* red */
  border-color: rgba(231, 76, 60, 0.9);
}

.daily-trivia-widget .trivia-final-score {
  text-align: center;
}

.daily-trivia-widget .trivia-final-score h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.daily-trivia-widget .trivia-final-score p {
  font-size: 1.1rem;
  opacity: 0.9;
  margin-bottom: 1rem;
}

/* Clipboard Manager Widget */
.clipboard-manager-widget {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* Ensure it fills the widget space */
}

.clipboard-manager-widget .clipboard-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.clipboard-manager-widget .clipboard-controls .countdown-btn {
  flex-grow: 1;
}

.clipboard-manager-widget .clipboard-list {
  list-style: none;
  flex-grow: 1;
  overflow-y: auto;
  padding-right: 0.5rem;
  /* for scrollbar */
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.clipboard-list {
  max-height: 400px;
}

.clipboard-list::-webkit-scrollbar {
  width: 8px;
}

.clipboard-list::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 10px;
}

.clipboard-manager-widget .clipboard-item {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-left: 3px solid transparent;
  transition: border-left-color 0.3s;
}

.clipboard-manager-widget .clipboard-item.starred {
  border-left-color: #ffd700;
  background: rgba(255, 215, 0, 0.08);
}

.clipboard-manager-widget .clipboard-content {
  font-family: "Inter", sans-serif;
  font-size: 0.95rem;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 4.5em;
  /* approx 3 lines */
  overflow: hidden;
  position: relative;
  transition: max-height 0.3s ease-in-out;
}

.clipboard-manager-widget .clipboard-content.expanded {
  max-height: 400px;
}

.clipboard-manager-widget .clipboard-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  opacity: 0.7;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--glass-border);
}

.clipboard-manager-widget .clipboard-actions {
  display: flex;
  gap: 0.5rem;
}

.clipboard-manager-widget .clipboard-actions button {
  background: none;
  border: none;
  color: var(--icon-color);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.3rem;
  border-radius: 4px;
  transition: all 0.2s ease-in-out;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.clipboard-manager-widget .clipboard-actions button:hover {
  color: var(--icon-hover-color);
  background: rgba(255, 255, 255, 0.15);
}

.clipboard-manager-widget .clipboard-actions .star-btn.starred {
  color: #ffd700;
}

.clipboard-manager-widget .undo-bar {
  background: #26d0ce;
  color: black;
  padding: 0.75rem;
  text-align: center;
  font-size: 0.9rem;
  border-radius: 4px;
  margin-top: 1rem;
  display: none;
  /* Hidden by default */
}

.clipboard-manager-widget .undo-bar button {
  background: none;
  border: none;
  color: black;
  font-weight: bold;
  text-decoration: underline;
  cursor: pointer;
  margin-left: 1rem;
}

.notes-manager-widget {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.notes-manager-widget .note-search-input {
  flex-grow: 2;
  min-width: 160px;
  padding: 0.5rem;
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s ease-in-out;
}

.notes-manager-widget .note-search-input:focus {
  border-color: #00bcd4;
}

.notes-manager-widget .notes-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.notes-manager-widget .notes-controls .countdown-btn {
  flex-grow: 1;
}

.notes-manager-widget .notes-list {
  list-style: none;
  flex-grow: 1;
  overflow-y: auto;
  padding-right: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 400px;
}

.notes-list::-webkit-scrollbar {
  width: 8px;
}

.notes-list::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 10px;
}

.notes-manager-widget .notes-item {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-left: 3px solid transparent;
  transition: border-left-color 0.3s;
}

.notes-manager-widget .notes-item.starred {
  border-left-color: #ffd700;
  background: rgba(255, 215, 0, 0.08);
}

.notes-manager-widget .note-content {
  font-family: "Inter", sans-serif;
  font-size: 0.95rem;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 4.5em;
  overflow: hidden;
  position: relative;
  transition: max-height 0.3s ease-in-out;
}

.notes-manager-widget .note-content.expanded {
  max-height: none;
}

.notes-manager-widget .note-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  opacity: 0.7;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--glass-border);
}

.notes-manager-widget .note-actions {
  display: flex;
  gap: 0.5rem;
}

.notes-manager-widget .note-actions button {
  background: none;
  border: none;
  color: var(--icon-color);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.3rem;
  border-radius: 4px;
  transition: all 0.2s ease-in-out;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.notes-manager-widget .note-actions button:hover {
  color: var(--icon-hover-color);
  background: rgba(255, 255, 255, 0.15);
}

.notes-manager-widget .note-actions .star-btn.starred {
  color: #ffd700;
}

.notes-manager-widget .note-undo-bar {
  background: #26d0ce;
  color: black;
  padding: 0.75rem;
  text-align: center;
  font-size: 0.9rem;
  border-radius: 4px;
  margin-top: 1rem;
  display: none;
}

.notes-manager-widget .note-undo-bar button {
  background: none;
  border: none;
  color: black;
  font-weight: bold;
  text-decoration: underline;
  cursor: pointer;
  margin-left: 1rem;
}

/* Word Scramble Widget */
.word-scramble-widget .scramble-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.word-scramble-widget .scramble-setup,
.word-scramble-widget .scramble-main,
.word-scramble-widget .scramble-game-over,
.word-scramble-widget .word-list-view {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.word-scramble-widget .hidden {
  display: none;
}

.word-scramble-widget .difficulty-select,
.word-scramble-widget .scramble-control-btn {
  padding: 0.75rem;
  background: rgba(38, 208, 206, 0.7);
  border: 1px solid var(--glass-border);
  border-radius: 3px;
  color: white;
  cursor: pointer;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
}

.word-scramble-widget .difficulty-select {
  background: rgba(255, 255, 255, 0.1);
  width: 100%;
}

.word-scramble-widget .scramble-stats {
  display: flex;
  justify-content: space-between;
  font-size: 1rem;
  font-weight: 500;
}

.scrambled-word-display {
  font-size: 2.5rem;
  text-align: center;
  letter-spacing: 0.5rem;
  font-weight: 300;
  background: rgba(255, 255, 255, 0.05);
  padding: 1rem;
  border-radius: 5px;
  min-height: 70px;
}

.user-answer-area,
.available-letters-area {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  min-height: 50px;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}

.letter-tile {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 5px;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
}

.letter-tile.correct {
  background: #28a7466c;
  border-color: #28a745;
}

@keyframes tada {
  from {
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}

.user-answer-area .letter-tile {
  cursor: pointer;
}

.available-letters-area .letter-tile {
  background: rgba(38, 208, 206, 0.3);
}

.available-letters-area .letter-tile:hover {
  background: rgba(38, 208, 206, 0.5);
  transform: translateY(-2px);
}

.letter-tile.correct-spot {
  border-color: #28a745;
  box-shadow: 0 0 8px #28a745;
}

.letter-tile.placeholder {
  background: transparent;
  border-style: dashed;
}

.user-answer-area.incorrect .letter-tile:not(.placeholder) {
  border-color: #dc3545;
}

.scramble-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.scramble-action-btn {
  padding: 0.8rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  color: white;
  cursor: pointer;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.scramble-action-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.feedback-message {
  text-align: center;
  min-height: 20px;
  font-weight: 500;
}

.feedback-message.error {
  color: #dc3545;
}

.feedback-message.success {
  color: #28a745;
}

.word-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.5rem;
  max-height: 300px;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.word-list-grid::-webkit-scrollbar {
  width: 8px;
}

.word-list-grid::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

.word-list-grid::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.word-list-item {
  background: rgba(255, 255, 255, 0.05);
  padding: 0.5rem;
  text-align: center;
  border-radius: 3px;
}

.word-list-item {
  background: rgba(255, 255, 255, 0.05);
  padding: 0.5rem;
  text-align: center;
  border-radius: 3px;
}

/* Fill in the blank Widget specific styles */
.fill-in-the-blank-widget .fill-blank-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.fill-in-the-blank-widget .fill-blank-setup,
.fill-in-the-blank-widget .fill-blank-main,
.fill-in-the-blank-widget .fill-blank-game-over,
.fill-in-the-blank-widget .word-list-view {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.fill-in-the-blank-widget .hidden {
  display: none;
}

.fill-in-the-blank-widget .fill-blank-control-btn {
  padding: 0.75rem;
  background: rgba(38, 208, 206, 0.7);
  border: 1px solid var(--glass-border);
  border-radius: 3px;
  color: white;
  cursor: pointer;
  font-weight: 500;
}

.fill-in-the-blank-widget .fill-blank-control-btn:hover {
  background: rgba(38, 208, 206, 1);
}

.fill-in-the-blank-widget .difficulty-select {
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 3px;
  color: white;
  width: 100%;
}

.fill-in-the-blank-widget .fill-blank-stats {
  display: flex;
  justify-content: space-between;
  font-size: 1rem;
  font-weight: 500;
}

.fill-in-the-blank-widget .word-display-area {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  min-height: 50px;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}

.fill-in-the-blank-widget .word-display-area .letter-tile.blank {
  background: transparent;
  border-style: dashed;
  cursor: pointer;
}

.fill-in-the-blank-widget .word-display-area .letter-tile.blank-filled {
  cursor: pointer;
}

.fill-in-the-blank-widget .word-display-area.incorrect .letter-tile.blank-filled {
  border-color: #dc3545;
}

.fill-in-the-blank-widget .available-letters-area {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  min-height: 50px;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}

.fill-in-the-blank-widget .available-letters-area .letter-tile {
  background: rgba(38, 208, 206, 0.3);
}

.fill-in-the-blank-widget .available-letters-area .letter-tile:hover {
  background: rgba(38, 208, 206, 0.5);
  transform: translateY(-2px);
}

.fill-in-the-blank-widget .fill-blank-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.fill-in-the-blank-widget .fill-blank-action-btn {
  padding: 0.8rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  color: white;
  cursor: pointer;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.fill-in-the-blank-widget .fill-blank-action-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Word Sequence Widget Styles */
.word-sequence-widget .sequence-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 300px;
}

.word-sequence-widget .sequence-view {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex-grow: 1;
}

.word-sequence-widget .hidden {
  display: none;
}

.word-sequence-widget .sequence-control-btn {
  padding: 0.75rem;
  background: rgba(38, 208, 206, 0.7);
  border: 1px solid var(--glass-border);
  border-radius: 3px;
  color: white;
  cursor: pointer;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.3s;
}

.word-sequence-widget .sequence-control-btn:hover {
  background: rgba(38, 208, 206, 1);
}

.word-sequence-widget .sequence-control-btn.secondary {
  background: rgba(255, 255, 255, 0.1);
}

.word-sequence-widget .sequence-control-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.2);
}

.word-sequence-widget .sequence-control-btn.stop {
  background: rgba(220, 53, 69, 0.7);
  /* A red color for stop */
}

.word-sequence-widget .sequence-control-btn.stop:hover {
  background: rgba(220, 53, 69, 1);
}

.word-sequence-widget .sequence-control-btn:disabled {
  background: rgba(255, 255, 255, 0.2);
  cursor: not-allowed;
  opacity: 0.7;
}

.word-sequence-widget .difficulty-select {
  width: 100%;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 3px;
  color: white;
  font-weight: 500;
}

.word-sequence-widget .sequence-stats {
  display: flex;
  justify-content: space-between;
  font-size: 1rem;
  font-weight: 500;
}

.word-sequence-widget .memorize-word-display {
  font-size: 3rem;
  font-weight: 500;
  text-align: center;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  min-height: 150px;
}

.word-sequence-widget .timer-bar-container {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.word-sequence-widget .timer-bar {
  height: 100%;
  width: 100%;
  background: #26d0ce;
  border-radius: 4px;
  transition: width 0.1s linear;
}

.word-sequence-widget .recall-prompt {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 500;
}

.word-sequence-widget .choices-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  flex-grow: 1;
}

.word-sequence-widget .choice-btn {
  padding: 1.5rem 1rem;
  font-size: 1.2rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 5px;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.word-sequence-widget .choice-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.word-sequence-widget .choice-btn.correct {
  background: #28a745;
  border-color: #28a745;
  transform: scale(1.05);
}

.word-sequence-widget .choice-btn.incorrect {
  background: #dc3545;
  border-color: #dc3545;
  animation: shake-horizontal 0.4s ease-in-out;
}

.word-sequence-widget .choice-btn:disabled {
  cursor: not-allowed;
  opacity: 0.8;
}

.word-sequence-widget .game-over-summary {
  text-align: center;
  font-size: 1.5rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
}

.word-sequence-widget .word-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.5rem;
  max-height: 300px;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.word-sequence-widget .word-list-grid::-webkit-scrollbar {
  width: 8px;
}

.word-sequence-widget .word-list-grid::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

.word-sequence-widget .word-list-grid::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.word-sequence-widget .word-list-item {
  background: rgba(255, 255, 255, 0.05);
  padding: 0.5rem;
  text-align: center;
  border-radius: 3px;
}

.word-sequence-widget .choice-btn.incorrect {
  animation: shake-horizontal 0.4s ease-in-out;
}

.ip-info-list {
  max-height: 400px;
  overflow: auto;
  padding: 10px;
}

.ip-info-list::-webkit-scrollbar {
  width: 8px;
}

.ip-info-list::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

.ip-info-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

/* ASCII Art Widget */
.ascii-art-widget {
  min-height: 450px;
  display: flex;
  flex-direction: column;
}

.ascii-tabs {
  display: flex;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 1rem;
}

.ascii-tab-btn {
  padding: 0.75rem 1rem;
  cursor: pointer;
  background: none;
  border: none;
  color: white;
  opacity: 0.7;
  position: relative;
  font-size: 1rem;
  transition: opacity 0.2s;
}

.ascii-tab-btn:hover {
  opacity: 1;
}

.ascii-tab-btn.active {
  opacity: 1;
  font-weight: 500;
}

.ascii-tab-btn.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: #26d0ce;
}

.ascii-tab-content {
  display: none;
  flex-direction: column;
  gap: 1rem;
}

.ascii-tab-content.active {
  display: flex;
}

.ascii-output-container {
  position: relative;
  margin-top: 1rem;
}

.ascii-output-display {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  padding: 1rem;
  font-family: monospace;
  font-size: 8px;
  /* Small font size for detail */
  line-height: 1.1;
  white-space: pre;
  overflow: auto;
  min-height: 150px;
  max-height: 300px;
  border: 1px solid var(--glass-border);
}

.expand-ascii-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  color: white;
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: all 0.2s;
}

.expand-ascii-btn:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.2);
}

.ascii-controls {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.ascii-controls .bg-select {
  flex-grow: 1;
}

.ascii-controls .modal-btn {
  padding: 0.5rem;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
}

.ascii-history {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--glass-border);
}

.ascii-history-list {
  max-height: 150px;
  overflow-y: auto;
  padding-right: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ascii-history-list::-webkit-scrollbar {
  width: 8px;
}

.ascii-history-list::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

.ascii-history-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.ascii-history-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(255, 255, 255, 0.05);
  padding: 0.5rem;
  border-radius: 4px;
}

.ascii-history-preview {
  width: 60px;
  height: 60px;
  background-color: rgba(0, 0, 0, 0.3);
  background-size: cover;
  background-position: center;
  font-family: monospace;
  font-size: 3px;
  line-height: 1.1;
  overflow: hidden;
  white-space: pre;
  border-radius: 3px;
  flex-shrink: 0;
}

.ascii-history-info {
  flex-grow: 1;
  font-size: 0.9rem;
  overflow: hidden;
}

.ascii-history-info span {
  display: block;
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ascii-history-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.ascii-history-actions button {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  color: white;
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.ascii-history-actions button:hover {
  background: rgba(255, 255, 255, 0.2);
}

.ascii-history-actions button.delete:hover {
  background: rgba(220, 53, 69, 0.7);
}

#asciiArtModal .modal-content {
  width: 90vw;
  max-width: 1200px;
  height: 90vh;
  display: flex;
  flex-direction: column;
}

#asciiArtModal .ascii-modal-display {
  flex-grow: 1;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  padding: 1rem;
  overflow: auto;
  font-family: monospace;
  font-size: 10px;
  line-height: 1;
  white-space: pre;
}

#asciiArtModal .ascii-instructions {
  margin-top: 1rem;
  font-size: 0.9rem;
  opacity: 0.8;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.2);
  padding: 0.75rem;
  border-radius: 5px;
}

#asciiArtModal .ascii-controls {
  margin-top: 0;
  margin-bottom: 1rem;
  flex-shrink: 0;
  justify-content: flex-end;
}

#asciiArtModal h3 {
  margin-right: auto;
}

.ascii-tab-content.active {
  display: flex;
}

.ascii-image-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  width: 100%;
}

.ascii-image-controls .form-group {
  margin-bottom: 0;
  /* Override default form-group margin */
}

.ascii-image-controls .form-group:nth-child(1) {
  flex: 2 1 150px;
}

.ascii-image-controls .form-group:nth-child(2) {
  flex: 1 1 80px;
}

.ascii-image-controls .form-group:nth-child(3) {
  flex: 1 1 60px;
  padding-bottom: 0.5rem;
}

.ascii-output-container {
  position: relative;
  margin-top: 1rem;
}

.ascii-history {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--glass-border);
  width: 100%;
  display: none;
  /* Hide history by default */
}

.ascii-history.visible {
  display: block;
}

.ascii-history-list {
  max-height: 400px;
  width: 100%;
  overflow-y: auto;
}

.ascii-output-display::-webkit-scrollbar {
  width: 8px;
}

.ascii-output-display::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

.ascii-output-display::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

/* Dictionary Widget */
.dictionary-widget {
  display: flex;
  flex-direction: column;
  min-height: 400px;
  /* Or a suitable height */
}

.dictionary-search-area {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.dictionary-input {
  flex-grow: 1;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 2rem;
  color: white;
  outline: none;
}

.dictionary-input:focus {
  background: rgba(255, 255, 255, 0.2);
}

.dictionary-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  color: white;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.dictionary-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.dictionary-btn.search-btn {
  background: #26d0ce;
}

.dictionary-btn.voice-search-btn.listening {
  background-color: #dc3545;
  animation: pulse 1.5s infinite;
}

.dictionary-tabs {
  display: flex;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 1rem;
}

.dictionary-tab-btn {
  padding: 0.75rem 1rem;
  cursor: pointer;
  background: none;
  border: none;
  color: white;
  opacity: 0.7;
  position: relative;
  font-size: 1rem;
  transition: opacity 0.2s;
}

.dictionary-tab-btn:hover {
  opacity: 1;
}

.dictionary-tab-btn.active {
  opacity: 1;
  font-weight: 500;
}

.dictionary-tab-btn.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: #26d0ce;
}

.dictionary-content {
  flex-grow: 1;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.dictionary-content::-webkit-scrollbar {
  width: 8px;
}

.dictionary-content::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

.dictionary-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.dictionary-tab-content {
  display: none;
}

.dictionary-tab-content.active {
  display: block;
}

.dictionary-initial-message,
.dictionary-error-message {
  text-align: center;
  padding: 2rem;
  opacity: 0.6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.dictionary-initial-message.hidden,
.dictionary-error-message.hidden,
.dictionary-result-container.hidden {
  display: none;
}

.dictionary-initial-message i,
.dictionary-error-message i {
  font-size: 5rem;
  margin-bottom: 1rem;
}

.dictionary-result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.word-title {
  font-size: 2rem;
  font-weight: 500;
  color: #26d0ce;
  word-break: break-all;
}

.word-phonetic {
  font-size: 1rem;
  opacity: 0.8;
}

.dictionary-result-header .dictionary-btn {
  width: 38px;
  height: 38px;
}

.dictionary-result-header>div:last-child {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.bookmark-btn.bookmarked i {
  font-weight: 900;
  /* Use fas for solid icon */
  color: #26d0ce;
}

.history-item-favicon {
  flex-shrink: 0;
  /* Prevent shrinking */
  width: 27px;
  /* Fixed width container for favicon */
  height: 27px;
  /* Fixed height container */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.75rem;
  /* Space between favicon and main content */
}

.history-item-favicon img {
  width: 27px;
  height: 27px;
  display: block;
}

.bookmark-item-favicon {
  flex-shrink: 0;
  /* Prevent shrinking */
  width: 27px;
  /* Fixed width container for favicon */
  height: 27px;
  /* Fixed height container */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.75rem;
  /* Space between favicon and main content */
}

.bookmark-item-favicon img {
  width: 27px;
  height: 27px;
  display: block;
}

.meaning {
  margin-bottom: 1.5rem;
}

.meaning-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.part-of-speech {
  font-weight: 500;
  font-style: italic;
  font-size: 1.1rem;
}

.meaning-header-line {
  flex-grow: 1;
  height: 1px;
  background: var(--glass-border);
}

.definition-item {
  margin-bottom: 0.75rem;
  padding-left: 1.5rem;
  position: relative;
}

.definition-item::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #26d0ce;
}

.definition-text {
  display: block;
}

.definition-example {
  display: block;
  opacity: 0.7;
  font-style: italic;
  margin-top: 0.25rem;
  padding-left: 1rem;
  border-left: 2px solid var(--glass-border);
}

.synonyms,
.antonyms {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.synonyms strong,
.antonyms strong {
  margin-right: 0.5rem;
  opacity: 0.8;
}

.synonym-tag,
.antonym-tag {
  background: rgba(255, 255, 255, 0.1);
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.2s;
}

.synonym-tag:hover,
.antonym-tag:hover {
  background: rgba(255, 255, 255, 0.2);
}

.dictionary-history-list,
.dictionary-bookmarks-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0;
}

.dictionary-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

.dictionary-list-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.dictionary-list-item button {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  opacity: 0.7;
  font-size: 1.2rem;
  padding: 0 0.5rem;
}

.dictionary-list-item button:hover {
  opacity: 1;
  color: #dc3545;
}

/* Steganography Widget */
.steganography-widget {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 450px;
}

.steg-main-view,
.steg-history-view {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.steg-main-view.hidden,
.steg-history-view.hidden {
  display: none;
}

.steg-image-area {
  position: relative;
  min-height: 150px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--glass-border);
  overflow: hidden;
}

.steg-image-area.has-image {
  border-style: solid;
}

.steg-image-area img {
  max-width: 100%;
  max-height: 250px;
  object-fit: contain;
}

.steg-image-upload-label {
  cursor: pointer;
  text-align: center;
  padding: 1rem;
}

.steg-image-upload-label i {
  font-size: 2rem;
  display: block;
  margin-bottom: 0.5rem;
}

.steg-image-info {
  position: absolute;
  bottom: 5px;
  left: 5px;
  background: rgba(0, 0, 0, 0.6);
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  font-size: 0.8rem;
}

.steg-remove-image-btn {
  position: absolute;
  top: 5px;
  right: 5px;
}

.steg-action-select {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.steg-password-area {
  position: relative;
}

.steg-password-area .modal-input {
  padding-right: 40px;
}

.steg-password-area .steg-password-toggle {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  opacity: 0.7;
  width: 38px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2;
}

.steg-password-area .steg-password-toggle:hover {
  opacity: 1;
}

.steg-password-area .copy-password-btn {
  position: absolute;
  right: 1px;
  top: 50%;
  transform: translateY(-50%);
  height: 33px;
  width: 38px;
  border-radius: 0 3px 3px 0;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  cursor: pointer;
}

.steg-password-area .copy-password-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.steg-message-area {
  position: relative;
}

.steg-message-area textarea {
  width: 100%;
  min-height: 100px;
  resize: vertical;
  padding-right: 45px;
}

.steg-message-area textarea::-webkit-scrollbar {
  width: 8px;
}

.steg-message-area textarea::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

.steg-message-area textarea::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.steg-message-area .steg-voice-btn {
  position: absolute;
  right: 10px;
  bottom: 18px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}

.steg-message-area .steg-voice-btn.listening {
  background-color: #dc3545;
  animation: pulse 1.5s infinite;
}

.steg-progress-area {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.steg-progress-bar {
  height: 100%;
  width: 0%;
  background: #26d0ce;
  transition: width 0.3s ease;
}

.steg-status {
  text-align: center;
  font-size: 0.9rem;
  min-height: 1.2em;
}

.steg-result-area {
  background: rgba(0, 0, 0, 0.3);
  padding: 1rem;
  border-radius: 5px;
  word-break: break-word;
  white-space: pre-wrap;
}

.steg-history-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 400px;
  overflow-y: auto;
}

.steg-history-list::-webkit-scrollbar {
  width: 8px;
}

.steg-history-list::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

.steg-history-item {
  background: rgba(255, 255, 255, 0.05);
  padding: 0.75rem 1rem;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.steg-history-info {
  flex-grow: 1;
  overflow: hidden;
}

.steg-history-info strong {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.steg-history-info span {
  font-size: 0.8rem;
  opacity: 0.7;
  font-family: monospace;
}

.steg-capacity-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.6rem 0.8rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.8rem;
  flex-wrap: wrap;
}

.steg-capacity-info p {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-width: 100px;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.steg-capacity-info strong {
  opacity: 0.7;
  font-weight: 600;
  /* margin-bottom: 2px; */
  margin: 2px auto;
}

.steg-capacity-info span {
  margin: 0px auto;
}

/* Text-to-Speech Widget Styles */
.tts-widget {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tts-textarea {
  width: 100%;
  min-height: 100px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 0.5rem;
  padding: 0.75rem;
  color: white;
  resize: vertical;
  font-family: 'Inter', sans-serif;
}

.tts-controls {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.tts-btn {
  padding: 0.75rem;
  background: rgba(38, 208, 206, 0.7);
  border: 1px solid var(--glass-border);
  border-radius: 3px;
  color: white;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.tts-btn:hover:not(:disabled) {
  background: rgba(38, 208, 206, 1);
}

.tts-btn:disabled {
  background: rgba(255, 255, 255, 0.2);
  cursor: not-allowed;
  opacity: 0.7;
}

.tts-visualization {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 60px;
  margin: 1rem 0;
}

.tts-vis-icon {
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.3s;
}

.tts-vis-bar {
  width: 6px;
  height: 10px;
  background-color: var(--glass-border);
  border-radius: 3px;
  transition: height 0.3s ease-in-out;
}

.tts-visualization.active .tts-vis-icon {
  color: #26d0ce;
}

.tts-visualization.active .tts-vis-bar {
  animation: tts-wave 1.2s infinite ease-in-out;
}

.tts-visualization.active .tts-vis-bar:nth-child(2) {
  animation-delay: 0.2s;
}

.tts-visualization.active .tts-vis-bar:nth-child(4) {
  animation-delay: 0.4s;
}

.tts-visualization.active .tts-vis-bar:nth-child(5) {
  animation-delay: 0.6s;
}

@keyframes tts-wave {

  0%,
  100% {
    height: 10px;
  }

  50% {
    height: 50px;
  }
}

.tts-sliders {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.slider-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.slider-group label {
  flex-shrink: 0;
  width: 100px;
  /* Align sliders */
}

.tts-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
}

.tts-actions .tts-btn {
  flex: 1;
  background: rgba(255, 255, 255, 0.1);
}

.tts-actions .tts-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.2);
}

.tts-play-pause-btn.playing {
  background: rgba(38, 208, 206, 0.7);
}

/* Wikipedia Widget */
.wikipedia-widget,
.topic-summary-widget {
  display: flex;
  flex-direction: column;
  min-height: 400px;
}

.wiki-controls {
  display: flex;
  gap: 0.5rem;
}

.wiki-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  color: white;
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.wiki-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.wiki-btn.voice-search-btn.listening {
  background-color: #26d0ce;
  animation: pulse 1.5s infinite;
}

.wiki-search-area {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  margin-top: 20px;
  position: relative;
  /* For dropdown */
}

.wiki-search-area .search-bar {
  flex-grow: 1;
  margin: 0;
  padding: 0.5rem 1rem;
}

.wiki-content-area,
.summary-content-area {
  flex-grow: 1;
  position: relative;
  display: flex;
  flex-direction: column;
}


.wiki-loader,
.summary-loader {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.wiki-loader::after,
.summary-loader::after {
  content: '';
  width: 40px;
  height: 40px;
  border: 4px solid var(--glass-border);
  border-top-color: #26d0ce;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.wiki-result,
.summary-result {
  display: none;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 400px;
  padding-right: 10px;
}

.summary-result::-webkit-scrollbar {
  width: 8px;
}

.summary-result::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

.summary-result::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.wiki-result::-webkit-scrollbar {
  width: 8px;
}

.wiki-result::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

.wiki-result::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.wiki-title,
.summary-title {
  font-size: 1.3rem;
  font-weight: 500;
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 0.5rem;
}

.wiki-main {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.wiki-image,
.summary-image {
  float: left;
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 5px;
  margin-right: 1rem;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--glass-border);
  display: none;
  /* Hidden by default */
}

.summary-image {
  width: 100%;
  height: 150px;
  margin-bottom: 1rem;
  float: none;
}

.wiki-summary,
.summary-text {
  flex: 1;
  line-height: 1.6;
  opacity: 0.9;
  font-size: 0.95rem;
  text-align: justify;
}

.wiki-link {
  margin-top: auto;
  padding-top: 1rem;
  color: #26d0ce;
  text-decoration: none;
  font-weight: 500;
  align-self: flex-start;
}

.wiki-link:hover {
  text-decoration: underline;
}

.wiki-placeholder,
.summary-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
}

.wiki-placeholder i,
.summary-placeholder i {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.wiki-history-list,
.summary-history-list {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--glass-bg);
  z-index: 10;
  flex-direction: column;
  overflow-y: auto;
}

.wiki-history-list h4,
.summary-history-list h4 {
  padding: 1rem;
  border-bottom: 1px solid var(--glass-border);
}

.history-item {
  padding: 1rem;
  cursor: pointer;
  border-bottom: 1px solid var(--glass-border);
  transition: background 0.2s;
}

.history-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.history-item:last-child {
  border-bottom: none;
}

.wiki-more-controls .wiki-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: 5px;
  padding: 0.5rem;
  z-index: 10;
  width: 180px;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
}

.wiki-more-controls .wiki-dropdown.show {
  display: block;
}

.wiki-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.2s;
  width: 100%;
  background: none;
  border: none;
  color: white;
  text-align: left;
  font-size: 0.95rem;
}

.wiki-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.wiki-dropdown-item i {
  width: 20px;
  text-align: center;
}

/* Network Inspector Widget */
.network-inspector-widget {
  /* grid-column: 1 / -1; */
  grid-column: span 3;
  display: flex;
  flex-direction: column;
  min-height: 550px;
  max-height: 70vh;
}

.network-search-input {
  padding: 10px 20px;
  border-radius: 5px;
  width: 100px;
  max-width: 40%;
  margin-right: 380px;
  /* margin: 20px auto;*/
  /*max-width: 90%; 
  margin-top: 20px; 
  margin-bottom: 20px; 
  margin-left: 10px;*/
}

.network-inspector-widget.paused {
  opacity: 0.8;
}

.network-inspector-widget .widget-header {
  flex-shrink: 0;
}

.network-controls {
  display: flex;
  align-items: center;
}

.network-inspector-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow: hidden;
  margin-bottom: 10px;
  margin-top: 10px;
  /* Prevent content from overflowing the widget */
}

.inspector-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  flex-shrink: 0;
  padding: 0 0.5rem;
}

.filter-buttons,
.action-buttons {
  display: flex;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  padding: 0.25rem;
  border-radius: 5px;
}

.filter-btn,
.action-btn {
  padding: 0.4rem 0.8rem;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.2s;
  font-size: 0.85rem;
}

.filter-btn:hover,
.action-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.filter-btn.active {
  background: #26d0ce;
}

.action-btn i {
  margin-right: 0.5rem;
}

.inspector-main {
  flex-grow: 1;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.5rem;
  overflow-y: hidden;
}

.request-list-container {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--glass-border) transparent;
  padding-right: 10px;
}

.request-list-container::-webkit-scrollbar {
  width: 10px;
  min-width: 8px;
}

.request-list-container::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 5px;
}

.request-list-header {
  display: grid;
  grid-template-columns: 4fr 1fr 1fr 1fr 1fr 40px;
  gap: 1rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--glass-border);
  position: sticky;
  top: 0;
  background: var(--glass-bg);
  z-index: 2;
  font-size: 0.9rem;
  opacity: 0.8;
}

.col-status,
.col-size,
.col-time {
  text-align: right;
}

.request-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
}

.request-list[data-filter="xhr"] .request-item:not([data-type="xhr"]),
.request-list[data-filter="script"] .request-item:not([data-type="script"]),
.request-list[data-filter="image"] .request-item:not([data-type="image"]),
.request-list[data-filter="media"] .request-item:not([data-type="media"]),
.request-list[data-filter="font"] .request-item:not([data-type="font"]),
.request-list[data-filter="other"] .request-item:not([data-type="other"]) {
  display: none;
}

.request-summary {
  display: grid;
  grid-template-columns: 4fr 1fr 1fr 1fr 1fr 40px;
  gap: 1rem;
  align-items: center;
  padding: 0.6rem 1rem;
  transition: background 0.2s;
}

.request-item:hover .request-summary {
  background: rgba(255, 255, 255, 0.05);
}

.col-name {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  overflow: hidden;
}

.request-favicon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 3px;
}

.request-url-container {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.request-url {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.request-domain {
  font-size: 0.8rem;
  opacity: 0.6;
}

.status-code {
  font-weight: 500;
}

.status-code.s-2 {
  color: #81c784;
}

.status-code.s-3 {
  color: #ffd54f;
}

.status-code.s-4,
.status-code.s-5 {
  color: #e57373;
}

.col-type {
  text-transform: capitalize;
  opacity: 0.8;
}

.details-toggle-btn {
  background: none;
  border: none;
  color: white;
  opacity: 0.7;
  cursor: pointer;
  transition: transform 0.3s;
}

.request-item.open .details-toggle-btn {
  transform: rotate(180deg);
  opacity: 1;
}

.request-details {
  display: none;
  background: rgba(0, 0, 0, 0.2);
  padding: 1rem;
  font-size: 0.9rem;
  line-height: 1.6;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.request-item.open .request-details {
  display: block;
}

.detail-item {
  margin-bottom: 0.5rem;
}

.detail-item strong {
  opacity: 0.8;
  margin-right: 0.5rem;
}

.detail-item span {
  word-break: break-all;
}

.detail-item pre {
  background: rgba(0, 0, 0, 0.3);
  padding: 0.5rem;
  border-radius: 3px;
  margin-top: 0.25rem;
  font-size: 0.85rem;
  white-space: pre-wrap;
}

.domain-graph-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;
  padding-right: 10px;
}

.domain-graph-container::-webkit-scrollbar {
  width: 8px;
  min-width: 8px;
}

.domain-graph-container::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

.domain-graph-container h4 {
  font-weight: 500;
  opacity: 0.9;
  flex-shrink: 0;
}

.domain-graph {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.domain-graph-bar {
  font-size: 0.85rem;
}

.graph-bar-label {
  display: block;
  margin-bottom: 0.25rem;
  opacity: 0.8;
}

.graph-bar-value-bg {
  background: #26d0ce;
  border-radius: 3px;
  padding: 0.25rem 0.5rem;
  color: #0c2020;
  min-width: 25px;
  transition: width 0.4s ease;
  white-space: nowrap;
}

/* Tab Group Manager Widget */
.tab-group-manager-widget .widget-header {
  flex-shrink: 0;
}

.tab-group-search-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  padding: 0 0 1rem 0;
}

.tab-group-search {
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.1);
  color: white;
  outline: none;
  font-size: 0.9rem;
  width: 90%;
  max-width: 400px;
  transition: all 0.3s ease;
}

.tab-group-search:focus {
  background: rgba(255, 255, 255, 0.2);
}

.tab-manager-controls {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 0.5rem;
  flex-shrink: 0;
}

.tab-manager-btn {
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 3px;
  color: white;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.2s;
}

.tab-manager-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.2);
}

.tab-manager-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tab-manager-btn i {
  margin-right: 0.5rem;
}

.tab-manager-content {
  flex-grow: 1;
  overflow-y: auto;
  padding-right: 0.5rem;
  /* Space for scrollbar */
}

.tab-manager-content::-webkit-scrollbar {
  width: 8px;
}

.tab-manager-content::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

.tab-manager-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.ungrouped-tabs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  margin-bottom: 0.5rem;
}

.ungrouped-tabs-header h4 {
  font-weight: 500;
}

.ungrouped-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.tab-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.tab-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.1);
  transition: background 0.2s;
}

.tab-item:hover {
  background: rgba(0, 0, 0, 0.2);
}

.tab-item .tab-favicon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
}

.tab-item .tab-title {
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.9rem;
}

.tab-item .tab-actions {
  display: flex;
  gap: 0.5rem;
  visibility: hidden;
}

.tab-item:hover .tab-actions {
  visibility: visible;
}

.tab-action-btn {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  opacity: 0.7;
  padding: 0.25rem;
}

.tab-action-btn:hover {
  opacity: 1;
}

.tab-action-btn.bookmarked {
  color: #26d0ce;
  opacity: 1;
}

.tab-group-item {
  margin-top: 1rem;
  border-radius: 5px;
  overflow: hidden;
}

.tab-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0.75rem;
  cursor: pointer;
  transition: background 0.2s;
  background: rgba(255, 255, 255, 0.1);
  flex-wrap: wrap;
  min-width: 0;
}

.tab-group-header:hover {
  background: rgba(255, 255, 255, 0.15);
}

.tab-group-color-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tab-group-name {
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.tab-group-timestamp {
  font-size: 0.8rem;
  opacity: 0.7;
  flex-shrink: 0;
}

.tab-group-actions {
  display: flex;
  flex-wrap: wrap;
  /* allow buttons to wrap if needed */
  gap: 4px;
  margin-left: auto;
  /* push actions to right of row */
  flex: 0 0 auto;
}

.tab-group-actions .tab-action-btn {
  visibility: visible;
}

.tab-group-body {
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.2);
  display: block;
}

.tab-group-item.collapsed .tab-group-body {
  display: none;
}

.tab-group-item.collapsed .tab-group-header .collapse-icon {
  transform: rotate(-90deg);
}

.collapse-icon {
  transition: transform 0.2s;
}

.tab-group-item.startup-group .tab-action-btn[data-action="set-startup"] {
  color: #26d0ce;
  opacity: 1;
}

/* Color Palette in Modal */
.color-palette {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.color-palette .color-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s, transform 0.2s;
}

.color-palette .color-dot:hover {
  transform: scale(1.1);
}

.color-palette .color-dot.selected {
  border-color: white;
}

/* Tab Colors */
.color-grey {
  background-color: #5f6368;
}

.color-blue {
  background-color: #1a73e8;
}

.color-red {
  background-color: #d93025;
}

.color-yellow {
  background-color: #f9ab00;
}

.color-green {
  background-color: #1e8e3e;
}

.color-pink {
  background-color: #d01884;
}

.color-purple {
  background-color: #a142f4;
}

.color-cyan {
  background-color: #007b83;
}

.color-orange {
  background-color: #e8710a;
}

/* Voice Changer Widget */
.voice-changer-widget .voice-list-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
  max-height: 150px;
  overflow-y: auto;
  padding-right: 10px;
}

.voice-list-container::-webkit-scrollbar {
  width: 8px;
}

.voice-list-container::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

.voice-list-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.voice-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.2s;
  flex-grow: 1;
}

.voice-item:hover {
  background: rgba(255, 255, 255, 0.2);
}

.voice-item.selected {
  background: #26d0ce;
  border-color: #26d0ce;
}

.voice-sample-btn {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 1rem;
  padding: 0 0 0 0.5rem;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.voice-sample-btn:hover {
  opacity: 1;
}

.voice-changer-main {
  padding: 1.5rem 0;
  text-align: center;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.voice-changer-status {
  font-size: 1.1rem;
  opacity: 0.9;
}

.voice-changer-controls {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
  border-top: 1px solid var(--glass-border);
  padding-top: 1rem;
}

.voice-changer-btn {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid var(--glass-border);
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.voice-changer-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.05);
}

.record-btn {
  background-color: rgba(220, 53, 69, 0.4);
}

.record-btn:hover {
  background-color: rgba(220, 53, 69, 0.6);
}

.stop-btn {
  animation: pulse 1.5s infinite;
}

/* Fortune Teller Widget */
.fortune-teller-widget {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.fortune-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding: 0 1rem;
  position: relative;
  overflow: hidden;
}

.fortune-icon-container {
  font-size: 3rem;
  color: #e91e63;
  margin-bottom: 1rem;
  transition: transform 0.3s ease;
  z-index: 10;
}

.fortune-icon-container.animating {
  animation: rainbow-glow 1s infinite alternate, shake 0.5s infinite;
}

@keyframes rainbow-glow {
  0% {
    filter: drop-shadow(0 0 5px #ff0000);
    transform: scale(1);
  }

  20% {
    filter: drop-shadow(0 0 10px #ff7f00);
  }

  40% {
    filter: drop-shadow(0 0 5px #ffff00);
    transform: scale(1.1);
  }

  60% {
    filter: drop-shadow(0 0 10px #00ff00);
  }

  80% {
    filter: drop-shadow(0 0 5px #0000ff);
    transform: scale(1);
  }

  100% {
    filter: drop-shadow(0 0 10px #8b00ff);
  }
}

@keyframes shake {

  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-5px) rotate(-2deg);
  }

  75% {
    transform: translateX(5px) rotate(2deg);
  }
}

.luck-meter-container {
  width: 100%;
  margin-bottom: 1rem;
}

.luck-meter-label {
  font-size: 0.9rem;
  opacity: 0.8;
  margin-bottom: 0.5rem;
}

.luck-meter-bar {
  width: 100%;
  height: 10px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  overflow: hidden;
}

.luck-meter-fill {
  height: 100%;
  width: 0%;
  border-radius: 5px;
  background: linear-gradient(90deg, #26d0ce, #e91e63);
  transition: width 1s ease-out, background 1s ease-out;
}

.fortune-display {
  min-height: 100px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fortune-flipper {
  position: absolute;
  font-size: 1.1rem;
  opacity: 0.7;
}

.final-fortune-container {
  opacity: 0;
  transition: opacity 0.5s ease-in;
}

.final-fortune-text {
  font-size: 1.1rem;
  line-height: 1.5;
  font-weight: 500;
  min-height: 50px;
}

.fortune-rank {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid white;
  border-radius: 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.5s;
}

.fortune-advice {
  font-size: 0.9rem;
  opacity: 0;
  margin-top: 1rem;
  margin-bottom: 5px;
  font-style: italic;
  transition: opacity 0.5s ease-in 0.2s;
}

.fortune-controls {
  display: flex;
  gap: 1rem;
  justify-content: center;
  padding-top: 1.5rem;
  border-top: 1px solid var(--glass-border);
}

.fortune-btn {
  padding: 0.75rem 1.25rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 5px;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s;
}

.fortune-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.fortune-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.generate-fortune-btn {
  background: rgba(38, 208, 206, 0.3);
}

.generate-fortune-btn:hover:not(:disabled) {
  background: rgba(38, 208, 206, 0.5);
}

.confetti-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 100;
}

.confetti-piece {
  position: absolute;
  width: 8px;
  height: 16px;
  background: #f00;
  top: -20px;
  opacity: 0;
  animation: confetti-fall 3s ease-in-out forwards;
}

@keyframes confetti-fall {
  0% {
    transform: translateY(0) rotate(0);
    opacity: 1;
  }

  100% {
    transform: translateY(120vh) rotate(720deg);
    opacity: 0;
  }
}

/* Downloads History Widget */
.downloads-history-widget {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 400px;
  grid-column: span 2;
}

.downloads-controls {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.downloads-search {
  flex-grow: 1;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 3px;
  color: white;
}

.delete-selected-btn {
  padding: 0.5rem 1rem;
  background: rgba(220, 53, 69, 0.4);
  border: 1px solid var(--glass-border);
  border-radius: 3px;
  color: white;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.delete-selected-btn:hover:not(:disabled) {
  background: rgba(220, 53, 69, 0.6);
}

.delete-selected-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.downloads-filter-sort {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.downloads-filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.file-type-filters {
  display: flex;
  gap: 0.5rem;
}

.file-type-filter-btn {
  padding: 0.3rem 0.6rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 1rem;
  color: white;
  cursor: pointer;
  font-size: 0.8rem;
}

.file-type-filter-btn.active {
  background: #26d0ce;
  border-color: #26d0ce;
}

.downloads-sort {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.downloads-list-header {
  display: grid;
  grid-template-columns: 30px 2fr 1.5fr 1fr 1fr;
  gap: 1rem;
  padding: 0.5rem 1rem;
  font-weight: 500;
  opacity: 0.8;
  border-bottom: 1px solid var(--glass-border);
}

.downloads-list {
  flex-grow: 1;
  overflow-y: auto;
  max-height: 350px;
  min-height: 100px;
  /* Ensure it has some height even when empty */
}

.downloads-list::-webkit-scrollbar {
  width: 8px;
}

.downloads-list::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

.downloads-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.download-item {
  display: grid;
  grid-template-columns: 30px 2fr 1.5fr 1fr 1fr;
  gap: 1rem;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--glass-border);
  transition: background 0.2s;
}

.download-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.download-item:last-child {
  border-bottom: none;
}

.download-item .file-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  overflow: hidden;
}

.download-item .file-icon {
  font-size: 1.5rem;
  width: 20px;
  text-align: center;
}

/* .download-item .file-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
} */

.download-item .file-name {
  white-space: normal;
  /* allow wrapping */
  overflow: visible;
  /* allow full height */
  text-overflow: unset;
  /* no ellipsis */
  word-break: break-word;
  /* optional: break long words */
  overflow-wrap: anywhere;
  /* optional: break on any char if needed */
}


.download-item .file-date,
.download-item .file-size {
  font-size: 0.9rem;
  opacity: 0.8;
  white-space: nowrap;
}

.download-item-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.download-action-btn {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 1.1rem;
  opacity: 0.7;
  transition: all 0.2s;
  padding: 0.25rem;
}

.download-action-btn:hover {
  opacity: 1;
  transform: scale(1.1);
}

.download-action-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
}

.empty-downloads-message {
  text-align: center;
  padding: 3rem 1rem;
  opacity: 0.7;
}

.file-name.deleted {
  /* text-decoration: line-through; */
  color: #888;
  /* color: white; */
  position: relative;
}

.file-name.deleted::after {
  content: " (Deleted)";
  font-size: 0.85em;
  color: red;
  margin-left: 6px;
}

/* Pixel Art Editor */
/* .pixel-art-canvas-container {
  padding: 5px;
} */

.pixel-art-canvas-container {
  position: relative;
  width: 360px;
  height: 360px;
  /* border: 0.1px solid #ccc; */
  user-select: none;
}

.pixel-art-grid {
  display: grid;
  position: absolute;
  inset: 0;
  /* fill container */
  pointer-events: none;
  /* clicks pass through */
  background-color: transparent;
  z-index: 1;
}

.pixel-art-grid-cell {
  border: 0.1px solid rgba(128, 128, 128, 0.3);
  box-sizing: border-box;
  background-color: transparent;
  width: 100%;
  height: 100%;
}

.pixel-art-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.pixel-art-toolbar {
  margin-top: 20px;
  margin-bottom: 10px;
  margin-left: 0px auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /* ✅ allows items to wrap to the next line */
  gap: 10px;
  width: 100%;
}

.tool-group {
  display: flex;
  flex-direction: row;
  gap: 10px;
  flex-wrap: wrap;
  /* ✅ optional: allows grouped tools to wrap too */
}

.tool-btn {
  padding: 5px;
  height: 30px;
  width: 30px;
}

.tool-color-picker {
  width: 30px;
  height: 30px;

}

.grid-size-selector {
  padding: 2px;
  height: 30px;
  max-width: 130px;
}

.modal-btn.color-picker-wrapper {
  padding: 0;
  /* Padding needs to be reset for centering */
  width: 30px;
  height: 30px;
  background: transparent;
  border: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Make the color picker input fill the wrapper appropriately */
.tool-color-picker {
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

/* Chrome-specific swatch tweaks */
.tool-color-picker::-webkit-color-swatch-wrapper {
  padding: 0;
  margin: 0;
}

.tool-color-picker::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
  height: 100%;
  width: 100%;
}

/* Site Permissions Manager Widget */
.permissions-manager-widget {
  display: flex;
  flex-direction: column;
}

.permissions-controls {
  display: flex;
  gap: 5px;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--glass-border);
}

.permissions-search,
.permissions-filter {
  flex-grow: 1;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 3px;
  color: white;
  outline: none;
}

.permissions-filter option {
  background: #1a2980;
  color: white;
}

.site-list {
  flex-grow: 1;
  overflow-y: auto;
  padding-right: 0.5rem;
  /* Space for scrollbar */
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: 400px;
}

.site-list::-webkit-scrollbar {
  width: 8px;
}

.site-list::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

.site-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.site-item {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 5px;
  padding: 1rem;
}

.site-item-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.site-favicon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.site-title {
  flex-grow: 1;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-close-btn {
  background: rgba(255, 99, 71, 0.3);
  border: none;
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

.site-close-btn:hover {
  background: rgba(255, 99, 71, 0.6);
  transform: scale(1.1);
}

.permissions-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.5rem;
}

.permission-item {
  display: flex;
  flex-direction: column;
  /* stack children vertically */
  align-items: flex-start;
  /* left align children */
  gap: 2px;
  /* small vertical gap */
  padding: 0.4rem 0.6rem;
  border-radius: 3px;
  font-size: 0.9rem;
  border-left: 3px solid;
}


.permission-item.granted {
  background-color: rgba(76, 175, 80, 0.15);
  border-color: #4caf50;
}

.permission-item.prompt {
  background-color: rgba(255, 193, 7, 0.15);
  border-color: #ffc107;
}

.permission-item.denied {
  background-color: rgba(244, 67, 54, 0.15);
  border-color: #f44336;
}

.permission-icon {
  width: 16px;
  text-align: center;
  opacity: 0.8;
}

.permission-toggle-more {
  background: none;
  border: none;
  color: #26d0ce;
  cursor: pointer;
  padding-top: 0.75rem;
  font-size: 0.9rem;
}

.permission-toggle-more:hover {
  text-decoration: underline;
}

.no-results-message {
  text-align: center;
  opacity: 0.7;
  padding: 2rem;
}

/* Cookies Manager Widget */
.cookie-manager-widget {
  display: flex;
  flex-direction: column;
  min-height: 450px;
}

.cookie-controls {
  display: flex;
  gap: 5px;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--glass-border);
}

.cookie-search,
.cookie-filter {
  flex-grow: 1;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 3px;
  color: white;
  outline: none;
}

.cookie-filter option {
  background: #1a2980;
  color: white;
}

.cookie-site-list {
  flex-grow: 1;
  overflow-y: auto;
  padding-right: 0.5rem;
  /* Space for scrollbar */
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: 400px;
}

.cookie-site-list::-webkit-scrollbar {
  width: 8px;
}

.cookie-site-list::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

.cookie-site-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.cookie-site-item {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 5px;
}

.cookie-site-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--glass-border);
  cursor: pointer;
}

.cookie-count-badge {
  background: rgba(255, 255, 255, 0.1);
  padding: 0.2rem 0.5rem;
  border-radius: 10px;
  font-size: 0.8rem;
  margin-left: auto;
}

.site-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 1rem;
}

.cookie-action-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  flex-shrink: 0;
}

.cookie-action-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.cookie-action-btn.active {
  background: #26d0ce;
}

.cookie-action-btn.toggle-expand i {
  transition: transform 0.3s ease;
}

.cookie-list {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cookie-item {
  background: rgba(0, 0, 0, 0.2);
  padding: 0.75rem;
  border-radius: 4px;
  border-left: 3px solid #26d0ce;
  position: relative;
}

.cookie-main {
  margin-bottom: 0.5rem;
}

.cookie-name {
  font-weight: 500;
}

.cookie-value {
  font-family: monospace;
  font-size: 0.85rem;
  opacity: 0.8;
  word-break: break-all;
}

.cookie-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.25rem 1rem;
  font-size: 0.8rem;
  opacity: 0.9;
  margin-bottom: 0.75rem;
}

.cookie-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cookie-tag {
  font-size: 0.75rem;
  padding: 0.2rem 0.6rem;
  border-radius: 12px;
  font-weight: 500;
}

.cookie-tag.first-party {
  background: rgba(38, 208, 206, 0.3);
}

.cookie-tag.third-party {
  background: rgba(255, 193, 7, 0.3);
}

.cookie-tag.http-only {
  background: rgba(244, 67, 54, 0.3);
}

.cookie-tag.secure {
  background: rgba(76, 175, 80, 0.3);
}

.cookie-tag.samesite {
  background: rgba(255, 255, 255, 0.15);
}

.cookie-item-actions {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  gap: 0.5rem;
}

.cookie-action-btn.small {
  width: 24px;
  height: 24px;
  font-size: 0.8rem;
}

/* Habit Tracker Widget */
.habit-tracker-widget {
  display: flex;
  flex-direction: column;
  min-height: 450px;
}

.habit-tracker-controls {
  display: flex;
  gap: 5px;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--glass-border);
  flex-wrap: wrap;
}

.habit-search {
  flex-grow: 1;
  max-width: 100%;
  width: 130px;
}

.habit-search,
.habit-filter,
.habit-timeframe {
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--glass-border);
  border-radius: 3px;
  color: white;
  outline: none;
}

.habit-filter,
.habit-timeframe {
  max-width: 80px;
}

.habit-filter,
.habit-timeframe {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1em;
  padding-right: 2.5rem;
}

.habit-filter option,
.habit-timeframe option {
  background: #1a2980;
  color: white;
}

.habit-list {
  flex-grow: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-right: 0.5rem;
  max-height: 400px;
}

.habit-list::-webkit-scrollbar {
  width: 8px;
}

.habit-list::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}

.habit-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.habit-item {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 5px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.habit-item-main {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.habit-item-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-grow: 1;
  text-decoration: none;
  color: white;
  min-width: 0;
  /* Important for flexbox ellipsis */
  transition: opacity 0.2s;
}

.habit-item-link:hover {
  opacity: 0.8;
}

.habit-favicon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.habit-info {
  min-width: 0;
  /* Important for flexbox ellipsis */
}

.habit-title {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.habit-url {
  font-size: 0.85rem;
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.habit-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  text-align: right;
  min-width: 80px;
}

.habit-time {
  font-weight: 500;
  font-size: 1rem;
}

.habit-visits {
  font-size: 0.85rem;
  opacity: 0.8;
}

.habit-time-bar-container {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  margin-top: 0.5rem;
}

.habit-time-bar {
  height: 100%;
  background-color: #26d0ce;
  border-radius: 2px;
  width: 0;
  /* Set by JS */
  transition: width 0.5s ease;
}