:root{--bg:#07101c;--panel:#0d1828;--line:#23354f;--text:#f5f8fc;--muted:#99aac1;--green:#54e3b8;--blue:#62a7ff}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 10% 5%,rgba(84,227,184,.09),transparent 30%),var(--bg);color:var(--text);font:15px system-ui,-apple-system,Segoe UI,sans-serif;min-height:100vh}.shell{max-width:1120px;margin:auto;padding:24px}header{display:flex;justify-content:space-between;align-items:center;padding:8px 0 28px}.brand{font-weight:900;letter-spacing:.7px}.brand>span{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--green),var(--blue));color:#06131b;margin-right:10px}.brand b{color:#91a4bd}.state{font-size:13px;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:9px 12px}.grid{display:grid;grid-template-columns:1.1fr .9fr;gap:22px}.card{background:linear-gradient(180deg,#101c2e,#0b1524);border:1px solid var(--line);border-radius:22px;box-shadow:0 20px 60px rgba(0,0,0,.3)}.main{padding:30px}.side{padding:25px}.eyebrow{color:var(--green);font-weight:900;font-size:12px;letter-spacing:1.5px}h1{font-size:clamp(32px,5vw,52px);line-height:1.03;margin:8px 0 12px}h2{font-size:27px}.lead,small{color:var(--muted)}.steps{display:flex;gap:8px;margin:28px 0}.steps i{height:5px;background:#1c2b43;border-radius:99px;flex:1}.steps i.on{background:linear-gradient(90deg,var(--green),var(--blue))}label{display:block;font-weight:800;font-size:13px;margin-bottom:8px}input{width:100%;padding:15px 16px;border:1px solid #2c405e;border-radius:13px;background:#081321;color:white;outline:none}input:focus{border-color:var(--blue)}button{border:0;border-radius:13px;padding:14px 18px;background:linear-gradient(135deg,var(--green),#55cfff);font-weight:900;color:#06131b;cursor:pointer}.secondary{background:#14223a;color:#e9eef7;border:1px solid #2b3d59}.row{display:grid;grid-template-columns:1fr auto;gap:10px}.actions{display:flex;gap:10px;margin-top:12px}.head{display:flex;justify-content:space-between;align-items:center;gap:12px}.service{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);background:#0a1422;border-radius:15px;padding:15px;margin-top:12px}.service b,.service small{display:block}.service button{padding:11px 13px}.codebox{text-align:center;border:1px solid rgba(84,227,184,.3);background:rgba(84,227,184,.06);border-radius:17px;padding:22px;margin-top:18px}.codebox em{display:inline-block;color:var(--green);font-style:normal;font-size:11px;font-weight:900;border:1px solid rgba(84,227,184,.3);border-radius:99px;padding:5px 8px}.codebox small,.codebox strong{display:block}.codebox strong{font-size:38px;letter-spacing:7px;margin:8px 0}.msg{margin-top:16px;border:1px solid #36516e;border-radius:12px;background:#0a1728;padding:12px}.msg.err{border-color:#723440;background:#291219;color:#ffc4ca}.side ul{list-style:none;padding:0}.side li{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.06);color:#cbd7e7}.domain{margin-top:20px;border:1px solid var(--line);border-radius:13px;padding:13px;text-align:center;color:#b9c7d8;font-weight:850}@media(max-width:820px){.grid{grid-template-columns:1fr}.side{order:-1}}@media(max-width:540px){.shell{padding:15px}.main,.side{padding:20px}.state{display:none}.row{grid-template-columns:1fr}.actions{flex-direction:column}.service{align-items:stretch;flex-direction:column}.service button{width:100%}}
.maintenance-view {
    text-align: center;
    padding: 32px 18px;
}

.maintenance-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    border-radius: 18px;

    background: rgba(255, 200, 87, .08);
    border: 1px solid rgba(255, 200, 87, .35);

    color: #ffc857;
    font-size: 32px;
    font-weight: 900;
}

.maintenance-view h2 {
    margin-bottom: 12px;
}

.maintenance-view p {
    max-width: 520px;
    margin: 0 auto 10px;

    color: #dce7f5;
    font-size: 16px;
    line-height: 1.55;
}

.message-card {

    background:#0d1b2a;

    border:1px solid #243b53;

    border-radius:14px;

    padding:15px;

    margin-bottom:12px;

    display:flex;

    flex-direction:column;

    gap:8px;

}


.message-card b {

    color:#55e6c1;

}

.message-card {

    background: #0b1728;

    border: 1px solid #243b53;

    border-radius: 14px;

    padding: 16px;

    margin-bottom: 12px;

}


.mail-header b {

    color: #55e6c1;

    font-size: 15px;

}


.mail-subject {

    display:flex;

    flex-direction:column;

    margin-top:12px;

}


.mail-subject span {

    font-size:12px;

    opacity:.7;

}


.mail-subject strong {

    font-size:18px;

    margin-top:4px;

}


.mail-date {

    margin-top:12px;

    font-size:12px;

    opacity:.7;

}

.messages-header {

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}


.messages-header h2 {

    margin-bottom:4px;

}


.messages-header small {

    opacity:.7;

}



.message-card {

    background:#0b1728;

    border:1px solid #243b53;

    border-radius:18px;

    padding:18px;

    margin-bottom:14px;

    transition:.2s;

}


.message-card:hover {

    transform:translateY(-2px);

    border-color:#55e6c1;

}



.mail-top {

    display:flex;

    align-items:center;

    gap:8px;

    color:#55e6c1;

}



.mail-icon {

    font-size:18px;

}



.mail-title {

    font-size:20px;

    font-weight:700;

    margin-top:14px;

}



.mail-date {

    margin-top:12px;

    font-size:12px;

    opacity:.7;

}



.mail-open {

    margin-top:15px;

    width:100%;

}

.empty-mail {

    text-align:center;

    padding:40px;

    opacity:.8;

}

.mail-account {

    background:#0b1728;

    border:1px solid #243b53;

    border-radius:18px;

    padding:18px;

    margin-bottom:12px;

}



.mail-account span {

    display:block;

    font-size:12px;

    opacity:.7;

    margin-bottom:5px;

}



.mail-service-title b {

    color:#55e6c1;

    font-size:18px;

}



.mail-email {

    margin-top:15px;

}



.mail-email strong {

    display:block;

    margin-top:5px;

    font-size:15px;

}


.mail-count {

    display:inline-flex;

    align-items:center;

    padding:6px 12px;

    border-radius:20px;

    background:#163047;

    color:#55e6c1;

    font-size:12px;

    margin-top:15px;

}

.message-detail {

    background:#0b1728;

    border:1px solid #243b53;

    border-radius:18px;

    padding:20px;

}


.detail-header {

    display:flex;

    flex-direction:column;

    gap:8px;

    color:#55e6c1;

}


.detail-subject {

    margin-top:20px;

}


.detail-subject small {

    opacity:.7;

}


.detail-body {

    margin-top:20px;

    padding:15px;

    border-radius:12px;

    background:#07111f;

    white-space:pre-wrap;

    line-height:1.5;

}


#backMessages {

    margin-top:20px;

}

.code-box {

    margin-top:20px;

    padding:20px;

    border-radius:18px;

    background:#102a43;

    border:1px solid #55e6c1;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;

}


.code-box span {

    color:#55e6c1;

    font-size:14px;

}


.code-box strong {

    font-size:32px;

    letter-spacing:4px;

}


#copyDetectedCode {

    width:100%;

}

.mail-type strong {

    display:block;

    margin-top:5px;

    color:#55e6c1;

    text-transform:capitalize;

}

.service-category {

    display:inline-flex;

    align-items:center;

    padding:6px 12px;

    margin-top:6px;

    border-radius:20px;

    background:#163047;

    color:#55e6c1;

    font-size:13px;

    font-weight:600;

}

.mail-platform {
    margin-bottom: 16px;
}

.mail-platform span,
.mail-type span,
.mail-email span {
    display: block;
    font-size: 12px;
    opacity: .7;
    margin-bottom: 5px;
}

.mail-platform strong {
    display: block;
    font-size: 18px;
    color: #55e6c1;
}

.mail-type {
    margin-bottom: 16px;
}

.mail-type strong {
    display: block;
    color: #55e6c1;
}

.mail-email {
    margin-bottom: 15px;
}

.mail-email strong {
    display: block;
    margin-top: 5px;
}

.detail-header {

    display:flex;

    flex-direction:column;

    gap:8px;

}


.detail-header span {

    color:#55e6c1;

    font-size:14px;

}


.detail-header b {

    color:#55e6c1;

    font-size:17px;

}


.detail-subject {

    margin-top:20px;

}


.detail-subject small {

    display:block;

    opacity:.7;

    margin-bottom:6px;

}


.detail-subject h2 {

    margin:0;

    line-height:1.3;

}


.detail-date {

    margin-top:12px;

    font-size:13px;

    opacity:.75;

}


.code-box {

    margin-top:20px;

    padding:20px;

    border:1px solid #55e6c1;

    border-radius:18px;

    background:#102a43;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;

}


.code-box span {

    color:#55e6c1;

    font-size:14px;

}


.code-box strong {

    font-size:32px;

    letter-spacing:4px;

}


.code-box button {

    width:100%;

}


.code-notice {

    margin-top:15px;

    padding:12px 14px;

    border-radius:12px;

    background:#0b1728;

    border:1px solid #243b53;

    font-size:12px;

    opacity:.75;

    text-align:center;

}


.mail-body {

    margin-top:20px;

    padding:18px;

    border-radius:14px;

    background:#07111f;

    white-space:pre-wrap;

    line-height:1.55;

}


#backMessages {

    margin-top:20px;

}

.empty-message {

    margin-top:15px;

    padding:16px;

    border-radius:14px;

    background:#0b1728;

    border:1px solid #243b53;

    color:#9fb3c8;

    text-align:center;

    font-size:14px;

}

.empty-message {

    margin-top:20px;

    padding:25px 18px;

    border-radius:18px;

    background:#0b1728;

    border:1px solid #243b53;

    text-align:center;

}



.empty-icon {

    font-size:40px;

    margin-bottom:12px;

}



.empty-message h3 {

    margin:8px 0;

    color:#55e6c1;

}



.empty-message p {

    margin:12px 0;

    color:#d7e3f4;

    font-size:14px;

}



.empty-message small {

    display:block;

    opacity:.7;

    margin-bottom:18px;

}



.mail-secondary {

    margin-top:12px;

    width:100%;

    background:transparent;

    border:1px solid #243b53;

}

.loading-message {

    animation:
        fadeIn .25s ease;

}



.loading-icon {

    font-size:42px;

    margin-bottom:12px;

}



.loading-spinner {

    display:flex;

    justify-content:center;

    gap:6px;

    margin-top:18px;

}



.loading-spinner span {

    width:8px;

    height:8px;

    border-radius:50%;

    background:#55e6c1;

    animation:
        loadingDots 1.2s infinite;

}



.loading-spinner span:nth-child(2) {

    animation-delay:.2s;

}



.loading-spinner span:nth-child(3) {

    animation-delay:.4s;

}



@keyframes loadingDots {


    0%,
    80%,
    100% {

        transform:scale(.5);

        opacity:.4;

    }


    40% {

        transform:scale(1);

        opacity:1;

    }

}



@keyframes fadeIn {


    from {

        opacity:0;

    }


    to {

        opacity:1;

    }

}