#window-appearance {
  width: 600px;
  height: 570px;
  max-width: calc(100vw - 36px);
  max-height: calc(100vh - 82px);
}

#window-appearance .appearance-settings-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  height: auto;
  min-height: 0;
  padding: 8px;
  overflow: hidden;
  background: #ece9d8;
}

.appearance-tabs {
  display: flex;
  flex: 0 0 27px;
  align-items: flex-end;
  gap: 2px;
  padding-left: 3px;
}

.appearance-tabs button {
  height: 24px;
  padding: 2px 10px;
  border: 1px solid #999;
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
  background: #dfded5;
  font: 11px Tahoma, "Microsoft YaHei", sans-serif;
}

.appearance-tabs button.active {
  position: relative;
  z-index: 2;
  height: 27px;
  margin-bottom: -1px;
  background: #ece9d8;
  font-weight: 700;
}

.appearance-panel {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  padding: 12px;
  overflow: auto;
  border: 1px solid #999;
}

.monitor-preview {
  position: relative;
  flex: 0 0 190px;
  width: 270px;
  margin: 0 auto 8px;
  border: 1px solid transparent;
  background:
    linear-gradient(90deg, transparent 116px, #777 117px 152px, transparent 153px) 0 163px / 100% 18px no-repeat,
    linear-gradient(#d8d8d8, #9a9a9a);
  clip-path: polygon(5% 0, 95% 0, 100% 75%, 65% 75%, 70% 91%, 89% 94%, 89% 100%, 11% 100%, 11% 94%, 30% 91%, 35% 75%, 0 75%);
}

.monitor-screen {
  position: absolute;
  inset: 13px 20px 49px;
  border: 3px inset #888;
  background-color: #3a6ea5;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.monitor-light {
  position: absolute;
  right: 37px;
  bottom: 54px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #70cf8d;
  box-shadow: inset 1px 1px #d7ffe3;
}

.wallpaper-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  gap: 10px;
  min-height: 122px;
}

.wallpaper-controls > div:first-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.wallpaper-controls label,
.appearance-color-row > label {
  margin-bottom: 4px;
  font-size: 11px;
}

#wallpaper-list {
  width: 100%;
  flex: 1;
  min-height: 98px;
  border: 2px inset #fff;
  background: #fff;
  font: 11px Tahoma, "Microsoft YaHei", sans-serif;
}

.wallpaper-side-controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 18px;
}

.wallpaper-side-controls .xp-button { width: 100%; }
.wallpaper-side-controls label { margin: 2px 0 -3px; }
.wallpaper-side-controls select,
.appearance-color-row select {
  height: 24px;
  border: 1px solid #7f9db9;
  background: #fff;
}

.appearance-color-row {
  display: grid;
  grid-template-columns: auto 140px 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.appearance-color-row > label { margin: 0; }
.appearance-color-row small { color: #555; font-size: 10px; line-height: 1.35; }

.appearance-color-chip {
  width: 30px;
  height: 21px;
  border: 2px inset #eee;
  background: #0053ee;
}

.appearance-dialog-actions {
  display: flex;
  flex: 0 0 39px;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 8px;
}

.appearance-dialog-actions .xp-button { min-width: 82px; }

html[data-ui-color="olive"] {
  --taskbar-light: #9ab45a;
  --taskbar: #6c8c2b;
  --taskbar-dark: #3e5f13;
}

html[data-ui-color="silver"] {
  --taskbar-light: #b7bed3;
  --taskbar: #7f8dab;
  --taskbar-dark: #4d5872;
}

html[data-ui-color="violet"] {
  --taskbar-light: #a875dc;
  --taskbar: #7143a5;
  --taskbar-dark: #432268;
}

html[data-theme="xp"][data-ui-color="olive"] .window { background: #4f7119; }
html[data-theme="xp"][data-ui-color="olive"] .titlebar {
  border-color: #4f7119 #29410e transparent #4f7119;
  background: linear-gradient(#b6d85c, #6f9a20 11%, #668e1c 87%, #456915 100%);
  text-shadow: 1px 1px #344b10;
}
html[data-theme="xp"][data-ui-color="olive"] .start-menu,
html[data-theme="xp"][data-ui-color="olive"] .start-menu header,
html[data-theme="xp"][data-ui-color="olive"] .start-menu footer { background: linear-gradient(#7fae32, #4f7618); }
html[data-theme="xp"][data-ui-color="olive"] .taskbar { background: linear-gradient(#9ab45a, #6c8c2b 12%, #6c8c2b 88%, #3e5f13); }

html[data-theme="xp"][data-ui-color="silver"] .window { background: #6f7890; }
html[data-theme="xp"][data-ui-color="silver"] .titlebar {
  border-color: #929aae #535b70 transparent #929aae;
  background: linear-gradient(#d9dce5, #8f99b0 11%, #7e899f 87%, #59647c 100%);
  text-shadow: 1px 1px #4c5363;
}
html[data-theme="xp"][data-ui-color="silver"] .start-menu,
html[data-theme="xp"][data-ui-color="silver"] .start-menu header,
html[data-theme="xp"][data-ui-color="silver"] .start-menu footer { background: linear-gradient(#aab3c8, #69758f); }
html[data-theme="xp"][data-ui-color="silver"] .taskbar { background: linear-gradient(#c8cedd, #8792aa 12%, #7f8dab 88%, #4d5872); }

html[data-theme="xp"][data-ui-color="violet"] .window { background: #68408f; }
html[data-theme="xp"][data-ui-color="violet"] .titlebar {
  border-color: #9b65cb #4c246d transparent #9b65cb;
  background: linear-gradient(#c591ef, #8652b7 11%, #7745a6 87%, #542878 100%);
  text-shadow: 1px 1px #43205f;
}
html[data-theme="xp"][data-ui-color="violet"] .start-menu,
html[data-theme="xp"][data-ui-color="violet"] .start-menu header,
html[data-theme="xp"][data-ui-color="violet"] .start-menu footer { background: linear-gradient(#9b66c9, #603484); }
html[data-theme="xp"][data-ui-color="violet"] .taskbar { background: linear-gradient(#b485df, #7748aa 12%, #7143a5 88%, #432268); }

html[data-theme="win7"][data-ui-color="olive"] { --w7-frame: rgba(105, 139, 54, .78); }
html[data-theme="win7"][data-ui-color="silver"] { --w7-frame: rgba(117, 124, 143, .78); }
html[data-theme="win7"][data-ui-color="violet"] { --w7-frame: rgba(110, 65, 151, .78); }
html[data-theme="win7"][data-ui-color="olive"] .taskbar { background-color: rgba(86, 118, 42, .78); }
html[data-theme="win7"][data-ui-color="silver"] .taskbar { background-color: rgba(104, 112, 130, .78); }
html[data-theme="win7"][data-ui-color="violet"] .taskbar { background-color: rgba(91, 51, 129, .78); }

@media (max-width: 720px) {
  #window-appearance {
    width: calc(100vw - 16px);
    height: calc(100vh - 112px);
    max-width: none;
    max-height: none;
  }
  .appearance-tabs button { padding-inline: 6px; }
  .monitor-preview { flex-basis: 155px; width: 220px; }
  .monitor-screen { inset: 11px 17px 41px; }
  .monitor-light { right: 30px; bottom: 45px; }
  .appearance-color-row { grid-template-columns: auto 1fr 30px; }
  .appearance-color-row small { grid-column: 1 / -1; }
}