/* Trinity Desktop Preview
   Defaults from:
   - Background: flat #003082 (kcontrol/background/bgdefaults.h)
   - Icons: Crystal SVG / Crystal Remix
   - Panel: kicker defaultContainerConfig (KMenu, Home, Konq, pager, taskbar, tray, clock)
   - WM: twin + Plastik-style chrome
   - FM: Konqueror
*/

:root {
  --panel-height: 36px;

  /* KDE Default / Plastik-ish palette */
  --theme-base: #ffffff;
  --theme-bg: #e0dfde;
  --theme-fg: #000000;
  --theme-selected-bg: #0a5fd3;
  --theme-selected-fg: #ffffff;
  --theme-border: #888888;
  --theme-border-dark: #555555;
  --theme-border-light: #ffffff;
  --menu-bg: #f0f0f0;
  --menu-hover-bg: #0a5fd3;
  --menu-hover-fg: #ffffff;
  --entry-bg: #ffffff;
  --sidebar-bg: #e8e8e8;
  --button-a: #f6f6f6;
  --button-b: #d4d4d4;

  /* Twin active titlebar (classic blue) */
  --title-a: #6ea1e0;
  --title-b: #0a5fd3;
  --title-text: #ffffff;
  --title-inactive-a: #c0c0c0;
  --title-inactive-b: #8a8a8a;
  --frame-border: #0a5fd3;

  /* Kicker panel */
  --panel-bg-a: #d8d8d8;
  --panel-bg-b: #a8a8a8;
  --panel-fg: #000000;
  --panel-hover: rgba(10, 95, 211, 0.28);
  --panel-border: #6a6a6a;

  --desk-blue: #003082;
  --font: "Noto Sans", "DejaVu Sans", "Sans", "Liberation Sans", system-ui, sans-serif;
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  --transition-fast: 80ms ease;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: var(--font);
  font-size: 11px;
  color: var(--theme-fg);
  background: var(--desk-blue);
  -webkit-font-smoothing: antialiased;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

button:focus-visible {
  outline: 1px dotted #000;
  outline-offset: 1px;
}

img {
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

[hidden] {
  display: none !important;
}

/* ---------- Desktop shell ---------- */

.desktop {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.wallpaper {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--desk-blue);
}

/* ---------- Desktop icons ---------- */

.desktop-icons {
  position: absolute;
  top: 16px;
  left: 12px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 86px;
}

.desk-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px 2px;
  border-radius: 2px;
  color: #ffffff;
  text-shadow: 1px 1px 2px #000000, 0 0 3px #000000;
}

.desk-icon img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.desk-icon span {
  font-size: 11px;
  text-align: center;
  line-height: 1.15;
  max-width: 80px;
  overflow: hidden;
  word-break: break-word;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.desk-icon:hover,
.desk-icon.selected {
  background: rgba(10, 95, 211, 0.45);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

/* ---------- Kicker panel ---------- */

.panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--panel-height);
  z-index: 50;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  background: linear-gradient(to bottom, var(--panel-bg-a) 0%, var(--panel-bg-b) 55%, #969696 100%);
  color: var(--panel-fg);
  border-top: 1px solid #efefef;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 -1px 3px rgba(0, 0, 0, 0.25);
  user-select: none;
  font-size: 11px;
}

.panel-left,
.panel-right {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 0 4px;
}

.panel-left {
  flex: 1;
  overflow: hidden;
}

.panel-right {
  flex-shrink: 0;
}

.panel-sep {
  width: 2px;
  height: 22px;
  margin: 0 3px;
  background: linear-gradient(to right, #7a7a7a, #efefef);
  border-radius: 1px;
  flex-shrink: 0;
}

.kmenu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 30px;
  border-radius: 3px;
  border: 1px solid transparent;
}

.kmenu-btn:hover,
.kmenu-btn[aria-expanded="true"] {
  background: var(--panel-hover);
  border-color: rgba(0, 0, 0, 0.2);
}

.kmenu-icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.panel-launcher,
.panel-applet {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 3px;
  border: 1px solid transparent;
}

.panel-launcher img,
.panel-applet img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.panel-launcher:hover,
.panel-applet:hover {
  background: var(--panel-hover);
  border-color: rgba(0, 0, 0, 0.15);
}

/* Pager — 4 desktops */
.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1px;
  width: 44px;
  height: 28px;
  padding: 1px;
  background: #707070;
  border: 1px solid #505050;
  border-radius: 2px;
  flex-shrink: 0;
}

.pager-btn {
  background: linear-gradient(to bottom, #c8c8c8, #a0a0a0);
  border: none;
  font-size: 9px;
  color: #333;
  line-height: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pager-btn.active {
  background: linear-gradient(to bottom, #8ec0ff, #3a7fd4);
  color: #fff;
  font-weight: 600;
}

.pager-btn:hover:not(.active) {
  background: linear-gradient(to bottom, #d8d8d8, #b0b0b0);
}

/* Taskbar */
.taskbar {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  height: 100%;
  padding: 3px 0;
}

.task-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  max-width: 160px;
  min-width: 80px;
  height: 28px;
  padding: 0 8px;
  border-radius: 3px;
  border: 1px solid #6a6a6a;
  background: linear-gradient(to bottom, #f0f0f0, #c0c0c0);
  box-shadow: inset 0 1px 0 #fff;
  overflow: hidden;
  flex-shrink: 1;
}

.task-btn img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.task-btn span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}

.task-btn.active {
  background: linear-gradient(to bottom, #d0e4ff, #8ab4e8);
  border-color: #3a6aaa;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}

.task-btn.minimized {
  opacity: 0.85;
  font-style: italic;
}

.task-btn:hover {
  filter: brightness(1.05);
}

.panel-tray {
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 0 2px;
}

.panel-clock {
  display: flex;
  align-items: center;
  height: 30px;
  padding: 0 8px;
  border-radius: 3px;
  border: 1px solid transparent;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.panel-clock:hover,
.panel-clock[aria-expanded="true"] {
  background: var(--panel-hover);
  border-color: rgba(0, 0, 0, 0.15);
}

/* ---------- K Menu ---------- */

.kmenu {
  position: absolute;
  bottom: calc(var(--panel-height) + 2px);
  left: 2px;
  z-index: 80;
  display: flex;
  align-items: stretch;
  filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, 0.45));
}

.kmenu-side {
  width: 26px;
  background: linear-gradient(to bottom, #1a4a9a 0%, #0a5fd3 40%, #083a80 100%);
  border: 1px solid #062a60;
  border-right: none;
  border-radius: 4px 0 0 4px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 12px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.05em;
  line-height: 1.15;
  writing-mode: horizontal-tb;
}

.kmenu-side-text {
  text-align: center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

.kmenu-body {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

.menu-panel {
  min-width: 210px;
  max-height: min(70vh, 520px);
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--menu-bg);
  border: 1px solid #404040;
  border-radius: 0 3px 3px 0;
  padding: 2px 0;
  box-shadow: inset 1px 1px 0 #fff;
}

.kmenu-body > .menu-panel:first-child {
  border-radius: 0 3px 3px 0;
}

.menu-panel.submenu {
  position: absolute;
  left: 100%;
  bottom: 0;
  margin-left: -1px;
  border-radius: 3px;
  z-index: 2;
  min-width: 200px;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 3px 10px 3px 6px;
  text-align: left;
  color: var(--theme-fg);
  white-space: nowrap;
  min-height: 26px;
}

.menu-item:hover,
.menu-item.open,
.menu-item:focus-visible {
  background: var(--menu-hover-bg);
  color: var(--menu-hover-fg);
  outline: none;
}

.menu-item-dim {
  color: #888;
  font-style: italic;
}

.menu-item-dim:hover {
  background: transparent;
  color: #888;
  cursor: default;
}

.menu-ico {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
}

.menu-item span:not(.menu-arrow) {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-arrow {
  margin-left: 12px;
  font-size: 10px;
  opacity: 0.85;
}

.menu-sep {
  height: 1px;
  margin: 3px 4px;
  background: linear-gradient(to right, transparent, #aaa 10%, #aaa 90%, transparent);
  border-bottom: 1px solid #fff;
}

/* ---------- Twin window chrome ---------- */

.twin-window {
  position: absolute;
  z-index: 24;
  display: flex;
  flex-direction: column;
  background: var(--theme-bg);
  border: 1px solid var(--frame-border);
  border-radius: 4px 4px 2px 2px;
  box-shadow: var(--shadow);
  overflow: hidden;
  min-width: 320px;
  min-height: 200px;
}

.twin-titlebar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 4px 0 3px;
  background: linear-gradient(to bottom, var(--title-a), var(--title-b));
  color: var(--title-text);
  cursor: default;
  user-select: none;
  flex-shrink: 0;
}

.twin-menu-btn {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.twin-menu-btn img {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.twin-title {
  flex: 1;
  font-size: 11px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

.twin-buttons {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.twin-btn {
  width: 16px;
  height: 14px;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.35);
  background: linear-gradient(to bottom, #f4f4f4, #b8b8b8);
  position: relative;
  box-shadow: inset 0 1px 0 #fff;
}

.twin-btn:hover {
  filter: brightness(1.08);
}

.twin-btn:active {
  background: linear-gradient(to bottom, #b0b0b0, #d0d0d0);
}

.twin-min::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 3px;
  height: 2px;
  background: #222;
}

.twin-max::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid #222;
  border-top-width: 2px;
  background: transparent;
}

.twin-close {
  background: linear-gradient(to bottom, #f8a0a0, #d04040);
}

.twin-close::before,
.twin-close::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: 50%;
  height: 2px;
  background: #fff;
  box-shadow: 0 0 0 0.5px #400;
}

.twin-close::before {
  transform: translateY(-50%) rotate(45deg);
}

.twin-close::after {
  transform: translateY(-50%) rotate(-45deg);
}

.twin-window.maximized {
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: calc(100% - var(--panel-height)) !important;
  border-radius: 0;
  border-width: 0 0 1px 0;
}

.twin-window.minimized {
  display: none !important;
}

/* Konqueror */
.konq-window {
  top: 48px;
  left: 80px;
  width: min(920px, calc(100vw - 100px));
  height: min(580px, calc(100vh - var(--panel-height) - 70px));
}

.konq-menubar,
.term-menubar {
  display: flex;
  align-items: center;
  gap: 0;
  height: 22px;
  padding: 0 2px;
  background: var(--theme-bg);
  border-bottom: 1px solid var(--theme-border);
  flex-shrink: 0;
}

.konq-menubar-item {
  padding: 1px 8px;
  border-radius: 2px;
  font-size: 11px;
}

.konq-menubar-item:hover {
  background: var(--theme-selected-bg);
  color: var(--theme-selected-fg);
}

.konq-toolbar {
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 2px 4px;
  background: linear-gradient(to bottom, #f2f2f2, #d8d8d8);
  border-bottom: 1px solid var(--theme-border);
  flex-shrink: 0;
}

.konq-tb-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 26px;
  border-radius: 3px;
  border: 1px solid transparent;
}

.konq-tb-btn img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.konq-tb-btn:hover:not(:disabled) {
  background: rgba(10, 95, 211, 0.15);
  border-color: rgba(10, 95, 211, 0.4);
}

.konq-tb-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.konq-tb-btn.active {
  background: rgba(10, 95, 211, 0.22);
  border-color: rgba(10, 95, 211, 0.55);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
}

.konq-tb-sep {
  width: 1px;
  height: 20px;
  margin: 0 4px;
  background: #aaa;
  border-right: 1px solid #fff;
}

.konq-locationbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  background: var(--theme-bg);
  border-bottom: 1px solid var(--theme-border);
  flex-shrink: 0;
}

.konq-loc-label {
  font-size: 11px;
  color: #333;
  flex-shrink: 0;
}

.konq-location {
  flex: 1;
  min-width: 0;
  height: 22px;
  padding: 0 6px;
  font-size: 11px;
}

.konq-body {
  display: flex;
  flex: 1;
  min-height: 0;
  background: var(--theme-base);
}

.konq-sidebar {
  width: 170px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--theme-border);
}

.konq-side-tabs {
  display: flex;
  border-bottom: 1px solid var(--theme-border);
  background: #d0d0d0;
}

.konq-side-tab {
  flex: 1;
  padding: 3px 4px;
  font-size: 10px;
  border-right: 1px solid var(--theme-border);
  background: #c8c8c8;
}

.konq-side-tab.active {
  background: var(--sidebar-bg);
  font-weight: 600;
}

.konq-side-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}

.konq-side-heading {
  padding: 6px 8px 2px;
  font-size: 10px;
  font-weight: 700;
  color: #444;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.konq-side-item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 3px 8px;
  text-align: left;
  font-size: 11px;
}

.konq-side-item img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
}

.konq-side-item:hover {
  background: rgba(10, 95, 211, 0.15);
}

.konq-side-item.active {
  background: var(--theme-selected-bg);
  color: var(--theme-selected-fg);
}

.konq-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.konq-content {
  flex: 1;
  overflow: auto;
  padding: 8px;
  background: #fff;
}

.konq-content.view-icons {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 4px 8px;
}

.konq-content.view-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

.konq-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 88px;
  padding: 6px 4px;
  border-radius: 2px;
  border: 1px solid transparent;
  text-align: center;
  font-size: 11px;
  color: #000;
}

.konq-item img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.konq-item span {
  word-break: break-word;
  line-height: 1.15;
  max-width: 80px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.konq-item:hover {
  background: rgba(10, 95, 211, 0.12);
  border-color: rgba(10, 95, 211, 0.35);
}

.konq-item.selected {
  background: var(--theme-selected-bg);
  color: var(--theme-selected-fg);
  border-color: #0849a8;
}

.view-list .konq-item {
  flex-direction: row;
  width: 100%;
  max-width: none;
  justify-content: flex-start;
  gap: 8px;
  padding: 3px 8px;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid #eee;
  text-align: left;
}

.view-list .konq-item img {
  width: 16px;
  height: 16px;
}

.view-list .konq-item span {
  max-width: none;
  -webkit-line-clamp: 1;
  flex: 1;
}

.view-list .konq-item .konq-col-size,
.view-list .konq-item .konq-col-type {
  color: #555;
  font-size: 10px;
  flex: 0 0 90px;
  text-align: right;
}

.view-list .konq-item.selected .konq-col-size,
.view-list .konq-item.selected .konq-col-type {
  color: rgba(255, 255, 255, 0.9);
}

.konq-list-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 8px;
  background: linear-gradient(to bottom, #eee, #d8d8d8);
  border-bottom: 1px solid #aaa;
  font-size: 10px;
  font-weight: 600;
  color: #333;
  position: sticky;
  top: 0;
  z-index: 1;
}

.konq-list-header span:first-child {
  flex: 1;
  padding-left: 24px;
}

.konq-list-header span:not(:first-child) {
  flex: 0 0 90px;
  text-align: right;
}

.konq-statusbar {
  display: flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  background: var(--theme-bg);
  border-top: 1px solid var(--theme-border);
  font-size: 10px;
  color: #333;
  flex-shrink: 0;
}

/* Konsole */
.term-window {
  top: 100px;
  left: 140px;
  width: min(680px, calc(100vw - 160px));
  height: min(400px, calc(100vh - var(--panel-height) - 120px));
}

.term-body {
  flex: 1;
  min-height: 0;
  background: #000000;
  color: #33ff33;
  padding: 6px 8px;
  overflow: auto;
}

.term-output {
  margin: 0;
  font-family: "DejaVu Sans Mono", "Noto Sans Mono", "Liberation Mono", ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.35;
  white-space: pre-wrap;
}

.term-cursor {
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* ---------- Dialogs ---------- */

.dialog-backdrop {
  position: absolute;
  inset: 0;
  z-index: 90;
  background: rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}

.run-window {
  width: 420px;
  min-height: auto;
  position: relative;
}

.logout-window {
  width: 480px;
  min-height: auto;
  position: relative;
}

.run-body,
.logout-body {
  padding: 14px 16px;
  background: var(--theme-bg);
}

.run-prompt,
.logout-msg {
  margin: 0 0 12px;
  line-height: 1.4;
}

.run-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.run-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.run-input {
  flex: 1;
  height: 24px;
  padding: 0 6px;
}

.run-check {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  font-size: 11px;
}

.run-actions,
.logout-footer {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.logout-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

.logout-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px !important;
  min-height: 72px;
}

.logout-action img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

/* TDE widgets */
.tde-entry {
  background: var(--entry-bg);
  border: 1px solid #7a7a7a;
  border-radius: 2px;
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.08);
  color: #000;
  font: inherit;
}

.tde-entry:focus {
  outline: 1px solid var(--theme-selected-bg);
  border-color: var(--theme-selected-bg);
}

.tde-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 72px;
  height: 26px;
  padding: 0 12px;
  border-radius: 3px;
  border: 1px solid #6a6a6a;
  background: linear-gradient(to bottom, var(--button-a), var(--button-b));
  box-shadow: inset 0 1px 0 #fff;
  font-size: 11px;
}

.tde-btn:hover {
  filter: brightness(1.04);
}

.tde-btn:active {
  background: linear-gradient(to bottom, var(--button-b), var(--button-a));
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}

.tde-btn-default {
  border-color: #2a6ab8;
  background: linear-gradient(to bottom, #d0e4ff, #8ab4e8);
  font-weight: 600;
}

/* ---------- Clock calendar ---------- */

.clock-popover {
  position: absolute;
  bottom: calc(var(--panel-height) + 4px);
  right: 6px;
  z-index: 70;
  width: 240px;
  background: var(--menu-bg);
  border: 1px solid #404040;
  border-radius: 3px;
  box-shadow: var(--shadow);
  padding: 8px;
}

.cal-header {
  font-weight: 600;
  font-size: 12px;
  margin-bottom: 8px;
  text-align: center;
}

.cal-month-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.cal-nav-btn {
  width: 24px;
  height: 22px;
  border-radius: 2px;
  border: 1px solid #aaa;
  background: linear-gradient(to bottom, #f6f6f6, #d4d4d4);
  font-size: 14px;
  line-height: 1;
}

.cal-nav-btn:hover {
  background: #e8e8e8;
}

.cal-month-label {
  font-weight: 600;
  font-size: 11px;
}

.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  margin-bottom: 2px;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: #555;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}

.cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  border-radius: 2px;
}

.cal-day.muted {
  color: #aaa;
}

.cal-day.today {
  background: var(--theme-selected-bg);
  color: #fff;
  font-weight: 700;
}

.cal-day:hover:not(.muted) {
  background: rgba(10, 95, 211, 0.18);
}

/* ---------- Volume popup ---------- */

.volume-popup {
  position: absolute;
  bottom: calc(var(--panel-height) + 4px);
  right: 70px;
  z-index: 70;
  width: 200px;
  box-sizing: border-box;
  background: var(--menu-bg);
  border: 1px solid #404040;
  border-radius: 3px;
  box-shadow: var(--shadow);
  padding: 10px 12px;
  overflow: hidden;
}

.volume-popup-title {
  font-weight: 600;
  font-size: 11px;
  margin-bottom: 8px;
}

.volume-popup-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.volume-popup-row img {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.volume-popup-row input[type="range"] {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 18px;
  margin: 0;
  accent-color: var(--theme-selected-bg);
}

#volume-label {
  min-width: 36px;
  flex-shrink: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------- Toast ---------- */

.toast {
  position: absolute;
  bottom: calc(var(--panel-height) + 16px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  background: rgba(30, 30, 30, 0.92);
  color: #fff;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 12px;
  box-shadow: var(--shadow);
  pointer-events: none;
}