:root {
  --mt-ink: #0f172a;
  --mt-slate: #334155;
  --mt-muted: #64748b;
  --mt-line: #e2e8f0;
  --mt-surface: #ffffff;
  --mt-canvas: #f5f7fb;
  --mt-blue: #2563eb;
  --mt-blue-strong: #1d4ed8;
  --mt-teal: #14b8a6;
  --mt-shadow: 0 18px 55px rgba(15, 23, 42, .12);
  --mt-shadow-soft: 0 8px 28px rgba(15, 23, 42, .08);
}

html,
body {
  color: var(--mt-ink);
  background: var(--mt-canvas);
  font-family: Inter, "Noto Sans KR", Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  letter-spacing: -.01em;
}

a {
  color: var(--mt-blue);
}

.btn-primary,
.button.mainaction,
button.mainaction,
input.mainaction {
  color: #fff;
  border-color: var(--mt-blue);
  background: linear-gradient(135deg, var(--mt-blue), var(--mt-blue-strong));
  box-shadow: 0 8px 18px rgba(37, 99, 235, .22);
}

.btn-primary:hover,
.button.mainaction:hover,
button.mainaction:hover,
input.mainaction:hover {
  border-color: var(--mt-blue-strong);
  background: var(--mt-blue-strong);
  transform: translateY(-1px);
}

.form-control,
input[type="text"],
input[type="password"],
input[type="email"],
select,
textarea {
  border-color: #cbd5e1;
  border-radius: 10px;
  background-color: #fff;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}

#layout-menu {
  border: 0;
  background: linear-gradient(180deg, #111d35 0%, #0b1220 100%);
  box-shadow: 5px 0 25px rgba(15, 23, 42, .12);
}

#layout-menu .popover-header,
#layout-menu .menu.toolbar a,
#layout-menu .special-buttons a {
  color: #cbd5e1;
}

#layout-menu .menu.toolbar a:hover,
#layout-menu .menu.toolbar a.selected,
#layout-menu .special-buttons a:hover,
#layout-menu .special-buttons a.selected {
  color: #fff;
  background: rgba(56, 189, 248, .13);
}

#layout-menu .menu.toolbar a.selected::before,
#layout-menu .special-buttons a.selected::before {
  color: #5eead4;
}

#layout-sidebar,
#layout-list,
#layout-content {
  border-color: var(--mt-line);
  background-color: var(--mt-surface);
}

#layout-sidebar > .header,
#layout-list > .header,
#layout-content > .header,
.popupmenu .menu,
.popover-header {
  border-color: var(--mt-line);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(14px);
}

.listing li,
.listing tbody tr,
.messagelist tbody tr {
  border-color: #edf1f6;
  transition: background-color .14s ease, box-shadow .14s ease;
}

.listing li:hover,
.listing tbody tr:hover,
.messagelist tbody tr:hover {
  background-color: #f8fafc;
}

.listing li.selected,
.listing tbody tr.selected,
.messagelist tbody tr.selected {
  background-color: #eff6ff;
  box-shadow: inset 3px 0 0 var(--mt-blue);
}

.messagelist .subject,
.listing .name {
  color: var(--mt-ink);
  font-weight: 650;
}

.messagelist .fromto,
.messagelist .date,
.listing .description {
  color: var(--mt-muted);
}

.toolbar a.button,
.toolbar .dropbutton,
.header a.button {
  border-radius: 9px;
}

.toolbar a.button:hover,
.header a.button:hover {
  background-color: #eef2ff;
}

.popupmenu,
.popover,
.ui-dialog {
  overflow: hidden;
  border: 1px solid var(--mt-line);
  border-radius: 14px;
  box-shadow: var(--mt-shadow-soft);
}

.quota-widget .bar,
.progress .bar {
  background: linear-gradient(90deg, var(--mt-blue), var(--mt-teal));
}

.message-partheaders,
.message-header {
  border-color: var(--mt-line);
  background: #f8fafc;
}

body.task-login {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 8%, rgba(56, 189, 248, .24), transparent 31rem),
    radial-gradient(circle at 92% 92%, rgba(20, 184, 166, .18), transparent 28rem),
    linear-gradient(135deg, #eef6ff 0%, #f8fafc 48%, #ecfeff 100%);
}

body.task-login::before {
  position: fixed;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  opacity: .42;
  background-image:
    linear-gradient(rgba(37, 99, 235, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, .05) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, #000, transparent 82%);
}

body.task-login #layout,
body.task-login #layout-content {
  min-height: 100vh;
  background: transparent;
}

body.task-login #layout-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
}

body.task-login #logo {
  width: min(285px, 75vw);
  height: auto;
  margin: 0 0 24px;
}

body.task-login #login-form {
  width: min(440px, calc(100vw - 32px));
  margin: 0;
  padding: 34px 38px 28px;
  border: 1px solid rgba(203, 213, 225, .78);
  border-radius: 22px;
  background: rgba(255, 255, 255, .93);
  box-shadow: var(--mt-shadow);
  backdrop-filter: blur(18px);
}

body.task-login #login-form::before {
  display: block;
  margin: 0 0 6px;
  color: var(--mt-ink);
  content: "메일에 오신 것을 환영합니다";
  font-size: 1.25rem;
  font-weight: 760;
  text-align: center;
}

body.task-login #login-form::after {
  display: block;
  margin-top: 22px;
  color: #94a3b8;
  content: "안전한 MyToolly 메일 서비스";
  font-size: .78rem;
  text-align: center;
}

body.task-login #login-form .form-control {
  min-height: 48px;
  padding: 10px 14px;
  border-radius: 11px;
  font-size: .95rem;
}

body.task-login #login-form .button,
body.task-login #login-form button,
body.task-login #login-form input[type="submit"] {
  min-height: 48px;
  border-radius: 11px;
  font-weight: 700;
}

body.task-login #login-footer {
  margin-top: 18px;
  color: #94a3b8;
  font-size: .76rem;
}

.dark-mode body,
.dark-mode body.task-login {
  color: #e2e8f0;
  background: #0b1220;
}

.dark-mode #layout-sidebar,
.dark-mode #layout-list,
.dark-mode #layout-content,
.dark-mode #layout-sidebar > .header,
.dark-mode #layout-list > .header,
.dark-mode #layout-content > .header {
  color: #e2e8f0;
  border-color: #263349;
  background-color: #111c2f;
}

.dark-mode .listing li:hover,
.dark-mode .listing tbody tr:hover,
.dark-mode .messagelist tbody tr:hover {
  background-color: #17243a;
}

.dark-mode .listing li.selected,
.dark-mode .listing tbody tr.selected,
.dark-mode .messagelist tbody tr.selected {
  background-color: #172f52;
}

.dark-mode body.task-login #login-form {
  border-color: #334155;
  background: rgba(15, 23, 42, .94);
}

.dark-mode body.task-login #login-form::before {
  color: #f8fafc;
}

@media (max-width: 768px) {
  body.task-login #layout-content {
    padding: 24px 16px;
  }

  body.task-login #logo {
    width: 235px;
    margin-bottom: 18px;
  }

  body.task-login #login-form {
    padding: 28px 22px 22px;
    border-radius: 18px;
  }

  #layout-menu {
    box-shadow: 0 -4px 20px rgba(15, 23, 42, .12);
  }
}

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