*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Inter, Arial, sans-serif;
}

body{
    min-height:100vh;
    background:#020817;
    color:#e5e7eb;
}

.login-page{
    display:grid;
    place-items:center;
    padding:32px;
    overflow:hidden;
    background:
        radial-gradient(circle at 12% 12%, rgba(37,99,235,.22), transparent 32%),
        radial-gradient(circle at 88% 88%, rgba(14,165,233,.1), transparent 28%),
        #020617;
}

.login-page::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    opacity:.22;
    background-image:linear-gradient(rgba(148,163,184,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,.08) 1px, transparent 1px);
    background-size:52px 52px;
    mask-image:linear-gradient(to bottom, #000, transparent 85%);
}

.login-shell{
    width:100%;
    max-width:960px;
    min-height:590px;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    position:relative;
    z-index:1;
    overflow:hidden;
    border:1px solid rgba(148,163,184,.16);
    border-radius:28px;
    background:rgba(15,23,42,.88);
    box-shadow:0 32px 100px rgba(0,0,0,.52);
    backdrop-filter:blur(20px);
}

.login-visual{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    overflow:hidden;
    padding:42px;
    background:linear-gradient(145deg, #1d4ed8 0%, #1e40af 50%, #172554 100%);
}

.login-visual::before,
.login-visual::after{
    content:"";
    position:absolute;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.14);
}

.login-visual::before{
    width:430px;
    height:430px;
    right:-210px;
    top:-100px;
    box-shadow:0 0 0 65px rgba(255,255,255,.025), 0 0 0 130px rgba(255,255,255,.018);
}

.login-visual::after{
    width:220px;
    height:220px;
    left:-100px;
    bottom:-110px;
    background:rgba(56,189,248,.08);
}

.login-brand,
.mobile-brand{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:17px;
    font-weight:800;
    letter-spacing:-.02em;
}

.login-logo{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    border:1px solid rgba(255,255,255,.2);
    border-radius:13px;
    color:#fff;
    background:rgba(255,255,255,.12);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}

.login-logo svg{
    width:23px;
    height:23px;
}

.visual-copy,
.security-note,
.login-brand{
    position:relative;
    z-index:1;
}

.eyebrow{
    display:block;
    margin-bottom:12px;
    color:#93c5fd;
    font-size:11px;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.visual-copy h1{
    max-width:390px;
    margin-bottom:20px;
    color:#fff;
    font-size:48px;
    line-height:1.04;
    letter-spacing:-.05em;
}

.visual-copy p{
    max-width:370px;
    color:#bfdbfe;
    font-size:15px;
    line-height:1.7;
}

.security-note{
    display:flex;
    align-items:center;
    gap:10px;
    width:max-content;
    color:#dbeafe;
    font-size:12px;
    font-weight:700;
}

.security-note span{
    width:23px;
    height:23px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:rgba(255,255,255,.14);
}

.login-box{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:54px;
    background:rgba(15,23,42,.75);
}

.mobile-brand{
    display:none;
}

.login-heading{
    margin-bottom:30px;
}

.login-heading h2{
    margin-bottom:10px;
    color:#f8fafc;
    font-size:27px;
    line-height:1.2;
    letter-spacing:-.035em;
}

.login-heading p{
    color:#94a3b8;
    font-size:13px;
    line-height:1.6;
}

.login-form{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.input-box{
    margin:0;
}

.login-form label{
    display:block;
    margin-bottom:8px;
    color:#cbd5e1;
    font-size:12px;
    font-weight:700;
}

.input-control{
    position:relative;
}

.input-control > svg{
    position:absolute;
    left:15px;
    top:50%;
    width:18px;
    height:18px;
    color:#64748b;
    transform:translateY(-50%);
    pointer-events:none;
}

.input-box input,
.search-input,
.password-input{
    width:100%;
    padding:12px 14px;
    border-radius:12px;
    border:none;
    background:#111827;
    color:#fff;
    outline:none;
}

.login-form .input-box input{
    height:50px;
    padding:0 46px;
    border:1px solid #273449;
    border-radius:12px;
    background:#0b1220;
    color:#f8fafc;
    font-size:13px;
    transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.login-form .input-box input::placeholder{
    color:#526178;
}

.login-form .input-box input:focus{
    border-color:#3b82f6;
    background:#0d1627;
    box-shadow:0 0 0 4px rgba(59,130,246,.13);
}

.password-toggle{
    position:absolute;
    top:50%;
    right:9px;
    width:34px !important;
    height:34px;
    padding:0;
    border:0;
    border-radius:8px;
    color:#64748b;
    background:transparent;
    transform:translateY(-50%);
}

.password-toggle:hover{
    color:#cbd5e1;
    background:#172033;
}

.password-toggle svg{
    width:18px;
    height:18px;
}

.login-submit{
    width:100%;
    height:50px;
    margin-top:4px;
    padding:0 18px;
    gap:10px;
    border-radius:12px;
    color:#fff;
    background:linear-gradient(135deg, #2563eb, #3b82f6);
    box-shadow:0 10px 28px rgba(37,99,235,.24);
    transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.login-submit:hover{
    filter:brightness(1.08);
    box-shadow:0 14px 34px rgba(37,99,235,.32);
    transform:translateY(-1px);
}

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

.login-submit span{
    font-size:17px;
}

.login-error{
    display:flex;
    align-items:center;
    gap:10px;
    margin:-10px 0 20px;
    padding:11px 13px;
    border:1px solid rgba(248,113,113,.24);
    border-radius:11px;
    color:#fecaca;
    background:rgba(127,29,29,.24);
    font-size:12px;
}

.login-error span{
    width:20px;
    height:20px;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    border-radius:50%;
    color:#fff;
    background:#dc2626;
    font-weight:900;
}

.login-footer{
    margin-top:30px;
    color:#526178;
    text-align:center;
    font-size:10px;
    font-weight:700;
    letter-spacing:.04em;
}

.input-box input:focus,
.search-input:focus,
.password-input:focus{
    box-shadow:0 0 0 1px #2563eb;
}

.app-layout{
    display:flex;
    min-height:100vh;
}

.sidebar{
    width:260px;
    background:#020617;
    border-right:1px solid #0f172a;
    padding:22px;
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    display:flex;
    flex-direction:column;
    z-index:1000;
    transition:.25s ease;
}

.main-content{
    margin-left:260px;
    width:calc(100% - 260px);
}

.dashboard{
    padding:24px;
}

.brand{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:34px;
}

.brand-icon{
    width:40px;
    height:40px;
    border-radius:12px;
    background:#2563eb;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    font-size:18px;
}

.brand h2{
    font-size:19px;
}

.brand span{
    color:#94a3b8;
    font-size:12px;
}

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

.side-nav a{
    color:#94a3b8;
    text-decoration:none;
    padding:12px 13px;
    border-radius:12px;
    font-weight:700;
    font-size:13px;
    display:flex;
    align-items:center;
    gap:10px;
}

.side-nav a:hover,
.side-nav a.active{
    background:#111827;
    color:#fff;
}

.sidebar-footer{
    margin-top:auto;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.side-logout,
.clear-inbox-btn{
    display:block;
    text-align:center;
    text-decoration:none;
    padding:12px;
    border-radius:12px;
    font-weight:800;
    font-size:12px;
}

.side-logout{
    background:#111827;
    color:#fff;
}

.clear-inbox-btn{
    background:#7f1d1d;
    color:#fecaca;
}

.mobile-top{
    display:none;
}

.mobile-top small{
    display:block;
    font-size:11px;
    color:#94a3b8;
    margin-top:2px;
}

.topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
    margin-bottom:22px;
}

.topbar h1{
    font-size:32px;
    font-weight:900;
    margin-bottom:5px;
}

.subtext{
    color:#94a3b8;
    font-size:13px;
}

.actions,
.users-filter{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
    flex-wrap:wrap;
}

.users-one-line,
.inbox-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:nowrap;
    overflow-x:auto;
    margin-bottom:18px;
    padding-bottom:4px;
}

.search-input{
    max-width:420px;
}

.users-one-line .search-input{
    width:220px;
    min-width:220px;
    max-width:220px;
}

.inbox-actions .search-input{
    width:320px;
    min-width:260px;
    max-width:420px;
}

.clock{
    margin-left:auto;
    color:#94a3b8;
    font-weight:600;
    font-size:12px;
}

button,
.refresh-btn,
.copy-btn,
.logout,
.delete-btn,
.save-btn,
.view-btn{
    border:none;
    outline:none;
    text-decoration:none;
    cursor:pointer;
    border-radius:10px;
    font-weight:800;
    font-size:12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:auto;
    white-space:nowrap;
}

.login-box button{
    width:100%;
}

.refresh-btn,
.copy-btn{
    background:#2563eb;
    color:#fff;
    padding:9px 14px;
}

.copy-btn.secondary{
    background:#334155;
}

.refresh-btn:hover,
.copy-btn:hover{
    background:#1d4ed8;
}

.copy-btn.secondary:hover{
    background:#475569;
}

.logout{
    background:#111827;
    color:#fff;
    padding:9px 14px;
}

.delete-btn{
    background:#dc2626;
    color:#fff;
    padding:9px 14px;
}

.delete-btn:hover{
    background:#b91c1c;
}

.save-btn{
    min-width:60px;
    padding:8px 12px;
    background:#16a34a;
    color:#fff;
}

.save-btn:hover{
    background:#15803d;
}

.view-btn{
    width:56px;
    height:28px;
    background:#334155;
    color:#fff;
    border-radius:8px;
    font-size:11px;
}

.view-btn:hover{
    background:#475569;
}

.table-box{
    background:#0f172a;
    border:none;
    border-radius:16px;
    overflow-x:auto;
}

table{
    width:100%;
    border-collapse:collapse;
    min-width:900px;
}

th{
    background:#111827;
    color:#94a3b8;
    text-align:left;
    padding:13px 15px;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em;
    white-space:nowrap;
}

td{
    padding:14px 15px;
    border-top:1px solid #1e293b;
    font-size:12px;
    vertical-align:middle;
}

tbody tr:hover{
    background:#111827;
}

.cut-text,
.sender,
.subject,
.preview{
    max-width:230px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.sender{
    color:#93c5fd;
    font-weight:700;
}

.subject{
    color:#e5e7eb;
    font-weight:700;
}

.preview{
    color:#94a3b8;
}

.code{
    display:inline-block;
    background:#2563eb;
    color:#fff;
    padding:7px 10px;
    border-radius:9px;
    font-weight:900;
    font-size:12px;
    min-width:70px;
    text-align:center;
    cursor:pointer;
    white-space:nowrap;
}

.no-code{
    color:#64748b;
}

.time{
    color:#94a3b8;
    white-space:nowrap;
    font-size:12px;
}

.platform-badge{
    display:inline-block;
    padding:4px 8px;
    border-radius:999px;
    background:#111827;
    color:#93c5fd;
    font-weight:800;
    font-size:10px;
    white-space:nowrap;
}

.platform-badge.grok{
    background:#18181b;
    color:#fff;
}

.platform-badge.chatgpt{
    background:#064e3b;
    color:#a7f3d0;
}

.platform-badge.capcut{
    background:#0e7490;
    color:#cffafe;
}

.platform-badge.other{
    background:#334155;
    color:#e2e8f0;
}

.platform-pill{
    display:inline-flex;
    width:max-content;
    padding:6px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
    margin-bottom:8px;
}

.platform-pill.grok{
    background:#18181b;
    color:#fff;
}

.platform-pill.chatgpt{
    background:#064e3b;
    color:#a7f3d0;
}

.platform-pill.capcut{
    background:#0e7490;
    color:#cffafe;
}

.platform-pill.other{
    background:#334155;
    color:#e2e8f0;
}

.empty{
    text-align:center;
    padding:38px;
    color:#94a3b8;
}

.error{
    background:#7f1d1d;
    color:#fecaca;
    padding:13px;
    border-radius:14px;
    margin-bottom:18px;
    font-size:12px;
}

.overlay{
    display:none;
}

/* GENERATOR */

.generator-box,
.result-box{
    background:#0f172a;
    border:none;
    border-radius:16px;
    padding:18px;
    margin-bottom:20px;
}

.generator-row{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:16px;
}

.generator-field{
    width:220px;
}

.generator-field label{
    display:block;
    font-size:12px;
    color:#94a3b8;
    font-weight:700;
    margin-bottom:7px;
}

.domain-panel{
    background:#020817;
    border:none;
    border-radius:14px;
    padding:14px;
    margin-bottom:16px;
}

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

.domain-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:10px;
}

.domain-check{
    display:flex;
    align-items:center;
    gap:9px;
    background:#111827;
    padding:12px;
    border-radius:12px;
    cursor:pointer;
    font-size:12px;
    font-weight:700;
    color:#e5e7eb;
}

.domain-check input{
    width:17px;
    height:17px;
    accent-color:#2563eb;
    cursor:pointer;
}

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

.generator-actions .copy-btn,
.generator-actions .delete-btn{
    height:38px;
    padding:0 16px;
}

.result-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
}

.result-header h3{
    font-size:17px;
}

.result-header span{
    color:#94a3b8;
    font-size:12px;
    font-weight:700;
}

.generated-output{
    width:100%;
    min-height:260px;
    resize:vertical;
    background:#020817;
    border:none;
    border-radius:14px;
    color:#e5e7eb;
    padding:14px;
    outline:none;
    line-height:1.6;
    font-size:13px;
}

/* MAIL DISPLAY */

.mail-list{
    max-width:820px;
    display:flex;
    flex-direction:column;
    gap:6px;
    background:transparent;
    padding:0;
}

.mail-card{
    display:grid;
    grid-template-columns:34px minmax(0, 1fr) 70px;
    align-items:center;
    gap:10px;
    background:#0f172a;
    border:none;
    border-radius:12px;
    padding:10px 12px;
    cursor:pointer;
    transition:.15s ease;
}

.mail-card:hover{
    background:#111827;
}

.mail-avatar{
    width:30px;
    height:30px;
    min-width:30px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    font-weight:800;
    color:#fff;
    background:#334155;
}

.mail-avatar.grok{
    background:#18181b;
}

.mail-avatar.chatgpt{
    background:#10a37f;
}

.mail-avatar.capcut{
    background:#06b6d4;
}

.mail-avatar.other{
    background:#64748b;
}

.mail-content{
    min-width:0;
}

.mail-top-line{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:3px;
    min-width:0;
}

.mail-time{
    color:#64748b;
    font-size:10px;
    font-weight:700;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.mail-subject{
    font-size:13px;
    font-weight:800;
    color:#e5e7eb;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    margin-bottom:2px;
}

.mail-email{
    font-size:11px;
    color:#93c5fd;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.mail-preview{
    font-size:11px;
    color:#64748b;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.mail-code{
    display:none;
}

.mail-actions{
    display:flex;
    justify-content:flex-end;
    gap:6px;
}

.mail-actions form{
    display:flex;
}

.mail-actions .save-btn,
.mail-actions .delete-btn,
.mail-actions .view-btn{
    width:56px;
    height:28px;
    padding:0;
    border-radius:8px;
    font-size:11px;
}

/* MODAL */

.modal-backdrop{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    z-index:99999;
    padding:16px;
    align-items:center;
    justify-content:center;
}

.modal-backdrop.show{
    display:flex !important;
}

.mail-modal{
    width:100%;
    max-width:520px;
    max-height:88vh;
    overflow:auto;
    background:#0f172a;
    border:none;
    border-radius:16px;
    box-shadow:0 20px 60px rgba(0,0,0,.45);
    animation:modalPop .16s ease;
}

@keyframes modalPop{
    from{
        opacity:0;
        transform:scale(.97) translateY(6px);
    }
    to{
        opacity:1;
        transform:scale(1) translateY(0);
    }
}

.modal-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    padding:16px;
}

.modal-header h3{
    font-size:16px;
    line-height:1.35;
    word-break:break-word;
}

.modal-close{
    width:32px;
    height:32px;
    min-width:32px;
    border-radius:9px;
    background:#111827;
    color:#fff;
    font-size:20px;
}

.modal-close:hover{
    background:#1f2937;
}

.modal-body{
    padding:0 16px 14px;
}

.detail-row{
    display:grid;
    grid-template-columns:78px minmax(0, 1fr);
    gap:10px;
    padding:8px 0;
    border:none;
}

.detail-row span,
.detail-message span{
    color:#64748b;
    font-size:11px;
    font-weight:800;
}

.detail-row strong{
    font-size:12px;
    color:#e5e7eb;
    font-weight:700;
    word-break:break-word;
}

#modalCode{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:max-content;
    min-width:76px;
    padding:6px 10px;
    border-radius:8px;
    background:#2563eb;
    color:#fff;
    font-size:13px;
    font-weight:800;
    letter-spacing:.4px;
}

.detail-message{
    margin-top:10px;
}

.detail-message p{
    margin-top:8px;
    background:#020817;
    border:none;
    border-radius:12px;
    padding:12px;
    color:#cbd5e1;
    line-height:1.55;
    font-size:12px;
    white-space:pre-wrap;
    word-break:break-word;
    max-height:240px;
    overflow:auto;
}

.email-preview-section{
    margin-top:16px;
    overflow:hidden;
    border:1px solid #263449;
    border-radius:14px;
    background:#020817;
}

.email-preview-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:11px 12px;
    border-bottom:1px solid #1e293b;
    background:#0b1220;
}

.email-preview-header > div:first-child{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.email-preview-header span{
    color:#cbd5e1;
    font-size:10px;
    font-weight:800;
}

.email-preview-header small{
    color:#526178;
    font-size:8px;
}

.preview-switch{
    display:flex;
    padding:3px;
    border:1px solid #1e293b;
    border-radius:8px;
    background:#020817;
}

.preview-switch button{
    min-width:50px;
    height:26px;
    padding:0 9px;
    border-radius:6px;
    color:#64748b;
    background:transparent;
    font-size:9px;
}

.preview-switch button.active{
    color:#fff;
    background:#2563eb;
}

.preview-switch button:disabled{
    cursor:not-allowed;
    opacity:.35;
}

.email-html-preview{
    display:block;
    width:100%;
    height:430px;
    border:0;
    background:#fff;
}

.email-text-preview{
    display:none;
    max-height:360px;
    margin:0;
    overflow:auto;
    padding:16px;
    color:#cbd5e1;
    background:#020817;
    font-size:11px;
    line-height:1.65;
    white-space:pre-wrap;
    word-break:break-word;
}

.original-email-modal{
    width:min(760px,100%);
    max-width:760px;
    height:min(760px,90vh);
    max-height:90vh;
    position:relative;
    overflow:hidden;
    border:0;
    border-radius:18px;
    background:#fff;
}

.original-email-modal .email-html-preview{
    width:100%;
    height:100%;
    border:0;
    background:#fff;
}

.original-email-modal .email-text-preview{
    height:100%;
    max-height:none;
    padding:28px;
}

.original-email-close{
    position:absolute;
    top:12px;
    right:12px;
    z-index:5;
    width:38px;
    height:38px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:50%;
    color:#fff;
    background:rgba(15,23,42,.82);
    box-shadow:0 5px 18px rgba(0,0,0,.24);
    backdrop-filter:blur(8px);
}

.original-email-close:hover{
    background:#020617;
}

.modal-actions{
    display:flex;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:8px;
    padding:14px 16px 16px;
    border:none;
}

.modal-actions form{
    display:flex;
}

.modal-actions .save-btn,
.modal-actions .delete-btn,
.modal-actions .copy-btn,
.modal-actions .logout{
    height:32px;
    padding:0 12px;
    border-radius:8px;
    font-size:11px;
}

.toast{
    position:fixed;
    right:18px;
    bottom:18px;
    background:#111827;
    color:#fff;
    padding:10px 14px;
    border-radius:12px;
    font-size:12px;
    font-weight:700;
    opacity:0;
    transform:translateY(8px);
    transition:.2s ease;
    z-index:3000;
}

.toast.show{
    opacity:1;
    transform:translateY(0);
}

/* INBOX DASHBOARD */

.inbox-page{
    max-width:1180px;
}

.inbox-status{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 11px;
    border:1px solid #1e293b;
    border-radius:999px;
    color:#94a3b8;
    background:#0f172a;
    font-size:10px;
    font-weight:700;
}

.inbox-status span{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#22c55e;
    box-shadow:0 0 0 4px rgba(34,197,94,.1);
}

.inbox-summary{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    margin-bottom:16px;
}

.inbox-stat{
    display:flex;
    align-items:center;
    gap:12px;
    min-height:78px;
    padding:14px;
    overflow:hidden;
    position:relative;
    border:1px solid #1e293b;
    border-radius:14px;
    background:linear-gradient(145deg,#0f172a,#0b1220);
}

.stat-mark{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    border-radius:11px;
    color:#fff;
    background:#2563eb;
    font-size:13px;
    font-weight:900;
}

.inbox-stat.chatgpt .stat-mark{background:#10a37f}
.inbox-stat.grok .stat-mark{background:#27272a}
.inbox-stat.capcut .stat-mark{background:#0891b2}

.inbox-stat div{
    display:flex;
    flex-direction:column;
}

.inbox-stat strong{
    color:#f8fafc;
    font-size:21px;
    line-height:1.05;
}

.inbox-stat small{
    margin-top:4px;
    color:#64748b;
    font-size:10px;
    font-weight:700;
}

.inbox-toolbar{
    max-width:1000px;
    margin-bottom:16px;
    padding:10px;
    border:1px solid #1e293b;
    border-radius:13px;
    background:#0f172a;
}

.inbox-toolbar .refresh-btn{
    height:38px;
    padding:0 16px;
}

.inbox-toolbar .search-input{
    height:38px;
    border:1px solid #263449;
    background:#0b1220;
}

.mail-list{
    max-width:1000px;
    gap:8px;
}

.mail-list-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:4px 2px 8px;
}

.mail-list-heading h2{
    margin-bottom:3px;
    color:#f8fafc;
    font-size:15px;
}

.mail-list-heading p,
.mail-list-heading > span{
    color:#64748b;
    font-size:9px;
    font-weight:700;
}

.mail-card{
    grid-template-columns:42px minmax(0,1fr) auto;
    min-height:79px;
    gap:13px;
    padding:12px 14px;
    border:1px solid #182438;
    border-radius:14px;
    background:linear-gradient(145deg,#0f172a,#0c1424);
}

.mail-card:hover{
    border-color:#2c3b52;
    background:#111c2f;
    transform:translateY(-1px);
}

.mail-avatar{
    width:38px;
    height:38px;
    min-width:38px;
    border-radius:11px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}

.mail-subject{
    font-size:13px;
}

.mail-actions{
    align-items:center;
}

.mail-card-code{
    padding:7px 9px;
    border:1px solid rgba(59,130,246,.18);
    border-radius:8px;
    color:#93c5fd;
    background:rgba(37,99,235,.1);
    font-family:"SFMono-Regular",Consolas,monospace;
    font-size:10px;
    font-weight:900;
    letter-spacing:.04em;
}

.mail-actions .view-btn{
    width:auto;
    min-width:68px;
    gap:5px;
    border:1px solid #334155;
    background:#172033;
}

/* PLATFORM-SPECIFIC EMAIL MODALS */

.modal-backdrop{
    background:rgba(2,6,23,.78);
    backdrop-filter:blur(8px);
}

.mail-modal{
    max-width:610px;
    overflow:auto;
    border:1px solid #243147;
    border-radius:20px;
    background:#0f172a;
    box-shadow:0 30px 90px rgba(0,0,0,.6);
}

.platform-hero{
    display:flex;
    align-items:center;
    gap:12px;
    min-height:84px;
    padding:17px 19px;
    position:relative;
    overflow:hidden;
    border-bottom:1px solid rgba(255,255,255,.08);
    background:linear-gradient(135deg,#1e3a8a,#2563eb);
}

.platform-hero::after{
    content:"";
    position:absolute;
    width:170px;
    height:170px;
    right:-65px;
    top:-100px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;
    box-shadow:0 0 0 30px rgba(255,255,255,.025);
}

.platform-hero-logo{
    width:47px;
    height:47px;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    position:relative;
    z-index:1;
    border:1px solid rgba(255,255,255,.22);
    border-radius:13px;
    color:#fff;
    background:rgba(255,255,255,.14);
    font-size:17px;
    font-weight:900;
}

.platform-hero > div:nth-child(2){
    display:flex;
    flex-direction:column;
    position:relative;
    z-index:1;
}

.platform-hero span{
    margin-bottom:3px;
    color:rgba(255,255,255,.65);
    font-size:9px;
    font-weight:800;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.platform-hero strong{
    color:#fff;
    font-size:16px;
}

.platform-hero .modal-close{
    margin-left:auto;
    position:relative;
    z-index:2;
    background:rgba(0,0,0,.18);
}

.modal-header{
    padding:19px 20px 13px;
    border-bottom:1px solid #1e293b;
}

.modal-header h3{
    max-width:500px;
    font-size:18px;
}

.modal-body{
    padding:14px 20px;
}

.detail-row{
    padding:9px 0;
    border-bottom:1px solid rgba(30,41,59,.7);
}

.detail-message p{
    border:1px solid #1e293b;
    padding:15px;
}

.modal-actions{
    padding:13px 20px 18px;
    border-top:1px solid #1e293b;
    background:#0b1220;
}

.modal-backdrop.chatgpt .platform-hero{
    background:linear-gradient(135deg,#064e3b,#10a37f);
}

.modal-backdrop.chatgpt #modalCode{
    background:#10a37f;
    box-shadow:0 0 0 4px rgba(16,163,127,.1);
}

.modal-backdrop.chatgpt .mail-modal{border-color:rgba(16,163,127,.35)}

.modal-backdrop.grok .platform-hero{
    background:linear-gradient(135deg,#09090b,#27272a);
}

.modal-backdrop.grok .platform-hero::after{
    border-radius:20px;
    transform:rotate(35deg);
}

.modal-backdrop.grok #modalCode{
    color:#09090b;
    background:#f4f4f5;
    box-shadow:0 0 0 4px rgba(255,255,255,.08);
}

.modal-backdrop.grok .mail-modal{border-color:#3f3f46}

.modal-backdrop.capcut .platform-hero{
    background:linear-gradient(135deg,#164e63,#0891b2 55%,#06b6d4);
}

.modal-backdrop.capcut #modalCode{
    background:#0891b2;
    box-shadow:0 0 0 4px rgba(6,182,212,.1);
}

.modal-backdrop.capcut .mail-modal{border-color:rgba(6,182,212,.35)}

/* RESPONSIVE */

/* MANAGEMENT PAGES */

.management-page,
.generator-workspace + *{
    position:relative;
}

.page-kicker{
    display:block;
    margin-bottom:7px;
    color:#60a5fa;
    font-size:10px;
    font-weight:900;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.primary-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:40px;
    padding:0 16px;
    border:1px solid #3b82f6;
    border-radius:11px;
    color:#fff;
    background:linear-gradient(135deg,#2563eb,#1d4ed8);
    box-shadow:0 8px 24px rgba(37,99,235,.18);
    text-decoration:none;
    font-size:12px;
    font-weight:800;
}

.primary-link:hover{
    filter:brightness(1.08);
}

.summary-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    margin-bottom:18px;
}

.summary-card{
    display:flex;
    align-items:center;
    gap:14px;
    min-height:92px;
    padding:17px;
    border:1px solid #1e293b;
    border-radius:15px;
    background:linear-gradient(145deg,#0f172a,#0b1220);
}

.summary-icon{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    border-radius:12px;
    font-size:17px;
}

.summary-icon.blue{background:rgba(37,99,235,.16);color:#93c5fd}
.summary-icon.green{background:rgba(16,185,129,.14);color:#6ee7b7}
.summary-icon.violet{background:rgba(139,92,246,.15);color:#c4b5fd}

.summary-card div{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.summary-card strong{
    color:#f8fafc;
    font-size:24px;
    line-height:1;
}

.summary-card div span{
    color:#64748b;
    font-size:11px;
    font-weight:700;
}

.content-panel{
    overflow:hidden;
    border:1px solid #1e293b;
    border-radius:17px;
    background:#0f172a;
}

.panel-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:19px 20px;
    border-bottom:1px solid #1e293b;
}

.panel-heading h2{
    margin-bottom:4px;
    color:#f8fafc;
    font-size:16px;
}

.panel-heading p,
.domain-top small,
.generator-field small{
    display:block;
    color:#64748b;
    font-size:10px;
    line-height:1.5;
}

.select-all-box{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#94a3b8;
    font-size:11px;
    font-weight:700;
    cursor:pointer;
    white-space:nowrap;
}

.select-all-box input,
.row-check{
    width:16px;
    height:16px;
    accent-color:#2563eb;
}

.users-toolbar{
    display:grid;
    grid-template-columns:minmax(210px,1fr) 150px 150px auto auto;
    gap:9px;
    margin:0;
    padding:14px 16px;
    border-bottom:1px solid #1e293b;
    background:#0b1220;
}

.users-toolbar .search-input{
    width:100%;
    max-width:none;
    height:38px;
    padding:0 12px;
    border:1px solid #263449;
    background:#111827;
    font-size:11px;
}

.users-toolbar select.search-input{
    color:#cbd5e1;
    cursor:pointer;
}

.toolbar-btn,
.generate-btn{
    min-height:38px;
    padding:0 14px;
    border:1px solid transparent;
    border-radius:10px;
    font-size:11px;
    font-weight:800;
}

.toolbar-btn.primary,
.generate-btn{
    color:#fff;
    background:#2563eb;
}

.toolbar-btn.secondary{
    border-color:#334155;
    color:#cbd5e1;
    background:#172033;
}

.toolbar-btn.danger{
    border-color:rgba(239,68,68,.25);
    color:#fca5a5;
    background:rgba(127,29,29,.24);
}

.users-panel .table-box{
    border-radius:0;
    background:transparent;
}

.users-panel th{
    background:#0f172a;
}

.users-panel td{
    height:61px;
}

.users-panel tbody tr:hover{
    background:#111c2f;
}

.users-actions{
    display:flex;
    gap:6px;
}

.icon-action{
    min-width:54px;
    padding:7px 9px;
    border:1px solid #334155;
    border-radius:8px;
    color:#cbd5e1;
    background:#172033;
    text-align:center;
    text-decoration:none;
    font-size:10px;
    font-weight:800;
}

.icon-action:hover{background:#243147;color:#fff}
.delete-action{border-color:rgba(239,68,68,.2);color:#fca5a5;background:rgba(127,29,29,.18)}

/* GENERATOR WORKSPACE */

.generator-stats{
    display:flex;
    gap:1px;
    overflow:hidden;
    margin-bottom:18px;
    border:1px solid #1e293b;
    border-radius:14px;
    background:#1e293b;
}

.generator-stats > div{
    flex:1;
    display:flex;
    align-items:baseline;
    gap:9px;
    min-height:62px;
    padding:16px 18px;
    background:#0f172a;
}

.generator-stats strong{color:#f8fafc;font-size:19px}
.generator-stats span{color:#64748b;font-size:10px;font-weight:700}

.generator-workspace{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr);
    gap:18px;
    align-items:start;
}

.modern-generator,
.modern-result{
    margin:0;
    padding:0;
    border:1px solid #1e293b;
    border-radius:17px;
    background:#0f172a;
}

.generator-heading{
    margin-bottom:0;
}

.step-pill,
.count-pill{
    display:inline-flex;
    align-items:center;
    min-height:26px;
    padding:0 10px;
    border-radius:999px;
    color:#93c5fd !important;
    background:rgba(37,99,235,.14);
    font-size:9px !important;
    font-weight:900 !important;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.modern-generator .generator-row{
    margin:0;
    padding:18px 20px 0;
}

.modern-generator .generator-field{
    width:100%;
}

.modern-generator .generator-field label{
    color:#cbd5e1;
}

.number-control{
    position:relative;
}

.number-control > span{
    position:absolute;
    left:14px;
    top:50%;
    color:#60a5fa;
    font-size:13px;
    font-weight:900;
    transform:translateY(-50%);
}

.number-control .search-input{
    max-width:none;
    height:45px;
    padding-left:36px;
    border:1px solid #263449;
    background:#0b1220;
}

.generator-field small{
    margin-top:6px;
}

.modern-generator .domain-panel{
    margin:18px 20px;
    padding:0;
    border:1px solid #1e293b;
    background:#0b1220;
}

.modern-generator .domain-top{
    margin:0;
    padding:14px;
    border-bottom:1px solid #1e293b;
}

.domain-top strong{font-size:12px}

.modern-generator .domain-grid{
    grid-template-columns:1fr 1fr;
    padding:12px;
}

.modern-generator .domain-check{
    border:1px solid #1e293b;
    background:#111827;
    transition:border-color .15s ease,background .15s ease;
}

.modern-generator .domain-check:hover{
    border-color:#3b82f6;
    background:#14213a;
}

.modern-generator .generator-actions{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1fr;
    margin:0;
    padding:0 20px 20px;
}

.modern-generator .generator-actions button{
    width:100%;
    height:40px;
}

.generate-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    box-shadow:0 8px 22px rgba(37,99,235,.2);
}

.modern-result{
    overflow:hidden;
}

.modern-result .result-header{
    min-height:70px;
    margin:0;
    padding:15px 18px;
    border-bottom:1px solid #1e293b;
}

.result-label{
    display:block;
    margin-bottom:4px;
    color:#60a5fa !important;
    font-size:8px !important;
    font-weight:900 !important;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.output-wrap{
    margin:16px;
    overflow:hidden;
    border:1px solid #1e293b;
    border-radius:12px;
    background:#020817;
}

.output-toolbar{
    display:flex;
    justify-content:space-between;
    padding:9px 12px;
    border-bottom:1px solid #1e293b;
    color:#526178;
    font-size:9px;
    font-weight:700;
}

.modern-result .generated-output{
    min-height:330px;
    resize:none;
    border-radius:0;
    background:#020817;
    color:#bfdbfe;
    font-family:"SFMono-Regular",Consolas,monospace;
    font-size:11px;
}

.modern-result .generated-output::placeholder{color:#334155}

.result-header-actions{
    display:flex;
    align-items:center;
    gap:10px;
}

.result-select-all{
    padding-right:2px;
}

.save-generated-form{
    display:flex;
    flex-direction:column;
}

.save-generated-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 16px;
    border-bottom:1px solid #1e293b;
    background:#0b1220;
}

.save-generated-toolbar label{
    color:#94a3b8;
    font-size:10px;
    font-weight:800;
}

.save-generated-toolbar select{
    width:170px;
    height:36px;
    padding:0 11px;
    border:1px solid #334155;
    border-radius:9px;
    outline:none;
    color:#e2e8f0;
    background:#111827;
    font-size:10px;
    font-weight:700;
}

.save-generated-toolbar select:focus{
    border-color:#3b82f6;
    box-shadow:0 0 0 3px rgba(59,130,246,.1);
}

.generated-select-list{
    min-height:305px;
    max-height:420px;
    overflow-y:auto;
    padding:10px;
    scrollbar-width:thin;
    scrollbar-color:#334155 transparent;
}

.generated-email-item{
    display:grid;
    grid-template-columns:17px 30px minmax(0,1fr);
    align-items:center;
    gap:9px;
    min-height:46px;
    margin-bottom:5px;
    padding:7px 10px;
    border:1px solid #1e293b;
    border-radius:10px;
    background:#0b1220;
    cursor:pointer;
    transition:border-color .15s ease,background .15s ease;
}

.generated-email-item:hover,
.generated-email-item:has(input:checked){
    border-color:#2563eb;
    background:#101d35;
}

.generated-email-item input{
    width:16px;
    height:16px;
    accent-color:#2563eb;
}

.generated-email-avatar{
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    border-radius:8px;
    color:#93c5fd;
    background:rgba(37,99,235,.14);
    font-size:12px;
    font-weight:900;
}

.generated-email-value{
    overflow:hidden;
    color:#cbd5e1;
    font-family:"SFMono-Regular",Consolas,monospace;
    font-size:10px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.generated-empty{
    min-height:280px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:6px;
    color:#475569;
    text-align:center;
}

.generated-empty[hidden]{display:none}
.generated-empty > span{font-size:24px;filter:grayscale(1)}
.generated-empty strong{color:#94a3b8;font-size:12px}
.generated-empty small{max-width:220px;font-size:9px;line-height:1.5}

.save-generated-actions{
    display:grid;
    grid-template-columns:1fr auto auto;
    align-items:center;
    gap:8px;
    padding:12px 14px;
    border-top:1px solid #1e293b;
    background:#0b1220;
}

.save-generated-actions > span{
    color:#64748b;
    font-size:9px;
    font-weight:800;
}

.save-generated-actions button{
    height:38px;
}

.app-notice{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:16px;
    padding:12px 14px;
    border:1px solid #334155;
    border-radius:12px;
    color:#cbd5e1;
    background:#0f172a;
    font-size:11px;
    font-weight:700;
}

.app-notice > span{
    width:22px;
    height:22px;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    border-radius:50%;
    background:#334155;
    color:#fff;
}

.app-notice.success{border-color:rgba(34,197,94,.25);color:#bbf7d0;background:rgba(20,83,45,.22)}
.app-notice.success > span{background:#16a34a}
.app-notice.error{border-color:rgba(239,68,68,.25);color:#fecaca;background:rgba(127,29,29,.22)}
.app-notice.error > span{background:#dc2626}

.users-actions form{
    display:flex;
}

.users-actions .icon-action{
    height:30px;
}

@media(max-width:900px){

    .inbox-summary{
        grid-template-columns:repeat(4,minmax(150px,1fr));
        overflow-x:auto;
        padding-bottom:4px;
    }

    .summary-grid{
        grid-template-columns:repeat(3,minmax(150px,1fr));
        overflow-x:auto;
        padding-bottom:4px;
    }

    .users-toolbar{
        grid-template-columns:minmax(200px,1fr) 140px 140px auto auto;
        overflow-x:auto;
    }

    .generator-workspace{
        grid-template-columns:1fr;
    }

    .login-page{
        padding:22px;
    }

    .login-shell{
        max-width:500px;
        min-height:auto;
        grid-template-columns:1fr;
    }

    .login-visual{
        display:none;
    }

    .login-box{
        padding:44px;
    }

    .mobile-brand{
        display:flex;
        margin-bottom:44px;
        color:#f8fafc;
    }

    .mobile-brand .login-logo{
        background:#2563eb;
        border-color:#3b82f6;
    }

    .sidebar{
        width:auto;
        height:72px;
        left:12px;
        right:12px;
        top:auto;
        bottom:10px;
        padding:7px;
        transform:none;
        border:1px solid rgba(51,65,85,.9);
        border-radius:19px;
        background:rgba(2,6,23,.94);
        box-shadow:0 16px 45px rgba(0,0,0,.48);
        backdrop-filter:blur(18px);
    }

    .sidebar .brand,
    .sidebar .sidebar-footer{
        display:none;
    }

    .sidebar .side-nav{
        height:100%;
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:5px;
    }

    .sidebar .side-nav a{
        min-width:0;
        padding:6px 4px;
        flex-direction:column;
        justify-content:center;
        gap:3px;
        border-radius:13px;
        font-size:9px;
    }

    .sidebar .side-nav a span{
        font-size:18px;
        line-height:1;
    }

    .sidebar .side-nav a.active{
        color:#fff;
        background:linear-gradient(135deg,#2563eb,#1d4ed8);
        box-shadow:0 7px 18px rgba(37,99,235,.25);
    }

    .overlay,
    .overlay.show{
        display:none;
    }

    .main-content{
        margin-left:0;
        width:100%;
    }

    .mobile-top{
        display:flex;
        align-items:center;
        gap:12px;
        padding:12px 16px;
        background:rgba(2,6,23,.92);
        border-bottom:1px solid #1e293b;
        position:sticky;
        top:0;
        z-index:50;
        font-weight:800;
    }

    .mobile-brand-mark{
        width:34px;
        height:34px;
        display:grid;
        place-items:center;
        flex:0 0 auto;
        border-radius:10px;
        background:#2563eb;
        color:#fff;
        font-size:13px;
        font-weight:900;
    }

    .mobile-logout{
        width:34px;
        height:34px;
        display:grid;
        place-items:center;
        margin-left:auto;
        border:1px solid #263449;
        border-radius:10px;
        color:#94a3b8;
        background:#0f172a;
        text-decoration:none;
        font-size:14px;
        font-weight:900;
    }

    .dashboard{
        padding:16px 16px 100px;
    }

    .topbar{
        align-items:flex-start;
        flex-direction:column;
    }

    .topbar h1{
        font-size:28px;
    }

    .subtext{
        font-size:12px;
    }

    .users-one-line,
    .inbox-actions{
        flex-direction:row;
        flex-wrap:nowrap;
        overflow-x:auto;
    }

    .search-input{
        max-width:100%;
    }

    .users-one-line .search-input{
        width:190px;
        min-width:190px;
        max-width:190px;
    }

    .inbox-actions .search-input{
        width:230px;
        min-width:230px;
    }

    .clock{
        margin-left:0;
        font-size:12px;
        flex:none;
    }

    .domain-grid{
        grid-template-columns:1fr;
    }

    .generator-field{
        width:100%;
    }

    .generator-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    .generator-actions .copy-btn,
    .generator-actions .delete-btn{
        width:100%;
    }

    .mail-list{
        max-width:100%;
        gap:6px;
    }

    .mail-card{
        grid-template-columns:32px minmax(0, 1fr) 58px;
        align-items:center;
        padding:10px;
        gap:8px;
    }

    .mail-avatar{
        width:30px;
        height:30px;
        min-width:30px;
    }

    .mail-top-line{
        gap:6px;
        flex-wrap:wrap;
    }

    .mail-time{
        font-size:10px;
    }

    .mail-actions{
        justify-content:flex-end;
    }

    .mail-actions .view-btn{
        width:54px;
        height:28px;
        font-size:11px;
    }

    .detail-row{
        grid-template-columns:1fr;
        gap:4px;
    }

    .modal-actions{
        flex-direction:column;
    }

    .modal-actions form,
    .modal-actions .save-btn,
    .modal-actions .delete-btn,
    .modal-actions .copy-btn,
    .modal-actions .logout{
        width:100%;
        height:38px;
    }
}

@media(max-width:520px){

    .inbox-summary{
        grid-template-columns:1fr 1fr;
        overflow:visible;
    }

    .inbox-stat{
        min-height:70px;
    }

    .mail-card-code{
        display:none;
    }

    .platform-hero{
        min-height:74px;
        padding:14px;
    }

    .platform-hero-logo{
        width:41px;
        height:41px;
    }

    .modal-header,
    .modal-body,
    .modal-actions{
        padding-left:15px;
        padding-right:15px;
    }

    .primary-link{
        width:100%;
    }

    .summary-grid{
        grid-template-columns:1fr;
        overflow:visible;
    }

    .summary-card{
        min-height:76px;
    }

    .panel-heading{
        align-items:flex-start;
    }

    .users-toolbar{
        display:flex;
        align-items:center;
    }

    .users-toolbar > *{
        flex:0 0 auto;
    }

    .users-toolbar .search-input:first-child{
        width:210px;
    }

    .users-toolbar select.search-input{
        width:130px;
    }

    .generator-stats{
        display:grid;
        grid-template-columns:1fr;
    }

    .generator-stats > div{
        min-height:50px;
    }

    .modern-generator .domain-grid{
        grid-template-columns:1fr;
    }

    .modern-generator .generator-actions{
        grid-template-columns:1fr 1fr;
    }

    .modern-result .generated-output{
        min-height:280px;
    }

    .result-header{
        align-items:flex-start;
    }

    .result-header-actions{
        align-items:flex-end;
        flex-direction:column-reverse;
        gap:6px;
    }

    .save-generated-toolbar{
        align-items:flex-start;
        flex-direction:column;
    }

    .save-generated-toolbar select{
        width:100%;
    }

    .save-generated-actions{
        grid-template-columns:1fr 1fr;
    }

    .save-generated-actions > span{
        grid-column:1 / -1;
    }

    .save-generated-actions button{
        width:100%;
    }

    .login-page{
        display:block;
        padding:0;
        background:#0f172a;
    }

    .login-page::before{
        display:none;
    }

    .login-shell{
        min-height:100vh;
        border:0;
        border-radius:0;
        box-shadow:none;
        background:#0f172a;
    }

    .login-box{
        min-height:100vh;
        justify-content:flex-start;
        padding:30px 24px;
    }

    .mobile-brand{
        margin-bottom:68px;
    }

    .login-heading h2{
        font-size:25px;
    }

    .login-footer{
        margin-top:auto;
        padding-top:40px;
    }

    .dashboard{
        padding:12px;
    }

    .topbar h1{
        font-size:24px;
    }

    .mail-card{
        grid-template-columns:30px minmax(0, 1fr);
    }

    .mail-actions{
        grid-column:1 / -1;
        justify-content:flex-end;
        margin-top:2px;
    }

    .mail-actions .view-btn{
        width:100%;
    }

    .modal-backdrop{
        padding:10px;
        align-items:flex-end;
    }

    .mail-modal{
        max-width:100%;
        max-height:92vh;
        border-radius:16px 16px 0 0;
    }
}

#mailModal{
    display:none;
}