:root {
  --raku-bg: #ffffff;
  --raku-surface: #ffffff;
  --raku-surface-subtle: #fbfbfa;
  --raku-sidebar: #f7f7f5;
  --raku-sidebar-active: #efefec;
  --raku-text: #1f1f1f;
  --raku-muted: #6f6f69;
  --raku-line: #e6e6e1;
  --raku-blue: #2563eb;
  --raku-blue-hover: #1d4ed8;
  --raku-blue-soft: #eff6ff;
  --raku-danger: #b91c1c;
  --raku-radius: 6px;
  --raku-radius-lg: 8px;
  --raku-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --raku-font: var(--raku-font-sans);
  --raku-font-size-xs: 12px;
  --raku-font-size-sm: 13px;
  --raku-font-size-md: 14px;
  --raku-font-size-section: 15px;
  --raku-font-size-page-title: 22px;
  --raku-line-height-heading: 1.22;
  --raku-line-height-tight: 1.3;
  --raku-line-height-control: 1.35;
  --raku-line-height-body: 1.45;
  --raku-font-weight-regular: 400;
  --raku-font-weight-medium: 500;
  --raku-font-weight-unread: 600;
  --raku-icon-folder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6a2 2 0 0 1 2-2h5l2 2h7a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z'/%3E%3C/svg%3E");
  --raku-icon-inbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16v16H4Z'/%3E%3Cpath d='M4 13h4l2 3h4l2-3h4'/%3E%3C/svg%3E");
  --raku-icon-pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m14 4 6 6'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3Cpath d='M12 20h9'/%3E%3C/svg%3E");
  --raku-icon-send: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E");
  --raku-icon-flame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22c4 0 7-3 7-7 0-3-2-5-3-7-1 2-2 3-3 4 0-4-2-7-5-9 0 5-4 7-4 12 0 4 3 7 8 7Z'/%3E%3Cpath d='M9 18c0-2 1-3 3-5 0 2 2 3 2 5a3 3 0 0 1-5 0Z'/%3E%3C/svg%3E");
  --raku-icon-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='m19 6-1 14H6L5 6'/%3E%3Cpath d='M10 11v5M14 11v5'/%3E%3C/svg%3E");
  --raku-icon-archive: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h18v4H3Z'/%3E%3Cpath d='M5 9v11h14V9'/%3E%3Cpath d='M10 13h4'/%3E%3C/svg%3E");
  --raku-icon-chevron-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
  --raku-icon-chevrons-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m13 17-5-5 5-5M19 17l-5-5 5-5'/%3E%3C/svg%3E");
  --raku-icon-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  --raku-icon-chevrons-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m11 17 5-5-5-5M5 17l5-5-5-5'/%3E%3C/svg%3E");
}

html,
body {
  color-scheme: light only;
  color: var(--raku-text);
  background: var(--raku-bg);
  font-family: var(--raku-font);
  font-size: var(--raku-font-size-md);
  font-weight: var(--raku-font-weight-regular);
  line-height: var(--raku-line-height-body);
  letter-spacing: 0;
}

a,
.listing li > a,
.listing tr > td > a {
  color: var(--raku-text);
}

a:hover,
a:focus {
  color: var(--raku-text);
}

.btn,
button,
input,
optgroup,
select,
textarea,
.form-control {
  border-radius: var(--raku-radius);
  font-family: var(--raku-font);
  font-size: var(--raku-font-size-md);
  font-weight: var(--raku-font-weight-regular);
  line-height: var(--raku-line-height-body);
}

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
select {
  border-color: var(--raku-line);
  color: var(--raku-text);
  background-color: var(--raku-surface);
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--raku-blue);
  box-shadow: 0 0 0 3px rgb(37 99 235 / 12%);
}

.btn-primary,
.button.mainaction,
button.mainaction,
input.button.mainaction {
  border-color: var(--raku-blue) !important;
  background: var(--raku-blue) !important;
  color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.button.mainaction:hover,
.button.mainaction:focus,
button.mainaction:hover,
button.mainaction:focus {
  border-color: var(--raku-blue-hover) !important;
  background: var(--raku-blue-hover) !important;
}

#layout-menu {
  box-sizing: border-box;
  border-right: 1px solid var(--raku-line);
  background: var(--raku-sidebar) !important;
}

#layout-menu .popover-header {
  border-bottom: 1px solid var(--raku-line);
  background: var(--raku-sidebar) !important;
}

#layout-menu .popover-header img {
  object-fit: contain;
}

#layout-menu .popover-header .rakucloud-mail-home {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  height: 100%;
  border-radius: var(--raku-radius);
  color: inherit;
  text-decoration: none;
}

#layout-menu .popover-header .rakucloud-mail-home:focus-visible {
  outline: 2px solid var(--raku-blue);
  outline-offset: -3px;
}

#layout-menu .popover-header .rakucloud-mail-home img {
  pointer-events: none;
}

#layout-menu #taskmenu a,
#layout-menu #taskmenu a.compose {
  width: auto !important;
  max-width: none !important;
  min-height: 36px;
  height: 36px !important;
  margin: 0 8px 4px;
  padding: 7px 8px !important;
  border-radius: var(--raku-radius);
  color: #3f3f46 !important;
  background-color: transparent !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 400;
  line-height: 22px !important;
  text-align: left !important;
}

#layout-menu #taskmenu {
  padding-top: 8px;
  text-align: left;
}

#layout-menu #taskmenu > span,
#layout-menu #taskmenu .action-buttons,
#layout-menu #taskmenu .special-buttons {
  display: block;
  width: 100%;
}

#layout-menu #taskmenu a::before {
  display: none !important;
  content: none !important;
}

#layout-menu #taskmenu a > span.inner {
  display: block !important;
  padding: 0 !important;
  overflow: hidden;
  font-size: 14px !important;
  font-weight: inherit;
  line-height: 22px;
  text-overflow: ellipsis;
}

#layout-menu #taskmenu a:hover,
#layout-menu #taskmenu a:focus,
#layout-menu #taskmenu a:focus-visible,
#layout-menu #taskmenu a.selected,
#layout-menu #taskmenu a.button-selected,
#layout-menu #taskmenu a[aria-current="page"] {
  color: var(--raku-text) !important;
  background-color: var(--raku-sidebar-active) !important;
}

#layout-menu #taskmenu a.selected,
#layout-menu #taskmenu a.button-selected,
#layout-menu #taskmenu a[aria-current="page"] {
  font-weight: 500;
}

#layout-menu #taskmenu a:focus-visible {
  outline: 2px solid var(--raku-blue);
  outline-offset: -2px;
}

#layout-menu #taskmenu .special-buttons,
#layout-menu #taskmenu .action-buttons {
  background-color: transparent !important;
}

#layout-menu #taskmenu a.theme,
#layout-menu #taskmenu a.about {
  display: none !important;
}

#layout-menu #taskmenu .special-buttons {
  left: 0;
}

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

#layout-content,
#layout-content > .content,
#layout-content > .formcontent,
.box,
.boxcontent {
  background: var(--raku-surface);
}

#layout > div > .header,
#layout-content > .header,
.boxtitle {
  border-color: var(--raku-line);
  background: var(--raku-surface);
  color: var(--raku-text);
}

.listing li,
.listing tbody tr,
.listing li > a,
.listing tbody tr > td {
  border-color: var(--raku-line);
}

.listing li:hover,
.listing tbody tr:hover,
.listing li.selected,
.listing tbody tr.selected {
  background: var(--raku-sidebar-active);
}

#settings-menu li > a,
#settings-menu .listitem > a {
  min-height: 36px;
  padding: 7px 12px !important;
  color: #3f3f46 !important;
  background: transparent !important;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}

#settings-menu li > a::before,
#settings-menu .listitem > a::before,
#settings-menu.settings-default-icon li > a::before {
  display: none !important;
  content: none !important;
}

#settings-menu li.selected > a,
#settings-menu li > a.selected,
#settings-menu li > a:hover,
#settings-menu li > a:focus,
#settings-menu li > a:focus-visible {
  color: var(--raku-text) !important;
  background: var(--raku-sidebar-active) !important;
}

#settings-menu li.selected > a,
#settings-menu li > a.selected {
  font-weight: 500;
}

#settings-menu li > a:focus-visible {
  outline: 2px solid var(--raku-blue);
  outline-offset: -2px;
}

.popupmenu,
.popover,
.ui-dialog,
.modal-content {
  border-color: var(--raku-line);
  border-radius: var(--raku-radius-lg);
  box-shadow: 0 12px 30px rgb(31 31 31 / 12%);
  font-family: var(--raku-font);
}

.rcmail-inline-message,
.rcmail-inline-message button {
  font-family: var(--raku-font);
}

@media screen and (min-width: 481px) {
  #layout-menu {
    width: 120px !important;
    min-width: 120px;
    max-width: 120px;
    flex: 0 0 120px;
  }
}

/* Signed-in UI: user-requested regular typography and thin navigation icons. */
body:not(.task-login) #layout,
body:not(.task-login) #layout *,
body:not(.task-login) .popupmenu,
body:not(.task-login) .popupmenu *,
body:not(.task-login) .popover,
body:not(.task-login) .popover *,
body:not(.task-login) .ui-dialog,
body:not(.task-login) .ui-dialog * {
  font-weight: var(--raku-font-weight-regular) !important;
}

/* Use medium only for semantic hierarchy; account text,
   message counts, pagination, and navigation glyphs stay regular. */
body:not(.task-login) #layout h1,
body:not(.task-login) #layout h2,
body:not(.task-login) #layout h3,
body:not(.task-login) .boxtitle,
body:not(.task-login) .ui-dialog-title,
body:not(.task-login) #layout-menu #taskmenu a.selected,
body:not(.task-login) #layout-menu #taskmenu a.button-selected,
body:not(.task-login) #layout-menu #taskmenu a[aria-current="page"],
body:not(.task-login) #settings-menu li.selected > a,
body:not(.task-login) #settings-menu li > a.selected,
body:not(.task-login) #mailboxlist li.selected > a,
body:not(.task-login) #layout .rakucloud-setting-row dt,
body:not(.task-login) #layout .rakucloud-forward-field label {
  font-weight: var(--raku-font-weight-medium) !important;
}

/* Preserve Roundcube's seen/unseen state: emphasize only unread message text,
   not dates, counts, flags, or navigation. This also covers classic list mode. */
body.task-mail #messagelist tr.unread td.subject span.subject,
body.task-mail #messagelist tr.unread td.subject span.subject > a,
body.task-mail #messagelist tr.unread td.subject > a,
body.task-mail #messagelist tr.unread span.fromto,
body.task-mail #messagelist tr.unread span.fromto a,
body.task-mail #messagelist tr.unread td.from,
body.task-mail #messagelist tr.unread td.from a,
body.task-mail #messagelist tr.unread td.from span,
body.task-mail #messagelist tr.unread td.fromto,
body.task-mail #messagelist tr.unread td.fromto a,
body.task-mail #messagelist tr.unread td.fromto span {
  font-weight: var(--raku-font-weight-unread) !important;
}

body.task-mail #messagelist tr.unread .msgicon.unread,
body.task-mail #messagelist tr.unread td.status .unread {
  color: var(--raku-blue) !important;
}

/* Keep reply/forward symbols intact when an unread message has those flags. */
body.task-mail #messagelist tr.unread .msgicon.unread:not(.replied):not(.forwarded)::before,
body.task-mail #messagelist tr.unread td.status .unread:not(.replied):not(.forwarded)::before {
  font-size: 9px;
}

/* Plain-text messages use the same proportional family as the mail UI. */
.message-part div.pre {
  font-family: var(--raku-font) !important;
  font-weight: 400;
}

/* Roundcube defaults the plain-text composer and spellcheck overlay to a
   monospace family. Keep every message-authoring surface on the Raku font. */
body:not(.task-login) #composebodycontainer > textarea#composebody,
body:not(.task-login) .html-editor > textarea#composebody,
body:not(.task-login) #composebodycontainer > .googie_edit_layer {
  font-family: var(--raku-font) !important;
  font-size: 14px;
  font-weight: var(--raku-font-weight-regular) !important;
  line-height: var(--raku-line-height-body);
  letter-spacing: 0;
}

#mailboxlist.folderlist li a::before {
  --raku-outline-icon: var(--raku-icon-folder);
  content: "" !important;
  display: inline-block;
  float: none;
  width: 18px;
  height: 18px;
  margin: 0 8px 0 0;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask: var(--raku-outline-icon) center / 18px 18px no-repeat;
  mask: var(--raku-outline-icon) center / 18px 18px no-repeat;
}

#mailboxlist.folderlist li.inbox > a::before {
  --raku-outline-icon: var(--raku-icon-inbox);
}

#mailboxlist.folderlist li.drafts > a::before {
  --raku-outline-icon: var(--raku-icon-pencil);
}

#mailboxlist.folderlist li.sent > a::before {
  --raku-outline-icon: var(--raku-icon-send);
}

#mailboxlist.folderlist li.junk > a::before {
  --raku-outline-icon: var(--raku-icon-flame);
}

#mailboxlist.folderlist li.trash > a::before {
  --raku-outline-icon: var(--raku-icon-trash);
}

#mailboxlist.folderlist li.archive > a::before {
  --raku-outline-icon: var(--raku-icon-archive);
}

#mailboxlist.folderlist li a:focus-visible,
.menu.pagenav a:focus-visible,
#layout-sidebar > .header a.sidebar-menu:focus-visible {
  outline: 2px solid var(--raku-blue);
  outline-offset: -2px;
}

.menu.pagenav a::before {
  --raku-pagenav-icon: var(--raku-icon-chevron-right);
  content: "" !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  background-color: currentColor;
  -webkit-mask: var(--raku-pagenav-icon) center / 18px 18px no-repeat;
  mask: var(--raku-pagenav-icon) center / 18px 18px no-repeat;
}

.menu.pagenav a.firstpage::before {
  --raku-pagenav-icon: var(--raku-icon-chevrons-left);
}

.menu.pagenav a.prevpage::before {
  --raku-pagenav-icon: var(--raku-icon-chevron-left);
}

.menu.pagenav a.nextpage::before {
  --raku-pagenav-icon: var(--raku-icon-chevron-right);
}

.menu.pagenav a.lastpage::before {
  --raku-pagenav-icon: var(--raku-icon-chevrons-right);
}

#layout-sidebar > .header a.sidebar-menu::before {
  content: "\22ee" !important;
  font-family: var(--raku-font) !important;
  font-size: 18px;
  font-weight: 400 !important;
}

/* Login screen: RakuSign-aligned product shell with a focused login card. */
body.task-login {
  min-height: 100vh;
  display: grid !important;
  grid-template-rows: 68px minmax(0, 1fr) 72px;
  margin: 0;
  overflow: auto;
  background: var(--raku-bg);
}

body.task-login .rakucloud-login-header {
  grid-row: 1;
  width: 100%;
  height: 68px;
  display: flex;
  align-items: center;
  padding: 0 max(24px, calc((100vw - 1180px) / 2));
  border-bottom: 1px solid var(--raku-line);
  background: rgb(255 255 255 / 97%);
}

body.task-login .rakucloud-login-header-brand {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  color: var(--raku-text);
  text-decoration: none;
}

body.task-login .rakucloud-login-header-brand img {
  width: 48px;
  height: 32px;
  flex: 0 0 auto;
  object-fit: contain;
}

body.task-login .rakucloud-login-header-brand:focus-visible,
body.task-login .rakucloud-login-footer a:focus-visible {
  outline: 2px solid var(--raku-blue);
  outline-offset: 2px;
}

body.task-login .rakucloud-login-header-copy,
body.task-login .rakucloud-login-header-product,
body.task-login .rakucloud-login-header-copy small {
  display: block;
}

body.task-login .rakucloud-login-header-product {
  color: var(--raku-text);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.15;
}

body.task-login .rakucloud-login-header-copy small {
  margin-top: 1px;
  color: var(--raku-muted);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
}

body.task-login .rakucloud-product-mail {
  color: var(--raku-blue);
}

body.task-login .rakucloud-login-footer {
  grid-row: 3;
  width: 100%;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 max(24px, calc((100vw - 1180px) / 2));
  border-top: 1px solid var(--raku-line);
  background: var(--raku-surface);
}

body.task-login .rakucloud-login-footer a {
  color: var(--raku-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  text-decoration: none;
}

body.task-login .rakucloud-login-footer a:hover,
body.task-login .rakucloud-login-footer a:focus {
  color: var(--raku-text);
}

body.task-login #layout {
  grid-row: 2;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  background: var(--raku-bg);
}

body.task-login #layout-content {
  position: static;
  flex: 0 1 420px;
  width: min(100%, 420px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 28px;
  border: 1px solid var(--raku-line);
  border-radius: var(--raku-radius-lg);
  background: var(--raku-surface);
  text-align: left;
}

body.task-login .rakucloud-login-brand {
  align-self: center;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* The shared 420px login shell owns the only card border and padding. */
body.task-login #layout-content .rakucloud-auth-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

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

body.task-login .rakucloud-login-product {
  margin: 0;
  color: var(--raku-text);
  font-family: var(--raku-font);
  font-size: 36px;
  font-weight: 400;
  line-height: 1.2;
}

#login-form {
  position: static;
  top: auto;
  width: 100%;
  max-width: none;
  margin: 0;
}

#login-form table,
#login-form tbody {
  width: 100%;
}

#login-form tr {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 0 16px;
}

#login-form td.title,
#login-form td.title label {
  display: block !important;
  width: 100%;
  padding: 0 0 6px;
  color: var(--raku-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}

#login-form td.input {
  display: block;
  width: 100%;
  padding: 0;
}

#login-form .input-group {
  position: relative;
  display: block;
  width: 100%;
}

#login-form .input-group-prepend,
#login-form .input-group-text {
  display: none;
}

#login-form .form-control {
  width: 100%;
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid var(--raku-line);
  border-radius: var(--raku-radius) !important;
  font: inherit;
}

#login-form .form-control:focus {
  border-color: var(--raku-line);
  box-shadow: none;
  outline: revert;
}

#login-form .rakucloud-password-field .form-control {
  padding-right: 48px;
}

#login-form .rakucloud-password-field {
  position: relative;
}

.rakucloud-password-toggle {
  position: absolute;
  z-index: 4;
  top: 4px;
  right: 5px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--raku-muted);
  cursor: pointer;
}

.rakucloud-password-toggle:hover {
  color: var(--raku-text);
  background: var(--raku-sidebar-active);
}

.rakucloud-password-toggle:focus-visible {
  outline: 2px solid var(--raku-blue);
  outline-offset: 1px;
}

.rakucloud-password-icon::before {
  content: "\f06e";
  font-family: Icons;
  font-size: 16px;
  font-style: normal;
  font-weight: 900;
}

.rakucloud-password-toggle[aria-pressed="true"] .rakucloud-password-icon::before {
  content: "\f070";
}

#login-form .formbuttons {
  margin: 6px 0 0;
}

#rcmloginsubmit {
  width: 100%;
  min-height: 42px;
  padding: 9px 16px;
  border: 1px solid var(--raku-blue);
  border-radius: var(--raku-radius);
  background: var(--raku-blue);
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
}

#rcmloginsubmit:hover,
#rcmloginsubmit:focus {
  border-color: var(--raku-blue-hover);
  background: var(--raku-blue-hover);
}

#login-footer {
  display: none !important;
}

/* Signed-in connection guide: same density and hierarchy as RakuCRM. */
.rakucloud-client-setup-page {
  padding: 0;
}

.rakucloud-client-setup-page > .boxcontent {
  width: 100%;
  max-width: none;
  padding: 16px 18px;
}

.rakucloud-guide-heading h2 {
  margin: 0;
  color: var(--raku-text);
  font-size: var(--raku-font-size-page-title);
  font-weight: var(--raku-font-weight-medium);
  line-height: var(--raku-line-height-heading);
}

.rakucloud-guide-heading p {
  margin: 8px 0 16px;
  color: var(--raku-muted);
  font-size: var(--raku-font-size-sm);
  font-weight: var(--raku-font-weight-regular);
  line-height: var(--raku-line-height-body);
}

.rakucloud-settings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 10px;
}

.rakucloud-settings-card {
  border: 1px solid var(--raku-line);
  border-radius: 7px;
  background: var(--raku-surface);
  min-width: 0;
  padding: 12px;
}

.rakucloud-settings-card h3 {
  margin: 0 0 10px;
  padding: 0;
  color: var(--raku-text);
  font-size: var(--raku-font-size-section);
  font-weight: var(--raku-font-weight-medium);
  line-height: var(--raku-line-height-control);
}

.rakucloud-settings-card dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.rakucloud-setting-row {
  display: grid;
  gap: 3px;
  padding-top: 8px;
  border-top: 1px solid var(--raku-line);
}

.rakucloud-setting-row dt,
.rakucloud-setting-row dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.rakucloud-setting-row dt {
  color: var(--raku-muted);
  font-size: var(--raku-font-size-xs);
  font-weight: var(--raku-font-weight-medium);
  line-height: var(--raku-line-height-tight);
}

.rakucloud-setting-row dd {
  color: var(--raku-text);
  font-size: var(--raku-font-size-md);
  font-weight: var(--raku-font-weight-regular);
  line-height: var(--raku-line-height-body);
}

.rakucloud-setting-row dd a {
  color: var(--raku-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rakucloud-setting-row dd a:hover,
.rakucloud-setting-row dd a:focus {
  color: var(--raku-text);
}

.rakucloud-guide-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.6fr);
  align-items: start;
  gap: 10px;
  margin-top: 10px;
}

.rakucloud-guide-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--raku-line);
  border-radius: 7px;
  background: var(--raku-surface);
}

.rakucloud-guide-card h3 {
  margin: 0 0 10px;
  color: var(--raku-text);
  font-size: var(--raku-font-size-section);
  font-weight: var(--raku-font-weight-medium);
  line-height: var(--raku-line-height-control);
}

.rakucloud-guide-card ol,
.rakucloud-guide-card ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 20px;
  color: #475569;
  font-size: var(--raku-font-size-md);
  font-weight: var(--raku-font-weight-regular);
  line-height: var(--raku-line-height-body);
}

.rakucloud-guide-notes {
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px solid var(--raku-line);
  border-radius: var(--raku-radius);
  background: var(--raku-surface-subtle);
}

.rakucloud-guide-notes h3 {
  margin: 0 0 6px;
  color: var(--raku-text);
  font-size: var(--raku-font-size-section);
  font-weight: var(--raku-font-weight-medium);
  line-height: var(--raku-line-height-control);
}

.rakucloud-guide-notes ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
  color: var(--raku-muted);
  font-size: var(--raku-font-size-sm);
  font-weight: var(--raku-font-weight-regular);
  line-height: var(--raku-line-height-body);
}

/* Forwarding settings: same density and hierarchy as RakuCRM. */
.rakucloud-forward-page {
  padding: 0;
}

.rakucloud-forward-page > .boxcontent {
  width: 100%;
  max-width: 640px;
  padding: 16px 18px;
}

.rakucloud-forward-page h2 {
  margin: 0;
  color: var(--raku-text);
  font-size: var(--raku-font-size-page-title);
  font-weight: var(--raku-font-weight-medium);
  line-height: var(--raku-line-height-heading);
}

.rakucloud-forward-intro {
  margin: 8px 0 16px;
  color: var(--raku-muted);
  font-size: var(--raku-font-size-sm);
  font-weight: var(--raku-font-weight-regular);
  line-height: var(--raku-line-height-body);
}

.rakucloud-forward-field {
  display: grid;
  gap: 5px;
  margin-top: 12px;
}

.rakucloud-forward-field label {
  color: var(--raku-text);
  font-size: var(--raku-font-size-xs);
  font-weight: var(--raku-font-weight-medium);
  line-height: var(--raku-line-height-tight);
}

.rakucloud-forward-field input[type="email"] {
  width: 100%;
  max-width: 420px;
  height: 42px;
  padding: 0 10px;
  border: 1px solid var(--raku-line);
  border-radius: var(--raku-radius);
  background: var(--raku-surface);
  color: var(--raku-text);
  font-size: var(--raku-font-size-md);
  font-weight: var(--raku-font-weight-regular);
  line-height: var(--raku-line-height-body);
}

.rakucloud-forward-field input[type="email"]:focus {
  outline: 2px solid var(--raku-blue);
  outline-offset: 1px;
  border-color: var(--raku-blue);
}

.rakucloud-forward-field input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--raku-blue);
}

.rakucloud-forward-error {
  margin: 10px 0 0;
  color: var(--raku-danger);
  font-size: var(--raku-font-size-sm);
  font-weight: var(--raku-font-weight-regular);
  line-height: var(--raku-line-height-body);
}

.rakucloud-forward-notes {
  display: grid;
  gap: 4px;
  margin: 12px 0 0;
  padding-left: 18px;
  color: var(--raku-muted);
  font-size: var(--raku-font-size-sm);
  font-weight: var(--raku-font-weight-regular);
  line-height: var(--raku-line-height-body);
}

@media screen and (max-width: 1180px) {
  .rakucloud-settings-grid,
  .rakucloud-guide-grid {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 760px) {
  .rakucloud-client-setup-page > .boxcontent {
    padding: 14px;
  }
}

@media screen and (max-width: 480px) {
  body.task-login {
    grid-template-rows: 62px minmax(0, 1fr) 64px;
  }

  body.task-login .rakucloud-login-header {
    height: 62px;
    padding: 0 17px;
  }

  body.task-login .rakucloud-login-header-brand img {
    width: 40px;
    height: 27px;
  }

  body.task-login .rakucloud-login-footer {
    height: 64px;
    justify-content: flex-start;
    padding: 0 17px;
  }

  body.task-login #layout {
    align-items: center;
    padding: 16px;
  }

  body.task-login #layout-content {
    margin-top: 0;
    padding: 22px;
  }

  body.task-login .rakucloud-login-product {
    font-size: 32px;
  }
}

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