* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at 18% 8%, var(--glow), transparent 30rem),
        linear-gradient(135deg, var(--bg), var(--bg-2));
    color: var(--text);
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select {
    font: inherit;
}
button, .compose-primary, .auth-form button, .form-actions button, .load-more a {
    border: 0;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    padding: .85rem 1rem;
    font-weight: 800;
    cursor: pointer;
}
.theme-solar-light button,
.theme-solar-light .compose-primary,
.theme-solar-light .auth-form button,
.theme-solar-light .form-actions button,
.theme-solar-light .load-more a { color: #1d1609; }

.app-shell { min-height: 100vh; display: flex; }
.sidebar {
    width: 280px;
    flex: 0 0 280px;
    padding: 1rem;
    border-right: 1px solid var(--line);
    background: rgba(0, 0, 0, .12);
    backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.brand { display: flex; align-items: center; gap: .75rem; min-height: 54px; }
.brand-mark {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 0 28px var(--glow);
    color: #fff;
    font-weight: 900;
}
.brand-mark.large { width: 68px; height: 68px; margin: 0 auto; font-size: 2rem; }
.brand small { display: block; color: var(--muted); font-size: .78rem; margin-top: .2rem; }
.folders { display: grid; gap: .35rem; overflow: auto; }
.folders a, .sidebar-foot a, .sidebar-foot button {
    display: block;
    width: 100%;
    padding: .75rem .8rem;
    border-radius: 8px;
    color: var(--muted);
    background: transparent;
    text-align: left;
}
.folders a.active, .folders a:hover, .sidebar-foot a:hover {
    background: var(--panel);
    color: var(--text);
}
.sidebar-foot { margin-top: auto; display: grid; gap: .35rem; }
.main-surface { flex: 1; min-width: 0; padding: 1rem; padding-bottom: 5.5rem; }
.topbar {
    display: flex;
    gap: .75rem;
    align-items: center;
    margin-bottom: 1rem;
}
.search { flex: 1; }
.search input, input, textarea, select {
    width: 100%;
    color: var(--text);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: .85rem .95rem;
    outline: none;
}
textarea { resize: vertical; }
.security-pill, .folder-chip {
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--good);
    padding: .45rem .7rem;
    white-space: nowrap;
}
.account { color: var(--muted); max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast, .notice, .alert {
    background: var(--panel);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    padding: .9rem 1rem;
    margin-bottom: 1rem;
}
.alert { border-left-color: var(--danger); }

.login-stage {
    width: 100%;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1rem;
}
.login-panel {
    width: min(440px, 100%);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 1.25rem;
    box-shadow: var(--shadow);
    backdrop-filter: blur(24px);
}
.login-brand { text-align: center; margin-bottom: 1.5rem; }
.login-brand h1 { margin: .8rem 0 .2rem; font-size: clamp(2rem, 6vw, 3.2rem); }
.login-brand p, .login-panel small { color: var(--muted); }
.auth-form, .compose-form, .settings-form { display: grid; gap: .9rem; }
label { display: grid; gap: .4rem; color: var(--muted); font-weight: 700; }
.check-row { display: flex; align-items: center; gap: .55rem; }
.check-row input { width: auto; }

.mail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 1rem;
}
.list-panel, .insight-panel, .message-view, .compose-view, .settings-view {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(20px);
}
.list-panel, .message-view, .compose-view, .settings-view { padding: 1rem; }
.panel-head { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-bottom: 1rem; }
h1, h2, p { margin-top: 0; }
.panel-head h1, .message-header h1 { margin-bottom: .25rem; }
.panel-head p, .message-header p, .message-header time { color: var(--muted); }
.toolbar { display: flex; gap: .5rem; flex-wrap: wrap; }
.toolbar a, .message-actions a, .message-actions button, .form-actions a {
    border: 1px solid var(--line);
    background: var(--panel);
    border-radius: 8px;
    color: var(--text);
    padding: .65rem .75rem;
}
.mail-row {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto;
    gap: .8rem;
    padding: .9rem;
    border-top: 1px solid var(--line);
    align-items: center;
}
.mail-row:hover { background: rgba(255, 255, 255, .05); }
.mail-row.unread .unread-dot { background: var(--accent); }
.unread-dot { width: 9px; height: 9px; border-radius: 50%; }
.mail-row-main { display: grid; gap: .22rem; min-width: 0; }
.mail-row-main strong, .mail-row-main b, .mail-row-main small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mail-row-main small, .mail-meta { color: var(--muted); }
.mail-meta { display: grid; justify-items: end; gap: .25rem; font-size: .82rem; max-width: 180px; }
.load-more { padding-top: 1rem; text-align: center; }
.insight-panel { padding: 1rem; display: grid; align-content: start; gap: .7rem; }
.insight-panel a { padding: .7rem; border-radius: 8px; background: rgba(255,255,255,.04); color: var(--muted); }
.future-box { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: 1rem; color: var(--muted); }
.message-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.message-actions form { margin: 0; }
.message-body {
    background: var(--panel-solid);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 1rem;
    overflow: auto;
    line-height: 1.58;
}
.message-body img { max-width: 100%; height: auto; }
.attachments { margin-top: 1rem; display: grid; gap: .55rem; }
.attachments a {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: .75rem;
}
.form-actions { display: flex; gap: .75rem; align-items: center; }
.security-notes { margin-top: 1rem; color: var(--muted); }
.empty-state { color: var(--muted); padding: 2rem; text-align: center; border: 1px dashed var(--line); border-radius: 8px; }
.bottom-nav { display: none; }
.mobile-only { display: none; }
.icon-button { width: 44px; height: 44px; padding: 0; }

.density-compact .mail-row { padding: .6rem; }
.density-spacious .mail-row { padding: 1.25rem; }

@media (max-width: 900px) {
    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 10;
        transform: translateX(-102%);
        transition: transform .2s ease;
        box-shadow: var(--shadow);
    }
    .sidebar.open { transform: translateX(0); }
    .main-surface { width: 100%; }
    .mail-grid { grid-template-columns: 1fr; }
    .desktop-only, .account { display: none; }
    .mobile-only { display: grid; place-items: center; }
    .topbar { position: sticky; top: 0; z-index: 4; background: var(--bg); padding: .5rem 0; }
    .bottom-nav {
        position: fixed;
        left: .75rem;
        right: .75rem;
        bottom: .75rem;
        z-index: 5;
        display: grid;
        grid-template-columns: 1fr 1fr 58px 1fr;
        align-items: center;
        gap: .35rem;
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: .45rem;
        backdrop-filter: blur(20px);
    }
    .bottom-nav a { text-align: center; color: var(--muted); padding: .65rem .25rem; }
    .bottom-nav .fab {
        display: grid;
        place-items: center;
        width: 54px;
        height: 54px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--accent), var(--accent-2));
        color: #fff;
        font-size: 1.8rem;
        transform: translateY(-1rem);
    }
    .mail-row { grid-template-columns: 10px minmax(0, 1fr); }
    .mail-meta { grid-column: 2; justify-items: start; display: flex; max-width: none; }
}