:root {
    --bg: #070b10;
    --panel: #0d131a;
    --panel-2: #111923;
    --panel-3: #151f2a;
    --line: #23313e;
    --text: #e8eef4;
    --muted: #8493a3;
    --accent: #63f58c;
    --accent-2: #39c9ff;
    --danger: #ff647c;
    --warning: #ffd166;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
    margin: 0;
    background:
        radial-gradient(circle at 15% 0%, rgba(57,201,255,.07), transparent 28%),
        radial-gradient(circle at 85% 10%, rgba(99,245,140,.055), transparent 25%),
        var(--bg);
    color: var(--text);
    font-family: Inter, system-ui, sans-serif;
    min-height: 100vh;
}

h1,h2,h3,h4,h5,h6,.brand-tech,.section-kicker,.step-label,.tech-label,
.btn,.nav-pill,.selection-title,.mono { font-family: "Share Tech Mono", monospace; }

.app-nav {
    background: rgba(7,11,16,.92);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 8px 35px rgba(0,0,0,.28);
    backdrop-filter: blur(14px);
}
.brand-tech {
    color: #f3f7fa !important;
    letter-spacing: .06em;
    font-size: 1.05rem;
    white-space: nowrap;
}
.brand-tech span:last-child { color: var(--accent); }
.brand-mark { color: var(--accent-2); margin-right: 7px; }
.nav-pill {
    color: #aebdca;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 7px;
    padding: 7px 10px;
    font-size: .78rem;
    transition: .18s ease;
}
.nav-pill:hover,.nav-pill-active {
    color: var(--accent);
    border-color: rgba(99,245,140,.28);
    background: rgba(99,245,140,.06);
}
.nav-pill-danger:hover { color: var(--danger); border-color: rgba(255,100,124,.28); }
.app-main { max-width: 1220px; }

.card {
    background: linear-gradient(145deg, rgba(17,25,35,.98), rgba(10,15,21,.98));
    border: 1px solid var(--line) !important;
    border-radius: 12px;
    color: var(--text);
    box-shadow: 0 14px 45px rgba(0,0,0,.18);
}
.card-header { background: rgba(255,255,255,.025); border-bottom: 1px solid var(--line); }
.text-muted,.form-text { color: var(--muted) !important; }
hr { border-color: var(--line); opacity: 1; }

.form-control,.form-select {
    color: var(--text);
    background-color: #0a1118;
    border: 1px solid #2a3947;
    border-radius: 8px;
}
.form-control:focus,.form-select:focus {
    color: var(--text);
    background-color: #0a1118;
    border-color: rgba(99,245,140,.65);
    box-shadow: 0 0 0 .2rem rgba(99,245,140,.08);
}
.form-control::placeholder { color: #566676; }
.form-select option { background: #0d131a; color: var(--text); }
.form-check-input { background-color: #0a1118; border-color: #334454; }
.form-check-input:checked { background-color: #2da95a; border-color: #2da95a; }

.btn-primary {
    --bs-btn-bg: #36bd68;
    --bs-btn-border-color: #36bd68;
    --bs-btn-hover-bg: #49d879;
    --bs-btn-hover-border-color: #49d879;
    --bs-btn-color: #041009;
    --bs-btn-hover-color: #041009;
}
.btn-secondary { --bs-btn-bg:#1b2733; --bs-btn-border-color:#2c3c4c; }
.btn-outline-light { --bs-btn-color:#aebdca; --bs-btn-border-color:#334454; }

.table {
    --bs-table-bg: #0d131a;
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--line);
    --bs-table-striped-bg: #111923;
    --bs-table-hover-bg: #151f2a;
    margin-bottom: 0;
}
.table thead th { color: #94a5b5; font-family:"Share Tech Mono",monospace; font-size:.82rem; font-weight:400; }
code { color: var(--accent); user-select: all; }

.stat-card { min-height: 130px; position:relative; overflow:hidden; }
.stat-card::after {
    content:""; position:absolute; width:80px; height:80px; right:-28px; top:-28px;
    border:1px solid rgba(99,245,140,.12); border-radius:50%;
}
.stat-card h2 { font-size:2rem; margin:5px 0 0; }
.template-preview {
    white-space: pre-wrap; background:#090f15; border:1px solid var(--line);
    padding:14px; border-radius:8px; color:#b9c6d2; max-height:300px; overflow:auto;
}
.app-alert { background:#101923; border-color:var(--line); color:#c9d5df; }

.section-kicker,.tech-label,.step-label {
    color:var(--accent);
    text-transform:uppercase;
    letter-spacing:.09em;
    font-size:.75rem;
}
.page-title { letter-spacing:.03em; }

/* Send wizard */
.send-shell { max-width: 1040px; margin: 0 auto; }
.step-label { margin-bottom:7px; }
.step-title { margin-bottom:6px; font-size:1.65rem; }
.step-subtitle { color:var(--muted); margin-bottom:22px; }
.step-panel { display:none; animation: stepIn .18s ease-out; }
.step-panel.active { display:block; }
@keyframes stepIn { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }

.selection-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
    gap:12px;
}
.selection-card {
    width:100%;
    text-align:left;
    color:var(--text);
    background:linear-gradient(145deg,#111a24,#0b1118);
    border:1px solid #293846;
    border-radius:10px;
    padding:15px;
    min-height:112px;
    cursor:pointer;
    transition:.18s ease;
    position:relative;
}
.selection-card:hover {
    transform:translateY(-2px);
    border-color:rgba(99,245,140,.55);
    box-shadow:0 10px 28px rgba(0,0,0,.22);
}
.selection-card.selected {
    border-color:var(--accent);
    box-shadow:0 0 0 1px rgba(99,245,140,.22), 0 10px 30px rgba(99,245,140,.07);
}
.status-dot {
    display:inline-block; width:8px; height:8px; border-radius:50%;
    background:var(--accent); box-shadow:0 0 10px rgba(99,245,140,.65); margin-right:8px;
}
.selection-title { font-size:1rem; letter-spacing:.02em; }
.selection-meta { color:var(--muted); font-size:.78rem; margin-top:8px; line-height:1.55; }
.selection-subject { color:#b8c7d4; font-size:.82rem; margin-top:6px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.selection-preview { color:#6f8293; font-size:.72rem; margin-top:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.delivery-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.delivery-card { min-height:108px; }
.delivery-card .selection-title { font-size:1.08rem; }
.delivery-card .selection-meta { max-width:420px; }

.recipient-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; }
.recipient-card { min-height:84px; }
.recipient-card .selection-meta { margin-top:5px; }

.compact-section { margin-top:18px; }
.collapsible {
    border:1px solid var(--line); border-radius:9px; background:#0b1219;
}
.collapsible > summary {
    cursor:pointer; list-style:none; padding:12px 14px; color:#aebdca;
    font-family:"Share Tech Mono",monospace; font-size:.82rem;
}
.collapsible > summary::-webkit-details-marker { display:none; }
.collapsible > summary::before { content:"+"; color:var(--accent); margin-right:9px; }
.collapsible[open] > summary::before { content:"−"; }
.collapsible-body { padding:0 14px 4px; border-top:1px solid var(--line); }

.send-actions { display:flex; gap:10px; justify-content:space-between; align-items:center; margin-top:22px; }
.send-button { min-width:180px; }
.back-button { color:#91a2b1; border:1px solid var(--line); background:#0b1219; }
.back-button:hover { color:#fff; border-color:#405263; }

@media (max-width: 767px) {
    .app-nav .container { align-items:flex-start; gap:12px; flex-direction:column; padding-top:12px; padding-bottom:12px; }
    .selection-grid,.recipient-grid { grid-template-columns:1fr; }
    .delivery-grid { grid-template-columns:1fr; }
    .send-actions { flex-direction:column-reverse; align-items:stretch; }
    .send-button { width:100%; }
}


/* Merged identity editor */
.identity-editor { max-width: 1060px; }
.identity-form-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}
.identity-form-grid .form-label,
.message-editor-grid .form-label { margin-bottom:5px; }
.compact-collapse { margin-left:0; margin-right:0; }
.message-editor-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}
.compact-textarea {
    min-height:190px;
    resize:vertical;
    font-family:"Share Tech Mono",monospace;
    font-size:.78rem;
    line-height:1.55;
}
.identity-management-grid { grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.identity-management-card { min-height:150px; }
.identity-card-actions { margin-top:12px; display:flex; justify-content:flex-end; }
.identity-card-actions .btn { font-size:.72rem; }

@media (max-width: 767px) {
    .identity-form-grid,
    .message-editor-grid { grid-template-columns:1fr; }
    .compact-textarea { min-height:150px; }
}

.status-dot.status-not-ready {
    background: var(--warning);
    box-shadow: 0 0 10px rgba(255,209,102,.45);
}

/* =========================================================
   IMAP PROVIDER SELECTOR
   ========================================================= */

.imap-provider-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
}

.imap-provider-btn {
    width: 100%;
    min-width: 0;
    border: 1px solid #293846;
    background: linear-gradient(145deg, #111a24, #0b1118);
    color: var(--text);
    border-radius: 7px;
    padding: 8px 5px;
    font-family: "Share Tech Mono", monospace;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.2;
    cursor: pointer;
    transition: .16s ease;
}

.imap-provider-btn:hover:not(:disabled) {
    border-color: rgba(99,245,140,.55);
    transform: translateY(-1px);
}

.imap-provider-btn.selected {
    color: #041009;
    background: var(--accent);
    border-color: var(--accent);
    box-shadow:
        0 0 0 1px rgba(99,245,140,.20),
        0 8px 20px rgba(99,245,140,.07);
}

.imap-provider-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}


/* =========================================================
   MICROSOFT OAUTH PANEL
   ========================================================= */

.oauth-panel {
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #0b1219;
    padding: 14px;
}

.oauth-title {
    color: var(--accent);
    font-family: "Share Tech Mono", monospace;
    font-size: .82rem;
    letter-spacing: .08em;
    margin-bottom: 5px;
}

.oauth-description {
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.5;
    margin-bottom: 13px;
}

.oauth-status {
    color: var(--muted);
    font-size: .75rem;
    margin-top: 9px;
}


/* =========================================================
   MOBILE PROVIDER GRID
   ========================================================= */

@media (max-width: 767px) {

    .imap-provider-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}

@media (max-width: 420px) {

    .imap-provider-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}