:root {
  color-scheme: dark;
  --skopi-bg: #10120f;
  --skopi-surface: #191d18;
  --skopi-surface-raised: #20251e;
  --skopi-text: #eef3e9;
  --skopi-muted: #abb5a5;
  --skopi-primary: #b8f171;
  --skopi-primary-hover: #d0ff93;
  --skopi-border: #30372d;
  --skopi-danger: #ff9d8e;
  --skopi-radius: 1.25rem;
  --skopi-shadow: 0 1.125rem 3.75rem rgb(0 0 0 / 28%);
}

html,
html.dark-mode,
body {
  background: var(--skopi-bg);
  color: var(--skopi-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  scrollbar-color: #64705f #171a16;
}

body {
  background:
    radial-gradient(circle at 15% 0, #26331f 0, transparent 34rem),
    var(--skopi-bg);
}

html.dark-mode,
html.dark-mode body {
  background:
    radial-gradient(circle at 15% 0, #26331f 0, transparent 34rem),
    var(--skopi-bg);
  color: var(--skopi-text);
}

::selection {
  background: var(--skopi-primary);
  color: #16200f;
}

a,
html.dark-mode a {
  color: var(--skopi-primary);
}

a:hover,
html.dark-mode a:hover {
  color: var(--skopi-primary-hover);
}

#layout-sidebar,
#layout-list,
#layout-content,
.popover,
.popupmenu,
.ui-dialog,
.menu,
.listing,
.frame-content,
.formcontent,
html.dark-mode #layout-sidebar,
html.dark-mode #layout-list,
html.dark-mode #layout-content {
  background-color: var(--skopi-surface);
  color: var(--skopi-text);
}

#layout-sidebar,
#layout-list,
#layout > div > .header,
#layout > div > .footer,
.listing li,
.listing tbody td,
.table td,
.table th,
.popover,
.ui-dialog,
html.dark-mode #layout-sidebar,
html.dark-mode #layout-list {
  border-color: var(--skopi-border);
}

#layout > div > .header,
#layout > div > .footer,
html.dark-mode #layout > div > .header,
html.dark-mode #layout > div > .footer {
  background: rgb(16 18 15 / 92%);
  color: var(--skopi-text);
  backdrop-filter: blur(1rem);
}

#layout-menu,
#layout-menu .popover-header,
html.dark-mode #layout-menu,
html.dark-mode #layout-menu .popover-header {
  background: #141713 !important;
}

#layout-menu .popover-header img {
  padding: 0.75rem;
}

.listing li.selected,
.listing tr.selected td,
.listing li:hover,
.listing tr:hover td,
html.dark-mode .listing li.selected,
html.dark-mode .listing tr.selected td {
  background: #293226;
  color: var(--skopi-text);
}

.listing li.selected,
.listing tr.selected td {
  box-shadow: inset 0.2rem 0 var(--skopi-primary);
}

.listing .unread,
.listing .unread a,
.listing .recent,
.listing .recent a {
  color: var(--skopi-text);
  font-weight: 800;
}

.form-control,
input,
select,
textarea,
html.dark-mode .form-control,
html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea {
  border: 1px solid var(--skopi-border);
  border-radius: 0.8rem;
  background: #141713;
  color: var(--skopi-text);
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus,
html.dark-mode .form-control:focus {
  border-color: var(--skopi-primary);
  background: #171b16;
  color: var(--skopi-text);
  box-shadow: 0 0 0 0.2rem rgb(184 241 113 / 18%);
}

.btn,
button,
html.dark-mode .btn,
html.dark-mode button {
  border-radius: 999px;
  font-weight: 750;
}

.btn-primary,
button.mainaction,
#rcmloginsubmit,
html.dark-mode .btn-primary,
html.dark-mode button.mainaction,
html.dark-mode #rcmloginsubmit {
  border-color: var(--skopi-primary);
  background: var(--skopi-primary);
  color: #16200f;
}

.btn-primary:hover,
button.mainaction:hover,
#rcmloginsubmit:hover,
html.dark-mode .btn-primary:hover,
html.dark-mode button.mainaction:hover,
html.dark-mode #rcmloginsubmit:hover {
  border-color: var(--skopi-primary-hover);
  background: var(--skopi-primary-hover);
  color: #16200f;
}

.task-login #layout-content {
  overflow: auto;
  background: transparent;
}

.task-login #logo {
  top: clamp(3.5rem, 10vh, 7rem);
  width: min(19rem, calc(100vw - 3rem));
  max-height: 5.25rem;
}

.task-login #login-form {
  top: clamp(5rem, 14vh, 9rem);
  box-sizing: border-box;
  max-width: 28rem;
  padding: clamp(1.4rem, 4vw, 2.25rem);
  border: 1px solid var(--skopi-border);
  border-radius: var(--skopi-radius);
  background: rgb(25 29 24 / 94%);
  box-shadow: var(--skopi-shadow);
  backdrop-filter: blur(1rem);
}

.task-login #login-form::before {
  display: block;
  margin: 0 0 1.35rem;
  padding: 0.8rem 1rem;
  border: 1px solid #42513a;
  border-radius: 0.85rem;
  background: #20291d;
  color: var(--skopi-muted);
  content: "Только входящая почта · отправка временно отключена";
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.4;
}

.task-login #login-form .row {
  margin-bottom: 0.9rem;
}

.task-login #rcmloginsubmit {
  min-height: 2.75rem;
}

.task-login #login-footer {
  color: transparent;
  font-size: 0;
}

.task-login #login-footer .support-link {
  color: var(--skopi-muted);
  font-size: 0.78rem;
}

body.task-mail #layout-content::before {
  z-index: 2;
  display: block;
  flex: 0 0 auto;
  padding: 0.42rem 0.85rem;
  border-bottom: 1px solid #42513a;
  background: #20291d;
  color: var(--skopi-muted);
  content: "Исходящая почта временно отключена";
  font-size: 0.76rem;
  font-weight: 750;
  letter-spacing: 0.01em;
  text-align: center;
}

.task-mail a.compose,
.task-mail a.reply,
.task-mail a.reply-all,
.task-mail a.forward,
.task-mail a.bounce,
.task-mail a.send,
.task-mail button.send,
.task-mail .floating-action-buttons a.compose {
  display: none !important;
}

.quota-widget .bar .value {
  background: var(--skopi-primary);
}

.message.error,
.alert-danger {
  border-color: #6e3932;
  background: #351f1b;
  color: #ffd8d1;
}

@media (max-width: 480px) {
  .task-login #logo {
    top: 2.5rem;
    height: 4rem;
  }

  .task-login #login-form {
    top: 3.5rem;
    width: calc(100% - 1.5rem);
    padding: 1.25rem;
  }

  body.task-mail #layout-content::before {
    padding-inline: 0.5rem;
    font-size: 0.7rem;
  }
}