:root {
  --hub-background-image: url("../img/fjord-dashboard-4k.5b64e9f529fb.jpg");
  --hub-bg-x: 50%;
  --hub-bg-y: -7.421875vw;
  --hub-bg-size: 100% auto;
  --hub-bg-overlay: 0;
  --hub-bg-blur: 0px;
  --hub-bg: #061521;
  --hub-bg-deep: #04101a;
  --hub-panel-color: #0a2639;
  --hub-topbar-color: #041523;
  --hub-text: #f4f8fb;
  --hub-muted: #adc0ca;
  --hub-accent: #79bccc;
  --hub-accent-2: #a0d6df;
  --hub-highlight: #dda855;
  --hub-widget-opacity: 88%;
  --hub-settings-main-opacity: 78%;
  --hub-settings-side-opacity: 68%;
  --hub-topbar-opacity: 96%;
  --hub-hero-contrast: 40%;
  --bg: var(--hub-bg);
  --bg-deep: var(--hub-bg-deep);
  --bg-2: #08263b;
  --panel: rgba(10, 38, 57, .80);
  --panel-strong: rgba(8, 31, 48, .93);
  --panel-border: rgba(185, 219, 229, .24);
  --panel-border-strong: rgba(190, 225, 235, .42);
  --text: var(--hub-text);
  --muted: var(--hub-muted);
  --soft: #7796a7;
  --accent: var(--hub-accent);
  --accent-2: var(--hub-accent-2);
  --gold: var(--hub-highlight);
  --ok: #5bd69a;
  --warning: #d6a35a;
  --danger: #e77979;
  --grid-row-height: 176px;
  --radius: 15px;
  --shadow: 0 18px 48px rgba(0,0,0,.20);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; background: var(--bg-deep); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: linear-gradient(180deg, color-mix(in srgb, var(--hub-bg) 88%, #0b2b41) 0px, var(--hub-bg) 60px, var(--hub-bg-deep) 260px, var(--hub-bg-deep) 100%);
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before {
  content: "";
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  height: max(760px, 56.25vw);
  background-image: var(--hub-background-image);
  background-repeat: no-repeat;
  background-size: var(--hub-bg-size);
  background-position: var(--hub-bg-x) top;
  filter: blur(var(--hub-bg-blur));
  transform: translateY(var(--hub-bg-y)) scale(1.002);
  transform-origin: top center;
  pointer-events: none;
  z-index: -2;
}
body::after {
  content: "";
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  height: calc(max(760px, 56.25vw) + 4px);
  background:
    linear-gradient(rgba(4,16,26,var(--hub-bg-overlay)), rgba(4,16,26,var(--hub-bg-overlay))),
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 35%,
      color-mix(in srgb, var(--hub-bg-deep) 28%, transparent) 62%,
      var(--hub-bg-deep) calc(100% - 4px),
      var(--hub-bg-deep) 100%
    );
  transform: translateY(var(--hub-bg-y)) scale(1.002);
  transform-origin: top center;
  pointer-events: none;
  z-index: -1;
}
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
svg { display: block; }

/* Top navigation */
.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  min-height: 60px;
  display: grid;
  grid-template-columns: max-content minmax(300px, 1fr) max-content;
  align-items: center;
  gap: 24px;
  padding: 0 32px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--hub-topbar-color) var(--hub-topbar-opacity), transparent), color-mix(in srgb, var(--hub-topbar-color) calc(var(--hub-topbar-opacity) - 3%), transparent));
  border-bottom: 1px solid rgba(255,255,255,.075);
  box-shadow: 0 12px 34px rgba(0,0,0,.18);
  backdrop-filter: blur(20px);
}
.brand {
  display: inline-flex;
  gap: 11px;
  align-items: center;
  min-width: 205px;
  text-decoration: none;
  white-space: nowrap;
}
.brand-mark {
  width: 41px;
  height: 32px;
  display: grid;
  place-items: center;
  color: #d8edf1;
}
.topbar .brand-mark {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  overflow: hidden;
  border-radius: 9px;
  background: #001b3f;
  box-shadow: inset 0 0 0 1px rgba(154,205,226,.09), 0 4px 14px rgba(0,0,0,.16);
}
.brand-logo-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.18);
}
.brand-mark svg, .footer-mark svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.brand-copy { display: grid; justify-items: center; gap: 1px; text-align: center; }
.brand-copy strong { font-size: 17px; font-weight: 680; letter-spacing: -.2px; }
.brand-copy small { color: #7fa0b0; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }

.dashboard-tabs {
  display: flex;
  gap: 6px;
  align-items: center;
  min-width: 0;
  overflow-x: auto;
  padding: 4px 0;
  scrollbar-width: none;
}
.dashboard-tabs::-webkit-scrollbar { display: none; }
.nav-pill {
  position: relative;
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-height: 42px;
  padding: 8px 13px;
  border: 1px solid transparent;
  border-radius: 11px;
  text-decoration: none;
  color: #c5d7df;
  font-size: 13px;
  white-space: nowrap;
  user-select: none;
  transition: transform .16s ease, background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.nav-pill:hover { background: rgba(126,190,205,.075); color: #fff; }
.nav-pill.active {
  color: #fff;
  background: linear-gradient(180deg, rgba(111,178,194,.18), rgba(88,152,171,.11));
  border-color: rgba(159,210,220,.14);
  box-shadow: inset 0 -2px 0 #88c6d3, 0 8px 22px rgba(0,0,0,.12);
}
.nav-icon { width: 18px; height: 18px; color: #adcbd4; opacity: .96; }
.nav-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-pill.active .nav-icon { color: #dff4f7; }
.default-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 9px rgba(221,168,85,.55); }
.tab-drag-grip {
  display: inline-grid;
  place-items: center;
  width: 17px;
  color: #78a1b1;
  cursor: grab;
  font-size: 12px;
}
.is-editing .dashboard-tab { border-style: dashed; border-color: rgba(159,210,220,.15); cursor: grab; }
.is-editing .dashboard-tab:active { cursor: grabbing; }
.dashboard-tab.tab-dragging { opacity: .42; transform: scale(.98); }
.dashboard-tab.tab-drop-target { border-color: rgba(154,211,222,.50); background: rgba(117,185,201,.12); }

.icon-button, .top-icon-button {
  border: 1px solid rgba(255,255,255,.11);
  color: #d9edf1;
  background: rgba(255,255,255,.04);
  cursor: pointer;
}
.nav-add { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; font-size: 21px; line-height: 1; }
.nav-add:hover { background: rgba(117,185,201,.13); border-color: rgba(117,185,201,.28); }
.top-actions { display: flex; gap: 10px; align-items: center; }
.edit-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 39px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 10px;
  text-decoration: none;
  color: #d8e8ee;
  background: rgba(255,255,255,.035);
  white-space: nowrap;
  font-size: 12px;
  transition: .16s ease;
}
.edit-button:hover, .edit-button.active { background: rgba(117,185,201,.15); border-color: rgba(117,185,201,.4); }
.button-icon { color: #a5d2dc; }
.top-icon-button {
  position: relative;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 11px;
}
.top-icon-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.top-icon-button:hover { background: rgba(255,255,255,.07); }
.top-status-dot { position: absolute; top: 7px; right: 7px; width: 5px; height: 5px; border-radius: 50%; background: #65d79e; box-shadow: 0 0 8px rgba(101,215,158,.58); }
.user-menu { position: relative; }
.user-menu summary { list-style: none; }
.user-menu summary::-webkit-details-marker { display: none; }
.userbox {
  display: flex;
  gap: 9px;
  align-items: center;
  min-width: 150px;
  padding: 4px 5px;
  border-radius: 11px;
  color: #dce8ed;
  cursor: pointer;
}
.userbox:hover { background: rgba(255,255,255,.045); }
.user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #637e90, #263f52);
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  font-size: 13px;
  font-weight: 750;
}
.user-copy { display: grid; min-width: 0; }
.user-copy strong { max-width: 130px; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.user-copy small { color: #7f9fac; font-size: 9px; }
.chevron { color: #7f9fac; font-size: 13px; }
.user-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 9px);
  width: 220px;
  padding: 8px;
  border-radius: 13px;
  border: 1px solid rgba(192,220,229,.16);
  background: rgba(7,29,45,.98);
  box-shadow: 0 24px 60px rgba(0,0,0,.38);
  backdrop-filter: blur(20px);
}
.user-dropdown-head { display: grid; gap: 2px; padding: 10px 11px 11px; border-bottom: 1px solid rgba(255,255,255,.07); margin-bottom: 5px; }
.user-dropdown-head strong { font-size: 13px; }
.user-dropdown-head span { color: #7d9ba9; font-size: 10px; }
.user-dropdown a, .user-dropdown button {
  width: 100%;
  display: block;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  color: #cfdee5;
  background: transparent;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  font-size: 12px;
}
.user-dropdown a:hover, .user-dropdown button:hover { background: rgba(255,255,255,.055); color: #fff; }

/* Hero */
.hero {
  position: relative;
  min-height: 200px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  padding: 34px 52px 12px;
  overflow: hidden;
  border-bottom: 0;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--hub-bg-deep) var(--hub-hero-contrast), transparent) 0%, transparent 46%),
    linear-gradient(270deg, color-mix(in srgb, var(--hub-bg-deep) var(--hub-hero-contrast), transparent) 0%, transparent 30%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 74% 28%, rgba(241,174,96,.08), transparent 24%);
  pointer-events: none;
}
.hero::after {
  content: none;
}
.hero-content { position: relative; z-index: 2; max-width: 730px; padding-top: 6px; transform: translateY(-20px); }
.hero-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: #a8c0ca; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.hero-meta-item { display: inline-flex; align-items: center; gap: 6px; }
.hero-meta-dot { width: 6px; height: 6px; border-radius: 50%; background: #6bd79e; box-shadow: 0 0 10px rgba(107,215,158,.5); }
.hero-meta-separator { color: #668493; }
.hero h1 { margin: 0 0 5px; font-size: 35px; font-weight: 430; letter-spacing: -1.05px; text-shadow: 0 2px 18px rgba(0,0,0,.16); }
.hero p { margin: 0 0 18px; color: #e4eef2; font-size: 18px; font-weight: 400; }
.hero blockquote {
  margin: 0;
  max-width: 650px;
  padding: 2px 0 2px 14px;
  border-left: 2px solid var(--gold);
  color: #cbdce3;
  font-size: 13px;
  line-height: 1.5;
  font-style: italic;
}
.hero-side { position: relative; z-index: 2; align-self: stretch; display: flex; align-items: flex-start; padding-top: 18px; transform: translateY(-20px); }
.hero-side-card {
  min-width: 190px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  text-align: right;
}
.hero-clock { display: block; margin: 0; font-size: 40px; font-weight: 470; letter-spacing: -1.2px; line-height: 1; text-shadow: 0 2px 18px rgba(0,0,0,.28); }
.hero-side-weekday { display:block; margin-top:7px; color:var(--hub-text); font-size:12px; font-weight:600; text-transform:capitalize; text-shadow:0 2px 12px rgba(0,0,0,.28); }
.hero-side-date { display:block; margin-top:1px; color:var(--hub-muted); font-size:11px; text-transform:capitalize; text-shadow:0 2px 12px rgba(0,0,0,.28); }
.hero-side-status { margin-top:7px; display:flex; justify-content:flex-end; align-items:center; gap:6px; color:#b9cdd5; font-size:10px; text-shadow:0 2px 12px rgba(0,0,0,.30); }
.hero-side-status i { width:6px; height:6px; border-radius:50%; background:var(--ok); box-shadow:0 0 8px rgba(91,214,154,.6); }
.hero-side-status.status-warning i { background:var(--warning); box-shadow:0 0 8px rgba(214,163,90,.55); }
.hero-side-status.status-error i, .hero-side-status.status-critical i { background:var(--danger); box-shadow:0 0 8px rgba(231,121,121,.55); }

/* Toasts / messages */
.messages {
  position: fixed;
  z-index: 100;
  top: 72px;
  right: 18px;
  width: min(390px, calc(100vw - 36px));
  display: grid;
  gap: 8px;
}
.message {
  display: grid;
  grid-template-columns: 26px 1fr 24px;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid rgba(184,219,228,.18);
  background: rgba(10,39,58,.96);
  color: #dceaf0;
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
  backdrop-filter: blur(18px);
  animation: toast-in .22s ease both;
}
.message.success { border-color: rgba(94,215,154,.32); }
.message.error { border-color: rgba(231,120,120,.42); background: rgba(71,29,39,.96); }
.message-icon { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; background: rgba(94,215,154,.12); color: #79e1ac; font-weight: 800; font-size: 12px; }
.message.error .message-icon { background: rgba(231,120,120,.13); color: #f0a0a0; }
.message-close { border: 0; background: transparent; color: #86a5b3; cursor: pointer; font-size: 18px; }
.message.is-hiding { animation: toast-out .18s ease both; }
.toast-region { position: fixed; right: 18px; bottom: 18px; z-index: 110; width: min(360px, calc(100vw - 36px)); display: grid; gap: 8px; }
.app-toast { padding: 11px 13px; border-radius: 11px; border: 1px solid rgba(99,215,157,.27); background: rgba(7,34,49,.96); color: #dcebeF; box-shadow: 0 20px 50px rgba(0,0,0,.3); font-size: 12px; animation: toast-in .2s ease both; }
.app-toast.error { border-color: rgba(231,120,120,.38); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-6px) scale(.985); } }

/* Edit toolbar */
.editor-toolbar {
  margin: 18px 46px 14px;
  padding: 12px 14px 12px 15px;
  border-radius: 13px;
  border: 1px solid rgba(117,185,201,.25);
  background: linear-gradient(180deg, rgba(11,43,63,.92), rgba(8,34,52,.91));
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  box-shadow: 0 10px 34px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.03);
}
.editor-copy { display: flex; gap: 11px; align-items: center; min-width: 0; }
.editor-badge { flex: 0 0 auto; padding: 6px 8px; border-radius: 8px; background: rgba(117,185,201,.12); color: #a7d3dc; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.editor-toolbar strong { display: block; margin-bottom: 2px; font-size: 13px; }
.editor-toolbar .editor-copy span:not(.editor-badge) { color: var(--muted); font-size: 11px; }
.editor-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.primary-button, .secondary-button, .danger-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 13px;
  border-radius: 10px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  font-weight: 670;
  transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
.primary-button:active, .secondary-button:active, .danger-button:active { transform: translateY(1px); }
.primary-button { background: #91cfd9; color: #072338; border-color: #a4dbe3; }
.primary-button:hover { background: #a6dae2; }
.primary-button.compact { min-height: 34px; padding: 6px 10px; font-size: 12px; }
.secondary-button { color: #d9e8ee; background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
.secondary-button:hover { background: rgba(255,255,255,.085); }
.danger-button { color: #ffdede; background: rgba(157,48,58,.23); border-color: rgba(231,120,120,.39); }

/* Dashboard grid and cards */
.dashboard-grid {
  --grid-row-height: 176px;
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-auto-rows: var(--grid-row-height);
  gap: 14px;
  align-items: stretch;
  margin-top: 0;
  padding: 14px 46px 28px;
  min-height: 350px;
  background: transparent;
}
.is-editing .dashboard-grid { min-height: calc((var(--grid-row-height) * 5) + 62px); border-radius: 14px; }
.widget {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 15px 17px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--panel-border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--hub-panel-color) var(--hub-widget-opacity), var(--hub-accent) 8%), color-mix(in srgb, var(--hub-panel-color) var(--hub-widget-opacity), var(--hub-bg-deep) 12%));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(17px);
  transition: transform .17s ease, border-color .17s ease, opacity .17s ease, box-shadow .17s ease;
  animation: widget-rise .32s ease both;
}
.widget:nth-of-type(2) { animation-delay: .035s; }
.widget:nth-of-type(3) { animation-delay: .07s; }
.widget:nth-of-type(4) { animation-delay: .105s; }
.widget:hover { border-color: rgba(190,225,235,.36); box-shadow: 0 20px 52px rgba(0,0,0,.23), inset 0 1px 0 rgba(255,255,255,.05); transform: translateY(-1px); }
.widget-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 85% 0%, rgba(117,185,201,.09), transparent 32%); opacity: .85; }
.widget::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.012); }
.is-editing .widget { border-style: dashed; border-color: rgba(155,211,221,.36); }
.is-editing .widget:hover { border-color: rgba(155,211,221,.62); }
.widget.is-dragging { opacity: .43; transform: scale(.985); }
@keyframes widget-rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.widget-header {
  position: relative;
  z-index: 2;
  height: 26px;
  min-height: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
  color: #eef5f7;
  font-size: 12px;
  font-weight: 680;
}
.widget-title-wrap { display: flex; gap: 8px; align-items: center; min-width: 0; }
.widget-type-icon { width: 22px; height: 22px; display: grid; place-items: center; flex:0 0 22px; border-radius: 6px; color: #9bcbd5; background: rgba(136,198,211,.075); font-size: 12px; }
.spotify-brand-icon { width:21px; height:21px; display:block; object-fit:contain; }
.drag-handle { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; color: #c7dde5; background: rgba(255,255,255,.055); cursor: grab; user-select: none; }
.drag-handle:active { cursor: grabbing; }
.widget-menu-dot { width: 27px; height: 26px; border: 0; border-radius: 8px; color: #9bb4c0; background: transparent; cursor: default; font-size: 18px; line-height: 1; }
.widget-menu-dot:hover { background: rgba(255,255,255,.045); }
.spotify-widget-header-actions { height:26px; display:flex; align-items:center; gap:7px; font-size:10px; font-weight:600; }
.spotify-header-open { height:26px; display:flex; align-items:center; padding:0 7px; border-radius:7px; color:#9ebac4; line-height:1; text-decoration:none; }
.spotify-header-open:hover { color:#dcebee; background:rgba(255,255,255,.045); }
.widget-spotify .widget-header { z-index:30; overflow:visible; }
.spotify-widget-menu { position:relative; }
.spotify-widget-menu[open] { z-index:40; }
.spotify-widget-menu summary { width:27px; height:26px; display:grid; place-items:center; border-radius:8px; color:#9bb4c0; cursor:pointer; font-size:18px; line-height:1; list-style:none; }
.spotify-widget-menu summary::-webkit-details-marker { display:none; }
.spotify-widget-menu[open] summary,
.spotify-widget-menu summary:hover { color:#dcebee; background:rgba(255,255,255,.055); }
.spotify-widget-menu-panel { position:absolute; top:31px; right:0; z-index:50; width:190px; padding:6px; border:1px solid rgba(255,255,255,.12); border-radius:9px; background:#071f30; box-shadow:0 14px 34px rgba(0,0,0,.38); }
.spotify-widget-menu-panel form { margin:0; }
.spotify-widget-menu-panel button { width:100%; padding:7px 8px; border:0; border-radius:7px; background:transparent; color:#b9d0d8; font:inherit; text-align:left; cursor:pointer; }
.spotify-widget-menu-panel button:hover { background:rgba(255,255,255,.055); color:#eef7f9; }
.spotify-widget-menu-panel form button { color:#e5a7a7; }
.spotify-widget-menu-panel form button:hover { background:rgba(201,86,91,.12); color:#f0bebe; }
.widget-tools { display: flex; align-items: center; gap: 7px; }
.size-control { display: flex; gap: 5px; align-items: center; color: var(--muted); font-size: 10px; }
.size-control select, .library-controls select { color: #e7f0f4; background: #0a2a40; border: 1px solid rgba(255,255,255,.13); border-radius: 8px; padding: 5px 7px; outline: none; }
.size-control select { height:26px; padding:2px 7px; }
.widget-delete { width: 26px; height: 26px; border: 1px solid rgba(231,120,120,.29); border-radius: 8px; background: rgba(157,48,58,.12); color: #eab1b1; cursor: pointer; font-size: 18px; }
.widget-body { position: relative; z-index: 2; height: calc(100% - 30px); min-height: 0; }
.widget h2 { margin: 5px 0 8px; font-size: clamp(18px, 1.5vw, 23px); font-weight: 570; letter-spacing: -.3px; }
.widget p { margin: 0; color: var(--muted); line-height: 1.55; font-size: 12px; }
.eyebrow { display: inline-block; color: #8ec9d5; font-size: 9px; font-weight: 820; letter-spacing: .12em; }

.widget-welcome { background: linear-gradient(118deg, color-mix(in srgb, var(--hub-panel-color) var(--hub-widget-opacity), var(--hub-accent) 14%), color-mix(in srgb, var(--hub-panel-color) var(--hub-widget-opacity), var(--hub-bg-deep) 10%)); }
.widget-welcome .widget-glow { background: radial-gradient(circle at 93% 50%, rgba(219,169,88,.08), transparent 32%); }
.welcome-widget { height: 100%; display: flex; flex-direction: column; justify-content: center; max-width: 720px; }
.feature-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }
.feature-chips span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; color: #b9ccd4; background: rgba(255,255,255,.035); font-size: 9px; }
.chip-dot { width: 5px; height: 5px; border-radius: 50%; background: #83b9c6; }
.ok-dot { background: var(--ok); }
.gold-dot { background: var(--gold); }

.system-widget { display: flex; height: 100%; flex-direction: column; }
.status-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 31px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.065); font-size: 11px; }
.status-row span { display: inline-flex; gap: 7px; align-items: center; }
.status-symbol { width: 16px; text-align: center; color: #8fb8c5; font-style: normal; }
.status-badge { padding: 4px 6px; border-radius: 6px; font-size: 9px; font-weight: 750; }
.status-badge.success { color: #76dea9; background: rgba(91,214,154,.105); border: 1px solid rgba(91,214,154,.16); }
.status-badge.neutral { color:#98c7d3; background:rgba(117,185,201,.09); border:1px solid rgba(117,185,201,.14); }
.status-badge.warning { color:#e1bf88; background:rgba(214,163,90,.10); border:1px solid rgba(214,163,90,.18); }
.status-badge.error { color:#e8a1a1; background:rgba(231,121,121,.10); border:1px solid rgba(231,121,121,.20); }
.system-footer { margin-top: auto; padding-top: 9px; display: flex; justify-content: space-between; gap: 10px; color: #7394a4; font-size: 9px; }
.system-footer span { display: inline-flex; gap: 6px; align-items: center; }
.status-dot { width:5px; height:5px; border-radius:50%; background:var(--ok); box-shadow:0 0 8px rgba(94,215,154,.48); }
.status-dot.status-warning { background:var(--warning); box-shadow:0 0 8px rgba(214,163,90,.45); }
.status-dot.status-error, .status-dot.status-critical { background:var(--danger); box-shadow:0 0 8px rgba(231,121,121,.45); }

.clock-wrap { height: 100%; display: flex; flex-direction: column; justify-content: center; }
.clock-topline { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; color: #89a8b5; font-size: 9px; text-transform: uppercase; letter-spacing: .07em; }
.clock-live-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 5px; border-radius: 5px; color: #7edda9; background: rgba(91,214,154,.08); font-size: 8px; }
.clock-live-pill i { width: 4px; height: 4px; border-radius: 50%; background: var(--ok); }
.clock { font-size: clamp(32px, 3.1vw, 47px); font-weight: 480; letter-spacing: -1.3px; }
.clock-date { margin-top: 4px; color: #b1c4cd; font-size: 10px; text-transform: capitalize; }
.clock-rule { height: 1px; margin: 12px 0 8px; background: linear-gradient(90deg, rgba(255,255,255,.14), transparent); }
.clock-caption { color: #708f9e; font-size: 9px; }

.drop-preview { z-index: 20; min-height: 0; border-radius: var(--radius); border: 2px dashed rgba(155,211,221,.82); background: rgba(117,185,201,.12); pointer-events: none; }
.empty-dashboard { grid-column: 1 / -1; min-height: 290px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 35px; text-align: center; border: 1px dashed rgba(178,215,226,.22); border-radius: 16px; background: rgba(9,33,50,.42); }
.empty-dashboard h2 { margin: 8px 0 6px; }
.empty-dashboard p { margin: 0 0 18px; color: var(--muted); }
.empty-icon { margin-bottom: 5px; font-size: 31px; color: #85bdca; }

/* Footer */
.app-footer { min-height: 50px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 20px 23px; color: #718f9e; font-size: 9px; letter-spacing: .02em; }
.app-footer i { color: #405f70; font-style: normal; }
.footer-mark { width: 28px; height: 19px; color: #7395a5; margin-right: 2px; }

/* Dialogs */
.modal-dialog { width: min(560px, calc(100vw - 28px)); max-height: calc(100vh - 34px); padding: 0; border: 1px solid rgba(180,217,228,.19); border-radius: 17px; color: var(--text); background: transparent; box-shadow: 0 34px 100px rgba(0,0,0,.48); }
.modal-dialog::backdrop { background: rgba(2,12,20,.72); backdrop-filter: blur(6px); }
.wide-dialog { width: min(930px, calc(100vw - 28px)); }
.dialog-card { max-height: calc(100vh - 34px); overflow: auto; padding: 22px; background: linear-gradient(160deg, #0c3047, #061d2e 80%); border-radius: 16px; }
.dialog-header { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 18px; }
.dialog-header h2 { margin: 3px 0 0; font-size: 23px; }
.dialog-header p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.dialog-close { width: 34px; height: 34px; border-radius: 9px; border: 1px solid rgba(255,255,255,.11); color: #dce9ee; background: rgba(255,255,255,.035); cursor: pointer; font-size: 20px; }
.dialog-card label, .settings-label { display: block; margin: 0 0 7px; color: #d8e7ed; font-size: 12px; font-weight: 650; }
.dialog-card input { width: 100%; padding: 11px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.05); color: #f5f9fb; outline: none; }
.dialog-card input:focus { border-color: rgba(139,203,215,.62); box-shadow: 0 0 0 3px rgba(117,185,201,.09); }
.dialog-actions { margin-top: 18px; display: flex; justify-content: flex-end; gap: 8px; }
.spotify-device-settings-status { min-height:20px; margin-bottom:10px; color:#8eabb6; font-size:11px; }
.spotify-device-settings-status.is-error { color:#efaaaa; }
.spotify-household-setting { margin:0 0 12px !important; display:grid !important; grid-template-columns:18px minmax(0,1fr); gap:9px; align-items:start; padding:11px; border:1px solid rgba(30,215,96,.16); border-radius:11px; background:rgba(30,215,96,.045); cursor:pointer; }
.spotify-household-setting input { width:16px; height:16px; margin:2px 0 0; padding:0; accent-color:#1ed760; }
.spotify-household-setting > span { display:grid; gap:3px; }
.spotify-household-setting strong { color:#e8f3f5; font-size:11px; }
.spotify-household-setting small { color:#7897a4; font-size:9px; line-height:1.4; font-weight:400; }
.spotify-device-settings-list { display:grid; gap:8px; }
.spotify-device-setting-group { margin:10px 0 0; color:#b8d1d9; font-size:11px; letter-spacing:.04em; }
.spotify-device-setting-row { display:grid; grid-template-columns:minmax(150px,1.15fr) minmax(130px,.9fr) 92px 105px 118px 72px 86px; gap:8px; align-items:end; padding:11px; border:1px solid rgba(255,255,255,.085); border-radius:12px; background:rgba(255,255,255,.028); }
.spotify-device-setting-copy { min-width:0; align-self:center; display:grid; gap:3px; }
.spotify-device-setting-copy strong,
.spotify-device-setting-copy span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.spotify-device-setting-copy strong { color:#edf5f7; font-size:12px; }
.spotify-device-setting-copy span { color:#7896a2; font-size:9px; }
.spotify-device-setting-copy span.is-unavailable { color:#d6a2a2; }
.spotify-device-setting-row label { min-width:0; margin:0; }
.spotify-device-setting-row label > span { display:block; margin-bottom:5px; color:#9eb6c0; font-size:9px; font-weight:600; }
.spotify-device-setting-row input[type="text"],
.spotify-device-setting-row input[type="number"],
.spotify-device-setting-row select { width:100%; height:34px; padding:6px 8px; border-radius:8px; font-size:11px; }
.spotify-device-setting-default { align-self:center; display:flex !important; align-items:center; justify-content:center; gap:6px; padding-bottom:3px; }
.spotify-device-setting-visible { align-self:center; display:flex !important; align-items:center; justify-content:center; gap:6px; padding-bottom:3px; }
.spotify-device-setting-default input { width:15px; height:15px; padding:0; }
.spotify-device-setting-visible input { width:15px; height:15px; padding:0; }
.spotify-device-setting-default span,
.spotify-device-setting-visible span { margin:0 !important; font-size:10px !important; }
.spotify-device-setting-no-default { width:max-content; margin:0 0 10px !important; display:flex !important; align-items:center; gap:7px; color:#9eb6c0 !important; font-size:10px !important; }
.spotify-device-setting-no-default input { width:15px; height:15px; margin:0; padding:0; accent-color:#1ed760; }
.spotify-device-setting-forget { width:max-content; margin-top:2px; padding:3px 6px; border:1px solid rgba(231,120,120,.24); border-radius:6px; background:rgba(157,48,58,.08); color:#dba7a7; font-size:9px; cursor:pointer; }
.spotify-device-setting-forget:hover { background:rgba(201,86,91,.14); color:#f0bebe; }
.spotify-device-setting-forget:disabled { opacity:.42; cursor:not-allowed; }
@media (max-width:760px) {
  .spotify-device-setting-row { grid-template-columns:1fr 1fr; }
  .spotify-device-setting-copy { grid-column:1 / -1; }
}
.widget-library { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 11px; }
.library-card { display: grid; grid-template-columns: 42px 1fr; gap: 11px; padding: 14px; border: 1px solid rgba(255,255,255,.09); border-radius: 13px; background: rgba(255,255,255,.03); transition: .15s ease; }
.library-card:hover { border-color: rgba(139,203,215,.31); background: rgba(117,185,201,.05); transform: translateY(-1px); }
.library-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; background: rgba(117,185,201,.11); color: #a8d6df; font-size: 20px; }
.library-copy h3 { margin: 2px 0 5px; font-size: 15px; }
.library-copy p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.library-category { color: #6f99aa; font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.library-controls { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 7px; margin-top: 3px; }
.settings-block { padding: 16px 0; border-top: 1px solid rgba(255,255,255,.075); }
.settings-block:first-of-type { border-top: 0; }
.inline-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.setting-hint { margin: 4px 0 0; color: #b7cad3; font-size: 12px; }
.setting-check { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; margin-right: 5px; color: #73dda8; background: rgba(91,214,154,.09); }
.danger-zone { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.danger-zone p { margin: 4px 0 0; color: #9fb3bd; font-size: 11px; }

/* Login */
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: linear-gradient(90deg, rgba(4,22,37,.88), rgba(4,22,37,.35)), var(--hub-background-image) center / cover no-repeat, #071b2e; }
.login-card { width: min(430px, calc(100vw - 32px)); padding: 31px; border-radius: 18px; background: rgba(7,31,48,.9); border: 1px solid rgba(188,219,228,.18); box-shadow: 0 28px 90px rgba(0,0,0,.38); backdrop-filter: blur(18px); }
.login-card .brand-mark { font-size: 38px; }
.login-card h1 { margin: 6px 0 3px; font-size: 28px; }
.login-card p { margin: 0 0 24px; color: var(--muted); }
.login-card label { display: block; margin: 13px 0 6px; color: #dce8ed; font-size: 13px; }
.login-card input { width: 100%; padding: 11px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: white; }
.login-card button { width: 100%; margin-top: 18px; padding: 11px; border-radius: 10px; border: 0; background: #8bcbd7; color: #082438; font-weight: 750; cursor: pointer; }

@media (max-width: 1220px) {
  .topbar { grid-template-columns: max-content 1fr max-content; padding: 0 20px; gap: 12px; }
  .brand { min-width: auto; }
  .user-copy { display: none; }
  .userbox { min-width: auto; }
  .dashboard-grid { padding-left: 24px; padding-right: 24px; padding-top: 14px; }
  .editor-toolbar { margin-left: 24px; margin-right: 24px; }
  .hero { padding-left: 28px; padding-right: 28px; min-height: 270px; padding-bottom: 8px; }
}
@media (max-width: 980px) {
  .topbar { grid-template-columns: max-content 1fr; min-height: 108px; align-content: center; padding-top: 7px; }
  .top-actions { grid-column: 2; grid-row: 1; justify-self: end; }
  .dashboard-tabs { grid-column: 1 / -1; grid-row: 2; padding-bottom: 8px; }
  .edit-button span:last-child { display: none; }
  .hero-side { display: none; }
  .dashboard-grid { grid-template-columns: repeat(2, minmax(0,1fr)); grid-auto-rows: auto; }
  .dashboard-widget { grid-column: span 1 !important; grid-row: auto !important; min-height: 180px; }
  .widget-welcome { grid-column: 1 / -1 !important; }
  .drop-preview { display: none !important; }
  .drag-handle { display: none; }
  .editor-toolbar { align-items: flex-start; }
  .widget-library { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
  .topbar { padding-left: 13px; padding-right: 13px; }
  .brand-copy strong { display: none; }
  .brand-copy small { display: none; }
  .brand { min-width: 44px; }
  .top-icon-button { display: none; }
  .hero { min-height: 210px; padding: 24px 17px 10px; }
  .hero h1 { font-size: 31px; }
  .hero p { font-size: 16px; }
  .hero blockquote { font-size: 11px; }
  .hero-meta { font-size: 8px; }
  .dashboard-grid { grid-template-columns: 1fr; margin-top: -36px; padding: 0 14px 24px; }
  .dashboard-widget, .widget-welcome { grid-column: 1 !important; }
  .editor-toolbar { margin-left: 14px; margin-right: 14px; flex-direction: column; }
  .editor-copy { align-items: flex-start; }
  .editor-actions { width: 100%; }
  .editor-actions > * { flex: 1; }
  .size-control span { display: none; }
  .wide-dialog, .modal-dialog { width: calc(100vw - 16px); }
  .dialog-card { padding: 17px; }
  .danger-zone { align-items: flex-start; flex-direction: column; }
  .app-footer { flex-wrap: wrap; }
}

/* Login detail polish */
.login-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 7px; }
.login-brand .brand-mark { width: 50px; height: 36px; }
.login-brand h1 { margin: 2px 0 0; }
.login-security { display: flex; align-items: center; gap: 7px; margin: -10px 0 19px; color: #89a6b3; font-size: 10px; }
.login-security i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 9px rgba(91,214,154,.5); }
.login-footer { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.07); color: #688797; font-size: 9px; text-align: center; letter-spacing: .05em; text-transform: uppercase; }


/* Minecraft Java server status widget */
.minecraft-widget {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.minecraft-status-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}
.minecraft-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: #c9dce4;
  font-size: 10px;
}
.minecraft-state i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #8ca5b0;
  box-shadow: 0 0 8px rgba(140,165,176,.35);
}
.minecraft-state.is-online { color: #84e1ae; }
.minecraft-state.is-online i { background: var(--ok); box-shadow: 0 0 9px rgba(91,214,154,.58); }
.minecraft-state.is-offline { color: #e7a2a2; }
.minecraft-state.is-offline i { background: var(--danger); box-shadow: 0 0 9px rgba(231,121,121,.48); }
.minecraft-refresh {
  color: #7394a4;
  font-size: 8px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.minecraft-server-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #eff6f8;
  font-size: 16px;
  font-weight: 590;
  letter-spacing: -.2px;
}
.minecraft-server-port { margin-top: 2px; color: #7897a6; font-size: 9px; }
.minecraft-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 12px;
}
.minecraft-metrics > div {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 9px;
  background: rgba(255,255,255,.025);
}
.minecraft-metrics span { display: block; margin-bottom: 2px; color: #7595a4; font-size: 8px; text-transform: uppercase; letter-spacing: .06em; }
.minecraft-metrics strong { display: block; overflow: hidden; color: #dce9ee; font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.minecraft-version-row { grid-column: 1 / -1; }
.minecraft-checked { margin-top: auto; padding-top: 8px; color: #658493; font-size: 8px; }
.dashboard-widget[data-width="1"][data-height="1"] .minecraft-server-port,
.dashboard-widget[data-width="1"][data-height="1"] .minecraft-version-row,
.dashboard-widget[data-width="1"][data-height="1"] .minecraft-checked { display: none; }
.dashboard-widget[data-width="1"][data-height="1"] .minecraft-server-name { font-size: 13px; }
.dashboard-widget[data-width="1"][data-height="1"] .minecraft-metrics { margin-top: 9px; gap: 6px; }
.dashboard-widget[data-width="1"][data-height="1"] .minecraft-metrics > div { padding: 6px 7px; }
.dashboard-widget[data-height="2"] .minecraft-server-name { font-size: 18px; }
.dashboard-widget[data-height="2"] .minecraft-metrics { grid-template-columns: 1fr; margin-top: 17px; }
.dashboard-widget[data-height="2"] .minecraft-version-row { grid-column: auto; }


/* Weather widget */
.weather-widget {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.weather-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.weather-head > div { min-width: 0; }
.weather-location {
  display: block;
  overflow: hidden;
  color: #e7f1f4;
  font-size: 15px;
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.weather-condition {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: #819eac;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.weather-icon {
  flex: 0 0 auto;
  min-width: 38px;
  color: #f2d596;
  font-size: 31px;
  line-height: 1;
  text-align: right;
}
.weather-current {
  display: flex;
  align-items: baseline;
  gap: 11px;
  margin-top: 8px;
}
.weather-current > strong {
  font-size: 31px;
  font-weight: 480;
  letter-spacing: -1px;
}
.weather-current > span {
  color: #7899a8;
  font-size: 9px;
  white-space: nowrap;
}
.weather-current b { color: #afc6cf; font-weight: 650; }
.weather-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 9px;
}
.weather-metrics > div {
  min-width: 0;
  padding: 6px 7px;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 8px;
  background: rgba(255,255,255,.026);
}
.weather-metrics span {
  display: block;
  color: #7595a4;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .055em;
}
.weather-metrics strong {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: #dce9ee;
  font-size: 11px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.weather-forecast {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 9px;
}
.weather-day {
  min-width: 0;
  padding: 6px 7px;
  border-top: 1px solid rgba(255,255,255,.065);
  color: #88a5b3;
  font-size: 8px;
}
.weather-day-head { display: flex; justify-content: space-between; gap: 5px; }
.weather-day-head b { color: #cfe0e6; font-size: 10px; font-weight: 650; }
.weather-day-temp { margin-top: 3px; color: #a9c0c9; font-size: 9px; white-space: nowrap; }
.weather-checked { margin-top: auto; padding-top: 7px; color: #658493; font-size: 8px; }
.dashboard-widget[data-width="1"] .weather-condition,
.dashboard-widget[data-width="1"] .weather-current > span,
.dashboard-widget[data-width="1"] .weather-metrics,
.dashboard-widget[data-width="1"] .weather-forecast,
.dashboard-widget[data-width="1"] .weather-checked { display: none; }
.dashboard-widget[data-width="1"] .weather-location { font-size: 11px; }
.dashboard-widget[data-width="1"] .weather-icon { min-width: 26px; font-size: 22px; }
.dashboard-widget[data-width="1"] .weather-current { margin-top: auto; }
.dashboard-widget[data-width="1"] .weather-current > strong { font-size: 25px; }
.dashboard-widget[data-width="2"][data-height="1"] .weather-forecast,
.dashboard-widget[data-width="2"][data-height="1"] .weather-checked { display: none; }
.dashboard-widget[data-width="2"][data-height="1"] .weather-current > strong { font-size: 28px; }
.dashboard-widget[data-width="2"][data-height="2"] .weather-forecast { grid-template-columns: 1fr; }
.dashboard-widget[data-width="4"][data-height="1"] .weather-checked { display: none; }

/* Language selector (v0.14.0) */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.language-switcher { margin: 4px 0 6px; }
.language-switcher select {
  width: 100%;
  min-height: 34px;
  padding: 7px 30px 7px 10px;
  border-radius: 9px;
  border: 1px solid rgba(188,219,228,.14);
  background: rgba(255,255,255,.045);
  color: #cfdee5;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.language-switcher select:focus { outline: 1px solid rgba(139,203,215,.55); outline-offset: 1px; }
.language-switcher option { color: #102b3c; background: #eaf1f3; }
.login-footer-row {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.07);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}
.login-footer-row .login-footer { margin: 0; padding: 0; border: 0; text-align: left; }
.login-footer-row .language-switcher { margin: 0; }
.login-footer-row .language-switcher select { width: auto; min-width: 118px; }

/* Global admin Hub Debug (session based, since 0.14.2) */
.hub-debug-toggle-form { margin: 0; display: flex; }
.hub-debug-toggle {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 9px;
  background: rgba(255,255,255,.035);
  color: #8faab6;
  cursor: pointer;
  font: 750 9px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .06em;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.hub-debug-toggle:hover { color: #e3f0f3; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.20); }
.hub-debug-toggle-icon { font-size: 13px; line-height: 1; }
.hub-debug-toggle-state { min-width: 23px; padding: 3px 4px; border-radius: 5px; text-align: center; color: #688490; background: rgba(255,255,255,.05); font-size: 7.5px; }
.hub-debug-toggle.active { color: #fff2c8; border-color: rgba(229,184,87,.54); background: rgba(229,184,87,.12); box-shadow: inset 0 -2px 0 rgba(229,184,87,.72), 0 0 18px rgba(229,184,87,.08); }
.hub-debug-toggle.active .hub-debug-toggle-state { color: #102331; background: #e4bd69; }

body.hub-debug::before { outline: 2px solid rgba(255,196,0,.95); outline-offset: -2px; }
.hub-debug .topbar,
.hub-debug .hero,
.hub-debug .dashboard-grid,
.hub-debug .app-footer,
.hub-debug .dashboard-widget,
.hub-debug .settings-hero,
.hub-debug .settings-layout,
.hub-debug .settings-sidebar,
.hub-debug .settings-content,
.hub-debug .settings-context,
.hub-debug .settings-card,
.hub-debug .settings-context-card,
.hub-debug .access-denied-card,
.hub-debug .delete-confirm-card {
  outline: 2px solid rgba(255,255,255,.70);
  outline-offset: -2px;
}
.hub-debug .topbar { outline-color: rgba(255,196,0,.95); }
.hub-debug .hero { outline-color: rgba(72,205,255,.95); }
.hub-debug .dashboard-grid { outline-color: rgba(116,255,150,.95); }
.hub-debug .app-footer { outline-color: rgba(213,135,255,.95); position: relative; }
.hub-debug .dashboard-widget { outline-color: rgba(255,121,121,.92); }
.hub-debug .settings-hero { outline-color: rgba(72,205,255,.82); }
.hub-debug .settings-layout { outline-color: rgba(112,224,255,.70); }
.hub-debug .settings-sidebar { outline-color: rgba(229,184,87,.90); }
.hub-debug .settings-content { outline-color: rgba(116,255,150,.78); }
.hub-debug .settings-context { outline-color: rgba(213,135,255,.82); }
.hub-debug .settings-card { outline-color: rgba(255,121,121,.72); }
.hub-debug .settings-context-card { outline-color: rgba(213,135,255,.62); }
.hub-debug .dashboard-widget {
  animation: none;
  transition: none;
}
.hub-debug .dashboard-widget:hover { transform: none; }
.hub-debug-positioned { position: relative !important; }
.hub-debug-badge {
  position: absolute;
  z-index: 250;
  top: 4px;
  left: 4px;
  padding: 3px 6px;
  border-radius: 5px;
  background: rgba(1,10,18,.90);
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;
  font: 700 10px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .02em;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.30);
}
.hub-debug .dashboard-widget > .hub-debug-badge,
.hub-debug .settings-card > .hub-debug-badge,
.hub-debug .settings-context-card > .hub-debug-badge { top: auto; bottom: 5px; left: 5px; }
.hub-debug-ruler {
  position: fixed;
  z-index: 220;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(180deg, rgba(255,255,255,.10) 0, rgba(255,255,255,.10) 1px, transparent 1px, transparent 50px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0, rgba(255,255,255,.055) 1px, transparent 1px, transparent 100px);
}
.hub-debug-panel {
  position: fixed;
  z-index: 300;
  right: 14px;
  bottom: 14px;
  width: min(460px, calc(100vw - 28px));
  max-height: min(560px, calc(100vh - 28px));
  overflow: auto;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 12px;
  background: rgba(3,15,25,.94);
  color: #eaf3f7;
  box-shadow: 0 18px 60px rgba(0,0,0,.42);
  backdrop-filter: blur(16px);
  font: 11px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.hub-debug-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.12); }
.hub-debug-panel strong { font-size: 12px; }
.hub-debug-panel-actions { display:flex; align-items:center; gap:5px; }
.hub-debug-panel-actions button {
  height:22px;
  padding:0 6px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:5px;
  background:rgba(255,255,255,.045);
  color:#b8cbd3;
  cursor:pointer;
  font:750 7.5px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing:.05em;
}
.hub-debug-panel-actions button:hover { color:#fff; background:rgba(255,255,255,.09); }
.hub-debug-live { padding: 3px 6px; border-radius: 5px; color: #a4edc5; background: rgba(91,214,154,.09); border: 1px solid rgba(91,214,154,.18); font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.hub-debug-panel pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: #cfe0e8; }
.hub-debug-widget-overlay {
  position: fixed;
  z-index: 240;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hub-debug-widget-focus {
  position:absolute;
  z-index:3;
  height:19px;
  max-width:calc(100vw - 8px);
  padding:0 6px;
  overflow:hidden;
  border:1px solid rgba(255,121,121,.55);
  border-radius:4px;
  background:rgba(1,10,18,.93);
  color:#ffd9d9;
  cursor:pointer;
  pointer-events:auto;
  font:750 8px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-overflow:ellipsis;
  white-space:nowrap;
  box-shadow:0 2px 8px rgba(0,0,0,.34);
}
.hub-debug-widget-focus:hover,
.hub-debug-widget-focus.is-active { color:#07151e; background:#ffcb64; border-color:#ffe09b; }
.hub-debug-widget-region {
  position: absolute;
  display: block;
  border: 1px dashed rgba(255,255,255,.72);
  pointer-events: none;
}
.hub-debug-widget-region[hidden] { display: none; }
.hub-debug-widget-region-widget { border: 2px solid rgba(255,121,121,.96); }
.hub-debug-widget-region-header { border-color: rgba(72,205,255,.95); }
.hub-debug-widget-region-body { border-color: rgba(116,255,150,.92); }
.hub-debug-widget-region-content { border-color: rgba(213,135,255,.92); }
.hub-debug-widget-region-detail-1 { border:2px solid rgba(255,178,77,.98); }
.hub-debug-widget-region-detail-2 { border:2px solid rgba(255,225,91,.98); }
.hub-debug-widget-region-detail-3 { border:2px solid rgba(74,229,157,.98); }
.hub-debug-widget-region-detail-4 { border:2px solid rgba(80,169,255,.98); }
.hub-debug-widget-region-detail-5 { border:2px solid rgba(188,112,255,.98); }
.hub-debug-widget-region-spotify-info { border:2px solid rgba(255,178,77,.98); }
.hub-debug-widget-region-spotify-primary { border:2px solid rgba(255,225,91,.98); }
.hub-debug-widget-region-spotify-options { border:2px solid rgba(74,229,157,.98); }
.hub-debug-widget-region-spotify-volume { border:2px solid rgba(64,224,221,.98); }
.hub-debug-widget-region-spotify-progress { border:2px solid rgba(80,169,255,.98); }
.hub-debug-widget-region-spotify-navigation { border:2px solid rgba(188,112,255,.98); }
.hub-debug-widget-region-spotify-list { border:2px solid rgba(255,83,154,.98); }
.hub-debug-widget-region.has-overflow {
  border-color: rgba(255,66,156,.98);
  box-shadow: inset 0 0 0 2px rgba(255,66,156,.16);
}
.hub-debug-widget-region-label {
  position: absolute;
  top: 2px;
  right: 2px;
  max-width: calc(100% - 4px);
  overflow: hidden;
  padding: 2px 5px;
  border-radius: 4px;
  color: #f7fbfd;
  background: rgba(2,13,22,.88);
  font: 750 8px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
}
.hub-debug-widget-region-widget > .hub-debug-widget-region-label {
  top: auto;
  right: auto;
  bottom: 4px;
  left: 4px;
  color: #ffe1e1;
  border: 1px solid rgba(255,121,121,.48);
}
.hub-debug-widget-region-header > .hub-debug-widget-region-label { color: #bdefff; }
.hub-debug-widget-region-body > .hub-debug-widget-region-label { top: auto; bottom: 2px; color: #bffff0; }
.hub-debug-widget-region-content > .hub-debug-widget-region-label { color: #edc7ff; }
.hub-debug-widget-region-detail-1 > .hub-debug-widget-region-label { color:#ffe2b7; }
.hub-debug-widget-region-detail-2 > .hub-debug-widget-region-label { color:#fff2ad; }
.hub-debug-widget-region-detail-3 > .hub-debug-widget-region-label { color:#baffdc; }
.hub-debug-widget-region-detail-4 > .hub-debug-widget-region-label { color:#c7e4ff; }
.hub-debug-widget-region-detail-5 > .hub-debug-widget-region-label { color:#ead2ff; }
.hub-debug-widget-region-spotify-info > .hub-debug-widget-region-label { color:#ffe2b7; }
.hub-debug-widget-region-spotify-primary > .hub-debug-widget-region-label { top:auto; bottom:2px; color:#fff2ad; }
.hub-debug-widget-region-spotify-options > .hub-debug-widget-region-label { color:#baffdc; }
.hub-debug-widget-region-spotify-volume > .hub-debug-widget-region-label { color:#bdfdff; }
.hub-debug-widget-region-spotify-progress > .hub-debug-widget-region-label { color:#c7e4ff; }
.hub-debug-widget-region-spotify-navigation > .hub-debug-widget-region-label { color:#ead2ff; }
.hub-debug-widget-region-spotify-list > .hub-debug-widget-region-label { color:#ffd1e5; }
.hub-debug-widget-region.has-overflow > .hub-debug-widget-region-label {
  color: #ffd8ea;
  border: 1px solid rgba(255,66,156,.58);
}

@media (max-width: 1220px) {
  .hub-debug-toggle-label { display: none; }
}
@media (max-width: 650px) {
  .hub-debug-toggle-state { display: none; }
  .hub-debug-panel { font-size: 10px; max-height: 45vh; }
  .hub-debug-widget-region-label { font-size: 7px; }
}

/* Widget appearance backgrounds · v0.15.3 */
.widget-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--widget-bg-image);
  background-repeat: no-repeat;
  background-size: var(--widget-bg-size, cover);
  background-position: var(--widget-bg-x, 50%) var(--widget-bg-y, 50%);
}
.widget-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--hub-bg-deep) var(--widget-bg-overlay, 38%), transparent);
}
.has-widget-background {
  background: color-mix(in srgb, var(--hub-panel-color) 58%, transparent);
}
.has-widget-background .widget-glow { z-index: 1; }
.widget-appearance-button {
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 8px;
  color: #acd5dc;
  background: rgba(255,255,255,.035);
  cursor: pointer;
}
.widget-appearance-button:hover { background: color-mix(in srgb, var(--hub-accent) 13%, transparent); }
.widget-appearance-options { display: grid; gap: 7px; margin: 4px 0 16px; }
.appearance-radio { display: flex !important; align-items: center; gap: 10px; margin: 0 !important; padding: 9px 10px; border: 1px solid rgba(255,255,255,.075); border-radius: 10px; background: rgba(255,255,255,.025); cursor: pointer; }
.appearance-radio input { width: auto !important; accent-color: var(--hub-accent); }
.appearance-radio span { display: grid; gap: 2px; }
.appearance-radio strong { font-size: 10px; }
.appearance-radio small { color: #7896a3; font-size: 8.5px; }
.widget-appearance-form > label { margin-top: 14px; }
.widget-appearance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.widget-appearance-grid label { position: relative; display: grid; gap: 5px; color: #8ba6b2; font-size: 9px; }
.widget-appearance-grid input, .widget-appearance-grid select { width: 100%; min-height: 36px; padding: 0 9px; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; background: #0a2a40; color: #e7f0f4; }
.widget-appearance-grid label > small { position: absolute; right: 9px; bottom: 10px; color: #678793; }
.setting-hint { display: block; margin-top: 5px; color: #6d8996; font-size: 8.5px; }
@media (max-width: 650px) { .widget-appearance-grid { grid-template-columns: 1fr; } }

.widget-file-input {
  width: 100%;
  min-height: 42px;
  padding: 8px;
  border: 1px dashed rgba(185,219,229,.18);
  border-radius: 10px;
  background: rgba(3,17,27,.42);
  color: #9eb4be;
}
.widget-file-input::file-selector-button {
  margin-right: 10px;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  color: #dce9ee;
  background: color-mix(in srgb, var(--hub-accent) 14%, transparent);
  cursor: pointer;
}

/* Spotify OAuth widget · v0.15.21 */
.spotify-widget { position:relative; height:100%; min-height:0; display:flex; flex-direction:column; }
.spotify-widget [hidden] { display:none !important; }
.spotify-empty-state,
.spotify-disconnected { height:100%; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:6px; }
.spotify-mark { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:#191414; border:1px solid rgba(30,215,96,.28); }
.spotify-mark img { width:21px; height:21px; display:block; object-fit:contain; }
.spotify-empty-state strong,
.spotify-disconnected strong { color:#eef6f8; font-size:14px; }
.spotify-empty-state p,
.spotify-disconnected p { max-width:440px; margin:0 0 5px; color:#7897a5; font-size:9px; line-height:1.45; }
.spotify-player { height:100%; min-height:0; display:flex; flex-direction:column; gap:8px; }
.spotify-playback-area { display:contents; }
.spotify-section-title,
.spotify-library-wide-head { display:none; }
.spotify-now-playing { display:grid; grid-template-columns:54px minmax(0,1fr); gap:10px; min-width:0; align-items:center; }
.spotify-cover-link { width:54px; height:54px; display:grid; place-items:center; overflow:hidden; border-radius:9px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.07); text-decoration:none; }
.spotify-cover-link img { width:100%; height:100%; object-fit:cover; display:block; }
.spotify-cover-placeholder { color:#82a5b3; font-size:22px; }
.spotify-track-copy { min-width:0; display:grid; gap:2px; }
.spotify-source { display:flex; align-items:center; gap:5px; color:#7edfa3; font-size:7.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.spotify-source i { width:6px; height:6px; border-radius:50%; background:#1ed760; box-shadow:0 0 8px rgba(30,215,96,.45); }
.spotify-track-copy > a { overflow:hidden; color:#f0f6f8; font-size:14px; font-weight:680; text-overflow:ellipsis; white-space:nowrap; text-decoration:none; }
.spotify-track-copy > a:hover { text-decoration:underline; }
.spotify-track-copy > [data-spotify-artist],
.spotify-track-copy > .spotify-album { overflow:hidden; color:#809eaa; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.spotify-track-copy > .spotify-album { display:none; color:#698994; }
.spotify-track-search-link { min-width:0; margin:0; padding:0; overflow:hidden; border:0; background:transparent; color:inherit; font:inherit; text-align:left; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.spotify-track-search-link:hover { color:#b8d4dd; text-decoration:underline; }
.spotify-track-state { display:none; overflow:hidden; color:#64838f; font-size:7.5px; text-overflow:ellipsis; white-space:nowrap; }
.spotify-track-state.is-error { color:#e59a9a; }
.spotify-progress-row { display:grid; grid-template-columns:30px minmax(0,1fr) 30px; gap:7px; align-items:center; color:#668793; font-size:7.5px; }
.spotify-progress-row span:last-child { text-align:right; }
.spotify-progress-row input[type="range"] { width:100%; accent-color:var(--hub-accent-secondary); cursor:pointer; }
.spotify-main-controls { min-width:0; display:grid; gap:6px; }
.spotify-control-row { min-width:0; display:flex; align-items:center; gap:12px; }
.spotify-primary-controls { display:grid; grid-template-columns:30px 36px 30px; gap:6px; align-items:center; }
.spotify-primary-controls > button { height:28px; padding:0; display:grid; place-items:center; border-radius:8px; border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.035); color:#c9dce3; cursor:pointer; font-size:14px; }
.spotify-primary-controls > button:hover { background:rgba(255,255,255,.075); color:#fff; }
.spotify-primary-controls > button:disabled { cursor:wait; opacity:.68; }
.spotify-primary-controls .spotify-play { height:32px; border-color:color-mix(in srgb, var(--hub-accent) 32%, transparent); background:color-mix(in srgb, var(--hub-accent) 14%, transparent); }
.spotify-device-controls { min-width:0; display:grid; grid-template-columns:minmax(90px,1fr) 28px; gap:6px; align-items:center; }
.spotify-secondary-controls { min-width:0; display:flex; gap:5px; align-items:center; }
.spotify-option-buttons { display:grid; grid-template-columns:repeat(3,28px); gap:5px; align-items:center; }
.spotify-secondary-controls > button,
.spotify-option-buttons > button { height:27px; display:grid; place-items:center; padding:0; border:1px solid rgba(255,255,255,.08); border-radius:8px; background:rgba(255,255,255,.03); color:#88a5af; cursor:pointer; }
.spotify-secondary-controls > button { width:28px; }
.spotify-compact-device-open { display:none !important; }
.spotify-secondary-controls > button:hover,
.spotify-secondary-controls > button.is-active,
.spotify-option-buttons > button:hover,
.spotify-option-buttons > button.is-active { color:#92e1ae; border-color:rgba(30,215,96,.26); background:rgba(30,215,96,.08); }
.spotify-secondary-controls > button:disabled,
.spotify-option-buttons > button:disabled { opacity:.4; cursor:not-allowed; }
.spotify-widget button.is-syncing { position:relative; cursor:wait; }
.spotify-widget button.is-syncing::after { content:""; position:absolute; top:2px; right:2px; width:6px; height:6px; border:1px solid rgba(137,231,171,.3); border-top-color:#8de7ad; border-radius:50%; animation:spotify-sync-spin .72s linear infinite; }
.spotify-widget.is-syncing-track .spotify-now-playing,
.spotify-widget.is-loading-track .spotify-now-playing { opacity:.58; transition:opacity .16s ease; }
.spotify-volume-wrap.is-syncing { color:#91dfad; }
.spotify-volume-wrap.is-syncing::before { content:""; width:6px; height:6px; justify-self:center; border:1px solid rgba(137,231,171,.3); border-top-color:#8de7ad; border-radius:50%; animation:spotify-sync-spin .72s linear infinite; }
.spotify-volume-wrap.is-syncing > span:first-child { display:none; }
@keyframes spotify-sync-spin { to { transform:rotate(360deg); } }
.spotify-volume-wrap { min-width:0; display:grid; grid-template-columns:13px minmax(45px,1fr) 27px; gap:5px; align-items:center; color:#718f9b; font-size:7.5px; }
.spotify-volume-wrap input { min-width:0; width:100%; accent-color:var(--hub-accent-secondary); }
.spotify-volume-wrap [data-spotify-volume-value] { min-width:27px; margin:0; padding:0; border:0; background:transparent; color:inherit; font:inherit; text-align:right; cursor:text; }
.spotify-volume-wrap [data-spotify-volume-value]:disabled { cursor:not-allowed; opacity:.6; }
.spotify-volume-number { grid-column:3; grid-row:1; width:42px; height:22px; padding:0 3px; border:1px solid color-mix(in srgb, var(--hub-accent) 34%, transparent); border-radius:6px; background:#071f30; color:#e5f1f4; font-size:10px; text-align:center; outline:none; }
.spotify-volume-number::-webkit-outer-spin-button,
.spotify-volume-number::-webkit-inner-spin-button { margin:0; -webkit-appearance:none; }
.spotify-volume-number { appearance:textfield; -moz-appearance:textfield; }
.spotify-device-wrap { min-width:0; }
.spotify-device-wrap select { width:100%; height:29px; padding:0 24px 0 8px; border-radius:8px; border:1px solid rgba(255,255,255,.08); background:rgba(7,31,45,.62); color:#b9ccd4; font-size:8px; }
.spotify-device-wrap option:disabled { color:#6f8791; }
.spotify-device-refresh { font-size:15px !important; }
.spotify-compact-device-menu { display:none; }
.spotify-footer { margin-top:auto; min-width:0; display:flex; align-items:center; justify-content:space-between; gap:8px; color:#64838f; font-size:7.5px; }
.spotify-footer > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.spotify-footer > span.is-error { color:#e59a9a; }
.spotify-footer > div { display:flex; align-items:center; gap:7px; flex:0 0 auto; }
.spotify-footer a,
.spotify-footer button { border:0; padding:0; background:transparent; color:#7ea4b2; font:inherit; text-decoration:none; cursor:pointer; }
.spotify-footer a:hover,
.spotify-footer button:hover { color:#dcebee; }
.spotify-footer form { margin:0; }
.spotify-library { display:none; min-height:0; padding:10px; border:1px solid rgba(255,255,255,.08); border-radius:11px; background:rgba(4,24,36,.94); box-shadow:0 16px 38px rgba(0,0,0,.24); }
.spotify-library.is-open { position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; }
.spotify-library-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.spotify-library-head > div:first-child { min-width:0; display:grid; gap:2px; }
.spotify-library-head strong { color:#edf6f8; font-size:13px; }
.spotify-library-head span { color:#7897a4; font-size:8px; }
.spotify-library-head > div:last-child { display:flex; gap:5px; }
.spotify-library-head button { width:27px; height:27px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.09); border-radius:8px; background:rgba(255,255,255,.035); color:#b7ccd4; cursor:pointer; }
.spotify-library-head button:hover { background:rgba(255,255,255,.075); color:#fff; }
.spotify-media-tabs { margin-top:8px; display:flex; gap:4px; overflow-x:auto; scrollbar-width:thin; }
.spotify-media-tabs button { flex:0 0 auto; padding:5px 8px; border:1px solid rgba(255,255,255,.07); border-radius:7px; background:rgba(255,255,255,.025); color:#7996a1; font-size:9px; cursor:pointer; }
.spotify-media-tabs button.is-active { color:#dce9ed; border-color:rgba(30,215,96,.25); background:rgba(30,215,96,.08); }
.spotify-media-panel { min-height:0; display:none; flex:1 1 auto; flex-direction:column; }
.spotify-media-panel.is-active { display:flex; }
.spotify-catalog-search { margin-top:8px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px; }
.spotify-catalog-search input { min-width:0; height:31px; padding:0 9px; border:1px solid rgba(255,255,255,.09); border-radius:8px; background:rgba(2,16,25,.5); color:#d8e8ed; font-size:9px; }
.spotify-catalog-search button { padding:0 11px; border:1px solid rgba(30,215,96,.2); border-radius:8px; background:rgba(30,215,96,.08); color:#8de4ad; font-size:9.5px; cursor:pointer; }
.spotify-playlist-search { width:100%; height:31px; margin-top:8px; padding:0 10px; border:1px solid rgba(255,255,255,.09); border-radius:8px; background:rgba(2,16,25,.5); color:#d8e8ed; font-size:9px; outline:none; }
.spotify-playlist-search:focus { border-color:color-mix(in srgb, var(--hub-accent) 40%, transparent); }
.spotify-library-status { padding:9px 2px 3px; color:#7897a4; font-size:8.5px; }
.spotify-library-status.is-error { color:#e59a9a; }
.spotify-playlist-list { min-height:0; margin-top:6px; display:grid; flex:1 1 auto; align-content:start; gap:5px; overflow:auto; scrollbar-width:thin; }
.spotify-playlist-item { width:100%; min-width:0; padding:6px; display:grid; grid-template-columns:36px minmax(0,1fr) 26px 20px; gap:8px; align-items:center; border:1px solid rgba(255,255,255,.065); border-radius:9px; background:rgba(255,255,255,.025); color:inherit; text-align:left; }
.spotify-playlist-item:hover { border-color:rgba(30,215,96,.22); background:rgba(30,215,96,.06); }
.spotify-media-item { grid-template-columns:36px minmax(0,1fr) auto; }
.spotify-media-actions { display:flex; align-items:center; gap:3px; }
.spotify-media-actions button,
.spotify-media-actions a { width:24px; height:24px; display:grid; place-items:center; padding:0; border:1px solid rgba(255,255,255,.075); border-radius:7px; background:rgba(255,255,255,.025); color:#7f9da8; font-size:9px; text-decoration:none; cursor:pointer; }
.spotify-media-actions button:hover,
.spotify-media-actions button.is-active,
.spotify-media-actions a:hover { color:#9be6b5; border-color:rgba(30,215,96,.22); background:rgba(30,215,96,.07); }
.spotify-playlist-cover { width:36px; height:36px; display:grid; place-items:center; overflow:hidden; border-radius:7px; background:rgba(255,255,255,.045); color:#7aa08e; font-size:16px; }
.spotify-playlist-cover img { width:100%; height:100%; object-fit:cover; }
.spotify-playlist-copy { min-width:0; display:grid; gap:2px; }
.spotify-playlist-copy strong,
.spotify-playlist-copy span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.spotify-playlist-copy strong { color:#e9f2f5; font-size:9px; }
.spotify-playlist-copy span { color:#718f9b; font-size:7.5px; }
.spotify-playlist-start { width:26px; height:26px; display:grid; place-items:center; border:1px solid rgba(30,215,96,.2); border-radius:8px; background:rgba(30,215,96,.08); color:#72daa0; font-size:11px; cursor:pointer; }
.spotify-playlist-start:hover { background:rgba(30,215,96,.16); color:#a3f1bf; }
.spotify-playlist-open { color:#7596a2; font-size:11px; text-align:center; text-decoration:none; }
.spotify-playlist-open:hover { color:#d7e7ec; }
.spotify-playlist-reauthorize { align-self:flex-start; margin-top:8px; text-decoration:none; }
.spotify-callback-ok { color:#8be2b2; }
.spotify-callback-button { display:inline-flex; margin-top:12px; text-decoration:none; }
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-player {
  position:relative;
  display:block;
  gap:0;
}
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-playback-area,
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-main-controls,
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-control-row,
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-secondary-controls,
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-option-buttons { display:contents; }
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-now-playing {
  position:absolute;
  top:0;
  right:29px;
  left:0;
  grid-template-columns:76px minmax(0,1fr);
  gap:7px;
  align-items:start;
}
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-cover-link { width:76px; height:76px; }
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-source { display:none; }
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-track-state { display:block; margin-top:2px; font-size:8.5px; font-weight:700; }
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-track-copy { gap:1px; }
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-track-copy > a { font-size:12px; }
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-track-copy > [data-spotify-artist] { font-size:9px; }
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-track-copy > .spotify-album { display:block; font-size:8.5px; }
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-progress-row,
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-device-controls,
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-footer { display:none; }
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-primary-controls {
  position:absolute;
  bottom:0;
  left:calc(50% - 15px);
  gap:1px;
  transform:translateX(-50%);
}
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-secondary-controls > [data-spotify-media-open],
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-secondary-controls > [data-spotify-device-menu-open],
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-option-buttons > button {
  position:absolute;
  bottom:0;
  width:24px;
  height:24px;
}
.dashboard-widget.widget-spotify.spotify-layout-compact [data-spotify-media-open] { left:0; }
.dashboard-widget.widget-spotify.spotify-layout-compact [data-spotify-favorite] { left:29px; }
.dashboard-widget.widget-spotify.spotify-layout-compact [data-spotify-shuffle] { right:58px; }
.dashboard-widget.widget-spotify.spotify-layout-compact [data-spotify-repeat] { right:29px; }
.dashboard-widget.widget-spotify.spotify-layout-compact [data-spotify-device-menu-open] { right:0; display:grid !important; }
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-volume-wrap {
  position:absolute;
  top:0;
  right:0;
  bottom:29px;
  width:24px;
  display:block;
}
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-volume-wrap > span { display:none; }
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-volume-wrap [data-spotify-volume-value] {
  position:absolute;
  top:0;
  right:0;
  width:24px;
  height:16px;
  display:block;
  font-size:9px;
  line-height:16px;
  text-align:center;
}
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-volume-wrap input {
  position:absolute;
  top:17px;
  right:0;
  bottom:0;
  width:24px;
  height:calc(100% - 17px);
  margin:0;
  writing-mode:vertical-lr;
  direction:rtl;
  cursor:pointer;
}
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-volume-wrap .spotify-volume-number {
  position:absolute;
  z-index:3;
  top:0;
  right:0;
  width:32px;
  height:18px;
  font-size:9px;
  writing-mode:horizontal-tb;
  direction:ltr;
  cursor:text;
}
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-library.is-open,
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-compact-device-menu:not([hidden]) {
  position:absolute;
  z-index:7;
  inset:0;
  display:flex;
  min-height:0;
  flex-direction:column;
  padding:4px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  border-radius:9px;
  background:#071f30;
  box-shadow:0 12px 30px rgba(0,0,0,.38);
}
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-library-head {
  position:absolute;
  z-index:2;
  top:4px;
  right:4px;
  display:block;
}
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-library-head > div:first-child,
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-library > .spotify-media-tabs,
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-library-status,
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-playlist-search,
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-media-panel[data-spotify-media-panel="search"],
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-media-panel[data-spotify-media-panel="queue"],
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-media-panel[data-spotify-media-panel="recent"],
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-media-panel[data-spotify-media-panel="saved"] { display:none !important; }
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-library-head > div:last-child { gap:3px; }
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-library-head button,
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-compact-menu-actions button {
  width:14px;
  height:14px;
  padding:0;
  border:1px solid rgba(255,255,255,.09);
  border-radius:4px;
  background:rgba(255,255,255,.04);
  color:#b7ccd4;
  font-size:9px;
  line-height:1;
  cursor:pointer;
}
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-media-panel[data-spotify-media-panel="playlists"] { min-height:0; display:flex; }
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-playlist-list { margin-top:0; padding-top:17px; gap:3px; }
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-playlist-item { padding:3px; grid-template-columns:28px minmax(0,1fr) 23px; gap:5px; border-radius:7px; }
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-playlist-cover { width:28px; height:28px; border-radius:5px; }
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-playlist-copy span,
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-playlist-open { display:none; }
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-playlist-start { width:23px; height:23px; border-radius:6px; font-size:9px; }
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-compact-menu-actions {
  position:absolute;
  z-index:2;
  top:4px;
  right:4px;
  display:flex;
  gap:3px;
}
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-compact-device-list {
  min-height:0;
  display:grid;
  align-content:start;
  gap:4px;
  padding-top:17px;
  overflow:auto;
  scrollbar-width:thin;
}
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-compact-device-choice,
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-compact-device-empty {
  min-height:30px;
  display:grid;
  grid-template-columns:20px minmax(0,1fr) 7px;
  align-items:center;
  gap:6px;
  padding:4px 6px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:7px;
  background:rgba(255,255,255,.025);
  color:#b9ccd4;
  font-size:9px;
  text-align:left;
}
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-compact-device-choice { cursor:pointer; }
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-compact-device-choice > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-compact-device-choice::after {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#58747d;
  content:"";
}
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-compact-device-choice.is-active {
  color:#91e4af;
  border-color:rgba(30,215,96,.25);
  background:rgba(30,215,96,.08);
}
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-compact-device-choice.is-active::after { background:#1ed760; }
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-compact-device-choice:disabled { opacity:.46; cursor:not-allowed; }
.dashboard-widget.widget-spotify.spotify-layout-compact .spotify-compact-device-empty { display:block; color:#7897a4; }
.dashboard-widget[data-height="2"] .spotify-now-playing { grid-template-columns:78px minmax(0,1fr); }
.dashboard-widget[data-height="2"] .spotify-cover-link { width:78px; height:78px; }
.dashboard-widget[data-height="2"] .spotify-track-copy > a { font-size:17px; }
.dashboard-widget.widget-spotify.spotify-layout-full .spotify-library { display:flex; flex:1 1 auto; flex-direction:column; box-shadow:none; background:rgba(4,24,36,.48); }
.dashboard-widget.widget-spotify.spotify-layout-full .spotify-library.is-open { position:static; inset:auto; z-index:auto; }
.dashboard-widget.widget-spotify.spotify-layout-full .spotify-library-close { display:none; }

@media (min-width:981px) {
  .dashboard-widget.widget-spotify.spotify-layout-full .spotify-player {
    --spotify-wide-cover:76px;
    --spotify-wide-main-height:95px;
    --spotify-wide-info-min:180px;
    --spotify-wide-info-max:650px;
    --spotify-wide-column-gap:10px;
    display:grid;
    grid-template-rows:auto minmax(0,1fr);
    gap:0;
  }
  .dashboard-widget.widget-spotify.spotify-layout-full .spotify-playback-area {
    min-height:0;
    display:grid;
    grid-template-columns:minmax(var(--spotify-wide-info-min), var(--spotify-wide-info-max)) minmax(205px,1fr);
    grid-template-rows:var(--spotify-wide-main-height) auto;
    column-gap:var(--spotify-wide-column-gap);
    row-gap:0;
  }
  .dashboard-widget.widget-spotify.spotify-layout-full .spotify-now-playing {
    grid-column:1;
    grid-row:1;
    grid-template-columns:var(--spotify-wide-cover) minmax(0,1fr);
    gap:12px;
    width:100%;
    min-width:0;
    max-width:none;
    height:var(--spotify-wide-main-height);
    align-self:start;
  }
  .dashboard-widget.widget-spotify.spotify-layout-full .spotify-cover-link {
    width:var(--spotify-wide-cover);
    height:var(--spotify-wide-cover);
    border-radius:11px;
  }
  .dashboard-widget.widget-spotify.spotify-layout-full .spotify-track-copy { gap:3px; align-content:start; }
  .dashboard-widget.widget-spotify.spotify-layout-full .spotify-track-copy > a { font-size:16px; }
  .dashboard-widget.widget-spotify.spotify-layout-full .spotify-track-copy > [data-spotify-artist] { font-size:9.5px; }
  .dashboard-widget.widget-spotify.spotify-layout-full .spotify-track-copy > .spotify-album { display:block; font-size:8.5px; }
  .dashboard-widget.widget-spotify.spotify-layout-full .spotify-track-state { display:block; margin-top:2px; font-size:9.5px; font-weight:700; }
  .dashboard-widget.widget-spotify.spotify-layout-full .spotify-main-controls {
    grid-column:2;
    grid-row:1;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:22px 29px minmax(34px,1fr);
    gap:4px;
    height:var(--spotify-wide-main-height);
    min-width:0;
    justify-items:end;
    align-self:start;
  }
  .dashboard-widget.widget-spotify.spotify-layout-full .spotify-secondary-controls { display:none; }
  .dashboard-widget.widget-spotify.spotify-layout-full .spotify-control-row {
    grid-column:1;
    grid-row:3;
    justify-self:end;
    align-self:end;
    gap:14px;
  }
  .dashboard-widget.widget-spotify.spotify-layout-full .spotify-primary-controls {
    grid-template-columns:27px 36px 27px;
    gap:5px;
  }
  .dashboard-widget.widget-spotify.spotify-layout-full .spotify-primary-controls > button { width:27px; height:27px; }
  .dashboard-widget.widget-spotify.spotify-layout-full .spotify-primary-controls .spotify-play { width:36px; height:36px; }
  .dashboard-widget.widget-spotify.spotify-layout-full .spotify-option-buttons {
    grid-column:1;
    grid-template-columns:repeat(3,27px);
    gap:5px;
  }
  .dashboard-widget.widget-spotify.spotify-layout-full .spotify-option-buttons > button {
    width:27px;
    height:27px;
  }
  .dashboard-widget.widget-spotify.spotify-layout-full .spotify-volume-wrap {
    grid-column:1;
    grid-row:1;
    grid-template-columns:12px minmax(0,1fr) 27px;
    gap:4px;
    font-size:9px;
    width:205px;
    max-width:100%;
    justify-self:end;
  }
  .dashboard-widget.widget-spotify.spotify-layout-full .spotify-device-controls {
    grid-column:1;
    grid-row:2;
    grid-template-columns:minmax(0,1fr);
    width:205px;
    justify-self:end;
    align-self:center;
  }
  .dashboard-widget.widget-spotify.spotify-layout-full .spotify-device-refresh { display:none; }
  .dashboard-widget.widget-spotify.spotify-layout-full .spotify-device-wrap select { height:29px; font-size:8.5px; }
  .dashboard-widget.widget-spotify.spotify-layout-full .spotify-progress-row {
    grid-column:1 / -1;
    grid-row:2;
    margin:0;
  }
  .dashboard-widget.widget-spotify.spotify-layout-full .spotify-footer { display:none; }
  .dashboard-widget.widget-spotify.spotify-layout-full .spotify-library {
    min-height:0;
    margin:0;
    padding:0;
    overflow:hidden;
    border:0;
    border-top:1px solid rgba(145,207,217,.18);
    border-radius:0;
    background:transparent;
  }
  .dashboard-widget.widget-spotify.spotify-layout-full .spotify-library-wide-head {
    flex:0 0 auto;
    display:grid;
    grid-template-columns:minmax(200px,1fr) auto;
    gap:8px;
    align-items:center;
    padding:6px 0;
    border-bottom:1px solid rgba(255,255,255,.07);
  }
  .dashboard-widget.widget-spotify.spotify-layout-full .spotify-catalog-search-wide {
    margin:0;
  }
  .dashboard-widget.widget-spotify.spotify-layout-full .spotify-media-tabs-wide {
    margin:0;
    overflow:visible;
  }
  .dashboard-widget.widget-spotify.spotify-layout-full .spotify-media-tabs-wide button { font-size:9.5px; font-weight:700; }
  .dashboard-widget.widget-spotify.spotify-layout-full .spotify-catalog-search-wide button { font-weight:700; }
  .dashboard-widget.widget-spotify.spotify-layout-full .spotify-library-head,
  .dashboard-widget.widget-spotify.spotify-layout-full .spotify-library > .spotify-media-tabs,
  .dashboard-widget.widget-spotify.spotify-layout-full .spotify-media-panel[data-spotify-media-panel="search"] > .spotify-catalog-search,
  .dashboard-widget.widget-spotify.spotify-layout-full .spotify-playlist-search { display:none; }
  .dashboard-widget.widget-spotify.spotify-layout-full .spotify-library-status {
    flex:0 0 auto;
    padding:5px 2px 2px;
  }
  .dashboard-widget.widget-spotify.spotify-layout-full .spotify-media-panel {
    min-height:0;
    overflow:hidden;
  }
  .dashboard-widget.widget-spotify.spotify-layout-full .spotify-playlist-list {
    padding-right:4px;
    scrollbar-gutter:stable;
  }
}