@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Geist:wght@400;500;600;700&display=swap');

:root {
    --canvas: #eef1f7;
    --canvas-2: #e6eaf2;
    --surface: #ffffff;
    --surface-soft: #f7f9fd;
    --surface-sunk: #eff2f8;
    --ink: #141c2c;
    --ink-2: #2b3648;
    --muted: #6b7688;
    --muted-2: #98a2b3;
    --line: #e5e9f1;
    --line-2: #d7dde8;
    --brand: #5850ec;
    --brand-2: #4338ca;
    --brand-soft: #eeecff;
    --brand-glow: rgba(88, 80, 236, .32);
    --mint: #10b981;
    --mint-soft: #e6f9f1;
    --rose: #ef4444;
    --rose-soft: #feecec;
    --sun: #f59e0b;
    --sun-soft: #fef4e2;
    --r-xs: 8px;
    --r-sm: 12px;
    --r-md: 16px;
    --r-lg: 22px;
    --r-xl: 28px;
    --shadow-1: 0 1px 2px rgba(20, 28, 44, .05);
    --shadow-2: 0 4px 14px rgba(20, 28, 44, .06);
    --shadow-3: 0 12px 34px rgba(20, 28, 44, .09);
    --shadow-4: 0 28px 70px rgba(20, 28, 44, .18);
    --glow: 0 10px 26px var(--brand-glow);
    --ease: cubic-bezier(.32, .72, 0, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv11', 'ss01';
}

h1, h2, h3, h4, .display {
    font-family: 'Bricolage Grotesque', 'Geist', sans-serif;
    letter-spacing: -0.028em;
    font-weight: 700;
}

button, input, textarea { font: inherit; }
button { cursor: pointer; }

/* ============================================================
   APP SHELL — floating card layout on a soft canvas
   ============================================================ */

.app-body {
    height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(1100px 600px at 88% -8%, rgba(88, 80, 236, .12), transparent 60%),
        radial-gradient(900px 500px at -5% 105%, rgba(16, 185, 129, .08), transparent 60%),
        linear-gradient(160deg, var(--canvas), var(--canvas-2));
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ============================================================
   TOP BAR — floating pill
   ============================================================ */

.topbar {
    height: 62px;
    flex: none;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 0 12px 0 18px;
    background: rgba(255, 255, 255, .78);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.9);
    position: relative;
    z-index: 40;
}

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    color: var(--ink);
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: -.02em;
    white-space: nowrap;
}

.brand b { font-weight: 500; color: var(--muted-2); }

.brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    background: conic-gradient(from 200deg at 50% 50%, var(--brand), #8b7bff, var(--brand-2), var(--brand));
    color: #fff;
    display: grid;
    place-items: center;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    font-size: 18px;
    box-shadow: 0 8px 20px var(--brand-glow);
    position: relative;
}

.brand-mark::before {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(255,255,255,.28), transparent 45%);
}

.top-search {
    height: 42px;
    flex: 1;
    max-width: 580px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 15px;
    background: var(--surface-sunk);
    border: 1.5px solid transparent;
    border-radius: 999px;
    color: var(--muted-2);
    transition: all .22s var(--ease-out);
}

.top-search:focus-within {
    background: #fff;
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-soft);
}

.top-search i { font-size: 14px; }

.top-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 13.5px;
    color: var(--ink);
}

.top-search input::placeholder { color: var(--muted-2); }

kbd {
    font-family: 'Geist', monospace;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 7px;
    border-radius: 6px;
    background: #fff;
    border: 1px solid var(--line-2);
    box-shadow: 0 1px 0 var(--line-2);
    color: var(--muted);
}

.top-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.account-email {
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-2);
    background: var(--brand-soft);
    padding: 7px 14px;
    border-radius: 999px;
    max-width: 210px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.avatar {
    width: 38px;
    height: 38px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: linear-gradient(145deg, #2b3648, #141c2c);
    color: #fff;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(20, 28, 44, .25);
    transition: transform .2s var(--ease-out);
}

.avatar:hover { transform: scale(1.06); }

.icon-button {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--muted);
    font-size: 15px;
    display: inline-grid;
    place-items: center;
    transition: all .16s var(--ease-out);
}

.icon-button:hover { background: var(--surface-sunk); color: var(--ink); }

/* ============================================================
   MAIN SHELL
   ============================================================ */

.app-layout {
    flex: 1;
    min-height: 0;
    display: flex;
    gap: 14px;
}

/* ============================================================
   SIDEBAR — pure white floating rail
   ============================================================ */

.sidebar {
    width: 236px;
    flex: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-2);
    padding: 16px 12px 14px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; }

.compose-button {
    height: 46px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    color: #fff;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: -.01em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: var(--glow);
    transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}

.compose-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px var(--brand-glow);
}

.compose-button i { font-size: 14px; }

.folder-nav {
    display: grid;
    gap: 2px;
    margin-top: 20px;
}

.folder {
    height: 42px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    padding: 0 13px;
    display: flex;
    align-items: center;
    gap: 13px;
    transition: all .16s var(--ease-out);
    position: relative;
}

.folder i {
    width: 18px;
    font-size: 14px;
    text-align: center;
    color: var(--muted-2);
    transition: color .16s var(--ease-out);
}

.folder:hover { background: var(--surface-soft); color: var(--ink); }
.folder:hover i { color: var(--ink-2); }

.folder.active {
    background: var(--brand-soft);
    color: var(--brand-2);
    font-weight: 700;
}

.folder.active i { color: var(--brand); }

.folder small {
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 700;
    min-width: 20px;
    text-align: center;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--surface-sunk);
    color: var(--muted);
}

.folder.active small {
    background: var(--brand);
    color: #fff;
}

.sidebar-bottom { margin-top: auto; padding-top: 22px; }

.storage-label,
.eyebrow {
    font-size: 9.5px;
    letter-spacing: .16em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--muted-2);
}

.account-card {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 13px;
    margin-top: 9px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface-soft);
}

.account-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--mint);
    box-shadow: 0 0 0 4px var(--mint-soft);
    flex: none;
}

.account-card strong,
.account-card small { display: block; }

.account-card strong {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ink);
}

.account-card small {
    font-size: 9.5px;
    color: var(--muted-2);
    margin-top: 2px;
    max-width: 155px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-foot {
    display: flex;
    justify-content: space-between;
    font-size: 9.5px;
    letter-spacing: .06em;
    color: var(--muted-2);
    margin: 16px 6px 0;
}

/* ============================================================
   WORKSPACE — two floating cards
   ============================================================ */

.workspace {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(340px, 430px) minmax(400px, 1fr);
    gap: 14px;
    overflow: hidden;
}

.list-panel,
.reader-panel {
    min-width: 0;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-2);
    display: flex;
    flex-direction: column;
}

/* --- list panel --- */

.panel-heading {
    padding: 22px 22px 14px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.panel-heading h1 {
    font-size: 25px;
    font-weight: 800;
    margin: 5px 0 0;
    letter-spacing: -.03em;
    color: var(--ink);
}

.list-toolbar {
    height: 46px;
    margin: 0 16px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    color: var(--muted-2);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.mini-button {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    transition: all .15s var(--ease-out);
}

.mini-button:hover:not(:disabled) { background: var(--surface-sunk); color: var(--ink); }
.mini-button:disabled { opacity: .28; cursor: default; }

.message-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
}

.message-list::-webkit-scrollbar,
.reader-panel::-webkit-scrollbar { width: 8px; }

.message-list::-webkit-scrollbar-thumb,
.reader-panel::-webkit-scrollbar-thumb {
    background: var(--line-2);
    border-radius: 999px;
    border: 2px solid var(--surface);
}

.message-list::-webkit-scrollbar-thumb:hover,
.reader-panel::-webkit-scrollbar-thumb:hover { background: var(--muted-2); }

/* --- message row --- */

.message-row {
    width: calc(100% - 16px);
    margin: 2px 8px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--ink);
    text-align: left;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 10px;
    padding: 12px 14px 12px 26px;
    position: relative;
    transition: background .14s var(--ease-out);
}

.message-row:hover { background: var(--surface-soft); }

.message-row.selected {
    background: var(--brand-soft);
}

.message-row.selected::before {
    content: '';
    position: absolute;
    left: 9px;
    top: 14px;
    bottom: 14px;
    width: 3px;
    border-radius: 3px;
    background: var(--brand);
}

.message-row.unread .sender,
.message-row.unread .subject {
    font-weight: 700;
    color: var(--ink);
}

.sender {
    font-size: 12.5px;
    color: var(--ink-2);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.message-date {
    font-size: 10px;
    font-weight: 600;
    color: var(--muted-2);
    white-space: nowrap;
    padding-top: 1px;
}

.subject {
    font-size: 11.5px;
    color: var(--ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.preview {
    font-size: 10px;
    color: var(--muted-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.unread::after {
    content: '';
    position: absolute;
    left: 12px;
    top: 18px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

/* ============================================================
   EMPTY STATES
   ============================================================ */

.reader-panel { overflow-y: auto; }

.empty-reader,
.list-empty {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px;
    color: var(--muted);
}

.empty-icon {
    width: 78px;
    height: 78px;
    border-radius: 24px;
    background: linear-gradient(150deg, var(--brand-soft), #dfe9ff);
    color: var(--brand);
    display: grid;
    place-items: center;
    font-size: 27px;
    margin-bottom: 18px;
    box-shadow: 0 12px 28px rgba(88, 80, 236, .16), inset 0 1px 0 #fff;
}

.empty-reader h2 {
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--ink);
}

.empty-reader p,
.list-empty span {
    font-size: 12.5px;
    margin: 0;
    color: var(--muted-2);
}

.list-empty { gap: 10px; }
.list-empty > div { font-size: 30px; color: var(--muted-2); }
.list-empty strong { color: var(--ink-2); font-size: 13.5px; }

.loading-state {
    padding: 40px 30px;
    text-align: center;
    color: var(--muted-2);
    font-size: 12px;
}

/* ============================================================
   EMAIL READER
   ============================================================ */

.email-reader {
    max-width: 900px;
    margin: auto;
    padding: 24px 36px 36px;
}

.reader-actions {
    display: flex;
    justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.text-action {
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 600;
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all .15s var(--ease-out);
}

.text-action:hover { background: var(--surface-soft); color: var(--brand-2); }
.text-action.danger:hover { background: var(--rose-soft); color: var(--rose); }

.email-reader h2 {
    font-size: 25px;
    font-weight: 800;
    line-height: 1.25;
    margin: 26px 0 22px;
    color: var(--ink);
    overflow-wrap: anywhere;
    letter-spacing: -.03em;
}

.sender-block {
    display: flex;
    align-items: center;
    gap: 13px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--line);
}

.sender-avatar {
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 16px;
    background: linear-gradient(145deg, var(--brand), var(--brand-2));
    color: #fff;
    display: grid;
    place-items: center;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 17px;
    font-weight: 700;
    box-shadow: 0 6px 16px var(--brand-glow);
}

.sender-meta { display: grid; gap: 3px; min-width: 0; }

.sender-meta strong {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.sender-meta span,
.sender-block time {
    font-size: 11px;
    color: var(--muted-2);
}

.sender-block time {
    margin-left: auto;
    white-space: nowrap;
    font-weight: 600;
    padding: 6px 11px;
    border-radius: 8px;
    background: var(--surface-soft);
    border: 1px solid var(--line);
}

.email-body {
    padding: 26px 0;
    font-size: 13.5px;
    line-height: 1.85;
    color: #333f54;
    overflow-wrap: anywhere;
}

.email-body img { max-width: 100%; height: auto; border-radius: 10px; }

.email-body a {
    color: var(--brand-2);
    text-decoration: none;
    border-bottom: 1px solid rgba(88,80,236,.3);
}

.email-body a:hover { border-bottom-color: var(--brand); }

.attachments {
    padding: 18px 0;
    border-top: 1px solid var(--line);
    font-size: 11.5px;
}

.attachments strong {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin-bottom: 11px;
}

.attachments div {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 13px;
    margin-bottom: 6px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface-soft);
    color: var(--ink-2);
}

.attachments small { margin-left: auto; color: var(--muted-2); }

.reader-bottom {
    display: flex;
    gap: 10px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.reply-button {
    border: 1.5px solid var(--line-2);
    border-radius: 11px;
    background: #fff;
    color: var(--ink-2);
    font-size: 11.5px;
    font-weight: 600;
    padding: 10px 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all .16s var(--ease-out);
}

.reply-button:hover {
    background: var(--brand-soft);
    border-color: var(--brand);
    color: var(--brand-2);
    transform: translateY(-1px);
}

/* ============================================================
   COMPOSE MODAL
   ============================================================ */

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(20, 28, 44, .48);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.modal-backdrop[hidden] { display: none; }

.compose-window {
    width: min(650px, 100%);
    border-radius: var(--r-xl);
    background: var(--surface);
    box-shadow: var(--shadow-4);
    overflow: hidden;
    animation: pop .26s var(--ease-out);
}

@keyframes pop {
    from { opacity: 0; transform: translateY(16px) scale(.96); }
    to   { opacity: 1; transform: none; }
}

.compose-head {
    height: 58px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.compose-head .icon-button { color: #fff; opacity: .85; }
.compose-head .icon-button:hover { background: rgba(255,255,255,.16); opacity: 1; }

.compose-window form { padding: 8px 22px 20px; }

.compose-window form > label {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid var(--line);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted-2);
}

.compose-window form > label input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink);
    text-transform: none;
    letter-spacing: normal;
}

.compose-window .body-label { display: block; border: 0; padding-top: 14px; }

.body-label textarea {
    width: 100%;
    height: 240px;
    margin-top: 11px;
    border: 0;
    outline: 0;
    resize: vertical;
    background: transparent;
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--ink);
}

.compose-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 6px;
}

.attach-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    padding: 9px 12px;
    border-radius: 9px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all .15s var(--ease-out);
}

.attach-label:hover { background: var(--surface-soft); color: var(--brand-2); }

.compose-foot > span {
    flex: 1;
    font-size: 10.5px;
    color: var(--muted-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.send-button,
.login-submit {
    border: 0;
    border-radius: 12px;
    padding: 12px 22px;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    color: #fff;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: -.01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    box-shadow: var(--glow);
    transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
}

.send-button:hover,
.login-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px var(--brand-glow);
}

.send-button:disabled { opacity: .6; transform: none; cursor: default; }

/* ============================================================
   TOAST
   ============================================================ */

.toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    z-index: 200;
    transform: translate(-50%, 16px);
    padding: 13px 22px;
    border-radius: 14px;
    background: var(--ink);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 16px 40px rgba(20,28,44,.35);
    transition: all .26s var(--ease-out);
}

.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ============================================================
   LOGIN
   ============================================================ */

.login-body {
    min-height: 100vh;
    padding: 28px;
    display: grid;
    place-items: center;
    background:
        radial-gradient(1100px 600px at 85% -10%, rgba(88,80,236,.14), transparent 60%),
        radial-gradient(900px 500px at 0% 110%, rgba(16,185,129,.1), transparent 60%),
        linear-gradient(160deg, var(--canvas), var(--canvas-2));
}

.login-shell {
    width: min(1020px, 100%);
    min-height: 650px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--shadow-4);
}

.login-brand {
    position: relative;
    overflow: hidden;
    padding: 46px;
    display: flex;
    flex-direction: column;
    color: #fff;
    background: linear-gradient(155deg, #1a1533, #241d4d 45%, #3b2f7a);
}

.login-brand::before {
    content: '';
    position: absolute;
    width: 360px;
    height: 360px;
    right: -120px;
    bottom: -140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(88,80,236,.55), transparent 70%);
}

.login-brand::after {
    content: '';
    position: absolute;
    width: 260px;
    height: 260px;
    left: -100px;
    top: -100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(16,185,129,.28), transparent 70%);
}

.brand-light { color: #fff; }
.brand-light .brand-mark { box-shadow: 0 8px 22px rgba(0,0,0,.35); }
.brand-light b { color: #8f86b8; }

.brand-copy { position: relative; z-index: 1; margin: auto 0; }
.brand-copy .eyebrow { color: #9089b8; }

.brand-copy h1 {
    font-size: clamp(34px, 4vw, 52px);
    font-weight: 800;
    line-height: 1.07;
    margin: 20px 0;
    letter-spacing: -.04em;
}

.brand-copy p {
    max-width: 350px;
    font-size: 13.5px;
    line-height: 1.8;
    color: #aea8cc;
}

.login-legal {
    position: relative;
    z-index: 1;
    font-size: 9.5px;
    letter-spacing: .12em;
    color: #7c76a3;
}

.login-legal span { padding: 0 7px; }

.login-form-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 54px 62px;
}

.login-card { width: 100%; max-width: 370px; margin: auto; }
.mobile-brand { display: none; }

.login-card h2 {
    font-size: 28px;
    font-weight: 800;
    margin: 10px 0 8px;
    letter-spacing: -.035em;
    color: var(--ink);
}

.muted {
    font-size: 13px;
    color: var(--muted-2);
    margin: 0 0 32px;
}

.login-card form label {
    display: block;
    margin: 18px 0;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #526078;
}

.login-card form input {
    display: block;
    width: 100%;
    height: 47px;
    margin-top: 9px;
    padding: 0 15px;
    border: 1.5px solid var(--line-2);
    border-radius: 12px;
    outline: 0;
    background: var(--surface-soft);
    font-size: 13.5px;
    color: var(--ink);
    text-transform: none;
    letter-spacing: normal;
    transition: all .18s var(--ease-out);
}

.login-card form input:focus {
    border-color: var(--brand);
    background: #fff;
    box-shadow: 0 0 0 4px var(--brand-soft);
}

.login-submit {
    width: 100%;
    height: 48px;
    margin-top: 8px;
    justify-content: space-between;
    padding: 0 18px;
}

.form-error {
    min-height: 18px;
    margin-top: 12px;
    font-size: 11.5px;
    color: var(--rose);
}

.login-note {
    display: flex;
    gap: 11px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    font-size: 10.5px;
    line-height: 1.65;
    color: var(--muted-2);
}

.lock-icon { color: var(--brand); }

.login-copyright {
    padding-top: 30px;
    text-align: center;
    font-size: 9.5px;
    color: var(--muted-2);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1000px) {
    .workspace { grid-template-columns: minmax(300px, 370px) minmax(300px, 1fr); }
    .sidebar { width: 212px; }
    .topbar { gap: 14px; padding-left: 14px; }
    .login-form-side { padding: 42px; }
    .account-email { display: none; }
}

@media (max-width: 760px) {
    .app-body {
        height: auto;
        min-height: 100vh;
        overflow: auto;
        padding: 8px;
        gap: 8px;
    }

    .topbar {
        height: 58px;
        gap: 10px;
        padding: 0 8px 0 12px;
        border-radius: var(--r-md);
        position: sticky;
        top: 8px;
    }

    .brand span:not(.brand-mark) { display: none; }
    .brand-mark { width: 36px; height: 36px; font-size: 17px; border-radius: 12px; }
    .top-search { height: 38px; border-radius: 10px; }
    .top-search kbd { display: none; }
    .top-actions { gap: 4px; }

    .app-layout {
        flex-direction: column;
        height: auto;
        min-height: 0;
        gap: 8px;
    }

    .sidebar {
        width: 100%;
        padding: 10px;
        overflow: visible;
        border-radius: var(--r-md);
    }

    .compose-button { height: 42px; }

    .folder-nav {
        display: flex;
        gap: 6px;
        margin-top: 10px;
        overflow-x: auto;
        padding-bottom: 3px;
        scrollbar-width: none;
    }

    .folder-nav::-webkit-scrollbar { display: none; }
    .folder { white-space: nowrap; height: 36px; padding: 0 12px; font-size: 12px; gap: 8px; }
    .folder small { display: none; }
    .sidebar-bottom { display: none; }

    .workspace {
        display: flex;
        flex-direction: column;
        overflow: visible;
        gap: 8px;
    }

    .list-panel { min-height: 440px; border-radius: var(--r-md); }
    .reader-panel { min-height: 400px; border-radius: var(--r-md); }
    .email-reader { padding: 20px; }
    .panel-heading { padding: 18px 18px 12px; }
    .panel-heading h1 { font-size: 21px; }
    .list-toolbar { margin: 0 12px; }

    .login-body { padding: 12px; }
    .login-shell { grid-template-columns: 1fr; min-height: 0; border-radius: var(--r-lg); }
    .login-brand { display: none; }
    .login-form-side { padding: 36px 24px; }
    .mobile-brand { display: flex; margin-bottom: 34px; }
    .login-card h2 { font-size: 23px; }
    .reader-loading { min-height: 300px; }
}