:root {
  --arx-accent: #2f7df4;
  --arx-accent-strong: #1f63cc;
  --arx-success: #16845b;
  --arx-warning: #b76705;
  --arx-danger: #bd2c3c;
  --arx-surface: #fff;
  --arx-surface-soft: #f4f7fb;
  --arx-border: #d5deea;
  --arx-text: #17202b;
  --arx-muted: #647286;
  --arx-shadow: 0 16px 50px rgba(20, 35, 55, .18);
}

html.dark-mode {
  --arx-surface: #1a2532;
  --arx-surface-soft: #223142;
  --arx-border: #42536a;
  --arx-text: #edf3fa;
  --arx-muted: #b5c1d0;
  --arx-shadow: 0 18px 55px rgba(0, 0, 0, .42);
}

.arx-smartbar {
  align-items: center;
  background: color-mix(in srgb, var(--arx-surface) 92%, var(--arx-accent) 8%);
  border-bottom: 1px solid var(--arx-border);
  box-sizing: border-box;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: .42rem;
  min-height: 44px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: .42rem .65rem;
  position: relative;
  scrollbar-width: thin;
  width: 100%;
  z-index: 3;
}

#layout-content > .arx-smartbar {
  flex-grow: 0;
  flex-shrink: 0;
}

#layout-content > .arx-smartbar + .iframe-wrapper,
#layout-content > .iframe-wrapper {
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.arx-smartbar button,
.arx-action,
.arx-dialog button,
.arx-pwa-card button {
  align-items: center;
  background: var(--arx-surface);
  border: 1px solid var(--arx-border);
  border-radius: .55rem;
  color: var(--arx-text);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: 600;
  flex: 0 0 auto;
  gap: .35rem;
  min-height: 34px;
  padding: .35rem .65rem;
}

.arx-smartbar button:hover,
.arx-action:hover,
.arx-dialog button:hover {
  background: var(--arx-surface-soft);
  border-color: color-mix(in srgb, var(--arx-border) 40%, var(--arx-accent) 60%);
}

.arx-smartbar button:focus-visible,
.arx-action:focus-visible,
.arx-dialog button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--arx-accent) 45%, transparent);
  outline-offset: 2px;
}

.arx-smartbar .arx-primary,
.arx-dialog .arx-primary {
  background: var(--arx-accent);
  border-color: var(--arx-accent);
  color: #fff;
}

.arx-smartbar .arx-danger,
.arx-dialog .arx-danger {
  color: var(--arx-danger);
}

.arx-icon {
  font-size: 1rem;
  line-height: 1;
}

.arx-status {
  align-items: center;
  background: #e9f7f1;
  border: 1px solid #b7e2d1;
  border-radius: 999px;
  color: #0d6847;
  display: inline-flex;
  font-size: .78rem;
  font-weight: 700;
  gap: .35rem;
  margin-left: auto;
  padding: .25rem .58rem;
}

.arx-status::before {
  background: currentColor;
  border-radius: 50%;
  content: "";
  height: .48rem;
  width: .48rem;
}

.arx-status.offline {
  background: #fff3df;
  border-color: #f1d09e;
  color: #955105;
}

.arx-security-banner {
  align-items: flex-start;
  background: #fff7e6;
  border: 1px solid #e7bd6f;
  border-radius: .6rem;
  color: #6f4305;
  display: flex;
  gap: .65rem;
  margin: .55rem .75rem;
  padding: .62rem .8rem;
}

.arx-security-banner.high {
  background: #fff0f1;
  border-color: #e699a1;
  color: #8d1d29;
}

.arx-security-banner.safe {
  background: #eef9f4;
  border-color: #a9dcc7;
  color: #126746;
}

.arx-suspicious-link {
  background: #fff0b8 !important;
  border-bottom: 2px dotted var(--arx-danger) !important;
  color: #751922 !important;
}

.arx-compose-schedule {
  align-items: center;
  display: inline-flex;
  gap: .35rem;
  margin-inline-start: .35rem;
}

.arx-compose-schedule input {
  border: 1px solid var(--arx-border);
  border-radius: .45rem;
  min-height: 34px;
  padding: .25rem .45rem;
}

.arx-toast {
  align-items: center;
  animation: arx-slide-in .22s ease-out;
  background: #17202b;
  border: 1px solid #324155;
  border-radius: .7rem;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  box-shadow: var(--arx-shadow);
  color: #fff;
  display: flex;
  gap: .8rem;
  left: 50%;
  max-width: min(92vw, 680px);
  padding: .72rem .85rem;
  position: fixed;
  transform: translateX(-50%);
  z-index: 10010;
}

.arx-toast .arx-toast-text {
  flex: 1;
}

.arx-toast button {
  background: #fff;
  border: 0;
  border-radius: .42rem;
  color: #17202b;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  min-height: 32px;
  padding: .3rem .65rem;
}

.arx-dialog-backdrop {
  align-items: center;
  background: rgba(14, 23, 34, .58);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 1rem;
  position: fixed;
  z-index: 10020;
}

.arx-dialog {
  background: var(--arx-surface);
  border: 1px solid var(--arx-border);
  border-radius: .85rem;
  box-shadow: var(--arx-shadow);
  color: var(--arx-text);
  max-height: min(86vh, 760px);
  max-width: 680px;
  overflow: auto;
  padding: 1rem;
  width: 100%;
}

.arx-dialog h2 {
  font-size: 1.25rem;
  margin: 0 0 .35rem;
}

.arx-dialog h3 {
  font-size: 1rem;
  margin: 1rem 0 .35rem;
}

.arx-dialog p {
  color: var(--arx-muted);
  margin: .25rem 0 .75rem;
}

.arx-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: flex-end;
  margin-top: 1rem;
}

.arx-dialog-list {
  border: 1px solid var(--arx-border);
  border-radius: .55rem;
  list-style: none;
  margin: .7rem 0;
  max-height: 340px;
  overflow: auto;
  padding: 0;
}

.arx-dialog-list li {
  align-items: center;
  border-bottom: 1px solid var(--arx-border);
  display: flex;
  gap: .65rem;
  justify-content: space-between;
  padding: .62rem .7rem;
}

.arx-dialog-list li:last-child {
  border-bottom: 0;
}

.arx-dialog-list small {
  color: var(--arx-muted);
  display: block;
  margin-top: .18rem;
}

.arx-smart-grid {
  display: grid;
  gap: .65rem;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.arx-smart-card {
  background: var(--arx-surface-soft);
  border: 1px solid var(--arx-border);
  border-radius: .65rem;
  padding: .7rem;
}

.arx-smart-card strong {
  display: block;
  font-size: 1.05rem;
}

.arx-smart-meter {
  background: #dce4ef;
  border-radius: 999px;
  height: .65rem;
  overflow: hidden;
}

.arx-smart-meter > span {
  background: linear-gradient(90deg, var(--arx-success), var(--arx-accent));
  display: block;
  height: 100%;
}

.arx-install-card {
  background: #eef5ff;
  border: 1px solid #aac9f6;
  border-radius: .75rem;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  box-shadow: var(--arx-shadow);
  color: #173c6e;
  max-width: 350px;
  padding: .85rem;
  position: fixed;
  right: 1rem;
  z-index: 10000;
}

.arx-install-card strong,
.arx-install-card span {
  display: block;
}

.arx-install-card span {
  font-size: .86rem;
  margin: .25rem 0 .65rem;
}

.arx-install-card .arx-close {
  background: transparent;
  border: 0;
  cursor: pointer;
  float: right;
  font-size: 1.2rem;
}

.arx-mobile-nav {
  display: none;
}

@keyframes arx-slide-in {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@media (max-width: 768px) {
  html:not(.iframe) body.task-mail {
    padding-bottom: calc(62px + env(safe-area-inset-bottom));
  }

  .arx-smartbar {
    padding-bottom: .5rem;
    scrollbar-width: none;
  }

  .arx-smartbar button {
    justify-content: center;
    min-width: 40px;
    padding-inline: .45rem;
    width: 40px;
  }

  .arx-smartbar button > span:not(.arx-icon) {
    display: none;
  }

  .arx-smartbar .arx-status:not(.offline) {
    display: none;
  }

  .arx-smartbar::-webkit-scrollbar {
    display: none;
  }

  .arx-mobile-nav {
    align-items: center;
    background: var(--arx-surface);
    border-top: 1px solid var(--arx-border);
    bottom: 0;
    display: flex;
    height: calc(58px + env(safe-area-inset-bottom));
    inset-inline: 0;
    justify-content: space-around;
    padding-bottom: env(safe-area-inset-bottom);
    position: fixed;
    z-index: 9000;
  }

  .arx-mobile-nav button {
    background: transparent;
    border: 0;
    color: var(--arx-muted);
    display: grid;
    font: inherit;
    font-size: .72rem;
    gap: .12rem;
    justify-items: center;
    min-height: 48px;
    min-width: 58px;
  }

  .arx-mobile-nav button span:first-child {
    font-size: 1.25rem;
  }

  .arx-dialog-backdrop {
    align-items: flex-end;
    padding: 0;
  }

  .arx-dialog {
    border-bottom: 0;
    border-radius: 1rem 1rem 0 0;
    max-height: 91vh;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }

  #messagelist tr {
    min-height: 52px;
  }

  #messagelist td {
    padding-bottom: .55rem !important;
    padding-top: .55rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --arx-border: #66758a;
  }

  .arx-smartbar button,
  .arx-dialog button {
    border-width: 2px;
  }
}