/* TempMail Pro — Frontend UI
   ================================================================
   VERSION: 2.3.2 — WordPress-theme-compatible build
   All styles are scoped to .tmpmp-wrap or .tmpmp-* prefixed
   classes so they never leak into the host WordPress theme.
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

/* ══════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS — scoped to .tmpmp-wrap (light mode default)
   ══════════════════════════════════════════════════════════════════ */
.tmpmp-wrap {
    --bg:         #f0f4ff;
    --bg2:        #ffffff;
    --bg3:        #ffffff;
    --bgh:        #f0f1f8;
    --border:     rgba(0,0,0,.08);
    --border-a:   rgba(99,102,241,.35);
    --accent:     #6366f1;
    --accent-h:   #818cf8;
    --accent-gl:  rgba(99,102,241,.18);
    --success:    #10b981;
    --danger:     #ef4444;
    --warn:       #f59e0b;
    --text:       #1a1d2e;
    --text2:      #5a5f7c;
    --text3:      #9ea3bb;
    --radius:     14px;
    --radius-sm:  8px;
    --shadow:     0 4px 24px rgba(0,0,0,.10);
    --font:       'Inter', system-ui, -apple-system, sans-serif;
    --font-h:     'Plus Jakarta Sans', var(--font);
    --tr:         .2s ease;
}

/* Dark theme tokens */
.tmpmp-wrap[data-theme="dark"] {
    --bg:       #080b14;
    --bg2:      #111422;
    --bg3:      #161929;
    --bgh:      #1c2033;
    --border:   rgba(139,92,246,.13);
    --border-a: rgba(99,102,241,.5);
    --text:     #f0f2ff;
    --text2:    #8b92b8;
    --text3:    #555e80;
    --shadow:   0 8px 40px rgba(0,0,0,.55);
    --accent:   #6366f1;
}

/* Light theme tokens (explicit — same as default, here for clarity) */
.tmpmp-wrap[data-theme="light"] {
    --bg:       #f0f4ff;
    --bg2:      #ffffff;
    --bg3:      #ffffff;
    --bgh:      #f0f1f8;
    --border:   rgba(0,0,0,.08);
    --border-a: rgba(99,102,241,.35);
    --text:     #1a1d2e;
    --text2:    #5a5f7c;
    --text3:    #9ea3bb;
    --shadow:   0 4px 24px rgba(0,0,0,.1);
    --accent:   #6366f1;
}

/* Auto theme — follow OS preference; dark OS → dark vars, light OS → already default */
@media (prefers-color-scheme: dark) {
    .tmpmp-wrap[data-theme="auto"] {
        --bg:       #080b14;
        --bg2:      #111422;
        --bg3:      #161929;
        --bgh:      #1c2033;
        --border:   rgba(139,92,246,.13);
        --border-a: rgba(99,102,241,.5);
        --text:     #f0f2ff;
        --text2:    #8b92b8;
        --text3:    #555e80;
        --shadow:   0 8px 40px rgba(0,0,0,.55);
        --accent:   #6366f1;
    }
}

/* ════════════════════════════════════════════════════════════════
   2. CSS ISOLATION — prevents WordPress theme styles bleeding in
   ════════════════════════════════════════════════════════════════ */

/* Universal reset scoped to plugin — box-sizing + margin/padding */
.tmpmp-wrap *,
.tmpmp-wrap *::before,
.tmpmp-wrap *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Reset buttons — WP themes (Astra, Divi, OceanWP etc.) override these */
.tmpmp-wrap button,
.tmpmp-wrap [role="button"] {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font);
    font-size: inherit;
    line-height: normal;
    text-align: inherit;
    color: inherit;
    display: inline-flex;
    align-items: center;
    padding: 0;
    margin: 0;
    outline: none;
    text-decoration: none;
}

/* Reset inputs */
.tmpmp-wrap input,
.tmpmp-wrap select,
.tmpmp-wrap textarea {
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--font);
    font-size: 14px;
    line-height: normal;
    border: none;
    background: none;
    outline: none;
    color: inherit;
}

/* Reset links inside the wrap — theme link colours can leak */
.tmpmp-wrap a {
    color: inherit;
    text-decoration: none;
}
.tmpmp-wrap a:hover,
.tmpmp-wrap a:focus,
.tmpmp-wrap a:visited {
    color: inherit;
    text-decoration: none;
}

/* Reset headings — themes set aggressive h1-h6 styles */
.tmpmp-wrap h1,
.tmpmp-wrap h2,
.tmpmp-wrap h3,
.tmpmp-wrap h4,
.tmpmp-wrap h5,
.tmpmp-wrap h6 {
    font-family: var(--font-h);
    font-weight: 800;
    line-height: 1.3;
    color: var(--text);
    margin: 0;
    padding: 0;
}

/* Reset lists */
.tmpmp-wrap ul,
.tmpmp-wrap ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ════════════════════════════════════════════════════════════════
   3. ROOT WRAPPER — the plugin widget card
   ════════════════════════════════════════════════════════════════ */
.tmpmp-wrap {
    /* Typography — override whatever theme sets */
    font-family: var(--font);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Colours — self-contained card */
    background: var(--bg);
    color: var(--text);

    /* Layout */
    border-radius: 18px;
    overflow: clip;
    box-shadow: var(--shadow), 0 0 0 1px var(--border);
    min-height: 580px;
    display: flex;
    flex-direction: column;
    position: relative;

    /* Isolation — prevents theme styles bleeding in */
    isolation: isolate;

    /* Width — respects the WordPress theme's content column */
    width: 100%;
    max-width: 100%;

    transition: background var(--tr), color var(--tr);
}

/* ════════════════════════════════════════════════════════════════
   4. ACCOUNT NAV BAR
   ════════════════════════════════════════════════════════════════ */
.tmpmp-account-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 24px;
    background: rgba(0,0,0,.02);
    border-bottom: 1px solid var(--border);
    min-height: 52px;
    gap: 12px;
    flex-wrap: wrap;
}
.tmpmp-wrap[data-theme="dark"] .tmpmp-account-bar,
.tmpmp-wrap[data-theme="light"] .tmpmp-account-bar {
    /* use CSS var — handled automatically by token switch */
    background: rgba(255,255,255,.03);
    background: color-mix(in srgb, var(--bg) 100%, transparent 0%);
}
.tmpmp-wrap[data-theme="dark"] .tmpmp-account-bar {
    background: rgba(255,255,255,.03);
    border-bottom-color: var(--border);
}
@media (prefers-color-scheme: dark) {
    .tmpmp-wrap[data-theme="auto"] .tmpmp-account-bar {
        background: rgba(255,255,255,.03);
    }
}
.tmpmp-wrap[data-theme="light"] .tmpmp-account-bar {
    background: rgba(0,0,0,.02);
    border-bottom-color: rgba(0,0,0,.08);
}

/* User side */
.tmpmp-account-bar__user {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tmpmp-account-bar__avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid var(--border-a);
}
.tmpmp-account-bar__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tmpmp-account-bar__avatar span {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #fff !important;
    line-height: 1;
    display: block;
}
.tmpmp-account-bar__info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.tmpmp-account-bar__greeting {
    font-size: 10px;
    color: var(--text3);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .5px;
    display: block;
}
.tmpmp-account-bar__name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}
.tmpmp-wrap[data-theme="light"] .tmpmp-account-bar__name    { color: #1e293b; }
.tmpmp-wrap[data-theme="light"] .tmpmp-account-bar__greeting { color: #94a3b8; }

/* Action buttons in nav bar */
.tmpmp-account-bar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.tmpmp-acct-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 14px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all var(--tr) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    border: 1.5px solid transparent !important;
    line-height: 1 !important;
    font-family: var(--font) !important;
}
.tmpmp-acct-btn--dash {
    background: var(--accent-gl) !important;
    color: var(--accent-h) !important;
    border-color: rgba(99,102,241,.3) !important;
}
.tmpmp-acct-btn--dash:hover {
    background: var(--accent) !important;
    color: #fff !important;
    border-color: var(--accent) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(99,102,241,.4);
}
.tmpmp-acct-btn--logout {
    background: rgba(239,68,68,.08) !important;
    color: #f87171 !important;
    border-color: rgba(239,68,68,.2) !important;
}
.tmpmp-acct-btn--logout:hover {
    background: #ef4444 !important;
    color: #fff !important;
    border-color: #ef4444 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(239,68,68,.35);
}
.tmpmp-acct-btn--login {
    background: linear-gradient(135deg, var(--accent), #8b5cf6) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 2px 10px rgba(99,102,241,.3);
}
.tmpmp-acct-btn--login:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(99,102,241,.5);
    filter: brightness(1.1);
}

/* Light overrides */
.tmpmp-wrap[data-theme="light"] .tmpmp-acct-btn--dash {
    background: #ede9fe !important;
    color: #6366f1 !important;
    border-color: rgba(99,102,241,.25) !important;
}
.tmpmp-wrap[data-theme="light"] .tmpmp-acct-btn--logout {
    background: #fee2e2 !important;
    color: #dc2626 !important;
    border-color: rgba(239,68,68,.2) !important;
}

/* Guest bar */
.tmpmp-account-bar__guest {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
    flex-wrap: wrap;
}
.tmpmp-account-bar__guest-text {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text2);
    font-weight: 500;
}
.tmpmp-wrap[data-theme="light"] .tmpmp-account-bar__guest-text { color: #64748b; }

@media (max-width: 560px) {
    .tmpmp-account-bar { padding: 8px 14px; }
    .tmpmp-account-bar__name { max-width: 100px; }
    .tmpmp-acct-btn { padding: 5px 10px !important; font-size: 11px !important; }
    .tmpmp-account-bar__guest { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ════════════════════════════════════════════════════════════════
   5. ADDRESS BAR (email generator panel)
   ════════════════════════════════════════════════════════════════ */
.tmpmp-address-bar {
    background: linear-gradient(135deg, #f0f4ff 0%, #eef1ff 60%, #f5f7ff 100%);
    padding: 28px 28px 22px;
    border-bottom: 1px solid var(--border);
    position: relative;
    overflow: visible;
    z-index: 10;
}
/* Dark overrides */
.tmpmp-wrap[data-theme="dark"] .tmpmp-address-bar {
    background: linear-gradient(135deg, #0e1220 0%, #151829 60%, #111422 100%);
}
@media (prefers-color-scheme: dark) {
    .tmpmp-wrap[data-theme="auto"] .tmpmp-address-bar {
        background: linear-gradient(135deg, #0e1220 0%, #151829 60%, #111422 100%);
    }
}
.tmpmp-wrap[data-theme="light"] .tmpmp-address-bar {
    background: linear-gradient(135deg, #f0f4ff 0%, #eef1ff 60%, #f5f7ff 100%);
}

/* Glow blobs */
.tmpmp-address-bar::before {
    content: '';
    position: absolute;
    top: -20px; right: -20px;
    width: 260px; height: 260px;
    background: radial-gradient(circle, rgba(99,102,241,.22) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
    animation: tmpmp-glow-pulse 6s ease-in-out infinite;
}
.tmpmp-address-bar::after {
    content: '';
    position: absolute;
    bottom: -30px; left: -20px;
    width: 180px; height: 180px;
    background: radial-gradient(circle, rgba(139,92,246,.12) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}
@keyframes tmpmp-glow-pulse {
    0%,100% { opacity:.7; transform:scale(1); }
    50%      { opacity:1;  transform:scale(1.08); }
}

/* Email address display box */
.tmpmp-addr-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg2);
    border: 2px solid var(--border-a);
    border-radius: 12px;
    padding: 13px 16px;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
    transition: box-shadow var(--tr), border-color var(--tr);
    flex-wrap: wrap;
}
.tmpmp-wrap[data-theme="light"] .tmpmp-addr-box {
    background: #fff;
    border-color: rgba(99,102,241,.35);
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.tmpmp-addr-box:hover {
    box-shadow: 0 0 0 4px var(--accent-gl);
    border-color: var(--accent);
}
.tmpmp-addr-icon {
    font-size: 18px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 6px rgba(99,102,241,.5));
    line-height: 1;
}
.tmpmp-addr-text {
    font-family: var(--font);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.4px;
    flex: 1;
    word-break: break-all;
    min-width: 0;
    background: linear-gradient(90deg, #818cf8, #a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.35;
}

/* Action row — domain picker + username + buttons */
.tmpmp-addr-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
    position: relative;
    z-index: 1;
}

/* ── Custom domain picker ── */
.tmpmp-select-wrap .tmpmp-select    { display: none !important; }
.tmpmp-select-chevron               { display: none !important; }

.tmpmp-select-wrap {
    position: relative;
    z-index: 100;
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;      /* no stretch — size to content */
    min-width: 0;
}
.tmpmp-domain-picker {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;      /* no stretch */
}

.tmpmp-domain-trigger {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(99,102,241,.1) !important;
    border: 1.5px solid var(--border-a) !important;
    border-radius: var(--radius-sm) !important;
    padding: 10px 14px !important;
    color: var(--text) !important;
    font-family: var(--font) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    width: auto !important;         /* size to content, not full row */
    min-height: 40px !important;
    transition: border-color var(--tr), background var(--tr), box-shadow var(--tr);
    white-space: nowrap !important;
    letter-spacing: .01em !important;
    box-sizing: border-box !important;
    justify-content: space-between !important;
    text-align: left !important;
    line-height: 1 !important;
    outline: none !important;
}
.tmpmp-domain-trigger:hover {
    background: rgba(99,102,241,.16) !important;
    border-color: var(--accent) !important;
}
.tmpmp-domain-trigger.open {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-gl);
    background: rgba(99,102,241,.18) !important;
}
.tmpmp-domain-trigger-cat  { font-size: 12px; flex-shrink: 0; line-height: 1; }
.tmpmp-domain-trigger-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tmpmp-domain-trigger-chevron {
    color: var(--accent);
    flex-shrink: 0;
    transition: transform var(--tr);
    display: flex;
    align-items: center;
}
.tmpmp-domain-trigger.open .tmpmp-domain-trigger-chevron { transform: rotate(180deg); }

/* Light mode trigger */
.tmpmp-wrap[data-theme="light"] .tmpmp-domain-trigger {
    background: rgba(99,102,241,.07) !important;
    border-color: rgba(99,102,241,.3) !important;
    color: #1a1d2e !important;
}
.tmpmp-wrap[data-theme="light"] .tmpmp-domain-trigger:hover {
    background: rgba(99,102,241,.12) !important;
}

/* ── Custom username input — compact like buttons ── */
.tmpmp-input {
    background: rgba(99,102,241,.1) !important;
    border: 1.5px solid var(--border-a) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text) !important;
    font-family: var(--font) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 10px 14px !important;
    outline: none !important;
    flex: 0 0 auto !important;      /* no stretch — stays compact */
    width: 160px !important;
    min-width: 120px !important;
    min-height: 40px !important;
    transition: border-color var(--tr), box-shadow var(--tr), background var(--tr);
    display: block;
    box-sizing: border-box !important;
}
.tmpmp-input::placeholder {
    color: var(--text2) !important;
    opacity: .55 !important;
    font-weight: 500 !important;
}
.tmpmp-input:hover {
    background: rgba(99,102,241,.16) !important;
    border-color: var(--accent) !important;
}
.tmpmp-input:focus {
    background: rgba(99,102,241,.14) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-gl) !important;
}
/* Light theme */
.tmpmp-wrap[data-theme="light"] .tmpmp-input {
    background: rgba(99,102,241,.07) !important;
    border-color: rgba(99,102,241,.3) !important;
    color: #1a1d2e !important;
}
.tmpmp-wrap[data-theme="light"] .tmpmp-input::placeholder {
    color: #9ea3bb !important;
    opacity: 1 !important;
}
.tmpmp-wrap[data-theme="light"] .tmpmp-input:hover {
    background: rgba(99,102,241,.12) !important;
}
/* Auto theme (OS light) */
@media (prefers-color-scheme: light) {
    .tmpmp-wrap[data-theme="auto"] .tmpmp-input {
        background: rgba(99,102,241,.07) !important;
        border-color: rgba(99,102,241,.3) !important;
        color: #1a1d2e !important;
    }
    .tmpmp-wrap[data-theme="auto"] .tmpmp-input::placeholder {
        color: #9ea3bb !important;
        opacity: 1 !important;
    }
    .tmpmp-wrap[data-theme="auto"] .tmpmp-input:hover {
        background: rgba(99,102,241,.12) !important;
    }
}

/* Drop panel */
/* =================================================================
   DOMAIN PICKER DROPDOWN — Premium redesign
   ================================================================= */

/* ── Panel container ── */
.tmpmp-domain-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 260px;
    width: max-content;
    max-width: 320px;
    background: var(--bg2);
    border: 1px solid rgba(99,102,241,.3);
    border-color: var(--border-a, rgba(99,102,241,.3));
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0,0,0,.65), 0 8px 24px rgba(0,0,0,.4), 0 0 0 1px rgba(99,102,241,.06), inset 0 1px 0 rgba(255,255,255,.05);
    z-index: 99999;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-10px) scale(.96);
    transform-origin: top left;
    transition: opacity .2s cubic-bezier(.4,0,.2,1), transform .22s cubic-bezier(.34,1.56,.64,1);
    pointer-events: none;
}
.tmpmp-domain-panel.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}
.tmpmp-domain-panel::before {
    content: '';
    display: block;
    height: 2px;
    background: linear-gradient(90deg, #6366f1, #8b5cf6, #a78bfa);
}
.tmpmp-wrap[data-theme="light"] .tmpmp-domain-panel {
    background: #ffffff;
    border-color: rgba(99,102,241,.22);
    box-shadow: 0 20px 50px rgba(0,0,0,.14), 0 4px 16px rgba(0,0,0,.08), 0 0 0 1px rgba(99,102,241,.06);
}
@media (prefers-color-scheme: light) {
    .tmpmp-wrap[data-theme="auto"] .tmpmp-domain-panel {
        background: #ffffff;
        border-color: rgba(99,102,241,.22);
        box-shadow: 0 20px 50px rgba(0,0,0,.14), 0 4px 16px rgba(0,0,0,.08);
    }
}

/* ── Scrollable list ── */
.tmpmp-domain-panel-inner {
    max-height: 300px;
    overflow-y: auto;
    padding: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(99,102,241,.25) transparent;
}
.tmpmp-domain-panel-inner::-webkit-scrollbar { width: 4px; }
.tmpmp-domain-panel-inner::-webkit-scrollbar-track { background: transparent; }
.tmpmp-domain-panel-inner::-webkit-scrollbar-thumb { background: rgba(99,102,241,.3); border-radius: 4px; }

/* ── Group separators ── */
.tmpmp-domain-group + .tmpmp-domain-group {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(99,102,241,.1);
    border-top-color: var(--border, rgba(99,102,241,.1));
}
.tmpmp-domain-group-label {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 8px 6px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.tmpmp-domain-group-label::before { content: ''; display: block; width: 16px; height: 1.5px; border-radius: 2px; flex-shrink: 0; opacity: .5; }
.tmpmp-domain-group-label::after  { content: ''; display: block; flex: 1; height: 1.5px; border-radius: 2px; opacity: .35; }
.tmpmp-domain-group-label.free    { color: #555e80; color: var(--text3, #555e80); }
.tmpmp-domain-group-label.free::before,
.tmpmp-domain-group-label.free::after { background: currentColor; }
.tmpmp-domain-group-label.premium { color: #f59e0b; }
.tmpmp-domain-group-label.premium::before,
.tmpmp-domain-group-label.premium::after { background: #f59e0b; }
.tmpmp-domain-group-label.vip     { color: #a78bfa; }
.tmpmp-domain-group-label.vip::before,
.tmpmp-domain-group-label.vip::after { background: #a78bfa; }
.tmpmp-domain-group-label.custom  { color: #2dd4bf; }
.tmpmp-domain-group-label.custom::before,
.tmpmp-domain-group-label.custom::after { background: #2dd4bf; }

/* ── Domain option rows ── */
.tmpmp-domain-opt {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 9px 10px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 10px !important;
    color: #f0f2ff !important;
    color: var(--text, #f0f2ff) !important;
    font-family: var(--font) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    text-align: left !important;
    box-sizing: border-box !important;
    position: relative !important;
    transition: background .15s, transform .12s !important;
}
.tmpmp-domain-opt:hover:not(.locked) { background: rgba(99,102,241,.12) !important; transform: translateX(2px) !important; }
.tmpmp-domain-opt.selected { background: rgba(99,102,241,.15) !important; color: #818cf8 !important; font-weight: 700 !important; }
.tmpmp-domain-opt.selected::before {
    content: '' !important; position: absolute !important;
    left: 0 !important; top: 20% !important; bottom: 20% !important;
    width: 3px !important; border-radius: 0 3px 3px 0 !important;
    background: #6366f1 !important; background: var(--accent, #6366f1) !important;
}
/* Icon bubble */
.tmpmp-opt-icon {
    width: 28px !important; height: 28px !important; border-radius: 8px !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    font-size: 13px !important; flex-shrink: 0 !important;
    background: rgba(99,102,241,.1) !important; border: 1px solid rgba(99,102,241,.18) !important;
}
.tmpmp-opt-name  { flex: 1 !important; min-width: 0 !important; letter-spacing: -.01em !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
/* Animated checkmark */
.tmpmp-opt-check {
    width: 20px !important; height: 20px !important; border-radius: 6px !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    font-size: 11px !important; font-weight: 700 !important;
    color: #fff !important; background: #6366f1 !important; background: var(--accent, #6366f1) !important;
    margin-left: auto !important; flex-shrink: 0 !important;
    opacity: 0 !important; transform: scale(.6) !important;
    transition: opacity .15s, transform .2s cubic-bezier(.34,1.56,.64,1) !important;
}
.tmpmp-domain-opt.selected .tmpmp-opt-check { opacity: 1 !important; transform: scale(1) !important; }
/* Lock badge */
.tmpmp-opt-lock {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 20px !important; height: 20px !important; border-radius: 6px !important;
    font-size: 11px !important; margin-left: auto !important; flex-shrink: 0 !important;
    background: rgba(245,158,11,.12) !important; border: 1px solid rgba(245,158,11,.22) !important; color: #f59e0b !important;
}
.tmpmp-domain-opt.locked { opacity: .6 !important; cursor: not-allowed !important; }
.tmpmp-domain-opt.locked .tmpmp-opt-check { display: none !important; }
/* Light theme */
.tmpmp-wrap[data-theme="light"] .tmpmp-domain-opt { color: #1a1d2e !important; }
.tmpmp-wrap[data-theme="light"] .tmpmp-domain-opt:hover:not(.locked) { background: rgba(99,102,241,.08) !important; }
.tmpmp-wrap[data-theme="light"] .tmpmp-domain-opt.selected { color: #4f46e5 !important; background: rgba(99,102,241,.1) !important; }
@media (prefers-color-scheme: light) {
    .tmpmp-wrap[data-theme="auto"] .tmpmp-domain-opt { color: #1a1d2e !important; }
    .tmpmp-wrap[data-theme="auto"] .tmpmp-domain-opt:hover:not(.locked) { background: rgba(99,102,241,.08) !important; }
    .tmpmp-wrap[data-theme="auto"] .tmpmp-domain-opt.selected { color: #4f46e5 !important; background: rgba(99,102,241,.1) !important; }
}

/*
/* ── Action Buttons ── */
.tmpmp-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 10px 18px !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    font-family: var(--font) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all var(--tr) !important;
    white-space: nowrap !important;
    outline: none !important;
    text-decoration: none !important;
    line-height: 1 !important;
}
.tmpmp-btn svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Primary */
.tmpmp-btn--primary {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(99,102,241,.4);
}
.tmpmp-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(99,102,241,.5);
    color: #fff !important;
}

/* Danger */
.tmpmp-btn--danger {
    background: rgba(239,68,68,.12) !important;
    color: var(--danger) !important;
    border: 1.5px solid rgba(239,68,68,.25) !important;
}
.tmpmp-btn--danger:hover {
    background: var(--danger) !important;
    color: #fff !important;
}

/* History */
.tmpmp-btn--history {
    background: rgba(16,185,129,.10) !important;
    color: var(--success) !important;
    border: 1.5px solid rgba(16,185,129,.28) !important;
}
.tmpmp-btn--history:hover {
    background: var(--success) !important;
    color: #fff !important;
    border-color: var(--success) !important;
    box-shadow: 0 4px 14px rgba(16,185,129,.35);
}
.tmpmp-btn--history.is-active {
    background: var(--success) !important;
    color: #fff !important;
    border-color: var(--success) !important;
}

/* Icon */
.tmpmp-btn--icon {
    padding: 9px !important;
    background: rgba(255,255,255,.06) !important;
    border: 1.5px solid var(--border) !important;
    color: var(--text2) !important;
    border-radius: 10px !important;
}
.tmpmp-btn--icon:hover {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
    background: var(--accent-gl) !important;
}

/* Small variant */
.tmpmp-btn--sm { padding: 7px 13px !important; font-size: 12px !important; }

/* ── Expiry bar ── */
.tmpmp-expiry-bar { margin-top: 16px; }
.tmpmp-expiry-label {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 600;
    color: var(--text3);
    margin-bottom: 7px;
}
#tmpmp-expiry-countdown { font-family: monospace; color: var(--success); font-size: 13px; }
#tmpmp-expiry-countdown.warn   { color: var(--warn); }
#tmpmp-expiry-countdown.danger { color: var(--danger); }
.tmpmp-progress-track {
    background: var(--border);
    border-radius: 99px;
    height: 5px;
    overflow: hidden;
}
.tmpmp-progress-fill {
    height: 100%; border-radius: 99px;
    background: linear-gradient(90deg, var(--accent), var(--success));
    transition: width 1s linear, background .5s;
}
.tmpmp-progress-fill.warn   { background: linear-gradient(90deg, var(--warn), #fbbf24); }
.tmpmp-progress-fill.danger { background: linear-gradient(90deg, var(--danger), #f87171); }

/* ════════════════════════════════════════════════════════════════
   6. MAIN TWO-COLUMN LAYOUT
   ════════════════════════════════════════════════════════════════ */
.tmpmp-columns {
    display: grid;
    grid-template-columns: 320px 1fr;
    flex: 1;
    overflow: hidden;
    min-height: 420px;
}

/* ── Inbox panel ── */
.tmpmp-inbox-panel {
    background: var(--bg2);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.tmpmp-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 18px;
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    gap: 8px;
    flex-shrink: 0;
}
.tmpmp-panel-header h3 {
    font-family: var(--font-h);
    font-size: 14px !important;
    font-weight: 800 !important;
    color: var(--text) !important;
    margin: 0 !important;
}
.tmpmp-panel-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.tmpmp-email-list {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.tmpmp-email-list::-webkit-scrollbar { width: 4px; }
.tmpmp-email-list::-webkit-scrollbar-thumb { background: var(--border-a); border-radius: 99px; }

/* Email rows */
.tmpmp-email-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--border);
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: all var(--tr);
    position: relative;
}
.tmpmp-email-row:hover { background: var(--bgh); border-left-color: var(--accent); }
.tmpmp-email-row.unread { background: rgba(99,102,241,.05); }
.tmpmp-email-row.unread::after {
    content: '';
    position: absolute;
    right: 14px; top: 50%;
    transform: translateY(-50%);
    width: 8px; height: 8px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--accent);
}
.tmpmp-email-row.read { opacity: .8; }
.tmpmp-email-row-sender {
    font-size: 13px; font-weight: 600; color: var(--accent);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tmpmp-email-row-subject {
    font-size: 12px; color: var(--text2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500;
}
.tmpmp-email-row.read .tmpmp-email-row-subject { font-weight: 400; color: var(--text3); }
.tmpmp-email-row-time { font-size: 11px; color: var(--text3); }

/* Empty state */
.tmpmp-empty-state {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 50px 24px; text-align: center; gap: 10px;
    position: relative; z-index: 0;
}
.tmpmp-empty-icon { font-size: 48px; animation: tmpmp-float 3s ease-in-out infinite; line-height: 1; isolation: isolate; }
@keyframes tmpmp-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.tmpmp-empty-state p     { font-size: 14px; color: var(--text2); font-weight: 500; }
.tmpmp-empty-state small { font-size: 12px; color: var(--text3); }

/* ── Viewer panel ── */
.tmpmp-viewer-panel {
    background: var(--bg3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.tmpmp-viewer-panel[hidden],
.tmpmp-viewer-panel.tmpmp-hidden { display: none !important; }

.tmpmp-viewer-header {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 18px;
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.tmpmp-viewer-subject {
    flex: 1;
    font-size: 14px; font-weight: 700; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tmpmp-viewer-meta {
    padding: 12px 18px;
    font-size: 12px; color: var(--text2);
    border-bottom: 1px solid var(--border);
    line-height: 1.8;
    flex-shrink: 0;
}
.tmpmp-viewer-meta strong { color: var(--text); }

/* Viewer tabs */
.tmpmp-viewer-tabs {
    display: flex; align-items: center; gap: 6px;
    padding: 9px 16px;
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    flex-wrap: wrap;
}
.tmpmp-tab {
    padding: 6px 18px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: .4px;
    color: var(--text2) !important;
    background: transparent !important;
    border: 1.5px solid var(--border-a) !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    transition: color var(--tr), background var(--tr), border-color var(--tr), box-shadow var(--tr);
    font-family: var(--font) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}
.tmpmp-tab:hover {
    color: var(--text) !important;
    border-color: var(--accent-h) !important;
    background: rgba(99,102,241,.08) !important;
}
.tmpmp-tab.active {
    background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 2px 12px rgba(99,102,241,.45);
}

.tmpmp-viewer-body {
    flex: 1;
    overflow: auto;
    position: relative;
    -webkit-overflow-scrolling: touch;
}
.tmpmp-tab-content {
    display: none;
    height: 100%;
    overflow-y: auto;
    padding: 18px;
    -webkit-overflow-scrolling: touch;
}
.tmpmp-tab-content.active { display: block; }
.tmpmp-tab-content.active#tmpmp-view-body-html { padding: 0; overflow-y: auto; overflow-x: hidden; }
.tmpmp-email-iframe {
    width: 100%; border: none; display: block;
    min-height: 300px; background: #fff; max-width: 100%; overflow: hidden;
}
#tmpmp-view-body-text {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 13px; line-height: 1.75;
    white-space: pre-wrap; word-break: break-word;
    color: var(--text); background: var(--bg3);
    border-radius: var(--radius-sm); padding: 16px;
    border: 1px solid var(--border); min-height: 120px;
}

/* ════════════════════════════════════════════════════════════════
   7. UPGRADE MODAL
   ════════════════════════════════════════════════════════════════ */
#tmpmp-upgrade-modal {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.75);
    display: flex; align-items: center; justify-content: center;
    z-index: 2147483647;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity .3s ease;
    padding: 16px;
}
#tmpmp-upgrade-modal.tmpmp-upgrade-show { opacity: 1; }
#tmpmp-upgrade-modal.tmpmp-upgrade-show .tmpmp-upgrade-box { transform: translateY(0) scale(1); }

.tmpmp-upgrade-box {
    background: linear-gradient(160deg, #111827 0%, #1a1f35 100%);
    border: 1px solid rgba(99,102,241,.3);
    border-radius: 20px; padding: 32px 28px 28px;
    max-width: 420px; width: 100%; position: relative;
    box-shadow: 0 24px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(99,102,241,.1);
    transform: translateY(20px) scale(.96);
    transition: transform .3s cubic-bezier(.34,1.56,.64,1);
    text-align: center;
}
.tmpmp-upgrade-close {
    position: absolute; top: 14px; right: 16px;
    background: rgba(255,255,255,.07) !important;
    border: none !important;
    color: var(--text2) !important;
    font-size: 20px !important;
    line-height: 1 !important;
    width: 32px !important; height: 32px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    transition: background var(--tr), color var(--tr);
}
.tmpmp-upgrade-close:hover { background: rgba(255,255,255,.15) !important; color: #fff !important; }
.tmpmp-upgrade-icon { font-size: 46px; margin-bottom: 10px; display: block; filter: drop-shadow(0 4px 16px rgba(99,102,241,.5)); }
.tmpmp-upgrade-title {
    font-size: 20px !important; font-weight: 700 !important;
    color: var(--text) !important; margin: 0 0 10px !important;
    font-family: var(--font-h) !important;
    background: linear-gradient(135deg, #f0f2ff, #818cf8);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.tmpmp-upgrade-desc { font-size: 14px; color: var(--text2); line-height: 1.65; margin: 0 0 18px; }
.tmpmp-upgrade-desc strong { color: var(--text); }
.tmpmp-upgrade-features {
    background: rgba(99,102,241,.07);
    border: 1px solid rgba(99,102,241,.15);
    border-radius: 12px; padding: 12px 16px; margin-bottom: 20px; text-align: left;
}
.tmpmp-upgrade-feature {
    font-size: 13px; color: var(--text2);
    padding: 4px 0; display: flex; align-items: center; gap: 10px;
}
.tmpmp-upgrade-feature span { color: var(--success); font-weight: 700; font-size: 14px; flex-shrink: 0; }
.tmpmp-upgrade-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.tmpmp-upgrade-cta {
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 100% !important;
    background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%) !important;
    color: #fff !important; text-decoration: none !important;
    padding: 13px 24px !important; border-radius: 12px !important;
    font-weight: 700 !important; font-size: 15px !important;
    box-shadow: 0 4px 20px rgba(99,102,241,.45);
    transition: box-shadow var(--tr), transform var(--tr);
    border: none !important; cursor: pointer !important; text-align: center !important;
}
.tmpmp-upgrade-cta:hover { box-shadow: 0 6px 28px rgba(99,102,241,.65); transform: translateY(-1px); color: #fff !important; }
.tmpmp-upgrade-pricing-btn {
    display: flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important;
    width: 100% !important; padding: 11px 24px !important; border-radius: 12px !important;
    font-weight: 600 !important; font-size: 14px !important;
    color: #818cf8 !important; text-decoration: none !important;
    border: 1.5px solid rgba(99,102,241,.35) !important;
    background: rgba(99,102,241,.08) !important;
    transition: background var(--tr), border-color var(--tr), transform var(--tr), color var(--tr);
    cursor: pointer !important; text-align: center !important;
}
.tmpmp-upgrade-pricing-btn:hover {
    background: rgba(99,102,241,.18) !important; border-color: rgba(99,102,241,.6) !important;
    color: #c7d2fe !important; transform: translateY(-1px);
}
.tmpmp-upgrade-pricing-btn svg { flex-shrink: 0; }
.tmpmp-upgrade-noctx { font-size: 13px; color: var(--text3); margin: 0; font-style: italic; text-align: center; }

/* ════════════════════════════════════════════════════════════════
   8. QR MODAL
   ════════════════════════════════════════════════════════════════ */
.tmpmp-modal {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.65);
    display: flex; align-items: center; justify-content: center;
    z-index: 2147483647;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: tmpmp-fadeIn .2s ease;
}
.tmpmp-modal[hidden] { display: none !important; }
@keyframes tmpmp-fadeIn { from{opacity:0} to{opacity:1} }

.tmpmp-modal-inner {
    background: var(--bg3); border: 1px solid var(--border-a);
    border-radius: 18px; padding: 28px; text-align: center;
    position: relative;
    box-shadow: 0 30px 70px rgba(0,0,0,.5);
    max-width: 360px; width: 92%;
    animation: tmpmp-pop .22s cubic-bezier(.34,1.56,.64,1);
}
@keyframes tmpmp-pop { from{opacity:0;transform:scale(.9) translateY(14px)} to{opacity:1;transform:scale(1) translateY(0)} }
.tmpmp-modal-inner h3 {
    font-family: var(--font-h) !important;
    font-size: 16px !important; font-weight: 800 !important;
    margin-bottom: 18px !important; color: var(--text) !important;
}
.tmpmp-modal-close {
    position: absolute; top: 14px; right: 16px;
    background: none !important; border: none !important;
    font-size: 20px !important; color: var(--text3) !important;
    cursor: pointer !important; padding: 4px 8px !important;
    border-radius: 6px !important; transition: all var(--tr);
}
.tmpmp-modal-close:hover { background: var(--bgh) !important; color: var(--text) !important; }
#tmpmp-qr-container { display: flex; justify-content: center; align-items: center; margin: 0 auto 12px; }
.tmpmp-qr-url { font-family: monospace; font-size: 11px; color: var(--text3); word-break: break-all; margin-top: 8px; }

/* ════════════════════════════════════════════════════════════════
   9. SKELETON LOADING
   ════════════════════════════════════════════════════════════════ */
.tmpmp-skeleton {
    background: linear-gradient(90deg, var(--bgh) 25%, rgba(255,255,255,.06) 50%, var(--bgh) 75%);
    background-size: 200% 100%;
    animation: tmpmp-shimmer 1.4s infinite;
    border-radius: 6px; height: 16px; margin: 6px 0;
}
@keyframes tmpmp-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ════════════════════════════════════════════════════════════════
   10. TOAST NOTIFICATIONS
   ════════════════════════════════════════════════════════════════ */
.tmpmp-toast-container {
    position: fixed;
    bottom: 24px; right: 20px;
    z-index: 2147483647;
    display: flex; flex-direction: column; gap: 10px;
    pointer-events: none;
}
.tmpmp-toast {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 10px; padding: 12px 18px;
    font-size: 13px; font-weight: 600; color: var(--text);
    box-shadow: 0 8px 32px rgba(0,0,0,.4);
    min-width: 200px; max-width: 320px;
    animation: tmpmp-toastIn .3s cubic-bezier(.4,0,.2,1) forwards;
    pointer-events: all;
    font-family: var(--font);
}
.tmpmp-toast.out { animation: tmpmp-toastOut .3s ease forwards; }
.tmpmp-toast.success { border-left: 3px solid var(--success); }
.tmpmp-toast.error   { border-left: 3px solid var(--danger); }
.tmpmp-toast.info    { border-left: 3px solid var(--accent); }
@keyframes tmpmp-toastIn  { from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:translateX(0)} }
@keyframes tmpmp-toastOut { from{opacity:1;transform:translateX(0)}     to{opacity:0;transform:translateX(40px)} }

/* ════════════════════════════════════════════════════════════════
   11. RATE LIMIT BANNER
   ════════════════════════════════════════════════════════════════ */
.tmpmp-rl-banner {
    display: flex; align-items: flex-start; gap: 12px;
    margin: 14px 0 0;
    padding: 13px 14px 13px 16px;
    border-radius: var(--radius-sm);
    border: 1.5px solid rgba(245,158,11,.35);
    border-left: 5px solid var(--warn);
    background: rgba(245,158,11,.06);
    position: relative; z-index: 1;
    animation: tmpmp-rl-slide-in .3s ease;
}
@keyframes tmpmp-rl-slide-in { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
.tmpmp-rl-banner-icon { font-size: 20px; line-height: 1; flex-shrink: 0; margin-top: 2px; }
.tmpmp-rl-banner-body { flex: 1; min-width: 0; }
.tmpmp-rl-banner-title {
    display: block; font-size: 13px; font-weight: 700;
    color: var(--warn); margin-bottom: 3px;
    font-family: var(--font-h); letter-spacing: .01em;
}
.tmpmp-rl-banner-msg { font-size: 12px; color: var(--text2); margin: 0; line-height: 1.55; }
.tmpmp-rl-banner-close {
    flex-shrink: 0;
    background: none !important; border: none !important;
    color: var(--text3) !important; font-size: 14px !important;
    cursor: pointer !important; padding: 2px 6px !important;
    border-radius: 4px !important; line-height: 1 !important;
    align-self: flex-start;
    transition: background var(--tr), color var(--tr);
}
.tmpmp-rl-banner-close:hover { background: rgba(245,158,11,.15) !important; color: var(--warn) !important; }
.tmpmp-wrap[data-theme="light"] .tmpmp-rl-banner { background: rgba(245,158,11,.07); border-color: rgba(245,158,11,.4); }
.tmpmp-wrap[data-theme="light"] .tmpmp-rl-banner-msg { color: #6b7280; }

/* ════════════════════════════════════════════════════════════════
   12. REFRESH BUTTON
   ════════════════════════════════════════════════════════════════ */
#tmpmp-refresh-btn {
    display: inline-flex !important;
    align-items: center !important; gap: 6px !important;
    padding: 7px 14px !important;
    background: rgba(16,185,129,.1) !important;
    border: 1.5px solid rgba(16,185,129,.3) !important;
    border-radius: 9px !important;
    color: var(--success) !important;
    font-family: var(--font) !important;
    font-size: 12px !important; font-weight: 700 !important;
    cursor: pointer !important; letter-spacing: .02em;
    transition: all var(--tr);
}
#tmpmp-refresh-btn svg { width: 14px; height: 14px; flex-shrink: 0; transition: transform .5s ease; }
#tmpmp-refresh-btn:hover {
    background: rgba(16,185,129,.18) !important;
    border-color: var(--success) !important;
    box-shadow: 0 4px 14px rgba(16,185,129,.2);
    transform: translateY(-1px);
}
#tmpmp-refresh-btn:hover svg { transform: rotate(180deg); }
#tmpmp-refresh-btn:active { transform: translateY(0); box-shadow: none; }
#tmpmp-refresh-btn.spinning svg { animation: tmpmp-spin-once .6s ease; }
@keyframes tmpmp-spin-once { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.tmpmp-wrap[data-theme="light"] #tmpmp-refresh-btn { background: rgba(16,185,129,.07) !important; border-color: rgba(16,185,129,.25) !important; }

/* ── SSE Live badge (premium users) ─────────────────────────────────────── */
#tmpmp-sse-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 600;
    font-family: var(--font); letter-spacing: .3px; transition: all .3s ease;
    cursor: default; user-select: none;
}
#tmpmp-sse-badge.sse-live {
    background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.3);
    color: #10b981;
}
#tmpmp-sse-badge.sse-reconnecting {
    background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.3);
    color: #f59e0b; animation: tmpmp-pulse-text 1.2s ease infinite;
}
#tmpmp-sse-badge.sse-off {
    background: rgba(148,163,184,.08); border: 1px solid rgba(148,163,184,.2);
    color: var(--text3);
}
/* Pulsing green dot inside .sse-live */
.sse-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #10b981; flex-shrink: 0;
    animation: tmpmp-sse-pulse 1.6s ease infinite;
}
@keyframes tmpmp-sse-pulse {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:.45; transform:scale(1.35); }
}
@keyframes tmpmp-pulse-text {
    0%,100% { opacity:1; } 50% { opacity:.55; }
}
.tmpmp-wrap[data-theme="light"] #tmpmp-sse-badge.sse-live {
    background: rgba(16,185,129,.08); color: #059669;
}

/* ════════════════════════════════════════════════════════════════
   13. BACK BUTTON
   ════════════════════════════════════════════════════════════════ */
#tmpmp-viewer-back {
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
    padding: 8px 14px 8px 10px !important;
    background: rgba(255,255,255,.05) !important;
    border: 1.5px solid var(--border) !important; border-radius: 10px !important;
    color: var(--text2) !important; font-family: var(--font) !important;
    font-size: 12px !important; font-weight: 600 !important; cursor: pointer !important;
    transition: all var(--tr); overflow: hidden;
}
#tmpmp-viewer-back::before {
    content: '\2190'; display: inline-block;
    transition: transform var(--tr); font-size: 14px; line-height: 1;
}
#tmpmp-viewer-back:hover {
    background: rgba(99,102,241,.1) !important; border-color: var(--accent) !important;
    color: var(--accent) !important; transform: translateX(-2px);
    box-shadow: 0 4px 14px rgba(99,102,241,.15);
}
#tmpmp-viewer-back:hover::before { transform: translateX(-3px); }
#tmpmp-viewer-back:active { transform: translateX(0); box-shadow: none; }
.tmpmp-wrap[data-theme="light"] #tmpmp-viewer-back {
    background: #fff !important; border-color: rgba(0,0,0,.1) !important; color: #5a5f7c !important;
}
.tmpmp-wrap[data-theme="light"] #tmpmp-viewer-back:hover { background: rgba(99,102,241,.07) !important; }

/* ════════════════════════════════════════════════════════════════
   14. SOUND TOGGLE
   ════════════════════════════════════════════════════════════════ */
.tmpmp-sound-toggle {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 32px !important; height: 32px !important;
    background: rgba(99,102,241,.08) !important;
    border: 1.5px solid var(--border) !important; border-radius: 8px !important;
    color: var(--text2) !important; cursor: pointer !important;
    transition: all var(--tr); flex-shrink: 0; padding: 0 !important;
}
.tmpmp-sound-toggle svg { width: 15px; height: 15px; pointer-events: none; }
.tmpmp-sound-toggle:hover {
    background: rgba(99,102,241,.15) !important;
    border-color: var(--accent) !important; color: var(--accent) !important;
    transform: scale(1.08);
}
.tmpmp-sound-toggle.sound-off {
    background: rgba(239,68,68,.07) !important;
    border-color: rgba(239,68,68,.25) !important; color: var(--danger) !important;
}
.tmpmp-sound-toggle.sound-off:hover { background: rgba(239,68,68,.14) !important; border-color: var(--danger) !important; }
@keyframes tmpmp-bell-ring {
    0%   { transform: rotate(0deg)   scale(1);    }
    15%  { transform: rotate(-20deg) scale(1.25); }
    30%  { transform: rotate(18deg)  scale(1.25); }
    45%  { transform: rotate(-10deg) scale(1.15); }
    60%  { transform: rotate(8deg)   scale(1.1);  }
    80%  { transform: rotate(-4deg)  scale(1.05); }
    100% { transform: rotate(0deg)   scale(1);    }
}
.tmpmp-sound-toggle.ringing svg { animation: tmpmp-bell-ring .55s ease forwards; color: var(--accent) !important; }

/* ════════════════════════════════════════════════════════════════
   15. RESPONSIVE — Mobile First
   ════════════════════════════════════════════════════════════════ */

/* Tablet: collapse sidebar */
@media (max-width: 860px) {
    .tmpmp-wrap { border-radius: 14px; }
    .tmpmp-columns { grid-template-columns: 280px 1fr; }
}

/* Mobile: single column — inbox or viewer, never both */
@media (max-width: 680px) {
    .tmpmp-wrap { border-radius: 12px; min-height: 520px; }
    .tmpmp-address-bar { padding: 22px 16px 18px; }

    /* Single column */
    .tmpmp-columns { grid-template-columns: 1fr; min-height: auto; overflow: visible; }
    .tmpmp-inbox-panel { border-right: none; min-height: 320px; }
    .tmpmp-viewer-panel { min-height: 480px; }

    /* Mobile viewing: hide inbox, show viewer full-width */
    .tmpmp-wrap.mobile-viewing .tmpmp-inbox-panel  { display: none !important; }
    .tmpmp-wrap.mobile-viewing .tmpmp-viewer-panel { min-height: calc(100svh - 200px); max-height: none; }
    .tmpmp-wrap:not(.mobile-viewing) .tmpmp-viewer-panel[hidden] { display: none !important; }

    /* Email iframe */
    .tmpmp-email-iframe { min-height: 380px; }

    /* Address bar */
    .tmpmp-addr-text { font-size: 14px; }
    .tmpmp-addr-box { padding: 11px 13px; flex-wrap: nowrap; }

    /* Action row: wrap naturally, all items same height */
    .tmpmp-addr-actions {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }
    /* Picker + input: each takes half the row on mobile */
    .tmpmp-select-wrap { flex: 1 1 auto; min-width: 140px; }
    .tmpmp-domain-picker { width: 100%; }
    .tmpmp-domain-trigger { width: 100% !important; min-height: 44px !important; }
    .tmpmp-input { flex: 1 1 auto !important; width: auto !important; min-width: 120px !important; min-height: 44px !important; }
    /* Buttons: fill remaining space equally */
    .tmpmp-btn--primary,
    .tmpmp-btn--history,
    .tmpmp-btn--danger { justify-content: center !important; flex: 1 1 auto; min-height: 44px !important; }

    /* Domain panel: expand to full width on mobile */
    .tmpmp-domain-panel { min-width: 100%; left: 0; right: 0; }

    /* Viewer tabs */
    .tmpmp-viewer-tabs { flex-wrap: wrap; padding: 8px 12px; }
    .tmpmp-tab { padding: 7px 14px !important; }
}

/* Small phones */
@media (max-width: 480px) {
    .tmpmp-address-bar { padding: 18px 12px 15px; }
    .tmpmp-addr-text { font-size: 13px; letter-spacing: -.3px; }
    .tmpmp-addr-box { padding: 10px 11px; gap: 6px; }
    .tmpmp-btn { font-size: 12px !important; }
    .tmpmp-btn--icon { padding: 8px !important; }
    .tmpmp-panel-header { padding: 11px 13px; }
    .tmpmp-email-row { padding: 11px 13px; }
    .tmpmp-viewer-header { padding: 10px 13px; }
    .tmpmp-viewer-meta { padding: 10px 13px; font-size: 11px; }
    .tmpmp-modal-inner { padding: 22px 15px; border-radius: 14px; }
    .tmpmp-toast-container { bottom: 12px; right: 10px; }
    .tmpmp-toast { min-width: 180px; max-width: calc(100vw - 20px); padding: 10px 14px; font-size: 12px; }
    #tmpmp-refresh-btn { padding: 6px 11px !important; font-size: 11px !important; }
    #tmpmp-viewer-back { padding: 7px 10px 7px 8px !important; font-size: 11px !important; }
    .tmpmp-sound-toggle { width: 30px !important; height: 30px !important; }
    .tmpmp-sound-toggle svg { width: 13px; height: 13px; }
    .tmpmp-rl-banner { gap: 10px; padding: 11px 11px 11px 13px; }
    .tmpmp-rl-banner-icon { font-size: 17px; }
    .tmpmp-rl-banner-title { font-size: 12px; }
    .tmpmp-rl-banner-msg { font-size: 11px; }
    .tmpmp-upgrade-box { padding: 24px 18px 20px; }
    .tmpmp-upgrade-icon { font-size: 40px; }
    .tmpmp-upgrade-title { font-size: 18px !important; }
}

/* Very small */
@media (max-width: 360px) {
    .tmpmp-address-bar { padding: 15px 10px 13px; }
    .tmpmp-addr-text { font-size: 12px; }
    .tmpmp-btn { font-size: 11px !important; }
    .tmpmp-email-row-sender { font-size: 12px; }
    .tmpmp-empty-icon { font-size: 40px; }
    .tmpmp-account-bar { padding: 7px 10px; }
}

/* ════════════════════════════════════════════════════════════════
   16. PUBLIC PAGES — Pricing, Login, Dashboard
   These sections appear outside .tmpmp-wrap on public WP pages.
   Scoped to .tmpmp-page-section to avoid leaking.
   ════════════════════════════════════════════════════════════════ */
.tmpmp-page-section {
    --c-bg:        #f8fafc;
    --c-card:      #ffffff;
    --c-border:    #e2e8f0;
    --c-primary:   #6366f1;
    --c-primary-h: #4f46e5;
    --c-purple:    #8b5cf6;
    --c-success:   #10b981;
    --c-danger:    #ef4444;
    --c-warn:      #f59e0b;
    --c-text:      #0f172a;
    --c-muted:     #64748b;
    --c-subtle:    #94a3b8;
    --c-radius:    14px;
    --c-shadow:    0 4px 24px rgba(0,0,0,.07);
    --c-shadow-lg: 0 12px 40px rgba(99,102,241,.15);
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--c-text);
    -webkit-font-smoothing: antialiased;
}
.tmpmp-page-section *,
.tmpmp-page-section *::before,
.tmpmp-page-section *::after {
    box-sizing: border-box;
}

/* Badges */
.tmpmp-pub-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 700; letter-spacing: .3px;
}
.tmpmp-pub-badge--green  { background: #d1fae5; color: #065f46; }
.tmpmp-pub-badge--indigo { background: #e0e7ff; color: #4f46e5; }
.tmpmp-pub-badge--red    { background: #fee2e2; color: #991b1b; }
.tmpmp-pub-badge--amber  { background: #fef3c7; color: #92400e; }
.tmpmp-pub-badge--gray   { background: #f1f5f9; color: #475569; }

/* Public buttons */
.tmpmp-pub-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 22px; border: none; border-radius: 10px;
    font-family: inherit; font-size: 14px; font-weight: 700;
    cursor: pointer; text-decoration: none; transition: .18s;
    white-space: nowrap; line-height: 1;
    box-sizing: border-box;
}
.tmpmp-pub-btn--primary {
    background: linear-gradient(135deg, var(--c-primary), var(--c-purple));
    color: #fff; box-shadow: 0 4px 14px rgba(99,102,241,.3);
}
.tmpmp-pub-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(99,102,241,.4); color: #fff; text-decoration: none; }
.tmpmp-pub-btn--outline { background: transparent; border: 1.5px solid var(--c-border); color: var(--c-muted); }
.tmpmp-pub-btn--outline:hover { border-color: var(--c-primary); color: var(--c-primary); }
.tmpmp-pub-btn--danger { background: #fee2e2; border: 1px solid #fca5a5; color: #dc2626; }
.tmpmp-pub-btn--danger:hover { background: #fecaca; }
.tmpmp-pub-btn:disabled { opacity: .6; cursor: not-allowed; transform: none !important; }

/* Card */
.tmpmp-pub-card {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--c-radius);
    box-shadow: var(--c-shadow);
    padding: 24px;
}

/* Table */
.tmpmp-pub-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tmpmp-pub-table th {
    padding: 10px 12px; text-align: left; font-size: 11.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .4px;
    color: var(--c-muted); border-bottom: 2px solid var(--c-border); background: #f8fafc;
}
.tmpmp-pub-table td { padding: 11px 12px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.tmpmp-pub-table tr:last-child td { border-bottom: none; }
.tmpmp-pub-table tr:hover td { background: #fafbff; }
.tmpmp-pub-table-wrap { overflow-x: auto; border-radius: 10px; border: 1px solid var(--c-border); }

/* ════════════════════════════════════════════════════════════════
   17. PRICING PAGE
   ════════════════════════════════════════════════════════════════ */
.tmpmp-pricing-wrap { max-width: 1100px; margin: 0 auto; padding: 48px 20px; }
.tmpmp-pricing-wrap > .tmpmp-pricing-hero { text-align: center; margin-bottom: 36px; }
.tmpmp-pricing-wrap .tmpmp-pricing-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    background: #ede9fe; color: #7c3aed; padding: 5px 14px;
    border-radius: 999px; font-size: 12px; font-weight: 700;
    letter-spacing: .5px; text-transform: uppercase; margin-bottom: 14px;
}
.tmpmp-pricing-wrap h2 { font-size: clamp(26px, 4vw, 38px); font-weight: 800; color: var(--c-text); margin: 0 0 10px; line-height: 1.2; }
.tmpmp-pricing-wrap .tmpmp-pricing-sub { font-size: 16px; color: var(--c-muted); margin: 0 auto; max-width: 440px; }

/* Billing toggle */
.tmpmp-billing-toggle { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 24px 0; }
.tmpmp-billing-toggle span { font-size: 14px; font-weight: 600; color: var(--c-muted); }
.tmpmp-billing-toggle span.active { color: var(--c-primary); }
.tmpmp-billing-save { font-size: 11px; background: #d1fae5; color: #065f46; padding: 2px 8px; border-radius: 999px; font-weight: 700; }
.tmpmp-toggle { position: relative; display: inline-block; width: 46px; height: 26px; }
.tmpmp-toggle input { opacity: 0; width: 0; height: 0; }
.tmpmp-toggle-slider { position: absolute; inset: 0; background: #cbd5e1; border-radius: 999px; cursor: pointer; transition: .3s; }
.tmpmp-toggle-slider::before { content: ''; position: absolute; width: 20px; height: 20px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: .3s; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.tmpmp-toggle input:checked + .tmpmp-toggle-slider { background: var(--c-primary); }
.tmpmp-toggle input:checked + .tmpmp-toggle-slider::before { transform: translateX(20px); }

/* Plan grid */
.tmpmp-plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 24px; align-items: start; padding-top: 20px;
}
.tmpmp-plan-card {
    background: #fff; border: 1.5px solid var(--c-border);
    border-radius: 20px; padding: 28px; position: relative;
    transition: transform .2s, box-shadow .2s;
    box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.tmpmp-plan-card:hover { transform: translateY(-4px); box-shadow: var(--c-shadow-lg); }
.tmpmp-plan-card.featured {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 1px var(--c-primary), var(--c-shadow-lg);
    background: linear-gradient(160deg, #faf9ff, #ffffff);
}
.tmpmp-plan-badge {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg, var(--c-primary), var(--c-purple));
    color: #fff; font-size: 12px; font-weight: 700; padding: 4px 16px;
    border-radius: 999px; white-space: nowrap;
    box-shadow: 0 4px 12px rgba(99,102,241,.35);
}
.tmpmp-plan-name { font-size: 18px; font-weight: 800; color: var(--c-text); margin-bottom: 8px; }
.tmpmp-plan-price { display: flex; align-items: flex-start; gap: 2px; line-height: 1; margin-bottom: 6px; }
.tmpmp-plan-price sup { font-size: 17px; font-weight: 700; line-height: 1; margin-top: 10px; vertical-align: baseline; color: var(--c-text); }
.tmpmp-plan-price > .price-monthly,
.tmpmp-plan-price > .price-yearly { font-size: 50px; font-weight: 800; color: var(--c-text); line-height: 1; }
.tmpmp-plan-price .per { font-size: 14px; font-weight: 500; color: var(--c-muted); align-self: flex-end; margin-bottom: 5px; margin-left: 2px; }
.tmpmp-plan-free-label { font-size: 13px; color: var(--c-muted); margin-bottom: 8px; }
.tmpmp-plan-divider { border: none; border-top: 1px solid #f1f5f9; margin: 16px 0; }
.tmpmp-plan-features { list-style: none !important; padding: 0 !important; margin: 0 0 22px !important; display: flex; flex-direction: column; gap: 9px; }
.tmpmp-plan-features li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: #374151; }
.tmpmp-plan-features li::before {
    content: '\002713'; display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; min-width: 18px; border-radius: 50%;
    background: #ede9fe; color: var(--c-primary); font-size: 11px; font-weight: 900; margin-top: 1px;
}
.tmpmp-plan-cta {
    display: block !important; text-align: center !important; padding: 13px !important;
    border-radius: 10px !important; font-weight: 700 !important; font-size: 14px !important;
    text-decoration: none !important; transition: .18s; cursor: pointer !important; border: none !important;
    background: linear-gradient(135deg, var(--c-primary), var(--c-purple)) !important;
    color: #fff !important; box-shadow: 0 4px 14px rgba(99,102,241,.28);
    width: 100% !important; font-family: inherit !important;
}
.tmpmp-plan-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(99,102,241,.38); color: #fff !important; text-decoration: none !important; }
.tmpmp-plan-cta.tmpmp-plan-cta--free { background: linear-gradient(135deg, #475569, #64748b) !important; box-shadow: 0 4px 14px rgba(71,85,105,.2); }

/* Payment modal */
.tmpmp-pay-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 2147483647; align-items: center; justify-content: center; backdrop-filter: blur(6px); padding: 20px; }
.tmpmp-pay-modal.is-open { display: flex; }
.tmpmp-pay-modal-inner { background: #1e293b; border-radius: 20px; padding: 32px; max-width: 420px; width: 100%; position: relative; color: #f1f5f9; animation: tmpmp-modal-in .22s ease; }
@keyframes tmpmp-modal-in { from{opacity:0;transform:scale(.94) translateY(8px)} to{opacity:1;transform:none} }
.tmpmp-pay-close { position: absolute; top: 14px; right: 18px; background: none !important; border: none !important; font-size: 22px; color: #94a3b8 !important; cursor: pointer !important; line-height: 1 !important; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background .15s; }
.tmpmp-pay-close:hover { background: rgba(255,255,255,.08) !important; }
.tmpmp-pay-title { font-size: 18px; font-weight: 800; margin: 0 0 4px; }
.tmpmp-pay-sub   { font-size: 13px; color: #94a3b8; margin: 0 0 22px; }
.tmpmp-gw-btns   { display: flex; flex-direction: column; gap: 10px; }
.tmpmp-gw-btn { display: flex !important; align-items: center !important; gap: 12px !important; padding: 14px 18px !important; border: none !important; border-radius: 12px !important; font-family: inherit !important; font-size: 14px !important; font-weight: 700 !important; cursor: pointer !important; transition: opacity .15s, transform .15s; }
.tmpmp-gw-btn:hover { opacity: .9; transform: translateY(-1px); }
.tmpmp-gw-btn--stripe      { background: linear-gradient(135deg,#6366f1,#818cf8) !important; color:#fff !important; }
.tmpmp-gw-btn--paypal      { background: #f7b731 !important; color: #000 !important; }
.tmpmp-gw-btn--woocommerce { background: linear-gradient(135deg,#7f54b3,#9b6dce) !important; color:#fff !important; }
.tmpmp-gw-btn--custom      { background: linear-gradient(135deg,#0f766e,#14b8a6) !important; color:#fff !important; }
.tmpmp-pay-loading { display: none; text-align: center; padding: 24px; color: #94a3b8; }

/* ════════════════════════════════════════════════════════════════
   18. LOGIN / AUTH PAGE
   ════════════════════════════════════════════════════════════════ */
.tmpmp-auth-wrap { max-width: 460px; margin: 48px auto; padding: 0 16px; }
.tmpmp-auth-hero { text-align: center; margin-bottom: 26px; }
.tmpmp-auth-icon { font-size: 46px; display: block; margin-bottom: 10px; line-height: 1; text-decoration: none; color: inherit; transition: transform .2s ease; }
.tmpmp-auth-icon:hover { transform: scale(1.12); text-decoration: none; }
.tmpmp-auth-hero h1 { font-size: 26px; font-weight: 800; margin: 0 0 6px; color: var(--c-text); }
.tmpmp-auth-hero p  { font-size: 14px; color: var(--c-muted); margin: 0; }
.tmpmp-auth-card { background: #fff; border: 1px solid var(--c-border); border-radius: 20px; padding: 28px 30px; box-shadow: 0 8px 32px rgba(0,0,0,.08); }
.tmpmp-auth-section-title { font-size: 13.5px; font-weight: 700; color: var(--c-text); margin: 0 0 14px; display: flex; align-items: center; gap: 7px; }
.tmpmp-auth-input { width: 100%; padding: 11px 14px; border: 1.5px solid var(--c-border); border-radius: 10px; font-family: inherit; font-size: 14px; color: var(--c-text); outline: none; transition: border-color .18s; margin-bottom: 10px; display: block; background: #fff; }
.tmpmp-auth-input:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(99,102,241,.1); }
.tmpmp-auth-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; }
.tmpmp-auth-divider hr { flex: 1; border: none; border-top: 1px solid var(--c-border); }
.tmpmp-auth-divider span { font-size: 12px; color: var(--c-subtle); font-weight: 600; }
.tmpmp-auth-google { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 11px; background: #fff; border: 1.5px solid var(--c-border); border-radius: 10px; font-family: inherit; font-size: 14px; font-weight: 600; color: #374151; text-decoration: none; transition: .18s; cursor: pointer; margin-top: 10px; }
.tmpmp-auth-google:hover { border-color: var(--c-primary); color: var(--c-primary); background: #f9f7ff; }
.tmpmp-auth-note { text-align: center; margin-top: 16px; font-size: 13px; color: var(--c-muted); }
.tmpmp-auth-msg { margin-top: 10px; font-size: 13px; font-weight: 600; text-align: center; display: none; padding: 8px 12px; border-radius: 8px; }
.tmpmp-auth-msg.success { background: #d1fae5; color: #065f46; }
.tmpmp-auth-msg.error   { background: #fee2e2; color: #991b1b; }

/* WP login form override */
.tmpmp-auth-card #loginform { margin: 0; }
.tmpmp-auth-card #loginform label { font-size: 13px; font-weight: 600; color: var(--c-text); display: block; margin-bottom: 4px; }
.tmpmp-auth-card #loginform input[type="text"],
.tmpmp-auth-card #loginform input[type="password"] { width: 100%; padding: 11px 14px; border: 1.5px solid var(--c-border); border-radius: 10px; font-family: inherit; font-size: 14px; margin-bottom: 14px; outline: none; transition: border-color .18s; box-sizing: border-box; background: #fff; color: #0f172a; }
.tmpmp-auth-card #loginform input:focus { border-color: var(--c-primary); }
.tmpmp-auth-card #loginform .forgetmenot { font-size: 13px; color: var(--c-muted); }
.tmpmp-auth-card #loginform input[type="submit"] { width: 100%; padding: 12px; margin-top: 4px; background: linear-gradient(135deg, var(--c-primary), var(--c-purple)); color: #fff; border: none; border-radius: 10px; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: .18s; box-shadow: 0 4px 14px rgba(99,102,241,.28); }
.tmpmp-auth-card #loginform input[type="submit"]:hover { transform: translateY(-1px); }
.tmpmp-auth-card #loginform .login-remember { margin-bottom: 10px; }
.tmpmp-auth-card #loginform .login-submit { margin: 0; }

/* ════════════════════════════════════════════════════════════════
   19. USER DASHBOARD
   ════════════════════════════════════════════════════════════════ */
.tmpmp-dashboard-wrap { max-width: 1100px; margin: 0 auto; padding: 32px 20px; }

/* ── Header card ── */
.tmpmp-dash-header {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 16px;
    margin-bottom: 24px;
    padding: 20px 24px;
    background: linear-gradient(135deg, #faf9ff 0%, #ffffff 60%, #f0f9ff 100%);
    border: 1px solid var(--c-border);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(99,102,241,.06), 0 1px 3px rgba(0,0,0,.04);
}
.tmpmp-dash-header h1 { font-size: 22px; font-weight: 800; margin: 0; color: var(--c-text); }
.tmpmp-dash-header p  { font-size: 13.5px; color: var(--c-muted); margin: 3px 0 0; }
.tmpmp-dash-actions   { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ── Pill / segment-control tabs ── */
.tmpmp-dash-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    background: #f1f5f9;
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 28px;
    border-bottom: none;
    width: 100%;
    box-sizing: border-box;
}
.dash-tab-btn {
    padding: 9px 18px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: #64748b;
    border-radius: 9px;
    border-bottom: none;
    margin-bottom: 0;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    line-height: 1;
    user-select: none;
}
.dash-tab-btn:hover {
    background: rgba(255,255,255,.75);
    color: var(--c-primary);
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
}
.dash-tab-btn.is-active {
    background: #ffffff;
    color: var(--c-primary);
    box-shadow: 0 2px 8px rgba(99,102,241,.12), 0 0 0 1px rgba(99,102,241,.1);
}

.dash-tab-panel { display: none; }
.dash-tab-panel.is-active { display: block; }

.tmpmp-dash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 26px; }
.tmpmp-stat-card { background: #fff; border: 1px solid var(--c-border); border-radius: 14px; padding: 18px 20px; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.tmpmp-stat-label { font-size: 12px; font-weight: 600; color: var(--c-muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; }
.tmpmp-stat-value { font-size: 28px; font-weight: 800; color: var(--c-text); }
.tmpmp-stat-sub   { font-size: 12px; color: var(--c-muted); margin-top: 2px; }

.tmpmp-billing-active { background: linear-gradient(135deg, #f0fdf4, #dcfce7); border: 1px solid #bbf7d0; border-radius: 14px; padding: 22px; margin-bottom: 24px; }
.tmpmp-billing-active h3 { margin: 0 0 8px; font-size: 16px; font-weight: 800; color: #065f46; }
.tmpmp-billing-active p  { margin: 0; font-size: 13px; color: #047857; }
.tmpmp-billing-actions   { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }

.tmpmp-api-new-key { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; padding: 14px; margin-bottom: 18px; font-family: monospace; font-size: 13px; color: #065f46; }

.tmpmp-locked-notice { background: #fef3c7; border: 1px solid #fde68a; border-radius: 12px; padding: 20px; font-size: 14px; color: #92400e; }
.tmpmp-locked-notice a { color: var(--c-primary); font-weight: 700; }

/* ════════════════════════════════════════════════════════════════
   20. FAQ SECTION (inside .tmpmp-wrap, uses dark tokens)
   ════════════════════════════════════════════════════════════════ */
.tmpmp-faq { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-top: 20px; }
.tmpmp-faq-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 14px; border-bottom: 1px solid var(--border); }
.tmpmp-faq-title { font-size: 15px !important; font-weight: 700 !important; color: var(--text) !important; margin: 0 !important; font-family: var(--font-h) !important; letter-spacing: -.3px; }
.tmpmp-faq-count { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--text3); background: var(--bg3); padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); }
.tmpmp-faq-list { padding: 6px 0; }
.tmpmp-faq-item { border-bottom: 1px solid var(--border); }
.tmpmp-faq-item:last-child { border-bottom: none; }
.tmpmp-faq-q { width: 100% !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 15px 22px !important; background: transparent !important; border: none !important; cursor: pointer !important; text-align: left !important; color: var(--text) !important; font-size: 14px !important; font-weight: 600 !important; font-family: var(--font) !important; line-height: 1.5 !important; transition: background .15s, color .15s; }
.tmpmp-faq-q:hover, .tmpmp-faq-q.is-open { background: var(--bgh) !important; color: var(--accent) !important; }
.tmpmp-faq-q-text { flex: 1; }
.tmpmp-faq-icon { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: var(--text2); transition: background .2s, border-color .2s, color .2s, transform .25s; line-height: 1; }
.tmpmp-faq-q.is-open .tmpmp-faq-icon { background: var(--accent); border-color: var(--accent); color: #fff; transform: rotate(180deg); }
.tmpmp-faq-a { overflow: hidden; }
.tmpmp-faq-a-inner { padding: 4px 22px 18px; font-size: 13.5px; color: var(--text2); line-height: 1.75; }
.tmpmp-faq-a-inner a { color: var(--accent); font-weight: 600; }
.tmpmp-faq-a-inner a:hover { text-decoration: underline; }
.tmpmp-faq-a-inner ul { margin: 8px 0 0 18px; list-style: disc !important; }
.tmpmp-faq-a-inner li { margin-bottom: 4px; list-style: disc !important; }
.tmpmp-wrap[data-theme="light"] .tmpmp-faq { box-shadow: 0 2px 16px rgba(0,0,0,.06); }

/* ════════════════════════════════════════════════════════════════
   21. PUBLIC PAGE RESPONSIVE
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .tmpmp-pricing-wrap { padding: 28px 14px; }
    .tmpmp-plans-grid { grid-template-columns: 1fr; gap: 28px; padding-top: 24px; }
    .tmpmp-plan-card.featured { margin-top: 16px; }
    .tmpmp-plan-price > .price-monthly,
    .tmpmp-plan-price > .price-yearly { font-size: 44px; }
    .tmpmp-plan-badge { font-size: 11px; padding: 3px 14px; }
    .tmpmp-auth-card { padding: 22px 18px; }
    .tmpmp-dashboard-wrap { padding: 20px 14px; }
    .tmpmp-dash-header { padding: 16px 18px; gap: 12px; }
    .tmpmp-dash-header h1 { font-size: 20px; }
    .tmpmp-dash-actions { width: 100%; justify-content: flex-start; }
    .tmpmp-pub-table th, .tmpmp-pub-table td { padding: 8px 10px; font-size: 12px; }
    .tmpmp-dash-tabs { margin-bottom: 20px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -ms-overflow-style: none; }
    .tmpmp-dash-tabs::-webkit-scrollbar { display: none; }
    .dash-tab-btn { padding: 8px 14px; font-size: 13px; }
    .tmpmp-faq-q  { padding: 13px 16px !important; font-size: 13px !important; }
    .tmpmp-faq-a-inner { padding: 4px 16px 15px; }
    .tmpmp-faq-header { padding: 14px 16px 11px; }
}

@media (max-width: 640px) {
    .tmpmp-dash-header { flex-direction: column; align-items: flex-start; }
    .tmpmp-dash-actions { width: 100%; }
}

@media (max-width: 480px) {
    .tmpmp-dash-header { padding: 14px 16px; }
    .tmpmp-dash-header h1 { font-size: 17px; }
    .tmpmp-dash-header p  { font-size: 12.5px; }
    .tmpmp-dash-actions { gap: 8px; }
    .tmpmp-dash-actions .tmpmp-pub-btn { padding: 7px 12px; font-size: 12px; }
    .tmpmp-dash-tabs { gap: 2px; padding: 3px; border-radius: 10px; }
    .dash-tab-btn { padding: 8px 11px; font-size: 12px; gap: 5px; border-radius: 7px; }
    .tmpmp-pub-table th, .tmpmp-pub-table td { padding: 7px 8px; font-size: 11px; }
    .tmpmp-billing-active { padding: 16px; }
    .tmpmp-billing-active h3 { font-size: 14px; }
    .tmpmp-dashboard-wrap { padding: 14px 12px; }
    .tmpmp-auth-wrap { margin: 28px auto; }
}

@media (max-width: 380px) {
    .dash-tab-btn { font-size: 11px; padding: 7px 8px; gap: 3px; }
    .tmpmp-dash-actions { flex-direction: column; align-items: stretch; }
    .tmpmp-dash-actions .tmpmp-pub-btn { text-align: center; justify-content: center; }
}


/* ═══════════════════════════════════════════════════════════════════
   20. INBOX HISTORY POPUP MODAL
   Uses plugin tokens: --bg2 (card), --bg3 (surface), --border,
   --accent, --text, --text2, --text3
   Solid fallbacks ensure opacity regardless of WP theme.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Full-screen wrapper ── */
.tmpmp-history-modal {
    position: fixed;
    inset: 0;
    z-index: 99990;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease;
}
.tmpmp-history-modal.open {
    pointer-events: all;
    opacity: 1;
}

/* ── Backdrop ── */
.tmpmp-history-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
}

/* ── Modal box — ALWAYS solid, never transparent ── */
.tmpmp-history-modal-box {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 680px;
    max-height: min(88vh, 720px);
    /* Solid dark fallback first, then plugin token */
    background-color: #111422 !important;
    background-color: var(--bg2, #111422) !important;
    border: 1px solid rgba(139,92,246,.18) !important;
    border-color: var(--border, rgba(139,92,246,.18)) !important;
    border-radius: 22px;
    box-shadow:
        0 32px 80px rgba(0,0,0,.55),
        0 8px 24px rgba(0,0,0,.35),
        0 0 0 1px rgba(255,255,255,.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(.93) translateY(16px);
    transition: transform .3s cubic-bezier(.34,1.56,.64,1);
    /* Ensure box is never see-through */
    isolation: isolate;
}
.tmpmp-history-modal.open .tmpmp-history-modal-box {
    transform: scale(1) translateY(0);
}

/* Override for light theme — solid white */
.tmpmp-wrap[data-theme="light"] .tmpmp-history-modal-box,
.tmpmp-wrap[data-theme="auto"] .tmpmp-history-modal-box {
    background-color: #ffffff !important;
    background-color: var(--bg2, #ffffff) !important;
    border-color: rgba(0,0,0,.09) !important;
    border-color: var(--border, rgba(0,0,0,.09)) !important;
    box-shadow:
        0 24px 64px rgba(0,0,0,.18),
        0 6px 20px rgba(0,0,0,.1),
        0 0 0 1px rgba(0,0,0,.05);
}
@media (prefers-color-scheme: light) {
    .tmpmp-wrap[data-theme="auto"] .tmpmp-history-modal-box {
        background-color: #ffffff !important;
        background-color: var(--bg2, #ffffff);
        border-color: rgba(0,0,0,.09);
        box-shadow:
            0 24px 64px rgba(0,0,0,.18),
            0 6px 20px rgba(0,0,0,.1),
            0 0 0 1px rgba(0,0,0,.05);
    }
}

/* ── Header ── */
.tmpmp-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px 18px;
    border-bottom: 1px solid rgba(139,92,246,.12);
    border-bottom-color: var(--border, rgba(139,92,246,.12));
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(99,102,241,.07) 0%, transparent 100%);
    position: relative;
}
.tmpmp-history-header::after {
    content: '';
    position: absolute;
    bottom: 0; left: 24px; right: 24px;
    height: 1px;
    background: linear-gradient(90deg, rgba(99,102,241,.5), transparent);
    background: linear-gradient(90deg, var(--accent, rgba(99,102,241,.5)), transparent);
    opacity: .4;
}
.tmpmp-history-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.tmpmp-history-header-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(99,102,241,.15);
    background: var(--accent-gl, rgba(99,102,241,.15));
    border: 1px solid rgba(99,102,241,.25);
    color: #6366f1;
    color: var(--accent, #6366f1);
    flex-shrink: 0;
}
.tmpmp-history-header-left h3 {
    margin: 0 0 2px;
    font-size: 16px;
    font-weight: 700;
    color: #f0f2ff;
    color: var(--text, #f0f2ff);
    letter-spacing: -.02em;
}
.tmpmp-history-subtitle {
    margin: 0;
    font-size: 12px;
    color: #555e80;
    color: var(--text3, #555e80);
    font-weight: 400;
}
.tmpmp-history-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.tmpmp-history-plan-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 4px 12px;
    border-radius: 100px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    box-shadow: 0 2px 10px rgba(99,102,241,.4);
    white-space: nowrap;
}
.tmpmp-history-close {
    background: rgba(255,255,255,.06);
    background: var(--bgh, rgba(255,255,255,.06));
    border: 1px solid rgba(139,92,246,.18);
    border-color: var(--border, rgba(139,92,246,.18));
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #8b92b8;
    color: var(--text2, #8b92b8);
    flex-shrink: 0;
    transition: background .15s, color .15s, border-color .15s, transform .2s;
}
.tmpmp-history-close:hover {
    background: rgba(239,68,68,.15) !important;
    color: #ef4444 !important;
    border-color: rgba(239,68,68,.3) !important;
    transform: rotate(90deg);
}

/* Light mode close btn */
.tmpmp-wrap[data-theme="light"] .tmpmp-history-close,
.tmpmp-wrap[data-theme="auto"] .tmpmp-history-close {
    background: rgba(0,0,0,.04);
    border-color: rgba(0,0,0,.1);
    color: #5a5f7c;
}
@media (prefers-color-scheme: light) {
    .tmpmp-wrap[data-theme="auto"] .tmpmp-history-close {
        background: rgba(0,0,0,.04);
        border-color: rgba(0,0,0,.1);
        color: #5a5f7c;
    }
}

/* ── Limit info bar ── */
.tmpmp-history-limit-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 24px;
    background: rgba(99,102,241,.05);
    border-bottom: 1px solid rgba(139,92,246,.1);
    border-bottom-color: var(--border, rgba(139,92,246,.1));
    font-size: 11.5px;
    color: #555e80;
    color: var(--text3, #555e80);
    flex-shrink: 0;
    font-weight: 500;
}
.tmpmp-history-limit-bar svg {
    color: #6366f1;
    color: var(--accent, #6366f1);
    flex-shrink: 0;
    opacity: .8;
}

/* ── View panes ── */
.tmpmp-history-view-pane {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* ── Address list — 2-col grid on desktop ── */
.tmpmp-history-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-content: start;
    scrollbar-width: thin;
    scrollbar-color: rgba(139,92,246,.2) transparent;
}
.tmpmp-history-list::-webkit-scrollbar { width: 4px; }
.tmpmp-history-list::-webkit-scrollbar-track { background: transparent; }
.tmpmp-history-list::-webkit-scrollbar-thumb { background: rgba(139,92,246,.25); border-radius: 4px; }

/* ── Address row card ── */
.tmpmp-history-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1.5px solid rgba(139,92,246,.13);
    border-color: var(--border, rgba(139,92,246,.13));
    background: rgba(255,255,255,.03);
    background: var(--bg3, rgba(255,255,255,.03));
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: background .18s, border-color .18s, box-shadow .18s, transform .15s;
}
.tmpmp-history-row::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #6366f1;
    background: var(--accent, #6366f1);
    opacity: 0;
    transition: opacity .2s;
}
.tmpmp-history-row:hover {
    background: rgba(99,102,241,.08) !important;
    border-color: rgba(99,102,241,.4) !important;
    box-shadow: 0 4px 18px rgba(99,102,241,.15);
    transform: translateY(-2px);
}
.tmpmp-history-row:hover::before { opacity: 1; }

/* Light mode row */
.tmpmp-wrap[data-theme="light"] .tmpmp-history-row,
.tmpmp-wrap[data-theme="auto"] .tmpmp-history-row {
    background: rgba(0,0,0,.025);
    border-color: rgba(0,0,0,.07);
}
@media (prefers-color-scheme: light) {
    .tmpmp-wrap[data-theme="auto"] .tmpmp-history-row {
        background: rgba(0,0,0,.025);
        border-color: rgba(0,0,0,.07);
    }
}

/* ── Icon ── */
.tmpmp-history-row-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(99,102,241,.14);
    background: var(--accent-gl, rgba(99,102,241,.14));
    border: 1px solid rgba(99,102,241,.22);
    color: #818cf8;
    color: var(--accent-h, #818cf8);
    transition: background .18s;
}
.tmpmp-history-row:hover .tmpmp-history-row-icon {
    background: rgba(99,102,241,.22);
}
.tmpmp-history-row-icon.expired {
    background: rgba(239,68,68,.1);
    border-color: rgba(239,68,68,.2);
    color: #ef4444;
    opacity: .85;
}

/* ── Info ── */
.tmpmp-history-row-info { flex: 1; min-width: 0; }
.tmpmp-history-row-addr {
    font-size: 12.5px;
    font-weight: 600;
    color: #f0f2ff;
    color: var(--text, #f0f2ff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -.01em;
    margin-bottom: 5px;
}
.tmpmp-wrap[data-theme="light"] .tmpmp-history-row-addr,
.tmpmp-wrap[data-theme="auto"] .tmpmp-history-row-addr { color: #1a1d2e; }
@media (prefers-color-scheme: light) {
    .tmpmp-wrap[data-theme="auto"] .tmpmp-history-row-addr { color: #1a1d2e; }
}

.tmpmp-history-row-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.tmpmp-history-row-status {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 100px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    line-height: 1.6;
}
.tmpmp-history-row-status.active {
    background: rgba(16,185,129,.14);
    color: #10b981;
    border: 1px solid rgba(16,185,129,.28);
}
.tmpmp-history-row-status.expired {
    background: rgba(239,68,68,.1);
    color: #ef4444;
    border: 1px solid rgba(239,68,68,.22);
}
.tmpmp-history-row-meta-dot {
    width: 3px; height: 3px;
    border-radius: 50%;
    background: rgba(139,92,246,.3);
    flex-shrink: 0;
    display: inline-block;
}
.tmpmp-history-row-meta-text {
    font-size: 11px;
    color: #555e80;
    color: var(--text3, #555e80);
    font-weight: 500;
}
.tmpmp-wrap[data-theme="light"] .tmpmp-history-row-meta-text,
.tmpmp-wrap[data-theme="auto"] .tmpmp-history-row-meta-text { color: #9ea3bb; }
@media (prefers-color-scheme: light) {
    .tmpmp-wrap[data-theme="auto"] .tmpmp-history-row-meta-text { color: #9ea3bb; }
}

/* ── Delete btn ── */
.tmpmp-history-row-del {
    background: none !important;
    border: none !important;
    padding: 7px;
    cursor: pointer;
    color: #555e80;
    color: var(--text3, #555e80);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity .15s, background .15s, color .15s;
}
.tmpmp-history-row:hover .tmpmp-history-row-del { opacity: 1; }
.tmpmp-history-row-del:hover {
    background: rgba(239,68,68,.15) !important;
    color: #ef4444 !important;
}

/* ── Skeleton ── */
.tmpmp-skeleton {
    background: linear-gradient(90deg,
        rgba(139,92,246,.08) 25%,
        rgba(139,92,246,.15) 50%,
        rgba(139,92,246,.08) 75%);
    background-size: 200% 100%;
    animation: tmpmp-shimmer 1.5s infinite linear;
    border-radius: 14px;
}
.tmpmp-wrap[data-theme="light"] .tmpmp-skeleton,
.tmpmp-wrap[data-theme="auto"] .tmpmp-skeleton {
    background: linear-gradient(90deg, #e8eaf6 25%, #f3f4fd 50%, #e8eaf6 75%);
    background-size: 200% 100%;
}
@media (prefers-color-scheme: light) {
    .tmpmp-wrap[data-theme="auto"] .tmpmp-skeleton {
        background: linear-gradient(90deg, #e8eaf6 25%, #f3f4fd 50%, #e8eaf6 75%);
        background-size: 200% 100%;
    }
}
@keyframes tmpmp-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ════════════════════════════════════════════════════════════
   HISTORY FILTER BAR  (.tmpmp-hfb)
   ════════════════════════════════════════════════════════════ */
.tmpmp-wrap .tmpmp-hfb {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px 10px;
    border-bottom: 1px solid rgba(139,92,246,.1);
    border-bottom-color: var(--border, rgba(139,92,246,.1));
    flex-shrink: 0;
}

/* Search row */
.tmpmp-wrap .tmpmp-hfb-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.tmpmp-wrap .tmpmp-hfb-search-icon {
    position: absolute;
    left: 11px;
    width: 14px; height: 14px;
    color: #94a3b8;
    color: var(--text3, #94a3b8);
    pointer-events: none;
    flex-shrink: 0;
}
.tmpmp-wrap .tmpmp-hfb-search-input {
    width: 100% !important;
    padding: 8px 32px 8px 32px !important;
    border: 1.5px solid rgba(139,92,246,.18) !important;
    border-color: var(--border, rgba(139,92,246,.18)) !important;
    border-radius: 10px !important;
    background: rgba(99,102,241,.04) !important;
    color: inherit !important;
    font: 500 13px/1.4 inherit !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color .15s !important;
    -webkit-appearance: none !important;
}
.tmpmp-wrap .tmpmp-hfb-search-input:focus {
    border-color: #6366f1 !important;
    border-color: var(--accent, #6366f1) !important;
    background: rgba(99,102,241,.07) !important;
}
/* Suppress all browser AI / autofill decoration */
.tmpmp-wrap .tmpmp-hfb-search-input::-webkit-search-decoration,
.tmpmp-wrap .tmpmp-hfb-search-input::-webkit-search-cancel-button,
.tmpmp-wrap .tmpmp-hfb-search-input::-webkit-contacts-auto-fill-button,
.tmpmp-wrap .tmpmp-hfb-search-input::-webkit-credentials-auto-fill-button { display: none !important; }

.tmpmp-wrap .tmpmp-hfb-search-clear {
    position: absolute !important;
    right: 9px !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important; height: 18px !important;
    border: none !important;
    background: rgba(139,92,246,.15) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    color: #64748b !important;
    padding: 0 !important;
    box-shadow: none !important;
    transition: background .15s !important;
}
.tmpmp-wrap .tmpmp-hfb-search-clear:hover { background: rgba(239,68,68,.2) !important; color: #ef4444 !important; }

/* Tabs + Select button row */
.tmpmp-wrap .tmpmp-hfb-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.tmpmp-wrap .tmpmp-hfb-tabs {
    display: flex;
    gap: 4px;
    flex: 1;
}
.tmpmp-wrap .tmpmp-hfb-tab {
    padding: 5px 12px !important;
    border-radius: 20px !important;
    border: 1.5px solid transparent !important;
    background: transparent !important;
    color: #64748b !important;
    color: var(--text2, #64748b) !important;
    font: 500 12px/1 inherit !important;
    cursor: pointer !important;
    transition: all .15s !important;
    box-shadow: none !important;
    white-space: nowrap !important;
}
.tmpmp-wrap .tmpmp-hfb-tab:hover {
    background: rgba(99,102,241,.08) !important;
    color: #6366f1 !important;
    color: var(--accent, #6366f1) !important;
}
.tmpmp-wrap .tmpmp-hfb-tab.active {
    background: rgba(99,102,241,.12) !important;
    background: var(--accent-gl, rgba(99,102,241,.12)) !important;
    border-color: rgba(99,102,241,.3) !important;
    color: #6366f1 !important;
    color: var(--accent, #6366f1) !important;
    font-weight: 600 !important;
}

/* Select button */
.tmpmp-wrap .tmpmp-hfb-select-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 5px 11px !important;
    border: 1.5px solid rgba(139,92,246,.2) !important;
    border-color: var(--border, rgba(139,92,246,.2)) !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: #64748b !important;
    color: var(--text2, #64748b) !important;
    font: 600 11.5px/1 inherit !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    transition: all .15s !important;
    box-shadow: none !important;
}
.tmpmp-wrap .tmpmp-hfb-select-btn:hover {
    border-color: #6366f1 !important;
    border-color: var(--accent, #6366f1) !important;
    color: #6366f1 !important;
    color: var(--accent, #6366f1) !important;
    background: rgba(99,102,241,.06) !important;
}
.tmpmp-wrap .tmpmp-hfb-select-btn svg { flex-shrink: 0; pointer-events: none; }

/* ════════════════════════════════════════════════════════════
   BULK ACTION TOOLBAR  (.tmpmp-hbulk)
   ════════════════════════════════════════════════════════════ */
.tmpmp-wrap .tmpmp-hbulk {
    display: none;   /* shown via JS as flex */
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(139,92,246,.12);
    border-bottom-color: var(--border, rgba(139,92,246,.12));
    background: rgba(99,102,241,.04);
    flex-shrink: 0;
    animation: tmpmp-hbulk-in .18s ease;
}
@keyframes tmpmp-hbulk-in {
    from { opacity:0; transform: translateY(-5px); }
    to   { opacity:1; transform: translateY(0); }
}

/* Select-All label + custom checkbox */
.tmpmp-wrap .tmpmp-hbulk-selall {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    user-select: none;
    flex-shrink: 0;
}
.tmpmp-wrap .tmpmp-hbulk-selall-cb {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important; height: 0 !important;
    pointer-events: none;
}
.tmpmp-wrap .tmpmp-hbulk-checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px !important; height: 17px !important;
    border: 2px solid rgba(139,92,246,.3) !important;
    border-color: var(--border, rgba(139,92,246,.3)) !important;
    border-radius: 5px !important;
    background: transparent;
    transition: border-color .15s, background .15s;
    flex-shrink: 0;
}
.tmpmp-wrap .tmpmp-hbulk-checkmark svg { display: none; stroke: #fff; }
.tmpmp-wrap .tmpmp-hbulk-selall-cb:checked   ~ .tmpmp-hbulk-checkmark,
.tmpmp-wrap .tmpmp-hbulk-selall-cb:indeterminate ~ .tmpmp-hbulk-checkmark {
    background: #6366f1 !important; background: var(--accent,#6366f1) !important;
    border-color: #6366f1 !important; border-color: var(--accent,#6366f1) !important;
}
.tmpmp-wrap .tmpmp-hbulk-selall-cb:checked ~ .tmpmp-hbulk-checkmark svg { display: block; }
.tmpmp-wrap .tmpmp-hbulk-selall-cb:indeterminate ~ .tmpmp-hbulk-checkmark::after {
    content:''; display:block; width:7px; height:2px;
    background:#fff; border-radius:1px;
}
.tmpmp-wrap .tmpmp-hbulk-selall-lbl {
    font: 600 12px/1 inherit;
    color: #64748b; color: var(--text2, #64748b);
}

/* Count badge */
.tmpmp-wrap .tmpmp-hbulk-count {
    font: 500 12.5px/1 inherit;
    color: #475569; color: var(--text2, #475569);
    white-space: nowrap;
}

/* Action buttons wrapper */
.tmpmp-wrap .tmpmp-hbulk-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-left: auto;
}

/* Delete button */
.tmpmp-wrap .tmpmp-hbulk-del-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 6px 13px !important;
    border: 1.5px solid rgba(239,68,68,.25) !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: #94a3b8 !important;
    font: 600 12px/1 inherit !important;
    cursor: not-allowed !important;
    opacity: .5;
    transition: all .15s !important;
    white-space: nowrap !important;
    box-shadow: none !important;
}
.tmpmp-wrap .tmpmp-hbulk-del-btn.has-sel {
    color: #ef4444 !important;
    border-color: rgba(239,68,68,.4) !important;
    background: rgba(239,68,68,.05) !important;
    cursor: pointer !important;
    opacity: 1;
}
.tmpmp-wrap .tmpmp-hbulk-del-btn.has-sel:hover {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #fff !important;
}
.tmpmp-wrap .tmpmp-hbulk-del-btn svg { flex-shrink:0; pointer-events:none; }

/* Cancel button */
.tmpmp-wrap .tmpmp-hbulk-cancel-btn {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 12px !important;
    border: 1.5px solid rgba(139,92,246,.15) !important;
    border-color: var(--border, rgba(139,92,246,.15)) !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: #64748b !important; color: var(--text2, #64748b) !important;
    font: 500 12px/1 inherit !important;
    cursor: pointer !important;
    transition: all .15s !important;
    white-space: nowrap !important;
    box-shadow: none !important;
}
.tmpmp-wrap .tmpmp-hbulk-cancel-btn:hover {
    background: rgba(99,102,241,.07) !important;
    border-color: #6366f1 !important;
    color: #6366f1 !important;
}

/* ════════════════════════════════════════════════════════════
   PER-CARD CHECKBOX OVERLAY  (.tmpmp-hrow-cblabel)
   Absolutely positioned top-left; hidden until .tmpmp-sel-mode
   ════════════════════════════════════════════════════════════ */
.tmpmp-wrap .tmpmp-hrow-cblabel {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    z-index: 2;
    cursor: pointer !important;
    display: none;   /* revealed by .tmpmp-sel-mode */
    align-items: center;
    justify-content: center;
}
.tmpmp-wrap .tmpmp-history-list.tmpmp-sel-mode .tmpmp-hrow-cblabel {
    display: flex !important;
}
/* hide individual delete btn while in select mode */
.tmpmp-wrap .tmpmp-history-list.tmpmp-sel-mode .tmpmp-history-row-del {
    display: none !important;
}
/* cursor for rows in select mode */
.tmpmp-wrap .tmpmp-history-list.tmpmp-sel-mode .tmpmp-history-row {
    cursor: default;
}

/* Hidden native input */
.tmpmp-wrap .tmpmp-hrow-cb {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important; height: 0 !important;
    pointer-events: none;
}
/* Custom checkmark circle */
.tmpmp-wrap .tmpmp-hrow-cm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px !important; height: 20px !important;
    border: 2px solid rgba(255,255,255,.8) !important;
    border-radius: 50% !important;
    background: rgba(0,0,0,.25) !important;
    backdrop-filter: blur(4px);
    transition: background .15s, border-color .15s;
    flex-shrink: 0;
}
.tmpmp-wrap .tmpmp-hrow-cm svg { display: none; stroke: #fff; }
.tmpmp-wrap .tmpmp-hrow-cb:checked ~ .tmpmp-hrow-cm {
    background: #6366f1 !important;
    background: var(--accent, #6366f1) !important;
    border-color: #6366f1 !important;
    border-color: var(--accent, #6366f1) !important;
}
.tmpmp-wrap .tmpmp-hrow-cb:checked ~ .tmpmp-hrow-cm svg { display: block; }

/* Selected card highlight */
.tmpmp-wrap .tmpmp-history-row.tmpmp-hrow-sel {
    background: rgba(99,102,241,.1) !important;
    border-color: rgba(99,102,241,.45) !important;
    box-shadow: 0 0 0 2px rgba(99,102,241,.2) !important;
    transform: none !important;
}
.tmpmp-wrap .tmpmp-history-row.tmpmp-hrow-sel::before { opacity: 1 !important; }

/* ════════════════════════════════════════════════════════════
   LOCKED HISTORY CARD
   ════════════════════════════════════════════════════════════ */
.tmpmp-wrap .tmpmp-hrow-locked {
    cursor: pointer !important;
    opacity: .82;
    filter: saturate(.4);
    transition: opacity .15s, box-shadow .15s, filter .15s !important;
    position: relative;
    user-select: none;
}
.tmpmp-wrap .tmpmp-hrow-locked:hover {
    opacity: 1 !important;
    filter: saturate(.6) !important;
    box-shadow: 0 0 0 2px rgba(99,102,241,.25), 0 4px 14px rgba(99,102,241,.12) !important;
}
.tmpmp-wrap .tmpmp-hrow-blur {
    filter: blur(4px) !important;
    pointer-events: none;
    user-select: none;
}
.tmpmp-wrap .tmpmp-hrow-lock-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 9px !important;
    border-radius: 20px !important;
    background: rgba(99,102,241,.1) !important;
    border: 1.5px solid rgba(99,102,241,.25) !important;
    color: #6366f1 !important;
    color: var(--accent, #6366f1) !important;
    font: 700 11px/1 inherit !important;
    white-space: nowrap !important;
    flex-shrink: 0;
}
.tmpmp-wrap .tmpmp-hrow-lock-badge svg { flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════
   UPGRADE PROMPT MODAL (.tmpmp-hup-*)
   Appended inside .tmpmp-history-modal-box
   ════════════════════════════════════════════════════════════ */
.tmpmp-wrap .tmpmp-hup-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0,0,0,.45) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 20 !important;
    border-radius: inherit !important;
}
.tmpmp-wrap .tmpmp-hup-box {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 21 !important;
    width: min(340px, 88%) !important;
    background: #fff !important;
    background: var(--card-bg, #fff) !important;
    border-radius: 20px !important;
    padding: 32px 28px 28px !important;
    box-shadow: 0 24px 60px rgba(0,0,0,.28), 0 0 0 1px rgba(99,102,241,.15) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 12px !important;
}
.tmpmp-wrap .tmpmp-hup-icon {
    width: 60px; height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(99,102,241,.15), rgba(139,92,246,.15));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6366f1;
    color: var(--accent, #6366f1);
    flex-shrink: 0;
}
.tmpmp-wrap .tmpmp-hup-title {
    margin: 0 !important;
    font: 700 18px/1.2 inherit !important;
    color: #1e293b !important;
    color: var(--text1, #1e293b) !important;
}
.tmpmp-wrap .tmpmp-hup-desc {
    margin: 0 !important;
    font: 400 13.5px/1.6 inherit !important;
    color: #64748b !important;
    color: var(--text2, #64748b) !important;
}
.tmpmp-wrap .tmpmp-hup-desc strong { color: #6366f1; color: var(--accent, #6366f1); }
.tmpmp-wrap .tmpmp-hup-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 4px !important;
}
.tmpmp-wrap .tmpmp-hup-btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 11px 20px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: #fff !important;
    font: 700 14px/1 inherit !important;
    text-decoration: none !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 16px rgba(99,102,241,.4) !important;
    transition: box-shadow .15s, transform .15s !important;
}
.tmpmp-wrap .tmpmp-hup-btn-primary:hover {
    box-shadow: 0 6px 22px rgba(99,102,241,.55) !important;
    transform: translateY(-1px) !important;
}
.tmpmp-wrap .tmpmp-hup-btn-cancel {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 20px !important;
    border-radius: 12px !important;
    background: transparent !important;
    border: 1.5px solid rgba(139,92,246,.2) !important;
    color: #64748b !important; color: var(--text2, #64748b) !important;
    font: 500 13px/1 inherit !important;
    cursor: pointer !important;
    transition: background .15s, border-color .15s !important;
    box-shadow: none !important;
}
.tmpmp-wrap .tmpmp-hup-btn-cancel:hover {
    background: rgba(99,102,241,.06) !important;
    border-color: #6366f1 !important;
}

/* ════════════════════════════════════════════════════════════
   HISTORY PAGINATION — premium redesign
   ════════════════════════════════════════════════════════════ */
.tmpmp-wrap .tmpmp-history-pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 14px 20px !important;
    border-top: 1px solid rgba(139,92,246,.09);
    border-top-color: var(--border, rgba(139,92,246,.09));
    flex-shrink: 0;
    background: transparent;
}

/* ── Numbered page buttons ── */
.tmpmp-wrap .tmpmp-pg-num {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 34px !important;
    height: 34px !important;
    padding: 0 6px !important;
    border-radius: 9px !important;
    border: 1.5px solid transparent !important;
    background: transparent !important;
    color: #64748b !important;
    color: var(--text2, #64748b) !important;
    font: 500 13px/1 inherit !important;
    cursor: pointer !important;
    transition: background .15s, border-color .15s, color .15s, transform .1s !important;
    box-shadow: none !important;
}
.tmpmp-wrap .tmpmp-pg-num:hover:not(.current) {
    background: rgba(99,102,241,.1) !important;
    border-color: rgba(99,102,241,.25) !important;
    color: #6366f1 !important;
    color: var(--accent, #6366f1) !important;
    transform: translateY(-1px) !important;
}
.tmpmp-wrap .tmpmp-pg-num.current {
    background: #6366f1 !important;
    background: var(--accent, #6366f1) !important;
    border-color: #6366f1 !important;
    border-color: var(--accent, #6366f1) !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: 0 3px 10px rgba(99,102,241,.35) !important;
    cursor: default !important;
}

/* ── Prev / Next chevron buttons ── */
.tmpmp-wrap .tmpmp-pg-nav {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 9px !important;
    border: 1.5px solid rgba(139,92,246,.18) !important;
    border-color: var(--border, rgba(139,92,246,.18)) !important;
    background: transparent !important;
    color: #64748b !important;
    color: var(--text2, #64748b) !important;
    cursor: pointer !important;
    transition: background .15s, border-color .15s, color .15s, transform .1s, opacity .15s !important;
    box-shadow: none !important;
    flex-shrink: 0;
}
.tmpmp-wrap .tmpmp-pg-nav:hover:not([disabled]) {
    background: rgba(99,102,241,.1) !important;
    border-color: #6366f1 !important;
    border-color: var(--accent, #6366f1) !important;
    color: #6366f1 !important;
    color: var(--accent, #6366f1) !important;
    transform: translateY(-1px) !important;
}
.tmpmp-wrap .tmpmp-pg-nav[disabled] {
    opacity: .3 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}
.tmpmp-wrap .tmpmp-pg-nav svg { display: block; pointer-events: none; }

/* ── Ellipsis dots ── */
.tmpmp-wrap .tmpmp-pg-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 34px;
    color: #94a3b8;
    color: var(--text3, #94a3b8);
    font-size: 14px;
    letter-spacing: 1px;
    user-select: none;
}


/* ── Sub-nav (Back + breadcrumb) ── */
.tmpmp-history-subnav {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(139,92,246,.1);
    border-bottom-color: var(--border, rgba(139,92,246,.1));
    flex-shrink: 0;
    background: rgba(99,102,241,.03);
}
.tmpmp-history-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(99,102,241,.1) !important;
    border: 1px solid rgba(99,102,241,.22) !important;
    color: #818cf8 !important;
    color: var(--accent-h, #818cf8) !important;
    font-size: 12.5px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 9px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .15s, border-color .15s;
}
.tmpmp-history-back-btn:hover {
    background: rgba(99,102,241,.18) !important;
    border-color: rgba(99,102,241,.4) !important;
}
.tmpmp-history-email-addr {
    font-size: 12px;
    font-weight: 500;
    color: #555e80;
    color: var(--text3, #555e80);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Email rows ── */
.tmpmp-history-email-list {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(139,92,246,.2) transparent;
}
.tmpmp-history-email-list::-webkit-scrollbar { width: 4px; }
.tmpmp-history-email-list::-webkit-scrollbar-track { background: transparent; }
.tmpmp-history-email-list::-webkit-scrollbar-thumb { background: rgba(139,92,246,.25); border-radius: 4px; }

.tmpmp-history-email-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 16px;
    border-radius: 13px;
    border: 1.5px solid rgba(139,92,246,.13);
    border-color: var(--border, rgba(139,92,246,.13));
    background: rgba(255,255,255,.03);
    background: var(--bg3, rgba(255,255,255,.03));
    cursor: pointer;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.tmpmp-history-email-row:hover {
    background: rgba(99,102,241,.08) !important;
    border-color: rgba(99,102,241,.4) !important;
    box-shadow: 0 3px 12px rgba(99,102,241,.12);
}
.tmpmp-history-email-row.unread {
    border-color: rgba(99,102,241,.35);
    background: rgba(99,102,241,.05);
}
.tmpmp-history-email-row.unread .tmpmp-history-email-subject {
    font-weight: 700;
    color: #f0f2ff;
    color: var(--text, #f0f2ff);
}
.tmpmp-history-email-row-body { flex: 1; min-width: 0; }
.tmpmp-history-email-sender {
    font-size: 12px;
    font-weight: 600;
    color: #8b92b8;
    color: var(--text2, #8b92b8);
    margin-bottom: 3px;
}
.tmpmp-history-email-subject {
    font-size: 13px;
    color: #f0f2ff;
    color: var(--text, #f0f2ff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tmpmp-history-email-time {
    font-size: 11px;
    color: #555e80;
    color: var(--text3, #555e80);
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Light mode email rows */
.tmpmp-wrap[data-theme="light"] .tmpmp-history-email-row,
.tmpmp-wrap[data-theme="auto"] .tmpmp-history-email-row {
    background: rgba(0,0,0,.025);
    border-color: rgba(0,0,0,.07);
}
.tmpmp-wrap[data-theme="light"] .tmpmp-history-email-subject,
.tmpmp-wrap[data-theme="auto"] .tmpmp-history-email-subject { color: #1a1d2e; }
.tmpmp-wrap[data-theme="light"] .tmpmp-history-email-sender,
.tmpmp-wrap[data-theme="auto"] .tmpmp-history-email-sender { color: #5a5f7c; }
@media (prefers-color-scheme: light) {
    .tmpmp-wrap[data-theme="auto"] .tmpmp-history-email-row { background: rgba(0,0,0,.025); border-color: rgba(0,0,0,.07); }
    .tmpmp-wrap[data-theme="auto"] .tmpmp-history-email-subject { color: #1a1d2e; }
    .tmpmp-wrap[data-theme="auto"] .tmpmp-history-email-sender { color: #5a5f7c; }
}

/* ── Body viewer ── */
.tmpmp-history-body-meta {
    padding: 12px 20px;
    font-size: 12px;
    color: #8b92b8;
    color: var(--text2, #8b92b8);
    border-bottom: 1px solid rgba(139,92,246,.1);
    border-bottom-color: var(--border, rgba(139,92,246,.1));
    line-height: 1.8;
    flex-shrink: 0;
}
.tmpmp-history-body-tabs {
    display: flex;
    gap: 4px;
    padding: 10px 16px 0;
    border-bottom: 1px solid rgba(139,92,246,.1);
    border-bottom-color: var(--border, rgba(139,92,246,.1));
    flex-shrink: 0;
}
.tmpmp-history-body-content {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px;
    scrollbar-width: thin;
    scrollbar-color: rgba(139,92,246,.2) transparent;
}
.tmpmp-history-body-content::-webkit-scrollbar { width: 4px; }
.tmpmp-history-body-content::-webkit-scrollbar-track { background: transparent; }
.tmpmp-history-body-content::-webkit-scrollbar-thumb { background: rgba(139,92,246,.25); border-radius: 4px; }
.tmpmp-history-body-content .tmpmp-tab-content { display: none; }
.tmpmp-history-body-content .tmpmp-tab-content.active { display: block; }

/* ── Empty state ── */
.tmpmp-history-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 52px 24px;
    text-align: center;
    color: #555e80;
    color: var(--text3, #555e80);
    font-size: 13px;
    line-height: 1.6;
    flex: 1;
}
.tmpmp-history-empty p { margin: 0; max-width: 240px; }
.tmpmp-history-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    border-radius: 20px;
    background: rgba(99,102,241,.08);
    border: 1px solid rgba(99,102,241,.14);
}

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */

/* Tablet — single-column list */
@media (max-width: 640px) {
    .tmpmp-history-modal { padding: 12px; }
    .tmpmp-history-modal-box {
        max-width: 100%;
        max-height: min(92vh, 100%);
        border-radius: 18px;
    }
    .tmpmp-history-list {
        grid-template-columns: 1fr;
        padding: 12px;
        gap: 8px;
    }
    .tmpmp-history-header { padding: 18px 18px 14px; }
    .tmpmp-history-header-left h3 { font-size: 15px; }
    .tmpmp-history-plan-badge { display: none; }
}

/* Mobile — bottom sheet */
@media (max-width: 480px) {
    .tmpmp-history-modal {
        padding: 0;
        align-items: flex-end;
    }
    .tmpmp-history-modal-box {
        max-width: 100%;
        max-height: 93vh;
        border-radius: 22px 22px 0 0;
        transform: translateY(40px);
    }
    .tmpmp-history-modal.open .tmpmp-history-modal-box {
        transform: translateY(0);
    }
    /* Drag handle */
    .tmpmp-history-header::before {
        content: '';
        display: block;
        width: 38px;
        height: 4px;
        border-radius: 100px;
        background: rgba(139,92,246,.3);
        margin: 0 auto 14px;
    }
    .tmpmp-history-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 8px 16px 14px;
    }
    .tmpmp-history-header-left { gap: 12px; }
    .tmpmp-history-header-right { justify-content: flex-end; }
    .tmpmp-history-header-icon { width: 36px; height: 36px; border-radius: 10px; }
    .tmpmp-history-limit-bar { padding: 8px 16px; }
    .tmpmp-history-subnav { padding: 10px 14px; }
}