/* ====== root variables for easy tweaking ====== */
:root {
  --accent-start: #5a9fff;
  --accent-end:   #3a7ed0;
  --bg-panel:     rgba(40,40,60,0.85);
  --fg-light:     #f0f0f0;
  --radius-lg:    12px;
  --shadow-md:    0 6px 16px rgba(0,0,0,0.4);
}

/* ====== scrollbars ====== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, var(--accent-start), var(--accent-end));
  border-radius: var(--radius-lg);
}

/* ====== notifications/toasts ====== */
.toast {
  position: fixed;
  bottom: 64px; right: 24px;
  max-width: 280px;
  background: var(--bg-panel);
  color: var(--fg-light);
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(8px);
  animation: slideIn 0.4s ease-out, fadeOut 0.4s ease-in  forwards;
  animation-delay: 0s, 3s;
}
@keyframes slideIn {
  from { transform: translateX(100%) scale(0.9); opacity: 0; }
  to   { transform: translateX(0) scale(1);    opacity: 1; }
}
@keyframes fadeOut {
  to { opacity: 0; }
}

/* ====== context menus ====== */
.context-menu {
  position: absolute;
  background: linear-gradient(145deg, #2e2e48, #1f1f33);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.context-menu li {
  list-style: none;
  padding: 8px 14px;
  cursor: pointer;
  color: var(--fg-light);
}
.context-menu li:hover {
  background: linear-gradient(145deg, #3a3a5c, #2b2b47);
}

/* ====== quick‑settings panel ====== */
#quick-settings {
  position: fixed;
  bottom: 48px; right: 0;
  width: 300px;
  background: var(--bg-panel);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-md);
  padding: 16px;
}
#quick-settings h3 {
  margin-top: 0;
  color: var(--fg-light);
}
#quick-settings .setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
#quick-settings .setting:last-child {
  margin-bottom: 0;
}

/* ====== focus rings for accessibility ====== */
:focus {
  outline: 2px solid var(--accent-start);
  outline-offset: 2px;
}

/* ====== system dialogs ====== */
.system-dialog {
  background: linear-gradient(135deg, #2a2a40, #1d1d2d);
  border-radius: var(--radius-lg);
  padding: 24px;
  max-width: 400px;
  color: var(--fg-light);
  box-shadow: 0 12px 32px rgba(0,0,0,0.6);
}
.system-dialog button {
  margin-top: 16px;
}

/* ====== merge tip ====== */
/* In your HTML head:
<link rel="stylesheet" href="assets/css/default.css">
<link rel="stylesheet" href="assets/css/additional.css">
*/