@import url("https://fonts.googleapis.com/css2?family=Teko:wght@500;700&display=swap");

html:has(body.perfectcal-home-index) {
  height: 100%;
  overflow: hidden;
}

body.perfectcal-home-index {
  height: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: #245edc;
  color: #000;
  font-family: Tahoma, "Trebuchet MS", "Segoe UI", sans-serif;
  font-size: 11px;
  -webkit-font-smoothing: antialiased;
}

body.perfectcal-home-index a,
body.perfectcal-home-index button,
body.perfectcal-home-index input,
body.perfectcal-home-index select {
  font-family: inherit;
}

.xp-desktop {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 38% at 78% 78%, #4aa33a 0%, transparent 72%),
    radial-gradient(ellipse 90% 42% at 18% 88%, #2f7a28 0%, transparent 70%),
    radial-gradient(ellipse 42% 18% at 72% 36%, rgb(255 255 255 / 0.45) 0%, transparent 70%),
    linear-gradient(#4aa4e0 0%, #8ec8ee 42%, #d7e8ef 56%, #6db33c 56.4%, #3d8f2d 100%);
  cursor: default;
  user-select: none;
}

.xp-icons {
  position: absolute;
  top: 16px;
  left: 16px;
  display: grid;
  gap: 18px;
  z-index: 2;
}

.xp-icon {
  display: grid;
  justify-items: center;
  gap: 4px;
  width: 76px;
  padding: 4px;
  border: 1px solid transparent;
  background: transparent;
  color: #fff;
  text-shadow: 1px 1px 2px rgb(0 0 0 / 0.85);
}

.xp-icon:focus-visible,
.xp-icon.is-selected {
  border-color: rgb(255 255 255 / 0.35);
  background: rgb(11 97 255 / 0.35);
}

.xp-icon__glyph {
  width: 32px;
  height: 32px;
  box-shadow: 1px 1px 0 rgb(0 0 0 / 0.25);
}

.xp-icon__glyph--pics {
  border: 2px solid #f4c542;
  background:
    linear-gradient(#fff 0 8px, transparent 8px) 0 0 / 100% 8px no-repeat,
    linear-gradient(#c45c14, #8b1e1e);
}

.xp-icon__glyph--cal {
  border: 2px solid #f0c431;
  background:
    radial-gradient(circle at 50% 62%, #f8e7b0 0 5px, transparent 6px),
    linear-gradient(#d11a1a, #7a1008);
}

.xp-icon__glyph--bin {
  border: 2px solid #6d7a6d;
  background:
    repeating-linear-gradient(90deg, transparent 0 4px, #9aa59a 4px 6px),
    linear-gradient(#d7ddd7, #8b948b);
}

.xp-icon span {
  max-width: 72px;
  color: #fff;
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
}

.xp-window {
  position: absolute;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 3px solid #0058e6;
  border-radius: 8px 8px 0 0;
  background: #ece9d8;
  box-shadow: 2px 2px 8px rgb(0 0 0 / 0.35);
  z-index: 20;
}

.xp-window.is-active {
  z-index: 40;
}

.xp-window--app {
  top: 6vh;
  left: 50%;
  width: min(960px, calc(100vw - 24px));
  height: min(680px, calc(100vh - 84px));
  transform: translateX(-50%);
}

.xp-window--dialog {
  top: 28%;
  left: 50%;
  width: min(420px, calc(100vw - 32px));
  transform: translateX(-50%);
}

.xp-window--pictures {
  top: 12%;
  left: 8%;
  width: min(360px, calc(100vw - 32px));
  height: 280px;
}

.xp-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 26px;
  padding: 2px 3px 3px 6px;
  background: linear-gradient(#0997ff 0%, #0058ee 48%, #0050ee 100%);
  color: #fff;
}

.xp-window:not(.is-active) .xp-titlebar {
  background: linear-gradient(#9db9eb, #6d8ad6);
}

.xp-titlebar h1,
.xp-titlebar h2 {
  margin: 0;
  font-family: "Trebuchet MS", Tahoma, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  text-shadow: 1px 1px 0 rgb(0 0 0 / 0.35);
}

.xp-caption-buttons {
  display: flex;
  gap: 2px;
}

.xp-caption {
  width: 21px;
  height: 21px;
  border: 1px solid #003c74;
  border-radius: 3px;
  background: linear-gradient(#3c9bff, #1166dd);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  box-shadow: inset 1px 1px 0 rgb(255 255 255 / 0.55);
}

.xp-caption--close {
  background: linear-gradient(#e9785e, #c01a17);
}

.xp-menubar,
.xp-status {
  display: flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  background: #ece9d8;
}

.xp-menubar {
  gap: 12px;
  border-bottom: 1px solid #d0cfc4;
  color: #000;
  font-size: 11px;
}

.xp-menubar button {
  border: 0;
  background: transparent;
  padding: 2px 4px;
}

.xp-menubar button:hover,
.xp-menubar button:focus-visible {
  background: #316ac5;
  color: #fff;
}

.xp-status {
  justify-content: space-between;
  border-top: 1px solid #fff;
  box-shadow: inset 0 1px 0 #aca899;
  color: #222;
}

.xp-body {
  display: grid;
  flex: 1;
  min-height: 0;
  grid-template-columns: 176px minmax(0, 1fr);
  background: #ece9d8;
}

.xp-wizard {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 12px;
  background:
    linear-gradient(rgb(0 40 120 / 0.18), rgb(0 40 120 / 0.18)),
    linear-gradient(#1d4f9c, #0b2f6b);
  color: #fff;
}

.xp-wizard strong {
  display: block;
  font-family: "Trebuchet MS", Tahoma, sans-serif;
  font-size: 18px;
  line-height: 1.15;
}

.xp-wizard p,
.xp-copy p {
  margin: 10px 0 0;
  line-height: 1.45;
}

.xp-badge {
  display: grid;
  width: 88px;
  height: 88px;
  place-items: center;
  margin-top: 18px;
  border: 3px solid #f0c431;
  background: #b51212;
  color: #f8e7b0;
  font-family: Teko, Impact, sans-serif;
  font-size: 42px;
  letter-spacing: 0.02em;
}

.xp-content {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
}

.xp-step {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  padding: 16px 18px 8px;
}

.xp-step[hidden],
.xp-window[hidden],
.xp-start[hidden],
.xp-balloon[hidden],
.xp-progress[hidden],
.pc-face[hidden],
.pc-placeholder[hidden] {
  display: none !important;
}

.xp-copy h3 {
  margin: 0 0 8px;
  font-family: "Trebuchet MS", Tahoma, sans-serif;
  font-size: 18px;
  font-weight: 700;
}

.xp-copy p,
.xp-field span,
.xp-hint {
  color: #222;
  font-size: 11px;
}

.xp-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid #aca899;
  background: #ece9d8;
}

.xp-btn {
  min-width: 76px;
  min-height: 23px;
  border: 1px solid #003c74;
  border-radius: 3px;
  background: linear-gradient(#fff, #ece9d8 55%, #d6d3c4);
  color: #000;
  box-shadow: inset 1px 1px 0 #fff;
}

.xp-btn:hover,
.xp-btn:focus-visible {
  border-color: #0066cc;
}

.xp-btn:active {
  background: #d6d3c4;
  box-shadow: inset 1px 1px 2px rgb(0 0 0 / 0.2);
}

.xp-btn[disabled] {
  color: #808080;
}

.xp-drop {
  display: grid;
  min-height: 150px;
  place-items: center;
  margin-top: 14px;
  border: 2px dashed #316ac5;
  background: #fff;
  color: #316ac5;
  text-align: center;
}

.xp-drop.is-hover {
  background: #d7e8ff;
}

.xp-drop strong {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
}

.xp-file {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.xp-fields {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.xp-field {
  display: grid;
  gap: 4px;
}

.xp-field input[type="text"],
.xp-field input[type="range"] {
  width: 100%;
}

.xp-field input[type="text"] {
  min-height: 23px;
  border: 2px inset #aca899;
  background: #fff;
  padding: 2px 6px;
  color: #000;
}

.xp-hint {
  margin: 8px 0 0;
}

.xp-progress {
  height: 16px;
  margin-top: 12px;
  border: 1px solid #003c74;
  background: #fff;
}

.xp-progress::after {
  content: "";
  display: block;
  width: var(--xp-progress, 10%);
  height: 100%;
  background: repeating-linear-gradient(90deg, #1d5fd4 0 8px, #3c88f0 8px 16px);
}

.xp-studio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 12px;
  min-height: 0;
  flex: 1;
}

.pc-poster {
  display: flex;
  min-width: 0;
  overflow: hidden;
  flex-direction: column;
  border: 2px solid #6b4a2b;
  background: #f3e6c8;
  box-shadow: 4px 4px 0 rgb(0 0 0 / 0.2);
}

.pc-poster__head {
  padding: 8px 10px 6px;
  background: #8b1e1e;
  color: #f8e7b0;
  text-align: center;
}

.pc-poster__kicker {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.14em;
}

.pc-poster__head h3,
.pc-caption,
.pc-hero-name {
  margin: 2px 0 0;
  font-family: Teko, Impact, "Arial Black", sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pc-poster__head h3 {
  font-size: 28px;
  line-height: 0.9;
}

.pc-scene {
  position: relative;
  flex: 1;
  min-height: 220px;
  overflow: hidden;
}

.pc-scene[data-scene="winter"] { background: linear-gradient(#9ec7e6, #e8f2f8 70%, #b9c9d4); }
.pc-scene[data-scene="valentine"] { background: linear-gradient(#f4b4c4, #8a2c44); }
.pc-scene[data-scene="spring"] { background: linear-gradient(#9ed48a, #4f8a32); }
.pc-scene[data-scene="rain"] { background: linear-gradient(#7b93a8, #3f4d3a); }
.pc-scene[data-scene="blossom"] { background: linear-gradient(#f2c3d6, #6aa84f); }
.pc-scene[data-scene="sunset"] { background: linear-gradient(#f2a15a, #c45c1a); }
.pc-scene[data-scene="patriot"] { background: linear-gradient(#6ea4e6, #2f5c1e); }
.pc-scene[data-scene="heat"] { background: linear-gradient(#f0c14d, #d4791a); }
.pc-scene[data-scene="autumn"] { background: linear-gradient(#f0b060, #8a4b1e); }
.pc-scene[data-scene="smoke"] { background: linear-gradient(#5a534c, #2b241e); }
.pc-scene[data-scene="harvest"] { background: linear-gradient(#e0c078, #8a5a1e); }
.pc-scene[data-scene="yule"] { background: linear-gradient(#1e3a5c, #0f2414); }

.pc-face-slot {
  position: absolute;
  left: 50%;
  top: 14%;
  z-index: 1;
  width: var(--face-size, 30%);
  aspect-ratio: 0.86;
  transform: translate(calc(-50% + var(--face-x, 0%)), var(--face-y, 0%));
  touch-action: none;
  cursor: move;
}

.pc-face,
.pc-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.pc-placeholder {
  display: grid;
  place-items: center;
  background: #d7c4a8;
  color: #6b4a2b;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
}

.pc-ff {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.pc-banner {
  padding: 6px 10px 8px;
  background: #111;
  color: #f4c542;
  text-align: center;
}

.pc-caption {
  font-size: 22px;
  line-height: 0.95;
}

.pc-banner p {
  margin: 3px 0 0;
  color: #f7e7b8;
  font-size: 11px;
}

.pc-cal {
  padding: 8px 10px 10px;
  background: #fffaf0;
}

.pc-cal__label {
  margin: 0 0 6px;
  color: #8b1e1e;
  font-weight: 700;
  text-align: center;
}

.pc-dow,
.pc-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.pc-dow {
  margin-bottom: 4px;
  color: #8b1e1e;
  font-size: 9px;
  font-weight: 700;
  text-align: center;
}

.pc-days span {
  min-height: 16px;
  color: #2b2118;
  font-size: 10px;
  text-align: center;
}

.pc-days .is-today {
  background: #f4c542;
  font-weight: 700;
}

.xp-side {
  display: grid;
  align-content: start;
  gap: 8px;
}

.xp-group {
  padding: 8px 8px 10px;
  border: 1px solid #d0cfc4;
  box-shadow: inset 1px 1px 0 #fff;
}

.xp-group legend {
  padding: 0 4px;
  color: #003c74;
}

.xp-nav {
  display: flex;
  gap: 6px;
}

.xp-nav .xp-btn,
.xp-side .xp-btn {
  width: 100%;
}

.xp-dialog-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 16px;
  background: #ece9d8;
}

.xp-dialog-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  background: #c01a17;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
}

.xp-dialog-icon--info {
  background: #0058ee;
}

.xp-pictures {
  display: grid;
  flex: 1;
  place-items: center;
  padding: 12px;
  background: #fff;
}

.xp-pictures img {
  max-width: 100%;
  max-height: 180px;
  border: 1px solid #aca899;
}

.xp-balloon {
  position: absolute;
  right: 18px;
  bottom: 52px;
  z-index: 50;
  width: 230px;
  padding: 10px 12px;
  border: 1px solid #000;
  background: #ffffe1;
  box-shadow: 2px 2px 0 rgb(0 0 0 / 0.25);
}

.xp-balloon strong {
  display: block;
  margin-bottom: 4px;
}

.xp-start {
  position: absolute;
  left: 0;
  bottom: 30px;
  z-index: 60;
  display: grid;
  grid-template-columns: 190px 180px;
  width: 370px;
  height: 420px;
  overflow: hidden;
  border: 2px solid #0058e6;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: #fff;
  box-shadow: 2px 2px 10px rgb(0 0 0 / 0.35);
}

.xp-start__user {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: linear-gradient(#1e5ad0, #2f7ae6);
  color: #fff;
  font-family: "Trebuchet MS", Tahoma, sans-serif;
  font-size: 16px;
  font-weight: 700;
}

.xp-start__avatar {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 2px solid #fff;
  background: #b51212;
  color: #f8e7b0;
  font-size: 18px;
}

.xp-start__left,
.xp-start__right {
  display: grid;
  align-content: start;
  padding: 8px;
}

.xp-start__left {
  background: #fff;
}

.xp-start__right {
  background: #d3e5fa;
  border-left: 1px solid #99bce2;
}

.xp-start button,
.xp-start__left p {
  display: flex;
  width: 100%;
  align-items: center;
  min-height: 32px;
  border: 0;
  background: transparent;
  padding: 4px 6px;
  color: #000;
  text-align: left;
}

.xp-start button:hover,
.xp-start button:focus-visible {
  background: #316ac5;
  color: #fff;
}

.xp-taskbar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  height: 30px;
  padding-right: 6px;
  background: linear-gradient(#1e5ad0 0%, #245edc 8%, #1941a4 100%);
  box-shadow: inset 0 1px 0 #5d92ff;
}

.xp-start-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  border: 0;
  border-radius: 0 12px 12px 0;
  background: linear-gradient(#5fbf46, #3d8c36);
  padding: 0 18px 0 10px;
  color: #fff;
  font-family: "Franklin Gothic Medium", "Trebuchet MS", Tahoma, sans-serif;
  font-size: 18px;
  font-style: italic;
  font-weight: 700;
  text-shadow: 1px 1px 0 rgb(0 0 0 / 0.35);
}

.xp-start-btn:hover,
.xp-start-btn:focus-visible {
  filter: brightness(1.08);
}

.xp-flag {
  width: 18px;
  height: 14px;
  background:
    linear-gradient(#f3c14e 0 3px, #c4122c 3px 7px, #f3c14e 7px 10px, #c4122c 10px 14px);
  box-shadow: 7px 0 0 #1d5fd4;
}

.xp-task {
  min-width: 140px;
  height: 22px;
  margin-left: 8px;
  border: 1px solid #003c74;
  background: linear-gradient(#3a7be0, #2458b4);
  color: #fff;
  text-align: left;
  padding: 0 8px;
}

.xp-tray {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  height: 22px;
  border: 1px solid #003c74;
  background: linear-gradient(#14a0d4, #0b7eae);
  padding: 0 8px;
  color: #fff;
}

.xp-volume {
  width: 10px;
  height: 10px;
  border-right: 3px solid #fff;
  background: #fff;
  clip-path: polygon(0 30%, 50% 30%, 100% 0, 100% 100%, 50% 70%, 0 70%);
}

@media (max-width: 820px) {
  .xp-body,
  .xp-studio,
  .xp-start {
    grid-template-columns: 1fr;
  }

  .xp-wizard,
  .xp-window--pictures,
  .xp-icons {
    display: none;
  }

  .xp-window--app {
    top: 8px;
    height: calc(100vh - 46px);
  }

  .xp-start {
    width: min(280px, 100vw);
    height: 280px;
  }
}

@media print {
  body.perfectcal-home-index {
    overflow: visible;
    background: #fff;
  }

  .xp-desktop {
    background: #fff;
    height: auto;
  }

  .xp-icons,
  .xp-wizard,
  .xp-menubar,
  .xp-status,
  .xp-actions,
  .xp-side,
  .xp-taskbar,
  .xp-start,
  .xp-balloon,
  .xp-titlebar,
  .xp-window--dialog,
  .xp-window--pictures {
    display: none !important;
  }

  .xp-window--app {
    position: static;
    width: auto;
    height: auto;
    transform: none;
    border: 0;
    background: #fff;
    box-shadow: none;
  }

  .xp-body,
  .xp-content,
  .xp-step,
  .xp-studio {
    display: block;
  }

  .pc-poster {
    width: 8.5in;
    min-height: 11in;
    box-shadow: none;
  }
}