*{box-sizing:border-box}

body{
    margin:0;
    background:#071426;
    color:#eaf2ff;
    font:14px/1.35 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

header{
    height:40px;
    padding:0 3%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid #1b395a;
}

.brand{
    font-weight:900;
    font-size:17px;
    letter-spacing:.2px;
}

.brand span{
    color:#70b7ff;
}

nav{
    display:flex;
    gap:14px;
}

a{
    color:#9dceff;
    text-decoration:none;
}

a:hover{
    text-decoration:underline;
}

main{
    max-width:1000px;
    margin:3px auto;
    padding:0 8px;
}

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

.card{
    background:#0b1e36;
    border:1px solid #1b395a;
    border-radius:9px;
    padding:11px 14px;
    box-shadow:0 5px 15px rgba(0,0,0,.22);
}

h1{
    font-size:20px;
    line-height:1.15;
    margin:0 0 2px;
}

h2{
    font-size:16px;
    margin:0 0 3px;
}

.muted{
    color:#91a7c0;
    margin:0 0 2px;
}

label{
    display:block;
    font-weight:750;
    margin:2px 0 0px;
}

input,textarea,select{
    width:100%;
    background:#071426;
    color:#eef7ff;
    border:1px solid #294968;
    border-radius:6px;
    padding:5px 7px;
    font:inherit;
}

input:focus,textarea:focus,select:focus{
    border-color:#4b9bea;
    box-shadow:0 0 0 2px #2487e833;
    outline:none;
}

textarea{
    resize:vertical;
    min-height:55px;
}

form{
    margin-top:0;
}

button,.button{
    display:inline-block;
    border:0;
    border-radius:6px;
    padding:4px 8px;
    background:#2487e8;
    color:white;
    font-weight:700;
    cursor:pointer;
}

.secondary{
    background:#40556d;
}

.alert{
    padding:5px 7px;
    border-radius:6px;
    background:#4b2028;
    margin:4px 0;
}

.tablewrap{
    overflow:auto;
}

table{
    width:100%;
    border-collapse:collapse;
}

th,td{
    text-align:left;
    padding:5px 6px;
}

.badge{
    padding:3px 7px;
    border-radius:999px;
    background:#233d59;
    text-transform:capitalize;
}

.sending{
    background:#315c38;
}

.stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:5px;
    margin:4px 0;
}

.stats div{
    background:#071426;
    border:1px solid #1b395a;
    border-radius:7px;
    padding:5px 7px;
}

.progress{
    height:5px;
    background:#071426;
    border-radius:99px;
    overflow:hidden;
    margin:4px 0;
}

.progress i{
    display:block;
    height:100%;
    background:#2487e8;
}

.center{
    min-height:100vh;
    display:grid;
    place-items:center;
}

.login{
    width:min(380px,92vw);
}

@media(min-width:800px){
    form .compact-row{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:10px;
    }

    form .compact-row-3{
        display:grid;
        grid-template-columns:1fr 1fr 1fr;
        gap:10px;
    }
}

@media(max-width:800px){
    .hero,.between{
        display:block;
    }

    .stats{
        grid-template-columns:repeat(2,1fr);
    }

    main{
        margin:5px auto;
        padding:0 8px;
    }
}

.delete-form{
    margin:0;
}

.delete-button{
    margin:0;
    padding:4px 8px;
    background:#7f2632;
    font-size:11px;
}


/* Compact BCC and Message boxes */
textarea[name="bcc"],
textarea[name="message"],
textarea[name="body"] {
    min-height:26px !important;
    height:30px !important;
}


/* Compact BCC and Message boxes */
textarea[name="bcc"],
textarea[name="message"],
textarea[name="body"] {
    min-height:50px !important;
    height:50px !important;
}


/* Compact BCC and Message boxes */
textarea[name="bcc"],
textarea[name="message"],
textarea[name="body"] {
    min-height:70px !important;
    height:70px !important;
}


/* Compact BCC and Message boxes */
textarea[name="bcc"],
textarea[name="message"],
textarea[name="body"] {
    min-height:100px !important;
    height:100px !important;
}


/* Center New Campaign heading and description */
h1 {
    text-align: center;
}

h1 + .muted {
    text-align: center;
}


/* New Campaign heading */
h1 {
    text-align: center;
    font-weight: 900;
    font-size: 22px;
}

h1 {
    text-transform: capitalize;
    font-weight: 900;
}


.developer-footer{
    text-align:center;
    font-size:13px;
    font-weight:800;
    color:#9dceff;
    padding:6px 10px;
    margin:4px auto 0;
}


/* Developer footer aligned with dashboard */
.developer-footer{
    max-width:600px;
    width:calc(100% - 16px);
    margin:4px auto 0;
    padding:5px 8px;
    text-align:center;
    font-size:13px;
    font-weight:800;
    color:#9dceff;
}


/* Developer information in header */
header nav{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:nowrap;
}

.developer-info{
    color:#9dceff;
    font-size:12px;
    font-weight:800;
    white-space:nowrap;
}

@media(max-width:900px){
    .developer-info{
        font-size:11px;
    }
}

@media(max-width:700px){
    .developer-info{
        display:none;
    }
}


/* Center developer information in the header */
header{
    position:relative;
}

header .developer-info{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    text-align:center;
    white-space:nowrap;
    font-size:13px;
    font-weight:900;
    color:#9dceff;
}

@media(max-width:700px){
    header .developer-info{
        display:none;
    }
}


/* Keep Dashboard and Logout together on the right */
header nav{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:14px;
    margin-left:auto;
}

header .developer-info{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    text-align:center;
    white-space:nowrap;
    font-size:13px;
    font-weight:900;
}

@media(max-width:700px){
    header .developer-info{
        display:none;
    }
}


/* FINAL DASHBOARD HEADER LAYOUT */
header{
    position:relative;
}

header nav{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:14px;
    margin-left:auto;
}

header .developer-info{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    white-space:nowrap;
    text-align:center;
    font-size:13px;
    font-weight:900;
    color:#9dceff;
}

header .dashboard-link{
    font-weight:800;
}

@media(max-width:900px){
    header .developer-info{
        font-size:11px;
    }
}

@media(max-width:700px){
    header .developer-info{
        display:none;
    }
}


/* Premium gold developer information */
header .developer-info{
    color:#F5C451 !important;
    font-weight:900;
}


/* Prominent Create Campaign button */
a.button[href="create_campaign.php"]{
    background:#D62828 !important;
    color:#FFFFFF !important;
    font-size:15px;
    font-weight:900;
    padding:9px 16px;
    border-radius:7px;
    box-shadow:0 3px 8px rgba(0,0,0,.25);
}

a.button[href="create_campaign.php"]:hover{
    background:#B71C1C !important;
    text-decoration:none;
}


/* Submit Create Campaign button */
form button[type="submit"]{
    background:#D62828 !important;
    color:#FFFFFF !important;
    font-size:17px !important;
    font-weight:900 !important;
    padding:11px 22px !important;
    min-height:46px;
    border-radius:8px;
    box-shadow:0 4px 10px rgba(0,0,0,.30);
}

form button[type="submit"]:hover{
    background:#B71C1C !important;
}


/* Large centered Sending Emails animation */
.sending-animation{
    text-align:center;
    margin:10px auto 12px;
    padding:14px 10px;
}

.mail-icon{
    font-size:64px;
    line-height:1;
    display:inline-block;
    animation:mailFloat 1.4s ease-in-out infinite;
    filter:drop-shadow(0 5px 10px rgba(0,0,0,.3));
}

.sending-title{
    margin-top:7px;
    font-size:22px;
    font-weight:900;
    letter-spacing:.2px;
}

.sending-subtitle{
    margin-top:3px;
    font-size:13px;
    font-weight:600;
    opacity:.75;
}

.dots::after{
    content:"";
    display:inline-block;
    width:24px;
    text-align:left;
    animation:dots 1.4s steps(4,end) infinite;
}

@keyframes mailFloat{
    0%,100%{
        transform:translateY(0) rotate(0deg);
    }
    50%{
        transform:translateY(-9px) rotate(-4deg);
    }
}

@keyframes dots{
    0%{content:"";}
    25%{content:".";}
    50%{content:"..";}
    75%,100%{content:"...";}
}


/* Continuous flying email animation */
.flying-envelopes{
    position:relative;
    width:100%;
    height:0;
    z-index:5;
    pointer-events:none;
}

.flying-envelopes span{
    position:absolute;
    left:-80px;
    top:0;
    font-size:30px;
    color:#4db8ff;
    text-shadow:0 0 10px #1687f7, 0 0 20px #1687f7;
    opacity:0;
    animation:flyEnvelope 7s linear infinite;
}

.flying-envelopes span:nth-child(1){top:10px;animation-delay:0s;font-size:28px}
.flying-envelopes span:nth-child(2){top:35px;animation-delay:.6s;font-size:22px}
.flying-envelopes span:nth-child(3){top:65px;animation-delay:1.2s;font-size:34px}
.flying-envelopes span:nth-child(4){top:95px;animation-delay:1.8s;font-size:24px}
.flying-envelopes span:nth-child(5){top:125px;animation-delay:2.4s;font-size:30px}
.flying-envelopes span:nth-child(6){top:155px;animation-delay:3s;font-size:20px}
.flying-envelopes span:nth-child(7){top:185px;animation-delay:3.6s;font-size:32px}
.flying-envelopes span:nth-child(8){top:215px;animation-delay:4.2s;font-size:25px}
.flying-envelopes span:nth-child(9){top:245px;animation-delay:4.8s;font-size:29px}
.flying-envelopes span:nth-child(10){top:275px;animation-delay:5.4s;font-size:21px}
.flying-envelopes span:nth-child(11){top:305px;animation-delay:6s;font-size:34px}
.flying-envelopes span:nth-child(12){top:335px;animation-delay:6.6s;font-size:25px}
.flying-envelopes span:nth-child(13){top:365px;animation-delay:2.1s;font-size:30px}
.flying-envelopes span:nth-child(14){top:395px;animation-delay:4.1s;font-size:23px}
.flying-envelopes span:nth-child(15){top:425px;animation-delay:1.5s;font-size:32px}
.flying-envelopes span:nth-child(16){top:455px;animation-delay:5.1s;font-size:26px}

@keyframes flyEnvelope{
    0%{
        left:-80px;
        transform:translateY(0) rotate(-8deg) scale(.7);
        opacity:0;
    }
    10%{
        opacity:.9;
    }
    50%{
        transform:translateY(-25px) rotate(8deg) scale(1);
        opacity:1;
    }
    90%{
        opacity:.8;
    }
    100%{
        left:calc(100% + 80px);
        transform:translateY(20px) rotate(-5deg) scale(.75);
        opacity:0;
    }
}

.sending-animation{
    position:relative;
    z-index:2;
}

/* LARGE PREMIUM HEADER */
header{
    min-height:78px !important;
    padding:0 3% !important;
}

.brand{
    font-size:24px !important;
    font-weight:900 !important;
}

header nav{
    gap:20px !important;
}

header nav a{
    font-size:16px !important;
    font-weight:800 !important;
}

header .developer-info{
    font-size:16px !important;
    font-weight:900 !important;
    color:#F5C451 !important;
}


/* Developer information - large */
header .developer-info{
    font-size:20px !important;
    font-weight:900 !important;
    color:#F5C451 !important;
}


/* Developer information - large */
header .developer-info{
    font-size:24px !important;
    font-weight:1000 !important;
    color:#F5C451 !important;
}