/* =========================================================
   PRECIOUS_OS — FULL CUSTOMIZATION
   ========================================================= */

:root {
  --purple-dark: #241733;
  --purple: #6f50a4;
  --purple-mid: #8c70bd;
  --lavender: #bda9dc;
  --lavender-light: #e7ddf3;
  --pink: #d9a7c5;
  --cream: #faf7fc;
  --text: #292230;
  --shadow: rgba(20, 10, 30, 0.35);
  --taskbar-height: 44px;

  --wallpaper-image: url("assets/wallpaper/wallpaper_6.png");
  --wallpaper-size: cover;
  --wallpaper-overlay: rgba(22, 10, 32, 0.20);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: Tahoma, Verdana, Arial, sans-serif;
}

body {
  background: var(--purple-dark);
  cursor: url("assets/cursors/arrow.png") 2 2, auto;
}

button,
a,
.desktop-icon,
.archive-folder,
.drive-card,
.theme-option,
.wallpaper-option,
.photo,
.buddy {
  font-family: inherit;
  cursor: url("assets/cursors/pointer.png") 8 2, pointer;
}

.window-titlebar {
  cursor: url("assets/cursors/move.png") 15 15, move;
}


/* =========================================================
   BOOT SCREEN
   ========================================================= */

#bootScreen {
  position: fixed;
  inset: 0;
  z-index: 99999;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(circle at 50% 45%, #4b326d 0%, #241733 65%);

  color: white;

  transition:
    opacity 0.6s ease,
    visibility 0.6s ease;
}

#bootScreen.hidden {
  opacity: 0;
  visibility: hidden;
}

.boot-box {
  width: min(440px, 88vw);
  text-align: center;
}

.boot-logo {
  margin-bottom: 10px;

  font-family: Georgia, serif;
  font-size: clamp(36px, 9vw, 64px);
}

.boot-logo span {
  color: var(--lavender);
}

.boot-version {
  margin-bottom: 40px;

  font-size: 11px;
  letter-spacing: 3px;

  opacity: 0.7;
}

.boot-status {
  min-height: 110px;

  text-align: left;

  font:
    12px/1.8
    "Courier New",
    monospace;
}

.progress-shell {
  height: 18px;

  margin-top: 20px;
  padding: 3px;

  border:
    1px solid
    var(--lavender);
}

.progress-bar {
  width: 0;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      var(--purple-mid),
      var(--lavender),
      var(--pink)
    );

  transition:
    width
    0.25s
    linear;
}

.boot-enter {
  display: none;

  margin-top: 28px;
  padding: 11px 22px;

  border:
    1px solid
    var(--lavender);

  background: transparent;

  color: white;

  font-size: 11px;
  letter-spacing: 2px;
}

.boot-enter:hover {
  background:
    var(--lavender);

  color:
    var(--purple-dark);
}


/* =========================================================
   SHUTDOWN SCREEN
   ========================================================= */

#shutdownScreen {
  position: fixed;
  inset: 0;
  z-index: 100000;

  display: none;

  place-items: center;

  background:
    radial-gradient(
      circle,
      #3b2753,
      #140c1d
    );

  color: white;
}

#shutdownScreen.active {
  display: grid;
}

.shutdown-card {
  text-align: center;
}

.shutdown-heart {
  color: var(--lavender);
  font-size: 64px;
}

.shutdown-card h1 {
  margin: 8px 0;

  font:
    42px
    Georgia,
    serif;
}

.shutdown-card p {
  opacity: 0.75;
}

.shutdown-card button {
  margin-top: 22px;
  padding: 10px 18px;

  border:
    1px solid
    #c9b3e2;

  background:
    #7659a0;

  color: white;
}


/* =========================================================
   DESKTOP / WALLPAPER
   ========================================================= */

#desktop {
  position: fixed;

  inset:
    0
    0
    var(--taskbar-height)
    0;

  overflow: hidden;

  background-image:
    linear-gradient(
      var(--wallpaper-overlay),
      var(--wallpaper-overlay)
    ),
    var(--wallpaper-image);

  background-position:
    center,
    center;

  background-repeat:
    no-repeat,
    no-repeat;

  background-size:
    cover,
    var(--wallpaper-size);

  background-color:
    #5b4679;
}

body[data-theme="midnight"] {
  --purple-dark: #15101e;
  --purple: #51406a;
  --purple-mid: #6d5987;
  --lavender: #a997c2;
  --lavender-light: #d8cfe3;
  --pink: #a782a6;
}

body[data-theme="pink"] {
  --purple-dark: #402439;
  --purple: #875879;
  --purple-mid: #a96f97;
  --lavender: #e1bad0;
  --lavender-light: #f0dbe6;
  --pink: #df93bb;
}

.star {
  position: absolute;
  z-index: 1;

  color:
    rgba(
      255,
      255,
      255,
      0.8
    );

  pointer-events: none;
  user-select: none;

  font-size: 12px;
}

.s1 { top: 8%; left: 22%; }
.s2 { top: 15%; right: 12%; }
.s3 { top: 36%; left: 47%; }
.s4 { bottom: 20%; right: 22%; }
.s5 { bottom: 8%; left: 31%; }
.s6 { top: 23%; left: 72%; }

.wallpaper-title {
  position: absolute;
  z-index: 1;

  top: 8vh;
  right: 5vw;

  text-align: right;

  color:
    rgba(
      255,
      255,
      255,
      0.22
    );

  pointer-events: none;
  user-select: none;

  text-shadow:
    0
    2px
    8px
    rgba(
      0,
      0,
      0,
      0.35
    );
}

.wallpaper-title .big {
  display: block;

  font:
    clamp(
      50px,
      10vw,
      120px
    ) /
    0.8
    Georgia,
    serif;
}

.wallpaper-title .small {
  margin-top: 16px;

  font:
    12px
    "Courier New",
    monospace;

  letter-spacing: 4px;
}


/* =========================================================
   STICKERS
   assets/stickers/ remains preserved but unused.
   ========================================================= */


/* =========================================================
   DESKTOP ICONS
   ========================================================= */

.desktop-icons {
  position: absolute;
  z-index: 5;

  top: 18px;
  left: 18px;

  width: 205px;

  display: grid;

  grid-template-columns:
    repeat(
      2,
      86px
    );

  gap:
    17px
    14px;
}

.desktop-icon {
  width: 86px;

  padding: 5px;

  border:
    1px solid
    transparent;

  color: white;

  text-align: center;

  user-select: none;
}

.desktop-icon:hover,
.desktop-icon.selected {
  border-color:
    rgba(
      255,
      255,
      255,
      0.30
    );

  background:
    rgba(
      78,
      54,
      110,
      0.45
    );
}

.actual-icon {
  display: block;

  width: 46px;
  height: 46px;

  margin:
    0
    auto
    5px;

  object-fit: contain;

  image-rendering:
    pixelated;

  filter:
    drop-shadow(
      1px
      2px
      1px
      rgba(
        0,
        0,
        0,
        0.45
      )
    );
}

.icon-label {
  font-size: 11px;
  line-height: 1.2;

  text-shadow:
    1px
    1px
    2px
    black,

    -1px
    -1px
    2px
    rgba(
      0,
      0,
      0,
      0.45
    );
}


/* =========================================================
   WINDOWS
   ========================================================= */

.window {
  position: absolute;
  z-index: 20;

  display: none;

  width:
    min(
      620px,
      calc(
        100vw - 30px
      )
    );

  min-width: 280px;

  border:
    1px solid
    #473954;

  background:
    #f6f3f8;

  box-shadow:
    7px
    10px
    30px
    var(--shadow);

  color:
    var(--text);
}

.window.active {
  display: block;
}

.window.maximized {
  top:
    8px
    !important;

  left:
    8px
    !important;

  width:
    calc(
      100vw - 16px
    )
    !important;

  height:
    calc(
      100vh -
      var(--taskbar-height) -
      16px
    )
    !important;
}

.window.maximized .window-body {
  max-height:
    calc(
      100vh -
      var(--taskbar-height) -
      48px
    );
}

.window-titlebar {
  height: 31px;

  padding-left: 9px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  background:
    linear-gradient(
      90deg,
      #38254f,
      var(--purple-mid),
      var(--lavender)
    );

  color: white;

  user-select: none;
}

.window-title {
  font-size: 12px;
  font-weight: bold;
}

.window-controls {
  height: 100%;

  display: flex;
}

.window-control {
  width: 32px;

  border: none;

  border-left:
    1px solid
    rgba(
      255,
      255,
      255,
      0.25
    );

  background:
    rgba(
      255,
      255,
      255,
      0.08
    );

  color: white;
}

.window-control:hover {
  background:
    rgba(
      255,
      255,
      255,
      0.23
    );
}

.window-control.close:hover {
  background:
    #b74964;
}

.window-body {
  max-height:
    calc(
      100vh - 130px
    );

  overflow: auto;
}


/* =========================================================
   TOOLBARS
   ========================================================= */

.notepad-toolbar,
.explorer-toolbar,
.archive-toolbar {
  padding: 7px 9px;

  border-bottom:
    1px solid
    #bcb5c3;

  background:
    linear-gradient(
      #f8f6fa,
      #ddd8e2
    );

  font-size: 11px;
}

.notepad-content {
  min-height: 340px;

  padding: 18px;

  background: white;

  font:
    13px/1.7
    "Courier New",
    monospace;

  white-space:
    pre-line;
}


/* =========================================================
   MY COMPUTER
   ========================================================= */

.computer-body {
  min-height: 350px;

  padding: 18px;

  background: white;
}

.computer-body h3 {
  margin:
    0
    0
    14px;

  color:
    #5d437a;

  font-size: 13px;
}

.drive-grid {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 10px;
}

.drive-card {
  display: flex;

  gap: 10px;

  align-items: center;

  padding: 12px;

  border:
    1px solid
    #d2c6dc;

  background:
    #faf8fc;

  color:
    #302838;

  text-align: left;
}

.drive-card:hover {
  background:
    #eee6f5;
}

.drive-card img {
  width: 38px;
  height: 38px;

  image-rendering:
    pixelated;
}

.drive-card span {
  display: flex;

  flex-direction: column;

  gap: 3px;
}

.drive-card strong {
  font-size: 11px;
}

.drive-card small {
  color:
    #7d7183;

  font-size: 10px;
}

.storage-card {
  margin-top: 18px;
  padding: 12px;

  border:
    1px solid
    #d2c6dc;

  background:
    #f5f1f8;

  font-size: 11px;
}

.storage-track {
  height: 12px;

  margin: 8px 0;

  border:
    1px inset
    #aaa;

  background:
    #ddd4e4;
}

.storage-fill {
  width: 42%;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      var(--purple-mid),
      var(--lavender)
    );
}


/* =========================================================
   BTS ARCHIVE
   ========================================================= */

.archive-address {
  display: flex;

  margin-top: 6px;

  border:
    1px solid
    #a9a1b0;

  background: white;
}

.archive-address span {
  padding: 5px 8px;

  border-right:
    1px solid
    #bbb3c2;

  background:
    #eee9f2;

  font-size: 10px;
}

.archive-address input {
  flex: 1;

  padding: 5px 8px;

  border: 0;

  background: white;

  font:
    11px
    Tahoma;
}

.archive-nav {
  margin-right: 8px;
  padding: 3px 8px;

  font-size: 10px;
}

.archive-content {
  min-height: 390px;

  display: grid;

  grid-template-columns:
    150px 1fr;
}

.archive-sidebar {
  padding: 15px 10px;

  border-right:
    1px solid
    #c3bdc8;

  background:
    linear-gradient(
      #e9e2f1,
      #f6f3f8
    );

  font-size: 11px;
}

.archive-sidebar strong {
  display: block;

  margin-bottom: 10px;

  color:
    #5d437a;
}

.archive-sidebar div {
  margin-bottom: 7px;
}

.archive-main {
  padding: 20px;

  background: white;
}

.archive-intro {
  display: flex;

  align-items: end;
  justify-content: space-between;

  margin-bottom: 18px;
  padding-bottom: 8px;

  border-bottom:
    1px solid
    #eee;
}

.archive-intro span {
  color:
    #5d437a;

  font:
    bold 12px
    "Courier New",
    monospace;
}

.archive-intro small {
  color:
    #8d8194;

  font-size: 9px;
}

.folder-grid {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(
        90px,
        1fr
      )
    );

  gap: 20px;
}

.archive-folder {
  padding: 7px;

  border:
    1px solid
    transparent;

  text-align: center;
}

.archive-folder:hover {
  border-color:
    #c7b6d9;

  background:
    #eee6f5;
}

.mini-folder {
  position: relative;

  width: 55px;
  height: 39px;

  margin:
    auto
    auto
    8px;

  border:
    1px solid
    #93713e;

  background:
    #dfbb75;
}

.mini-folder::before {
  content: "";

  position: absolute;

  top: -8px;
  left: 4px;

  width: 23px;
  height: 9px;

  border:
    1px solid
    #93713e;

  border-bottom: 0;

  background:
    #e8c987;
}

.archive-folder span {
  font-size: 10px;
}

.archive-detail {
  display: grid;

  grid-template-columns:
    90px 1fr;

  gap: 18px;

  align-items: start;
}

.archive-detail-icon img {
  width: 72px;

  image-rendering:
    pixelated;
}

.archive-detail-kicker {
  color:
    var(--purple-mid);

  font:
    10px
    "Courier New",
    monospace;

  letter-spacing: 1px;
}

.archive-detail h2 {
  margin: 5px 0 8px;

  color:
    #4b335f;

  font:
    28px
    Georgia,
    serif;
}

.archive-detail p {
  color:
    #6f6475;

  font-size: 12px;
  line-height: 1.6;
}

.archive-placeholder-grid {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 10px;

  margin-top: 18px;
}

.archive-placeholder-grid div {
  padding: 12px;

  border:
    1px solid
    #d7cbe0;

  background:
    #f7f2fa;
}

.archive-placeholder-grid strong,
.archive-placeholder-grid span {
  display: block;

  font-size: 10px;
}

.archive-placeholder-grid span {
  margin-top: 7px;

  color:
    #8c8191;
}


/* =========================================================
   SPOTIFY PLAYER
   ========================================================= */

.spotify-shell {
  min-height: 450px;

  padding: 14px;

  background:
    linear-gradient(
      180deg,
      #26212a,
      #151218
    );
}

.spotify-retro-display {
  margin-bottom: 12px;
  padding: 10px;

  border:
    4px inset
    #756982;

  background:
    #a4c5a1;

  color:
    #172116;

  font:
    11px
    "Courier New",
    monospace;
}

.spotify-retro-display span,
.spotify-retro-display strong,
.spotify-retro-display small {
  display: block;
}

.spotify-retro-display strong {
  margin:
    3px 0;

  font-size: 15px;
}

.spotify-frame {
  display: block;

  border-radius: 4px;

  background:
    #111;
}

.spotify-link {
  display: block;

  margin-top: 10px;
  padding: 8px;

  border:
    1px solid
    #786b80;

  background:
    #403847;

  color: white;

  text-align: center;
  text-decoration: none;

  font-size: 10px;
}


/* =========================================================
   GALLERY
   ========================================================= */

.gallery {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(
        150px,
        1fr
      )
    );

  gap: 15px;

  padding: 20px;

  background: white;
}

.photo {
  padding:
    8px
    8px
    24px;

  border: 0;

  background:
    #eee;

  box-shadow:
    0
    2px
    8px
    rgba(
      0,
      0,
      0,
      0.18
    );

  transform:
    rotate(
      -1deg
    );
}

.photo:nth-child(even) {
  transform:
    rotate(
      1deg
    );
}

.photo img {
  width: 100%;

  aspect-ratio:
    4 / 3;

  display: block;

  object-fit: cover;
}

.photo-caption {
  margin-top: 7px;

  color:
    #635a68;

  text-align: center;

  font:
    9px
    "Courier New",
    monospace;
}


/* =========================================================
   PHOTO VIEWER
   ========================================================= */

.photo-viewer {
  padding: 16px;

  background:
    #16121a;

  text-align: center;
}

.photo-viewer img {
  width: 100%;
  max-height:
    calc(
      100vh - 230px
    );

  object-fit: contain;

  background: black;
}

.viewer-controls {
  display: grid;

  grid-template-columns:
    auto 1fr auto;

  gap: 8px;

  align-items: center;

  margin-top: 10px;
}

.viewer-controls button,
.set-wallpaper-button {
  padding: 7px 10px;

  border:
    1px outset
    #81758a;

  background:
    #403847;

  color: white;

  font-size: 10px;
}

#viewerCaption {
  color:
    #d6cadc;

  font:
    10px
    "Courier New",
    monospace;
}

.set-wallpaper-button {
  margin-top: 10px;
}


/* =========================================================
   FAVORITES
   ========================================================= */

.favorites {
  min-height: 340px;

  padding: 20px;

  background: white;
}

.favorite-section {
  margin-bottom: 15px;

  border:
    1px solid
    #cfc4d8;
}

.favorite-heading {
  padding: 7px 10px;

  background:
    var(--purple-mid);

  color: white;

  font-size: 11px;
  font-weight: bold;
}

.favorite-content {
  padding: 12px;

  font-size: 12px;
  line-height: 1.55;
}


/* =========================================================
   MAGIC SHOP
   ========================================================= */

.magic-shop {
  min-height: 390px;

  padding: 45px 35px;

  background:
    radial-gradient(
      circle at center,
      rgba(
        179,
        144,
        224,
        0.32
      ),
      transparent 45%
    ),

    linear-gradient(
      #21172d,
      #39234e
    );

  color: white;

  text-align: center;
}

.magic-stars {
  color:
    #d9c1ef;

  font-size: 24px;
  letter-spacing: 13px;
}

.magic-shop h2 {
  margin: 30px 0 15px;

  font:
    normal 34px
    Georgia,
    serif;
}

.magic-shop p {
  max-width: 430px;

  margin:
    0
    auto;

  color:
    #d8cce2;

  font-size: 13px;
  line-height: 1.8;
}

.magic-note {
  max-width: 430px;

  margin:
    30px
    auto
    0;

  padding: 18px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.2
    );

  background:
    rgba(
      255,
      255,
      255,
      0.06
    );

  font-style: italic;
}


/* =========================================================
   RETRO BROWSER
   ========================================================= */

.browser-toolbar {
  display: flex;

  gap: 4px;

  padding: 6px;

  border-bottom:
    1px solid
    #bcb5c3;

  background:
    #e9e5ed;
}

.browser-toolbar button {
  padding: 5px 8px;

  font-size: 10px;
}

.browser-address {
  display: flex;

  border-bottom:
    1px solid
    #bcb5c3;

  background:
    #f5f2f7;
}

.browser-address span {
  padding: 7px 8px;

  border-right:
    1px solid
    #c7c0cb;

  font-size: 10px;
}

.browser-address input {
  flex: 1;

  padding: 6px 8px;

  border: 0;

  background: white;

  font:
    10px
    Tahoma;
}

.browser-page {
  min-height: 370px;

  padding: 26px;

  background:
    linear-gradient(
      180deg,
      #f8f3fb,
      #ede4f4
    );

  text-align: center;
}

.browser-home-title {
  color:
    #593e73;

  font:
    26px
    Georgia,
    serif;
}

.browser-home-subtitle {
  margin-top: 5px;

  color:
    #887891;

  font:
    10px
    "Courier New",
    monospace;
}

.browser-links {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap: 10px;

  max-width: 430px;

  margin:
    28px
    auto;
}

.browser-links button {
  padding: 14px;

  border:
    1px solid
    #c9b8d7;

  background:
    #fff;

  color:
    #49355e;

  text-align: left;
}

.browser-links button:hover {
  background:
    #e7dbef;
}

.browser-notice {
  max-width: 430px;

  margin:
    0
    auto;

  padding: 12px;

  border:
    1px dashed
    #b99acb;

  background:
    rgba(
      255,
      255,
      255,
      0.6
    );

  color:
    #67566e;

  font-size: 10px;
  line-height: 1.5;
}


/* =========================================================
   DIARY
   ========================================================= */

.diary-body {
  padding: 18px;

  background:
    #fffef8;
}

.diary-date {
  margin-bottom: 10px;

  color:
    #5c4c62;

  font:
    bold 11px
    "Courier New",
    monospace;
}

#diaryText {
  width: 100%;
  min-height: 300px;

  resize: vertical;

  padding: 14px;

  border:
    1px solid
    #cfc5d5;

  background:
    #fffdf3;

  color:
    #342d38;

  font:
    12px/1.6
    "Courier New",
    monospace;
}

.diary-actions {
  display: flex;

  gap: 10px;

  align-items: center;

  margin-top: 10px;
}

.diary-actions button {
  padding: 7px 12px;
}

#diarySaveStatus {
  color:
    #847889;

  font-size: 9px;
}


/* =========================================================
   MESSENGER
   ========================================================= */

.status-widget {
  position: absolute;
  z-index: 6;

  right: 22px;
  bottom: 22px;

  width: 230px;

  padding: 0;

  border:
    1px solid
    #54405f;

  background:
    #f2edf6;

  box-shadow:
    4px
    5px
    16px
    rgba(
      0,
      0,
      0,
      0.22
    );

  color:
    #302838;

  text-align: left;
}

.status-title {
  padding: 7px;

  background:
    linear-gradient(
      90deg,
      #6b4e91,
      #b59cd0
    );

  color: white;

  font-size: 11px;
}

.status-body {
  padding: 12px;

  font-size: 11px;
}

.status-person {
  display: flex;

  gap: 10px;

  align-items: center;
}

.avatar {
  width: 40px;
  height: 40px;

  display: grid;

  place-items: center;

  border:
    1px solid
    #857394;

  background:
    radial-gradient(
      circle,
      #d5bedf,
      #81609d
    );

  color: white;
}

.online {
  color:
    #3a9a54;

  font-weight: bold;
}

.status-message {
  margin-top: 9px;
  padding-top: 9px;

  border-top:
    1px solid
    #d8cfdd;

  color:
    #766b7d;
}

.messenger-app {
  min-height: 390px;

  display: grid;

  grid-template-columns:
    155px 1fr;

  background:
    white;
}

.buddy-list {
  padding: 10px;

  border-right:
    1px solid
    #cfc5d5;

  background:
    linear-gradient(
      #eee7f3,
      #f8f4fa
    );
}

.buddy-owner {
  display: flex;

  gap: 8px;

  align-items: center;

  margin-bottom: 15px;
}

.buddy-avatar {
  width: 36px;
  height: 36px;

  display: grid;

  place-items: center;

  border:
    1px solid
    #887293;

  background:
    #c7addb;

  color: white;
}

.buddy-owner strong,
.buddy-owner small {
  display: block;
}

.buddy-owner strong {
  font-size: 10px;
}

.buddy-owner small {
  color:
    #3a9a54;

  font-size: 9px;
}

.buddy-group {
  margin-bottom: 5px;

  color:
    #6d5d73;

  font-size: 9px;
  font-weight: bold;
}

.buddy {
  width: 100%;

  padding: 7px 5px;

  border: 0;

  background:
    transparent;

  color:
    #4f4355;

  text-align: left;

  font-size: 10px;
}

.buddy:hover,
.buddy.active {
  background:
    #ddd0e8;
}

.chat-panel {
  display: flex;

  flex-direction: column;

  min-width: 0;
}

.chat-heading {
  padding: 10px;

  border-bottom:
    1px solid
    #d7cedc;

  background:
    #f7f3f9;

  color:
    #594663;

  font-size: 11px;
  font-weight: bold;
}

.chat-log {
  flex: 1;

  min-height: 240px;

  padding: 12px;

  overflow: auto;

  font-size: 11px;
  line-height: 1.7;
}

.chat-system {
  margin-bottom: 8px;

  color:
    #8a7c90;

  font-style: italic;
}

.chat-compose {
  display: grid;

  grid-template-columns:
    1fr auto;

  gap: 6px;

  padding: 8px;

  border-top:
    1px solid
    #d7cedc;

  background:
    #f3eff5;
}

.chat-compose textarea {
  min-height: 55px;

  resize: none;

  padding: 6px;

  font:
    10px
    Tahoma;
}

.chat-compose button {
  width: 62px;
}


/* =========================================================
   RECYCLE BIN
   ========================================================= */

.recycle-body {
  min-height: 300px;

  padding: 45px;

  background: white;

  text-align: center;
}

.recycle-body img {
  width: 72px;

  image-rendering:
    pixelated;
}

.recycle-body h3 {
  font-size: 14px;
}

.recycle-body p {
  color:
    #776c7b;

  font-size: 11px;
}


/* =========================================================
   CONTROL PANEL
   ========================================================= */

.control-panel {
  min-height: 430px;

  padding: 18px;

  background: white;
}

.control-heading {
  display: flex;

  gap: 12px;

  align-items: center;

  padding-bottom: 14px;

  border-bottom:
    1px solid
    #ddd;
}

.control-heading img {
  width: 46px;

  image-rendering:
    pixelated;
}

.control-heading strong,
.control-heading small {
  display: block;
}

.control-heading small {
  margin-top: 4px;

  color:
    #7d7183;
}

.control-subheading {
  margin:
    20px
    0
    10px;

  color:
    #5d437a;

  font-size: 11px;
}

.wallpaper-options {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );

  gap: 10px;
}

.wallpaper-option {
  padding: 6px;

  border:
    1px solid
    #d2c6dc;

  background:
    #f8f5fa;
}

.wallpaper-option.active {
  outline:
    2px solid
    var(--purple-mid);

  background:
    #eee4f4;
}

.wallpaper-option img {
  width: 100%;

  aspect-ratio:
    4 / 3;

  display: block;

  object-fit: cover;
}

.wallpaper-option span {
  display: block;

  margin-top: 5px;

  color:
    #56465f;

  font-size: 9px;
}

.wallpaper-fit-row {
  display: flex;

  gap: 18px;

  align-items: center;

  margin-top: 12px;

  font-size: 10px;
}

.wallpaper-fit-row select {
  margin-left: 5px;
}

.theme-options {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      1fr
    );

  gap: 10px;
}

.theme-option {
  padding: 10px;

  border:
    1px solid
    #d2c6dc;

  background:
    #f7f4f9;
}

.theme-preview {
  display: block;

  height: 60px;

  margin-bottom: 8px;

  border:
    1px solid
    #988ca0;
}

.purple-preview {
  background:
    linear-gradient(
      145deg,
      #352249,
      #66508a,
      #9984bd
    );
}

.midnight-preview {
  background:
    linear-gradient(
      145deg,
      #11101b,
      #2b2340,
      #4a3b63
    );
}

.pink-preview {
  background:
    linear-gradient(
      145deg,
      #45253f,
      #9c658c,
      #d8a8c3
    );
}

.sound-toggle {
  display: block;

  margin-top: 22px;

  font-size: 11px;
}


/* =========================================================
   VISITOR COUNTER
   ========================================================= */

.visitor-counter {
  position: absolute;
  z-index: 6;

  left: 25px;
  bottom: 20px;

  color:
    rgba(
      255,
      255,
      255,
      0.85
    );

  font:
    10px
    "Courier New",
    monospace;

  text-shadow:
    1px
    1px
    2px
    rgba(
      0,
      0,
      0,
      0.55
    );
}

.counter-digits {
  display: inline-block;

  margin-left: 5px;
  padding: 3px 6px;

  border:
    1px inset
    #867b8d;

  background:
    #151219;

  color:
    #d7c1ea;

  letter-spacing: 4px;
}


/* =========================================================
   START MENU
   ========================================================= */

#startMenu {
  position: fixed;
  z-index: 9998;

  left: 0;
  bottom:
    var(
      --taskbar-height
    );

  width: 360px;

  display: none;

  border:
    1px solid
    #493755;

  background:
    #f6f2f8;

  box-shadow:
    6px
    -4px
    22px
    rgba(
      0,
      0,
      0,
      0.32
    );
}

#startMenu.open {
  display: block;
}

.start-header {
  display: flex;

  gap: 10px;

  align-items: center;

  padding: 13px;

  background:
    linear-gradient(
      90deg,
      #3c2852,
      var(--purple-mid)
    );

  color: white;

  font:
    20px
    Georgia,
    serif;
}

.start-avatar {
  width: 42px;
  height: 42px;

  display: grid;

  place-items: center;

  border:
    2px solid
    rgba(
      255,
      255,
      255,
      0.5
    );

  border-radius: 4px;

  background:
    var(--lavender-light);

  color:
    #5b3c77;
}

.start-header small {
  display: block;

  margin-top: 4px;

  font:
    10px
    Tahoma;

  opacity: 0.7;
}

.start-content {
  display: grid;

  grid-template-columns:
    1fr 110px;
}

.start-programs {
  padding: 7px 0;
}

.start-link {
  display: flex;

  gap: 8px;

  align-items: center;

  padding: 7px 12px;

  color:
    #302838;

  font-size: 11px;
}

.start-link img {
  width: 24px;
  height: 24px;

  image-rendering:
    pixelated;
}

.start-link:hover {
  background:
    #ded2e8;
}

.start-side {
  padding: 10px 7px;

  border-left:
    1px solid
    #d2c6dc;

  background:
    #e9e1ef;
}

.start-side button {
  width: 100%;

  display: block;

  padding: 8px 5px;

  border: 0;

  background:
    transparent;

  color:
    #493c52;

  text-align: left;

  font-size: 10px;
}

.start-side button:hover {
  background:
    #d8cbe2;
}

.start-footer {
  padding: 8px 12px;

  background:
    #d9cde2;

  text-align: right;

  font-size: 10px;
}


/* =========================================================
   TASKBAR
   ========================================================= */

#taskbar {
  position: fixed;
  z-index: 9999;

  right: 0;
  bottom: 0;
  left: 0;

  height:
    var(
      --taskbar-height
    );

  display: flex;

  align-items: center;

  border-top:
    1px solid
    rgba(
      255,
      255,
      255,
      0.4
    );

  background:
    linear-gradient(
      #59426f,
      #38284a
    );

  color: white;
}

.start-button {
  height: 100%;
  min-width: 105px;

  padding: 0 16px;

  border: 0;

  border-right:
    1px solid
    rgba(
      0,
      0,
      0,
      0.3
    );

  background:
    linear-gradient(
      #8869aa,
      #62427f
    );

  color: white;

  font-weight: bold;
}

.start-button:hover {
  background:
    linear-gradient(
      #9b79bd,
      #745192
    );
}

.task-items {
  flex: 1;

  height: 100%;

  display: flex;

  overflow: hidden;
}

.task-item {
  min-width: 115px;
  max-width: 155px;

  height: 32px;

  margin: 6px 2px;
  padding: 0 10px;

  display: none;

  overflow: hidden;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.15
    );

  background:
    rgba(
      255,
      255,
      255,
      0.08
    );

  color: white;

  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-item.visible {
  display: block;
}

.task-item:hover {
  background:
    rgba(
      255,
      255,
      255,
      0.17
    );
}

.system-tray {
  min-width: 145px;
  height: 100%;

  display: flex;

  gap: 4px;

  align-items: center;
  justify-content: flex-end;

  padding: 0 8px;

  border-left:
    1px solid
    rgba(
      255,
      255,
      255,
      0.15
    );
}

.tray-button,
.tray-clock {
  height: 26px;

  padding: 0 6px;

  border: 0;

  background:
    transparent;

  color: white;

  font-size: 10px;
}

.tray-button:hover,
.tray-clock:hover {
  background:
    rgba(
      255,
      255,
      255,
      0.12
    );
}

.tray-clock {
  min-width: 66px;

  font-weight: bold;
}


/* =========================================================
   CALENDAR POPUP
   ========================================================= */

.calendar-popup {
  position: fixed;
  z-index: 10020;

  right: 8px;
  bottom:
    calc(
      var(--taskbar-height) +
      6px
    );

  width: 250px;

  display: none;

  border:
    1px solid
    #493755;

  background:
    #f8f4fa;

  box-shadow:
    4px
    -4px
    18px
    rgba(
      0,
      0,
      0,
      0.3
    );
}

.calendar-popup.open {
  display: block;
}

.calendar-header {
  display: flex;

  align-items: center;
  justify-content: space-between;

  padding: 9px 10px;

  background:
    linear-gradient(
      90deg,
      #5e4278,
      #a386bd
    );

  color: white;

  font-size: 11px;
}

.calendar-header button {
  border: 0;

  background: transparent;

  color: white;
}

.calendar-grid {
  display: grid;

  grid-template-columns:
    repeat(
      7,
      1fr
    );

  gap: 2px;

  padding:
    2px
    8px
    8px;
}

.calendar-grid span {
  min-height: 27px;

  display: grid;

  place-items: center;

  font-size: 10px;
}

.calendar-weekdays {
  padding:
    8px
    8px
    2px;

  color:
    #6b5b71;

  font-weight: bold;
}

.calendar-day.today {
  border-radius: 3px;

  background:
    var(--purple-mid);

  color: white;
}

.calendar-day.muted {
  opacity: 0.25;
}


/* =========================================================
   RIGHT-CLICK MENU
   ========================================================= */

.context-menu {
  position: fixed;
  z-index: 10050;

  width: 175px;

  display: none;

  padding: 4px;

  border:
    1px solid
    #5c4c62;

  background:
    #f5f1f7;

  box-shadow:
    3px
    4px
    12px
    rgba(
      0,
      0,
      0,
      0.28
    );
}

.context-menu.open {
  display: block;
}

.context-menu button {
  width: 100%;

  padding: 7px 9px;

  border: 0;

  background:
    transparent;

  color:
    #382f3c;

  text-align: left;

  font-size: 10px;
}

.context-menu button:hover {
  background:
    #d9cae5;
}

.context-separator {
  height: 1px;

  margin: 3px 2px;

  background:
    #c9c0ce;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 700px) {

  .desktop-icons {
    width: 180px;

    grid-template-columns:
      repeat(
        2,
        75px
      );

    gap:
      13px
      5px;
  }

  .desktop-icon {
    width: 75px;
  }

  .status-widget {
    display: none;
  }

  .wallpaper-title {
    top: auto;

    right: 15px;
    bottom: 85px;
  }

  .wallpaper-title .big {
    font-size: 55px;
  }

  .wallpaper-title .small {
    font-size: 8px;
  }

  .archive-content {
    grid-template-columns:
      1fr;
  }

  .archive-sidebar {
    display: none;
  }

  .window {
    top:
      10px
      !important;

    left:
      10px
      !important;

    width:
      calc(
        100vw - 20px
      )
      !important;

    max-height:
      calc(
        100vh - 65px
      );
  }

  .window.maximized {
    height:
      calc(
        100vh -
        var(--taskbar-height) -
        10px
      )
      !important;
  }

  .task-items {
    display: none;
  }

  .system-tray {
    min-width: 110px;
  }

  #startMenu {
    width:
      min(
        360px,
        95vw
      );
  }

  .drive-grid,
  .archive-placeholder-grid,
  .theme-options,
  .wallpaper-options,
  .browser-links {
    grid-template-columns:
      1fr;
  }

  .messenger-app {
    grid-template-columns:
      110px 1fr;
  }

  .wallpaper-fit-row {
    align-items: flex-start;

    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    transition:
      none
      !important;

    animation:
      none
      !important;

    scroll-behavior:
      auto
      !important;
  }
}


/* =========================================================
   ENHANCED DESKTOP BEHAVIOR
   ========================================================= */

.window {
  display: none;
  flex-direction: column;
  min-height: 180px;
  max-width: calc(100vw - 8px);
  max-height: calc(100vh - var(--taskbar-height) - 8px);
  overflow: hidden;
  resize: both;
}

.window.active { display: flex; }
.window.maximized { resize: none; }

.window-body {
  flex: 1;
  min-height: 0;
}

/* DRAGGABLE ICONS */
.desktop-icons {
  inset: 0;
  width: auto;
  height: auto;
  display: block;
  pointer-events: none;
}

.desktop-icon {
  position: absolute;
  width: 86px;
  pointer-events: auto;
  touch-action: none;
}

.desktop-icon.dragging {
  z-index: 90;
  background: rgba(105,78,139,.38);
  border-color: rgba(255,255,255,.45);
}

.actual-icon {
  user-select: none;
  -webkit-user-drag: none;
}

/* MINI NOW PLAYING */
.mini-now-playing {
  position: absolute;
  z-index: 6;
  right: 270px;
  bottom: 22px;
  width: 235px;
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid #564462;
  background: rgba(242,237,246,.94);
  box-shadow: 4px 5px 16px rgba(0,0,0,.22);
  color: #382d3d;
  text-align: left;
}

.mini-player-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: linear-gradient(#8d70ae,#513764);
  color: white;
  font-size: 17px;
}

.mini-player-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.mini-player-copy small {
  color: #8a7a91;
  font: 8px "Courier New", monospace;
  letter-spacing: 1px;
}

.mini-player-copy strong { margin: 1px 0; font-size: 11px; }

.mini-player-copy span {
  overflow: hidden;
  color: #6e6074;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-player-eq {
  height: 25px;
  display: flex;
  gap: 2px;
  align-items: end;
  justify-content: center;
}

.mini-player-eq i {
  width: 3px;
  display: block;
  background: #8d6ca8;
  animation: miniEq .9s ease-in-out infinite alternate;
}

.mini-player-eq i:nth-child(1){height:10px}
.mini-player-eq i:nth-child(2){height:19px;animation-delay:-.3s}
.mini-player-eq i:nth-child(3){height:14px;animation-delay:-.6s}
.mini-player-eq i:nth-child(4){height:22px;animation-delay:-.15s}
@keyframes miniEq { from{transform:scaleY(.45)} to{transform:scaleY(1)} }

/* LOCK SCREEN */
#lockScreen {
  position: fixed;
  inset: 0;
  z-index: 100100;
  display: none;
  place-items: center;
  background:
    linear-gradient(rgba(25,12,37,.48),rgba(25,12,37,.62)),
    var(--wallpaper-image);
  background-position: center;
  background-size: cover;
  color: white;
  backdrop-filter: blur(5px);
}

#lockScreen.active { display: grid; }

.lock-card {
  min-width: 300px;
  padding: 32px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(37,21,49,.78);
  box-shadow: 0 18px 60px rgba(0,0,0,.40);
  text-align: center;
}

.lock-user-icon {
  width:72px;height:72px;margin:0 auto 14px;display:grid;place-items:center;
  border:2px solid rgba(255,255,255,.55);
  background:linear-gradient(#d5c2e5,#80609b);
  font-size:31px;
}

.lock-time { font: 42px "Courier New", monospace; }
.lock-date { margin-top:2px;color:#dfd3e7;font-size:10px; }
.lock-card h1 { margin:15px 0 3px;font:28px Georgia,serif; }
.lock-card p { margin:0 0 17px;color:#d6c8df;font-size:10px; }

#unlockButton {
  padding:9px 15px;border:1px solid #c9b4db;background:#765897;color:white;
  font-size:10px;letter-spacing:1px;
}

/* SCREENSAVER */
#screensaver {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  overflow: hidden;
  background: radial-gradient(circle at center,#261632,#0c0810 72%);
  color:white;
  cursor:none;
}

#screensaver.active { display:block; }

.screensaver-orbit {
  position:absolute;top:28%;left:31%;min-width:220px;padding:18px 24px;
  border:1px solid rgba(219,198,234,.35);
  background:rgba(70,43,89,.34);
  box-shadow:0 0 42px rgba(170,126,209,.22);
  animation:screensaverFloat 12s ease-in-out infinite alternate;
}

.screensaver-logo { font:24px Georgia,serif; }
.screensaver-time { margin-top:5px;color:#d8c4e8;font:20px "Courier New",monospace; }
.screensaver-subtitle { margin-top:7px;color:#9f8cad;font:9px "Courier New",monospace;letter-spacing:2px; }

.screensaver-hint {
  position:absolute;right:18px;bottom:18px;color:rgba(255,255,255,.30);
  font:9px "Courier New",monospace;
}

@keyframes screensaverFloat {
  0%{transform:translate(-10vw,-10vh)}
  33%{transform:translate(33vw,12vh)}
  66%{transform:translate(17vw,40vh)}
  100%{transform:translate(-17vw,28vh)}
}

/* BTS MEMBERS */
.member-folder-icon {
  display:grid;place-items:center;color:#5f482c;font:bold 18px Georgia,serif;
}

.archive-members h2 { margin:5px 0 4px;color:#4b335f;font:28px Georgia,serif; }
.archive-members-intro { margin:0 0 18px;color:#726577;font-size:10px; }

.member-folder-grid {
  display:grid;grid-template-columns:repeat(auto-fill,minmax(95px,1fr));gap:18px;
}

.member-folder {
  padding:9px;border:1px solid transparent;text-align:center;
}

.member-folder:hover { border-color:#c7b6d9;background:#eee6f5; }
.member-folder span { font-size:10px; }

/* MULTI-ENTRY DIARY */
.diary-window-body,.messenger-window-body { overflow:hidden; }

.diary-app {
  height:100%;display:grid;grid-template-columns:185px 1fr;min-height:430px;background:#fffdf6;
}

.diary-sidebar {
  min-width:0;padding:10px;border-right:1px solid #d1c5d7;
  background:linear-gradient(#eee7f3,#faf7fb);
}

.diary-new-button {
  width:100%;padding:8px;border:1px solid #bba9c8;background:#75568e;color:white;font-size:10px;
}

.diary-search {
  width:100%;margin:8px 0;padding:7px;border:1px solid #cfc4d6;font-size:10px;
}

.diary-entry-list { max-height:360px;overflow:auto; }

.diary-empty { padding:12px;color:#8c7f91;font-size:9px;text-align:center; }

.diary-entry-button {
  width:100%;display:block;margin-bottom:4px;padding:8px;border:1px solid transparent;
  background:transparent;color:#4c4051;text-align:left;
}

.diary-entry-button:hover,.diary-entry-button.active {
  border-color:#c9b8d4;background:#ddd0e7;
}

.diary-entry-button strong,.diary-entry-button small { display:block; }
.diary-entry-button strong { overflow:hidden;font-size:10px;text-overflow:ellipsis;white-space:nowrap; }
.diary-entry-button small { margin-top:3px;color:#7e7084;font-size:8px; }

.diary-editor {
  min-width:0;display:flex;flex-direction:column;padding:14px;background:#fffdf6;
}

.diary-editor-toolbar { display:flex;gap:8px;margin-bottom:8px; }

.diary-editor-toolbar input,.diary-editor-toolbar select {
  padding:6px;border:1px solid #cec2d3;background:white;font-size:10px;
}

.diary-title-input {
  width:100%;margin-bottom:8px;padding:8px;border:0;border-bottom:1px solid #d6ccd9;
  background:transparent;color:#413647;font:bold 18px Georgia,serif;
}

#diaryText {
  flex:1;width:100%;min-height:260px;resize:none;padding:14px;border:1px solid #d2c8d6;
  background:#fffdf3;color:#342d38;font:12px/1.65 "Courier New",monospace;
}

.diary-actions { display:flex;gap:7px;align-items:center;margin-top:9px; }
.diary-actions button { padding:6px 9px;font-size:9px; }
#diarySaveStatus { margin-left:auto;color:#8a7d8e;font-size:8px; }

/* RICH MESSENGER */
.messenger-profile-bar {
  display:grid;grid-template-columns:50px 1fr auto;gap:10px;align-items:center;
  padding:10px;border-bottom:1px solid #cfc5d5;background:linear-gradient(#f8f4fa,#e9e0ef);
}

.buddy-avatar.large { width:46px;height:46px; }

.messenger-profile-fields {
  min-width:0;display:grid;grid-template-columns:auto 95px;gap:5px 8px;align-items:center;
}

.messenger-profile-fields strong { font-size:11px; }
#messengerStatus { padding:4px;font-size:9px; }

#messengerPersonalMessage {
  grid-column:1/-1;width:100%;padding:5px;border:1px solid #c7bccd;font-size:9px;
}

.spotify-status-toggle { max-width:120px;color:#6d6072;font-size:8px;line-height:1.35; }

.messenger-app { height:calc(100% - 67px);min-height:330px; }
.chat-log { min-height:0; }

.typing-indicator {
  padding:4px 10px;border-top:1px solid #eee8f1;color:#8a7c90;background:#faf7fb;
  font-size:8px;font-style:italic;
}

.status-away { color:#b38c35!important; }
.status-busy { color:#b65166!important; }

/* EXTRA CONTROL PANEL */
.reset-layout-button {
  margin-top:15px;padding:7px 10px;border:1px solid #c2b3cd;background:#f1eaf5;
  color:#57465f;font-size:9px;
}

@media(max-width:700px){
  .desktop-icons{position:absolute;inset:0}
  .desktop-icon{width:75px}
  .mini-now-playing{right:10px;bottom:65px;width:190px}
  .diary-app{grid-template-columns:120px 1fr}
  .messenger-profile-bar{grid-template-columns:46px 1fr}
  .spotify-status-toggle{grid-column:1/-1;max-width:none}
  .screensaver-orbit{top:35%;left:20%}
}


/* =========================================================
   FEATURE PACK — PROFILE SWITCHER
   ========================================================= */

#profileSwitcher {
  position: fixed;
  inset: 0;
  z-index: 100200;

  display: none;

  place-items: center;

  background:
    radial-gradient(
      circle at center,
      rgba(92, 64, 119, 0.96),
      rgba(25, 15, 34, 0.98)
    );

  color: white;
}

#profileSwitcher.active {
  display: grid;
}

.profile-switcher-panel {
  width:
    min(
      660px,
      calc(
        100vw - 32px
      )
    );

  padding: 28px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.24
    );

  background:
    rgba(
      39,
      25,
      51,
      0.82
    );

  box-shadow:
    0
    20px
    70px
    rgba(
      0,
      0,
      0,
      0.42
    );

  text-align: center;
}

.profile-switcher-brand {
  color:
    #cbb7db;

  font:
    10px
    "Courier New",
    monospace;

  letter-spacing: 4px;
}

.profile-switcher-panel h1 {
  margin:
    10px
    0
    4px;

  font:
    30px
    Georgia,
    serif;
}

.profile-switcher-panel > p {
  margin:
    0
    auto
    22px;

  max-width: 480px;

  color:
    #d2c5dc;

  font-size: 10px;
  line-height: 1.5;
}

.profile-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      1fr
    );

  gap: 14px;
}

.profile-card {
  padding: 18px 12px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.16
    );

  background:
    rgba(
      255,
      255,
      255,
      0.07
    );

  color: white;
}

.profile-card:hover {
  border-color:
    #d4bce7;

  background:
    rgba(
      202,
      177,
      223,
      0.14
    );
}

.profile-avatar {
  width: 68px;
  height: 68px;

  margin:
    0
    auto
    9px;

  display: grid;

  place-items: center;

  border:
    2px solid
    rgba(
      255,
      255,
      255,
      0.55
    );

  font:
    28px
    Georgia,
    serif;
}

.precious-avatar {
  background:
    linear-gradient(
      #d9c5e8,
      #8463a0
    );
}

.army-avatar {
  background:
    linear-gradient(
      #4b375e,
      #18121f
    );

  color:
    #d9c5e8;
}

.guest-avatar {
  background:
    linear-gradient(
      #e8c6d8,
      #a26689
    );
}

.profile-card strong,
.profile-card small {
  display: block;
}

.profile-card strong {
  font-size: 12px;
}

.profile-card small {
  margin-top: 4px;

  color:
    #cdbed6;

  font-size: 9px;
}

.profile-switcher-close {
  margin-top: 18px;
  padding: 7px 18px;

  border:
    1px solid
    #9d89ad;

  background:
    transparent;

  color:
    #d8cde0;
}

.profile-manager {
  min-height: 310px;

  padding: 40px;

  background: white;

  text-align: center;
}

.profile-manager > img {
  width: 72px;

  image-rendering: pixelated;
}

.profile-manager h2 {
  margin:
    13px
    0
    6px;

  color:
    #543d69;

  font:
    25px
    Georgia,
    serif;
}

.profile-manager p {
  max-width: 410px;

  margin:
    0
    auto
    20px;

  color:
    #74667b;

  font-size: 10px;
  line-height: 1.5;
}

.profile-manager button {
  padding: 8px 16px;
}

.profile-tray {
  max-width: 74px;

  overflow: hidden;

  text-overflow: ellipsis;
}


/* =========================================================
   DAILY BTS CARD
   ========================================================= */

.daily-bts-widget {
  position: absolute;
  z-index: 6;

  top: 22px;
  right: 22px;

  width: 225px;

  display: grid;

  grid-template-columns:
    66px 1fr;

  gap: 9px;

  align-items: center;

  padding: 7px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.32
    );

  background:
    rgba(
      37,
      23,
      48,
      0.78
    );

  box-shadow:
    3px
    5px
    17px
    rgba(
      0,
      0,
      0,
      0.26
    );

  color: white;

  text-align: left;
}

.daily-bts-widget img {
  width: 66px;
  height: 52px;

  object-fit: cover;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.35
    );
}

.daily-bts-widget-copy {
  min-width: 0;

  display: flex;

  flex-direction: column;
}

.daily-bts-widget-copy small {
  color:
    #c9b6d8;

  font:
    7px
    "Courier New",
    monospace;

  letter-spacing: 0.8px;
}

.daily-bts-widget-copy strong {
  margin:
    2px
    0;

  font-size: 12px;
}

.daily-bts-widget-copy span {
  overflow: hidden;

  color:
    #e2d7e9;

  font-size: 8px;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.daily-card-app {
  display: grid;

  grid-template-columns:
    220px 1fr;

  min-height: 350px;

  background: white;
}

.daily-card-image {
  position: relative;

  overflow: hidden;

  background:
    #211727;
}

.daily-card-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  filter:
    brightness(
      0.82
    );
}

.daily-card-member {
  position: absolute;

  right: 12px;
  bottom: 12px;
  left: 12px;

  padding: 10px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.28
    );

  background:
    rgba(
      30,
      18,
      38,
      0.72
    );

  color: white;

  text-align: center;

  font:
    26px
    Georgia,
    serif;
}

.daily-card-copy {
  padding: 28px;
}

.daily-card-copy small {
  color:
    #887691;

  font:
    9px
    "Courier New",
    monospace;
}

.daily-card-copy h2 {
  margin:
    8px
    0
    10px;

  color:
    #4d3860;

  font:
    31px
    Georgia,
    serif;
}

.daily-card-copy p {
  color:
    #5f5364;

  font-size: 12px;
  line-height: 1.7;
}

.daily-card-note {
  margin:
    18px
    0;

  padding: 10px;

  border:
    1px dashed
    #c4b1d1;

  background:
    #f8f3fb;

  color:
    #7a6a80;

  font-size: 9px;
  line-height: 1.5;
}


/* =========================================================
   SNAKE
   ========================================================= */

.snake-app {
  min-height: 430px;

  padding: 14px;

  background:
    linear-gradient(
      #211925,
      #110d14
    );

  color: white;
}

.snake-hud {
  width: 320px;

  margin:
    0
    auto
    9px;

  display: flex;

  gap: 12px;

  align-items: center;

  color:
    #d9cbe3;

  font:
    9px
    "Courier New",
    monospace;
}

.snake-hud label {
  margin-left: auto;
}

.snake-hud select {
  margin-left: 4px;

  font-size: 9px;
}

#snakeCanvas {
  width: 320px;
  height: 320px;

  display: block;

  margin: auto;

  border:
    3px inset
    #72647a;

  background:
    #0c0b0f;

  image-rendering:
    pixelated;
}

.snake-controls {
  width: 320px;

  margin:
    10px
    auto
    0;

  display: flex;

  gap: 8px;

  align-items: center;

  color:
    #9d8fa3;

  font-size: 8px;
}

.snake-controls button {
  padding: 6px 9px;

  white-space: nowrap;
}

.snake-mobile-controls {
  display: none;

  margin-top: 12px;

  text-align: center;
}

.snake-mobile-controls button {
  width: 44px;
  height: 38px;

  margin: 2px;
}


/* =========================================================
   QUOTE BOARD
   ========================================================= */

.quote-window-body {
  overflow: hidden;
}

.quote-board-app {
  height: 100%;
  min-height: 450px;

  display: flex;

  flex-direction: column;

  background:
    #c8af8b;

  background-image:
    radial-gradient(
      rgba(
        91,
        65,
        44,
        0.12
      )
      1px,
      transparent 1px
    );

  background-size:
    6px 6px;
}

.quote-board-toolbar {
  padding: 10px;

  border-bottom:
    1px solid
    #9c8264;

  background:
    #eee7ef;
}

#quoteText {
  width: 100%;
  min-height: 70px;

  resize: vertical;

  padding: 8px;

  border:
    1px solid
    #c9bdcf;

  font:
    11px/1.5
    "Courier New",
    monospace;
}

.quote-board-fields {
  display: grid;

  grid-template-columns:
    1fr 100px auto auto;

  gap: 6px;

  margin-top: 6px;
}

.quote-board-fields input,
.quote-board-fields select,
.quote-board-fields button {
  min-width: 0;

  padding: 6px;

  font-size: 9px;
}

.quote-board {
  flex: 1;

  display: grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(
        160px,
        1fr
      )
    );

  gap: 14px;

  align-content: start;

  padding: 18px;

  overflow: auto;
}

.quote-empty {
  grid-column:
    1 / -1;

  padding: 32px;

  border:
    1px dashed
    rgba(
      75,
      51,
      36,
      0.45
    );

  background:
    rgba(
      255,
      255,
      255,
      0.30
    );

  color:
    #604c3e;

  text-align: center;

  font-size: 10px;
}

.quote-card {
  position: relative;

  min-height: 135px;

  padding:
    22px
    14px
    16px;

  box-shadow:
    3px
    5px
    10px
    rgba(
      70,
      48,
      33,
      0.22
    );

  transform:
    rotate(
      -1deg
    );
}

.quote-card:nth-child(even) {
  transform:
    rotate(
      1.4deg
    );
}

.quote-card.lavender {
  background:
    #e2d3ef;
}

.quote-card.pink {
  background:
    #f3cfdf;
}

.quote-card.cream {
  background:
    #fff2c9;
}

.quote-card.midnight {
  background:
    #382f42;

  color: white;
}

.quote-pin {
  position: absolute;

  top: 7px;
  left: 50%;

  transform:
    translateX(
      -50%
    );

  color:
    #ad536a;
}

.quote-card blockquote {
  margin: 0;

  font:
    13px/1.5
    Georgia,
    serif;
}

.quote-source {
  display: block;

  margin-top: 10px;

  opacity: 0.67;

  font:
    8px
    "Courier New",
    monospace;
}

.quote-delete {
  position: absolute;

  top: 5px;
  right: 5px;

  width: 20px;
  height: 20px;

  border: 0;

  background:
    transparent;

  color: inherit;

  opacity: 0.55;
}


/* =========================================================
   PHOTO BOOTH
   ========================================================= */

.photo-booth-app {
  min-height: 455px;

  padding: 14px;

  background:
    linear-gradient(
      #242028,
      #121015
    );

  color: white;
}

.photo-booth-stage {
  position: relative;

  width:
    min(
      620px,
      100%
    );

  aspect-ratio:
    4 / 3;

  margin: auto;

  overflow: hidden;

  border:
    4px inset
    #766a7d;

  background:
    #09080b;
}

#photoBoothVideo,
#photoBoothPreview {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}

#photoBoothVideo.mirrored {
  transform:
    scaleX(
      -1
    );
}

.photo-booth-placeholder {
  position: absolute;
  inset: 0;

  display: grid;

  place-items: center;

  align-content: center;

  gap: 8px;

  color:
    #a89aad;

  text-align: center;
}

.photo-booth-placeholder img {
  width: 70px;

  opacity: 0.7;

  image-rendering:
    pixelated;
}

.photo-booth-placeholder strong {
  color:
    #d4c7da;

  font-size: 12px;
}

.photo-booth-placeholder span {
  font-size: 9px;
}

.photo-booth-controls {
  display: flex;

  gap: 7px;

  justify-content: center;

  margin-top: 12px;

  flex-wrap: wrap;
}

.photo-booth-controls button {
  padding: 7px 10px;

  font-size: 9px;
}

.photo-booth-status {
  margin:
    10px
    auto
    0;

  max-width: 600px;

  color:
    #998c9e;

  text-align: center;

  font-size: 8px;
  line-height: 1.5;
}


/* =========================================================
   SECRET VAULT / EASTER EGG
   ========================================================= */

.secret-titlebar {
  background:
    linear-gradient(
      90deg,
      #1b1320,
      #5d3e73,
      #b58ad0
    );
}

.secret-vault {
  min-height: 360px;

  padding: 34px;

  background:
    radial-gradient(
      circle at center,
      #3a2447,
      #100b13
    );

  color: white;

  text-align: center;
}

.secret-lock {
  color:
    #e4c47b;

  font:
    28px
    Georgia,
    serif;

  letter-spacing: 8px;
}

.secret-vault h2 {
  margin:
    12px
    0
    6px;

  font:
    30px
    Georgia,
    serif;
}

.secret-vault > p {
  color:
    #d1c2da;

  font-size: 10px;
}

.secret-terminal {
  max-width: 420px;

  margin:
    22px
    auto;

  padding: 14px;

  border:
    1px solid
    #695271;

  background:
    #0d0b0f;

  color:
    #c8e6be;

  text-align: left;

  font:
    10px/1.6
    "Courier New",
    monospace;

  white-space:
    pre-line;
}

.secret-actions {
  display: flex;

  gap: 7px;

  justify-content: center;

  flex-wrap: wrap;
}

.secret-actions button {
  padding: 7px 10px;

  font-size: 9px;
}

.secret-message {
  margin-top: 20px;

  color:
    #d9c3e8;

  font:
    italic 12px
    Georgia,
    serif;
}

body.secret-party-mode #desktop {
  animation:
    secretHue
    7s
    linear
    infinite;
}

body.secret-party-mode .star {
  animation:
    secretTwinkle
    0.8s
    ease-in-out
    infinite
    alternate;
}

@keyframes secretHue {
  from {
    filter:
      hue-rotate(
        0deg
      );
  }

  to {
    filter:
      hue-rotate(
        360deg
      );
  }
}

@keyframes secretTwinkle {
  from {
    opacity:
      0.3;

    transform:
      scale(
        0.8
      );
  }

  to {
    opacity:
      1;

    transform:
      scale(
        1.4
      );
  }
}


/* =========================================================
   RESPONSIVE FEATURE PACK
   ========================================================= */

@media (max-width: 700px) {

  .profile-grid {
    grid-template-columns:
      1fr;
  }

  .daily-bts-widget {
    top: auto;
    right: 10px;
    bottom: 265px;

    width: 185px;
  }

  .daily-card-app {
    grid-template-columns:
      1fr;
  }

  .daily-card-image {
    height: 200px;
  }

  #snakeCanvas {
    width:
      min(
        320px,
        80vw
      );

    height:
      auto;
  }

  .snake-hud,
  .snake-controls {
    width:
      min(
        320px,
        80vw
      );
  }

  .snake-mobile-controls {
    display: block;
  }

  .quote-board-fields {
    grid-template-columns:
      1fr 95px;
  }

  .photo-booth-controls {
    justify-content:
      flex-start;
  }
}


/* =========================================================
   FINAL ROUND — CONTROL PANEL
   ========================================================= */

.desktop-layout-options,
.slideshow-options {
  display: flex;

  gap: 14px;

  flex-wrap: wrap;

  align-items: center;

  padding: 10px;

  border:
    1px solid
    #d7ccdD;

  background:
    #faf7fb;

  color:
    #5e5064;

  font-size: 10px;
}

.slideshow-options select {
  margin-left: 5px;

  font-size: 10px;
}

.backup-panel {
  padding: 12px;

  border:
    1px solid
    #d1c4d8;

  background:
    #f8f4fa;
}

.backup-panel p {
  margin:
    0
    0
    10px;

  color:
    #6e6074;

  font-size: 9px;
  line-height: 1.5;
}

.backup-actions {
  display: flex;

  gap: 7px;

  flex-wrap: wrap;
}

.backup-actions button {
  padding: 7px 10px;

  font-size: 9px;
}

.backup-status {
  margin-top: 9px;

  color:
    #7e7084;

  font:
    8px
    "Courier New",
    monospace;
}


/* =========================================================
   FINAL ROUND — MESSENGER TIMESTAMPS / NUDGE
   ========================================================= */

.chat-heading {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 8px;
}

.nudge-button {
  padding: 4px 8px;

  border:
    1px solid
    #c5b7ce;

  background:
    #eee6f3;

  color:
    #5b4668;

  font-size: 8px;
}

.nudge-button:hover {
  background:
    #dfd1e8;
}

.chat-message {
  display: grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    auto;

  gap: 8px;

  align-items: start;

  padding:
    2px
    0;
}

.chat-message-body {
  min-width: 0;
}

.chat-time {
  color:
    #9c8fa2;

  font:
    8px
    "Courier New",
    monospace;

  white-space: nowrap;
}

#messengerWindow.nudging {
  animation:
    messengerNudge
    0.08s
    linear
    7;
}

@keyframes messengerNudge {

  0% {
    transform:
      translate(
        0,
        0
      );
  }

  25% {
    transform:
      translate(
        -7px,
        2px
      );
  }

  50% {
    transform:
      translate(
        7px,
        -2px
      );
  }

  75% {
    transform:
      translate(
        -5px,
        -1px
      );
  }

  100% {
    transform:
      translate(
        0,
        0
      );
  }
}


/* =========================================================
   FINAL ROUND — TASK SWITCHER
   ========================================================= */

.alt-tab-switcher {
  position: fixed;
  inset: 0;
  z-index: 100300;

  display: none;

  place-items: center;

  pointer-events: none;

  background:
    rgba(
      19,
      11,
      25,
      0.18
    );
}

.alt-tab-switcher.active {
  display: grid;
}

.alt-tab-panel {
  width:
    min(
      650px,
      calc(
        100vw - 40px
      )
    );

  padding: 15px;

  border:
    2px solid
    #bca8ca;

  background:
    rgba(
      40,
      27,
      50,
      0.96
    );

  box-shadow:
    0
    18px
    55px
    rgba(
      0,
      0,
      0,
      0.42
    );

  color: white;

  pointer-events: auto;
}

.alt-tab-title {
  margin-bottom: 11px;

  color:
    #d9c9e4;

  font:
    9px
    "Courier New",
    monospace;

  letter-spacing: 2px;
}

.alt-tab-list {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        115px,
        1fr
      )
    );

  gap: 8px;
}

.alt-tab-item {
  min-height: 86px;

  display: flex;

  flex-direction: column;

  gap: 7px;

  align-items: center;
  justify-content: center;

  padding: 9px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.14
    );

  background:
    rgba(
      255,
      255,
      255,
      0.06
    );

  color:
    #eee5f3;

  text-align: center;

  font-size: 9px;
}

.alt-tab-item.selected,
.alt-tab-item:hover {
  border-color:
    #e0c9ef;

  background:
    rgba(
      185,
      148,
      213,
      0.22
    );
}

.alt-tab-icon {
  width: 42px;
  height: 42px;

  display: grid;

  place-items: center;

  border:
    1px solid
    #a68bb8;

  background:
    linear-gradient(
      #8b6ea4,
      #4b3858
    );

  color: white;

  font:
    20px
    Georgia,
    serif;
}

.alt-tab-hint {
  margin-top: 10px;

  color:
    #9f91a7;

  text-align: center;

  font:
    8px
    "Courier New",
    monospace;
}


/* =========================================================
   FINAL ROUND — SHOW DESKTOP
   ========================================================= */

.show-desktop-button {
  width: 12px;
  height: 100%;

  padding: 0;

  border: 0;

  border-left:
    1px solid
    rgba(
      255,
      255,
      255,
      0.25
    );

  background:
    rgba(
      255,
      255,
      255,
      0.06
    );
}

.show-desktop-button:hover {
  background:
    rgba(
      255,
      255,
      255,
      0.22
    );
}


/* =========================================================
   FINAL ROUND — PROFILE-SPECIFIC POLISH
   ========================================================= */

body[data-profile="army"] .wallpaper-title .small::after {
  content:
    " / ARMY PROFILE";
}

body[data-profile="guest"] .wallpaper-title .small::after {
  content:
    " / GUEST";
}


/* =========================================================
   FINAL ROUND — RESPONSIVE
   ========================================================= */

@media (max-width: 700px) {

  .desktop-layout-options,
  .slideshow-options {
    align-items: flex-start;

    flex-direction: column;
  }

  .alt-tab-list {
    grid-template-columns:
      repeat(
        2,
        1fr
      );
  }

  .show-desktop-button {
    width: 9px;
  }
}


/* =========================================================
   FINALIZATION — CONFIGURED CONTENT
   ========================================================= */

.profile-hidden {
  display:
    none
    !important;
}

.favorite-content {
  white-space:
    pre-line;
}

.start-footer {
  display: flex;

  gap: 8px;

  align-items: center;
  justify-content: space-between;
}

.start-footer small {
  color:
    #786a7f;

  font-size: 7px;
}


/* =========================================================
   FINALIZATION — LAPTOP / TABLET
   ========================================================= */

@media (max-width: 1100px) {

  .daily-bts-widget {
    width: 195px;
  }

  .mini-now-playing {
    right: 245px;

    width: 205px;
  }

  .status-widget {
    width: 210px;
  }

  .wallpaper-title .big {
    font-size:
      clamp(
        48px,
        9vw,
        92px
      );
  }
}

@media (max-width: 900px) {

  .mini-now-playing {
    display: none;
  }

  .daily-bts-widget {
    right: 16px;

    width: 190px;
  }

  .status-widget {
    right: 16px;

    width: 205px;
  }

  .wallpaper-title {
    opacity: 0.65;
  }
}


/* =========================================================
   FINALIZATION — MOBILE
   ========================================================= */

@media (max-width: 700px) {

  #desktop {
    overflow-y: auto;
    overflow-x: hidden;

    padding-bottom: 120px;
  }

  .desktop-icons {
    position: relative;

    inset: auto;

    top: 12px;
    left: 12px;

    width: 172px;
    height: auto;

    display: grid;

    grid-template-columns:
      repeat(
        2,
        78px
      );

    gap:
      11px
      6px;

    pointer-events: auto;
  }

  .desktop-icon {
    position: relative;

    top:
      auto
      !important;

    left:
      auto
      !important;

    width: 78px;

    min-height: 68px;
  }

  .daily-bts-widget,
  .mini-now-playing,
  .status-widget {
    display: none;
  }

  .wallpaper-title {
    position: fixed;

    top: auto;
    right: 12px;
    bottom: 58px;

    max-width: 55vw;

    opacity: 0.45;
  }

  .wallpaper-title .big {
    font-size: 44px;
  }

  .wallpaper-title .small {
    display: none;
  }

  .visitor-counter {
    position: fixed;

    left: 8px;
    bottom: 51px;

    z-index: 7;
  }

  .window {
    top:
      6px
      !important;

    left:
      6px
      !important;

    width:
      calc(
        100vw - 12px
      )
      !important;

    height:
      calc(
        100vh -
        var(--taskbar-height) -
        12px
      )
      !important;

    min-width: 0;

    resize: none;
  }

  .window-body {
    max-height: none;
  }

  .window.maximized {
    top:
      6px
      !important;

    left:
      6px
      !important;

    width:
      calc(
        100vw - 12px
      )
      !important;

    height:
      calc(
        100vh -
        var(--taskbar-height) -
        12px
      )
      !important;
  }

  .drive-grid,
  .archive-placeholder-grid,
  .theme-options,
  .wallpaper-options,
  .browser-links,
  .daily-card-app {
    grid-template-columns:
      1fr;
  }

  .archive-content {
    grid-template-columns:
      1fr;
  }

  .archive-sidebar {
    display: none;
  }

  .messenger-app {
    grid-template-columns:
      105px
      minmax(
        0,
        1fr
      );
  }

  .diary-app {
    grid-template-columns:
      115px
      minmax(
        0,
        1fr
      );
  }

  .quote-board-fields {
    grid-template-columns:
      1fr
      95px;
  }

  .photo-booth-stage {
    width: 100%;
  }

  #startMenu {
    width:
      min(
        360px,
        calc(
          100vw - 8px
        )
      );

    max-height:
      calc(
        100vh -
        var(--taskbar-height) -
        6px
      );

    overflow-y: auto;
  }

  .start-content {
    grid-template-columns:
      1fr
      100px;
  }

  .system-tray {
    min-width: auto;

    padding:
      0
      4px;
  }

  #activeProfileBadge {
    display: none;
  }
}

@media (max-width: 460px) {

  .diary-app,
  .messenger-app {
    grid-template-columns:
      1fr;
  }

  .diary-sidebar,
  .buddy-list {
    max-height: 130px;

    overflow-y: auto;

    border-right: 0;

    border-bottom:
      1px solid
      #d1c5d7;
  }

  .diary-entry-list {
    max-height: 72px;
  }

  .messenger-profile-bar {
    grid-template-columns:
      40px
      1fr;
  }

  .spotify-status-toggle {
    grid-column:
      1 / -1;
  }

  .quote-board-fields {
    grid-template-columns:
      1fr;
  }

  .viewer-controls {
    grid-template-columns:
      1fr;
  }

  .snake-hud {
    align-items: flex-start;

    flex-direction: column;
  }
}


/* =========================================================
   PRECIOUS_OS CONTENT MANAGER
   ========================================================= */

.content-manager-launcher {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border: 1px solid #c9bdd0;
  background: linear-gradient(#fbf8fd,#eee7f3);
}

.content-manager-launcher strong,
.content-manager-launcher small {
  display: block;
}

.content-manager-launcher strong {
  color: #54405f;
  font-size: 11px;
}

.content-manager-launcher small {
  margin-top: 3px;
  max-width: 490px;
  color: #827487;
  font-size: 8px;
  line-height: 1.45;
}

.content-manager-launcher button {
  flex: 0 0 auto;
  padding: 7px 11px;
}

.content-manager-window-body {
  height: 100%;
  overflow: hidden;
}

.content-manager-app {
  height: 100%;
  display: grid;
  grid-template-columns: 176px minmax(0,1fr);
  background: #f5f0f7;
}

.content-manager-sidebar {
  padding: 10px;
  border-right: 1px solid #c8bbcf;
  background: linear-gradient(#e9dff0,#d8cae2);
}

.content-manager-brand {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  padding: 8px 7px 12px;
  border-bottom: 1px solid rgba(85,62,99,.18);
}

.content-manager-brand img {
  width: 38px;
  height: 38px;
  image-rendering: pixelated;
}

.content-manager-brand strong,
.content-manager-brand small {
  display: block;
}

.content-manager-brand strong {
  color: #4e3a5b;
  font-size: 10px;
}

.content-manager-brand small {
  margin-top: 2px;
  color: #85758e;
  font-size: 7px;
}

.cm-tab {
  width: 100%;
  margin-bottom: 5px;
  padding: 8px 9px;
  border: 1px solid transparent;
  background: transparent;
  color: #5c4a66;
  text-align: left;
  font-size: 9px;
}

.cm-tab:hover,
.cm-tab.active {
  border-color: #a996b7;
  background: rgba(255,255,255,.58);
}

.cm-tab.active {
  font-weight: bold;
}

.content-manager-main {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0,1fr) auto;
}

.content-manager-header {
  min-height: 51px;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid #d0c5d6;
  background: #faf7fb;
}

.content-manager-header strong,
.content-manager-header small {
  display: block;
}

.content-manager-header strong {
  color: #4b3857;
  font: 17px Georgia,serif;
}

.content-manager-header small {
  margin-top: 2px;
  color: #84758b;
  font-size: 8px;
}

#cmDirtyState.dirty {
  color: #a25068;
}

#contentEditModeToggle {
  padding: 7px 10px;
  border: 1px solid #a997b4;
  background: #eee7f2;
  color: #5a4665;
  font-size: 9px;
}

#contentEditModeToggle.active {
  border-color: #79608b;
  background: #6a4d80;
  color: white;
}

.content-manager-panel {
  min-height: 0;
  overflow: auto;
  padding: 14px;
}

.cm-intro {
  margin-bottom: 13px;
  padding: 10px;
  border: 1px dashed #c7b8cf;
  background: white;
  color: #74657a;
  font-size: 9px;
  line-height: 1.5;
}

.cm-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 11px;
}

.cm-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: #5f5166;
  font-size: 9px;
  font-weight: bold;
}

.cm-field.wide,
.cm-checkbox.wide {
  grid-column: 1 / -1;
}

.cm-field input,
.cm-field textarea,
.cm-field select,
.cm-selector select {
  width: 100%;
  padding: 7px;
  border: 1px inset #bfb3c5;
  background: white;
  color: #332b37;
  font: 10px Tahoma,Verdana,sans-serif;
}

.cm-field textarea {
  resize: vertical;
  line-height: 1.5;
}

.cm-selector {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 13px;
  color: #5f5166;
  font-size: 9px;
  font-weight: bold;
}

.cm-checkbox {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #5f5166;
  font-size: 9px;
  font-weight: bold;
}

.cm-tools {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
}

.cm-tools section {
  padding: 13px;
  border: 1px solid #cdc2d2;
  background: white;
}

.cm-tools section.danger {
  border-color: #d7b8c0;
  background: #fff9fa;
}

.cm-tools strong {
  color: #503c5d;
  font-size: 11px;
}

.cm-tools p {
  min-height: 55px;
  color: #776a7e;
  font-size: 9px;
  line-height: 1.5;
}

.cm-tools button {
  margin: 3px;
  padding: 7px 9px;
  font-size: 9px;
}

.content-manager-footer {
  min-height: 49px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-top: 1px solid #cfc4d5;
  background: #e9e1ed;
  color: #736679;
  font-size: 8px;
}

.content-manager-footer > div {
  display: flex;
  gap: 7px;
}

.content-manager-footer button {
  padding: 7px 10px;
  font-size: 9px;
}

.content-manager-footer button.primary {
  border-color: #7b618e;
  background: #745889;
  color: white;
}


/* Edit Mode */

body.content-edit-mode::after {
  content: "✎ EDIT MODE — click highlighted content to edit";
  position: fixed;
  z-index: 100450;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(70,47,86,.92);
  color: white;
  box-shadow: 0 4px 15px rgba(0,0,0,.25);
  font: 8px "Courier New",monospace;
  pointer-events: none;
}

body.content-edit-mode [data-edit-section] {
  position: relative;
  outline: 2px dashed rgba(226,173,215,.95);
  outline-offset: 3px;
  cursor: pointer;
}

body.content-edit-mode [data-edit-section]::after {
  content: "✎";
  position: absolute;
  z-index: 4;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1px solid #7c5e8d;
  background: #f3d8ec;
  color: #694b79;
  font-size: 10px;
  pointer-events: none;
}

@media (max-width:700px) {
  .content-manager-app {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0,1fr);
  }

  .content-manager-sidebar {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    padding: 7px;
    border-right: 0;
    border-bottom: 1px solid #c8bbcf;
  }

  .content-manager-brand {
    display: none;
  }

  .cm-tab {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    white-space: nowrap;
  }

  .cm-grid,
  .cm-tools {
    grid-template-columns: 1fr;
  }

  .cm-field.wide,
  .cm-checkbox.wide {
    grid-column: auto;
  }

  .content-manager-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .content-manager-footer > div {
    width: 100%;
  }

  .content-manager-footer button {
    flex: 1;
  }

  body.content-edit-mode::after {
    top: 4px;
    max-width: calc(100vw - 12px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}


/* =========================================================
   PHIA-INSPIRED PURPLE ROOM FEATURES
   ========================================================= */

/* layers */

.sticky-notes-layer,
.desktop-polaroid-layer {
  position: absolute;
  inset: 0;
  z-index: 18;
  pointer-events: none;
}

.desktop-sticky,
.desktop-polaroid {
  pointer-events: auto;
}

.purple-toast-container {
  position: fixed;
  z-index: 100600;
  right: 18px;
  bottom: calc(var(--taskbar-height) + 16px);
  width: min(310px, calc(100vw - 28px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.purple-toast {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr);
  gap: 9px;
  align-items: center;
  padding: 9px 11px;
  border: 1px solid #8f79a1;
  background: linear-gradient(135deg,rgba(249,242,252,.98),rgba(229,211,238,.98));
  box-shadow: 0 8px 24px rgba(31,18,39,.25);
  color: #514058;
  transform: translateX(24px);
  opacity: 0;
  transition: .2s ease;
}

.purple-toast.visible {
  transform: translateX(0);
  opacity: 1;
}

.purple-toast-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #715488;
  color: #fff;
  font-size: 17px;
}

.purple-toast strong,
.purple-toast span {
  display: block;
}

.purple-toast strong {
  font-size: 9px;
  color: #4b3856;
}

.purple-toast span {
  margin-top: 2px;
  font-size: 8px;
  line-height: 1.4;
  color: #75657c;
}


/* sparkle cursor */

.cursor-sparkle {
  position: fixed;
  z-index: 100500;
  pointer-events: none;
  color: #f0bde2;
  text-shadow: 0 0 5px #c997e0;
  font-size: 13px;
  transform: translate(-50%,-50%);
  animation: cursorSparkle .7s ease-out forwards;
}

@keyframes cursorSparkle {
  from {
    opacity: 1;
    transform: translate(-50%,-50%) scale(1);
  }

  to {
    opacity: 0;
    transform: translate(-50%,-80%) scale(.25) rotate(35deg);
  }
}


/* Purple Night Mode */

.night-mode-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  background:
    linear-gradient(
      rgba(14,7,24,.38),
      rgba(7,3,17,.6)
    );
  transition: opacity .3s ease;
}

.night-mode-layer span {
  position: absolute;
  color: rgba(232,211,255,.85);
  text-shadow: 0 0 8px rgba(198,149,255,.9);
  animation: nightTwinkle 2.7s ease-in-out infinite alternate;
}

.night-mode-layer span:nth-child(1){left:9%;top:18%;font-size:15px}
.night-mode-layer span:nth-child(2){left:26%;top:8%;font-size:11px;animation-delay:.4s}
.night-mode-layer span:nth-child(3){left:48%;top:21%;font-size:14px;animation-delay:1s}
.night-mode-layer span:nth-child(4){left:69%;top:11%;font-size:10px;animation-delay:.7s}
.night-mode-layer span:nth-child(5){left:84%;top:29%;font-size:16px;animation-delay:1.4s}
.night-mode-layer span:nth-child(6){left:61%;top:48%;font-size:12px;animation-delay:1.9s}

body.purple-night-mode .night-mode-layer {
  opacity: 1;
}

body.purple-night-mode #desktop {
  filter: saturate(.82) brightness(.8);
}

body.purple-night-mode .window.active,
body.purple-night-mode #taskbar,
body.purple-night-mode #startMenu,
body.purple-night-mode .purple-toast-container {
  filter: none;
}

#nightModeTray.active {
  background: #8a6aa2;
  color: #fff;
}

@keyframes nightTwinkle {
  from {opacity:.35; transform:scale(.8)}
  to {opacity:1; transform:scale(1.15)}
}


/* Control Panel extras */

.purple-extras-panel,
.diary-lock-settings {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 11px;
  border: 1px solid #d0c4d6;
  background: #faf7fb;
  color: #62546a;
  font-size: 9px;
}

.purple-extras-panel label,
.diary-lock-settings label {
  display: flex;
  gap: 6px;
  align-items: center;
}

.diary-lock-settings input[type="password"] {
  width: 110px;
  padding: 5px;
}

.diary-lock-settings small {
  width: 100%;
  color: #8c7f92;
  font-size: 8px;
}


/* Sticky Notes */

.desktop-sticky {
  position: absolute;
  width: 190px;
  min-height: 170px;
  border: 1px solid rgba(75,55,75,.3);
  box-shadow: 6px 9px 18px rgba(32,19,35,.24);
  transform: rotate(-1deg);
}

.desktop-sticky-title {
  height: 27px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 7px;
  border-bottom: 1px solid rgba(91,68,87,.15);
  color: #5a475d;
  font-size: 9px;
  cursor: move;
}

.desktop-sticky-title button {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #715b75;
}

.desktop-sticky textarea {
  width: 100%;
  min-height: 140px;
  padding: 10px;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  color: #4b414b;
  font: 11px/1.5 "Comic Sans MS","Segoe Print",cursive;
}

.sticky-yellow {background:#fff1a8}
.sticky-pink {background:#f6cddd}
.sticky-purple {background:#dfc9ef}
.sticky-blue {background:#cfe4f4}

.sticky-manager {
  padding: 13px;
}

.sticky-manager-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: end;
}

.sticky-manager-toolbar label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #62546b;
  font-size: 8px;
}

.sticky-manager-help {
  color: #84758b;
  font-size: 9px;
  line-height: 1.5;
}

.sticky-manager-list {
  display: grid;
  gap: 5px;
  margin-top: 10px;
}

.sticky-manager-item {
  padding: 7px 9px;
  text-align: left;
  border: 1px solid #d2c5d8;
  background: #faf7fb;
  color: #615269;
  font-size: 9px;
}


/* Desktop Polaroids */

.desktop-polaroid {
  position: absolute;
  width: 150px;
  margin: 0;
  padding: 8px 8px 24px;
  background: #fffdfd;
  border: 1px solid #d8d0d5;
  box-shadow: 5px 7px 16px rgba(28,18,30,.3);
  cursor: move;
}

.desktop-polaroid img {
  width: 100%;
  height: 108px;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.desktop-polaroid figcaption {
  margin-top: 8px;
  color: #5b4d5f;
  text-align: center;
  font: 9px "Segoe Print","Comic Sans MS",cursive;
  pointer-events: none;
}

.desktop-polaroid-delete {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 2;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid #8a748e;
  border-radius: 50%;
  background: #f0d7e9;
  color: #624c6d;
}

.polaroid-manager {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
  padding: 14px;
  color: #615469;
  font-size: 9px;
}

.polaroid-manager label {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.polaroid-manager input,
.polaroid-manager select {
  padding: 6px;
}

.polaroid-manager p {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  color: #897b90;
  line-height: 1.5;
}


/* Purple Scrapbook */

.scrapbook-window-body {
  height: 100%;
  overflow: hidden;
}

.scrapbook-toolbar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: end;
  padding: 8px;
  border-bottom: 1px solid #cfc4d5;
  background: #eee7f2;
}

.scrapbook-toolbar label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #66576e;
  font-size: 7px;
}

.scrapbook-toolbar input,
.scrapbook-toolbar select,
.scrapbook-toolbar button {
  min-height: 26px;
  font-size: 8px;
}

#scrapbookTextInput {
  width: 170px;
}

.scrapbook-board {
  position: relative;
  height: calc(100% - 60px);
  min-height: 430px;
  overflow: hidden;
  background:
    radial-gradient(circle at 18px 18px,rgba(255,255,255,.34) 1px,transparent 2px) 0 0/36px 36px,
    linear-gradient(135deg,#8e70a8,#5d466f);
}

.scrapbook-piece {
  position: absolute;
  cursor: move;
  user-select: none;
}

.scrapbook-piece img {
  display: block;
  pointer-events: none;
}

.scrapbook-photo {
  width: 150px;
  padding: 7px 7px 20px;
  background: #fff;
  box-shadow: 4px 6px 15px rgba(24,14,28,.3);
}

.scrapbook-photo img {
  width: 136px;
  height: 100px;
  object-fit: cover;
}

.scrapbook-sticker img {
  max-width: 115px;
  max-height: 115px;
}

.scrapbook-text {
  width: 150px;
}

.scrapbook-text-card {
  padding: 14px;
  background: #f8dce9;
  border: 1px solid #e2bcd2;
  box-shadow: 3px 5px 12px rgba(31,18,34,.25);
  color: #604e65;
  font: 10px/1.5 "Segoe Print","Comic Sans MS",cursive;
  white-space: pre-wrap;
}

.scrapbook-remove {
  position: absolute;
  z-index: 3;
  top: -9px;
  right: -9px;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #785e84;
  background: #f1d6e9;
  color: #604968;
}


/* Purple Flip Phone */

.phone-window-body {
  min-height: 540px;
  background: linear-gradient(#eee5f1,#cab8d5);
}

.flip-phone-shell {
  width: 290px;
  margin: 10px auto;
  padding: 16px 15px 18px;
  border: 2px solid #695176;
  border-radius: 38px 38px 48px 48px;
  background: linear-gradient(145deg,#d5afd8,#9d78ab);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.18),0 13px 22px rgba(38,23,43,.25);
}

.phone-speaker {
  width: 58px;
  height: 6px;
  margin: 0 auto 12px;
  border-radius: 9px;
  background: #725979;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
}

.phone-screen {
  height: 250px;
  overflow: auto;
  padding: 8px;
  border: 3px inset #aa95b2;
  background: linear-gradient(#f8f0fb,#d7c6e0);
  color: #4d3c56;
  font-size: 9px;
}

.phone-statusbar {
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -2px -2px 8px;
  padding: 4px 6px;
  background: #735586;
  color: white;
  font-size: 8px;
}

.phone-statusbar button {
  border: 0;
  background: transparent;
  color: white;
}

.phone-home-title {
  padding: 13px 5px;
  text-align: center;
  font: 18px Georgia,serif;
}

.phone-home-title small {
  display: block;
  margin-top: 4px;
  color: #806f87;
  font: 8px Tahoma,sans-serif;
}

.phone-app-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 7px;
}

.phone-app-grid button {
  min-height: 54px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  justify-content: center;
  border: 1px solid #b8a4c0;
  background: rgba(255,255,255,.62);
  color: #56425f;
  font-size: 15px;
}

.phone-app-grid button span {
  font-size: 7px;
}

.phone-nav-row {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 5px;
  margin: 12px 0 8px;
}

.phone-nav-row button {
  min-height: 31px;
  border: 1px outset #d9c9df;
  background: #eadbea;
  color: #5e4668;
}

.phone-keypad {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 5px;
}

.phone-keypad span {
  min-height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(91,68,104,.25);
  border-radius: 8px;
  background: rgba(255,255,255,.3);
  color: #5d4965;
  font-size: 7px;
}

.phone-contact-list,
.phone-sound-list {
  display: grid;
  gap: 5px;
}

.phone-contact-list button,
.phone-sound-list button {
  padding: 8px;
  border: 1px solid #baa8c3;
  background: rgba(255,255,255,.65);
  color: #58465f;
  text-align: left;
  font-size: 8px;
}

.phone-message-log {
  height: 150px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
}

.phone-message {
  max-width: 78%;
  padding: 6px 7px;
  border-radius: 9px;
  line-height: 1.35;
}

.phone-message.from-me {
  align-self: flex-end;
  background: #a77db1;
  color: white;
}

.phone-message.from-them {
  align-self: flex-start;
  background: #fff;
  color: #55445d;
}

.phone-empty {
  color: #94859a;
  text-align: center;
  padding: 24px 0;
}

.phone-compose {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px;
  margin-top: 5px;
}

.phone-compose input {
  min-width: 0;
  padding: 5px;
  font-size: 8px;
}


/* Diary lock */

.diary-lock-screen {
  display: grid;
  gap: 9px;
  justify-items: center;
  padding: 22px;
  text-align: center;
}

.diary-lock-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #775a8c;
  color: white;
  font-size: 28px;
}

.diary-lock-screen strong {
  color: #533f60;
}

.diary-lock-screen p,
.diary-lock-screen small {
  color: #85778c;
  font-size: 9px;
}

.diary-lock-screen input {
  width: 160px;
  padding: 8px;
  text-align: center;
}


/* Responsive */

@media (max-width:700px) {
  .desktop-sticky {
    width: 160px;
  }

  .desktop-polaroid {
    width: 130px;
  }

  .desktop-polaroid img {
    height: 90px;
  }

  .scrapbook-toolbar {
    max-height: 110px;
    overflow-y: auto;
  }

  .scrapbook-board {
    height: calc(100% - 110px);
    min-height: 340px;
  }

  .polaroid-manager {
    grid-template-columns: 1fr;
  }

  .polaroid-manager p {
    grid-column: auto;
  }

  .flip-phone-shell {
    width: min(290px,calc(100vw - 42px));
  }

  .purple-extras-panel,
  .diary-lock-settings {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* =========================================================
   DESKTOP STICKERS — ENHANCED LIBRARY
   ========================================================= */

.desktop-sticker-layer {
  position: absolute;
  inset: 0;
  z-index: 17;
  pointer-events: none;
  overflow: hidden;
}

.desktop-sticker-item {
  position: absolute;
  width: 110px;
  min-width: 45px;
  max-width: 240px;
  pointer-events: auto;
  cursor: move;
  transform-origin: center center;
  user-select: none;
  touch-action: none;
}

.desktop-sticker-item > img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 260px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(2px 4px 5px rgba(24,14,28,.24));
}

.desktop-sticker-controls {
  position: absolute;
  top: -30px;
  left: 50%;
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid #866d91;
  background: rgba(244,232,247,.98);
  box-shadow: 0 4px 12px rgba(28,18,32,.22);
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
  white-space: nowrap;
}

.desktop-sticker-item:hover .desktop-sticker-controls,
.desktop-sticker-item:focus-within .desktop-sticker-controls {
  opacity: 1;
  pointer-events: auto;
}

.desktop-sticker-controls button {
  width: 24px;
  height: 22px;
  padding: 0;
  border: 1px outset #cfbdd7;
  background: #eadcf0;
  color: #5e4869;
  font: bold 11px Tahoma,Verdana,sans-serif;
}

.desktop-sticker-window-body {
  height: 100%;
  overflow: hidden;
}

.desktop-sticker-manager {
  height: 100%;
  display: grid;
  grid-template-rows: auto auto minmax(0,1fr) auto auto;
  background: #f6f1f8;
}

.desktop-sticker-manager-top {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid #cfc2d4;
  background: linear-gradient(#fbf8fc,#ece4f0);
}

.desktop-sticker-manager-top strong,
.desktop-sticker-manager-top small {
  display: block;
}

.desktop-sticker-manager-top strong {
  color: #503e59;
  font-size: 11px;
}

.desktop-sticker-manager-top small {
  margin-top: 3px;
  color: #817387;
  font-size: 8px;
}

.desktop-sticker-manager-actions {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}

.desktop-sticker-manager-actions button {
  padding: 7px 9px;
  font-size: 8px;
}

.desktop-sticker-tools {
  padding: 9px 11px;
  border-bottom: 1px solid #d8cddd;
  background: #f3edf6;
}

.desktop-sticker-upload-zone {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) auto;
  gap: 9px;
  align-items: center;
  min-height: 52px;
  padding: 8px 10px;
  border: 1px dashed #aa90b5;
  background: rgba(255,255,255,.6);
  cursor: pointer;
  outline: none;
}

.desktop-sticker-upload-zone:hover,
.desktop-sticker-upload-zone:focus,
.desktop-sticker-upload-zone.dragover {
  border-color: #79598a;
  background: #f0e4f4;
  box-shadow: inset 0 0 0 1px rgba(121,89,138,.12);
}

.desktop-sticker-upload-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid #9d84a9;
  background: #e6d5eb;
  color: #6a4e78;
  font-size: 17px;
}

.desktop-sticker-upload-zone strong,
.desktop-sticker-upload-zone small {
  display: block;
}

.desktop-sticker-upload-zone strong {
  color: #584561;
  font-size: 9px;
}

.desktop-sticker-upload-zone small {
  margin-top: 2px;
  color: #87798d;
  font-size: 7px;
}

.desktop-sticker-upload-zone button {
  padding: 6px 9px;
  font-size: 8px;
}

.desktop-sticker-filterbar {
  display: grid;
  grid-template-columns: minmax(150px,1fr) 130px auto;
  gap: 7px;
  align-items: center;
  margin-top: 8px;
}

.desktop-sticker-filterbar input,
.desktop-sticker-filterbar select {
  min-width: 0;
  padding: 6px;
  font-size: 8px;
}

#desktopStickerCount {
  color: #7d6d84;
  font-size: 8px;
  white-space: nowrap;
}

.desktop-sticker-library {
  min-height: 0;
  overflow: auto;
  padding: 10px;
}

.desktop-sticker-section + .desktop-sticker-section {
  margin-top: 13px;
}

.desktop-sticker-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
  padding-bottom: 5px;
  border-bottom: 1px solid #ddd2e1;
}

.desktop-sticker-section-heading strong {
  color: #57455f;
  font-size: 9px;
}

.desktop-sticker-section-heading small {
  color: #918497;
  font-size: 7px;
}

.desktop-sticker-choices {
  display: grid;
  grid-template-columns: repeat(6,minmax(76px,1fr));
  gap: 8px;
  align-content: start;
}

.desktop-sticker-choice {
  position: relative;
  min-height: 88px;
  display: grid;
  place-items: center;
  padding: 7px;
  border: 1px solid #d0c3d6;
  background:
    linear-gradient(45deg,#eee8f0 25%,transparent 25%) 0 0/14px 14px,
    linear-gradient(-45deg,#eee8f0 25%,transparent 25%) 0 7px/14px 14px,
    linear-gradient(45deg,transparent 75%,#eee8f0 75%) 7px -7px/14px 14px,
    linear-gradient(-45deg,transparent 75%,#eee8f0 75%) -7px 0/14px 14px,
    #faf8fb;
  overflow: hidden;
}

.desktop-sticker-choice:hover {
  border-color: #a88fb4;
  background-color: #f0e7f3;
}

.desktop-sticker-choice.selected {
  outline: 2px solid #8e69a2;
  outline-offset: 1px;
  background-color: #eadcf0;
}

.desktop-sticker-choice img {
  max-width: 72px;
  max-height: 66px;
  object-fit: contain;
  pointer-events: none;
}

.desktop-custom-sticker-choice {
  grid-template-rows: minmax(54px,1fr) auto;
}

.desktop-custom-sticker-name {
  width: 100%;
  overflow: hidden;
  color: #6d5c74;
  font-size: 7px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.desktop-custom-sticker-delete {
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 2;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1px solid #9a7fa5;
  border-radius: 50%;
  background: rgba(245,224,237,.96);
  color: #674d72;
  font-size: 10px;
  line-height: 1;
}

.desktop-custom-sticker-delete:hover {
  background: #e8c6dc;
}

.desktop-sticker-empty {
  padding: 14px;
  border: 1px dashed #d0c3d6;
  color: #938699;
  font-size: 8px;
  text-align: center;
}

.desktop-sticker-bottom {
  display: grid;
  grid-template-columns: minmax(220px,.9fr) minmax(260px,1.1fr);
  gap: 10px;
  padding: 9px 11px;
  border-top: 1px solid #d7ccdc;
  background: #f7f2f9;
}

.desktop-sticker-preview-card {
  display: grid;
  grid-template-columns: 68px minmax(0,1fr);
  gap: 9px;
  align-items: center;
}

.desktop-sticker-preview-stage {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border: 1px solid #c9bbcf;
  background:
    linear-gradient(45deg,#eee8f0 25%,transparent 25%) 0 0/12px 12px,
    linear-gradient(-45deg,#eee8f0 25%,transparent 25%) 0 6px/12px 12px,
    linear-gradient(45deg,transparent 75%,#eee8f0 75%) 6px -6px/12px 12px,
    linear-gradient(-45deg,transparent 75%,#eee8f0 75%) -6px 0/12px 12px,
    #faf8fb;
}

#desktopStickerPreview {
  max-width: 58px;
  max-height: 58px;
  object-fit: contain;
}

#desktopStickerPreviewEmpty {
  padding: 5px;
  color: #948699;
  font-size: 7px;
  text-align: center;
}

.desktop-sticker-preview-card strong,
.desktop-sticker-preview-card small {
  display: block;
}

.desktop-sticker-preview-card strong {
  color: #57465f;
  font-size: 9px;
}

.desktop-sticker-preview-card small {
  margin-top: 2px;
  color: #8b7d91;
  font-size: 7px;
}

.desktop-sticker-place-settings {
  display: grid;
  gap: 5px;
  color: #65566c;
  font-size: 8px;
}

.desktop-sticker-place-settings label > div {
  display: grid;
  grid-template-columns: 1fr 48px;
  gap: 7px;
  align-items: center;
}

.desktop-sticker-place-settings input[type="range"] {
  width: 100%;
}

.desktop-sticker-place-settings output {
  color: #7e6b86;
  font: 8px "Courier New",monospace;
  text-align: right;
}

.desktop-sticker-checkbox {
  display: flex;
  gap: 6px;
  align-items: center;
}

.desktop-sticker-manager-footer {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 7px 11px;
  border-top: 1px solid #cfc2d4;
  background: #e9e0ed;
  color: #6e5e76;
  font-size: 8px;
}

.desktop-sticker-manager-footer small {
  color: #8b7e91;
}

@media (max-width:900px) {
  .desktop-sticker-choices {
    grid-template-columns: repeat(5,minmax(72px,1fr));
  }
}

@media (max-width:700px) {
  .desktop-sticker-manager {
    grid-template-rows: auto auto minmax(0,1fr) auto auto;
  }

  .desktop-sticker-manager-top,
  .desktop-sticker-manager-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .desktop-sticker-manager-actions {
    width: 100%;
  }

  .desktop-sticker-manager-actions button {
    flex: 1;
  }

  .desktop-sticker-upload-zone {
    grid-template-columns: 30px minmax(0,1fr);
  }

  .desktop-sticker-upload-zone button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .desktop-sticker-filterbar {
    grid-template-columns: 1fr 110px;
  }

  #desktopStickerCount {
    grid-column: 1 / -1;
  }

  .desktop-sticker-choices {
    grid-template-columns: repeat(3,minmax(70px,1fr));
  }

  .desktop-sticker-bottom {
    grid-template-columns: 1fr;
  }

  .desktop-sticker-item {
    max-width: 180px;
  }
}


/* =========================================================
   DESKTOP DECOR — STICKERS + POLAROIDS IN ONE APP
   ========================================================= */

.desktop-sticker-window-body {
  height: 100%;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0,1fr);
}

.desktop-decor-tabs {
  display: flex;
  gap: 0;
  padding: 6px 8px 0;
  border-bottom: 1px solid #c8bbcf;
  background: linear-gradient(#eee6f2,#dfd3e6);
}

.desktop-decor-tab {
  min-width: 105px;
  padding: 7px 12px 8px;
  border: 1px solid #b9a8c2;
  border-bottom: 0;
  background: #ddd0e4;
  color: #65516f;
  font-size: 9px;
  font-weight: bold;
}

.desktop-decor-tab + .desktop-decor-tab {
  margin-left: 3px;
}

.desktop-decor-tab.active {
  position: relative;
  top: 1px;
  background: #f6f1f8;
  color: #4f3c59;
}

.desktop-decor-panel {
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.desktop-decor-panel[hidden] {
  display: none !important;
}

.desktop-decor-panel.active {
  display: block;
}

.desktop-decor-panel .desktop-sticker-manager {
  height: 100%;
}

.desktop-decor-polaroids {
  overflow: auto;
  background: #f6f1f8;
}

.desktop-polaroid-inside {
  min-height: 100%;
  padding: 14px;
}

.desktop-polaroid-header {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 11px 12px;
  border: 1px solid #d2c5d8;
  background: linear-gradient(#fcf9fd,#eee7f2);
}

.desktop-polaroid-header strong,
.desktop-polaroid-header small {
  display: block;
}

.desktop-polaroid-header strong {
  color: #503f59;
  font-size: 11px;
}

.desktop-polaroid-header small {
  margin-top: 3px;
  color: #85778c;
  font-size: 8px;
}

.desktop-polaroid-header button {
  flex: 0 0 auto;
  padding: 7px 9px;
  font-size: 8px;
}

.desktop-polaroid-form {
  display: grid;
  grid-template-columns: 150px minmax(180px,1fr) auto;
  gap: 10px;
  align-items: end;
  margin-top: 12px;
  padding: 13px;
  border: 1px solid #d3c7d9;
  background: #fff;
}

.desktop-polaroid-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: #65566d;
  font-size: 8px;
  font-weight: bold;
}

.desktop-polaroid-form input,
.desktop-polaroid-form select {
  min-width: 0;
  padding: 7px;
  font-size: 9px;
}

.desktop-polaroid-form button {
  padding: 7px 11px;
  font-size: 9px;
}

.desktop-polaroid-upload-card {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-top: 11px;
  padding: 13px;
  border: 1px dashed #ad95b8;
  background: #f1e7f4;
}

.desktop-polaroid-upload-card strong,
.desktop-polaroid-upload-card small {
  display: block;
}

.desktop-polaroid-upload-card strong {
  color: #594661;
  font-size: 10px;
}

.desktop-polaroid-upload-card small {
  margin-top: 3px;
  color: #86778c;
  font-size: 8px;
  line-height: 1.4;
}

.desktop-polaroid-upload-card .custom-polaroid-upload {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px outset #d1c2d8;
  background: #e8dced;
  color: #594762;
  font-size: 8px;
  cursor: pointer;
}

.desktop-polaroid-upload-card input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.desktop-polaroid-help {
  margin-top: 11px;
  padding: 13px;
  border: 1px solid #d8cedd;
  background:
    linear-gradient(135deg,#faf7fc,#f0e8f4);
}

.desktop-polaroid-help strong {
  color: #594760;
  font-size: 9px;
}

.desktop-polaroid-help p {
  margin: 5px 0 0;
  color: #83758a;
  font-size: 8px;
  line-height: 1.55;
}

@media (max-width:700px) {
  .desktop-decor-tab {
    flex: 1;
    min-width: 0;
  }

  .desktop-polaroid-header,
  .desktop-polaroid-upload-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .desktop-polaroid-form {
    grid-template-columns: 1fr;
  }

  .desktop-polaroid-form button,
  .desktop-polaroid-upload-card .custom-polaroid-upload {
    width: 100%;
    text-align: center;
  }
}



/* =========================================================
   FIREBASE VM MESSENGER
   ========================================================= */

.buddy-list .buddy[data-buddy] {
  display: grid;
  grid-template-columns: 16px minmax(0,1fr);
  grid-template-rows: auto auto;
  column-gap: 5px;
  align-items: center;
  text-align: left;
}

.buddy-presence-dot {
  grid-row: 1 / 3;
  align-self: center;
  font-size: 11px;
}

.buddy-name {
  min-width: 0;
  overflow: hidden;
  font-weight: bold;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.buddy-presence-text {
  min-width: 0;
  overflow: hidden;
  color: #817488;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.buddy-presence-dot.status-online,
.buddy-presence-dot.status-online + .buddy-name {
  color: #168127;
}

.buddy-presence-dot.status-away,
.buddy-presence-dot.status-away + .buddy-name {
  color: #b27812;
}

.buddy-presence-dot.status-busy,
.buddy-presence-dot.status-busy + .buddy-name {
  color: #a23d50;
}

.buddy-presence-dot.status-offline {
  color: #918b95;
}

.messenger-cloud-status {
  min-height: 20px;
  padding: 4px 7px;
  border-top: 1px solid #ded5e3;
  background: #f4eff7;
  color: #75667d;
  font-size: 7px;
}

.messenger-cloud-status[data-kind="success"] {
  color: #377744;
}

.messenger-cloud-status[data-kind="error"] {
  color: #9b364d;
  background: #f8e8ee;
}

.chat-message-outgoing .chat-message-body {
  color: #5d4770;
}

.chat-message-incoming .chat-message-body {
  color: #40384a;
}

.chat-compose textarea:disabled,
.chat-compose button:disabled,
.nudge-button:disabled {
  cursor: not-allowed;
  opacity: .55;
}


/* =========================================================
   CLOUD MEDIA — DESKTOP DECOR
   ========================================================= */

.cloud-media-badge {
  background: rgba(221,237,255,.96) !important;
  color: #5a6e91 !important;
  cursor: default !important;
}

.desktop-cloud-polaroids {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #d5cadb;
  background: #fff;
}

.desktop-cloud-polaroids-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e1d8e5;
}

.desktop-cloud-polaroids-heading strong,
.desktop-cloud-polaroids-heading small {
  display: block;
}

.desktop-cloud-polaroids-heading strong {
  color: #57445f;
  font-size: 10px;
}

.desktop-cloud-polaroids-heading small,
#cloudPolaroidCount {
  color: #8b7c91;
  font-size: 7px;
}

.cloud-polaroid-gallery {
  display: grid;
  grid-template-columns: repeat(5,minmax(88px,1fr));
  gap: 9px;
}

.cloud-polaroid-card {
  min-width: 0;
  display: grid;
  grid-template-rows: 82px auto auto;
  gap: 4px;
  padding: 6px;
  border: 1px solid #d0c4d6;
  background: #faf7fb;
  color: #5f5066;
  text-align: left;
}

.cloud-polaroid-card:hover {
  border-color: #a98eb5;
  background: #f1e8f5;
}

.cloud-polaroid-card img {
  width: 100%;
  height: 82px;
  object-fit: cover;
  border: 1px solid #e1d8e5;
  background: #eee;
}

.cloud-polaroid-card span {
  overflow: hidden;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cloud-polaroid-card small {
  color: #937e9c;
  font-size: 6px;
}

@media (max-width:900px) {
  .cloud-polaroid-gallery {
    grid-template-columns: repeat(4,minmax(80px,1fr));
  }
}

@media (max-width:700px) {
  .cloud-polaroid-gallery {
    grid-template-columns: repeat(2,minmax(82px,1fr));
  }
}