/* ==========================================================================
   RMAILBOX THEME: NEO POP ENTERPRISE (V2.0 FLUID EDITION)
   Clean Neo-Brutalism Design System with Iconify Integration
   Fully Fluid & Auto-Fill for Ultrawide, Desktop, Tablet, & Mobile
   ========================================================================== */

:root {
  /* Core Geometry & Physics */
  --main-color: #1e232a;
  --border-color: #1e232a;
  --border-w: 2.5px;
  --border: var(--border-w) solid var(--border-color);
  --shadow-color: #1e232a;
  --shadow: 4px 4px 0px var(--shadow-color);
  --shadow-sm: 2px 2px 0px var(--shadow-color);
  --shadow-md: 3px 3px 0px var(--shadow-color);
  --shadow-lg: 6px 6px 0px var(--shadow-color);
  --shadow-xl: 8px 8px 0px var(--shadow-color);
  --r-card: 20px;
  --r-btn: 14px;
  --r-pill: 9999px;
  --r-input: 12px;

  /* Fluid Palette */
  --bg: #faf6ee;
  --bg-pattern-dot: #e2dbcd;
  --card-bg: #ffffff;
  --card-bg-alt: #f4efe3;
  --text-main: #181d24;
  --text-muted: #4e5663;
  --text-sub: #788291;

  /* Vibrant Pop Accents */
  --color-yellow: #ffd13b;
  --color-yellow-hover: #f7c320;
  --color-yellow-light: #fff8d6;
  --color-lavender: #c4b5fd;
  --color-lavender-hover: #b49ffc;
  --color-lavender-light: #ede9fe;
  --color-cyan: #67e8f9;
  --color-cyan-hover: #45daf0;
  --color-cyan-light: #e0f8fc;
  --color-mint: #6ee7b7;
  --color-mint-hover: #50dca3;
  --color-mint-light: #d1fae5;
  --color-orange: #ffa756;
  --color-orange-hover: #f69438;
  --color-orange-light: #ffedd5;
  --color-coral: #ff7a8a;
  --color-coral-hover: #f75d70;
  --color-coral-light: #ffe4e6;
  --color-blue: #60a5fa;

  /* State Indicators */
  --status-ready: #10b981;
  --status-busy: #f59e0b;
  --status-err: #ef4444;

  /* Typography */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* ==========================================================================
   Dark Mode: Obsidian Enterprise Pop Edition
   High-Contrast Dark Theme with Vibrant Pop Highlights & Zero Color Clashes
   ========================================================================== */
body.dark {
  --main-color: #0b0e14;
  --border-color: #2e3644;
  --shadow-color: #000000;
  --shadow: 4px 4px 0px #000000;
  --shadow-sm: 2px 2px 0px #000000;
  --shadow-md: 3px 3px 0px #000000;
  --shadow-lg: 6px 6px 0px #000000;
  --shadow-xl: 8px 8px 0px #000000;

  --bg: #0c0f14;
  --bg-pattern-dot: #1b212b;
  --card-bg: #141820;
  --card-bg-alt: #1a202c;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --text-sub: #64748b;

  /* Vibrant Pop Accents (Luminous in Dark Mode) */
  --color-yellow: #ffd13b;
  --color-yellow-hover: #ffc412;
  --color-yellow-light: #211c10;
  --color-lavender: #c4b5fd;
  --color-lavender-hover: #b49ffc;
  --color-lavender-light: #201a30;
  --color-cyan: #67e8f9;
  --color-cyan-hover: #38daf0;
  --color-cyan-light: #10232b;
  --color-mint: #6ee7b7;
  --color-mint-hover: #48d99c;
  --color-mint-light: #10261d;
  --color-orange: #ffa756;
  --color-orange-hover: #f79230;
  --color-orange-light: #2a1c12;
  --color-coral: #ff7a8a;
  --color-coral-hover: #f7556a;
  --color-coral-light: #2e151a;
}

/* Ensure high contrast text on colorful buttons in Dark Mode */
body.dark .neo-btn-yellow,
body.dark .neo-btn-mint,
body.dark .neo-btn-cyan,
body.dark .neo-btn-orange,
body.dark .neo-btn-lavender,
body.dark .btnCopyOtpBig,
body.dark .otpHighlightPill,
body.dark .btnUseCustomMain,
body.dark .btnCopyEmailMain {
  color: #12161c !important;
  font-weight: 900;
}

body.dark .neo-btn-yellow iconify-icon,
body.dark .neo-btn-mint iconify-icon,
body.dark .neo-btn-cyan iconify-icon,
body.dark .neo-btn-orange iconify-icon,
body.dark .neo-btn-lavender iconify-icon,
body.dark .otpHighlightPill iconify-icon,
body.dark .btnUseCustomMain iconify-icon,
body.dark .btnCopyEmailMain iconify-icon {
  color: #12161c !important;
}

/* Badges with bright background in Dark Mode: ink dark text for max readability */
body.dark .neo-badge[style*="--color-yellow"],
body.dark .neo-badge[style*="--color-mint"],
body.dark .neo-badge[style*="--color-cyan"],
body.dark .neo-badge[style*="--color-lavender"],
body.dark .neo-badge[style*="--color-orange"],
body.dark .panelBadge {
  color: #12161c !important;
  font-weight: 900;
}

/* ==========================================================================
   Header in Dark Mode (Preserve 100% Colorful Pop Aesthetics)
   ========================================================================== */
body.dark .appHeader {
  background: var(--card-bg);
  border-bottom: var(--border);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.4);
}

body.dark .appBrandLogoWrap {
  background: #ffffff !important;
  border: var(--border);
  box-shadow: var(--shadow-sm);
}

body.dark .appBrandLogoFallback {
  color: #12161c !important;
  font-weight: 900;
}

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

body.dark .appBrandSub {
  color: var(--text-muted);
}

/* Status Chip: tetap Colorful Mint cerah di Dark Mode */
body.dark .statusChip {
  background: var(--color-mint) !important;
  color: #12161c !important;
  border: var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
  font-weight: 900 !important;
}

body.dark .statusChipDot {
  background: #047857 !important;
  border-color: #12161c !important;
}

/* Theme Switcher "Classic": tetap Colorful Yellow cerah di Dark Mode */
body.dark .themeSwitcherBtn {
  background: var(--color-yellow) !important;
  color: #12161c !important;
  border: var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
  font-weight: 900 !important;
}

body.dark .themeSwitcherBtn iconify-icon {
  color: #12161c !important;
}

body.dark .themeSwitcherBtn:hover {
  background: var(--color-yellow-hover) !important;
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0px var(--shadow-color) !important;
}

/* Theme Toggle (Dark/Light): tetap Colorful Lavender cerah di Dark Mode */
body.dark .themeToggle {
  background: var(--color-lavender) !important;
  color: #12161c !important;
  border: var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}

body.dark .themeToggle:hover {
  background: var(--color-lavender-hover) !important;
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0px var(--shadow-color) !important;
}

body.dark .themeToggle .themeIcon {
  color: #12161c !important;
}

/* Hero Card in Dark Mode: sleek obsidian gradient with crisp border */
body.dark .saweriaHeroCard {
  background: linear-gradient(135deg, #161a22 0%, #1c222e 100%);
  border: 2.5px solid #2e3848;
  box-shadow: 6px 6px 0px #000000;
}

body.dark .saweriaHeroTitle {
  color: #ffffff;
}

body.dark .saweriaHeroSub {
  color: #94a3b8;
}

/* Active Email Display Card in Dark Mode */
body.dark .emailDisplayCard {
  background: #12151c;
  border: 2.5px solid #262f3d;
  box-shadow: 3px 3px 0px #000000;
}

body.dark .emailDisplayAddress {
  color: #ffffff;
}

body.dark .emailIconBox {
  background: var(--color-yellow);
  color: #12161c;
  border-color: #262f3d;
}

/* Neutral Dark Buttons */
body.dark .neo-btn:not([class*="neo-btn-"]):not(.btnCopyEmailMain):not(.btnUseCustomMain) {
  background: #1a202c;
  border-color: #2e3848;
  color: #f1f5f9;
}

body.dark .neo-btn:not([class*="neo-btn-"]):not(.btnCopyEmailMain):not(.btnUseCustomMain):hover {
  background: #222a3a;
  border-color: #3b475b;
}

/* Email Rows in Dark Mode */
body.dark .rowmail {
  background: #141820;
  border: 2.5px solid #262e3b;
  box-shadow: 2px 2px 0px #000000;
}

body.dark .rowmail:hover {
  background: #1a202c;
  border-color: #384457;
  box-shadow: 4px 4px 0px #000000;
}

body.dark .rowmail.selected {
  background: #151a23 !important;
  border-color: var(--color-yellow) !important;
  box-shadow: 6px 6px 0px #000000 !important;
}

body.dark .rowmailFrom {
  color: #ffffff;
}

body.dark .rowmailSubj {
  color: #cbd5e1;
}

body.dark .rowmail .snip {
  color: #828fa3;
}

body.dark .rowmailAvatar {
  background: var(--color-yellow);
  color: #12161c;
  border-color: #262e3b;
}

body.dark .rowmailTime {
  background: #0e1117;
  border-color: #262e3b;
  color: #94a3b8;
}

/* Expanded Mail Header in Dark Mode */
body.dark .mailExpandedHeader {
  background: #10141a;
  border: 2.5px solid #28313e;
}

body.dark .mailSenderName {
  color: #ffffff;
}

body.dark .mailSenderEmail {
  color: #94a3b8;
}

body.dark .mailRecipient {
  color: #64748b;
}

body.dark .mailRecipient span {
  color: #cbd5e1;
}

/* OTP Alert Banner in Dark Mode */
body.dark .otpAlertBanner {
  background: var(--color-yellow);
  border: 2.5px solid #28313e;
  box-shadow: 4px 4px 0px #000000;
}

body.dark .otpAlertBanner,
body.dark .otpAlertBanner * {
  color: #12161c !important;
}

body.dark .otpAlertIconWrap {
  background: #ffffff;
  border: 2px solid #12161c;
}

body.dark .btnCopyOtpBig {
  background: #ffffff !important;
  color: #12161c !important;
}

/* Email Reading Canvas in Dark Mode (Pristine paper card prevents logo/color inversion) */
body.dark .viewerFrame {
  background: #ffffff !important;
  border: 2.5px solid #28313e !important;
  box-shadow: 4px 4px 0px #000000 !important;
}

/* Modals in Dark Mode */
body.dark .modal {
  background: #151a22;
  border: 2.5px solid #2d3644;
  box-shadow: 8px 8px 0px #000000;
}

body.dark .modalHead {
  background: #1a202b;
  border-bottom: 2.5px solid #28313e;
}

body.dark .modalTitle {
  color: #ffffff;
}

body.dark .modalSub {
  color: #94a3b8;
}

body.dark .neo-input {
  background: #0f1318;
  border: 2.5px solid #28313e;
  color: #f8fafc;
}

body.dark .neo-input:focus {
  border-color: var(--color-yellow);
  box-shadow: 3px 3px 0px #000000;
}

body.dark .rmDomainDropdownBtn {
  background: #0f1318;
  border: 2.5px solid #28313e;
  color: #f8fafc;
}

body.dark .rmDomainDropdownBtn:hover {
  background: #161c24;
}

body.dark .rmDomainDropdownMenu {
  background: #161b24;
  border: 2.5px solid #2e3848;
  box-shadow: 6px 6px 0px #000000;
}

body.dark .rmDomainDropdownItem {
  color: #f1f5f9;
  border-bottom-color: #242c38;
}

body.dark .rmDomainDropdownItem:hover,
body.dark .rmDomainDropdownItem.active,
body.dark .rmDomainDropdownItem.is-selected {
  background: #232a38;
  color: #ffffff;
}

body.dark .rmDomainDropdownName {
  color: #ffffff;
}

body.dark .rmDomainBadge {
  background: var(--color-yellow);
  color: #12161c;
  border-color: #333d4d;
}

/* History Modal in Dark Mode */
body.dark .histItem {
  background: #10141b;
  border-color: #28313e;
  color: #f1f5f9;
}

body.dark .histItem:hover {
  background: #1a222e;
  border-color: #3b4759;
}

body.dark .histItemEmail {
  color: #ffffff;
}

body.dark .histItemType.is-custom {
  background: var(--color-lavender);
  color: #12161c;
}

body.dark .histItemType.is-gen {
  background: var(--color-mint);
  color: #12161c;
}

/* Footer in Dark Mode */
body.dark .saweriaFooter {
  background: #101318;
  border-top: 2.5px solid #242b36;
}

body.dark .saweriaFooterTitle {
  color: #ffffff;
}

body.dark .saweriaFooterDesc {
  color: #94a3b8;
}

body.dark .saweriaFooterColTitle {
  color: #ffffff;
}

body.dark .saweriaFooterLink {
  color: #94a3b8;
}

body.dark .saweriaFooterLink:hover {
  color: #ffffff;
}

body.dark .saweriaFooterBottom {
  border-top-color: #242b36;
  color: #64748b;
}

/* Toast in Dark Mode */
body.dark .rmToast {
  background: #161b24;
  border-color: #2c3645;
  box-shadow: 4px 4px 0px #000000;
  color: #f8fafc;
}

body.dark .rmToastTitle {
  color: #ffffff;
}

body.dark .rmToastSub {
  color: #94a3b8;
}

body.dark .rmToastClose:hover {
  background: #202735;
  color: #ffffff;
}

/* Pager in Dark Mode */
body.dark .pager button {
  background: #161a22;
  border-color: #28313e;
  color: #f8fafc;
}

body.dark .pager button:hover {
  background: #202633;
}

body.dark .pager button.active {
  background: var(--color-yellow);
  color: #12161c;
  border-color: #28313e;
}

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent !important;
}

html {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  color: var(--text-main);
  background-color: var(--bg);
  background-image: radial-gradient(var(--bg-pattern-dot) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.2s ease, color 0.2s ease;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent !important;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
}

button, input, select, textarea {
  font-family: inherit;
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
}

button:focus, a:focus, .neo-btn:focus,
button:active, a:active, .neo-btn:active {
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Universal Iconify Alignment */
iconify-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
}

/* ==========================================================================
   Tactile Neo-Brutalist Components
   ========================================================================== */

.neo-box {
  background: var(--card-bg);
  border: var(--border);
  box-shadow: var(--shadow);
  border-radius: var(--r-card);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.neo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: clamp(8px, 1.2vw, 12px) clamp(12px, 1.6vw, 20px);
  font-size: clamp(13px, 0.95vw, 15px);
  font-weight: 800;
  color: var(--text-main);
  background: var(--card-bg);
  border: var(--border);
  box-shadow: var(--shadow);
  border-radius: var(--r-btn);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.12s ease;
  white-space: nowrap;
}

.neo-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0px var(--shadow-color);
}

.neo-btn:active {
  transform: translate(3px, 3px) !important;
  box-shadow: 1px 1px 0px var(--shadow-color) !important;
  outline: none !important;
}

.neo-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Button Variants */
.neo-btn-yellow { background: var(--color-yellow); }
.neo-btn-yellow:hover { background: var(--color-yellow-hover); }

.neo-btn-lavender { background: var(--color-lavender); }
.neo-btn-lavender:hover { background: var(--color-lavender-hover); }

.neo-btn-cyan { background: var(--color-cyan); }
.neo-btn-cyan:hover { background: var(--color-cyan-hover); }

.neo-btn-orange { background: var(--color-orange); }
.neo-btn-orange:hover { background: var(--color-orange-hover); }

.neo-btn-mint { background: var(--color-mint); }
.neo-btn-mint:hover { background: var(--color-mint-hover); }

.neo-btn-coral { background: var(--color-coral); }
.neo-btn-coral:hover { background: var(--color-coral-hover); }

/* Neo Inputs */
.neo-input {
  width: 100%;
  height: 48px;
  padding: 8px 16px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  background: var(--card-bg);
  border: var(--border);
  box-shadow: var(--shadow-sm);
  border-radius: var(--r-input);
  outline: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.neo-input:focus {
  border-color: #2563eb;
  box-shadow: 4px 4px 0px var(--shadow-color);
}

.neo-input::placeholder {
  color: var(--text-sub);
  font-weight: 500;
}

/* Neo Badges */
.neo-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: var(--border);
  border-radius: var(--r-pill);
  box-shadow: 2px 2px 0px var(--shadow-color);
  background: var(--card-bg);
  color: var(--text-main);
  white-space: nowrap;
}

/* ==========================================================================
   2. Ultra-Polished Header Section (Auto-Fill & Enterprise Grade)
   ========================================================================== */

.appHeader {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--card-bg);
  border-bottom: var(--border);
  box-shadow: 0 4px 0 rgba(24, 29, 36, 0.07);
  padding: 12px clamp(14px, 2.5vw, 36px);
  width: 100%;
  transition: background 0.2s ease;
}

.appHeaderInner {
  width: 100%;
  max-width: min(96vw, 1560px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 2vw, 24px);
}

.appBrand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  text-decoration: none;
}

.appBrandLogoWrap {
  position: relative;
  width: clamp(40px, 3.2vw, 48px);
  height: clamp(40px, 3.2vw, 48px);
  border: var(--border);
  box-shadow: var(--shadow-sm);
  border-radius: 13px;
  background: var(--card-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 22px;
  color: var(--text-main);
  flex-shrink: 0;
  transition: transform 0.1s ease;
}

body.dark .appBrandLogoWrap {
  background: var(--card-bg-alt);
}

.appBrand:hover .appBrandLogoWrap {
  transform: rotate(-3deg) scale(1.04);
}

.appBrandLogoFallback {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  user-select: none;
}

.appBrandLogo {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 4px;
  object-fit: contain;
  display: block;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.appBrandLogo.isPending {
  opacity: 0;
  pointer-events: none;
}

.appBrandText {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.appBrandTitle {
  font-size: clamp(16px, 1.35vw, 22px);
  font-weight: 900;
  line-height: 1.2;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.appBrandSub {
  font-size: clamp(11px, 0.85vw, 13px);
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.appHeaderActions {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.2vw, 14px);
  flex-shrink: 0;
}

/* Status Chip Pill */
.statusChip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: var(--border);
  box-shadow: var(--shadow-sm);
  border-radius: var(--r-pill);
  background: var(--color-mint-light);
  font-size: 13px;
  font-weight: 800;
  color: var(--text-main);
  white-space: nowrap;
}

.statusChipDot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--status-ready);
  border: 1.5px solid var(--border-color);
  animation: pulseDot 1.8s infinite;
}

@keyframes pulseDot {
  0% { transform: scale(0.9); opacity: 0.8; }
  50% { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.8; }
}

/* Header Switcher Button */
.themeSwitcherBtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 800;
  background: var(--color-yellow);
  border: var(--border);
  box-shadow: var(--shadow-sm);
  border-radius: var(--r-btn);
  cursor: pointer;
  color: var(--text-main);
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.themeSwitcherBtn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0px var(--shadow-color);
}
.themeSwitcherBtn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0px var(--shadow-color);
  outline: none !important;
}

/* Theme Toggle Button (Dark/Light) */
.themeToggle {
  width: 42px;
  height: 42px;
  border: var(--border);
  box-shadow: var(--shadow-sm);
  border-radius: var(--r-btn);
  background: var(--card-bg);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-main);
  font-size: 20px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
  flex: 0 0 42px;
  box-sizing: border-box;
}

.themeToggle .themeIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease;
}

.themeToggle:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0px var(--shadow-color);
}
.themeToggle:hover .themeIcon {
  transform: rotate(25deg);
}

.themeToggle:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 1px 1px 0px var(--shadow-color) !important;
}
.themeToggle:active .themeIcon {
  transform: rotate(90deg);
}

/* ==========================================================================
   3. Fluid & Auto-Fill Page Layout
   ========================================================================== */

.container {
  width: 100%;
  max-width: min(96vw, 1560px);
  margin: clamp(16px, 2vw, 32px) auto 0;
  padding: 0 clamp(12px, 2vw, 32px) clamp(40px, 5vw, 72px);
  flex: 1 0 auto;
}

/* Hero Section (Card Auto-Fill) */
.saweriaHeroCard {
  background: var(--color-yellow-light);
  border: var(--border);
  box-shadow: var(--shadow-lg);
  border-radius: 24px;
  padding: clamp(18px, 2.4vw, 34px);
  margin-bottom: clamp(18px, 2.2vw, 28px);
  position: relative;
  overflow: hidden;
  width: 100%;
}

.saweriaHeroTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

.saweriaBadgeRow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.saweriaHeroTitle {
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 900;
  line-height: 1.25;
  color: var(--text-main);
  margin-bottom: 6px;
}

.saweriaHeroSub {
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 600;
  color: var(--text-muted);
}

/* Active Email Display Card (Auto-Fill & Flex-Wrap Responsive) */
.emailDisplayCard {
  background: var(--card-bg);
  border: var(--border);
  box-shadow: var(--shadow);
  border-radius: 18px;
  padding: clamp(12px, 1.4vw, 18px) clamp(14px, 1.8vw, 22px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 1.5vw, 20px);
  margin-top: 18px;
  flex-wrap: wrap;
  width: 100%;
}

.emailDisplayLeft {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.2vw, 16px);
  min-width: 0;
  flex: 1 1 300px;
}

.emailIconBox {
  width: clamp(44px, 3.2vw, 52px);
  height: clamp(44px, 3.2vw, 52px);
  border-radius: 14px;
  background: var(--color-yellow);
  border: var(--border);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-main);
  font-size: 24px;
}

.emailDisplayWrap {
  min-width: 0;
  flex: 1;
}

.emailDisplayLabel {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-sub);
  margin-bottom: 2px;
}

.emailDisplayAddress {
  font-family: var(--font-mono);
  font-size: clamp(15px, 1.3vw, 22px);
  font-weight: 800;
  color: var(--text-main);
  word-break: break-all;
  user-select: all;
  line-height: 1.3;
}

.emailDisplayActions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.btnCopyEmailMain {
  background: var(--color-yellow);
  padding: 10px clamp(14px, 1.8vw, 22px);
}
.btnCopyEmailMain.isCopied {
  background: var(--color-mint) !important;
}

/* Status Ready Bar */
.okBar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 10px 18px;
  border: var(--border);
  border-radius: var(--r-btn);
  background: var(--card-bg);
  box-shadow: var(--shadow-sm);
  font-size: 13px;
  font-weight: 800;
  color: var(--text-main);
  width: 100%;
}

.check {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--status-ready);
  color: #fff;
  border: 1.5px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.okSpin {
  display: none;
  margin-left: auto;
  font-size: 20px;
  color: var(--text-muted);
}
.okBar--busy .okSpin {
  display: inline-flex;
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Auto-Fill Action Buttons Row (Fills 100% of Width) */
.actionsRow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(140px, 20vw, 220px), 1fr));
  gap: clamp(10px, 1.2vw, 16px);
  margin-top: 18px;
  width: 100%;
}

.actionsRow .neo-btn {
  width: 100%;
  padding: 12px 16px;
}

/* VPS Direct Advanced Accordion */
.adv {
  margin-top: 18px;
  border: var(--border);
  border-radius: var(--r-btn);
  background: var(--card-bg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  width: 100%;
}

.adv summary {
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
}

.adv summary::-webkit-details-marker { display: none; }

.advBody {
  padding: 16px 18px;
  border-top: var(--border);
  background: var(--card-bg-alt);
}

.advRow {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ==========================================================================
   4. Main Layout (Kotak Masuk - Full Width Workspace)
   ========================================================================== */

.mainLayout {
  width: 100%;
  display: block;
}

.inboxPanel {
  width: 100%;
  max-width: 100%;
}

.panel {
  background: var(--card-bg);
  border: var(--border);
  box-shadow: var(--shadow);
  border-radius: var(--r-card);
  overflow: hidden;
  width: 100%;
}

.panelHead {
  padding: 16px clamp(16px, 1.8vw, 24px);
  border-bottom: var(--border);
  background: var(--card-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.panelTitle {
  font-size: clamp(16px, 1.2vw, 20px);
  font-weight: 900;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 10px;
}

.panelBadge {
  font-size: 12px;
  font-weight: 800;
  padding: 5px 14px;
  border: var(--border);
  border-radius: var(--r-pill);
  box-shadow: 2px 2px 0px var(--shadow-color);
  background: var(--color-yellow);
  color: var(--text-main);
  white-space: nowrap;
}

.panelBody {
  padding: clamp(12px, 1.8vw, 22px);
  min-height: 320px;
}

/* Email List Items (Gmail-Inspired Neo-Brutalist Cards) */
.list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.rowmail {
  background: var(--card-bg);
  border: var(--border);
  box-shadow: var(--shadow-sm);
  border-radius: 16px;
  padding: clamp(14px, 1.6vw, 20px);
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.12s ease;
  position: relative;
  width: 100%;
}

.rowmail:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0px var(--shadow-color);
  background: var(--card-bg-alt);
}

.rowmail.selected {
  background: var(--card-bg) !important;
  border-color: var(--border-color);
  box-shadow: var(--shadow-lg) !important;
}

/* Card Header inside each row */
.rowmailCardHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.rowmailSenderWrap {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.rowmailAvatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--color-yellow);
  border: var(--border);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 900;
  color: var(--text-main);
  flex-shrink: 0;
}

.rowmailSenderText {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.rowmailFrom {
  font-size: clamp(14px, 1.05vw, 16px);
  font-weight: 900;
  color: var(--text-main);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rowmailSubj {
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 700;
  color: var(--text-muted);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rowmailTimeWrap {
  flex-shrink: 0;
}

.rowmailTime {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-sub);
  background: var(--card-bg-alt);
  padding: 4px 10px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--r-pill);
  white-space: nowrap;
}

.rowmail .snip {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.45;
  margin-top: 8px;
  padding-left: 52px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Quick OTP Highlight Pill */
.otpHighlightPill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  margin-left: 52px;
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 900;
  background: var(--color-yellow);
  border: var(--border);
  box-shadow: 2px 2px 0px var(--shadow-color);
  border-radius: 10px;
  color: var(--text-main);
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.otpHighlightPill:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0px var(--shadow-color);
}

.otpPillAction {
  font-size: 11px;
  text-decoration: underline;
  color: var(--text-muted);
}

/* ==========================================================================
   Gmail-Style Inline Detail Reader (Expands full-width inside the row)
   ========================================================================== */

.rowmailInlineDetail {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 2px solid var(--border-color);
  animation: slideDetailDown 0.18s cubic-bezier(0.16, 1, 0.3, 1) both;
  width: 100%;
}

@keyframes slideDetailDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.rowmailInlineDetail.isPreparing {
  opacity: 0.6;
}

/* Expanded Mail Header */
.mailExpandedHeader {
  background: var(--card-bg-alt);
  border: var(--border);
  box-shadow: var(--shadow-sm);
  border-radius: 14px;
  padding: clamp(12px, 1.4vw, 18px);
  margin-bottom: 14px;
}

.mailExpandedTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.mailExpandedSender {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.mailSenderAvatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--color-mint);
  border: var(--border);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 900;
  color: var(--text-main);
  flex-shrink: 0;
}

.mailSenderInfo {
  min-width: 0;
}

.mailSenderName {
  font-size: 15px;
  font-weight: 900;
  color: var(--text-main);
  line-height: 1.3;
}

.mailSenderEmail {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-sub);
}

.mailRecipient {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  margin-top: 2px;
}
.mailRecipient span {
  font-family: var(--font-mono);
  color: var(--text-main);
}

.mailExpandedActions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.mailExpandedTime {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-sub);
}

.mailCloseBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 800;
  background: var(--color-coral-light);
  border: var(--border);
  box-shadow: var(--shadow-sm);
  border-radius: var(--r-btn);
  cursor: pointer;
  color: var(--text-main);
  transition: transform 0.08s, box-shadow 0.08s;
}

.mailCloseBtn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0px var(--shadow-color);
}
.mailCloseBtn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0px var(--shadow-color);
}

/* OTP Alert Banner (Prominent Card) */
.otpAlertBanner {
  background: var(--color-yellow);
  border: var(--border);
  box-shadow: var(--shadow-md);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.otpAlertLeft {
  display: flex;
  align-items: center;
  gap: 12px;
}

.otpAlertIconWrap {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #ffffff;
  border: var(--border);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-main);
  flex-shrink: 0;
}

.otpAlertLabel {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.6px;
  color: var(--text-main);
  text-transform: uppercase;
}

.otpAlertCode {
  font-family: var(--font-mono);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 900;
  color: var(--text-main);
  letter-spacing: 2px;
}

.btnCopyOtpBig {
  background: #ffffff !important;
  padding: 10px 18px;
}

/* Email Body Viewer Canvas (Paper white with Neo-Brutalist Frame) */
.viewerFrame {
  background: #ffffff !important;
  border: var(--border);
  box-shadow: var(--shadow);
  border-radius: 16px;
  overflow: hidden;
  width: 100%;
}

.iframeWrap {
  width: 100%;
  min-height: 280px;
  overflow: hidden;
  background: #ffffff;
}

.iframeWrap iframe {
  width: 100% !important;
  min-height: 380px !important;
  max-height: 80vh !important;
  border: none !important;
  display: block;
  background: #ffffff !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.detailBody {
  padding: 20px;
  font-size: 15px;
  line-height: 1.65;
  color: #181d24;
  background: #ffffff !important;
  word-break: break-word;
  white-space: pre-wrap;
}

/* Empty State */
.emptyState {
  padding: clamp(40px, 5vw, 64px) 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.emptyIcon {
  width: 72px;
  height: 72px;
  border: var(--border);
  box-shadow: var(--shadow-sm);
  border-radius: 20px;
  background: var(--color-yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: var(--text-main);
}

.emptyTitle {
  font-size: 18px;
  font-weight: 900;
  color: var(--text-main);
}

.emptySub {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  max-width: 380px;
  line-height: 1.55;
}

/* Pager Pagination */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.pager button {
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 800;
  border: var(--border);
  box-shadow: var(--shadow-sm);
  border-radius: 10px;
  background: var(--card-bg);
  color: var(--text-main);
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.08s;
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
}

.pager button:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0px var(--shadow-color);
}
.pager button:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0px var(--shadow-color);
}
.pager button.active {
  background: var(--color-yellow);
}

/* ==========================================================================
   5. Modals (Clean, Compact & Adaptive Sizing)
   ========================================================================== */

.modalBackdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.62);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 2.5vw, 20px);
}

.modalBackdrop.show,
.modalBackdrop[aria-hidden="false"] {
  display: flex;
}

.modal {
  background: var(--card-bg);
  border: var(--border);
  box-shadow: var(--shadow-lg);
  border-radius: 20px;
  width: 100%;
  max-width: clamp(320px, 92vw, 440px);
  max-height: 88vh;
  overflow-y: auto;
  position: relative;
  animation: popIn 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes popIn {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.modalHead {
  padding: 14px 18px 12px;
  border-bottom: var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--card-bg);
}

.modalTitle {
  font-size: 16px;
  font-weight: 900;
  color: var(--text-main);
  line-height: 1.25;
}

.modalSub {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 1px;
}

.modalClose {
  width: 32px;
  height: 32px;
  border: var(--border);
  box-shadow: var(--shadow-sm);
  border-radius: 10px;
  background: var(--color-coral-light);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-main);
  font-size: 16px;
  transition: transform 0.08s, box-shadow 0.08s;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
}

.modalClose:hover {
  transform: translate(-1px, -1px);
  box-shadow: 2.5px 2.5px 0px var(--shadow-color);
}
.modalClose:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0px var(--shadow-color);
}

.modalBody {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.modalLabel {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-main);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.modalHint {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.4;
}

.modalActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.modalActions .neo-btn {
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 800;
}

.modalActions .btnUseCustomMain {
  background: var(--color-yellow);
}

/* Form Inputs in Modals */
.neo-input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  background: var(--card-bg);
  border: var(--border);
  box-shadow: var(--shadow-sm);
  border-radius: var(--r-input);
  transition: box-shadow 0.1s, transform 0.08s;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
}

.neo-input:focus {
  box-shadow: var(--shadow-md);
  border-color: var(--border-color);
}

.neo-input::placeholder {
  color: var(--text-sub);
  font-weight: 500;
}

.modalField {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}

.customUsernameRow,
.customDomainRow,
.customInputRow {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.customUsernameRow .neo-input {
  flex: 1;
  min-width: 0;
}

.customDomainRow .rmDomainDropdown {
  flex: 1;
  min-width: 0;
}

.customUsernameRow .btnRowAcak,
.customDomainRow .btnRowAcak,
.customUsernameRow .neo-btn,
.customDomainRow .neo-btn {
  height: 44px;
  padding: 0 16px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 800;
  border-radius: var(--r-input);
}

.rmDomainDropdown {
  position: relative;
  flex: 1;
  min-width: 0;
}

.rmDomainDropdownBtn {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  background: var(--card-bg);
  border: var(--border);
  box-shadow: var(--shadow-sm);
  border-radius: var(--r-input);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 800;
  color: var(--text-main);
  cursor: pointer;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
}

.rmDomainDropdownBtn:hover {
  background: var(--card-bg-alt);
}

.rmDomainDropdownMenu {
  position: fixed !important;
  z-index: 10050;
  background: var(--card-bg);
  border: var(--border);
  box-shadow: var(--shadow-lg);
  border-radius: 14px;
  max-height: 220px;
  overflow-y: auto;
  display: none;
  box-sizing: border-box;
}

.rmDomainDropdownMenu.open,
.rmDomainDropdownMenu.is-open {
  display: block !important;
}

.rmDomainDropdownItem {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 800;
  color: var(--text-main);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
}

.rmDomainDropdownItem:last-child {
  border-bottom: none;
}

.rmDomainDropdownItem:hover,
.rmDomainDropdownItem.active,
.rmDomainDropdownItem.is-selected {
  background: var(--color-yellow-light);
}

.rmDomainDropdownName {
  font-weight: 800;
  color: var(--text-main);
}

.rmDomainBadge {
  font-size: 10px;
  font-weight: 900;
  padding: 2px 6px;
  background: var(--color-yellow);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-main);
}

/* QR Box Modal */
#qrModalBackdrop .modal {
  max-width: 360px;
}

.qrBox {
  background: #ffffff;
  border: var(--border);
  box-shadow: var(--shadow-sm);
  border-radius: 14px;
  padding: 12px;
  display: inline-block;
  margin: 6px auto;
}

/* History Modal */
#historyModalBackdrop .modal {
  max-width: 420px;
}

.histList {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 280px;
  overflow-y: auto;
  width: 100%;
}

.histItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border: var(--border);
  box-shadow: var(--shadow-sm);
  border-radius: 12px;
  background: var(--card-bg);
  cursor: pointer;
  font-size: 13px;
  transition: transform 0.08s, box-shadow 0.08s;
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
}

.histItem:hover {
  transform: translate(-1px, -1px);
  box-shadow: 2.5px 2.5px 0px var(--shadow-color);
  background: var(--color-yellow-light);
}

.histClear {
  margin-top: 8px;
  width: 100%;
  padding: 10px;
  border: var(--border);
  box-shadow: var(--shadow-sm);
  border-radius: var(--r-btn);
  background: var(--color-coral-light);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
}

/* Lock Modal */
#lockModalBackdrop .modal {
  max-width: 360px;
}

/* ==========================================================================
   6. Toasts & Overlays (Sleek, Compact & Native-Feeling)
   ========================================================================== */

.rmToasts {
  position: fixed;
  bottom: 22px;
  right: 22px;
  left: auto;
  transform: none;
  z-index: 99999;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  pointer-events: none;
  width: auto;
  max-width: min(360px, calc(100vw - 28px));
}

@media (max-width: 640px) {
  .rmToasts {
    right: 50%;
    left: auto;
    transform: translateX(50%);
    bottom: 16px;
    width: calc(100vw - 24px);
    max-width: 350px;
  }
}

.rmToast {
  pointer-events: auto;
  position: relative;
  overflow: hidden;
  padding: 10px 14px;
  background: var(--card-bg);
  color: var(--text-main);
  border: var(--border);
  box-shadow: var(--shadow-md);
  border-radius: 14px;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: toastSlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
  transition: transform 0.15s ease, opacity 0.15s ease;
  width: 100%;
}

@keyframes toastSlideIn {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.rmToast--leaving {
  opacity: 0 !important;
  transform: translateY(6px) scale(0.95) !important;
}

.rmToastIcon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--color-yellow);
  border: 1.5px solid var(--border-color);
  box-shadow: 1.5px 1.5px 0px var(--shadow-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}

.rmToast--success .rmToastIcon { background: var(--color-mint); color: #064e3b; }
.rmToast--error .rmToastIcon { background: var(--color-coral); color: #881337; }
.rmToast--info .rmToastIcon { background: var(--color-cyan); color: #0e7490; }

.rmToastBody {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

.rmToastTitle {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.3;
  word-break: break-word;
}

.rmToastSub {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.25;
  word-break: break-word;
}

.rmToastClose {
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  border-radius: 6px;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.1s, color 0.1s;
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
}

.rmToastClose:hover {
  background: var(--card-bg-alt);
  color: var(--text-main);
}

.rmToastProgress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2.5px;
  background: var(--border-color);
  opacity: 0.25;
  width: 100%;
  animation: toastProgressBar linear forwards;
}

@keyframes toastProgressBar {
  from { width: 100%; }
  to { width: 0%; }
}

/* Off-screen Preload Frame Cache (Strictly Hidden) */
#rmailboxHiddenFrameCache {
  position: fixed !important;
  left: -99999px !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  z-index: -99999 !important;
}

#rmailboxHiddenFrameCache * {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Full Screen Overlays */
.loadingOverlay,
.lockOverlay,
.siteExpiredOverlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(5px);
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.loadingOverlay.show,
.lockOverlay.show,
.siteExpiredOverlay.show,
.loadingOverlay[aria-hidden="false"],
.lockOverlay[aria-hidden="false"],
.siteExpiredOverlay[aria-hidden="false"] {
  display: flex;
}

.loadingCard,
.lockCard,
.siteExpiredCard {
  background: var(--card-bg);
  border: var(--border);
  box-shadow: var(--shadow-lg);
  border-radius: 20px;
  padding: 24px 20px;
  width: 100%;
  max-width: clamp(300px, 88vw, 380px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3.5px solid var(--border-color);
  border-top-color: var(--color-yellow);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.loadingText {
  font-size: 17px;
  font-weight: 900;
  color: var(--text-main);
}

.loadingSub {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ==========================================================================
   7. Footer (Pinned to absolute bottom, zero bottom gap)
   ========================================================================== */

.saweriaFooter {
  margin-top: auto !important;
  margin-bottom: 0 !important;
  border-top: var(--border);
  background: var(--card-bg);
  padding: clamp(28px, 3vw, 44px) clamp(14px, 2.5vw, 36px) clamp(20px, 2.5vw, 28px);
  width: 100%;
  position: relative;
  z-index: 10;
}

.saweriaFooterInner {
  width: 100%;
  max-width: min(96vw, 1560px);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 28px;
}

.saweriaFooterBrand {
  max-width: 480px;
  flex: 1 1 300px;
}

.saweriaFooterTitle {
  font-size: 18px;
  font-weight: 900;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.saweriaFooterTag {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-sub);
  margin-bottom: 8px;
}

.saweriaFooterDesc {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 14px;
}

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

.saweriaFooterLinks {
  display: flex;
  gap: clamp(24px, 3.5vw, 48px);
  flex-wrap: wrap;
}

.saweriaFooterCol {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.saweriaFooterColTitle {
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-main);
  margin-bottom: 4px;
}

.saweriaFooterLink {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  transition: color 0.1s;
}

.saweriaFooterLink:hover {
  color: var(--text-main);
  text-decoration: underline;
}

.saweriaFooterBottom {
  width: 100%;
  max-width: min(96vw, 1560px);
  margin: 24px auto 0;
  padding-top: 20px;
  border-top: 1.5px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-sub);
  flex-wrap: wrap;
  gap: 12px;
}

/* ==========================================================================
   8. Responsive Media Queries (Mobile & Small Screen Tuning)
   ========================================================================== */

@media (max-width: 640px) {
  .appHeader {
    padding: 8px 12px;
  }
  .appHeaderInner {
    gap: 8px;
  }
  .appBrand {
    gap: 8px;
    min-width: 0;
    flex: 1;
  }
  .appBrandLogoWrap {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 10px;
  }
  .appBrandLogo {
    padding: 3px;
  }
  .appBrandTitle {
    font-size: 15px;
    font-weight: 900;
  }
  .appBrandSub {
    display: none;
  }
  .appHeaderActions {
    gap: 6px;
    flex-shrink: 0;
    align-items: center;
  }
  .statusChip {
    height: 36px;
    padding: 0 8px;
    font-size: 11px;
    gap: 5px;
  }
  .themeSwitcherBtn {
    height: 36px;
    padding: 0 10px;
    font-size: 12px;
    border-radius: 10px;
    gap: 5px;
  }
  .themeToggle {
    width: 36px;
    height: 36px;
    min-width: 36px;
    flex: 0 0 36px;
    border-radius: 10px;
    font-size: 17px;
    padding: 0;
  }
  .emailDisplayCard {
    padding: 12px;
  }
  .emailDisplayActions {
    width: 100%;
    justify-content: stretch;
  }
  .emailDisplayActions .btnCopyEmailMain {
    flex: 1 1 auto;
  }
  .actionsRow {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .actionsRow .neo-btn {
    padding: 10px 8px;
    font-size: 13px;
  .modalActions {
    flex-direction: column-reverse;
    gap: 8px;
    width: 100%;
  }
  .modalActions .neo-btn {
    width: 100%;
    justify-content: center;
  }
  .rowmail {
    padding: 14px;
  }
  .rowmail .snip {
    padding-left: 0;
  }
  .otpHighlightPill {
    margin-left: 0;
    width: 100%;
    justify-content: space-between;
  }
  .otpAlertBanner {
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
  }
  .btnCopyOtpBig {
    width: 100%;
  }
  .mailExpandedTop {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .mailExpandedActions {
    width: 100%;
    justify-content: space-between;
    margin-top: 4px;
  }
}

@media (max-width: 420px) {
  .statusChip span:last-child {
    display: none;
  }
  .statusChip {
    padding: 0 6px;
    min-width: 24px;
    justify-content: center;
  }
  .themeSwitcherBtn span:last-child {
    display: none;
  }
  .themeSwitcherBtn {
    padding: 0 8px;
    width: 36px;
    justify-content: center;
  }
}