/* src/styles/base.css */
@font-face {
  font-family: "InterVariable";
  src: url("./InterVariable-AM3KRH5U.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  --font-ui:
    "InterVariable",
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    "Helvetica Neue",
    Arial,
    sans-serif;
  --font-mono:
    ui-monospace,
    "SF Mono",
    Menlo,
    Monaco,
    monospace;
  --menubar-h: 26px;
  --dock-icon-base: calc(50px * var(--dock-size, 1) * var(--dock-size-media, 1));
  --radius-window: 11px;
  --bar-bg: rgba(255, 255, 255, 0.52);
  --bar-fg: rgba(29, 29, 31, 0.92);
  --menu-bg: rgba(250, 250, 252, 0.88);
  --menu-hover: var(--accent, #0a7aff);
  --menu-hover-fg: #fff;
  --dock-bg: rgba(255, 255, 255, 0.36);
  --dock-border: rgba(255, 255, 255, 0.55);
  --win-bg: rgba(246, 246, 248, 0.94);
  --win-solid: #f3f3f5;
  --win-chrome-tint: linear-gradient(rgba(252, 252, 254, 0.96), rgba(240, 240, 244, 0.96));
  --win-border: rgba(0, 0, 0, 0.16);
  --fg: #1d1d1f;
  --fg-dim: rgba(60, 60, 67, 0.6);
  --sidebar-bg: rgba(238, 238, 242, 0.72);
  --content-bg: #ffffff;
  --hairline: rgba(0, 0, 0, 0.09);
  --input-bg: #ffffff;
  --btn-metal: linear-gradient(#ffffff, #f2f2f4);
  --panel-glass: rgba(246, 246, 248, 0.72);
  --tl-red: #ff5f57;
  --tl-yellow: #febc2e;
  --tl-green: #28c840;
  --tl-off: #d9dcde;
}
:root[data-appearance=dark] {
  --bar-bg: rgba(30, 30, 32, 0.58);
  --bar-fg: rgba(245, 245, 247, 0.92);
  --menu-bg: rgba(44, 44, 46, 0.86);
  --dock-bg: rgba(38, 38, 42, 0.42);
  --dock-border: rgba(255, 255, 255, 0.14);
  --win-bg: rgba(38, 38, 41, 0.95);
  --win-solid: #2b2b2e;
  --win-chrome-tint: linear-gradient(rgba(56, 56, 59, 0.98), rgba(43, 43, 46, 0.98));
  --win-border: rgba(0, 0, 0, 0.55);
  --fg: #f5f5f7;
  --fg-dim: rgba(235, 235, 245, 0.6);
  --sidebar-bg: rgba(30, 30, 33, 0.78);
  --content-bg: #1e1e21;
  --hairline: rgba(255, 255, 255, 0.09);
  --input-bg: #1b1b1e;
  --btn-metal: linear-gradient(#4a4a4f, #3c3c40);
  --panel-glass: rgba(44, 44, 48, 0.72);
  --tl-off: #55575c;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #000;
  color: var(--fg);
  font-family: var(--font-ui);
  font-optical-sizing: auto;
  font-size: 13px;
  letter-spacing: -0.008em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button {
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: default;
}
input,
textarea,
select {
  font-family: inherit;
  letter-spacing: inherit;
}
#screen-root {
  height: 100vh;
  height: 100dvh;
}
.screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}
.wallpaper {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.wallpaper::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.surface-stack {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.layer-desktop-area {
  position: relative;
  flex: 1;
  min-height: 0;
}
.overlay-layer {
  position: fixed;
  inset: 0;
  z-index: 5000;
  pointer-events: none;
}
.overlay-layer > * {
  pointer-events: auto;
}
.dialog-layer {
  z-index: 7000;
}
.menu-layer {
  z-index: 8000;
}
::selection {
  background: color-mix(in srgb, var(--accent) 34%, transparent);
}
::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(120, 120, 128, 0.42);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(120, 120, 128, 0.65);
}
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 0 1.2px color-mix(in srgb, var(--accent) 80%, white);
  border-radius: 6px;
}
.btn-secondary {
  background: var(--btn-metal);
  border: 0.5px solid rgba(0, 0, 0, 0.18);
  border-radius: 6px;
  padding: 3px 12px;
  font-size: 12.5px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
}
.btn-secondary:hover {
  background: linear-gradient(#ffffff, #fafafa);
}
:root[data-appearance=dark] .btn-secondary:hover {
  background: linear-gradient(#535357, #45454a);
}
.btn-primary {
  background: var(--accent);
  color: #fff;
  border-radius: 6px;
  padding: 3px 12px;
  font-size: 12.5px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 45%, transparent);
}
.btn-primary:hover {
  filter: brightness(1.07);
}
.btn-danger {
  background: linear-gradient(#ff6961, #eb4d3d);
  color: #fff;
  border-radius: 6px;
  padding: 3px 12px;
  font-size: 12.5px;
}
.seg {
  display: inline-flex;
  background: color-mix(in srgb, var(--fg-dim) 12%, transparent);
  border-radius: 7px;
  padding: 2px;
  gap: 2px;
}
.seg.mini .seg-btn {
  padding: 2px 9px;
  font-size: 11.5px;
}
.seg-btn {
  border-radius: 5.5px;
  padding: 3px 10px;
  font-size: 12.5px;
  color: var(--fg);
}
.seg-btn.is-active {
  background: var(--content-bg);
  box-shadow: 0 1px 2.5px rgba(0, 0, 0, 0.18);
}
.seg-btn:disabled {
  opacity: 0.4;
}
.switch {
  width: 38px;
  height: 22px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--fg-dim) 25%, transparent);
  position: relative;
  transition: background 180ms ease;
}
.switch.is-on {
  background: var(--accent);
}
.sw-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
  transition: left 190ms cubic-bezier(0.3, 0.9, 0.4, 1.08);
}
.switch.is-on .sw-knob {
  left: 18px;
}
.slider {
  position: relative;
  width: 210px;
  height: 26px;
}
.slider.small {
  width: 150px;
}
.sl-input {
  position: absolute;
  inset: 0;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}
.sl-fill {
  position: absolute;
  left: 8px;
  top: 8px;
  height: 10px;
  width: 40%;
  border-radius: 5px;
  background: var(--accent);
  max-width: calc(100% - 16px);
}
.sl-input::-webkit-slider-runnable-track {
  height: 26px;
  background: linear-gradient(var(--btn-metal), var(--btn-metal)) padding-box, border-box;
  border-radius: 13px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 -1px 0 rgba(255, 255, 255, 0.35);
}
.sl-input::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(0, 0, 0, 0.15);
}
.radio-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 12px;
  border-radius: 7px;
  cursor: default;
}
.radio-row:hover:not(.is-disabled) {
  background: color-mix(in srgb, var(--fg-dim) 9%, transparent);
}
.radio-row.is-selected .radio-dot {
  background: var(--accent);
  border-color: var(--accent);
}
.radio-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--fg-dim) 55%, transparent);
  background:
    radial-gradient(
      circle at 50% 50%,
      #fff 0 3.5px,
      transparent 4px) center / 100% no-repeat;
}
.radio-row.is-selected .radio-dot {
  background:
    radial-gradient(
      circle at 50% 50%,
      #fff 0 3.5px,
      transparent 4px) center / 100% no-repeat,
    var(--accent);
}
.radio-row.is-disabled {
  opacity: 0.4;
}
.gap8 {
  height: 8px;
}
@media (max-width: 640px) {
  .slider {
    width: 150px;
  }
}

/* src/styles/boot.css */
.boot-layer {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #f5f5f7;
}
.boot-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 58px;
}
.boot-apple {
  width: 74px;
  height: 86px;
  animation: boot-fade-in 700ms ease both;
}
@keyframes boot-fade-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.boot-progress {
  width: 180px;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
  opacity: 0;
  animation: boot-fade-in 400ms ease both;
}
.boot-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: #fff;
  transition: width 2s cubic-bezier(0.25, 0.6, 0.35, 0.98);
}
.boot-layer.is-lock-screen,
.boot-layer.is-lock-screen.over-desktop {
  background: linear-gradient(rgba(10, 10, 14, 0.28), rgba(10, 10, 14, 0.34)), var(--lock-wallpaper, radial-gradient(120% 85% at 78% 12%, #ecbd83, transparent 60%), linear-gradient(158deg, #d2905c 30%, #6b4a33 78%, #4c3524));
}
.boot-layer.is-lock-screen.over-desktop {
  -webkit-backdrop-filter: blur(34px) saturate(140%);
  backdrop-filter: blur(34px) saturate(140%);
}
.lock-clock {
  position: absolute;
  top: 7vh;
  left: 0;
  right: 0;
  text-align: center;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
  animation: lock-rise 560ms cubic-bezier(0.2, 0.85, 0.3, 1) both;
}
.lock-clock-time {
  font-size: clamp(56px, 9vw, 92px);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1;
}
.lock-clock-date {
  margin-top: 8px;
  font-size: 19px;
  font-weight: 520;
  opacity: 0.94;
}
.lock-card {
  margin-top: 16vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  animation: lock-rise 620ms 80ms cubic-bezier(0.2, 0.85, 0.3, 1) both;
}
@keyframes lock-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.lock-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background:
    linear-gradient(
      150deg,
      #e8b07a,
      #a05f45);
  color: #fff;
  font-size: 30px;
  font-weight: 600;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.32), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.lock-user-name {
  font-size: 16px;
  font-weight: 600;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}
.lock-password-row {
  position: relative;
  display: flex;
  align-items: center;
}
.lock-password {
  width: 218px;
  height: 32px;
  border: none;
  border-radius: 16px;
  padding: 0 40px 0 15px;
  background: rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  font-size: 13.5px;
  outline: none;
  transition: box-shadow 160ms ease, background 160ms ease;
}
.lock-password::placeholder {
  color: rgba(255, 255, 255, 0.75);
}
.lock-password:focus {
  background: rgba(255, 255, 255, 0.36);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55);
}
.lock-submit {
  position: absolute;
  right: 5px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(120, 120, 130, 0.55);
  color: #fff;
  display: grid;
  place-items: center;
}
.lock-hint {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  min-height: 16px;
}
.lock-card.unlocking .lock-avatar,
.lock-card.unlocking .lock-user-name,
.lock-card.unlocking .lock-password-row,
.lock-card.unlocking .lock-hint {
  opacity: 0;
  transform: scale(1.04);
  transition: all 420ms ease;
}
.lock-footer-actions {
  position: absolute;
  bottom: 42px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 38px;
  opacity: 0.95;
}
.lock-action {
  color: rgba(255, 255, 255, 0.92);
  font-size: 13.5px;
  padding: 5px 12px;
  border-radius: 7px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
.lock-action:hover {
  background: rgba(255, 255, 255, 0.18);
}
.boot-layer.reveal-desktop {
  transition: opacity 480ms ease, transform 480ms ease;
  opacity: 0;
  transform: scale(1.03);
  pointer-events: none;
}
.boot-layer.is-sleeping {
  cursor: none;
}
.sleep-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  animation: sleep-breathe 2.6s ease-in-out infinite;
}
@keyframes sleep-breathe {
  0%, 100% {
    opacity: 0.25;
  }
  50% {
    opacity: 0.85;
  }
}
.wake-anywhere {
  position: absolute;
  inset: 0;
  width: 100%;
}
.power-glyph {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  border: none;
  position: relative;
  opacity: 0;
  animation: boot-fade-in 700ms ease both;
  cursor: pointer;
}
.power-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2.5px solid rgba(120, 200, 255, 0.75);
  animation: power-pulse 2.4s ease-in-out infinite;
}
@keyframes power-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(90, 170, 240, 0.4);
  }
  50% {
    box-shadow: 0 0 0 14px rgba(90, 170, 240, 0);
  }
}
.power-bar {
  position: absolute;
  left: 50%;
  top: 18px;
  bottom: 18px;
  width: 3px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: rgba(140, 205, 250, 0.9);
}
.shutdown-tip {
  position: absolute;
  bottom: 34vh;
  font-size: 13px;
  color: rgba(235, 235, 245, 0.6);
}
.boot-layer.is-hidden {
  display: none;
}

/* src/styles/chrome.css */
.menubar {
  position: relative;
  z-index: 4000;
  height: var(--menubar-h);
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  padding: 0 9px;
  background: var(--bar-bg);
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  color: var(--bar-fg);
  font-size: 13px;
  box-shadow: inset 0 -0.5px 0 rgba(0, 0, 0, 0.14);
}
:root[data-appearance=dark] .menubar {
  box-shadow: inset 0 -0.5px 0 rgba(255, 255, 255, 0.1);
}
.mb-left,
.mb-right {
  display: flex;
  align-items: stretch;
  gap: 2px;
}
.mb-left {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.mb-left::-webkit-scrollbar {
  display: none;
}
.mb-right {
  flex: none;
}
.mb-appmenus {
  display: flex;
  align-items: stretch;
}
.mb-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  border-radius: 4px;
  white-space: nowrap;
}
.mb-item:hover,
.mb-item.is-open {
  background: rgba(125, 125, 135, 0.24);
}
.mb-strong {
  font-weight: 600;
}
.mb-glyph {
  width: 25px;
}
.battery-percent {
  font-size: 12px;
}
.mb-clock {
  font-variant-numeric: tabular-nums;
}
.dock-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  z-index: 3000;
  pointer-events: none;
}
.dock {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: auto;
  transition: transform 340ms cubic-bezier(0.3, 0.95, 0.35, 1), opacity 260ms ease;
}
.dock.auto-hidden {
  transform: translateX(-50%) translateY(calc(100% + 10px));
}
.dock-hover-zone {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  z-index: 3100;
}
.dock-panel {
  background: var(--dock-bg);
  border: 0.5px solid var(--dock-border);
  border-radius: 21px;
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.34), inset 0 0.5px 0 rgba(255, 255, 255, 0.4);
  padding: 4px;
}
:root[data-appearance=dark] .dock-panel {
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55), inset 0 0.5px 0 rgba(255, 255, 255, 0.16);
}
.dock-items {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 7px;
  padding: 0 3px;
  min-height: var(--dock-icon-base);
}
.dock-item {
  position: relative;
  width: var(--dock-icon-base);
  height: var(--dock-icon-base);
  display: grid;
  place-items: end center;
  transform-origin: 50% 92%;
}
.dock-icon-wrap {
  position: relative;
  width: var(--dock-icon-base);
  height: var(--dock-icon-base);
  transition: filter 140ms ease;
}
.dock-icon-wrap svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.28));
}
.dock-item:hover .dock-icon-wrap {
  filter: brightness(1.06);
}
.dock-item.drop-target .dock-icon-wrap {
  transform: scale(1.18) translateY(-8px);
}
.dock-item.has-items::before {
  content: "";
  position: absolute;
  inset: 26% 26% 30%;
  border-radius: 10px;
  background: rgba(60, 70, 82, 0.35);
}
.dock-tip {
  position: absolute;
  bottom: calc(100% + 13px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 3.5px 11px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--panel-glass) 88%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28), inset 0 0.5px 0 rgba(255, 255, 255, 0.4);
  color: var(--fg);
  font-size: 12px;
  font-weight: 550;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 130ms ease, transform 130ms ease;
}
.dock-item:hover .dock-tip,
.dock-item:focus-visible .dock-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.dock-dot {
  position: absolute;
  bottom: -6.5px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  color: var(--fg-dim);
}
:root[data-appearance=dark] .dock-dot {
  color: #e8e8ed;
}
.dock-sep {
  width: 1px;
  align-self: stretch;
  margin: 6px 2px;
  background: color-mix(in srgb, var(--fg-dim) 45%, transparent);
}
@keyframes dock-bounce {
  0%, 100% {
    transform: none;
  }
  38% {
    transform: translateY(-19px);
  }
  72% {
    transform: translateY(0);
  }
  86% {
    transform: translateY(-7px);
  }
}
.dock-item.is-bouncing .dock-icon-wrap {
  animation: dock-bounce 1s cubic-bezier(0.3, 0, 0.4, 1) infinite;
}
.desktop-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.desktop-icon {
  position: absolute;
  width: 84px;
  padding: 4px 2px 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  border-radius: 9px;
  cursor: default;
}
.di-art svg {
  filter: drop-shadow(0 2px 3.5px rgba(0, 0, 0, 0.32));
}
.di-label {
  max-width: 80px;
  font-size: 11.8px;
  line-height: 1.25;
  text-align: center;
  font-weight: 520;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.desktop-icon.is-selected {
  background: rgba(160, 175, 195, 0.0);
}
.desktop-icon.is-selected .di-label {
  background: var(--accent);
  text-shadow: none;
  border-radius: 4px;
}
.desktop-icon.is-selected .di-art {
  filter: brightness(0.96);
  outline: 26px solid transparent;
  position: relative;
}
.desktop-icon.dragging {
  opacity: 0.75;
  z-index: 50;
}
.desktop-icon.drop-hover .di-art {
  transform: scale(1.08);
}
.desktop-icon.renaming {
  background: rgba(160, 175, 195, 0.25);
}
.inline-rename {
  width: 78px;
  font-size: 11.5px;
  text-align: center;
  border-radius: 4px;
  border: none;
  padding: 1px 3px;
  background: #fff;
  color: #111;
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--accent) 55%, transparent);
}
.marquee-band {
  position: fixed;
  z-index: 3500;
  border: 1px solid color-mix(in srgb, #fff 65%, var(--accent));
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
}
.desktop-icon:focus-visible {
  box-shadow: none;
}
.mb-appmenus {
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.mb-appmenus::-webkit-scrollbar {
  display: none;
}
@media (max-width: 860px) {
  .mb-battery .battery-percent {
    display: none;
  }
  .mb-item {
    padding: 0 8px;
  }
}
@media (max-width: 720px) {
  :root {
    --menubar-h: 24px;
    --dock-size-media: 0.72;
  }
  .mb-battery {
    display: none;
  }
  .mb-item {
    padding: 0 6px;
  }
  .mb-appmenus .mb-item {
    flex: none;
  }
  .dock {
    bottom: 4px;
    max-width: calc(100vw - 12px);
  }
  .dock-items {
    max-width: calc(100vw - 24px);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .dock-items::-webkit-scrollbar {
    display: none;
  }
  .desktop-icon {
    transform-origin: top right;
    scale: 0.9;
  }
}
@media (max-width: 480px) {
  .mb-item {
    padding: 0 5px;
    font-size: 12px;
  }
}

/* src/styles/window.css */
.window {
  position: absolute;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  border-radius: var(--radius-window);
  background: var(--win-bg);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  box-shadow:
    0 26px 68px -18px rgba(0, 0, 0, 0.5),
    0 8px 22px rgba(0, 0, 0, 0.16),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.32),
    0 0 0 0.5px rgba(0, 0, 0, 0.24);
  overflow: hidden;
}
:root[data-appearance=dark] .window {
  box-shadow:
    0 26px 68px -18px rgba(0, 0, 0, 0.72),
    0 8px 22px rgba(0, 0, 0, 0.38),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.12),
    0 0 0 0.5px rgba(0, 0, 0, 0.7);
}
.window.unfocused {
  box-shadow:
    0 14px 34px -14px rgba(0, 0, 0, 0.34),
    0 4px 10px rgba(0, 0, 0, 0.1),
    0 0 0 0.5px rgba(0, 0, 0, 0.2);
}
.window.dragging {
  cursor: grabbing;
}
.window-chrome {
  position: relative;
  flex: none;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  background: var(--win-chrome-tint);
  box-shadow: inset 0 -0.5px 0 var(--hairline);
  cursor: default;
}
.window-finder .window-chrome.has-toolbar,
.window-safari .window-chrome,
.window-notes .window-chrome {
  height: 48px;
}
.window-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  max-width: 46%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.3px;
  font-weight: 600;
  color: var(--fg-dim);
  pointer-events: none;
}
.window:not(.unfocused) .window-title {
  color: color-mix(in srgb, var(--fg) 82%, transparent);
}
.window-chrome.has-toolbar .window-title,
.window-safari .window-title {
  display: none;
}
.traffic-lights {
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 1;
}
.tl {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  padding: 0;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.16), inset 0 1px 1px rgba(255, 255, 255, 0.35);
  transition: filter 110ms ease;
}
.tl-close {
  background: var(--tl-red);
}
.tl-minimize {
  background: var(--tl-yellow);
}
.tl-zoom {
  background: var(--tl-green);
}
.tl-glyph {
  opacity: 0;
  line-height: 0;
  font-size: 9px;
  font-weight: 700;
  color: rgba(60, 40, 20, 0.62);
}
.traffic-lights.glyphs-on .tl-glyph {
  opacity: 1;
}
.tl-close .tl-glyph::before {
  content: "\d7";
  font-size: 11px;
  font-weight: 600;
}
.tl-minimize .tl-glyph::before {
  content: "\2013";
  font-size: 11px;
  font-weight: 700;
}
.tl-zoom .tl-glyph::before {
  content: "";
  width: 7px;
  height: 7px;
  background: currentColor;
  clip-path: polygon(0 100%, 0 34%, 34% 34%, 34% 0, 100% 0, 100% 66%, 66% 66%, 66% 100%);
  display: block;
  margin-top: 1px;
}
.window.unfocused .traffic-lights:not(:hover) .tl,
.window:not(.unfocused) .window-chrome:not(:hover) .traffic-lights:not(:hover) .tl {
}
.window.unfocused .traffic-lights:not(:hover) .tl {
  background: var(--tl-off);
}
.window.unfocused .traffic-lights:not(:hover) .tl .tl-glyph {
  opacity: 0 !important;
}
.tl:hover {
  filter: brightness(1.08);
}
.tl-disabled {
  opacity: 0.45;
  pointer-events: none;
}
.window-extras {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.toolbar-btn {
  display: grid;
  place-items: center;
  width: 28px;
  height: 24px;
  border-radius: 6.5px;
  color: var(--fg-dim);
}
.toolbar-btn:hover:not(.is-disabled) {
  background: rgba(128, 128, 138, 0.16);
  color: var(--fg);
}
.toolbar-btn.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}
.window-body {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--content-bg);
}
.resize-handle {
  position: absolute;
  z-index: 30;
  touch-action: none;
}
.rh-n {
  top: -3px;
  left: 8px;
  right: 8px;
  height: 7px;
  cursor: ns-resize;
}
.rh-s {
  bottom: -3px;
  left: 8px;
  right: 8px;
  height: 7px;
  cursor: ns-resize;
}
.rh-e {
  right: -3px;
  top: 8px;
  bottom: 8px;
  width: 7px;
  cursor: ew-resize;
}
.rh-w {
  left: -3px;
  top: 8px;
  bottom: 8px;
  width: 7px;
  cursor: ew-resize;
}
.rh-ne {
  top: -3px;
  right: -3px;
  width: 15px;
  height: 15px;
  cursor: nesw-resize;
}
.rh-nw {
  top: -3px;
  left: -3px;
  width: 15px;
  height: 15px;
  cursor: nwse-resize;
}
.rh-se {
  bottom: -3px;
  right: -3px;
  width: 15px;
  height: 15px;
  cursor: nwse-resize;
}
.rh-sw {
  bottom: -3px;
  left: -3px;
  width: 15px;
  height: 15px;
  cursor: nesw-resize;
}
.window[style*=cursor] .resize-handle {
  pointer-events: auto;
}
.window-info .window-body {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.info-panel {
  padding: 12px 14px;
}
.info-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.info-name {
  font-size: 15px;
  font-weight: 600;
  border: none;
  background: transparent;
  color: var(--fg);
  outline: none;
  width: 100%;
}
.info-rows {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 5px 10px;
  font-size: 12px;
  border-top: 1px solid var(--hairline);
  padding-top: 10px;
}
.info-rows dt {
  color: var(--fg-dim);
  text-align: right;
  white-space: nowrap;
}
.info-rows dd {
  margin: 0;
  -webkit-user-select: text;
  user-select: text;
  word-break: break-word;
}
@media (max-width: 720px) {
  :root {
    --menubar-h: 24px;
  }
  .mb-battery .battery-percent {
    display: none;
  }
  .dock {
    bottom: 4px;
  }
  .desktop-icon {
    transform-origin: top right;
    scale: 0.92;
  }
}

/* src/styles/menus.css */
.menu-pop {
  position: fixed;
  z-index: 8000;
  min-width: 190px;
  padding: 4.5px 5px;
  border-radius: 7px;
  background: var(--menu-bg);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  box-shadow:
    0 12px 34px rgba(0, 0, 0, 0.3),
    0 2px 8px rgba(0, 0, 0, 0.14),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.42),
    0 0 0 0.5px rgba(0, 0, 0, 0.16);
  color: var(--fg);
  font-size: 13px;
  animation: menu-in 110ms cubic-bezier(0.2, 0.9, 0.35, 1) both;
}
@keyframes menu-in {
  from {
    opacity: 0;
    transform: scale(0.975) translateY(-1.5px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 24.5px;
  margin: 0 1px;
  padding: 0 10px 0 6px;
  border-radius: 5.5px;
  white-space: nowrap;
}
.menu-item.is-hot:not(.is-disabled),
.menu-item:hover:not(.is-disabled) {
  background: var(--accent);
  color: #fff;
}
.mi-state {
  width: 15px;
  display: inline-flex;
  justify-content: center;
  flex: none;
}
.state-mark {
  font-size: 11.5px;
  font-weight: 700;
}
.state-mark.radio::before {
  content: "\2022";
  font-size: 17px;
  line-height: 0.5;
}
.mi-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mi-label.is-danger {
  color: #e0383c;
}
.menu-item.is-hot .mi-label.is-danger,
.menu-item:hover .mi-label.is-danger {
  color: #fff;
}
.mi-tail {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: inherit;
  opacity: 0.85;
}
.mi-shortcut {
  font-size: 12.3px;
  letter-spacing: 0.02em;
}
.mi-sub-arrow {
  font-size: 11px;
}
.menu-item.is-open-parent {
  background: var(--accent);
  color: #fff;
}
.menu-item.is-disabled {
  opacity: 0.45;
}
.menu-sep {
  height: 1px;
  margin: 4.5px 12px;
  background: var(--hairline);
}
.mb-item.is-open {
  background: rgba(125, 125, 135, 0.32);
}

/* src/styles/overlays.css */
.spotlight-panel {
  position: absolute;
  top: 19vh;
  left: 50%;
  transform: translateX(-50%) scale(0.97);
  width: min(640px, 92vw);
  border-radius: 13px;
  background: var(--panel-glass);
  backdrop-filter: blur(34px) saturate(180%);
  -webkit-backdrop-filter: blur(34px) saturate(180%);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.44),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.4),
    0 0 0 0.5px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 150ms ease, transform 170ms cubic-bezier(0.25, 1.05, 0.35, 1);
}
.spotlight-panel.open {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
.sl-top {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 15px;
}
.sl-glyph {
  color: var(--fg-dim);
  flex: none;
}
.sl-input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 21px;
  font-weight: 300;
  color: var(--fg);
}
.sl-input::placeholder {
  color: color-mix(in srgb, var(--fg-dim) 72%, transparent);
}
.sl-body {
  display: grid;
  grid-template-columns: 58% 42%;
  max-height: 400px;
}
.sl-body.empty {
  grid-template-columns: 100%;
}
.sl-body.empty .sl-preview {
  display: none;
}
.sl-results {
  overflow-y: auto;
  padding: 6px;
  scrollbar-width: thin;
  min-height: 120px;
}
.sl-group-title {
  padding: 7px 12px 3px;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.sl-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: default;
}
.sl-row.is-selected {
  background: var(--accent);
  color: #fff;
}
.sl-icn {
  flex: none;
  display: grid;
  place-items: center;
}
.sl-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sl-title {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sl-sub {
  font-size: 11.3px;
  color: var(--fg-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sl-row.is-selected .sl-sub {
  color: rgba(255, 255, 255, 0.82);
}
.sl-hint {
  padding: 26px 22px;
  color: var(--fg-dim);
  font-size: 13px;
  line-height: 1.75;
}
.sl-hint b {
  font-family: var(--font-mono);
  font-weight: 600;
}
.sl-hint.small {
  padding: 18px 16px;
}
.sl-preview {
  border-left: 1px solid var(--hairline);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-align: center;
}
.slp-big {
  font-size: 34px;
  font-weight: 250;
}
.slp-art svg {
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.25));
}
.slp-title {
  font-weight: 600;
}
.slp-sub,
.slp-sub2 {
  color: var(--fg-dim);
  font-size: 12px;
}
.slp-hint {
  color: var(--fg-dim);
  font-size: 11.5px;
}
.cc-panel {
  position: absolute;
  top: calc(var(--menubar-h) + 6px);
  right: 8px;
  width: 308px;
  padding: 10px;
  border-radius: 17px;
  background: var(--panel-glass);
  backdrop-filter: blur(38px) saturate(190%);
  -webkit-backdrop-filter: blur(38px) saturate(190%);
  box-shadow:
    0 26px 70px rgba(0, 0, 0, 0.42),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.45),
    0 0 0 0.5px rgba(0, 0, 0, 0.18);
  display: grid;
  grid-template-columns: 58% 1fr;
  gap: 10px;
  opacity: 0;
  transform: scale(0.96);
  transform-origin: top right;
  transition: opacity 160ms ease, transform 200ms cubic-bezier(0.28, 1.06, 0.36, 1);
}
.cc-panel.open {
  opacity: 1;
  transform: scale(1);
}
.cc-row {
  display: contents;
}
.cc-group {
  grid-column: 1 / -1;
  background: color-mix(in srgb, #fff 45%, transparent);
  border-radius: 13px;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
:root[data-appearance=dark] .cc-group,
:root[data-appearance=dark] .cc-tile-wide,
:root[data-appearance=dark] .cc-col,
:root[data-appearance=dark] .cc-dnd {
  background: rgba(255, 255, 255, 0.09);
}
.cc-box-label {
  grid-column: 1 / -1;
  font-size: 12px;
  font-weight: 600;
  padding: 1px 5px 4px;
}
.cc-ctile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 3px 7px;
  border-radius: 9px;
  transition: background 140ms ease;
}
.cc-ctile:hover {
  background: rgba(128, 128, 138, 0.14);
}
.cc-ctile .cc-tile-icon {
  color: #39c1ff;
}
.cc-ctile:not(.is-on) .cc-tile-icon {
  color: var(--fg-dim);
}
.cc-ctext {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.25;
}
.cc-ctext b {
  font-size: 11px;
  font-weight: 600;
  max-width: 76px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cc-ctext small {
  font-size: 10px;
  color: var(--fg-dim);
}
.cc-col {
  background: color-mix(in srgb, #fff 45%, transparent);
  border-radius: 13px;
  padding: 8px;
  display: grid;
}
.cc-dnd {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 9px;
  border-radius: 11px;
  text-align: left;
  transition: background 140ms ease;
}
.cc-dnd:hover {
  background: rgba(128, 128, 138, 0.14);
}
.cc-dnd .cc-tile-icon {
  color: #8f65e8;
  flex: none;
}
.cc-dnd b {
  font-size: 12px;
  display: block;
}
.cc-dnd small {
  font-size: 10.5px;
  color: var(--fg-dim);
}
.cc-dnd.is-on {
  background:
    linear-gradient(
      120deg,
      #a06cf0,
      #7d4fd8);
  color: #fff;
}
.cc-dnd.is-on small {
  color: rgba(255, 255, 255, 0.85);
}
.cc-dnd.is-on .cc-tile-icon {
  color: #fff;
}
.cc-panel > .cc-dnd-wrap {
  display: none;
}
.cc-tile-wide {
  grid-column: 1 / -1;
  background: color-mix(in srgb, #fff 45%, transparent);
  border-radius: 13px;
  padding: 9px 10px;
}
.cc-slider {
  padding: 2px 0;
}
.ccs-track {
  position: relative;
  height: 27px;
  border-radius: 8.5px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.14);
  overflow: hidden;
  cursor: pointer;
}
:root[data-appearance=dark] .ccs-track {
  background: rgba(60, 60, 66, 0.7);
}
.ccs-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 50%;
  background: var(--accent, #0a7aff);
  opacity: 0.92;
}
.ccs-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 8px;
  color: color-mix(in srgb, #fff 82%, var(--accent));
  mix-blend-mode: normal;
  z-index: 1;
}
.ccs-knob {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: calc(50% - 5px);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0.5px 3px rgba(0, 0, 0, 0.4);
  z-index: 2;
}
.cc-nowplaying {
  display: flex;
  align-items: center;
  gap: 10px;
}
.np-art {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background:
    radial-gradient(
      circle at 68% 32%,
      #ffd9a0,
      transparent 46%),
    linear-gradient(
      150deg,
      #d2905c,
      #59402e);
  flex: none;
}
.np-text {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}
.np-text b {
  display: block;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.np-text small {
  font-size: 10.5px;
  color: var(--fg-dim);
}
.np-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}
.np-btn,
.np-skip svg {
  color: var(--fg);
}
.np-skip {
  display: inline-flex;
  gap: 9px;
}
.nc-panel {
  position: fixed;
  top: var(--menubar-h);
  right: 0;
  bottom: 0;
  width: 334px;
  max-width: 88vw;
  padding: 10px 10px 56px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  transform: translateX(105%);
  transition: transform 320ms cubic-bezier(0.24, 0.94, 0.32, 1.04);
  z-index: 4600;
  scrollbar-width: none;
}
.nc-panel::-webkit-scrollbar {
  display: none;
}
.nc-panel.open {
  transform: translateX(0);
}
.nc-stack {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.nc-empty-card {
  padding: 15px;
  text-align: center;
  border-radius: 13px;
  background: var(--panel-glass);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  color: var(--fg-dim);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.18), 0 0 0 0.5px rgba(0, 0, 0, 0.12);
}
.nc-item {
  display: flex;
  gap: 10px;
  text-align: left;
  padding: 11px 12px;
  border-radius: 13px;
  background: var(--panel-glass);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.18), 0 0 0 0.5px rgba(0, 0, 0, 0.12);
  color: var(--fg);
  cursor: default;
}
.nc-item:hover {
  filter: brightness(1.03);
}
.nc-item-icon {
  flex: none;
  margin-top: 2px;
}
.nc-item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.nc-item-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}
.nc-item-top small {
  color: var(--fg-dim);
  font-size: 10.5px;
  flex: none;
}
.nc-item span:last-child {
  font-size: 12px;
  color: color-mix(in srgb, var(--fg) 78%, transparent);
}
.widget {
  border-radius: 16px;
  background: var(--panel-glass);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.18), 0 0 0 0.5px rgba(0, 0, 0, 0.12);
  padding: 13px 15px;
}
.widget-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.widget-head b {
  font-size: 14px;
}
.widget-head small {
  color: #ff6b62;
  font-weight: 600;
  font-size: 11px;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 3px;
  font-size: 11px;
  text-align: center;
}
.cal-dow {
  color: var(--fg-dim);
  font-weight: 600;
  font-size: 10px;
}
.cal-day {
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.cal-day.is-today {
  background: #ff5f57;
  color: #fff;
  font-weight: 700;
}
.cal-event {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--hairline);
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 12px;
}
.event-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7d4fd8;
  align-self: center;
}
.cal-event b {
  display: block;
}
.cal-event small {
  color: var(--fg-dim);
}
.widget-weather {
  background:
    radial-gradient(
      120% 130% at 84% 8%,
      rgba(140, 205, 250, 0.65),
      transparent 55%),
    linear-gradient(
      160deg,
      #4f8fc9,
      #23517e);
  color: #fff;
}
.weather-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.weather-temp {
  font-size: 34px;
  font-weight: 250;
  line-height: 1;
}
.weather-city {
  font-size: 13px;
  font-weight: 550;
  margin-top: 3px;
}
.weather-foot {
  margin-top: 8px;
  font-size: 11.5px;
  opacity: 0.92;
}
.toasts-layer {
  position: absolute;
  top: calc(var(--menubar-h) + 8px);
  right: 9px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 324px;
  max-width: 86vw;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 14px;
  background: var(--panel-glass);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28), 0 0 0 0.5px rgba(0, 0, 0, 0.14);
  cursor: pointer;
  opacity: 0;
  transform: translateX(30px) scale(0.97);
  transition: opacity 240ms ease, transform 280ms cubic-bezier(0.2, 1.05, 0.34, 1);
}
.toast.shown {
  opacity: 1;
  transform: none;
}
.toast.leaving {
  opacity: 0;
  transform: translateX(38px) scale(0.95);
}
.toast-icon {
  flex: none;
  margin-top: 2px;
}
.toast-text {
  display: flex;
  flex-direction: column;
  gap: 1.5px;
  min-width: 0;
}
.toast-text b {
  font-size: 12.8px;
}
.toast-text span {
  font-size: 12px;
  color: color-mix(in srgb, var(--fg) 74%, transparent);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.launchpad {
  position: fixed;
  inset: 0;
  z-index: 4700;
  padding: 46px 4vw 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
  background: rgba(20, 20, 26, 0.3);
  backdrop-filter: blur(46px) saturate(150%);
  -webkit-backdrop-filter: blur(46px) saturate(150%);
  opacity: 0;
  transform: scale(1.055);
  transition: opacity 210ms ease, transform 260ms cubic-bezier(0.23, 1, 0.32, 1);
}
.launchpad.open {
  opacity: 1;
  transform: scale(1);
}
.lp-search-input {
  width: 250px;
  height: 29px;
  border-radius: 8px;
  border: none;
  outline: none;
  background: rgba(120, 122, 132, 0.45);
  color: #fff;
  font-size: 13px;
  text-align: center;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.lp-search-input:focus {
  box-shadow: 0 0 0 3.5px rgba(255, 255, 255, 0.35);
}
.lp-search-input::placeholder {
  color: rgba(255, 255, 255, 0.75);
}
.lp-grid {
  width: 100%;
  max-width: 900px;
  display: grid;
  grid-template-columns: repeat(auto-fill, 108px);
  justify-content: center;
  gap: 24px 18px;
}
.lp-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  border-radius: 12px;
  padding: 5px 3px 8px;
}
.lp-item:hover {
  background: rgba(255, 255, 255, 0.12);
}
.lp-name {
  font-size: 12.3px;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  max-width: 104px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lp-none {
  grid-column: 1/-1;
  text-align: center;
  color: #fff;
  opacity: 0.85;
  padding: 40px;
}
.mission-control {
  position: fixed;
  inset: 0;
  z-index: 4800;
  background: rgba(16, 16, 22, 0.4);
  backdrop-filter: blur(26px) saturate(130%);
  -webkit-backdrop-filter: blur(26px) saturate(130%);
  opacity: 0;
  transition: opacity 200ms ease;
}
.mission-control.open {
  opacity: 1;
}
.mc-spaces {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 18px 0 0;
}
.mc-space-thumb {
  width: 190px;
  height: 112px;
  border-radius: 9px;
  overflow: hidden;
  position: relative;
  outline-offset: 3px;
}
.mc-space-thumb.is-active {
  outline: 2px solid rgba(255, 255, 255, 0.9);
}
.thumb-wall {
  position: absolute;
  inset: 0;
  background: var(--wallpaper-thumb, linear-gradient(158deg, #ecbd83, #4c3524));
}
.mc-space-thumb span {
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
  font-size: 11px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
.mc-windows {
  position: absolute;
  inset: 0;
}
.mc-thumb {
  position: absolute;
  overflow: hidden;
  border-radius: 9px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5), 0 0 0 0.5px rgba(0, 0, 0, 0.4);
  transition: transform 160ms ease, box-shadow 160ms ease;
  animation: mc-zoom-in 340ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
@keyframes mc-zoom-in {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.mc-thumb:hover {
  transform: scale(1.035);
  box-shadow: 0 26px 64px rgba(0, 0, 0, 0.6);
  z-index: 5;
}
.mc-win-clone {
  position: relative;
  pointer-events: none;
  filter: saturate(0.98);
  transform-origin: top left;
}
.mc-win-clone .window-body {
  width: 0;
  min-height: 240px;
}
.mc-thumb-label {
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 11.5px;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}
.mc-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
}
.dialog-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
  z-index: 7000;
  opacity: 0;
  transition: opacity 160ms ease;
}
.dialog-scrim.shown {
  opacity: 1;
}
.dialog-scrim.closing {
  opacity: 0 !important;
}
.sys-alert {
  position: fixed;
  z-index: 7100;
  top: 34%;
  left: 50%;
  transform: translate(-50%, -46%) scale(0.96);
  width: min(430px, 88vw);
  background: color-mix(in srgb, var(--panel-glass) 94%, #00000008);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border-radius: 13px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.5),
    0 0 0 0.5px rgba(0, 0, 0, 0.24),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.4);
  padding: 20px 20px 15px;
  text-align: center;
  opacity: 0;
  transition: opacity 140ms ease, transform 170ms cubic-bezier(0.25, 1.04, 0.35, 1);
}
.sys-alert.shown {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.sys-alert.closing {
  opacity: 0 !important;
  transform: translate(-50%, -52%) scale(0.98) !important;
}
.sys-alert.force-quit {
  text-align: left;
  width: min(420px, 92vw);
}
.alert-icon {
  margin-bottom: 6px;
}
.alert-text-row {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
}
.alert-title {
  font-size: 13.6px;
  font-weight: 650;
  margin-bottom: 4px;
}
.alert-message {
  font-size: 12.7px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--fg) 84%, transparent);
  -webkit-user-select: text;
  user-select: text;
}
.alert-detail {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--fg-dim);
  border-top: 1px solid var(--hairline);
  padding-top: 8px;
  text-align: left;
  -webkit-user-select: text;
  user-select: text;
}
.alert-input {
  margin-top: 10px;
  width: 100%;
  height: 27px;
  border-radius: 6px;
  border: 0.5px solid rgba(0, 0, 0, 0.22);
  background: var(--input-bg);
  color: var(--fg);
  padding: 0 9px;
  font-size: 13px;
  outline: none;
}
.alert-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 16px;
}
.alert-btn {
  min-width: 72px;
  height: 26px;
  border-radius: 6.5px;
  background: var(--btn-metal);
  box-shadow: 0 0.5px 1.5px rgba(0, 0, 0, 0.18), inset 0 0 0 0.5px rgba(0, 0, 0, 0.14);
  font-size: 12.8px;
  font-weight: 450;
}
.alert-btn:hover {
  filter: brightness(1.03);
}
.alert-btn:active {
  filter: brightness(0.93);
}
.alert-btn.is-default {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--accent) 42%, transparent);
}
.alert-btn.is-default:focus-visible {
  box-shadow: 0 1px 3px color-mix(in srgb, var(--accent) 42%, transparent), 0 0 0 4.5px color-mix(in srgb, var(--accent) 34%, transparent);
}
.fq-list {
  margin-top: 10px;
  border: 0.5px solid var(--hairline);
  border-radius: 8px;
  background: var(--content-bg);
  max-height: 220px;
  overflow-y: auto;
}
.fq-row {
  padding: 7px 12px;
  border-bottom: 1px solid var(--hairline);
  cursor: default;
}
.fq-row:last-child {
  border-bottom: none;
}
.fq-row.selected {
  background: var(--accent);
  color: #fff;
}
.fq-buttons {
  justify-content: space-between;
  align-items: center;
}
.fq-buttons .alert-btn {
  min-width: 88px;
}
.fq-hint {
  font-size: 11px;
  color: var(--fg-dim);
}
.sheet {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  transform: translateY(-102%);
  transition: transform 230ms cubic-bezier(0.24, 0.9, 0.32, 1.02);
  background: color-mix(in srgb, var(--win-solid) 97%, #000);
  border-bottom-left-radius: var(--radius-window);
  border-bottom-right-radius: var(--radius-window);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  padding: 16px;
  z-index: 40;
  pointer-events: none;
}
.sheet.open {
  transform: translateY(0);
  pointer-events: auto;
}
.window.has-sheet .window-chrome {
  box-shadow: inset 0 -0.5px 0 var(--hairline);
}
.sheet-frame {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.sheet-col {
  flex: 1;
}
.sheet-title {
  font-weight: 650;
  font-size: 13.5px;
  margin-bottom: 3px;
}
.sheet-message {
  font-size: 12.5px;
  color: var(--fg-dim);
}
.sheet-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}
.save-sheet {
  padding: 4px;
}
.save-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.save-row label {
  font-size: 12.5px;
}
.sheet-input {
  flex: 1;
  height: 26px;
  border-radius: 6px;
  border: 0.5px solid rgba(0, 0, 0, 0.22);
  background: var(--input-bg);
  color: var(--fg);
  padding: 0 8px;
}
.app-switcher {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.97);
  z-index: 7200;
  padding: 12px;
  border-radius: 18px;
  background: var(--panel-glass);
  -webkit-backdrop-filter: blur(34px) saturate(180%);
  backdrop-filter: blur(34px) saturate(180%);
  box-shadow:
    0 26px 70px rgba(0, 0, 0, 0.45),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.42),
    0 0 0 0.5px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 120ms ease, transform 140ms ease;
}
.app-switcher.open {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.app-switcher.closing {
  opacity: 0 !important;
}
.switcher-strip {
  display: flex;
  gap: 10px;
}
.switcher-cell {
  width: 74px;
  height: 74px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  transition:
    background 110ms ease,
    box-shadow 110ms ease,
    transform 110ms ease;
}
.switcher-cell.is-picked {
  background: color-mix(in srgb, #fff 30%, transparent);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85);
  transform: scale(1.06);
}
.sw-icon-slot {
  display: block;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}
.preview-body {
  height: 100%;
  display: grid;
  place-items: stretch;
  padding: 22px;
  background:
    radial-gradient(
      circle at 50% 40%,
      rgba(255, 255, 255, 0.06),
      transparent 60%),
    repeating-conic-gradient(#00000008 0% 25%, transparent 0% 50%) 0 0 / 22px 22px,
    var(--content-bg);
}
.img-preview {
  margin: 0;
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35), inset 0 0 0 0.5px rgba(0, 0, 0, 0.28);
  position: relative;
  overflow: hidden;
}
.img-preview figcaption {
  position: absolute;
  bottom: 9px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 11px;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}
.window-preview .window-body {
  overflow: hidden;
}
.menubar-slot {
  height: var(--menubar-h);
  flex: none;
  position: relative;
  z-index: 4000;
}
.menubar-slot .menubar {
  position: absolute;
  inset: 0;
}
.menubar-slot + .surface-stack {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.window-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.window-layer > * {
  pointer-events: auto;
}
.layer-desktop-area {
  cursor: default;
}

/* src/styles/apps.css */
.window-finder .window-body {
  background: var(--content-bg);
}
.finder-main {
  display: flex;
  height: 100%;
}
.finder-toolbar {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.finder-toolbar.safari-toolbar {
  height: 100%;
}
.tf-left {
  display: flex;
  gap: 4px;
  flex: none;
}
.tf-right {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: none;
}
.tf-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
  pointer-events: none;
}
.window:not(.unfocused) .tf-center {
  color: color-mix(in srgb, var(--fg) 88%, transparent);
}
.view-seg {
  display: inline-flex;
  background: color-mix(in srgb, var(--fg-dim) 14%, transparent);
  border-radius: 7px;
  padding: 1.5px;
  gap: 1px;
}
.seg-btn[data-mode] {
  width: 30px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 6px;
}
.seg-btn.is-active {
  background: var(--content-bg);
  box-shadow: 0 1px 2.5px rgba(0, 0, 0, 0.18);
}
.finder-sidebar {
  width: 168px;
  flex: none;
  overflow-y: auto;
  padding: 10px 9px 14px;
  background: transparent;
  scrollbar-width: thin;
}
.sb-section-title {
  font-size: 11px;
  font-weight: 650;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 13px 7px 3.5px;
}
.sb-section-title:first-child {
  margin-top: 2px;
}
.sb-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 7px;
  border-radius: 6.5px;
  font-size: 12.6px;
  color: color-mix(in srgb, var(--fg) 86%, transparent);
  cursor: default;
  white-space: nowrap;
}
.sb-item:hover {
  background: rgba(128, 128, 138, 0.12);
}
.sb-item.is-active {
  background: color-mix(in srgb, var(--fg-dim) 17%, transparent);
}
.sb-item.is-disabled {
  opacity: 0.45;
}
.tag-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex: none;
}
.sb-glyph {
  flex: none;
  border-radius: 4px;
}
.finder-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--sidebar-bg);
}
.finder-content {
  flex: 1;
  overflow: auto;
  outline: none;
  background: var(--content-bg);
  padding: 12px;
  scroll-behavior: smooth;
}
.view-list,
.view-columns {
  padding: 0;
}
.fc-cell {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 96px;
  padding: 8px 3px 7px;
  margin: 2px;
  border-radius: 8px;
  vertical-align: top;
  cursor: default;
}
.fc-art svg {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.22));
}
.entry-name {
  max-width: 90px;
  text-align: center;
  font-size: 12px;
  line-height: 1.25;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 0 3px;
  border-radius: 3.5px;
}
.fc-cell:hover {
  background: rgba(128, 128, 138, 0.09);
}
.fc-cell.is-selected {
  background: color-mix(in srgb, var(--fg-dim) 16%, transparent);
}
.fc-cell.is-selected .entry-name {
  background: var(--accent);
  color: #fff;
}
.lv-table {
  font-size: 12.3px;
}
.lv-head {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  background: var(--win-solid);
  box-shadow: inset 0 -0.5px 0 var(--hairline), inset 0 0.5px 0 rgba(255, 255, 255, 0.35);
  -webkit-user-select: none;
  user-select: none;
}
.lv-col-head {
  padding: 6px 10px;
  font-weight: 500;
  color: var(--fg-dim);
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  box-shadow: inset 0.5px 0 0 var(--hairline);
  overflow: hidden;
  white-space: nowrap;
}
.lv-col-head:first-child {
  box-shadow: none;
}
.lv-col-head.sorted {
  color: var(--fg);
}
.lv-sort-arrow {
  font-size: 9px;
}
.lv-row {
  display: flex;
  align-items: center;
  height: 26px;
  box-shadow: inset 0 -0.34px 0 color-mix(in srgb, var(--fg-dim) 28%, transparent);
  cursor: default;
}
.lv-row:hover {
  background: rgba(128, 128, 138, 0.08);
}
.lv-row.is-selected {
  background: var(--accent);
  color: #fff;
}
.lv-row.is-selected .lv-date,
.lv-row.is-selected .lv-size,
.lv-row.is-selected .lv-kind {
  color: rgba(255, 255, 255, 0.85);
}
.lv-art {
  flex: none;
  width: 30px;
  display: grid;
  place-items: center;
}
.lv-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 8px;
}
.lv-date {
  width: 150px;
  flex: none;
  color: var(--fg-dim);
}
.lv-size {
  width: 92px;
  flex: none;
  text-align: right;
  color: var(--fg-dim);
}
.lv-kind {
  width: 120px;
  flex: none;
  padding-left: 14px;
  color: var(--fg-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cv-wrap {
  display: flex;
  height: 100%;
}
.cv-col {
  width: 190px;
  flex: none;
  height: 100%;
  overflow-y: auto;
  border-right: 0.5px solid var(--hairline);
  padding: 5px;
}
.cv-row {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 24px;
  padding: 0 6px;
  border-radius: 5px;
  font-size: 12.2px;
  cursor: default;
  white-space: nowrap;
}
.cv-row:hover {
  background: rgba(128, 128, 138, 0.1);
}
.cv-row.is-selected {
  background: var(--accent);
  color: #fff;
}
.cv-art {
  flex: none;
  display: grid;
  place-items: center;
}
.cv-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cv-arrow {
  color: currentColor;
  opacity: 0.75;
  font-size: 13px;
}
.cv-empty {
  color: var(--fg-dim);
  font-size: 11.5px;
  padding: 12px;
}
.finder-empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--fg-dim);
}
.empty-text {
  font-size: 14px;
}
.finder-pathbar {
  flex: none;
  display: flex;
  align-items: center;
  padding: 4px 12px;
  gap: 4px;
  font-size: 11px;
  background: var(--sidebar-bg);
  box-shadow: inset 0 0.5px 0 var(--hairline);
  overflow: hidden;
}
.crumb-sep {
  color: var(--fg-dim);
}
.crumb {
  padding: 1.5px 5px;
  border-radius: 4px;
  color: color-mix(in srgb, var(--fg) 78%, transparent);
  white-space: nowrap;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crumb:last-child {
  font-weight: 550;
}
.crumb:hover {
  background: rgba(128, 128, 138, 0.14);
}
.finder-statusbar {
  flex: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 4.5px 12px;
  font-size: 11px;
  color: var(--fg-dim);
  background: var(--sidebar-bg);
  box-shadow: inset 0 0.5px 0 var(--hairline);
}
.finder-statusbar .sb-space {
  flex: none;
}
@media (max-width: 720px) {
  .finder-sidebar {
    display: none;
  }
  .lv-date,
  .lv-kind {
    display: none;
  }
}
.notes-body {
  background: var(--sidebar-bg);
}
.notes-main {
  display: flex;
  height: 100%;
  background: var(--content-bg);
}
.notes-left {
  width: 220px;
  flex: none;
  display: flex;
  flex-direction: column;
  background: var(--sidebar-bg);
  border-right: 0.5px solid var(--hairline);
}
.notes-search {
  padding: 9px 10px 7px;
}
.notes-search-input {
  width: 100%;
  height: 27px;
  border-radius: 7px;
  border: 0.5px solid rgba(0, 0, 0, 0.14);
  background: var(--input-bg);
  color: var(--fg);
  padding: 0 10px;
  font-size: 12.5px;
  outline: none;
}
.notes-list {
  flex: 1;
  overflow-y: auto;
  padding: 2px 7px 12px;
}
.note-row {
  padding: 8px 9px;
  border-radius: 8px;
  cursor: default;
  border-bottom: 0.5px solid transparent;
}
.note-row:hover {
  background: rgba(128, 128, 138, 0.1);
}
.note-row.is-selected {
  background: #ffd95533;
}
.note-row.is-selected .note-row-title {
  color: color-mix(in srgb, #b98a00 80%, var(--fg));
}
.note-row-title {
  font-size: 12.8px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.note-row-meta {
  display: flex;
  gap: 7px;
  font-size: 11.4px;
  color: var(--fg-dim);
}
.note-row-meta span:first-child {
  flex: none;
}
.note-row-meta span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notes-new {
  color: #d99e12;
}
.notes-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.notes-editor {
  flex: 1;
  resize: none;
  border: none;
  outline: none;
  background: transparent;
  color: var(--fg);
  padding: 20px 26px;
  font-size: 13.6px;
  line-height: 1.62;
}
.notes-count {
  flex: none;
  text-align: center;
  font-size: 10.8px;
  color: var(--fg-dim);
  padding: 5px 0 7px;
}
.notes-empty {
  padding: 40px;
  text-align: center;
  color: var(--fg-dim);
}
@media (max-width: 720px) {
  .notes-main {
    flex-direction: column-reverse;
  }
  .notes-left {
    width: 100%;
    height: 42%;
  }
}
.textedit-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.textedit-area {
  flex: 1;
  resize: none;
  border: none;
  outline: none;
  background: var(--content-bg);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: 13.4px;
  line-height: 1.6;
  padding: 26px 32px;
}
.textedit-area.no-wrap {
  white-space: pre;
  overflow-x: auto;
}
.textedit-status {
  flex: none;
  text-align: center;
  font-size: 10.8px;
  color: var(--fg-dim);
  padding: 5px 0 7px;
}
.window-calculator {
  background: #222226;
}
.calculator-body {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: linear-gradient(#303034, #232326);
  outline: none;
}
.calc-display {
  height: 84px;
  flex: none;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 6px 18px 12px;
  font-size: 38px;
  font-weight: 250;
  color: #f4f4f6;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  -webkit-user-select: text;
  user-select: text;
}
.calc-display.is-error {
  color: #ff8a80;
}
.calc-pad {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 1px;
  background: rgba(0, 0, 0, 0.34);
  padding: 1px;
}
.calc-key {
  background: #6b6b70;
  color: #fff;
  font-size: 19px;
  transition: background 60ms ease, transform 60ms ease;
}
.grow-1 {
  grid-column: span 1;
}
.grow-2 {
  grid-column: span 2;
}
.calc-key.digit {
  background: #5a5a5f;
  font-family: inherit;
}
.calc-key.digit:hover {
  background: #65656b;
}
.calc-key.fn {
  background: #4c4c51;
  font-size: 15px;
}
.calc-key.op {
  background: #f59e2e;
  font-size: 21px;
}
.calc-key.op:hover {
  filter: brightness(1.06);
}
.calc-key.is-active-op {
  background: #ffffff;
  color: #f59e2e;
}
.calc-key.is-flashing {
  filter: brightness(1.25);
}
.calc-key:active {
  filter: brightness(0.82) !important;
}
.window-terminal {
  background: rgba(18, 18, 22, 0.92);
}
.window-terminal .window-chrome {
  background: linear-gradient(rgba(64, 64, 68, .9), rgba(48, 48, 52, .9));
}
.terminal-body {
  height: 100%;
  background: rgba(24, 24, 28, 0.96);
}
.term-scroll {
  height: 100%;
  overflow-y: auto;
  padding: 8px 10px 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.45;
  color: #ececf0;
  cursor: text;
}
.term-line {
  white-space: pre-wrap;
  word-break: break-word;
  -webkit-user-select: text;
  user-select: text;
}
.term-line.is-error {
  color: #ff7a72;
}
.term-line.dim {
  opacity: 0.72;
}
.term-active {
  display: flex;
  align-items: baseline;
}
.term-prompt {
  color: #9ec9f5;
  flex: none;
  margin-right: 7px;
}
.term-prompt::after {
  content: "";
}
.term-input {
  flex: 1;
  min-width: 40px;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font: inherit;
  caret-shape: block;
}
.window-safari .window-body {
  display: flex;
  flex-direction: column;
  background: #fff;
}
:root[data-appearance=dark] .window-safari .window-body {
  background: #17181c;
}
.tf-address {
  display: flex;
}
.safari-toolbar {
  gap: 12px;
}
.safari-toolbar .tf-address {
  position: static;
  transform: none;
  flex: 1 1 auto;
  max-width: 480px;
  margin: 0 auto;
  height: 26px;
  pointer-events: auto;
}
.safari-address {
  width: 100%;
  height: 100%;
  border-radius: 7px;
  border: 0.5px solid rgba(0, 0, 0, 0.18);
  background: var(--input-bg);
  color: var(--fg);
  text-align: center;
  font-size: 12.6px;
  outline: none;
  transition: box-shadow 150ms ease, background 150ms ease;
}
.safari-address:focus {
  text-align: left;
  background: var(--content-bg);
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--accent) 38%, transparent), 0 1px 4px rgba(0, 0, 0, 0.14);
}
.safari-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  width: min(420px, 82vw);
  border-radius: 11px;
  background: var(--panel-glass);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32), 0 0 0 0.5px rgba(0, 0, 0, 0.16);
  padding: 6px;
  z-index: 30;
  max-height: 260px;
  overflow-y: auto;
}
.ss-group {
  padding: 7px 11px 5px;
  font-size: 11px;
  font-weight: 650;
  color: var(--fg-dim);
  text-transform: uppercase;
}
.ss-group:hover {
  background: rgba(128, 128, 138, 0.1);
  border-radius: 7px;
  cursor: default;
}
.ss-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 11px;
  border-radius: 7px;
  cursor: default;
}
.ss-row:hover {
  background: rgba(128, 128, 138, 0.12);
}
.ss-fav {
  width: 21px;
  height: 21px;
  border-radius: 6px;
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex: none;
}
.ss-url {
  margin-left: auto;
  font-size: 11px;
  color: var(--fg-dim);
}
.safari-tabbar {
  flex: none;
  display: flex;
  gap: 3px;
  padding: 4px 8px;
  background: var(--win-solid);
  box-shadow: inset 0 -0.5px 0 var(--hairline);
  min-height: 0;
}
.safari-tabbar.collapsed {
  display: none;
}
.st-tab {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 10px;
  border-radius: 7px;
  font-size: 12px;
  color: var(--fg-dim);
  cursor: default;
  min-width: 0;
}
.st-tab:hover {
  background: rgba(128, 128, 138, 0.12);
}
.st-tab.is-active {
  background: var(--content-bg);
  color: var(--fg);
  box-shadow: 0 0.5px 2.5px rgba(0, 0, 0, 0.2);
}
.st-title {
  flex: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.st-close {
  flex: none;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  line-height: 1;
  opacity: 0;
}
.st-tab:hover .st-close {
  opacity: 0.7;
}
.st-close:hover {
  opacity: 1 !important;
  background: rgba(128, 128, 138, 0.25);
}
.safari-viewport {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
}
:root[data-appearance=dark] .safari-viewport {
  background: #1a1b1f;
  color: #eaeaee;
}
.site-holder {
  min-height: 100%;
}
.start-wrap {
  padding: 34px 30px;
}
.sp-heading {
  font-size: 14px;
  font-weight: 650;
  color: var(--fg);
  margin-bottom: 13px;
}
.sp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(94px, 1fr));
  gap: 15px;
  margin-bottom: 30px;
}
.sp-tile {
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: center;
  padding: 8px 4px;
  border-radius: 10px;
}
.sp-tile:hover {
  background: rgba(128, 128, 138, 0.1);
}
.sp-icon {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22), inset 0 0.5px 0 rgba(255, 255, 255, 0.35);
}
.sp-name {
  font-size: 11.6px;
  color: var(--fg);
  white-space: nowrap;
  max-width: 108px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-report {
  border-top: 1px solid var(--hairline);
  padding-top: 13px;
  font-size: 11.8px;
  color: var(--fg-dim);
}
.window-settings .window-body {
  background: var(--content-bg);
}
.settings-body .ss-main {
  display: flex;
  height: 100%;
}
.ss-sidebar {
  width: 200px;
  flex: none;
  display: flex;
  flex-direction: column;
  padding: 10px 9px;
  background: var(--sidebar-bg);
  border-right: 0.5px solid var(--hairline);
  overflow-y: auto;
  gap: 9px;
}
.ss-user {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 2px 4px;
  line-height: 1.25;
}
.ss-user b {
  font-size: 12.8px;
  display: block;
}
.ss-user small {
  font-size: 10.8px;
  color: var(--fg-dim);
}
.avatar-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background:
    linear-gradient(
      140deg,
      #e8b07a,
      #a05f45);
  color: #fff;
  font-size: 13px;
  font-weight: 650;
  display: grid;
  place-items: center;
  flex: none;
}
.ss-search {
  height: 25px;
  border-radius: 6.5px;
  border: 0.5px solid rgba(0, 0, 0, 0.14);
  background: var(--input-bg);
  color: var(--fg);
  font-size: 12px;
  padding: 0 9px;
  outline: none;
}
.ss-sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ss-nav-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4.5px 7px;
  border-radius: 6.5px;
  font-size: 12.6px;
  text-align: left;
  color: color-mix(in srgb, var(--fg) 88%, transparent);
}
.ss-nav-row:hover {
  background: rgba(128, 128, 138, 0.11);
}
.ss-nav-row.is-active {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--fg);
}
.ss-glyph {
  color: var(--tint);
  width: 20px;
  height: 20px;
  border-radius: 5.5px;
  background: color-mix(in srgb, var(--tint) 18%, transparent);
  display: grid;
  place-items: center;
  flex: none;
  padding: 2.5px;
}
.ss-glyph svg {
  width: 15px;
  height: 15px;
}
.ss-content {
  flex: 1;
  overflow-y: auto;
  padding: 22px 26px 40px;
  min-width: 0;
}
.ss-title {
  font-size: 19px;
  font-weight: 650;
  margin: 0 0 15px;
}
.ss-block {
  margin-bottom: 21px;
  max-width: 520px;
}
.ss-block-title {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 7px;
}
.ss-block > * + * {
  margin-top: 0;
}
.ss-block .ss-row,
.ss-block .radio-row,
.ss-block .ss-colrow {
  background: color-mix(in srgb, var(--fg-dim) 7%, transparent);
  border-radius: 0;
}
.ss-block .ss-row:first-of-type {
  border-radius: 8px 8px 0 0;
}
.ss-block .ss-row:last-of-type,
.ss-block .radio-row:last-of-type {
  border-radius: 0 0 8px 8px;
}
.ss-block .ss-row + .ss-row {
  box-shadow: inset 0 0.5px 0 var(--hairline);
}
.ss-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 12px;
  font-size: 12.8px;
}
.ss-row-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.ss-sub {
  font-size: 11.3px;
  color: var(--fg-dim);
}
.ss-static {
  color: var(--fg-dim);
  font-size: 12.3px;
}
.linkish {
  color: var(--accent);
  cursor: pointer;
}
.ss-note {
  font-size: 11.8px;
  color: var(--fg-dim);
  margin: 10px 2px;
  max-width: 480px;
}
.ss-note.first {
  margin-top: 0;
}
.ss-colrow {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 9px 12px;
  font-size: 12.8px;
}
.ss-colrow.iconed {
  padding: 12px;
}
.appearance-cards-row {
  display: flex;
  gap: 16px;
  padding: 4px 2px;
}
.appearance-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 8px;
  border-radius: 10px;
}
.appearance-card:hover {
  background: rgba(128, 128, 138, 0.09);
}
.mode-preview {
  width: 74px;
  height: 50px;
  border-radius: 7px;
  background: #fdfdfd;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.24), 0 2px 6px rgba(0, 0, 0, 0.13);
  position: relative;
  overflow: hidden;
}
.preview-light::before {
  content: "";
  position: absolute;
  inset: 0 0 55%;
  background: rgba(120, 120, 132, 0.14);
}
.preview-dark {
  background: #1d1d20;
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.3), 0 2px 6px rgba(0, 0, 0, 0.3);
}
.preview-dark::before {
  content: "";
  position: absolute;
  inset: 0 0 55%;
  background: rgba(255, 255, 255, 0.1);
}
.preview-auto {
  background:
    linear-gradient(
      105deg,
      #fdfdfd 49%,
      #1d1d20 51%);
}
.appearance-label {
  font-size: 11.8px;
}
.accent-row {
  display: flex;
  gap: 9px;
  padding: 9px 12px;
  background: color-mix(in srgb, var(--fg-dim) 7%, transparent);
  border-radius: 8px;
}
.accent-swatch {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.2);
  transition: transform 110ms ease;
}
.accent-swatch:hover {
  transform: scale(1.12);
}
.accent-swatch.is-active {
  box-shadow: 0 0 0 2px var(--content-bg), 0 0 0 3.5px var(--fg);
}
.wp-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}
.wp-tile {
  width: 148px;
  height: 93px;
  border-radius: 9px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.24), inset 0 0 0 0.5px rgba(255, 255, 255, 0.16);
  transition: transform 130ms ease;
}
.wp-tile:hover {
  transform: scale(1.03);
}
.wp-tile.is-active {
  box-shadow: 0 0 0 3px var(--accent), 0 1px 5px rgba(0, 0, 0, 0.24);
}
.wp-name {
  position: absolute;
  bottom: 5px;
  left: 8px;
  right: 8px;
  text-align: left;
  color: #fff;
  font-size: 10.8px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.wifi-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 9px 12px;
  background: color-mix(in srgb, var(--fg-dim) 7%, transparent);
  border-radius: 8px;
}
.wifi-head b {
  font-size: 12.8px;
}
.wifi-head .ss-sub {
  margin-top: 2px;
}
.tag-ok {
  color: #43a047;
  font-size: 11.8px;
  font-weight: 550;
}
.battery-bar {
  height: 13px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--fg-dim) 18%, transparent);
  overflow: hidden;
  padding: 2px;
}
.battery-fill {
  height: 100%;
  border-radius: 2.5px;
  background: #62ba46;
}
.window-about .window-body {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.about-body {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--panel-glass);
  backdrop-filter: blur(30px) saturate(170%);
  -webkit-backdrop-filter: blur(30px) saturate(170%);
}
.about-tabs {
  flex: none;
  display: flex;
  gap: 2px;
  padding: 9px 12px 0;
}
.tab-btn {
  padding: 4px 10px 5px;
  border-radius: 6.5px 6.5px 0 0;
  font-size: 12px;
  color: var(--fg-dim);
}
.tab-btn.is-active {
  background: rgba(255, 255, 255, 0.5);
  color: var(--fg);
  font-weight: 550;
}
:root[data-appearance=dark] .tab-btn.is-active {
  background: rgba(255, 255, 255, 0.12);
}
.about-host {
  flex: 1;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.5);
}
:root[data-appearance=dark] .about-host {
  background: rgba(255, 255, 255, 0.07);
}
.about-pane {
  padding: 12px 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.about-art {
  margin: 4px 0 2px;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.18));
}
.about-name {
  font-size: 23px;
  font-weight: 650;
  margin: 4px 0 0;
}
.about-big {
  color: var(--fg-dim);
  margin: 2px 0 12px;
  font-size: 12.6px;
}
.about-specs {
  align-self: stretch;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3.5px 12px;
  font-size: 12px;
  border-top: 1px solid var(--hairline);
  padding-top: 11px;
}
.about-specs dt {
  color: var(--fg-dim);
  text-align: right;
}
.about-specs dd {
  margin: 0;
}
.res-card {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 11px;
  font-size: 12px;
}
.res-card small {
  color: var(--fg-dim);
}
.res-bar {
  height: 5px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--fg-dim) 18%, transparent);
  overflow: hidden;
}
.res-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
}
.support-link {
  margin-bottom: 9px;
  color: var(--accent);
  font-size: 12.6px;
}
.support-link:disabled {
  opacity: 0.4;
}
.support-link:hover:not(:disabled) {
  text-decoration: underline;
}
.about-regulatory {
  padding: 7px 16px;
  font-size: 9.8px;
  color: var(--fg-dim);
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--hairline);
}
.about-footer {
  flex: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 16px;
  border-top: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--fg-dim) 6%, transparent);
}
.about-more {
  min-width: 132px;
}
.view-seg {
  position: relative;
  z-index: 3;
}
.seg-btn[data-mode] {
  flex: none;
  width: 30px;
  height: 26px;
}
.seg-btn svg {
  display: block;
}
.finder-toolbar {
  position: relative;
}
.finder-toolbar .tf-center {
  z-index: 1;
}