@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=Outfit:wght@400;500;600&display=swap");

:root {
  --a-bg: #030303;
  --a-surface: #0a0a0a;
  --a-surface-2: #0f0f0f;
  --a-line: rgba(255, 255, 255, 0.07);
  --a-line-gold: rgba(201, 169, 98, 0.22);
  --a-gold: #c9a962;
  --a-gold-hover: #e2c98a;
  --a-gold-soft: rgba(201, 169, 98, 0.12);
  --a-gold-glow: rgba(201, 169, 98, 0.28);
  --a-text: #f4f1ea;
  --a-muted: #8a8680;
  --a-font: "Outfit", system-ui, sans-serif;
  --a-display: "Cormorant Garamond", Georgia, serif;
}

html,
body,
#layout,
input,
button,
select,
textarea {
  font-family: var(--a-font) !important;
}

html,
body {
  background: var(--a-bg) !important;
  color: var(--a-text) !important;
}

#layout {
  background:
    radial-gradient(ellipse 65% 45% at 100% 0%, rgba(201, 169, 98, 0.05), transparent 55%),
    radial-gradient(ellipse 45% 35% at 0% 100%, rgba(255, 255, 255, 0.02), transparent 50%),
    var(--a-bg) !important;
}

/* —— Login —— */
body.task-login #layout {
  background:
    radial-gradient(ellipse 60% 50% at 100% 0%, rgba(201, 169, 98, 0.07), transparent 50%),
    var(--a-bg) !important;
}

body.task-login #layout-content,
body.task-login .voice {
  background: transparent !important;
}

body.task-login #login-form,
body.task-login .boxfooter,
body.task-login .boxtitle {
  background: var(--a-surface-2) !important;
  border: 1px solid var(--a-line) !important;
  border-radius: 4px !important;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.55) !important;
}

body.task-login .boxtitle {
  border-bottom: 1px solid var(--a-line) !important;
  font-family: var(--a-display) !important;
  font-size: 1.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  color: var(--a-text) !important;
}

body.task-login .boxtitle::before {
  content: "anon4ik · ";
  color: var(--a-gold);
}

body.task-login #logo {
  display: none !important;
}

body.task-login #login-footer,
body.task-login #login-addon .hint {
  color: var(--a-muted) !important;
  font-size: 0.88rem !important;
  line-height: 1.6 !important;
}

body.task-login .anon4ik-dl-login {
  display: block;
  margin-top: 14px;
  padding: 12px 16px;
  text-align: center;
  text-decoration: none !important;
  border-radius: 2px;
  border: 1px solid var(--a-line-gold);
  background: rgba(201, 169, 98, 0.08);
  color: var(--a-gold) !important;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

body.task-login .anon4ik-dl-login:hover {
  background: var(--a-gold-soft);
  color: var(--a-gold-hover) !important;
}

body.task-login .form-control {
  border-radius: 2px !important;
  border-color: var(--a-line) !important;
  background: #050505 !important;
  color: var(--a-text) !important;
  padding: 12px 14px !important;
}

body.task-login .form-control:focus {
  border-color: var(--a-line-gold) !important;
  box-shadow: 0 0 0 1px var(--a-gold-glow) !important;
}

body.task-login #rcmloginsubmit,
body.task-login .btn-primary {
  background: var(--a-gold) !important;
  color: #0a0908 !important;
  border: 0 !important;
  border-radius: 2px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-size: 0.8rem !important;
  padding: 12px 24px !important;
}

/* —— Top download bar —— */
.anon4ik-dl-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 38px;
  padding: 0 16px;
  background: linear-gradient(90deg, rgba(201, 169, 98, 0.16), rgba(201, 169, 98, 0.08), rgba(201, 169, 98, 0.16));
  border-bottom: 1px solid var(--a-line-gold);
  backdrop-filter: blur(12px);
}

.anon4ik-dl-bar-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none !important;
  color: var(--a-gold) !important;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.76rem;
}

.anon4ik-dl-bar-link::before {
  content: "↓";
  font-size: 1rem;
  line-height: 1;
}

.anon4ik-dl-bar-link:hover {
  color: var(--a-gold-hover) !important;
}

body:not(.task-login) #layout {
  padding-top: 38px !important;
}

body:not(.task-login) #layout-menu {
  top: 38px !important;
  height: calc(100% - 38px) !important;
}

/* —— Left task menu —— */
#taskmenu {
  background: rgba(5, 5, 5, 0.96) !important;
  border-right: 1px solid var(--a-line) !important;
  backdrop-filter: blur(20px);
}

#taskmenu a {
  color: var(--a-muted) !important;
  border-radius: 2px !important;
  transition: background 0.18s, color 0.18s !important;
}

#taskmenu a .inner {
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}

#taskmenu a.selected,
#taskmenu a:hover {
  background: var(--a-gold-soft) !important;
  color: var(--a-gold) !important;
}

#taskmenu a.compose {
  background: var(--a-gold) !important;
  color: #0a0908 !important;
  margin: 8px 10px !important;
  border-radius: 2px !important;
}

#taskmenu a.compose:hover,
#taskmenu a.compose.selected {
  background: var(--a-gold-hover) !important;
  color: #0a0908 !important;
}

#taskmenu a.dl-link,
#taskmenu .anon4ik-dl-wrap a.dl-link {
  margin: 6px 10px 4px !important;
  border: 1px solid var(--a-line-gold) !important;
  background: rgba(201, 169, 98, 0.08) !important;
  color: var(--a-gold) !important;
}

#taskmenu a.dl-link:hover,
#taskmenu .anon4ik-dl-wrap a.dl-link:hover {
  background: var(--a-gold-soft) !important;
  color: var(--a-gold-hover) !important;
  border-color: rgba(201, 169, 98, 0.45) !important;
}

#taskmenu a.logout {
  color: #d48484 !important;
}

#taskmenu a.logout:hover {
  background: rgba(212, 132, 132, 0.12) !important;
  color: #e8a0a0 !important;
}

/* —— Layout panels —— */
#layout-header,
#layout-list,
#layout-sidebar,
#layout-content,
.listbox,
.listing,
.tableheader,
.header,
.message,
#messagelist-header,
#folderlist-content,
#layout-list .header,
#layout-sidebar .header {
  background: var(--a-surface) !important;
  color: var(--a-text) !important;
  border-color: var(--a-line) !important;
}

#layout-header {
  background: rgba(8, 8, 8, 0.95) !important;
  border-bottom: 1px solid var(--a-line) !important;
  backdrop-filter: blur(16px);
}

#layout-list,
#layout-sidebar {
  border-right: 1px solid var(--a-line) !important;
}

/* —— Folder list —— */
.folderlist li,
.treeview li {
  border-radius: 2px !important;
}

.folderlist li a,
.treeview li a {
  color: var(--a-muted) !important;
}

.folderlist li.selected > a,
.folderlist li.selected,
.treeview li.selected > a {
  background: var(--a-gold-soft) !important;
  color: var(--a-gold) !important;
}

.folderlist li:hover > a,
.treeview li:hover > a {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--a-text) !important;
}

/* —— Message list —— */
.listing tbody tr,
.listing li {
  border-color: var(--a-line) !important;
}

.listing tbody tr td,
.listing li {
  color: var(--a-text) !important;
}

.listing tbody tr.unread td,
.listing li.unread {
  font-weight: 600 !important;
}

.listing tbody tr.selected td,
.listing tbody tr.selected,
.listing li.selected,
.listing tbody tr:focus td,
.listing li:focus {
  background: var(--a-gold-soft) !important;
  color: var(--a-text) !important;
  box-shadow: inset 3px 0 0 var(--a-gold) !important;
}

.listing tbody tr:hover td,
.listing li:hover {
  background: rgba(255, 255, 255, 0.03) !important;
}

.listing .subject a,
.listing .fromto span {
  color: var(--a-text) !important;
}

.listing .date,
.listing .size,
.listing .count {
  color: var(--a-muted) !important;
}

/* —— Toolbar & buttons —— */
.toolbar a,
.pagenav a,
.header a.button {
  color: var(--a-muted) !important;
  border-radius: 2px !important;
}

.toolbar a:hover,
.pagenav a:hover,
.header a.button:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--a-text) !important;
}

.btn,
button.btn,
a.btn {
  border-radius: 2px !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em !important;
}

.btn-primary,
button.btn-primary,
a.btn-primary,
.pagenav a.selected,
input[type="submit"].btn-primary {
  background: var(--a-gold) !important;
  color: #0a0908 !important;
  border-color: var(--a-gold) !important;
}

.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover {
  background: var(--a-gold-hover) !important;
  border-color: var(--a-gold-hover) !important;
}

.btn-secondary,
button.btn-secondary {
  background: transparent !important;
  border: 1px solid var(--a-line) !important;
  color: var(--a-text) !important;
}

/* —— Search —— */
.searchbar input,
.form-control,
input[type="text"],
input[type="search"],
input[type="password"],
textarea {
  background: #050505 !important;
  border: 1px solid var(--a-line) !important;
  color: var(--a-text) !important;
  border-radius: 2px !important;
}

.searchbar input:focus,
.form-control:focus,
input:focus,
textarea:focus {
  border-color: var(--a-line-gold) !important;
  box-shadow: 0 0 0 1px var(--a-gold-glow) !important;
}

/* —— Message view —— */
#message-header {
  background: var(--a-surface) !important;
  color: var(--a-text) !important;
  border-color: var(--a-line) !important;
}

#message-header .header-title,
#message-header .header-links,
#message-header .subject {
  color: var(--a-text) !important;
}

#message-header .header-links a {
  color: var(--a-gold) !important;
}

/* Область чтения — светлый фон, чтобы текст писем был читаемым */
#message-content,
#message-content .iframe-wrapper,
#message-content .message-part,
#message-content .message-htmlpart,
#message-content #messagebody,
#messagecontframe {
  background: #f0ebe3 !important;
  color: #1c1b19 !important;
  opacity: 1 !important;
  filter: none !important;
}

#message-content .message-part,
#message-content .message-htmlpart,
#message-content #messagebody {
  padding: 16px 20px !important;
}

#message-content .message-part a,
#message-content .message-htmlpart a {
  color: #7a5c1e !important;
}

#message-content iframe {
  opacity: 1 !important;
  filter: none !important;
  background: #f0ebe3 !important;
}

/* —— Empty state (только водяной знак, не письма) —— */
.watermark {
  opacity: 0.35 !important;
  filter: grayscale(0.6) brightness(0.85);
}

/* —— Popovers, menus —— */
.popover,
.popupmenu,
.menu {
  background: var(--a-surface-2) !important;
  border: 1px solid var(--a-line) !important;
  border-radius: 4px !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5) !important;
}

.popupmenu li > a:hover,
.menu li > a:hover {
  background: var(--a-gold-soft) !important;
  color: var(--a-gold) !important;
}

#message-header .header-title {
  font-family: var(--a-display) !important;
  font-size: 1.35rem !important;
  letter-spacing: 0.02em !important;
}

/* —— Badges, links, accents (только UI, не тело письма) —— */
.badge,
.countbadge,
.listing .flagged,
#taskmenu a,
#layout-list a,
#layout-sidebar a,
.toolbar a,
.folderlist a,
.treeview a,
#message-header a,
.header a,
.footer a,
.popupmenu a,
.menu a {
  color: var(--a-gold) !important;
}

.badge,
.countbadge {
  background: var(--a-gold-soft) !important;
  border-radius: 2px !important;
}

/* —— Scrollbars —— */
* {
  scrollbar-color: rgba(201, 169, 98, 0.25) transparent;
  scrollbar-width: thin;
}

/* —— Footer / misc —— */
.footer,
#layout-footer,
.quota-info {
  color: var(--a-muted) !important;
}

#messagestack div {
  border-radius: 2px !important;
  border: 1px solid var(--a-line) !important;
  background: var(--a-surface-2) !important;
}

/* —— Override Elastic blue (#37beff) everywhere —— */
html.dark-mode a.button,
html.dark-mode .listing tr.selected td,
html.dark-mode .folderlist li.selected > a,
html.dark-mode .pagenav a.selected,
html.dark-mode input[type="checkbox"]:checked,
html.dark-mode .custom-switch-input:checked + label::before {
  accent-color: var(--a-gold) !important;
}

html.dark-mode #taskmenu a.button-action,
html.dark-mode .toolbar a.button,
html.dark-mode .header a.button.selected {
  color: var(--a-gold) !important;
}

html.dark-mode .listing tr:focus td,
html.dark-mode .listing li.selected {
  outline-color: var(--a-gold) !important;
}