.personalization-window {
  left: clamp(120px, 16vw, 320px);
  top: clamp(54px, 8vh, 110px);
  width: min(980px, 78vw);
  height: min(680px, calc(100vh - var(--taskbar-h) - 72px));
  min-width: 740px;
  min-height: 510px;
  z-index: 10;
}

.personalization-window.is-active {
  z-index: 14;
}

.personalization-shell {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) 28px;
  min-height: 0;
  height: 100%;
  color: #1f2d39;
  background: #f0f5fb;
  border-top: 1px solid rgba(255,255,255,.78);
  font-size: 12px;
}

.personalization-menu {
  display: flex;
  min-height: 23px;
  align-items: center;
  gap: 2px;
  padding: 0 8px;
  border-bottom: 1px solid #c7d3df;
  background: linear-gradient(#fbfdff, #edf3fa);
}

.personalization-menu a {
  padding: 3px 8px 4px;
  border: 1px solid transparent;
  border-radius: 2px;
}

.personalization-menu a:hover,
.personalization-menu a:focus-visible {
  border-color: #b5c9dc;
  background: linear-gradient(#fff, #dcecf9);
  outline: 0;
}

.personalization-address-row {
  display: grid;
  grid-template-columns: auto minmax(300px, 1fr) minmax(190px, 270px);
  align-items: center;
  gap: 7px;
  min-height: 43px;
  padding: 6px 9px;
  border-bottom: 1px solid #b6c7d8;
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(225,238,249,.72)),
    #e7f0f8;
}

.personalization-nav-buttons {
  display: flex;
  gap: 4px;
}

.personalization-round-button {
  position: relative;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #7fa7c8;
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.96), rgba(255,255,255,.22) 38%, transparent 39%),
    linear-gradient(180deg, #62c2f8, #1d77c7 62%, #0a4d92);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), 0 1px 2px rgba(33,64,91,.35);
}

.personalization-round-button.is-muted,
.personalization-round-button:disabled {
  opacity: .52;
  filter: grayscale(.2);
}

.personalization-arrow {
  position: absolute;
  inset: 8px 9px;
  border: solid #fff;
  border-width: 0 0 3px 3px;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.42));
}

.personalization-arrow-left { transform: rotate(45deg); }
.personalization-arrow-right { transform: rotate(225deg); }

.personalization-breadcrumbs {
  min-width: 0;
  height: 28px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid #9fb6c9;
  background: linear-gradient(#fff, #edf5fb);
  box-shadow: inset 0 1px 2px rgba(36,64,90,.12);
}

.personalization-breadcrumbs span,
.personalization-breadcrumbs strong {
  position: relative;
  padding: 0 21px 0 10px;
  min-width: 0;
  overflow: hidden;
  color: #20384b;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.personalization-breadcrumbs span::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 8px;
  width: 8px;
  height: 8px;
  border-top: 1px solid #7694ad;
  border-right: 1px solid #7694ad;
  transform: rotate(45deg);
}

.personalization-search {
  height: 28px;
  display: grid;
  grid-template-columns: 0 1fr;
  align-items: center;
  border: 1px solid #9fb6c9;
  background: #fff;
}

.personalization-search span {
  width: 0;
  overflow: hidden;
}

.personalization-search input {
  min-width: 0;
  height: 100%;
  border: 0;
  padding: 0 9px;
  color: #1f2d39;
  outline: 0;
}

.personalization-workspace {
  min-height: 0;
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  overflow: hidden;
}

.personalization-sidebar {
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 14px 10px;
  border-right: 1px solid #c5d2dd;
  background: linear-gradient(180deg, #eef6fc, #ddebf5);
}

.personalization-sidebar button {
  min-height: 27px;
  padding: 4px 8px;
  border: 1px solid transparent;
  color: #075a9d;
  text-align: left;
  background: transparent;
}

.personalization-sidebar button:hover,
.personalization-sidebar button:focus-visible {
  border-color: #9fc3de;
  outline: 0;
  background: linear-gradient(#fff, #dceefa);
}

.personalization-main {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 18px 20px;
  background:
    radial-gradient(circle at 80% 0%, rgba(124, 175, 213, .20), transparent 28%),
    linear-gradient(#f9fcff, #edf4fa);
}

.personalization-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 138px;
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
}

.personalization-heading h2 {
  margin: 0 0 6px;
  color: #23384a;
  font-size: 21px;
  font-weight: 400;
  letter-spacing: 0;
}

.personalization-heading p {
  max-width: 680px;
  margin: 0;
  color: #526879;
  line-height: 1.45;
}

.personalization-preview {
  height: 94px;
  position: relative;
  border: 1px solid #8faac0;
  background: #dcebf6;
  box-shadow: inset 0 1px 0 #fff;
}

.personalization-preview-screen {
  position: absolute;
  inset: 8px 10px 12px;
  border: 1px solid #587b96;
  background:
    image-set(
      url("../../../../assets/ui/os/windows7-wallpaper.webp") type("image/webp"),
      url("../../../../assets/ui/os/windows7-wallpaper.jpg") type("image/jpeg")
    ) center / cover no-repeat;
}

.personalization-preview-window {
  position: absolute;
  left: 42px;
  top: 28px;
  width: 58px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 4px 4px 1px 1px;
  background: linear-gradient(180deg, rgba(235,251,255,.82), rgba(47,143,212,.42));
  box-shadow: 0 8px 18px rgba(35,56,74,.28), inset 0 0 0 1px rgba(0,0,0,.2);
}

.personalization-panel {
  margin-bottom: 17px;
  padding: 12px;
  border: 1px solid #b4c7d8;
  background: rgba(255,255,255,.62);
  box-shadow: inset 0 1px 0 #fff;
}

.personalization-panel h3 {
  margin: 0 0 10px;
  color: #244158;
  font-size: 14px;
  font-weight: 600;
}

.personalization-theme-grid,
.personalization-wallpaper-grid,
.personalization-color-grid,
.personalization-options-grid {
  display: grid;
  gap: 10px;
}

.personalization-theme-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.personalization-theme,
.personalization-wallpaper-grid button,
.personalization-color-grid button {
  min-width: 0;
  border: 1px solid #9fb6c9;
  color: #1f2d39;
  text-align: left;
  background: linear-gradient(#fff, #e7f1f9);
  box-shadow: inset 0 1px 0 #fff;
}

.personalization-theme {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 2px 10px;
  padding: 8px;
}

.personalization-theme:hover,
.personalization-theme:focus-visible,
.personalization-theme.is-selected,
.personalization-wallpaper-grid button:hover,
.personalization-wallpaper-grid button:focus-visible,
.personalization-wallpaper-grid button.is-selected,
.personalization-color-grid button:hover,
.personalization-color-grid button:focus-visible,
.personalization-color-grid button.is-selected {
  border-color: #5a9bd1;
  outline: 0;
  background: linear-gradient(#f7fcff, #cfe9fb);
}

.personalization-theme-preview {
  grid-row: 1 / span 2;
  height: 58px;
  border: 1px solid #607f97;
  background: #73b5ec;
}

.personalization-theme strong,
.personalization-theme small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.personalization-theme small {
  color: #536a7c;
  line-height: 1.3;
}

.personalization-theme-preview--aero,
.wallpaper-win7 {
  background:
    image-set(
      url("../../../../assets/ui/os/windows7-wallpaper.webp") type("image/webp"),
      url("../../../../assets/ui/os/windows7-wallpaper.jpg") type("image/jpeg")
    ) center / cover no-repeat;
}

.personalization-theme-preview--archive,
.wallpaper-garden {
  background:
    linear-gradient(135deg, rgba(255,255,255,.18), transparent 36%),
    image-set(
      url("../../../../assets/ui/gothic/terminal-computer.webp") type("image/webp"),
      url("../../../../assets/ui/gothic/terminal-computer.png") type("image/png")
    ) center / cover no-repeat;
}

.personalization-theme-preview--nocturne,
.wallpaper-archive {
  background:
    radial-gradient(circle at 38% 40%, rgba(158,92,139,.32), transparent 24%),
    linear-gradient(135deg, #090b18, #102a4c 58%, #05070c);
}

.personalization-theme-preview--classic,
.wallpaper-plain {
  background: linear-gradient(135deg, #366f9d, #6b9bb8);
}

.personalization-wallpaper-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.personalization-wallpaper-grid button {
  display: grid;
  gap: 6px;
  padding: 7px;
  text-align: center;
}

.personalization-wallpaper-thumb {
  height: 54px;
  border: 1px solid #6e879a;
}

.personalization-color-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.personalization-color-grid button {
  display: grid;
  gap: 5px;
  padding: 7px;
  text-align: center;
}

.personalization-color-grid button::before {
  content: "";
  height: 32px;
  border: 1px solid rgba(0,0,0,.28);
  background: var(--swatch);
}

.personalization-check,
.personalization-field {
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #273d4e;
}

.personalization-check input {
  width: 14px;
  height: 14px;
}

.personalization-field select {
  min-width: 150px;
  min-height: 25px;
  border: 1px solid #8ea8bb;
  color: #1f2d39;
  background: #fff;
}

.personalization-display-box {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid #b4c7d8;
  background: #fff;
}

.personalization-display-monitor {
  height: 64px;
  display: grid;
  place-items: center;
  border: 1px solid #627c91;
  color: #fff;
  font-size: 25px;
  background: linear-gradient(180deg, #477da7, #1b4c78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}

.personalization-display-box strong {
  display: block;
  margin-bottom: 4px;
}

.personalization-display-box p {
  margin: 0;
  color: #526879;
  line-height: 1.4;
}

.personalization-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 9px;
  border-top: 1px solid #c4d2df;
  color: #415669;
  background: linear-gradient(#f9fbfd, #e4ecf3);
}

.personalization-status span {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.personalization-status button {
  height: 22px;
  padding: 0 9px;
  border: 1px solid #93aabd;
  color: #23384a;
  background: linear-gradient(#fff, #dbeaf5);
}

@media (max-width: 899px), (max-height: 689px) {
  .personalization-window {
    min-width: 0;
    min-height: 0;
  }

  .personalization-shell {
    min-height: 600px;
  }

  .personalization-address-row,
  .personalization-workspace,
  .personalization-heading {
    grid-template-columns: 1fr;
  }

  .personalization-nav-buttons,
  .personalization-sidebar,
  .personalization-search {
    display: none;
  }

  .personalization-main {
    padding: 12px;
  }

  .personalization-theme-grid,
  .personalization-wallpaper-grid,
  .personalization-color-grid {
    grid-template-columns: 1fr;
  }
}