/* ZWORLD_CLASSIC_APPEARANCE_CSS_V13_START */

:root {
  --classic-appearance-nick-color: #f4f4f5;
  --classic-appearance-page-color: #020203;
  --classic-appearance-page-mid: #08080a;
  --classic-appearance-page-high: #16161a;
  --classic-appearance-panel-color: #070709;
  --classic-appearance-panel-high: #16161a;
  --classic-appearance-text-color: #d5d5d9;
  
  --classic-appearance-text-other-color: #d5d5d9;
  --classic-appearance-time-color: #65656c;
--classic-appearance-time-color: #65656c;
}

html[data-classic-appearance-v13="1"] body {
  color:
    var(--classic-appearance-text-color);

  background:
    radial-gradient(
      ellipse at 50% 38%,
      var(--classic-appearance-page-high) 0,
      var(--classic-appearance-page-mid) 34%,
      var(--classic-appearance-page-color) 100%
    ) !important;
}

html[data-classic-appearance-v13="1"]
.navigation,

html[data-classic-appearance-v13="1"]
.conversation,

html[data-classic-appearance-v13="1"]
.members-drawer,

html[data-classic-appearance-v13="1"]
.classic-user-menu-v9,

html[data-classic-appearance-v13="1"]
.classic-settings-panel-v12a,

html[data-classic-appearance-v13="1"]
.classic-mobile-panel-v2 {
  background:
    linear-gradient(
      155deg,
      var(--classic-appearance-panel-high),
      var(--classic-appearance-panel-color)
    ) !important;
}

html[data-classic-appearance-v13="1"]
.feed {
  background:
    radial-gradient(
      ellipse at 50% 0,
      var(--classic-appearance-panel-high),
      var(--classic-appearance-panel-color) 68%
    ) !important;
}

html[data-classic-appearance-v13="1"]
.composer {
  background:
    var(--classic-appearance-panel-color) !important;
}

html[data-classic-appearance-v13="1"]
.composer-box {
  background:
    var(--classic-appearance-panel-high) !important;
}

html[data-classic-appearance-v13="1"]
.message-text,

html[data-classic-appearance-v13="1"]
.composer-box input,

html[data-classic-appearance-v13="1"]
.composer-box textarea,

html[data-classic-appearance-v13="1"]
.composer-box [contenteditable="true"] {
  color:
    var(--classic-appearance-text-color) !important;
}

html[data-classic-appearance-v13="1"]
.message-time {
  color:
    var(--classic-appearance-time-color) !important;
}

html[data-classic-appearance-v13="1"]
[data-classic-public-nick-color-v13="1"] {
  color:
    var(--classic-appearance-nick-color) !important;
}

.classic-appearance-entry-side-v13 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.classic-appearance-entry-swatch-v13 {
  width: 15px;
  height: 15px;

  flex: 0 0 auto;

  border:
    1px solid
    rgba(255, 255, 255, .24);

  border-radius: 50%;

  background:
    var(--classic-appearance-nick-color);

  box-shadow:
    0 0 0 2px
    rgba(0, 0, 0, .32);
}

.classic-appearance-backdrop-v13 {
  position: fixed;
  z-index: 100000;
  inset: 0;

  display: grid;
  place-items: center;

  padding:
    max(14px, env(safe-area-inset-top))
    max(14px, env(safe-area-inset-right))
    max(14px, env(safe-area-inset-bottom))
    max(14px, env(safe-area-inset-left));

  overflow-y: auto;

  background:
    rgba(0, 0, 0, .72);

  backdrop-filter:
    blur(7px);

  opacity: 0;
  pointer-events: none;

  transition:
    opacity .16s ease;
}

.classic-appearance-backdrop-v13[hidden] {
  display: none;
}

.classic-appearance-backdrop-v13.is-open {
  opacity: 1;
  pointer-events: auto;
}

.classic-appearance-panel-v13 {
  width:
    min(680px, 100%);

  max-height:
    min(850px, calc(100dvh - 28px));

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

  overflow: hidden;

  border:
    1px solid
    rgba(255, 255, 255, .14);

  border-radius: 18px;

  color: #f4f4f5;

  background:
    linear-gradient(
      155deg,
      rgba(27, 27, 32, .995),
      rgba(7, 7, 9, .998)
    );

  box-shadow:
    0 28px 90px
    rgba(0, 0, 0, .72);

  transform:
    translateY(12px)
    scale(.985);

  transition:
    transform .16s ease;
}

.classic-appearance-backdrop-v13.is-open
.classic-appearance-panel-v13 {
  transform:
    translateY(0)
    scale(1);
}

.classic-appearance-head-v13 {
  min-width: 0;

  display: flex;
  align-items: center;
  gap: 12px;

  padding: 15px 16px;

  border-bottom:
    1px solid
    rgba(255, 255, 255, .09);
}

.classic-appearance-head-copy-v13 {
  min-width: 0;
  flex: 1;
}

.classic-appearance-head-copy-v13 strong {
  display: block;

  color: #f4f4f5;

  font-size: 15px;
  font-weight: 850;
}

.classic-appearance-head-copy-v13 small {
  display: block;

  margin-top: 2px;

  color: #92929a;

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

.classic-appearance-close-v13 {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  flex: 0 0 auto;

  border:
    1px solid
    rgba(255, 255, 255, .09);

  border-radius: 10px;

  color: #92929a;
  background:
    rgba(255, 255, 255, .035);

  font: inherit;
  font-size: 20px;
  line-height: 1;

  cursor: pointer;
}

.classic-appearance-close-v13:hover,
.classic-appearance-close-v13:focus-visible {
  color: #f4f4f5;

  background:
    rgba(255, 255, 255, .08);

  outline: none;
}

.classic-appearance-scroll-v13 {
  min-height: 0;

  display: grid;
  grid-template-columns:
    minmax(175px, .76fr)
    minmax(280px, 1.24fr);

  gap: 16px;

  padding: 16px;

  overflow-y: auto;
}

.classic-appearance-targets-v13 {
  min-width: 0;

  display: grid;
  align-content: start;
  gap: 7px;
}

.classic-appearance-target-v13 {
  width: 100%;
  min-width: 0;

  display: grid;
  grid-template-columns:
    24px
    minmax(0, 1fr);

  gap: 10px;
  align-items: center;

  padding: 10px;

  border:
    1px solid
    rgba(255, 255, 255, .075);

  border-radius: 11px;

  color: #d8d8dc;
  background:
    rgba(255, 255, 255, .025);

  font: inherit;
  text-align: left;

  cursor: pointer;
}

.classic-appearance-target-v13:hover,
.classic-appearance-target-v13:focus-visible {
  border-color:
    rgba(255, 255, 255, .17);

  background:
    rgba(255, 255, 255, .06);

  outline: none;
}

.classic-appearance-target-v13.is-active {
  border-color:
    rgba(255, 255, 255, .28);

  background:
    rgba(255, 255, 255, .095);
}

.classic-appearance-target-swatch-v13 {
  width: 24px;
  height: 24px;

  border:
    1px solid
    rgba(255, 255, 255, .25);

  border-radius: 8px;

  box-shadow:
    inset 0 0 0 1px
    rgba(0, 0, 0, .15);
}

.classic-appearance-target-copy-v13 {
  min-width: 0;
}

.classic-appearance-target-copy-v13 strong {
  display: block;

  overflow: hidden;

  color: #f4f4f5;

  font-size: 10.5px;
  font-weight: 800;

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

.classic-appearance-target-copy-v13 small {
  display: block;

  margin-top: 2px;

  overflow: hidden;

  color: #92929a;

  font-size: 8px;
  line-height: 1.35;

  text-overflow: ellipsis;
}

.classic-appearance-picker-v13 {
  min-width: 0;

  display: grid;
  justify-items: center;
  align-content: start;
  gap: 13px;
}

.classic-color-wheel-stage-v13 {
  position: relative;

  width:
    min(230px, 68vw);

  aspect-ratio: 1;
}

.classic-color-wheel-v13 {
  width: 100%;
  height: 100%;

  display: block;

  border-radius: 50%;

  cursor: crosshair;
  touch-action: none;

  filter:
    drop-shadow(
      0 12px 24px
      rgba(0, 0, 0, .42)
    );
}

.classic-color-wheel-marker-v13 {
  position: absolute;
  z-index: 2;

  width: 17px;
  height: 17px;

  border:
    2px solid
    #ffffff;

  border-radius: 50%;

  box-shadow:
    0 0 0 2px
    rgba(0, 0, 0, .68),
    0 3px 9px
    rgba(0, 0, 0, .5);

  pointer-events: none;

  transform:
    translate(-50%, -50%);
}

.classic-appearance-controls-v13 {
  width: 100%;

  display: grid;
  gap: 10px;
}

.classic-appearance-control-v13 {
  display: grid;
  gap: 6px;
}

.classic-appearance-control-v13 > span {
  color: #b9b9bf;

  font-size: 8px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.classic-appearance-brightness-v13 {
  width: 100%;

  accent-color:
    var(--classic-appearance-nick-color);
}

.classic-appearance-code-row-v13 {
  display: grid;
  grid-template-columns:
    46px
    minmax(0, 1fr);

  gap: 8px;
}

.classic-appearance-native-v13 {
  width: 46px;
  height: 40px;

  padding: 3px;

  overflow: hidden;

  border:
    1px solid
    rgba(255, 255, 255, .13);

  border-radius: 10px;

  background:
    rgba(255, 255, 255, .045);

  cursor: pointer;
}

.classic-appearance-hex-v13 {
  width: 100%;
  min-width: 0;
  height: 40px;

  padding: 0 12px;

  border:
    1px solid
    rgba(255, 255, 255, .13);

  border-radius: 10px;

  color: #f4f4f5;
  background:
    rgba(255, 255, 255, .045);

  font:
    800 13px
    "JetBrains Mono",
    Consolas,
    monospace;

  letter-spacing: .045em;
  text-transform: uppercase;
}

.classic-appearance-hex-v13:focus {
  border-color:
    rgba(255, 255, 255, .34);

  outline: none;

  box-shadow:
    0 0 0 3px
    rgba(255, 255, 255, .055);
}

.classic-appearance-preview-v13 {
  width: 100%;

  padding: 11px;

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

  border-radius: 12px;
}

.classic-appearance-preview-card-v13 {
  display: grid;
  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto;

  gap: 8px;
  align-items: baseline;

  padding: 10px;

  border-radius: 9px;
}

.classic-appearance-preview-nick-v13 {
  font-size: 11px;
  font-weight: 850;
}

.classic-appearance-preview-text-v13 {
  min-width: 0;

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

.classic-appearance-preview-time-v13 {
  font:
    700 8px
    "JetBrains Mono",
    Consolas,
    monospace;
}

.classic-appearance-note-v13 {
  margin: 0;

  color: #7d7d85;

  font-size: 7.5px;
  line-height: 1.45;
  text-align: center;
}

.classic-appearance-foot-v13 {
  display: flex;
  justify-content: space-between;
  gap: 9px;

  padding: 12px 16px;

  border-top:
    1px solid
    rgba(255, 255, 255, .09);
}

.classic-appearance-button-v13 {
  min-height: 36px;

  padding: 0 13px;

  border:
    1px solid
    rgba(255, 255, 255, .11);

  border-radius: 10px;

  color: #d7d7db;
  background:
    rgba(255, 255, 255, .045);

  font: inherit;
  font-size: 9px;
  font-weight: 850;

  cursor: pointer;
}

.classic-appearance-button-v13:hover,
.classic-appearance-button-v13:focus-visible {
  border-color:
    rgba(255, 255, 255, .22);

  color: #ffffff;
  background:
    rgba(255, 255, 255, .09);

  outline: none;
}

.classic-appearance-button-v13.is-primary {
  color: #111114;
  background: #f4f4f5;
}

@media (max-width: 620px) {
  .classic-appearance-backdrop-v13 {
    place-items: end center;

    padding:
      max(8px, env(safe-area-inset-top))
      max(8px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
  }

  .classic-appearance-panel-v13 {
    max-height:
      calc(100dvh - 16px);

    border-radius: 17px;
  }

  .classic-appearance-scroll-v13 {
    grid-template-columns: 1fr;

    gap: 13px;

    padding: 12px;
  }

  .classic-appearance-targets-v13 {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .classic-appearance-target-v13 {
    grid-template-columns:
      20px
      minmax(0, 1fr);

    padding: 8px;
  }

  .classic-appearance-target-swatch-v13 {
    width: 20px;
    height: 20px;
  }

  .classic-color-wheel-stage-v13 {
    width:
      min(205px, 62vw);
  }
}

/* ZWORLD_CLASSIC_APPEARANCE_CSS_V13_END */