[v-cloak] {
      display: none;
    }

    html,
    body {
      width: 100%;
      min-height: 100%;
      margin: 0;
      overflow-x: hidden;
      background: var(--bg-main, #f8fafc);
    }

    body {
      font-family: 'Noto Sans KR', sans-serif;
    }

    .login-shell {
      min-height: 100vh;
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);
      background:
        linear-gradient(90deg, rgba(223, 246, 251, 0.92) 0%, rgba(229, 247, 252, 0.82) 49%, #ffffff 49%, #ffffff 100%);
      overflow: hidden;
    }

    .login-brand-panel,
    .login-form-panel {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: clamp(32px, 5vw, 72px);
      position: relative;
    }

    .login-brand-panel {
      background:
        radial-gradient(circle at 50% 42%, rgba(37, 99, 235, 0.12), transparent 28%),
        linear-gradient(135deg, rgba(178, 232, 242, 0.7), rgba(226, 246, 250, 0.78));
    }

    .login-brand-panel::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(15, 23, 42, 0.11) 1.5px, transparent 1.5px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.11) 1.5px, transparent 1.5px);
      background-size: 28px 28px;
      mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.2));
      opacity: 0.42;
      pointer-events: none;
    }

    .login-brand-content {
      position: relative;
      z-index: 1;
      width: min(460px, 100%);
      text-align: center;
      color: #0f2742;
    }

    .login-logo-frame {
      width: 220px;
      height: 220px;
      margin: 0 auto 28px;
      border-radius: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 28px;
      background: rgba(255, 255, 255, 0.9);
      border: 1px solid rgba(255, 255, 255, 0.92);
      box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
      backdrop-filter: blur(14px);
      overflow: hidden;
      box-sizing: border-box;
    }

    .login-brand-logo {
      display: block;
      width: 100%;
      height: 100%;
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      margin: 0;
    }

    .login-kicker {
      margin: 0 0 10px;
      color: #2563eb;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .login-brand-description {
      margin: 0 auto;
      max-width: 420px;
      color: #426075;
      font-size: 16px;
      line-height: 1.8;
      font-weight: 600;
      word-break: keep-all;
    }

    .login-brand-tags {
      margin-top: 26px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
    }

    .login-brand-tags span {
      padding: 9px 14px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.7);
      border: 1px solid rgba(37, 99, 235, 0.12);
      color: #155e9f;
      font-size: 12px;
      font-weight: 800;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    }

    .login-form-panel {
      background:
        radial-gradient(circle at 80% 20%, rgba(79, 125, 243, 0.08), transparent 32%),
        #ffffff;
    }

    .login-card {
      width: min(440px, 100%);
      padding: 42px;
      border-radius: 28px;
      background: rgba(255, 255, 255, 0.92);
      border: 1px solid rgba(226, 232, 240, 0.9);
      box-shadow: 0 28px 80px rgba(15, 23, 42, 0.12);
    }

    .login-card-header {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 34px;
    }

    .login-card h2 {
      margin: 0;
      color: #101827;
      font-size: 28px;
      line-height: 1.2;
      font-weight: 950;
    }

    .login-card-header p,
    .login-footnote {
      margin: 7px 0 0;
      color: #64748b;
      font-size: 14px;
      font-weight: 600;
    }

    .login-form {
      display: grid;
      gap: 20px;
    }

    .login-field label {
      display: block;
      margin-bottom: 8px;
      color: #1f2f46;
      font-size: 13px;
      font-weight: 850;
    }

    .login-input-wrap {
      height: 56px;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 14px;
      border-radius: 16px;
      background: #f8fafc;
      border: 1px solid #dbe4ef;
      color: #94a3b8;
      transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    }

    .login-input-wrap:focus-within {
      background: #ffffff;
      border-color: #4f7df3;
      box-shadow: 0 0 0 4px rgba(79, 125, 243, 0.14);
    }

    .login-input-wrap input {
      width: 100%;
      min-width: 0;
      border: 0;
      outline: 0;
      background: transparent;
      color: #0f172a;
      font-size: 15px;
      font-weight: 700;
    }

    .login-input-wrap input::placeholder {
      color: #94a3b8;
      font-weight: 600;
    }

    .login-password-toggle {
      width: 40px;
      height: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 40px;
      border: 0;
      border-radius: 12px;
      background: transparent;
      color: #64748b;
      cursor: pointer;
      transition: background 0.18s ease, color 0.18s ease;
    }

    .login-password-toggle:hover {
      background: #e8f0ff;
      color: #2563eb;
    }

    .login-error {
      margin: 0;
      padding: 11px 13px;
      border-radius: 14px;
      background: #fff1f2;
      border: 1px solid #fecdd3;
      color: #e11d48;
      text-align: center;
      font-size: 13px;
      font-weight: 800;
    }

    .login-submit {
      height: 56px;
      border: 0;
      border-radius: 16px;
      background: linear-gradient(135deg, #2563eb, #0b7cff);
      color: #ffffff;
      font-size: 15px;
      font-weight: 950;
      cursor: pointer;
      box-shadow: 0 18px 36px rgba(37, 99, 235, 0.28);
      transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
    }

    .login-submit:hover {
      transform: translateY(-1px);
      filter: brightness(1.04);
      box-shadow: 0 22px 44px rgba(37, 99, 235, 0.34);
    }

    .login-submit:active {
      transform: translateY(0);
    }

    .login-help-links {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-top: 18px;
      color: #b0bac8;
      font-size: 12px;
    }

    .login-help-link {
      border: 0;
      padding: 4px 2px;
      background: transparent;
      color: #3970d8;
      font: inherit;
      font-weight: 750;
      cursor: pointer;
      transition: color 0.18s ease, text-decoration-color 0.18s ease;
      text-underline-offset: 3px;
    }

    .login-help-link:hover,
    .login-help-link:focus-visible {
      color: #174fb7;
      text-decoration: underline;
      outline: none;
    }

    .auth-recovery-panel {
      margin-top: 18px;
      padding: 18px;
      border: 1px solid #dbe4ef;
      border-radius: 18px;
      background: #f8fbff;
    }

    .auth-recovery-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 16px;
    }

    .auth-recovery-header h3 {
      margin: 0;
      color: #16243a;
      font-size: 16px;
      font-weight: 900;
    }

    .auth-recovery-header p {
      margin: 5px 0 0;
      color: #64748b;
      font-size: 12px;
      line-height: 1.55;
      font-weight: 600;
    }

    .auth-recovery-close {
      width: 32px;
      height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 32px;
      border: 0;
      border-radius: 9px;
      background: transparent;
      color: #718096;
      cursor: pointer;
    }

    .auth-recovery-close:hover {
      background: #e8f0ff;
      color: #2563eb;
    }

    .auth-recovery-form {
      display: grid;
      gap: 9px;
    }

    .auth-recovery-form label {
      color: #26364d;
      font-size: 12px;
      font-weight: 800;
    }

    .auth-recovery-form input {
      width: 100%;
      min-width: 0;
      height: 44px;
      box-sizing: border-box;
      padding: 0 12px;
      border: 1px solid #d6e0ec;
      border-radius: 12px;
      outline: none;
      background: #ffffff;
      color: #0f172a;
      font-size: 13px;
      font-weight: 650;
    }

    .auth-recovery-form input:focus {
      border-color: #4f7df3;
      box-shadow: 0 0 0 3px rgba(79, 125, 243, 0.12);
    }

    .auth-recovery-submit {
      height: 44px;
      margin-top: 5px;
      border: 0;
      border-radius: 12px;
      background: #356fe0;
      color: #ffffff;
      font-size: 13px;
      font-weight: 850;
      cursor: pointer;
    }

    .auth-recovery-submit:hover:not(:disabled) {
      background: #245cc9;
    }

    .auth-recovery-submit:disabled {
      opacity: 0.65;
      cursor: wait;
    }

    .auth-recovery-message {
      margin: 12px 0 0;
      padding: 10px 12px;
      border-radius: 11px;
      font-size: 12px;
      line-height: 1.55;
      font-weight: 750;
      word-break: keep-all;
    }

    .auth-recovery-message.is-error {
      border: 1px solid #fecdd3;
      background: #fff1f2;
      color: #be123c;
    }

    .auth-recovery-message.is-success {
      border: 1px solid #bbf7d0;
      background: #f0fdf4;
      color: #15803d;
    }

    .login-footnote {
      margin-top: 24px;
      text-align: center;
      font-size: 12px;
      color: #8a98aa;
    }

    @media (max-width: 900px) {
      .login-shell {
        min-height: 100dvh;
        grid-template-columns: 1fr;
        background: linear-gradient(180deg, #e7f8fb 0%, #ffffff 46%, #ffffff 100%);
      }

      .login-brand-panel,
      .login-form-panel {
        min-height: auto;
        padding: 32px 20px;
      }

      .login-brand-panel {
        padding-top: 44px;
        padding-bottom: 20px;
      }

      .login-logo-frame {
        width: 170px;
        height: 170px;
        margin: 0 auto 18px;
        padding: 20px;
        border-radius: 30px;
      }

      .login-brand-logo {
        width: 100%;
        max-width: none;
        height: 100%;
      }

      .login-brand-description {
        font-size: 14px;
        line-height: 1.7;
      }

      .login-brand-tags {
        margin-top: 18px;
      }

      .login-form-panel {
        align-items: flex-start;
        padding-top: 18px;
      }

      .login-card {
        padding: 26px;
        border-radius: 24px;
      }

      .login-card-header {
        margin-bottom: 26px;
      }
    }

    #app {
      width: 100%;
      max-width: 100vw;
      min-width: 0;
      opacity: 1;
      visibility: visible;
    }

    body.app-preloading,
    body.app-booting {
      overflow-x: hidden;
    }

    body.app-booting #app {
      opacity: 0;
      visibility: hidden;
    }

    body.app-ready #app {
      opacity: 1;
      visibility: visible;
      transition: opacity 160ms ease;
    }

    body.app-preloading *,
    body.app-preloading *::before,
    body.app-preloading *::after,
    body.app-booting *,
    body.app-booting *::before,
    body.app-booting *::after {
      transition: none !important;
      animation: none !important;
    }
    .material-symbols-rounded {
      font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
      display: inline-block;
      vertical-align: middle;
      width: 1em;
      min-width: 1em;
      line-height: 1;
    }
    /* ?ㅽ겕濡ㅻ컮 而ㅼ뒪?€ */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    ::-webkit-scrollbar-track {
      background: transparent;
    }
    ::-webkit-scrollbar-thumb {
      background: rgba(156, 163, 175, 0.4);
      border-radius: 9999px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: rgba(156, 163, 175, 0.6);
    }
    /* ?좊땲硫붿씠???④낵 */
    .fade-enter-active, .fade-leave-active {
      transition: opacity 0.4s ease;
    }
    .fade-enter-from, .fade-leave-to {
      opacity: 0;
    }

    .l-jmail-compose-backdrop {
      z-index: 9999;
    }

    .l-jmail-compose-panel {
      max-height: calc(100vh - 32px);
      transition: width 0.18s ease, height 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    }

    .l-jmail-compose-panel.is-minimized {
      width: min(420px, calc(100vw - 32px)) !important;
      height: 48px !important;
      min-height: 48px !important;
      max-height: 48px !important;
      cursor: pointer;
    }

    .l-jmail-compose-panel.is-minimized > div:first-child {
      height: 48px;
      min-height: 48px;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
    }

    .l-jmail-compose-panel.is-minimized h3 {
      max-width: calc(100% - 110px);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 0 !important;
    }

    .l-jmail-compose-panel.is-minimized h3::after {
      content: attr(data-minibar-title);
      font-size: 13px;
      font-weight: 800;
    }

    .l-jmail-compose-panel.is-minimized form {
      display: none !important;
    }

    .l-jmail-compose-panel.is-expanded {
      width: min(960px, calc(100vw - 48px)) !important;
      height: min(820px, calc(100vh - 48px)) !important;
      max-height: calc(100vh - 48px);
    }

    .l-jmail-compose-backdrop.is-expanded {
      inset: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      left: 0 !important;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }

    @media (max-width: 900px) {
      body.mobile-compose-open .l-jmail-compose-panel.is-minimized,
      body.mobile-compose-open .l-jmail-compose-panel.is-expanded {
        width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
      }
    }

    .l-jmail-attachment-empty {
      min-height: 42px;
    }

    .l-jmail-mobile-compose-fab {
      display: none;
    }

    .search-highlight {
      display: inline;
      padding: 0 2px;
      border-radius: 4px;
      background: rgba(250, 204, 21, 0.35);
      color: inherit;
    }

    .dark .search-highlight {
      background: rgba(250, 204, 21, 0.28);
    }

    .l-jmail-memo-folder-section {
      position: relative;
    }

    .l-jmail-memo-folder-section > h4 {
      padding-right: 36px;
    }

    .l-jmail-memo-folder-inline-input {
      display: none !important;
    }

    div:has(> input[placeholder*="Enter"][class*="text-xs"]) {
      display: none !important;
    }

    aside input[placeholder*="Enter"][class*="text-xs"] {
      display: none !important;
    }

    .l-jmail-memo-folder-add-btn {
      position: absolute;
      top: -4px;
      right: 10px;
      width: 28px;
      height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 0;
      border-radius: 9999px;
      background: transparent;
      color: #9ca3af;
      cursor: pointer;
      transition: background-color 0.15s ease, color 0.15s ease;
    }

    .l-jmail-memo-folder-add-btn:hover {
      background: #f3f4f6;
      color: #4b5563;
    }

    .dark .l-jmail-memo-folder-add-btn:hover {
      background: #1e293b;
      color: #e2e8f0;
    }

    .l-jmail-memo-folder-add-btn .material-symbols-rounded {
      font-size: 18px;
    }

    :root {
      --bg-main: #f8fafc;
      --bg-sidebar: #ffffff;
      --bg-panel: #ffffff;
      --text-main: #111827;
      --text-muted: #6b7280;
      --border-color: #e5e7eb;
      --input-bg: #f8fafc;
      --sidebar-width: 280px;
      --list-panel-width: 460px;
    }

    .dark {
      --bg-main: #0f172a;
      --bg-sidebar: #020617;
      --bg-panel: #111827;
      --text-main: #f8fafc;
      --text-muted: #94a3b8;
      --border-color: #334155;
      --input-bg: #1e293b;
    }

    body .dark {
      background: var(--bg-main);
      color: var(--text-main);
    }

    .dark aside,
    .dark header,
    .dark main,
    .dark .l-jmail-compose-panel {
      background-color: var(--bg-panel) !important;
      color: var(--text-main);
      border-color: var(--border-color) !important;
    }

    .dark input,
    .dark textarea,
    .dark select {
      background-color: var(--input-bg) !important;
      color: var(--text-main) !important;
      border-color: var(--border-color) !important;
    }

    .dark input::placeholder,
    .dark textarea::placeholder {
      color: var(--text-muted) !important;
    }

    .resize-handle {
      position: relative;
      z-index: 5;
      width: 6px;
      flex: 0 0 6px;
      cursor: col-resize;
      background: transparent;
      transition: background-color 0.15s ease;
      touch-action: none;
    }

    .resize-handle::after {
      content: "";
      position: absolute;
      inset: 0 2px;
      border-radius: 999px;
      background: transparent;
      transition: background-color 0.15s ease;
    }

    .resize-handle:hover::after,
    .resize-handle.is-dragging::after {
      background: rgba(79, 110, 247, 0.18);
    }

    body.is-resizing {
      cursor: col-resize;
      user-select: none;
    }

    body.is-resizing * {
      cursor: col-resize !important;
    }

    .list-panel-resizable {
      width: var(--list-panel-width);
      min-width: var(--list-panel-width);
      max-width: var(--list-panel-width);
    }

    @media (max-width: 900px) {
      :root {
        --sidebar-width: 0px;
        --list-panel-width: 100vw;
        --mobile-bg: #1f1f23;
        --mobile-bg-2: #202124;
        --mobile-surface: #141518;
        --mobile-surface-alt: #17181c;
        --mobile-surface-2: #2b2c31;
        --mobile-text: #f1f3f4;
        --mobile-muted: #bdc1c6;
        --mobile-subtle: #8f949c;
        --mobile-border: rgba(255, 255, 255, 0.08);
        --mobile-accent: #4f7df3;
        --mobile-danger: #ff6b6b;
        --mobile-success: #63d471;
      }

      html,
      body {
        max-width: 100%;
        overflow-x: hidden;
      }

      body {
        min-width: 0;
      }

      .resize-handle {
        display: none !important;
      }

      main {
        min-width: 0;
        max-width: 100vw;
        overflow-x: hidden;
      }

      main > div.h-14 {
        display: none !important;
      }

      main > header {
        height: auto !important;
        min-height: 56px;
        padding: 8px 12px !important;
        gap: 8px;
        overflow: hidden;
      }

      main > header > div:first-child {
        min-width: 0;
        flex: 1 1 auto;
        gap: 8px !important;
      }

      main > header > div:last-child {
        display: none !important;
      }

      main > header .max-w-md {
        max-width: none !important;
        min-width: 0;
        flex: 1 1 auto;
      }

      main > header .max-w-md input {
        height: 42px;
        border-radius: 999px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
      }

      main > header .hidden.sm\:flex {
        display: none !important;
      }

      main > header button {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        touch-action: manipulation;
      }

      main > header .animate-pulse {
        display: none !important;
      }

      body.mobile-drawer-open {
        overflow: hidden;
      }

      body.mobile-search-open {
        overflow: hidden;
      }

      body.mobile-search-open aside.\-translate-x-full > .p-4:not(.flex) {
        display: none !important;
      }

      body.mobile-compose-fab-ready .l-jmail-mobile-compose-fab {
        position: fixed;
        right: 20px;
        bottom: 24px;
        z-index: 85;
        min-height: 56px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 0 22px;
        border: 0;
        border-radius: 999px;
        background: #2563eb;
        color: #ffffff;
        box-shadow: 0 16px 36px rgba(37, 99, 235, 0.38), 0 4px 12px rgba(15, 23, 42, 0.2);
        font-size: 15px;
        font-weight: 800;
        letter-spacing: 0;
        white-space: nowrap;
        touch-action: manipulation;
      }

      .l-jmail-mobile-compose-fab .material-symbols-rounded {
        font-size: 23px;
      }

      body.mobile-search-open .l-jmail-mobile-compose-fab,
      body.mobile-drawer-open .l-jmail-mobile-compose-fab,
      body.mobile-detail-open .l-jmail-mobile-compose-fab,
      body.mobile-compose-open .l-jmail-mobile-compose-fab,
      body.modal-open .l-jmail-mobile-compose-fab,
      body.l-jmail-memo-view .l-jmail-mobile-compose-fab,
      body.l-jmail-memo-editor-open .l-jmail-mobile-compose-fab {
        display: none !important;
      }

      body.mobile-drawer-dragging {
        overflow: hidden;
        user-select: none;
        touch-action: pan-y;
      }

      body.mobile-drawer-open::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 39;
        background: rgba(0, 0, 0, 0.46);
        backdrop-filter: blur(2px);
        pointer-events: auto;
        touch-action: manipulation;
      }

      .l-jmail-mobile-grouped-back {
        position: fixed;
        left: 12px;
        top: 68px;
        z-index: 88;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 999px;
        background: rgba(17, 18, 23, 0.86);
        color: #f1f3f4;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
        backdrop-filter: blur(10px);
      }

      body.mobile-search-open .l-jmail-mobile-grouped-back,
      body.mobile-drawer-open .l-jmail-mobile-grouped-back,
      body.mobile-compose-open .l-jmail-mobile-grouped-back,
      body.mobile-detail-open .l-jmail-mobile-grouped-back {
        display: none !important;
      }

      body.mobile-category-picker-open {
        overflow: hidden;
      }

      .l-jmail-mobile-category-picker {
        position: fixed;
        inset: 0;
        z-index: 10020;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        padding: 12px;
        background: rgba(0, 0, 0, 0.42);
        backdrop-filter: blur(4px);
      }

      .l-jmail-mobile-category-picker-sheet {
        width: 100%;
        max-width: 520px;
        max-height: min(72dvh, 560px);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 24px;
        background: #1f1f23;
        color: #f1f3f4;
        box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.42);
      }

      .l-jmail-mobile-category-picker-header {
        min-height: 58px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 0 16px 0 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      }

      .l-jmail-mobile-category-picker-header strong {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 16px;
      }

      .l-jmail-mobile-category-picker-header button {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: #e8eaed;
      }

      .l-jmail-mobile-category-picker-list {
        padding: 8px;
        overflow-y: auto;
      }

      .l-jmail-mobile-category-picker-item,
      .l-jmail-mobile-category-picker-create {
        width: 100%;
        min-height: 48px;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0 12px;
        border: 0;
        border-radius: 14px;
        background: transparent;
        color: #f1f3f4;
        text-align: left;
        font-size: 14px;
        font-weight: 700;
      }

      .l-jmail-mobile-category-picker-item:active,
      .l-jmail-mobile-category-picker-create:active {
        background: rgba(255, 255, 255, 0.08);
      }

      .l-jmail-mobile-category-picker-item .material-symbols-rounded,
      .l-jmail-mobile-category-picker-create .material-symbols-rounded {
        flex: 0 0 22px;
        color: #93c5fd;
      }

      .l-jmail-mobile-category-picker-name {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .l-jmail-mobile-category-picker-empty {
        padding: 18px 12px;
        color: #9aa0a6;
        font-size: 13px;
        text-align: center;
      }

      aside {
        transition: transform 200ms ease, box-shadow 200ms ease !important;
        will-change: transform;
      }

      aside.\-translate-x-full {
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        transform: none !important;
        pointer-events: none;
        overflow: visible !important;
        border-right-width: 0 !important;
        background: transparent !important;
      }

      aside.\-translate-x-full > * {
        display: none !important;
      }

      aside.\-translate-x-full > .p-4:not(.flex) {
        display: none !important;
      }

      aside.\-translate-x-full > .p-4:not(.flex) > button {
        width: auto !important;
        min-width: 0;
        min-height: 56px;
        padding: 0 20px !important;
        border-radius: 999px !important;
        background: #2563eb !important;
        color: #ffffff !important;
        box-shadow: 0 14px 32px rgba(37, 99, 235, 0.34), 0 4px 10px rgba(15, 23, 42, 0.18);
        gap: 8px !important;
        white-space: nowrap;
      }

      aside.\-translate-x-full > .p-4:not(.flex) > button .material-symbols-rounded {
        font-size: 22px !important;
      }

      aside.translate-x-0 {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        z-index: 60 !important;
        width: 82vw !important;
        min-width: 0 !important;
        max-width: 340px !important;
        height: 100dvh !important;
        transform: translateX(0) !important;
        overflow-y: auto !important;
        border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-top-right-radius: 22px;
        border-bottom-right-radius: 22px;
        background: #202124 !important;
        box-shadow: 16px 0 40px rgba(0, 0, 0, 0.36);
      }

      aside.translate-x-0 > .p-4.flex.items-center.justify-between button,
      aside.translate-x-0 button.md\:hidden,
      aside button[aria-label="Close"],
      aside button:has(.material-symbols-rounded) {
        min-width: 48px !important;
        min-height: 48px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        touch-action: manipulation;
      }

      body.mobile-drawer-open main,
      body.mobile-drawer-open #app {
        overscroll-behavior: contain;
      }

      body.l-jmail-memo-view main {
        overflow-x: hidden;
      }

      body.l-jmail-memo-editor-open .w-full.md\:w-\[360px\].lg\:w-\[430px\] {
        display: none !important;
      }

      body.l-jmail-memo-editor-open .hidden.md\:flex.flex-1.flex-col.bg-white.dark\:bg-slate-900 {
        display: flex !important;
        width: 100% !important;
        min-width: 0;
        max-width: 100vw;
      }

      body.l-jmail-memo-editor-open .hidden.md\:flex.flex-1.flex-col.bg-white.dark\:bg-slate-900 > .h-24 {
        height: auto !important;
        min-height: 72px;
        padding: 12px !important;
        flex-wrap: wrap;
      }

      body.l-jmail-memo-editor-open .hidden.md\:flex.flex-1.flex-col.bg-white.dark\:bg-slate-900 > .h-24 input {
        min-width: 0;
        width: 100%;
        flex: 1 1 100%;
        height: 48px !important;
        font-size: 18px !important;
      }

      body.l-jmail-memo-editor-open .hidden.md\:flex.flex-1.flex-col.bg-white.dark\:bg-slate-900 > .h-24 select,
      body.l-jmail-memo-editor-open .hidden.md\:flex.flex-1.flex-col.bg-white.dark\:bg-slate-900 > .h-24 button {
        height: 42px !important;
      }

      body.l-jmail-memo-editor-open .hidden.md\:flex.flex-1.flex-col.bg-white.dark\:bg-slate-900 > .h-\[72px\] {
        height: auto !important;
        min-height: 58px;
        padding: 10px 12px !important;
        flex-wrap: wrap;
        overflow-x: hidden;
      }

      body.l-jmail-memo-editor-open textarea {
        min-height: 55dvh !important;
        width: 100% !important;
        max-width: 100%;
        font-size: 16px !important;
        line-height: 1.7 !important;
      }

      body.mobile-workspace-view .l-jmail-mobile-compose-fab,
      body.mobile-memo-view .l-jmail-mobile-compose-fab,
      body.mobile-memo-editor-open .l-jmail-mobile-compose-fab {
        display: none !important;
      }

      body.mobile-workspace-view main {
        background: #1f1f23 !important;
      }

      body.mobile-workspace-view main > .flex-1.flex.flex-col.overflow-hidden.w-full {
        min-width: 0;
        overflow-x: hidden !important;
        background: #1f1f23 !important;
        color: #f1f3f4;
      }

      body.mobile-workspace-view main > .flex-1.flex.flex-col.overflow-hidden.w-full > .p-4.border-b {
        margin: 12px 14px 10px;
        padding: 16px !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        border-radius: 22px;
        background: #141518 !important;
        gap: 12px !important;
      }

      body.mobile-workspace-view main > .flex-1.flex.flex-col.overflow-hidden.w-full > .p-4.border-b h2 {
        max-width: calc(100vw - 64px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 22px !important;
        line-height: 1.25;
        color: #f1f3f4 !important;
      }

      body.mobile-workspace-view main > .flex-1.flex.flex-col.overflow-hidden.w-full > .p-4.border-b p {
        max-width: calc(100vw - 64px);
        margin-top: 4px;
        color: #9aa0a6 !important;
        line-height: 1.5;
      }

      body.mobile-workspace-view main > .flex-1.flex.flex-col.overflow-hidden.w-full > .p-4.border-b .flex.items-center.gap-3 {
        width: 100%;
        gap: 8px !important;
        overflow-x: auto;
        padding-bottom: 2px;
      }

      body.mobile-workspace-view select {
        min-height: 38px;
        max-width: 100%;
        flex: 0 0 auto;
        border-radius: 999px !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
        background: #2b2c31 !important;
        color: #f1f3f4 !important;
        font-size: 12px !important;
      }

      body.mobile-workspace-view main > .flex-1.flex.flex-col.overflow-hidden.w-full > .px-6.py-2.border-b {
        padding: 8px 14px !important;
        border-color: rgba(255, 255, 255, 0.06) !important;
        background: #1f1f23 !important;
        justify-content: flex-start !important;
        overflow-x: auto;
      }

      body.mobile-workspace-view [data-mail-list-scroll="true"] {
        padding: 0 14px 18px !important;
        background: #1f1f23 !important;
        overflow-x: hidden;
      }

      body.mobile-workspace-view [data-mail-list-scroll="true"] > .grid {
        display: flex !important;
        flex-direction: column;
        gap: 12px !important;
      }

      body.mobile-workspace-view [data-mail-list-scroll="true"] > .grid > div {
        min-width: 0;
        padding: 16px !important;
        border-radius: 20px !important;
        border-color: rgba(255, 255, 255, 0.06) !important;
        background: #141518 !important;
        box-shadow: none !important;
      }

      body.mobile-workspace-view [data-mail-list-scroll="true"] h4,
      body.mobile-workspace-view [data-mail-list-scroll="true"] p,
      body.mobile-workspace-view [data-mail-list-scroll="true"] span {
        min-width: 0;
        overflow-wrap: anywhere;
      }

      body.mobile-workspace-view [data-mail-list-scroll="true"] h4 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        color: #f8fafc !important;
      }

      body.mobile-workspace-view [data-mail-list-scroll="true"] .line-clamp-3 {
        -webkit-line-clamp: 2 !important;
        color: #bdc1c6 !important;
      }

      body.mobile-workspace-view [data-mail-list-scroll="true"] .mt-4.pt-3 {
        align-items: flex-start !important;
        gap: 10px;
        border-color: rgba(255, 255, 255, 0.06) !important;
        flex-wrap: wrap;
      }

      body.mobile-workspace-view [data-mail-list-scroll="true"] .mt-4.pt-3 > span {
        max-width: 100%;
        flex: 1 1 100%;
        color: #9aa0a6 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      body.mobile-workspace-view [data-mail-list-scroll="true"] .mt-4.pt-3 button {
        min-height: 38px;
        border-radius: 999px !important;
        padding: 0 12px !important;
        font-size: 12px !important;
      }

      body.mobile-memo-view main {
        background: #1f1f23 !important;
        overflow-x: hidden;
      }

      body.mobile-memo-view main > .flex-1.flex.h-full.bg-white {
        width: 100% !important;
        max-width: 100vw;
        min-width: 0;
        background: #1f1f23 !important;
        color: #f1f3f4;
        overflow-x: hidden !important;
      }

      body.mobile-memo-view .w-full.md\:w-\[360px\].lg\:w-\[430px\] {
        width: 100% !important;
        max-width: 100vw !important;
        border-right: 0 !important;
        background: #1f1f23 !important;
      }

      body.mobile-memo-view .w-full.md\:w-\[360px\].lg\:w-\[430px\] > .h-16 {
        height: auto !important;
        min-height: 68px;
        margin: 12px 14px 10px;
        padding: 0 14px !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        border-radius: 22px;
        background: #141518 !important;
      }

      body.mobile-memo-view .w-full.md\:w-\[360px\].lg\:w-\[430px\] > .h-16 .font-extrabold {
        min-width: 0;
        max-width: calc(100vw - 112px);
        color: #f1f3f4 !important;
      }

      body.mobile-memo-view .w-full.md\:w-\[360px\].lg\:w-\[430px\] > .h-16 .font-extrabold span:last-child {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      body.mobile-memo-view .w-full.md\:w-\[360px\].lg\:w-\[430px\] > .h-16 button,
      body.mobile-memo-view .l-jmail-memo-folder-add-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px;
        min-height: 44px;
        border-radius: 999px !important;
        background: #2563eb !important;
        color: #ffffff !important;
      }

      body.mobile-memo-view .w-full.md\:w-\[360px\].lg\:w-\[430px\] > .flex-1 {
        padding: 0 14px 18px;
      }

      body.mobile-memo-view .w-full.md\:w-\[360px\].lg\:w-\[430px\] > .flex-1 > button {
        margin-bottom: 12px;
        padding: 16px !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        border-radius: 18px !important;
        background: #141518 !important;
      }

      body.mobile-memo-view .w-full.md\:w-\[360px\].lg\:w-\[430px\] h4 {
        color: #f8fafc !important;
        font-size: 15px !important;
      }

      body.mobile-memo-view .w-full.md\:w-\[360px\].lg\:w-\[430px\] p {
        color: #bdc1c6 !important;
      }

      body.mobile-memo-editor-open .hidden.md\:flex.flex-1.flex-col.bg-white.dark\:bg-slate-900 {
        background: #111217 !important;
        color: #f1f3f4;
        overflow-x: hidden;
      }

      body.mobile-memo-editor-open .hidden.md\:flex.flex-1.flex-col.bg-white.dark\:bg-slate-900 > .h-24 {
        border-color: rgba(255, 255, 255, 0.08) !important;
        background: #111217 !important;
      }

      body.mobile-memo-editor-open .hidden.md\:flex.flex-1.flex-col.bg-white.dark\:bg-slate-900 > .h-24 input,
      body.mobile-memo-editor-open .hidden.md\:flex.flex-1.flex-col.bg-white.dark\:bg-slate-900 > .h-24 select {
        border-color: rgba(255, 255, 255, 0.08) !important;
        background: #1f1f23 !important;
        color: #f1f3f4 !important;
      }

      body.mobile-memo-editor-open .hidden.md\:flex.flex-1.flex-col.bg-white.dark\:bg-slate-900 > .h-24 button,
      body.mobile-memo-editor-open .hidden.md\:flex.flex-1.flex-col.bg-white.dark\:bg-slate-900 > .h-\[72px\] button,
      body.mobile-memo-editor-open .hidden.md\:flex.flex-1.flex-col.bg-white.dark\:bg-slate-900 > .h-\[72px\] label {
        min-height: 44px;
        border-color: rgba(255, 255, 255, 0.08) !important;
        background: #1f1f23 !important;
        color: #f1f3f4 !important;
      }

      body.mobile-memo-editor-open .hidden.md\:flex.flex-1.flex-col.bg-white.dark\:bg-slate-900 > .h-\[72px\] {
        border-color: rgba(255, 255, 255, 0.08) !important;
        background: #111217 !important;
        overflow-x: auto;
        flex-wrap: nowrap;
      }

      body.mobile-memo-editor-open .hidden.md\:flex.flex-1.flex-col.bg-white.dark\:bg-slate-900 > .h-\[72px\] > * {
        flex: 0 0 auto;
      }

      body.mobile-memo-editor-open .hidden.md\:flex.flex-1.flex-col.bg-white.dark\:bg-slate-900 > .flex-1.p-6 {
        padding: 12px !important;
        background: #111217 !important;
      }

      body.mobile-memo-editor-open textarea {
        min-height: calc(100dvh - 236px) !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
        background: #1f1f23 !important;
        color: #f1f3f4 !important;
      }

      body.mobile-compose-open {
        overflow: hidden;
      }

      body.mobile-compose-open .l-jmail-compose-backdrop {
        position: fixed !important;
        inset: 0 !important;
        z-index: 10000 !important;
        display: flex !important;
        justify-content: stretch !important;
        align-items: stretch !important;
        width: 100vw !important;
        height: 100dvh !important;
        padding: 0 !important;
        background: #111217 !important;
        pointer-events: auto !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        min-height: 100dvh !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #111217 !important;
        color: #f1f3f4 !important;
        box-shadow: none !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel > .px-4.py-2\.5 {
        position: relative;
        min-height: 72px;
        padding: 8px 24px 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        background: #111217 !important;
        color: #f1f3f4 !important;
        justify-content: flex-start !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel > .px-4.py-2\.5 h3 {
        width: 132px;
        margin-left: 36px;
        color: #f1f3f4;
        font-size: 0 !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel > .px-4.py-2\.5 h3::after {
        content: "편지쓰기";
        font-size: 16px;
        font-weight: 800;
      }

      body.mobile-compose-open .l-jmail-compose-panel > .px-4.py-2\.5 > div {
        position: static;
        margin-left: auto;
      }

      body.mobile-compose-open .l-jmail-compose-panel > .px-4.py-2\.5 button {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        border-radius: 999px !important;
        color: #e8eaed !important;
        background: transparent !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel > .px-4.py-2\.5 button:nth-child(1),
      body.mobile-compose-open .l-jmail-compose-panel > .px-4.py-2\.5 button:nth-child(2) {
        display: none !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel > .px-4.py-2\.5 button:nth-child(3) {
        position: absolute;
        left: 24px;
        top: 16px;
      }

      body.mobile-compose-open .l-jmail-compose-panel > .px-4.py-2\.5 button:nth-child(3) .material-symbols-rounded {
        font-size: 0 !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel > .px-4.py-2\.5 button:nth-child(3) .material-symbols-rounded::before {
        content: "arrow_back";
        font-family: "Material Symbols Rounded";
        font-size: 24px;
      }

      body.mobile-compose-open .l-jmail-compose-panel form {
        position: relative;
        display: flex !important;
        flex-direction: column;
        height: calc(100dvh - 72px);
        min-height: 0;
        overflow: hidden;
        background: #111217;
      }

      body.mobile-compose-open .l-jmail-compose-panel form::before {
        content: "보낸사람  " attr(data-from) "  ˅";
        flex: 0 0 auto;
        min-height: 72px;
        display: flex;
        align-items: center;
        padding: 0 32px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        color: #e8eaed;
        font-size: 22px;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      body.mobile-compose-open .l-jmail-compose-panel form > .px-6.py-3.border-b {
        min-height: 72px;
        padding: 0 32px !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
        background: transparent !important;
        gap: 16px;
      }

      body.mobile-compose-open .l-jmail-compose-panel form label {
        flex: 0 0 72px;
        width: 72px !important;
        color: #c7c9d1 !important;
        font-size: 22px !important;
        font-weight: 500;
        white-space: nowrap;
      }

      body.mobile-compose-open .l-jmail-compose-panel input,
      body.mobile-compose-open .l-jmail-compose-panel textarea {
        min-height: 54px !important;
        border: 0 !important;
        background: transparent !important;
        color: #f1f3f4 !important;
        font-size: 21px !important;
        box-shadow: none !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel input::placeholder,
      body.mobile-compose-open .l-jmail-compose-panel textarea::placeholder {
        color: #80868b !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel form > .flex-1.min-h-0.p-6 {
        flex: 1 1 auto;
        min-height: 0;
        padding: 18px 32px 112px !important;
        overflow-y: auto !important;
        background: transparent !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel textarea {
        width: 100%;
        min-height: 42dvh !important;
        height: auto !important;
        line-height: 1.65 !important;
        resize: none;
      }

      body.mobile-compose-open .l-jmail-compose-panel form > .px-6.py-3.border-b:first-of-type button {
        flex: 0 0 28px;
        width: 28px !important;
        min-width: 28px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        color: #c7c9d1 !important;
        font-size: 0 !important;
        overflow: hidden;
      }

      body.mobile-compose-open .l-jmail-compose-panel form > .px-6.py-3.border-b:first-of-type button:first-of-type {
        margin-left: auto;
      }

      body.mobile-compose-open .l-jmail-compose-panel form > .px-6.py-3.border-b:first-of-type button:first-of-type::before {
        content: "expand_more";
        font-family: "Material Symbols Rounded";
        font-size: 28px;
        line-height: 1;
      }

      body.mobile-compose-open .l-jmail-compose-panel form > .px-6.py-3.border-b:first-of-type button:last-of-type {
        display: none !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel .mt-4.pt-4.border-t {
        margin-top: 18px !important;
        padding-top: 14px !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel .mt-4.pt-4.border-t label {
        width: auto !important;
        min-height: 42px;
        border-color: rgba(255, 255, 255, 0.1) !important;
        background: #1f1f23 !important;
        color: #e8eaed !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel .space-y-2 > div {
        min-height: 48px;
        border-color: rgba(255, 255, 255, 0.08) !important;
        background: #1f1f23 !important;
        color: #f1f3f4 !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel .space-y-2 .truncate {
        max-width: min(54vw, 260px);
        color: #f1f3f4 !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel .l-jmail-attachment-empty {
        border-color: rgba(255, 255, 255, 0.1) !important;
        background: #1f1f23;
        color: #9aa0a6 !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel form > .px-4.py-3.border-t {
        position: fixed;
        top: 16px;
        right: 24px;
        z-index: 2;
        width: auto;
        min-height: 44px;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        gap: 0 !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel form > .px-4.py-3.border-t > .flex {
        gap: 16px !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel form > .px-4.py-3.border-t button,
      body.mobile-compose-open .l-jmail-compose-panel form > .px-4.py-3.border-t label {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: transparent !important;
        color: #e8eaed !important;
        box-shadow: none !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel form > .px-4.py-3.border-t button[type="submit"] {
        font-size: 0 !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel form > .px-4.py-3.border-t button[type="submit"] .material-symbols-rounded {
        font-size: 24px !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel form > .px-4.py-3.border-t button[type="button"]:has(.material-symbols-rounded),
      body.mobile-compose-open .l-jmail-compose-panel form > .px-4.py-3.border-t > button {
        display: none !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel form > .px-4.py-3.border-t label {
        display: inline-flex !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel form > .px-4.py-3.border-t .flex > button:nth-of-type(3) {
        display: inline-flex !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel form > .px-4.py-3.border-t .flex > button:nth-of-type(3) .material-symbols-rounded {
        font-size: 0 !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel form > .px-4.py-3.border-t .flex > button:nth-of-type(3) .material-symbols-rounded::before {
        content: "more_vert";
        font-family: "Material Symbols Rounded";
        font-size: 24px;
      }

      @media (max-width: 430px) {
        body.mobile-compose-open .l-jmail-compose-panel > .px-4.py-2\.5 {
          padding-left: 20px !important;
          padding-right: 16px !important;
        }

        body.mobile-compose-open .l-jmail-compose-panel > .px-4.py-2\.5 h3 {
          width: 112px;
          margin-left: 32px;
        }

        body.mobile-compose-open .l-jmail-compose-panel > .px-4.py-2\.5 h3::after {
          font-size: 18px;
        }

        body.mobile-compose-open .l-jmail-compose-panel > .px-4.py-2\.5 button:nth-child(3) {
          left: 20px;
        }

        body.mobile-compose-open .l-jmail-compose-panel form::before,
        body.mobile-compose-open .l-jmail-compose-panel form > .px-6.py-3.border-b {
          padding-left: 22px !important;
          padding-right: 16px !important;
        }

        body.mobile-compose-open .l-jmail-compose-panel form::before,
        body.mobile-compose-open .l-jmail-compose-panel form label,
        body.mobile-compose-open .l-jmail-compose-panel input,
        body.mobile-compose-open .l-jmail-compose-panel textarea {
          font-size: 16px !important;
        }

        body.mobile-compose-open .l-jmail-compose-panel form label {
          flex-basis: 72px;
          width: 72px !important;
        }

        body.mobile-compose-open .l-jmail-compose-panel form > .flex-1.min-h-0.p-6 {
          padding-left: 22px !important;
          padding-right: 18px !important;
        }

        body.mobile-compose-open .l-jmail-compose-panel form > .px-4.py-3.border-t {
          right: 8px;
        }

        body.mobile-compose-open .l-jmail-compose-panel form > .px-4.py-3.border-t > .flex {
          gap: 6px !important;
        }
      }

      /* Mobile compose final layout: Gmail-like full screen, no PC modal chrome. */
      body.mobile-compose-open .l-jmail-compose-backdrop {
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        background: #111217 !important;
        overflow: hidden !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        max-width: 100vw !important;
        max-height: 100dvh !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #111217 !important;
        color: #f1f3f4 !important;
        overflow: hidden !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel > .px-4.py-2\.5 {
        height: 68px !important;
        min-height: 68px !important;
        padding: 0 18px !important;
        display: flex !important;
        align-items: center !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        background: #111217 !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel > .px-4.py-2\.5 h3,
      body.mobile-compose-open .l-jmail-compose-panel > .px-4.py-2\.5 h3::after {
        display: none !important;
        content: none !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel > .px-4.py-2\.5 > div {
        margin-left: 0 !important;
        width: 100%;
        display: flex !important;
        align-items: center;
      }

      body.mobile-compose-open .l-jmail-compose-panel > .px-4.py-2\.5 button {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: transparent !important;
        color: #e8eaed !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel > .px-4.py-2\.5 button:nth-child(1),
      body.mobile-compose-open .l-jmail-compose-panel > .px-4.py-2\.5 button:nth-child(2) {
        display: none !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel > .px-4.py-2\.5 button:nth-child(3) {
        position: static !important;
        margin-right: auto !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel > .px-4.py-2\.5 button:nth-child(3) .material-symbols-rounded {
        font-size: 0 !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel > .px-4.py-2\.5 button:nth-child(3) .material-symbols-rounded::before {
        content: "arrow_back";
        font-family: "Material Symbols Rounded";
        font-size: 28px;
        line-height: 1;
      }

      body.mobile-compose-open .l-jmail-compose-panel form {
        height: calc(100dvh - 68px) !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background: #111217 !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel form::before {
        content: "보낸사람  " attr(data-from) "  ˅" !important;
        min-height: 58px !important;
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 24px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
        color: #e8eaed !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel form > .px-6.py-3.border-b {
        min-height: 58px !important;
        flex: 0 0 auto !important;
        padding: 0 24px !important;
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
        background: transparent !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel form label {
        width: 74px !important;
        flex: 0 0 74px !important;
        color: #c7c9d1 !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel input,
      body.mobile-compose-open .l-jmail-compose-panel textarea {
        min-width: 0 !important;
        width: 100% !important;
        min-height: 44px !important;
        padding: 0 !important;
        border: 0 !important;
        outline: 0 !important;
        background: transparent !important;
        color: #f1f3f4 !important;
        font-size: 16px !important;
        line-height: 1.6 !important;
        box-shadow: none !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel input::placeholder,
      body.mobile-compose-open .l-jmail-compose-panel textarea::placeholder {
        color: #8f949c !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel form > .px-6.py-3.border-b:first-of-type button {
        width: 32px !important;
        min-width: 32px !important;
        height: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        color: #c7c9d1 !important;
        font-size: 0 !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel form > .px-6.py-3.border-b:first-of-type button:first-of-type {
        margin-left: auto !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel form > .px-6.py-3.border-b:first-of-type button:first-of-type::before {
        content: "expand_more";
        font-family: "Material Symbols Rounded";
        font-size: 28px;
        line-height: 1;
      }

      body.mobile-compose-open .l-jmail-compose-panel form > .px-6.py-3.border-b:first-of-type button:last-of-type {
        display: none !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel form > .flex-1.min-h-0.p-6 {
        flex: 1 0 auto !important;
        min-height: calc(100dvh - 68px - 58px - 58px - 58px) !important;
        padding: 18px 24px 32px !important;
        overflow: visible !important;
        background: #111217 !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel textarea {
        min-height: 48dvh !important;
        resize: none !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel .mt-4.pt-4.border-t {
        margin-top: 16px !important;
        padding-top: 0 !important;
        border-top: 0 !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel .mt-4.pt-4.border-t > .flex {
        display: none !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel .l-jmail-attachment-empty {
        display: none !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel .space-y-2 {
        margin-top: 12px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel .space-y-2 > div {
        min-height: 48px !important;
        padding: 10px 12px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 12px !important;
        background: #1f1f23 !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel .space-y-2 .truncate {
        max-width: min(56vw, 280px) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel form > .px-4.py-3.border-t {
        position: fixed !important;
        top: 12px !important;
        right: 16px !important;
        z-index: 10002 !important;
        width: auto !important;
        min-height: 44px !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel form > .px-4.py-3.border-t > .flex {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel form > .px-4.py-3.border-t button,
      body.mobile-compose-open .l-jmail-compose-panel form > .px-4.py-3.border-t label {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: transparent !important;
        color: #e8eaed !important;
        box-shadow: none !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel form > .px-4.py-3.border-t button[type="submit"] {
        order: 2 !important;
        display: inline-flex !important;
        font-size: 0 !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel form > .px-4.py-3.border-t button[type="submit"] .material-symbols-rounded {
        font-size: 28px !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel form > .px-4.py-3.border-t label {
        order: 1 !important;
        display: inline-flex !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel form > .px-4.py-3.border-t label .material-symbols-rounded {
        font-size: 27px !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel form > .px-4.py-3.border-t .flex > button:not([type="submit"]) {
        display: none !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel form > .px-4.py-3.border-t .flex > button:nth-of-type(3) {
        order: 3 !important;
        display: inline-flex !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel form > .px-4.py-3.border-t .flex > button:nth-of-type(3) .material-symbols-rounded {
        font-size: 0 !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel form > .px-4.py-3.border-t .flex > button:nth-of-type(3) .material-symbols-rounded::before {
        content: "more_vert";
        font-family: "Material Symbols Rounded";
        font-size: 28px;
        line-height: 1;
      }

      body.mobile-compose-open .l-jmail-compose-panel > .px-4.py-2\.5,
      body.mobile-compose-open .l-jmail-compose-panel > .px-4.py-2\.5 > div,
      body.mobile-compose-open .l-jmail-compose-panel form > .px-4.py-3.border-t,
      body.mobile-compose-open .l-jmail-compose-panel form > .px-4.py-3.border-t > .flex {
        align-items: center !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel > .px-4.py-2\.5 {
        height: 68px !important;
        min-height: 68px !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel > .px-4.py-2\.5 button,
      body.mobile-compose-open .l-jmail-compose-panel form > .px-4.py-3.border-t button,
      body.mobile-compose-open .l-jmail-compose-panel form > .px-4.py-3.border-t label {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 48px !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
        vertical-align: top !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel form > .px-4.py-3.border-t {
        top: 10px !important;
        right: 14px !important;
        height: 48px !important;
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel form > .px-4.py-3.border-t > .flex {
        height: 48px !important;
        min-height: 48px !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel > .px-4.py-2\.5 .material-symbols-rounded,
      body.mobile-compose-open .l-jmail-compose-panel > .px-4.py-2\.5 button:nth-child(3) .material-symbols-rounded::before,
      body.mobile-compose-open .l-jmail-compose-panel form > .px-4.py-3.border-t .material-symbols-rounded,
      body.mobile-compose-open .l-jmail-compose-panel form > .px-4.py-3.border-t .flex > button:nth-of-type(3) .material-symbols-rounded::before {
        display: block !important;
        width: 1em !important;
        height: 1em !important;
        font-size: 28px !important;
        line-height: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 28;
      }

      body.mobile-compose-open .l-jmail-compose-panel form > .px-4.py-3.border-t label {
        font-size: 0 !important;
        overflow: hidden !important;
        gap: 0 !important;
      }

      [data-mail-list-scroll]:has(> .max-w-4xl .border-red-100) {
        background: #1f1f23 !important;
        color: #f1f3f4;
        padding: 14px !important;
        overflow-x: hidden;
      }

      [data-mail-list-scroll]:has(> .max-w-4xl .border-red-100) > .max-w-4xl {
        max-width: 100% !important;
      }

      [data-mail-list-scroll]:has(> .max-w-4xl .border-red-100) > .max-w-4xl > .mb-4:first-child {
        padding: 16px;
        border-radius: 22px;
        background: #141518;
        border: 1px solid rgba(255, 255, 255, 0.06);
        margin-bottom: 12px !important;
      }

      [data-mail-list-scroll]:has(> .max-w-4xl .border-red-100) h3 {
        color: #f87171 !important;
        font-size: 22px !important;
        line-height: 1.25;
      }

      [data-mail-list-scroll]:has(> .max-w-4xl .border-red-100) h3 + p {
        color: #bdc1c6 !important;
        margin-top: 4px;
        line-height: 1.5;
      }

      [data-mail-list-scroll]:has(> .max-w-4xl .border-red-100) > .max-w-4xl > .flex.flex-wrap.gap-2.mb-4 {
        gap: 8px !important;
        margin-bottom: 12px !important;
        overflow-x: auto;
        flex-wrap: nowrap !important;
        padding-bottom: 2px;
      }

      [data-mail-list-scroll]:has(> .max-w-4xl .border-red-100) > .max-w-4xl > .flex.flex-wrap.gap-2.mb-4 button {
        min-height: 38px;
        flex: 0 0 auto;
        border-radius: 999px !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
        background: #2b2c31 !important;
        color: #e8eaed !important;
        padding: 0 14px !important;
        white-space: nowrap;
      }

      [data-mail-list-scroll]:has(> .max-w-4xl .border-red-100) > .max-w-4xl > .flex.flex-wrap.gap-2.mb-4 button.text-white {
        background: #2563eb !important;
        border-color: #2563eb !important;
        color: #ffffff !important;
      }

      [data-mail-list-scroll]:has(> .max-w-4xl .border-red-100) > .max-w-4xl > .text-sm.text-gray-400 {
        min-height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 22px;
        border-radius: 22px;
        background: #141518;
        border: 1px solid rgba(255, 255, 255, 0.06);
        color: #bdc1c6 !important;
        text-align: center;
      }

      [data-mail-list-scroll]:has(> .max-w-4xl .border-red-100) .rounded-xl.border.border-red-100 {
        background: #141518 !important;
        border-color: rgba(255, 255, 255, 0.07) !important;
        color: #f1f3f4;
      }

      [data-mail-list-scroll]:has(> .max-w-4xl .border-red-100) input,
      [data-mail-list-scroll]:has(> .max-w-4xl .border-red-100) select {
        background: #202124 !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
        color: #f1f3f4 !important;
      }

      [data-mail-list-scroll]:has(> .max-w-4xl .border-red-100) .space-y-2 {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      [data-mail-list-scroll]:has(> .max-w-4xl .border-red-100) .space-y-2 > div {
        align-items: flex-start !important;
        gap: 12px;
        border-radius: 20px !important;
        background: #2b2c31 !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
        color: #f1f3f4;
        min-width: 0;
      }

      [data-mail-list-scroll]:has(> .max-w-4xl .border-red-100) .space-y-2 > div > div:first-child {
        min-width: 0;
        flex: 1 1 auto;
      }

      [data-mail-list-scroll]:has(> .max-w-4xl .border-red-100) .space-y-2 h4 {
        color: #f1f3f4 !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
      }

      [data-mail-list-scroll]:has(> .max-w-4xl .border-red-100) .space-y-2 .flex.items-center.gap-2 {
        flex: 0 0 auto;
        flex-wrap: wrap;
        justify-content: flex-end;
        max-width: 130px;
      }

      [data-mail-list-scroll]:has(> .max-w-4xl .border-red-100) .space-y-2 button {
        min-height: 36px;
        border-radius: 999px !important;
      }

      body:has([data-mail-list-scroll] > .max-w-4xl .border-red-100) aside.\-translate-x-full > .p-4:not(.flex) {
        display: none !important;
      }

      body.mobile-drawer-dragging aside {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        z-index: 60 !important;
        width: 82vw !important;
        min-width: 0 !important;
        max-width: 340px !important;
        height: 100dvh !important;
        overflow-y: auto !important;
        border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-top-right-radius: 22px;
        border-bottom-right-radius: 22px;
        background: #202124 !important;
        box-shadow: 16px 0 40px rgba(0, 0, 0, 0.36);
        pointer-events: auto !important;
        transition: none !important;
        transform: translateX(var(--mobile-drawer-drag-offset, -100%)) !important;
      }

      body.mobile-drawer-dragging aside.\-translate-x-full > * {
        display: block !important;
      }

      body.mobile-drawer-dragging aside.\-translate-x-full > .p-4.flex {
        display: flex !important;
      }

      body.mobile-drawer-dragging aside.\-translate-x-full > .flex-1 {
        display: block !important;
      }

      body.mobile-drawer-dragging aside.\-translate-x-full > .p-4:not(.flex) {
        position: static;
        width: auto;
        padding: 14px !important;
      }

      body.mobile-drawer-dragging aside.\-translate-x-full > .p-4:not(.flex) > button {
        width: 100% !important;
        min-height: 44px;
        box-shadow: none;
      }

      aside.translate-x-0 .p-4 {
        padding: 14px !important;
      }

      aside.translate-x-0 h4 {
        color: rgba(226, 232, 240, 0.54) !important;
        font-size: 11px !important;
        letter-spacing: 0;
      }

      aside.translate-x-0 button {
        min-height: 44px;
        border-radius: 999px !important;
        color: #e5e7eb !important;
      }

      aside.translate-x-0 button:hover {
        background: rgba(255, 255, 255, 0.08) !important;
      }

      aside.translate-x-0 button span,
      aside.translate-x-0 button div {
        min-width: 0;
      }

      aside.translate-x-0 button .truncate,
      aside.translate-x-0 button span:not(.material-symbols-rounded) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      aside.translate-x-0 .material-symbols-rounded {
        flex: 0 0 auto;
      }

      aside.translate-x-0 .flex-1.overflow-y-auto {
        padding: 0 10px 20px !important;
      }

      .list-panel-resizable > .p-4.border-b,
      .list-panel-resizable > .px-4.py-2.border-b {
        display: none !important;
      }

      .list-panel-resizable > .p-4 {
        padding: 10px !important;
        gap: 8px;
      }

      .list-panel-resizable > .p-4 .grid {
        gap: 6px !important;
      }

      .list-panel-resizable > .p-4 input,
      .list-panel-resizable > .p-4 select,
      .list-panel-resizable > .p-4 button {
        min-height: 34px;
      }

      .list-panel-resizable > .px-4.py-2 {
        padding: 6px 10px !important;
        gap: 6px !important;
        font-size: 10px !important;
        overflow-x: auto;
      }

      .list-panel-resizable > .px-4.py-2 button {
        min-width: 34px;
        min-height: 34px;
      }

      .list-panel-resizable {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
      }

      body.mobile-category-screen .flex-1.flex.overflow-hidden.w-full,
      body.mobile-social-screen .flex-1.flex.overflow-hidden.w-full {
        min-width: 0;
        max-width: 100vw;
        background: #1f1f23;
        overflow-x: hidden !important;
      }

      body.mobile-category-screen .list-panel-resizable,
      body.mobile-social-screen .list-panel-resizable {
        display: flex !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: 100%;
        border-right: 0 !important;
        background: #1f1f23 !important;
        color: #f1f3f4;
      }

      body.mobile-category-screen.mobile-category-mails .list-panel-resizable,
      body.mobile-social-screen.mobile-social-mails .list-panel-resizable,
      body.mobile-category-screen:not(.mobile-category-mails) .flex-1.flex.overflow-hidden.w-full > [data-mail-list-scroll="true"],
      body.mobile-social-screen:not(.mobile-social-mails) .flex-1.flex.overflow-hidden.w-full > [data-mail-list-scroll="true"] {
        display: none !important;
      }

      body.mobile-category-screen.mobile-category-mails .flex-1.flex.overflow-hidden.w-full > [data-mail-list-scroll="true"],
      body.mobile-social-screen.mobile-social-mails .flex-1.flex.overflow-hidden.w-full > [data-mail-list-scroll="true"] {
        display: block !important;
        width: 100% !important;
        max-width: 100vw !important;
        padding: 14px 12px 104px !important;
        background: #1f1f23 !important;
        color: #f1f3f4;
        overflow-x: hidden !important;
      }

      body.mobile-category-screen .list-panel-resizable > .p-4.border-b,
      body.mobile-social-screen .list-panel-resizable > .p-4.border-b {
        display: flex !important;
        min-height: 74px;
        align-items: center;
        justify-content: space-between;
        padding: 16px !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
        background: #1f1f23 !important;
      }

      body.mobile-social-screen .list-panel-resizable > .p-4.border-b {
        font-size: 20px !important;
        font-weight: 900 !important;
      }

      body.mobile-category-screen .list-panel-resizable > .p-4.border-b .font-semibold,
      body.mobile-social-screen .list-panel-resizable > .p-4.border-b {
        color: #f1f3f4 !important;
      }

      body.mobile-category-screen .list-panel-resizable > .p-4.border-b .text-xs,
      body.mobile-category-screen .list-panel-resizable > .p-4.border-b .text-gray-400 {
        color: #9aa0a6 !important;
      }

      body.mobile-category-screen .list-panel-resizable > .p-4.border-b button {
        width: 42px;
        height: 42px;
        min-width: 42px;
        min-height: 42px;
        padding: 0 !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        color: #f1f3f4 !important;
      }

      body.mobile-category-screen .list-panel-resizable > .p-4.border-b button span:not(.material-symbols-rounded) {
        display: none !important;
      }

      body.mobile-category-screen .list-panel-resizable > .flex-1.overflow-y-auto,
      body.mobile-social-screen .list-panel-resizable > .flex-1.overflow-y-auto {
        padding: 10px 12px 104px !important;
        background: #1f1f23;
        overflow-x: hidden;
      }

      body.mobile-category-screen .list-panel-resizable > .flex-1.overflow-y-auto > button,
      body.mobile-social-screen .list-panel-resizable > .flex-1.overflow-y-auto > button {
        min-height: 82px;
        margin-bottom: 10px;
        padding: 15px !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 20px !important;
        background: #141518 !important;
        color: #f1f3f4 !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        overflow: hidden;
      }

      body.mobile-category-screen .list-panel-resizable .font-semibold,
      body.mobile-social-screen .list-panel-resizable .font-semibold {
        color: #f1f3f4 !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      body.mobile-category-screen .list-panel-resizable .text-xs,
      body.mobile-category-screen .list-panel-resizable .text-\[11px\],
      body.mobile-social-screen .list-panel-resizable .text-xs,
      body.mobile-social-screen .list-panel-resizable .text-\[11px\] {
        color: #9aa0a6 !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      body.mobile-category-screen.mobile-category-mails [data-mail-list-scroll="true"] > div > .mb-4:first-child,
      body.mobile-social-screen.mobile-social-mails [data-mail-list-scroll="true"] > div > .mb-4:first-child {
        min-height: 86px;
        margin-bottom: 12px !important;
        padding: 14px 14px 14px 52px !important;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 20px;
        background: #141518;
      }

      body.mobile-category-screen.mobile-category-mails [data-mail-list-scroll="true"] h3,
      body.mobile-social-screen.mobile-social-mails [data-mail-list-scroll="true"] h3 {
        color: #f1f3f4 !important;
        font-size: 18px !important;
        line-height: 1.25 !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      body.mobile-category-screen.mobile-category-mails [data-mail-list-scroll="true"] h3 span,
      body.mobile-social-screen.mobile-social-mails [data-mail-list-scroll="true"] h3 span {
        color: #f1f3f4 !important;
      }

      body.mobile-category-screen.mobile-category-mails [data-mail-list-scroll="true"] h3 + p,
      body.mobile-social-screen.mobile-social-mails [data-mail-list-scroll="true"] h3 + p {
        color: #9aa0a6 !important;
        font-size: 12px !important;
        line-height: 1.45 !important;
      }

      body.mobile-category-screen.mobile-category-mails [data-mail-list-scroll="true"] > div > .flex.flex-wrap.gap-2.mb-4,
      body.mobile-social-screen.mobile-social-mails [data-mail-list-scroll="true"] > div > .flex.gap-2.mb-4 {
        max-height: none !important;
        min-height: 40px;
        display: flex !important;
        gap: 8px !important;
        margin: 0 0 12px !important;
        padding: 2px 0 4px !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none;
      }

      body.mobile-category-screen.mobile-category-mails [data-mail-list-scroll="true"] > div > .flex.flex-wrap.gap-2.mb-4::-webkit-scrollbar,
      body.mobile-social-screen.mobile-social-mails [data-mail-list-scroll="true"] > div > .flex.gap-2.mb-4::-webkit-scrollbar {
        display: none;
      }

      body.mobile-category-screen.mobile-category-mails [data-mail-list-scroll="true"] > div > .flex.flex-wrap.gap-2.mb-4 button,
      body.mobile-social-screen.mobile-social-mails [data-mail-list-scroll="true"] > div > .flex.gap-2.mb-4 button {
        flex: 0 0 auto;
        min-height: 38px;
        padding: 0 14px !important;
        border-radius: 999px !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
        background: #2b2c31 !important;
        color: #e8eaed !important;
        white-space: nowrap;
      }

      body.mobile-category-screen.mobile-category-mails [data-mail-list-scroll="true"] > div > .flex.flex-wrap.gap-2.mb-4 button.text-white,
      body.mobile-social-screen.mobile-social-mails [data-mail-list-scroll="true"] > div > .flex.gap-2.mb-4 button.text-white {
        background: #2563eb !important;
        border-color: #2563eb !important;
        color: #ffffff !important;
      }

      body.mobile-category-screen.mobile-category-mails [data-mail-list-scroll="true"] .space-y-3,
      body.mobile-social-screen.mobile-social-mails [data-mail-list-scroll="true"] .space-y-3 {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      body.mobile-category-screen.mobile-category-mails [data-mail-list-scroll="true"] .space-y-3 > button,
      body.mobile-social-screen.mobile-social-mails [data-mail-list-scroll="true"] .space-y-3 > button {
        margin: 0 !important;
        min-height: 92px;
        padding: 14px !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 18px !important;
        background: #141518 !important;
        color: #f1f3f4 !important;
        overflow: hidden;
      }

      body.mobile-category-screen.mobile-category-mails [data-mail-list-scroll="true"] .space-y-3 h4,
      body.mobile-social-screen.mobile-social-mails [data-mail-list-scroll="true"] .space-y-3 h4 {
        color: #f1f3f4 !important;
      }

      body.mobile-category-screen.mobile-category-mails [data-mail-list-scroll="true"] .space-y-3 p,
      body.mobile-social-screen.mobile-social-mails [data-mail-list-scroll="true"] .space-y-3 p {
        color: #9aa0a6 !important;
      }

      main,
      aside,
      header,
      section,
      article,
      form,
      .l-jmail-compose-panel,
      .danger-modal,
      .context-menu {
        max-width: 100%;
      }

      input,
      textarea,
      select,
      button {
        max-width: 100%;
      }

      html,
      body,
      #app {
        max-width: 100%;
        overflow-x: hidden;
      }

      .fixed.bottom-5.right-5.z-50.bg-slate-900.text-white {
        left: 50% !important;
        right: auto !important;
        bottom: max(20px, env(safe-area-inset-bottom)) !important;
        width: max-content;
        max-width: calc(100vw - 32px);
        transform: translateX(-50%);
        align-items: flex-start;
        border-radius: 18px !important;
        padding: 12px 16px !important;
        overflow: visible;
      }

      .fixed.bottom-5.right-5.z-50.bg-slate-900.text-white .text-xs.font-semibold {
        min-width: 0;
        max-width: calc(100vw - 92px);
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: keep-all;
        line-height: 1.45;
      }

      h1,
      h2,
      h3,
      h4,
      p,
      span,
      a,
      div {
        overflow-wrap: anywhere;
      }

      [data-mail-list-scroll="true"],
      .flex-1.overflow-y-auto {
        min-width: 0;
      }

      [data-mail-list-scroll="true"] {
        padding: 10px !important;
        padding-bottom: 104px !important;
        background: rgba(248, 250, 252, 0.72);
        overflow-x: hidden;
      }

      [data-mail-list-scroll="true"] .mb-4.grid.grid-cols-1.lg\:grid-cols-5.gap-2,
      [data-mail-list-scroll="true"] .mb-4.p-4.rounded-xl.border.border-red-100,
      [data-mail-list-scroll="true"] .mb-4.flex.items-center.justify-end.gap-2.text-\[11px\] {
        display: none !important;
      }

      .dark [data-mail-list-scroll="true"] {
        background: rgba(15, 23, 42, 0.78);
      }

      [data-mail-list-scroll="true"] ul {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      [data-mail-list-scroll="true"] .divide-y > :not([hidden]) ~ :not([hidden]) {
        border-top-width: 0 !important;
      }

      [data-mail-list-scroll="true"] li {
        width: 100%;
        max-width: 100%;
      }

      [data-mail-list-scroll="true"] button,
      [data-mail-list-scroll="true"] li,
      [data-mail-list-scroll="true"] .grid,
      [data-mail-list-scroll="true"] .space-y-2,
      [data-mail-list-scroll="true"] .space-y-3 {
        max-width: 100%;
      }

      [data-mail-list-scroll="true"] li > button,
      [data-mail-list-scroll="true"] .space-y-3 > button,
      [data-mail-list-scroll="true"] .grid > div {
        min-height: 80px;
        border-radius: 18px !important;
        border: 1px solid rgba(226, 232, 240, 0.9) !important;
        background: rgba(255, 255, 255, 0.96) !important;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
        overflow: hidden;
      }

      .dark [data-mail-list-scroll="true"] li > button,
      .dark [data-mail-list-scroll="true"] .space-y-3 > button,
      .dark [data-mail-list-scroll="true"] .grid > div {
        border-color: rgba(51, 65, 85, 0.9) !important;
        background: rgba(15, 23, 42, 0.96) !important;
      }

      [data-mail-list-scroll="true"] li > button {
        padding: 14px 12px !important;
      }

      [data-mail-list-scroll="true"] li > button > .flex,
      [data-mail-list-scroll="true"] .space-y-3 > button > .flex,
      [data-mail-list-scroll="true"] .grid > div > div {
        min-width: 0;
      }

      [data-mail-list-scroll="true"] .truncate,
      [data-mail-list-scroll="true"] h4,
      [data-mail-list-scroll="true"] p {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      [data-mail-list-scroll="true"] p {
        display: block;
        white-space: nowrap;
      }

      [data-mail-list-scroll="true"] .flex-wrap {
        max-height: 24px;
        overflow: hidden;
        gap: 4px !important;
      }

      [data-mail-list-scroll="true"] > .max-w-4xl:has(> .mb-4 h3.text-red-500) {
        overflow: visible;
      }

      [data-mail-list-scroll="true"] > .max-w-4xl:has(> .mb-4 h3.text-red-500) > .mb-4:first-child {
        margin-bottom: 18px !important;
      }

      [data-mail-list-scroll="true"] > .max-w-4xl:has(> .mb-4 h3.text-red-500) > .flex.flex-wrap.gap-2.mb-4 {
        max-height: none;
        min-height: 40px;
        margin-top: 10px;
        margin-bottom: 14px !important;
        padding-top: 4px;
        overflow-x: auto;
        overflow-y: visible;
        flex-wrap: nowrap;
        scrollbar-width: none;
        position: relative;
        z-index: 2;
      }

      [data-mail-list-scroll="true"] > .max-w-4xl:has(> .mb-4 h3.text-red-500) > .flex.flex-wrap.gap-2.mb-4::-webkit-scrollbar {
        display: none;
      }

      [data-mail-list-scroll="true"] > .max-w-4xl:has(> .mb-4 h3.text-red-500) > .flex.flex-wrap.gap-2.mb-4 > button {
        flex: 0 0 auto;
        min-height: 36px;
        line-height: 1.2;
        padding: 0 14px !important;
        border-radius: 999px !important;
        white-space: nowrap;
        overflow: visible;
      }

      [data-mail-list-scroll="true"] .text-\[9px\] {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      [data-mail-list-scroll="true"] .material-symbols-rounded {
        flex: 0 0 auto;
      }

      [data-mail-list-scroll="true"] .whitespace-nowrap {
        max-width: 72px;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      [data-mail-list-scroll="true"] li > button > span.absolute {
        top: 14px !important;
        left: 8px !important;
        width: 8px !important;
        height: 8px !important;
      }

      body:has(main .absolute.inset-0.z-10) aside.\-translate-x-full > .p-4:not(.flex) {
        display: none !important;
      }

      main .absolute.inset-0.z-10.flex-1.flex.flex-col.h-full.overflow-y-auto {
        background: #1f1f23 !important;
        color: #f8fafc;
        overflow-x: hidden;
      }

      main .absolute.inset-0.z-10 > div {
        min-width: 0;
        background: #1f1f23;
      }

      main .absolute.inset-0.z-10 .h-14.border-b {
        height: auto !important;
        min-height: 56px;
        padding: 8px 10px !important;
        gap: 8px;
        border-color: rgba(255, 255, 255, 0.08) !important;
        background: rgba(31, 31, 35, 0.96) !important;
        backdrop-filter: blur(14px);
        z-index: 20;
      }

      main .absolute.inset-0.z-10 .h-14.border-b > div {
        min-width: 0;
      }

      main .absolute.inset-0.z-10 .h-14.border-b > div:first-child {
        flex: 1 1 auto;
        overflow-x: auto;
        scrollbar-width: none;
      }

      main .absolute.inset-0.z-10 .h-14.border-b > div:first-child::-webkit-scrollbar {
        display: none;
      }

      main .absolute.inset-0.z-10 .h-14.border-b button,
      main .absolute.inset-0.z-10 .h-14.border-b select {
        min-width: 40px;
        min-height: 40px;
        color: #e5e7eb !important;
      }

      main .absolute.inset-0.z-10 .h-14.border-b button[type="button"]:has(.material-symbols-rounded) {
        display: none !important;
      }

      main .absolute.inset-0.z-10 .h-14.border-b .l-jmail-mobile-more-trigger {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        padding: 0 !important;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.06);
        color: #e5e7eb !important;
      }

      .l-jmail-mobile-more-menu {
        position: fixed;
        z-index: 120;
        width: min(292px, calc(100vw - 24px));
        max-height: min(70vh, 520px);
        padding: 8px;
        overflow-y: auto;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 22px;
        background: #202124;
        color: #e5e7eb;
        box-shadow: 0 18px 50px rgba(0, 0, 0, 0.42);
      }

      .l-jmail-mobile-more-item {
        width: 100%;
        min-height: 46px;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0 12px;
        border-radius: 16px;
        color: #e5e7eb;
        text-align: left;
        font-size: 14px;
        font-weight: 600;
      }

      .l-jmail-mobile-more-item:hover,
      .l-jmail-mobile-more-item:active {
        background: rgba(255, 255, 255, 0.08);
      }

      .l-jmail-mobile-more-item .material-symbols-rounded {
        flex: 0 0 22px;
        font-size: 21px;
        color: #cbd5e1;
      }

      .l-jmail-mobile-more-item span:last-child {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .l-jmail-mobile-more-item.is-danger,
      .l-jmail-mobile-more-item.is-danger .material-symbols-rounded {
        color: #f87171;
      }

      .l-jmail-mobile-more-divider {
        padding: 12px 12px 6px;
        color: rgba(226, 232, 240, 0.56);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0;
      }

      .l-jmail-mobile-search {
        position: fixed;
        inset: 0;
        z-index: 150;
        width: 100vw;
        height: 100dvh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: #1f1f23;
        color: #f8fafc;
      }

      .l-jmail-mobile-search-header {
        min-height: 64px;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(31, 31, 35, 0.98);
      }

      .l-jmail-mobile-search-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        color: #e5e7eb;
      }

      .l-jmail-mobile-search-icon:active {
        background: rgba(255, 255, 255, 0.08);
      }

      .l-jmail-mobile-search-input {
        min-width: 0;
        flex: 1 1 auto;
        height: 44px;
        border: 0;
        outline: 0;
        border-radius: 999px;
        padding: 0 16px;
        background: #2b2c31;
        color: #f8fafc;
        font-size: 15px;
      }

      .l-jmail-mobile-search-input::placeholder,
      .l-jmail-mobile-search-filter-input::placeholder {
        color: #9ca3af;
      }

      .l-jmail-mobile-search-filters {
        display: flex;
        gap: 8px;
        padding: 12px 12px 8px;
        overflow-x: auto;
        scrollbar-width: none;
      }

      .l-jmail-mobile-search-filters::-webkit-scrollbar {
        display: none;
      }

      .l-jmail-mobile-search-chip {
        flex: 0 0 auto;
        min-height: 38px;
        padding: 0 14px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.05);
        color: #e5e7eb;
        font-size: 13px;
        font-weight: 700;
      }

      .l-jmail-mobile-search-chip.is-active {
        border-color: rgba(96, 165, 250, 0.6);
        background: rgba(37, 99, 235, 0.25);
        color: #bfdbfe;
      }

      .l-jmail-mobile-search-filter-inputs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 0 12px 12px;
      }

      .l-jmail-mobile-search-filter-input {
        min-width: 0;
        height: 40px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 14px;
        padding: 0 12px;
        background: rgba(255, 255, 255, 0.05);
        color: #f8fafc;
        font-size: 13px;
      }

      .l-jmail-mobile-search-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding: 6px 12px 24px;
      }

      .l-jmail-mobile-search-body h3 {
        margin: 12px 4px;
        color: #cbd5e1;
        font-size: 13px;
        font-weight: 800;
      }

      .l-jmail-mobile-search-empty {
        padding: 28px 8px;
        color: #9ca3af;
        text-align: center;
        font-size: 14px;
      }

      .l-jmail-mobile-recent-search,
      .l-jmail-mobile-search-card {
        width: 100%;
        display: flex;
        text-align: left;
      }

      .l-jmail-mobile-recent-search {
        min-height: 48px;
        align-items: center;
        gap: 12px;
        padding: 0 12px;
        border-radius: 16px;
        color: #e5e7eb;
      }

      .l-jmail-mobile-recent-search:active {
        background: rgba(255, 255, 255, 0.08);
      }

      .l-jmail-mobile-search-card {
        min-height: 88px;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        margin-bottom: 8px;
        padding: 14px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.05);
        color: #e5e7eb;
      }

      .l-jmail-mobile-search-card.is-unread {
        border-color: rgba(96, 165, 250, 0.38);
        background: rgba(37, 99, 235, 0.16);
      }

      .l-jmail-mobile-search-card-meta,
      .l-jmail-mobile-search-card-preview {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #9ca3af;
        font-size: 12px;
      }

      .l-jmail-mobile-search-card-subject {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #f8fafc;
        font-size: 15px;
        font-weight: 800;
      }

      main .absolute.inset-0.z-10 .h-14.border-b > div:first-child {
        gap: 6px !important;
      }

      main .absolute.inset-0.z-10 .h-14.border-b select {
        max-width: 120px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.06) !important;
      }

      main .absolute.inset-0.z-10 .h-14.border-b .text-xs.text-gray-400 {
        display: none;
      }

      main .absolute.inset-0.z-10 .p-6.md\:p-8 {
        width: 100%;
        max-width: 100% !important;
        padding: 18px 16px 104px !important;
        color: #e5e7eb;
      }

      main .absolute.inset-0.z-10 h1 {
        font-size: clamp(24px, 7vw, 30px) !important;
        line-height: 1.18 !important;
        color: #f8fafc !important;
        letter-spacing: 0;
        overflow-wrap: anywhere;
      }

      main .absolute.inset-0.z-10 h1 + button {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.05);
      }

      main .absolute.inset-0.z-10 .flex.justify-between.items-start.mb-6 {
        gap: 12px;
        margin-bottom: 18px !important;
      }

      main .absolute.inset-0.z-10 .flex.items-center.justify-between.mb-8.pb-6.border-b {
        align-items: flex-start !important;
        gap: 14px;
        margin-bottom: 22px !important;
        padding: 18px !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.045);
      }

      main .absolute.inset-0.z-10 .flex.items-center.justify-between.mb-8.pb-6.border-b > .flex.items-center.gap-4 {
        min-width: 0;
        align-items: flex-start;
        gap: 12px !important;
      }

      main .absolute.inset-0.z-10 .w-12.h-12.rounded-full {
        width: 44px !important;
        height: 44px !important;
        flex: 0 0 44px;
      }

      main .absolute.inset-0.z-10 .font-semibold.text-gray-900,
      main .absolute.inset-0.z-10 .text-sm.text-gray-500,
      main .absolute.inset-0.z-10 .text-xs.text-gray-400 {
        max-width: 100%;
        color: #e5e7eb !important;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      main .absolute.inset-0.z-10 .text-sm.text-gray-500,
      main .absolute.inset-0.z-10 .text-xs.text-gray-400 {
        color: #9ca3af !important;
      }

      main .absolute.inset-0.z-10 .bg-gray-50.dark\:bg-slate-800.px-3.py-1\.5.rounded-lg {
        flex: 0 0 auto;
        max-width: 116px;
        background: rgba(255, 255, 255, 0.06) !important;
        color: #cbd5e1 !important;
        overflow: hidden;
      }

      main .absolute.inset-0.z-10 .prose {
        color: #e5e7eb !important;
        font-size: 16px;
        line-height: 1.78;
        white-space: normal;
        overflow-x: hidden;
      }

      main .absolute.inset-0.z-10 .prose div,
      main .absolute.inset-0.z-10 .prose p,
      main .absolute.inset-0.z-10 .prose span,
      main .absolute.inset-0.z-10 .prose a {
        color: inherit;
        max-width: 100%;
        overflow-wrap: anywhere;
      }

      main .absolute.inset-0.z-10 .prose img,
      main .absolute.inset-0.z-10 .prose table,
      main .absolute.inset-0.z-10 .prose iframe,
      main .absolute.inset-0.z-10 .prose video {
        max-width: 100% !important;
        height: auto !important;
      }

      main .absolute.inset-0.z-10 .prose table {
        display: block;
        overflow-x: auto;
      }

      main .absolute.inset-0.z-10 .mt-8.border-t.border-gray-100 {
        margin-top: 28px !important;
        padding-top: 18px !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
      }

      main .absolute.inset-0.z-10 .mt-8.border-t.border-gray-100 .space-y-2 > div {
        min-height: 64px;
        padding: 14px !important;
        border-radius: 18px !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
        background: #2b2c31 !important;
      }

      main .absolute.inset-0.z-10 .mt-8.border-t.border-gray-100 .space-y-2 > div > .flex {
        min-width: 0;
      }

      main .absolute.inset-0.z-10 .mt-8.border-t.border-gray-100 .truncate {
        max-width: min(52vw, 260px) !important;
        color: #f8fafc !important;
      }

      main .absolute.inset-0.z-10 .mt-8.border-t.border-gray-100 button {
        min-height: 44px;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        color: #e5e7eb !important;
      }

      main .absolute.inset-0.z-10 .mt-8.pt-5.border-t {
        margin-top: 28px !important;
        padding-top: 18px !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
        gap: 10px !important;
      }

      main .absolute.inset-0.z-10 .mt-8.pt-5.border-t > button {
        min-height: 48px;
        padding: 0 18px !important;
        border-radius: 999px !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
        background: rgba(255, 255, 255, 0.06) !important;
        color: #f8fafc !important;
      }

      main .absolute.inset-0.z-10 .mt-8.pt-5.border-t > button.l-jmail-mobile-detail-category-action {
        width: auto !important;
        min-width: 48px !important;
        gap: 7px !important;
        color: #bfdbfe !important;
      }

      main .absolute.inset-0.z-10 .mt-8.pt-5.border-t > button.l-jmail-mobile-detail-category-action .material-symbols-rounded {
        color: #93c5fd !important;
      }

      .l-jmail-mobile-detail-category-text {
        display: inline;
        font-size: 13px;
        font-weight: 800;
      }

      main .fixed.inset-0.z-50 .bg-white.dark\:bg-slate-900 {
        max-width: calc(100vw - 24px) !important;
        max-height: calc(100vh - 24px) !important;
        border-radius: 24px !important;
        background: #1f1f23 !important;
        color: #e5e7eb;
      }

      main .fixed.inset-0.z-50 h2 {
        font-size: clamp(24px, 7vw, 30px) !important;
        color: #f8fafc !important;
      }

      main .fixed.inset-0.z-50 .email-body,
      main .fixed.inset-0.z-50 .email-body * {
        color: #e5e7eb !important;
        max-width: 100%;
        overflow-wrap: anywhere;
      }

      .material-symbols-rounded {
        flex-shrink: 0;
      }

      .l-jmail-compose-panel {
        max-height: calc(100vh - 24px);
      }

      .danger-modal {
        width: calc(100vw - 32px);
        max-height: calc(100vh - 32px);
        overflow-y: auto;
      }

      .context-menu {
        max-width: calc(100vw - 24px);
      }

      .email-body,
      .email-body *,
      .prose,
      .prose * {
        max-width: 100%;
        overflow-wrap: anywhere;
      }

      div[class*="max-w-["],
      div[class*="w-["] {
        max-width: 100%;
      }

      html,
      body,
      #app,
      body.app-preloading,
      body.app-booting {
        background: var(--mobile-bg) !important;
        color: var(--mobile-text);
      }

      body.app-booting #app,
      body.app-ready #app {
        background: var(--mobile-bg) !important;
      }

      main,
      main > div,
      main > section,
      main > .flex-1,
      main .flex-1.overflow-y-auto,
      main .flex-1.flex,
      main .overflow-hidden.w-full,
      main .overflow-y-auto.w-full {
        background: var(--mobile-bg) !important;
        color: var(--mobile-text);
      }

      main > header,
      main header,
      aside.translate-x-0,
      aside.-translate-x-full {
        background: var(--mobile-bg) !important;
        color: var(--mobile-text) !important;
        border-color: var(--mobile-border) !important;
      }

      main > header {
        box-shadow: none !important;
        border-bottom: 1px solid var(--mobile-border) !important;
      }

      main > header input,
      main > header .max-w-md,
      main > header .bg-gray-100,
      main > header .dark\:bg-slate-800 {
        background: var(--mobile-surface-2) !important;
        color: var(--mobile-text) !important;
        border-color: transparent !important;
      }

      main > header input::placeholder,
      input::placeholder,
      textarea::placeholder {
        color: var(--mobile-subtle) !important;
      }

      main > header button,
      aside button,
      .material-symbols-rounded {
        color: var(--mobile-text);
      }

      main .bg-white,
      main .bg-gray-50,
      main .bg-gray-100,
      main .dark\:bg-slate-900,
      main .dark\:bg-slate-800,
      aside.bg-white,
      aside .bg-white,
      aside .bg-gray-50,
      aside .dark\:bg-slate-900,
      aside .dark\:bg-slate-800 {
        background-color: var(--mobile-bg) !important;
      }

      main .border-gray-100,
      main .border-gray-200,
      main .border-slate-700,
      main .dark\:border-slate-800,
      aside .border-gray-100,
      aside .border-gray-200,
      aside .dark\:border-slate-800 {
        border-color: var(--mobile-border) !important;
      }

      main .text-gray-950,
      main .text-gray-900,
      main .text-gray-800,
      main .text-gray-700,
      main .dark\:text-slate-100,
      main .dark\:text-slate-200,
      aside .text-gray-900,
      aside .text-gray-800,
      aside .text-gray-700,
      aside .text-gray-600,
      aside .dark\:text-slate-100,
      aside .dark\:text-slate-200 {
        color: var(--mobile-text) !important;
      }

      main .text-gray-600,
      main .text-gray-500,
      main .text-gray-400,
      main .dark\:text-slate-300,
      main .dark\:text-slate-400,
      aside .text-gray-500,
      aside .text-gray-400,
      aside .dark\:text-slate-300,
      aside .dark\:text-slate-400,
      aside .dark\:text-slate-500 {
        color: var(--mobile-muted) !important;
      }

      aside {
        background: var(--mobile-bg-2) !important;
        color: var(--mobile-text);
      }

      aside .flex-1.overflow-y-auto {
        background: var(--mobile-bg-2) !important;
      }

      aside li button,
      aside [data-l-jmail-category-section="true"] > button,
      aside .l-jmail-memo-folder-section button:not(.l-jmail-memo-folder-add-btn) {
        background: transparent !important;
        color: var(--mobile-muted) !important;
      }

      aside li button:hover,
      aside [data-l-jmail-category-section="true"] > button:hover {
        background: rgba(255, 255, 255, 0.06) !important;
      }

      aside li button span[class*="bg-gray"],
      aside li button span[class*="bg-red"],
      aside [data-l-jmail-category-section="true"] > button > span:last-child {
        background: var(--mobile-surface-2) !important;
        color: var(--mobile-text) !important;
      }

      [data-mail-list-scroll="true"] {
        background: var(--mobile-bg) !important;
        color: var(--mobile-text) !important;
      }

      [data-mail-list-scroll="true"] li > button,
      [data-mail-list-scroll="true"] .space-y-2 > div,
      [data-mail-list-scroll="true"] .space-y-3 > button,
      [data-mail-list-scroll="true"] .grid > div,
      body.mobile-category-screen:not(.mobile-category-mails) [data-mail-list-scroll="true"] .grid > button,
      body.mobile-social-screen:not(.mobile-social-mails) [data-mail-list-scroll="true"] .grid > button {
        border-color: var(--mobile-border) !important;
        background: var(--mobile-surface) !important;
        color: var(--mobile-text) !important;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18) !important;
      }

      [data-mail-list-scroll="true"] li > button:hover,
      [data-mail-list-scroll="true"] .space-y-3 > button:hover,
      [data-mail-list-scroll="true"] .grid > div:hover {
        background: var(--mobile-surface-alt) !important;
      }

      [data-mail-list-scroll="true"] li > button .font-semibold,
      [data-mail-list-scroll="true"] li > button .font-bold,
      [data-mail-list-scroll="true"] h3,
      [data-mail-list-scroll="true"] h4,
      [data-mail-list-scroll="true"] strong,
      [data-mail-list-scroll="true"] .text-gray-800,
      [data-mail-list-scroll="true"] .text-gray-900,
      [data-mail-list-scroll="true"] .dark\:text-slate-100 {
        color: var(--mobile-text) !important;
      }

      [data-mail-list-scroll="true"] p,
      [data-mail-list-scroll="true"] .text-xs,
      [data-mail-list-scroll="true"] .text-\[11px\],
      [data-mail-list-scroll="true"] .text-gray-400,
      [data-mail-list-scroll="true"] .text-gray-500,
      [data-mail-list-scroll="true"] .dark\:text-slate-400 {
        color: var(--mobile-muted) !important;
      }

      [data-mail-list-scroll="true"] li > button.font-semibold,
      [data-mail-list-scroll="true"] li > button:has(span.absolute) {
        background: #181a20 !important;
      }

      [data-mail-list-scroll="true"] .text-\[9px\],
      [data-mail-list-scroll="true"] .rounded,
      [data-mail-list-scroll="true"] .rounded-full,
      [data-mail-list-scroll="true"] .rounded-lg,
      main .text-\[9px\].rounded,
      main .text-xs.rounded-full {
        border-color: var(--mobile-border) !important;
      }

      [data-mail-list-scroll="true"] .bg-blue-50,
      [data-mail-list-scroll="true"] .bg-slate-100,
      [data-mail-list-scroll="true"] .bg-gray-100,
      main .bg-blue-50,
      main .bg-slate-100,
      main .bg-gray-100 {
        background: rgba(79, 125, 243, 0.16) !important;
        color: #bfdbfe !important;
      }

      [data-mail-list-scroll="true"] .bg-pink-50,
      [data-mail-list-scroll="true"] .bg-red-50,
      main .bg-red-50,
      main .bg-red-100 {
        background: rgba(255, 107, 107, 0.14) !important;
        color: #fecaca !important;
      }

      [data-mail-list-scroll="true"] .bg-green-100,
      [data-mail-list-scroll="true"] .bg-emerald-50,
      main .bg-green-100,
      main .bg-emerald-50 {
        background: rgba(99, 212, 113, 0.16) !important;
        color: #bbf7d0 !important;
      }

      [data-mail-list-scroll="true"] > .max-w-4xl:has(> .mb-4 h3.text-red-500) > .flex.flex-wrap.gap-2.mb-4 > button,
      body.mobile-category-screen.mobile-category-mails [data-mail-list-scroll="true"] > div > .flex.flex-wrap.gap-2.mb-4 button,
      body.mobile-social-screen.mobile-social-mails [data-mail-list-scroll="true"] > div > .flex.gap-2.mb-4 button,
      [data-mail-list-scroll="true"] .flex.flex-wrap.gap-2.mb-4 button {
        border-color: var(--mobile-border) !important;
        background: var(--mobile-surface-2) !important;
        color: var(--mobile-text) !important;
      }

      [data-mail-list-scroll="true"] > .max-w-4xl:has(> .mb-4 h3.text-red-500) > .flex.flex-wrap.gap-2.mb-4 > button.text-white,
      body.mobile-category-screen.mobile-category-mails [data-mail-list-scroll="true"] > div > .flex.flex-wrap.gap-2.mb-4 button.text-white,
      body.mobile-social-screen.mobile-social-mails [data-mail-list-scroll="true"] > div > .flex.gap-2.mb-4 button.text-white,
      [data-mail-list-scroll="true"] .flex.flex-wrap.gap-2.mb-4 button.text-white {
        background: var(--mobile-accent) !important;
        color: #ffffff !important;
      }

      body.mobile-category-screen,
      body.mobile-social-screen,
      body.mobile-workspace-view,
      body.mobile-memo-view,
      body.mobile-memo-editor-open,
      body.mobile-compose-open,
      body.mobile-search-open,
      body.mobile-detail-open {
        background: var(--mobile-bg) !important;
      }

      body.mobile-category-screen .flex-1.flex.overflow-hidden.w-full,
      body.mobile-social-screen .flex-1.flex.overflow-hidden.w-full,
      body.mobile-workspace-view main > .flex-1.flex.flex-col.overflow-hidden.w-full,
      body.mobile-memo-view main > .flex-1.flex.h-full.bg-white {
        background: var(--mobile-bg) !important;
        color: var(--mobile-text) !important;
      }

      body.mobile-category-screen:not(.mobile-category-mails) [data-mail-list-scroll="true"] .grid > button,
      body.mobile-social-screen:not(.mobile-social-mails) [data-mail-list-scroll="true"] .grid > button,
      body.mobile-memo-view .w-full.md\:w-\[360px\].lg\:w-\[430px\] > .flex-1 > button {
        background: var(--mobile-surface) !important;
        border-color: var(--mobile-border) !important;
        color: var(--mobile-text) !important;
      }

      body.mobile-workspace-view [data-mail-list-scroll="true"] > .grid > div,
      body.mobile-memo-view .w-full.md\:w-\[360px\].lg\:w-\[430px\] > .h-16,
      body.mobile-workspace-view main > .flex-1.flex.flex-col.overflow-hidden.w-full > .p-4.border-b {
        background: var(--mobile-surface) !important;
        border-color: var(--mobile-border) !important;
      }

      input,
      textarea,
      select {
        background: var(--mobile-surface-2) !important;
        border-color: var(--mobile-border) !important;
        color: var(--mobile-text) !important;
      }

      button {
        color: inherit;
      }

      main button.bg-white,
      main button.dark\:bg-slate-900,
      main button.dark\:bg-slate-800 {
        background: var(--mobile-surface-2) !important;
        color: var(--mobile-text) !important;
        border-color: var(--mobile-border) !important;
      }

      main .fixed.inset-0.z-50,
      .danger-modal-backdrop {
        background: rgba(0, 0, 0, 0.58) !important;
      }

      main .fixed.inset-0.z-50 .bg-white.dark\:bg-slate-900,
      .danger-modal,
      .context-menu {
        background: var(--mobile-surface) !important;
        border-color: var(--mobile-border) !important;
        color: var(--mobile-text) !important;
      }

      .fixed.bottom-5.right-5.z-50.bg-slate-900.text-white {
        border: 1px solid var(--mobile-border);
        background: #111827 !important;
        color: var(--mobile-text) !important;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.38);
      }

      main .bg-amber-50,
      main .bg-yellow-50,
      main .border-amber-200,
      main .border-yellow-200 {
        background: rgba(79, 125, 243, 0.14) !important;
        border-color: rgba(79, 125, 243, 0.36) !important;
        color: var(--mobile-text) !important;
      }

      .l-jmail-mobile-search,
      .l-jmail-mobile-search-body,
      .l-jmail-mobile-search-header {
        background: var(--mobile-bg) !important;
        color: var(--mobile-text) !important;
      }

      .l-jmail-mobile-search-card,
      .l-jmail-mobile-category-picker-sheet,
      .l-jmail-mobile-more-menu {
        background: var(--mobile-surface) !important;
        border-color: var(--mobile-border) !important;
        color: var(--mobile-text) !important;
      }

      .l-jmail-mobile-search-chip,
      .l-jmail-mobile-search-filter-input,
      .l-jmail-mobile-search-input,
      .l-jmail-mobile-category-picker-item,
      .l-jmail-mobile-category-picker-create,
      .l-jmail-mobile-more-item {
        background: var(--mobile-surface-2) !important;
        color: var(--mobile-text) !important;
      }

      .l-jmail-mobile-search-chip.is-active {
        background: var(--mobile-accent) !important;
        color: #ffffff !important;
      }

      .text-red-500,
      .text-red-600,
      .text-red-700 {
        color: var(--mobile-danger) !important;
      }

      .text-green-500,
      .text-green-600,
      .text-green-700 {
        color: var(--mobile-success) !important;
      }

      @supports (padding: max(0px)) {
        body.l-jmail-pwa-standalone {
          background: var(--mobile-bg) !important;
        }

        body.l-jmail-pwa-standalone #app {
          box-sizing: border-box;
          padding-top: env(safe-area-inset-top);
          padding-bottom: env(safe-area-inset-bottom);
          background: var(--mobile-bg) !important;
        }

        body.l-jmail-pwa-standalone .l-jmail-mobile-compose-fab {
          bottom: max(24px, calc(env(safe-area-inset-bottom) + 18px)) !important;
        }
      }

      body.mobile-compose-open .l-jmail-compose-panel > div:first-child {
        height: 68px !important;
        min-height: 68px !important;
        max-height: 68px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 14px !important;
        box-sizing: border-box !important;
        line-height: 1 !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel > div:first-child > div {
        height: 48px !important;
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
        gap: 0 !important;
        line-height: 1 !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel > div:first-child > div > button:nth-child(1),
      body.mobile-compose-open .l-jmail-compose-panel > div:first-child > div > button:nth-child(2) {
        display: none !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel > div:first-child > div > button:nth-child(3) {
        position: static !important;
        inset: auto !important;
        margin: 0 auto 0 0 !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel form > div:last-child {
        position: fixed !important;
        top: 10px !important;
        right: 14px !important;
        z-index: 10002 !important;
        width: auto !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-sizing: border-box !important;
        line-height: 1 !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel form > div:last-child > div:first-child {
        height: 48px !important;
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
        line-height: 1 !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel form > div:last-child > button:last-child,
      body.mobile-compose-open .l-jmail-compose-panel form > div:last-child > div:first-child > button:not([type="submit"]) {
        display: none !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel form > div:last-child > div:first-child > button[type="submit"],
      body.mobile-compose-open .l-jmail-compose-panel form > div:last-child > div:first-child > label,
      body.mobile-compose-open .l-jmail-compose-panel form > div:last-child > div:first-child > button:nth-of-type(3),
      body.mobile-compose-open .l-jmail-compose-panel > div:first-child > div > button:nth-child(3) {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;
        flex: 0 0 48px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: transparent !important;
        color: var(--mobile-text) !important;
        line-height: 1 !important;
        vertical-align: middle !important;
        box-sizing: border-box !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel form > div:last-child > div:first-child > button[type="submit"] {
        order: 2 !important;
        font-size: 0 !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel form > div:last-child > div:first-child > label {
        order: 1 !important;
        font-size: 0 !important;
        overflow: hidden !important;
        gap: 0 !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel form > div:last-child > div:first-child > button:nth-of-type(3) {
        order: 3 !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel > div:first-child > div > button:nth-child(3) .material-symbols-rounded,
      body.mobile-compose-open .l-jmail-compose-panel > div:first-child > div > button:nth-child(3) .material-symbols-rounded::before,
      body.mobile-compose-open .l-jmail-compose-panel form > div:last-child .material-symbols-rounded,
      body.mobile-compose-open .l-jmail-compose-panel form > div:last-child > div:first-child > button:nth-of-type(3) .material-symbols-rounded::before {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 30px !important;
        line-height: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        vertical-align: middle !important;
        text-align: center !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel > div:first-child > div > button:nth-child(3) .material-symbols-rounded {
        font-size: 0 !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel > div:first-child > div > button:nth-child(3) .material-symbols-rounded::before {
        content: "arrow_back";
        font-family: "Material Symbols Rounded";
      }

      body.mobile-compose-open .l-jmail-compose-panel form > div:last-child > div:first-child > button:nth-of-type(3) .material-symbols-rounded {
        font-size: 0 !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel form > div:last-child > div:first-child > button:nth-of-type(3) .material-symbols-rounded::before {
        content: "more_vert";
        font-family: "Material Symbols Rounded";
        transform: translateY(-1px);
      }

      /* Final mobile compose toolbar alignment: actual DOM uses header close + footer actions. */
      body.mobile-compose-open .l-jmail-compose-panel > div:first-child,
      body.mobile-compose-open .l-jmail-compose-panel form > div:last-child {
        height: 68px !important;
        min-height: 68px !important;
        max-height: 68px !important;
        display: flex !important;
        align-items: center !important;
        box-sizing: border-box !important;
        line-height: 1 !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel > div:first-child {
        padding: 0 16px !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel form > div:last-child {
        position: fixed !important;
        top: 0 !important;
        right: 12px !important;
        z-index: 10003 !important;
        width: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
        justify-content: flex-end !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel > div:first-child > div,
      body.mobile-compose-open .l-jmail-compose-panel form > div:last-child > div:first-child {
        height: 68px !important;
        min-height: 68px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        padding: 0 !important;
        margin: 0 !important;
        line-height: 1 !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel > div:first-child > div > button:nth-child(3),
      body.mobile-compose-open .l-jmail-compose-panel form > div:last-child > div:first-child > button[type="submit"],
      body.mobile-compose-open .l-jmail-compose-panel form > div:last-child > div:first-child > label,
      body.mobile-compose-open .l-jmail-compose-panel form > div:last-child > div:first-child > button:nth-of-type(3) {
        appearance: none !important;
        -webkit-appearance: none !important;
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;
        flex: 0 0 48px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: transparent !important;
        color: var(--mobile-text) !important;
        line-height: 1 !important;
        vertical-align: middle !important;
        box-sizing: border-box !important;
        touch-action: manipulation;
      }

      body.mobile-compose-open .l-jmail-compose-panel form > div:last-child > div:first-child > button[type="submit"] > span:not(.material-symbols-rounded),
      body.mobile-compose-open .l-jmail-compose-panel form > div:last-child > div:first-child > label > span:not(.material-symbols-rounded) {
        display: none !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel > div:first-child > div > button:nth-child(3) .material-symbols-rounded,
      body.mobile-compose-open .l-jmail-compose-panel > div:first-child > div > button:nth-child(3) .material-symbols-rounded::before,
      body.mobile-compose-open .l-jmail-compose-panel form > div:last-child > div:first-child > button[type="submit"] .material-symbols-rounded,
      body.mobile-compose-open .l-jmail-compose-panel form > div:last-child > div:first-child > label .material-symbols-rounded,
      body.mobile-compose-open .l-jmail-compose-panel form > div:last-child > div:first-child > button:nth-of-type(3) .material-symbols-rounded,
      body.mobile-compose-open .l-jmail-compose-panel form > div:last-child > div:first-child > button:nth-of-type(3) .material-symbols-rounded::before {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 30px !important;
        line-height: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        vertical-align: middle !important;
        text-align: center !important;
        font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 32;
      }

      body.mobile-compose-open .l-jmail-compose-panel > div:first-child > div > button:nth-child(3) .material-symbols-rounded,
      body.mobile-compose-open .l-jmail-compose-panel form > div:last-child > div:first-child > button:nth-of-type(3) .material-symbols-rounded {
        font-size: 0 !important;
      }

      body.mobile-compose-open .l-jmail-compose-panel > div:first-child > div > button:nth-child(3) .material-symbols-rounded::before {
        content: "arrow_back";
        font-family: "Material Symbols Rounded";
      }

      body.mobile-compose-open .l-jmail-compose-panel form > div:last-child > div:first-child > button:nth-of-type(3) .material-symbols-rounded::before {
        content: "more_vert";
        font-family: "Material Symbols Rounded";
        transform: translateY(-1px);
      }

      body.mobile-compose-open .mobile-compose-css-target .mobile-compose-toolbar,
      body.mobile-compose-open .mobile-compose-css-target .mobile-compose-toolbar-actions {
        height: 64px !important;
        min-height: 64px !important;
        max-height: 64px !important;
        display: flex !important;
        align-items: center !important;
        box-sizing: border-box !important;
        line-height: 1 !important;
      }

      body.mobile-compose-open .mobile-compose-css-target .mobile-compose-toolbar {
        justify-content: space-between !important;
        padding: 0 16px !important;
      }

      body.mobile-compose-open .mobile-compose-css-target .mobile-compose-toolbar-actions {
        position: fixed !important;
        top: 0 !important;
        right: 16px !important;
        z-index: 10004 !important;
        width: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
        justify-content: flex-end !important;
      }

      body.mobile-compose-open .mobile-compose-css-target .mobile-compose-header-actions,
      body.mobile-compose-open .mobile-compose-css-target .mobile-compose-action-group {
        height: 64px !important;
        min-height: 64px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 12px !important;
        flex-wrap: nowrap !important;
        padding: 0 !important;
        margin: 0 !important;
        line-height: 1 !important;
      }

      body.mobile-compose-open .mobile-compose-css-target .mobile-compose-header-actions > button:not(.mobile-compose-back-button),
      body.mobile-compose-open .mobile-compose-css-target .mobile-compose-toolbar-actions > button:last-child,
      body.mobile-compose-open .mobile-compose-css-target .mobile-compose-action-group > button:not(.mobile-compose-action-button) {
        display: none !important;
      }

      body.mobile-compose-open .mobile-compose-css-target .mobile-compose-action-button {
        appearance: none !important;
        -webkit-appearance: none !important;
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;
        flex: 0 0 48px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: transparent !important;
        color: var(--mobile-text) !important;
        line-height: 1 !important;
        vertical-align: middle !important;
        box-sizing: border-box !important;
        touch-action: manipulation;
      }

      body.mobile-compose-open .mobile-compose-css-target .mobile-compose-action-button > span:not(.material-symbols-rounded) {
        display: none !important;
      }

      body.mobile-compose-open .mobile-compose-css-target .mobile-compose-action-button span,
      body.mobile-compose-open .mobile-compose-css-target .mobile-compose-action-button svg,
      body.mobile-compose-open .mobile-compose-css-target .mobile-compose-action-button i,
      body.mobile-compose-open .mobile-compose-css-target .mobile-compose-action-button .material-symbols-rounded,
      body.mobile-compose-open .mobile-compose-css-target .mobile-compose-action-button .material-symbols-rounded::before {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 30px !important;
        line-height: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        vertical-align: middle !important;
        text-align: center !important;
        font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 32;
      }

      body.mobile-compose-open .mobile-compose-css-target .mobile-compose-back-button .material-symbols-rounded,
      body.mobile-compose-open .mobile-compose-css-target .mobile-compose-more-button .material-symbols-rounded {
        font-size: 0 !important;
      }

      body.mobile-compose-open .mobile-compose-css-target .mobile-compose-back-button .material-symbols-rounded::before {
        content: "arrow_back";
        font-family: "Material Symbols Rounded";
      }

      body.mobile-compose-open .mobile-compose-css-target .mobile-compose-more-button .material-symbols-rounded::before {
        content: "more_vert";
        font-family: "Material Symbols Rounded";
        transform: translateY(-1px);
      }

      body.mobile-compose-open .mobile-compose-css-target .mobile-compose-attach-button {
        order: 1 !important;
      }

      body.mobile-compose-open .mobile-compose-css-target .mobile-compose-send-button {
        order: 2 !important;
      }

      body.mobile-compose-open .mobile-compose-css-target .mobile-compose-more-button {
        order: 3 !important;
      }
    }

    @media (max-width: 640px) {
      button,
      select,
      input,
      textarea {
        min-height: 40px;
      }

      header {
        min-width: 0;
      }

      .l-jmail-compose-panel {
        width: calc(100vw - 24px);
      }

      .danger-modal-actions button {
        min-height: 44px;
      }
    }

    .danger-modal-backdrop {
      position: fixed;
      inset: 0;
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
      background: rgba(15, 23, 42, 0.45);
      backdrop-filter: blur(6px);
    }

    .danger-modal {
      width: calc(100% - 32px);
      max-width: 440px;
      padding: 24px;
      border-radius: 18px;
      border: 1px solid rgba(229, 231, 235, 0.9);
      background: #ffffff;
      box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
      color: #111827;
    }

    .dark .danger-modal {
      border-color: rgba(51, 65, 85, 0.9);
      background: #0f172a;
      color: #f8fafc;
    }

    .danger-modal-icon {
      width: 42px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 14px;
      background: #fef2f2;
      color: #dc2626;
      margin-bottom: 14px;
    }

    .dark .danger-modal-icon {
      background: rgba(127, 29, 29, 0.28);
      color: #f87171;
    }

    .danger-modal-title {
      font-size: 20px;
      font-weight: 800;
      margin: 0 0 8px;
    }

    .danger-modal-message {
      margin: 0 0 16px;
      color: #6b7280;
      font-size: 13px;
      line-height: 1.65;
    }

    .dark .danger-modal-message {
      color: #94a3b8;
    }

    .danger-modal-mail {
      display: grid;
      gap: 8px;
      padding: 12px;
      margin-bottom: 16px;
      border-radius: 12px;
      background: #f8fafc;
      border: 1px solid #e5e7eb;
    }

    .dark .danger-modal-mail {
      background: #111827;
      border-color: #334155;
    }

    .danger-modal-mail div {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr);
      gap: 8px;
      align-items: center;
      font-size: 12px;
    }

    .danger-modal-mail span {
      color: #9ca3af;
      font-weight: 700;
    }

    .danger-modal-mail strong {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-weight: 700;
    }

    .danger-password-label {
      display: block;
      margin-bottom: 8px;
      font-size: 12px;
      font-weight: 700;
      color: #4b5563;
    }

    .dark .danger-password-label {
      color: #cbd5e1;
    }

    .danger-password-field {
      position: relative;
    }

    .danger-password-field input {
      width: 100%;
      height: 44px;
      padding: 0 44px 0 12px;
      border-radius: 12px;
      border: 1px solid #e5e7eb;
      outline: none;
      background: #ffffff;
      color: #111827;
      font-size: 13px;
    }

    .danger-password-field input:focus {
      border-color: #ef4444;
      box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
    }

    .password-toggle-btn {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 0;
      border-radius: 10px;
      background: transparent;
      color: #9ca3af;
      cursor: pointer;
    }

    .password-toggle-btn:hover {
      background: #f3f4f6;
      color: #4b5563;
    }

    .dark .password-toggle-btn:hover {
      background: #1e293b;
      color: #cbd5e1;
    }

    .danger-modal-error {
      margin: 10px 0 0;
      padding: 9px 10px;
      border-radius: 10px;
      background: #fef2f2;
      color: #dc2626;
      font-size: 12px;
      font-weight: 700;
    }

    .dark .danger-modal-error {
      background: rgba(127, 29, 29, 0.24);
      color: #fca5a5;
    }

    .danger-modal-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 20px;
    }

    .danger-modal-actions button {
      min-height: 40px;
      padding: 0 14px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 800;
      transition: filter 0.15s ease, opacity 0.15s ease;
    }

    .danger-modal-actions button:disabled {
      opacity: 0.58;
      cursor: not-allowed;
    }

    .danger-modal-cancel {
      border: 1px solid #e5e7eb;
      background: #ffffff;
      color: #4b5563;
    }

    .dark .danger-modal-cancel {
      border-color: #334155;
      background: #111827;
      color: #cbd5e1;
    }

    .danger-modal-confirm {
      border: 1px solid #dc2626;
      background: #dc2626;
      color: #ffffff;
    }

    .danger-modal-confirm:hover:not(:disabled) {
      filter: brightness(1.05);
    }

    .l-jmail-compose-textarea-hidden {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      opacity: 0 !important;
      pointer-events: none !important;
      resize: none !important;
    }

    .l-jmail-compose-editor {
      width: 100%;
      min-height: 160px;
      outline: none;
      color: #1f2937;
      font-size: 14px;
      line-height: 1.7;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }

    .dark .l-jmail-compose-editor {
      color: #e2e8f0;
    }

    .l-jmail-compose-editor:empty::before,
    .l-jmail-compose-editor.is-compose-empty::before {
      content: attr(data-placeholder);
      display: block;
      margin: 0 0 14px;
      color: #9ca3af;
      opacity: 0.82;
      pointer-events: none;
      user-select: none;
      font-size: 14px;
      line-height: 1.7;
    }

    .l-jmail-compose-editor [data-ljmail-body-area="true"] {
      min-height: 1.7em;
      outline: none;
    }

    .l-jmail-compose-editor a,
    .email-body a,
    .prose a {
      color: #2563eb;
      text-decoration: underline;
      text-underline-offset: 2px;
      cursor: pointer;
    }

    .l-jmail-compose-editor .l-jmail-inline-image,
    .email-body img,
    .prose img {
      display: block;
      max-width: 100%;
      height: auto;
      margin: 8px 0;
      border-radius: 8px;
    }

    .l-jmail-compose-editor .l-jmail-inline-image-selected {
      outline: 3px solid #4f7df3;
      outline-offset: 3px;
      box-shadow: 0 0 0 6px rgba(79, 125, 243, 0.14);
    }

    .l-jmail-inline-image-toolbar {
      position: fixed;
      z-index: 10025;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      max-width: calc(100vw - 24px);
      padding: 6px;
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 12px;
      background: #ffffff;
      color: #111827;
      box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
    }

    .l-jmail-inline-image-toolbar button {
      min-height: 32px;
      padding: 0 10px;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: inherit;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
    }

    .l-jmail-inline-image-toolbar button:hover {
      background: #f3f4f6;
    }

    .l-jmail-inline-image-toolbar button.is-danger {
      color: #dc2626;
    }

    .l-jmail-signature-panel {
      position: fixed;
      z-index: 10026;
      width: min(380px, calc(100vw - 24px));
      display: grid;
      gap: 10px;
      padding: 14px;
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 14px;
      background: #ffffff;
      color: #111827;
      box-shadow: 0 18px 45px rgba(15, 23, 42, 0.2);
    }

    .l-jmail-signature-panel-title {
      font-size: 13px;
      font-weight: 800;
    }

    .l-jmail-signature-toggle {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 700;
      color: #374151;
    }

    .l-jmail-signature-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .l-jmail-signature-grid label {
      display: grid;
      gap: 5px;
      min-width: 0;
      font-size: 11px;
      font-weight: 800;
      color: #4b5563;
    }

    .l-jmail-signature-grid label:nth-child(1),
    .l-jmail-signature-grid label:nth-child(4) {
      grid-column: 1 / -1;
    }

    .l-jmail-signature-grid input,
    .l-jmail-signature-grid select {
      width: 100%;
      min-width: 0;
      height: 36px;
      padding: 0 10px;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      background: #ffffff;
      color: #111827;
      font-size: 12px;
      font-weight: 700;
      outline: none;
    }

    .l-jmail-signature-grid input:focus,
    .l-jmail-signature-grid select:focus {
      border-color: #2563eb;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

    .l-jmail-signature-panel textarea {
      width: 100%;
      resize: vertical;
      min-height: 96px;
      padding: 10px;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      outline: none;
      font-size: 13px;
      line-height: 1.5;
    }

    .l-jmail-signature-preview {
      min-height: 54px;
      padding: 10px;
      border: 1px dashed #d1d5db;
      border-radius: 10px;
      color: #4b5563;
      font-size: 12px;
      line-height: 1.5;
      background: #f9fafb;
      overflow: auto;
    }

    .l-jmail-signature-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }

    .l-jmail-signature-actions button {
      min-height: 34px;
      padding: 0 12px;
      border: 0;
      border-radius: 9px;
      background: #eef2ff;
      color: #3730a3;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
    }

    .l-jmail-signature-actions button[data-signature-close] {
      background: #f3f4f6;
      color: #374151;
    }

    .l-jmail-emoji-popover {
      position: fixed;
      z-index: 10020;
      width: min(320px, calc(100vw - 24px));
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 4px;
      padding: 10px;
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 14px;
      background: #ffffff;
      box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
    }

    .l-jmail-emoji-popover button {
      width: 34px;
      height: 34px;
      border: 0;
      border-radius: 9px;
      background: transparent;
      font-size: 20px;
      line-height: 1;
      cursor: pointer;
    }

    .l-jmail-emoji-popover button:hover {
      background: #f3f4f6;
    }

    .l-jmail-compose-drag-overlay {
      position: absolute;
      inset: 64px 12px 72px;
      z-index: 10010;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px dashed #60a5fa;
      border-radius: 16px;
      background: rgba(37, 99, 235, 0.1);
      color: #1d4ed8;
      font-size: 14px;
      font-weight: 800;
      pointer-events: none;
      backdrop-filter: blur(2px);
    }

    .l-jmail-attachment-card {
      transition: border-color 160ms ease, background-color 160ms ease, opacity 160ms ease;
    }

    .mail-attachments-section {
      width: 100%;
      max-width: 520px;
      margin-top: 32px;
      padding-top: 20px;
      border-top: 1px solid #e5e7eb;
    }

    .mail-attachments-title {
      margin: 0 0 12px;
      color: #64748b;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.4;
    }

    .mail-attachments-list {
      display: grid;
      gap: 10px;
    }

    .mail-attachment-card {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      min-width: 0;
      padding: 12px 14px;
      overflow: hidden;
      background: #f8fafc;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    }

    .mail-attachment-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 42px;
      width: 42px;
      height: 42px;
      color: #64748b;
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
    }

    .mail-attachment-icon .material-symbols-rounded {
      font-size: 23px;
    }

    .mail-attachment-icon-video {
      color: #7c3aed;
      background: #f5f3ff;
      border-color: #ddd6fe;
    }

    .mail-attachment-info {
      flex: 1 1 auto;
      min-width: 0;
    }

    .mail-attachment-name {
      overflow: hidden;
      color: #334155;
      font-size: 13px;
      font-weight: 650;
      line-height: 1.4;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .mail-attachment-meta {
      margin-top: 3px;
      overflow: hidden;
      color: #94a3b8;
      font-size: 11px;
      line-height: 1.35;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .mail-attachment-download {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      gap: 5px;
      min-height: 34px;
      padding: 7px 11px;
      color: #475569;
      font-size: 11px;
      font-weight: 700;
      line-height: 1;
      background: #fff;
      border: 1px solid #dbe2ea;
      border-radius: 9px;
      cursor: pointer;
      transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
    }

    .mail-attachment-download:hover:not(:disabled) {
      color: #4f46e5;
      background: #eef2ff;
      border-color: #c7d2fe;
    }

    .mail-attachment-download:focus-visible {
      outline: 2px solid #818cf8;
      outline-offset: 2px;
    }

    .mail-attachment-download:disabled {
      color: #94a3b8;
      background: #f1f5f9;
      cursor: not-allowed;
      opacity: 0.75;
    }

    .mail-attachment-download .material-symbols-rounded {
      font-size: 17px;
    }

    .dark .mail-attachments-section {
      border-top-color: #1e293b;
    }

    .dark .mail-attachment-card {
      background: #172033;
      border-color: #334155;
      box-shadow: none;
    }

    .dark .mail-attachment-icon {
      color: #cbd5e1;
      background: #0f172a;
      border-color: #334155;
    }

    .dark .mail-attachment-icon-video {
      color: #c4b5fd;
      background: rgba(91, 33, 182, 0.2);
      border-color: rgba(139, 92, 246, 0.38);
    }

    .dark .mail-attachment-name {
      color: #e2e8f0;
    }

    .dark .mail-attachment-download {
      color: #cbd5e1;
      background: #0f172a;
      border-color: #475569;
    }

    .dark .mail-attachment-download:hover:not(:disabled) {
      color: #c7d2fe;
      background: #1e1b4b;
      border-color: #6366f1;
    }

    @media (max-width: 640px) {
      .mail-attachments-section {
        max-width: none;
        margin-top: 24px;
      }

      .mail-attachment-card {
        align-items: flex-start;
        flex-wrap: wrap;
        padding: 12px;
      }

      .mail-attachment-info {
        width: calc(100% - 54px);
      }

      .mail-attachment-name {
        white-space: normal;
        overflow-wrap: anywhere;
      }

      .mail-attachment-download {
        width: 100%;
        margin-left: 54px;
      }
    }

    .l-jmail-attachment-card-error {
      border-color: rgba(239, 68, 68, 0.35) !important;
      background: rgba(254, 242, 242, 0.78) !important;
    }

    .dark .l-jmail-attachment-card-error {
      border-color: rgba(248, 113, 113, 0.35) !important;
      background: rgba(127, 29, 29, 0.16) !important;
    }

    .l-jmail-attachment-spinner {
      width: 14px;
      height: 14px;
      flex: 0 0 auto;
      border: 2px solid rgba(99, 102, 241, 0.22);
      border-top-color: rgb(99, 102, 241);
      border-radius: 9999px;
      animation: l-jmail-attachment-spin 700ms linear infinite;
    }

    .l-jmail-attachment-spinner-light {
      border-color: rgba(255, 255, 255, 0.35);
      border-top-color: #fff;
    }

    .l-jmail-attachment-status {
      margin-top: 2px;
      color: rgb(99, 102, 241);
      font-size: 10px;
      line-height: 1.25;
    }

    .l-jmail-attachment-status-ready {
      color: rgb(22, 163, 74);
    }

    .l-jmail-attachment-status-error {
      color: rgb(220, 38, 38);
    }

    @keyframes l-jmail-attachment-spin {
      to { transform: rotate(360deg); }
    }

    .l-jmail-link-popover,
    .l-jmail-link-preview {
      position: fixed;
      z-index: 10020;
      max-width: calc(100vw - 24px);
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 12px;
      background: #ffffff;
      color: #111827;
      box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
    }

    .l-jmail-link-popover {
      width: 360px;
      padding: 14px;
      display: grid;
      gap: 10px;
    }

    .l-jmail-link-popover label {
      display: grid;
      gap: 6px;
      font-size: 12px;
      font-weight: 700;
      color: #4b5563;
    }

    .l-jmail-link-popover input {
      width: 100%;
      height: 38px;
      padding: 0 10px;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      outline: none;
      color: #111827;
      font-size: 13px;
    }

    .l-jmail-link-popover input:focus {
      border-color: #2563eb;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

    .l-jmail-link-popover-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 2px;
    }

    .l-jmail-link-popover-actions button,
    .l-jmail-link-preview button {
      min-height: 34px;
      border: 0;
      border-radius: 9px;
      background: transparent;
      color: #2563eb;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
    }

    .l-jmail-link-popover-actions [data-link-apply] {
      padding: 0 13px;
      background: #2563eb;
      color: #ffffff;
    }

    .l-jmail-link-popover-actions [data-link-cancel] {
      padding: 0 10px;
      color: #6b7280;
    }

    .l-jmail-link-preview {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 7px 8px;
      font-size: 12px;
      white-space: nowrap;
    }

    .l-jmail-link-preview [data-link-open] {
      max-width: 260px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: 700;
    }

    .l-jmail-link-preview [data-link-remove] {
      color: #dc2626;
    }

    @media (max-width: 900px) {
      .l-jmail-link-popover {
        left: 12px !important;
        right: 12px !important;
        bottom: 18px !important;
        top: auto !important;
        width: auto;
      }

      .l-jmail-link-preview {
        max-width: calc(100vw - 24px);
        white-space: normal;
        flex-wrap: wrap;
      }
    }

    .top-menu-popover {
      position: fixed;
      z-index: 10040;
      max-width: calc(100vw - 24px);
      padding: 10px;
      border: 1px solid rgba(15, 23, 42, 0.1);
      border-radius: 16px;
      background: #ffffff;
      color: #111827;
      box-shadow: 0 22px 60px rgba(15, 23, 42, 0.2);
      font-family: inherit;
    }

    .top-menu-title {
      padding: 6px 8px 10px;
      font-size: 13px;
      font-weight: 900;
      color: #111827;
    }

    .profile-menu-header {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 8px 14px;
      border-bottom: 1px solid rgba(15, 23, 42, 0.08);
      margin-bottom: 6px;
    }

    .profile-menu-avatar {
      width: 44px;
      height: 44px;
      min-width: 44px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #2563eb;
      color: #ffffff;
      font-weight: 900;
      font-size: 18px;
    }

    .profile-menu-info {
      min-width: 0;
      display: grid;
      gap: 2px;
    }

    .profile-menu-name {
      font-size: 14px;
      font-weight: 900;
      color: #111827;
    }

    .profile-menu-email,
    .profile-menu-sender,
    .profile-menu-domain {
      max-width: 240px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 12px;
      color: #6b7280;
    }

    .mail-rules-panel {
      position: fixed;
      inset: 0;
      z-index: 10080;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(15, 23, 42, 0.28);
    }

    .mail-rules-card {
      width: min(520px, calc(100vw - 32px));
      max-height: min(720px, calc(100vh - 48px));
      overflow: auto;
      border: 1px solid rgba(15, 23, 42, 0.1);
      border-radius: 18px;
      background: #ffffff;
      box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
      color: #111827;
    }

    .mail-rules-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      padding: 18px 18px 12px;
      border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    }

    .mail-rules-title {
      font-size: 16px;
      font-weight: 950;
      color: #111827;
    }

    .mail-rules-subtitle {
      margin-top: 4px;
      font-size: 12px;
      line-height: 1.5;
      color: #6b7280;
    }

    .mail-rules-close {
      width: 38px;
      height: 38px;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: #6b7280;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .mail-rules-close:hover {
      background: rgba(15, 23, 42, 0.08);
      color: #111827;
    }

    .mail-rules-list {
      display: grid;
      gap: 10px;
      padding: 14px 18px;
    }

    .mail-rule-item {
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 14px;
      padding: 12px;
      background: #f8fafc;
    }

    .mail-rule-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .mail-rule-name {
      font-size: 13px;
      font-weight: 900;
      color: #111827;
    }

    .mail-rule-description {
      margin-top: 3px;
      font-size: 12px;
      line-height: 1.45;
      color: #6b7280;
    }

    .mail-rule-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 10px;
    }

    .mail-rule-badges span {
      padding: 4px 8px;
      border-radius: 999px;
      background: rgba(37, 99, 235, 0.1);
      color: #2563eb;
      font-size: 11px;
      font-weight: 900;
    }

    .mail-rule-toggle {
      width: 44px;
      height: 26px;
      min-width: 44px;
      padding: 3px;
      border: 0;
      border-radius: 999px;
      background: #cbd5e1;
      cursor: pointer;
      transition: background 0.16s ease;
    }

    .mail-rule-toggle span {
      display: block;
      width: 20px;
      height: 20px;
      border-radius: 999px;
      background: #ffffff;
      box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
      transition: transform 0.16s ease;
    }

    .mail-rule-toggle.is-on {
      background: #2563eb;
    }

    .mail-rule-toggle.is-on span {
      transform: translateX(18px);
    }

    .mail-rules-actions {
      display: flex;
      justify-content: flex-end;
      padding: 0 18px 18px;
    }

    .mail-rules-actions button {
      min-height: 40px;
      border: 0;
      border-radius: 12px;
      background: #2563eb;
      color: #ffffff;
      cursor: pointer;
      font-size: 12px;
      font-weight: 900;
      padding: 0 14px;
    }

    .mail-rules-actions button:disabled {
      opacity: 0.6;
      cursor: wait;
    }

    .settings-modal.settings-enhanced-panel {
      position: fixed;
      inset: 0;
      z-index: 10075;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      max-height: 100vh;
      pointer-events: none;
    }

    .settings-layout {
      width: min(920px, calc(100vw - 32px));
      height: min(760px, calc(100vh - 64px));
      max-height: calc(100vh - 64px);
      display: grid;
      grid-template-columns: 220px minmax(0, 1fr);
      overflow: hidden;
      border: 1px solid rgba(15, 23, 42, 0.1);
      border-radius: 22px;
      background: #ffffff;
      box-shadow: 0 30px 90px rgba(15, 23, 42, 0.28);
      pointer-events: auto;
    }

    .settings-nav {
      display: grid;
      align-content: start;
      gap: 6px;
      padding: 18px;
      border-right: 1px solid rgba(15, 23, 42, 0.08);
      background: #f8fafc;
      overflow-y: auto;
    }

    .settings-nav-item {
      min-height: 42px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 12px;
      border: 0;
      border-radius: 12px;
      background: transparent;
      color: #64748b;
      cursor: pointer;
      font-size: 13px;
      font-weight: 900;
      text-align: left;
    }

    .settings-nav-item .material-symbols-rounded {
      font-size: 19px;
      line-height: 1;
    }

    .settings-nav-item:hover,
    .settings-nav-item.is-active {
      background: rgba(37, 99, 235, 0.1);
      color: #2563eb;
    }

    .settings-section {
      min-width: 0;
      min-height: 0;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      overflow: hidden;
      background: #ffffff;
    }

    .settings-section-header {
      min-height: 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 18px 22px;
      border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    }

    .settings-section-header h3 {
      margin: 0;
      color: #111827;
      font-size: 18px;
      font-weight: 950;
    }

    .settings-close {
      width: 40px;
      height: 40px;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .settings-close:hover {
      background: rgba(15, 23, 42, 0.08);
      color: #111827;
    }

    .settings-section-content {
      display: grid;
      gap: 14px;
      padding: 18px 22px 22px;
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: thin;
    }

    .settings-section-content::-webkit-scrollbar,
    .settings-nav::-webkit-scrollbar,
    .settings-signature-preview::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    .settings-section-content::-webkit-scrollbar-thumb,
    .settings-nav::-webkit-scrollbar-thumb,
    .settings-signature-preview::-webkit-scrollbar-thumb {
      border-radius: 999px;
      background: rgba(100, 116, 139, 0.28);
    }

    .settings-card {
      display: grid;
      gap: 12px;
      padding: 16px;
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 16px;
      background: #f8fafc;
    }

    .settings-row {
      min-height: 42px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      color: #64748b;
      font-size: 13px;
      font-weight: 800;
    }

    .settings-row strong {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #111827;
      font-weight: 950;
      text-align: right;
    }

    .settings-field {
      display: grid;
      gap: 6px;
      color: #64748b;
      font-size: 12px;
      font-weight: 900;
    }

    .settings-field input {
      min-height: 40px;
      border: 1px solid rgba(15, 23, 42, 0.12);
      border-radius: 12px;
      background: #ffffff;
      color: #111827;
      outline: none;
      padding: 0 12px;
      font-size: 13px;
      font-weight: 700;
    }

    .settings-field input:focus {
      border-color: #2563eb;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

    .settings-help-text {
      margin: 2px 0 0;
      color: #64748b;
      font-size: 12px;
      line-height: 1.6;
      font-weight: 700;
    }

    .settings-inline-message {
      padding: 10px 12px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 850;
      line-height: 1.5;
    }

    .settings-inline-message.is-success {
      border: 1px solid rgba(34, 197, 94, 0.22);
      background: rgba(34, 197, 94, 0.1);
      color: #15803d;
    }

    .settings-inline-message.is-error {
      border: 1px solid rgba(239, 68, 68, 0.22);
      background: rgba(239, 68, 68, 0.1);
      color: #b91c1c;
    }

    .settings-toggle {
      width: 44px;
      height: 26px;
      min-width: 44px;
      border: 0;
      border-radius: 999px;
      padding: 3px;
      background: #cbd5e1;
      cursor: pointer;
    }

    .settings-toggle span {
      display: block;
      width: 20px;
      height: 20px;
      border-radius: 999px;
      background: #ffffff;
      box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
      transition: transform 0.16s ease;
    }

    .settings-toggle.is-on {
      background: #2563eb;
    }

    .settings-toggle.is-on span {
      transform: translateX(18px);
    }

    .settings-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
    }

    .settings-actions button {
      min-height: 40px;
      border: 0;
      border-radius: 12px;
      background: #2563eb;
      color: #ffffff;
      cursor: pointer;
      font-size: 12px;
      font-weight: 900;
      padding: 0 14px;
    }

    .settings-actions button:first-child:not(:only-child) {
      background: #e2e8f0;
      color: #334155;
    }

    .settings-signature-preview {
      max-height: 220px;
      overflow-y: auto;
      padding: 12px;
      border: 1px dashed rgba(15, 23, 42, 0.16);
      border-radius: 14px;
      background: #ffffff;
      overscroll-behavior: contain;
    }

    .settings-rule-list {
      display: grid;
      gap: 10px;
    }

    .settings-segmented {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .settings-segmented button {
      min-height: 38px;
      border: 1px solid rgba(15, 23, 42, 0.1);
      border-radius: 999px;
      background: #ffffff;
      color: #64748b;
      cursor: pointer;
      font-size: 12px;
      font-weight: 900;
      padding: 0 13px;
    }

    .settings-segmented button.is-active {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
    }

    .top-menu-action,
    .notification-item,
    .app-launcher-item {
      width: 100%;
      border: 0;
      background: transparent;
      color: inherit;
      cursor: pointer;
      font-family: inherit;
      text-align: left;
    }

    .top-menu-action {
      min-height: 40px;
      padding: 0 10px;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 800;
    }

    .top-menu-action:hover,
    .notification-item:hover,
    .app-launcher-item:hover {
      background: rgba(37, 99, 235, 0.08);
    }

    .top-menu-danger {
      color: #dc2626;
    }

    .notification-menu {
      width: 340px;
    }

    .notification-menu-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 0 2px 6px;
    }

    .notification-menu-header .top-menu-title {
      padding-bottom: 4px;
    }

    .notification-mark-seen {
      border: 0;
      border-radius: 999px;
      background: rgba(37, 99, 235, 0.08);
      color: #2563eb;
      cursor: pointer;
      font-size: 11px;
      font-weight: 900;
      min-height: 30px;
      padding: 0 10px;
      white-space: nowrap;
    }

    .notification-mark-seen:hover {
      background: rgba(37, 99, 235, 0.14);
    }

    .notification-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 10px;
      border-radius: 12px;
    }

    .notification-item-icon {
      width: 34px;
      height: 34px;
      min-width: 34px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(37, 99, 235, 0.1);
      color: #2563eb;
      font-size: 19px;
      line-height: 1;
    }

    .notification-item-body {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    .notification-item-title {
      font-size: 13px;
      font-weight: 900;
      color: #111827;
      line-height: 1.35;
    }

    .notification-item-detail,
    .notification-empty,
    .notification-item-time {
      font-size: 12px;
      line-height: 1.45;
      color: #6b7280;
    }

    .notification-item-time {
      font-size: 11px;
      color: #9ca3af;
    }

    .notification-empty {
      padding: 16px 10px;
      text-align: center;
    }

    .app-launcher-menu {
      width: 380px;
    }

    .app-launcher-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .app-launcher-item {
      min-height: 96px;
      padding: 12px 10px;
      border-radius: 14px;
      display: grid;
      justify-items: start;
      align-content: start;
      gap: 6px;
      text-align: left;
      font-size: 12px;
      font-weight: 800;
      color: #374151;
      border: 1px solid transparent;
    }

    .app-launcher-item:hover {
      border-color: rgba(37, 99, 235, 0.16);
      transform: translateY(-1px);
    }

    .app-launcher-icon {
      width: 34px;
      height: 34px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(37, 99, 235, 0.1);
      color: #2563eb;
      font-size: 22px;
      line-height: 1;
    }

    .app-launcher-title {
      display: block;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 13px;
      font-weight: 900;
      color: #111827;
    }

    .app-launcher-desc {
      display: block;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 11px;
      font-weight: 700;
      color: #6b7280;
    }

    .dark .top-menu-popover {
      border-color: rgba(255, 255, 255, 0.1);
      background: #17181c;
      color: #f1f3f4;
      box-shadow: 0 22px 60px rgba(0, 0, 0, 0.45);
    }

    .dark .top-menu-title,
    .dark .profile-menu-name,
    .dark .notification-item-title {
      color: #f1f3f4;
    }

    .dark .profile-menu-header {
      border-bottom-color: rgba(255, 255, 255, 0.08);
    }

    .dark .profile-menu-email,
    .dark .profile-menu-sender,
    .dark .profile-menu-domain,
    .dark .notification-item-detail,
    .dark .notification-empty,
    .dark .notification-item-time {
      color: #bdc1c6;
    }

    .dark .mail-rules-card {
      border-color: rgba(255, 255, 255, 0.1);
      background: #17181c;
      color: #f1f3f4;
      box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
    }

    .dark .mail-rules-header {
      border-bottom-color: rgba(255, 255, 255, 0.08);
    }

    .dark .mail-rules-title,
    .dark .mail-rule-name {
      color: #f1f3f4;
    }

    .dark .mail-rules-subtitle,
    .dark .mail-rule-description {
      color: #bdc1c6;
    }

    .dark .mail-rule-item {
      border-color: rgba(255, 255, 255, 0.08);
      background: #202124;
    }

    .dark .mail-rules-close {
      color: #bdc1c6;
    }

    .dark .mail-rules-close:hover {
      background: rgba(255, 255, 255, 0.08);
      color: #f1f3f4;
    }

    .dark .settings-layout {
      border-color: rgba(255, 255, 255, 0.1);
      background: #17181c;
      box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
    }

    .dark .settings-nav {
      border-right-color: rgba(255, 255, 255, 0.08);
      background: #202124;
    }

    .dark .settings-section {
      background: #17181c;
    }

    .dark .settings-section-header {
      border-bottom-color: rgba(255, 255, 255, 0.08);
    }

    .dark .settings-section-header h3,
    .dark .settings-row strong {
      color: #f1f3f4;
    }

    .dark .settings-card {
      border-color: rgba(255, 255, 255, 0.08);
      background: #202124;
    }

    .dark .settings-row,
    .dark .settings-field {
      color: #bdc1c6;
    }

    .dark .settings-field input,
    .dark .settings-signature-preview,
    .dark .settings-segmented button {
      border-color: rgba(255, 255, 255, 0.1);
      background: #17181c;
      color: #f1f3f4;
    }

    .dark .settings-help-text {
      color: #bdc1c6;
    }

    .dark .settings-inline-message.is-success {
      border-color: rgba(99, 212, 113, 0.28);
      background: rgba(99, 212, 113, 0.12);
      color: #86efac;
    }

    .dark .settings-inline-message.is-error {
      border-color: rgba(255, 107, 107, 0.28);
      background: rgba(255, 107, 107, 0.12);
      color: #fca5a5;
    }

    .dark .settings-actions button:first-child:not(:only-child) {
      background: #2b2c31;
      color: #f1f3f4;
    }

    .dark .settings-close {
      color: #bdc1c6;
    }

    .dark .settings-close:hover {
      background: rgba(255, 255, 255, 0.08);
      color: #f1f3f4;
    }

    .dark .notification-mark-seen {
      background: rgba(79, 125, 243, 0.16);
      color: #8ab4f8;
    }

    .dark .notification-item-icon {
      background: rgba(79, 125, 243, 0.18);
      color: #8ab4f8;
    }

    .dark .top-menu-action:hover,
    .dark .notification-item:hover,
    .dark .app-launcher-item:hover {
      background: rgba(79, 125, 243, 0.16);
    }

    .dark .app-launcher-item,
    .dark .app-launcher-title {
      color: #f1f3f4;
    }

    .dark .app-launcher-desc {
      color: #bdc1c6;
    }

    .dark .app-launcher-icon {
      background: rgba(79, 125, 243, 0.18);
      color: #8ab4f8;
    }

    @media (max-width: 900px) {
      .top-menu-popover {
        right: 12px !important;
        left: auto !important;
        width: min(340px, calc(100vw - 24px)) !important;
        border-radius: 18px;
        background: #17181c;
        color: #f1f3f4;
        border-color: rgba(255, 255, 255, 0.1);
      }

      .top-menu-title,
      .profile-menu-name,
      .notification-item-title {
        color: #f1f3f4;
      }

      .profile-menu-email,
      .profile-menu-sender,
      .profile-menu-domain,
      .notification-item-detail,
      .notification-empty,
      .notification-item-time {
        color: #bdc1c6;
      }

      .app-launcher-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .settings-modal.settings-enhanced-panel {
        align-items: stretch;
        padding: 12px;
      }

      .settings-layout {
        width: calc(100vw - 24px);
        height: calc(100dvh - 24px);
        max-height: calc(100dvh - 24px);
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
      }

      .settings-nav {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        padding: 12px;
      }

      .settings-nav-item {
        min-width: max-content;
      }

      .settings-section-header {
        padding: 14px 16px;
      }

      .settings-section-content {
        padding: 14px 16px 18px;
        max-height: none;
      }

      .settings-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
      }

      .settings-row strong {
        text-align: left;
        white-space: normal;
      }
    }

    @media (max-height: 760px) {
      .settings-modal.settings-enhanced-panel {
        padding: 16px;
      }

      .settings-layout {
        height: calc(100vh - 32px);
        max-height: calc(100vh - 32px);
      }

      .settings-section-header {
        min-height: 56px;
        padding-top: 12px;
        padding-bottom: 12px;
      }

      .settings-section-content {
        padding-top: 14px;
        padding-bottom: 16px;
      }

      .settings-signature-preview {
        max-height: 180px;
      }
    }

    /* Mail reading and compose text must remain selectable for copy/paste. */
    .mail-read-pane,
    .mail-read-pane *,
    .mail-detail,
    .mail-detail *,
    .mail-detail-content,
    .mail-detail-content *,
    .mail-detail-body,
    .mail-detail-body *,
    .mail-body,
    .mail-body *,
    .mail-content,
    .mail-content *,
    .message-body,
    .message-body *,
    .email-body,
    .email-body *,
    .detail-content,
    .detail-content * {
      user-select: text !important;
      -webkit-user-select: text !important;
      -ms-user-select: text !important;
    }

    .mail-read-pane,
    .mail-detail,
    .mail-detail-content,
    .mail-detail-body,
    .mail-body,
    .mail-content,
    .message-body,
    .email-body,
    .detail-content,
    .l-jmail-compose-editor,
    textarea,
    input,
    [contenteditable="true"] {
      -webkit-touch-callout: default;
    }

    .l-jmail-compose-editor,
    .l-jmail-compose-editor *,
    .l-jmail-compose-editor [data-ljmail-body-area="true"],
    textarea,
    input,
    [contenteditable="true"],
    [contenteditable="true"] * {
      user-select: text !important;
      -webkit-user-select: text !important;
      -ms-user-select: text !important;
    }

    button,
    .icon-button,
    .resize-handle,
    .sidebar-item,
    .mail-toolbar,
    .compose-toolbar,
    .social-contact-item,
    .mail-list-item,
    .material-symbols-rounded,
    .material-icons {
      user-select: none !important;
      -webkit-user-select: none !important;
      -ms-user-select: none !important;
    }

    .mail-read-pane button,
    .mail-detail button,
    .mail-read-pane .material-symbols-rounded,
    .mail-detail .material-symbols-rounded,
    .mail-read-pane .material-icons,
    .mail-detail .material-icons {
      user-select: none !important;
      -webkit-user-select: none !important;
      -ms-user-select: none !important;
    }