/* NEXT MAIL interface: tokens */
:root {
    --bg: #eaf1fb;
    --surface: rgba(255, 255, 255, .78);
    --solid: #ffffff;
    --text: #0f1b33;
    --muted: #66758f;
    --line: rgba(15, 27, 51, .09);
    --accent: #1d8fe0;
    --accent-text: #ffffff;
    --hover: rgba(29, 143, 224, .08);
    --active: rgba(0, 198, 255, .16);
    --grad: linear-gradient(135deg, #00c6ff, #2f6bff);
    --brand: #0a7ea4;
    --star: #f5a524;
    --danger: #d92d20;
    --shadow: 0 10px 30px rgba(31, 64, 120, .10);
    --glow1: rgba(0, 198, 255, .28);
    --glow2: rgba(120, 140, 255, .25);
    --dot: #00b8f0;
    --btn-shadow: rgba(47, 107, 255, .28);
}
[data-theme="dark"] {
    --bg: #0a1120;
    --surface: rgba(20, 30, 52, .82);
    --solid: #141e34;
    --text: #e8eefc;
    --muted: #8fa0bd;
    --line: rgba(255, 255, 255, .09);
    --accent: #4cb1ff;
    --accent-text: #05101f;
    --hover: rgba(255, 255, 255, .06);
    --active: rgba(0, 198, 255, .18);
    --brand: #4cc3e6;
    --danger: #ff8a80;
    --shadow: 0 10px 30px rgba(0, 0, 0, .35);
    --glow1: rgba(0, 150, 255, .16);
    --glow2: rgba(100, 90, 255, .16);
}

* { box-sizing: border-box; }
html { height: 100%; }
body {
    margin: 0; min-height: 100%;
    font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 15px; color: var(--text);
    background:
        radial-gradient(60rem 30rem at 8% -8%, var(--glow1), transparent 60%),
        radial-gradient(50rem 30rem at 100% 100%, var(--glow2), transparent 60%),
        var(--bg);
    background-attachment: fixed;
}
a { color: inherit; }
button { font-family: inherit; }
.ic { width: 1.1rem; height: 1.1rem; flex: none; stroke: currentColor; fill: none; stroke-width: 2;
      stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }

/* Shell */
.app { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 1rem; padding: 1rem; height: 100vh; }
.glass { background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
         box-shadow: var(--shadow); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.side { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; overflow: auto;
        background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
        box-shadow: var(--shadow); backdrop-filter: blur(14px); }
.col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; min-height: 0; }
.top { position: relative; z-index: 20; display: flex; align-items: center; gap: .75rem; padding: .6rem .9rem;
       background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
       box-shadow: var(--shadow); backdrop-filter: blur(14px); }
.panel { flex: 1; min-height: 0; overflow: auto; background: var(--surface); border: 1px solid var(--line);
         border-radius: 20px; box-shadow: var(--shadow); backdrop-filter: blur(14px); }
.panel.pad { padding: 1.25rem 1.5rem; }
.panel.bare { display: flex; flex-direction: column; overflow: hidden; }
.flash { margin: 0 0 1rem; padding: .65rem .9rem; border: 1px solid var(--line); border-radius: 12px;
         background: var(--active); font-size: .9rem; font-weight: 600; }
.panel.bare > .flash { margin: .75rem 1.25rem 0; }

/* Sidebar */
.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
.logo { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 14px;
        color: var(--brand); background: var(--active); border: 1px solid var(--line); }
.brand strong { display: block; font-size: 1.05rem; letter-spacing: .01em; }
.brand em { font-style: normal; color: var(--brand); }
.brand small { display: block; color: var(--muted); font-size: .75rem; }
.compose-btn { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .8rem 1rem;
               color: #fff; font-weight: 700; text-decoration: none; background: var(--grad); border-radius: 14px;
               box-shadow: 0 8px 20px var(--btn-shadow); }
.compose-btn:hover { filter: brightness(1.06); }
.nav { display: flex; flex-direction: column; gap: .2rem; }
.nav-item { display: flex; align-items: center; gap: .75rem; padding: .6rem .8rem; border-radius: 12px;
            color: var(--muted); font-weight: 600; text-decoration: none; }
.nav-item:hover { background: var(--hover); color: var(--text); }
.nav-item.on { background: var(--active); color: var(--text); border: 1px solid var(--line); }
.nav-item span.l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge { min-width: 1.4rem; padding: .05rem .45rem; font-size: .75rem; font-weight: 700; text-align: center;
         color: #fff; background: var(--dot); border-radius: 999px; }

/* Top bar */
.search { flex: 1; min-width: 0; position: relative; }
.search .search-btn { position: absolute; left: .45rem; top: 50%; transform: translateY(-50%); width: 2rem; height: 2rem;
                      display: grid; place-items: center; padding: 0; color: var(--muted); background: transparent;
                      border: 0; border-radius: 8px; cursor: pointer; }
.search .search-btn:hover { color: var(--accent); background: var(--hover); }
.search input { width: 100%; padding: .65rem 4rem .65rem 2.6rem; font: inherit; font-size: .92rem; color: var(--text);
                background: var(--hover); border: 1px solid var(--line); border-radius: 12px; }
.search kbd { position: absolute; right: .7rem; top: 50%; transform: translateY(-50%); padding: .1rem .45rem;
              font: inherit; font-size: .75rem; font-weight: 700; color: var(--muted); background: var(--solid);
              border: 1px solid var(--line); border-radius: 6px; }
.seg { display: flex; padding: .2rem; gap: .15rem; background: var(--hover); border: 1px solid var(--line); border-radius: 12px; }
.seg a { display: flex; align-items: center; gap: .45rem; padding: .4rem .8rem; border-radius: 9px; font-size: .88rem;
         font-weight: 600; color: var(--muted); text-decoration: none; }
.seg a.on { background: var(--active); color: var(--text); }
.icon-btn { width: 2.2rem; height: 2.2rem; display: inline-grid; place-items: center; flex: none; color: var(--muted);
            background: transparent; border: 1px solid transparent; border-radius: 10px; cursor: pointer; text-decoration: none; }
.icon-btn:hover { background: var(--hover); color: var(--text); }
.icon-btn.bordered { border-color: var(--line); background: var(--hover); }
.i-sun { display: none; }
[data-theme="dark"] .i-sun { display: block; }
[data-theme="dark"] .i-moon { display: none; }
.acct { position: relative; }
.acct summary { list-style: none; display: flex; align-items: center; gap: .65rem; padding: .25rem .4rem; cursor: pointer;
                border-left: 1px solid var(--line); margin-left: .25rem; padding-left: .9rem; }
.acct summary::-webkit-details-marker { display: none; }
.avatar { width: 2.3rem; height: 2.3rem; display: grid; place-items: center; flex: none; color: #fff; font-size: .8rem;
          font-weight: 800; background: var(--grad); border-radius: 50%; }
.acct .who { line-height: 1.2; min-width: 0; }
.acct .who b { display: block; font-size: .85rem; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct .who small { color: var(--muted); font-size: .75rem; }
.menu-pop { position: absolute; z-index: 30; right: 0; top: calc(100% + .4rem); min-width: 11rem; padding: .35rem;
            background: var(--solid); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.menu-pop button, .menu-pop a { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem .7rem; font: inherit;
            font-size: .88rem; font-weight: 600; color: var(--text); text-align: left; text-decoration: none;
            background: transparent; border: 0; border-radius: 8px; cursor: pointer; }
.menu-pop button:hover, .menu-pop a:hover { background: var(--hover); }
.menu-pop form { margin: 0; }
.menu-btn { display: none; }

/* Message list */
.mh { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.25rem .6rem; }
.mh h1 { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: 1.1rem; font-weight: 800; }
.mh-right { display: flex; align-items: center; gap: .5rem; }
.count-pill { padding: .1rem .55rem; font-size: .75rem; font-weight: 700; color: var(--brand); background: var(--active); border-radius: 999px; }
.tabs { display: flex; gap: .2rem; }
.tabs a { padding: .35rem .75rem; border-radius: 9px; font-size: .85rem; font-weight: 700; color: var(--muted); text-decoration: none; }
.tabs a:hover { background: var(--hover); }
.tabs a.on { background: var(--active); color: var(--brand); }
.mlist { flex: 1; min-height: 0; overflow: auto; border-top: 1px solid var(--line); }
.mrow { position: relative; display: grid; grid-template-columns: 1.2rem .6rem 11rem minmax(0, 1fr) 2rem 5.5rem; align-items: center;
        gap: .9rem; padding: .85rem 1.25rem; border-bottom: 1px solid var(--line); color: var(--text); font-size: .9rem; }
.mrow:hover { background: var(--hover); }
.mrow .dot { width: .5rem; height: .5rem; border-radius: 50%; background: transparent; }
.mrow.unread .dot { background: var(--dot); }
.mrow .who, .mrow .subj { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrow.unread .who, .mrow.unread .subj a { font-weight: 800; }
.mrow .subj a { text-decoration: none; }
.mrow .subj a::after { content: ''; position: absolute; inset: 0; }
.mrow time { text-align: right; font-size: .8rem; color: var(--muted); }
.mrow.unread time { color: var(--brand); font-weight: 700; }
.count { margin-left: .5rem; padding: 0 .45rem; font-size: .72rem; font-weight: 700; color: var(--muted);
         border: 1px solid var(--line); border-radius: 999px; }
.star { position: relative; z-index: 1; width: 2rem; height: 2rem; display: grid; place-items: center; color: var(--muted);
        background: transparent; border: 0; border-radius: 8px; cursor: pointer; }
.star:hover { background: var(--hover); }
.star.on { color: var(--star); }
.star.on .ic { fill: var(--star); }
.mfoot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1.25rem;
         border-top: 1px solid var(--line); font-size: .82rem; color: var(--muted); }
.mfoot a { color: var(--accent); font-weight: 700; text-decoration: none; }
.empty { padding: 3rem 1.25rem; text-align: center; color: var(--muted); }

/* Message view */
.mbar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .75rem 1.1rem; border-bottom: 1px solid var(--line); }
.mbar form { margin: 0; }
.sep { width: 1px; height: 1.4rem; background: var(--line); margin: 0 .25rem; }
.pill { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .85rem; font: inherit; font-size: .85rem; font-weight: 700;
        color: var(--text); text-decoration: none; list-style: none; cursor: pointer; background: var(--hover);
        border: 1px solid var(--line); border-radius: 999px; }
.pill:hover { background: var(--active); }
.pill::-webkit-details-marker { display: none; }
.pill.danger { color: var(--danger); }
.pill.grad { color: #fff; background: var(--grad); border-color: transparent; padding: .6rem 1.4rem; box-shadow: 0 8px 18px var(--btn-shadow); }
details.menu { position: relative; }
details.menu .menu-pop { right: auto; left: 0; max-height: 18rem; overflow: auto; }
.mview { flex: 1; min-height: 0; overflow: auto; padding: 1.25rem 1.5rem; }
.mtitle { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.mtitle h1 { margin: 0 0 1rem; font-size: 1.4rem; font-weight: 800; overflow-wrap: anywhere; }
.msender { display: flex; align-items: center; gap: .8rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.msender > div { flex: 1; min-width: 0; }
.msender strong { display: block; }
.msender small, .msender time { color: var(--muted); font-size: .82rem; }
.mmeta { margin: .75rem 0; color: var(--muted); font-size: .85rem; overflow-wrap: anywhere; }
.thread { margin: 0 0 1rem; background: var(--hover); border: 1px solid var(--line); border-radius: 14px; }
.thread summary { cursor: pointer; padding: .6rem 1rem; font-size: .88rem; font-weight: 700; }
.thread ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.thread li + li { border-top: 1px solid var(--line); }
.thread a { display: grid; grid-template-columns: 1fr auto; gap: .75rem; padding: .5rem 1rem; font-size: .86rem; text-decoration: none; }
.thread a:hover { background: var(--hover); }
.thread a.unread { font-weight: 800; }
.thread li.current { background: var(--active); }
.thread small { color: var(--muted); font-weight: 500; }
.files { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.files a { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .75rem; font-size: .85rem; font-weight: 600;
           text-decoration: none; background: var(--hover); border: 1px solid var(--line); border-radius: 10px; }
.files a:hover { background: var(--active); }
.files small { color: var(--muted); }
.mview iframe { display: block; width: 100%; height: clamp(22rem, 52vh, 60rem); border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.mact { display: flex; gap: .6rem; padding: .8rem 1.25rem; border-top: 1px solid var(--line); }

/* Floating compose window */
.cw { position: fixed; z-index: 60; right: 1.5rem; bottom: 0; width: min(36rem, calc(100vw - 2rem)); height: min(38rem, 82vh);
      display: flex; flex-direction: column; overflow: hidden; background: var(--solid); border: 1px solid var(--line);
      border-radius: 16px 16px 0 0; box-shadow: 0 -10px 50px rgba(8, 20, 50, .28); }
.cw.max { width: min(60rem, calc(100vw - 2rem)); height: 92vh; }
.cw.min { height: auto; }
.cw.min .cw-body { display: none; }
.cw-head { display: flex; align-items: center; justify-content: space-between; padding: .7rem 1rem; color: #fff; background: #0f1b33; }
.cw-title { font-weight: 700; font-size: .92rem; }
.cw-btns { display: flex; gap: .15rem; }
.cw-btns button { width: 1.9rem; height: 1.9rem; display: grid; place-items: center; color: #cbd5ea; background: transparent; border: 0; border-radius: 8px; cursor: pointer; }
.cw-btns button:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.cw-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cf { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0; }
.cf-error { margin: .6rem 1rem 0; padding: .55rem .8rem; font-size: .85rem; color: var(--danger); border: 1px solid var(--danger); border-radius: 10px; }
.cf-row { position: relative; display: flex; align-items: center; gap: .6rem; padding: .15rem 1rem; border-bottom: 1px solid var(--line); }
.cf-row label { width: 2.6rem; flex: none; font-size: .88rem; color: var(--muted); }
.cf-row input { flex: 1; min-width: 0; padding: .65rem 0; font: inherit; font-size: .92rem; color: var(--text); background: transparent; border: 0; outline: 0; }
.cf-cc { display: flex; gap: .5rem; }
.cf-cc button { padding: .2rem .3rem; font-size: .82rem; font-weight: 700; color: var(--muted); background: transparent; border: 0; cursor: pointer; }
.cf-cc button:hover { color: var(--accent); }
.cf-editor { flex: 1; min-height: 8rem; overflow: auto; }
.cf-editor .ql-container.ql-snow { border: 0; font: inherit; font-size: .95rem; color: var(--text); height: 100%; }
.cf-editor .ql-editor { min-height: 9rem; padding: .9rem 1rem; }
.cf-editor .ql-editor.ql-blank::before { color: var(--muted); font-style: normal; left: 1rem; }
.cf-editor .ql-editor blockquote { border-left: 3px solid var(--line); margin: .5rem 0; padding-left: .9rem; color: var(--muted); }
.cf-editor .plain { min-height: 9rem; padding: .9rem 1rem; outline: 0; }
.cf-files { list-style: none; margin: 0; padding: 0 1rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.cf-files:not(:empty) { padding-top: .5rem; }
.cf-files li { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .3rem .25rem .6rem; font-size: .78rem; background: var(--hover); border: 1px solid var(--line); border-radius: 999px; }
.cf-files button { width: 1.2rem; height: 1.2rem; display: grid; place-items: center; color: var(--muted); background: transparent; border: 0; border-radius: 50%; cursor: pointer; }
.cf-fwd { margin: .4rem 1rem 0; display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.cf-foot { display: flex; align-items: center; gap: .5rem; padding: .7rem 1rem; border-top: 1px solid var(--line); }
.send { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.3rem; font: inherit; font-weight: 700; color: #fff;
        background: var(--grad); border: 0; border-radius: 12px; cursor: pointer; box-shadow: 0 6px 16px var(--btn-shadow); }
.send:disabled { opacity: .6; cursor: default; }
.cf-tools { display: flex; align-items: center; gap: .1rem; margin-left: .5rem; flex: 1; position: relative; }
.cf-tools button { width: 2rem; height: 2rem; padding: 0; display: grid; place-items: center; color: var(--muted); background: transparent; border: 0; border-radius: 8px; cursor: pointer; }
.cf-tools button:hover, .cf-tools button.ql-active { background: var(--hover); color: var(--accent); }
.cf-tools .ql-stroke { stroke: currentColor; }
.cf-tools .ql-fill { fill: currentColor; }
.cf-tools .sp { flex: 1; }
.emoji-pop { position: absolute; bottom: 2.6rem; left: 6rem; z-index: 5; display: grid; grid-template-columns: repeat(6, 1fr); gap: .1rem; padding: .4rem;
             background: var(--solid); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.emoji-pop button { font-size: 1.1rem; }
.ac { position: absolute; left: 3.6rem; right: 1rem; z-index: 20; max-height: 13rem; overflow: auto; background: var(--solid);
      border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.ac button { display: block; width: 100%; padding: .55rem .8rem; font: inherit; font-size: .88rem; text-align: left; color: var(--text); background: transparent; border: 0; cursor: pointer; }
.ac button:hover, .ac button.on { background: var(--hover); }
.ql-tooltip { z-index: 70; }

/* Full-page compose fallback */
.cf-page { max-width: 52rem; }
.cf-page h1 { margin: 0 0 1rem; font-size: 1.2rem; font-weight: 800; }
.cf-page .cf { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--solid); min-height: 34rem; }

/* Sign-in page */
body.auth { display: grid; place-items: center; min-height: 100vh; padding: 1.5rem; }
.auth-theme { position: fixed; top: 1rem; right: 1rem; }
.auth-card { width: 100%; max-width: 24rem; padding: 2rem 1.75rem; text-align: center; background: var(--surface); border: 1px solid var(--line);
             border-radius: 24px; box-shadow: var(--shadow); backdrop-filter: blur(16px); }
.auth-logo { width: 3.2rem; height: 3.2rem; margin: 0 auto .75rem; display: grid; place-items: center; color: var(--brand); background: var(--active);
             border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 0 24px var(--glow1); }
.auth-brand { font-weight: 800; font-size: 1.2rem; letter-spacing: .02em; }
.auth-brand em { font-style: normal; color: var(--brand); }
.auth-card h1 { margin: 1.5rem 0 .3rem; font-size: 1.2rem; font-weight: 800; }
.auth-card .sub { margin: 0 0 1.4rem; color: var(--muted); font-size: .9rem; }
.auth-card form { text-align: left; }
.auth-card label { display: block; margin: 0 0 .35rem; font-size: .82rem; font-weight: 700; color: var(--muted); }
.auth-card input { width: 100%; margin-bottom: 1rem; padding: .8rem .9rem; font: inherit; color: var(--text); background: var(--hover);
                   border: 1px solid var(--line); border-radius: 12px; }
.auth-card input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--active); }
.grad-btn { width: 100%; padding: .85rem; font: inherit; font-weight: 800; color: #fff; background: var(--grad); border: 0; border-radius: 12px;
            cursor: pointer; box-shadow: 0 8px 20px var(--btn-shadow); }
.grad-btn:hover { filter: brightness(1.06); }
.auth-err { margin: 0 0 1rem; padding: .6rem .8rem; font-size: .88rem; text-align: left; color: var(--danger); border: 1px solid var(--danger); border-radius: 10px; }


/* Colour palettes (picked in the account menu) */
[data-palette="aurora"] { --grad: linear-gradient(135deg, #a855f7, #ec4899); --accent: #9333ea; --brand: #9333ea;
    --active: rgba(168, 85, 247, .16); --hover: rgba(168, 85, 247, .08); --glow1: rgba(168, 85, 247, .26);
    --glow2: rgba(236, 72, 153, .20); --dot: #c026d3; --btn-shadow: rgba(168, 85, 247, .30); }
[data-palette="forest"] { --grad: linear-gradient(135deg, #10b981, #047857); --accent: #059669; --brand: #047857;
    --active: rgba(16, 185, 129, .16); --hover: rgba(16, 185, 129, .08); --glow1: rgba(16, 185, 129, .24);
    --glow2: rgba(52, 211, 153, .18); --dot: #10b981; --btn-shadow: rgba(16, 185, 129, .30); }
[data-theme="dark"][data-palette="aurora"] { --accent: #c084fc; --brand: #d8b4fe; --glow1: rgba(168, 85, 247, .16); --glow2: rgba(236, 72, 153, .12); }
[data-theme="dark"][data-palette="forest"] { --accent: #34d399; --brand: #6ee7b7; --glow1: rgba(16, 185, 129, .14); --glow2: rgba(52, 211, 153, .10); }

/* Account menu */
.acct-pop { width: 20rem; padding: 1rem; border-radius: 20px; }
.acct-head { display: flex; align-items: center; gap: .8rem; padding-bottom: .9rem; }
.avatar.big { width: 3rem; height: 3rem; font-size: .95rem; }
.acct-head strong { display: block; font-size: 1rem; }
.acct-head small { color: var(--muted); font-size: .82rem; overflow-wrap: anywhere; }
.acct-label { display: block; margin: 0 0 .5rem; font-size: .78rem; font-weight: 700; color: var(--muted); }
.palettes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: .9rem; }
.pal { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .45rem; font: inherit; font-size: .78rem;
       font-weight: 700; color: var(--text); background: var(--hover); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.pal .sw { display: block; width: 100%; height: 2rem; border-radius: 8px; }
.pal.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--active); }
.sw-midnight { background: linear-gradient(135deg, #0b1d3a, #1d4ed8 60%, #00c6ff); }
.sw-aurora { background: linear-gradient(135deg, #2a1050, #a855f7 60%, #ec4899); }
.sw-forest { background: linear-gradient(135deg, #062a20, #059669 60%, #34d399); }
.acct-links { border-top: 1px solid var(--line); padding-top: .5rem; margin-top: .2rem; }
.acct-links .item { display: flex; align-items: center; gap: .7rem; padding: .6rem .5rem; font-size: .9rem; font-weight: 600; color: var(--text); border-radius: 8px; }
.acct-links .item[aria-disabled="true"] { color: var(--muted); cursor: default; }
.acct-links .soon { margin-left: auto; padding: 0 .45rem; font-size: .68rem; font-weight: 700; border: 1px solid var(--line); border-radius: 999px; }
.acct-out { border-top: 1px solid var(--line); margin-top: .4rem; padding-top: .4rem; }
.acct-out button { color: var(--danger); font-size: .92rem; }


/* Bulk selection */
.bulk-form { display: contents; }
.mh-left { display: flex; align-items: center; gap: .9rem; }
input.sel { position: relative; z-index: 1; width: 1.1rem; height: 1.1rem; margin: 0; cursor: pointer; accent-color: var(--accent); }
.mrow.picked { background: var(--active); }
.bulk { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.bulk .cnt { margin-right: .3rem; font-size: .85rem; font-weight: 600; color: var(--muted); }
.bulk .cnt b { color: var(--text); }
.bulk .pill { padding: .35rem .75rem; }
.bulk details.menu .menu-pop { left: auto; right: 0; }
.bulk .menu-pop button { display: flex; align-items: center; gap: .6rem; }
.mh.has-selection { background: var(--active); }


/* Manage account */
.settings { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 1.5rem; max-width: 62rem; }
.sets-nav { display: flex; flex-direction: column; gap: .2rem; align-self: start; }
.sets-nav a { display: flex; align-items: center; gap: .7rem; padding: .65rem .85rem; border-radius: 12px; font-weight: 700;
              font-size: .92rem; color: var(--muted); text-decoration: none; }
.sets-nav a:hover { background: var(--hover); color: var(--text); }
.sets-nav a.on { background: var(--active); color: var(--text); }
.sets-card { background: var(--solid); border: 1px solid var(--line); border-radius: 16px; padding: 1.25rem 1.5rem; min-width: 0; }
.sets-card h2 { margin: 0 0 .4rem; font-size: 1.15rem; font-weight: 800; }
.sets-card h3 { margin: 1.5rem 0 .4rem; font-size: .95rem; font-weight: 800; }
.sets-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.sets-head h2 { margin: 0; }
.muted { color: var(--muted); }
.sets-card p.muted { margin: .3rem 0 1rem; font-size: .9rem; }
small.muted { display: block; margin-top: .25rem; font-size: .8rem; }
.sets-err { margin: 0 0 1rem; padding: .65rem .9rem; font-size: .88rem; color: var(--danger); border: 1px solid var(--danger); border-radius: 12px; }
.frow { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 1rem; align-items: center; padding: .6rem .75rem;
        border-bottom: 1px solid var(--line); }
.frow:nth-of-type(odd) { background: var(--hover); }
.frow.top { align-items: start; }
.frow > label:first-child { font-size: .88rem; font-weight: 700; }
.in { width: 100%; max-width: 30rem; padding: .6rem .75rem; font: inherit; font-size: .92rem; color: var(--text); background: var(--solid);
      border: 1px solid var(--line); border-radius: 10px; }
textarea.in { max-width: 36rem; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; }
.in:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--active); }
.check { display: flex; align-items: center; gap: .6rem; font-size: .9rem; cursor: pointer; }
.check input { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); }
.sets-actions { display: flex; gap: .6rem; margin-top: 1.25rem; }
.btn-primary { display: inline-flex; align-items: center; gap: .45rem; padding: .6rem 1.2rem; font: inherit; font-size: .9rem; font-weight: 700;
               color: #fff; text-decoration: none; background: var(--grad); border: 0; border-radius: 10px; cursor: pointer;
               box-shadow: 0 6px 16px var(--btn-shadow); }
.btn-primary:hover { filter: brightness(1.06); }
.btn-ghost { display: inline-flex; align-items: center; padding: .45rem .9rem; font: inherit; font-size: .85rem; font-weight: 700; color: var(--text);
             text-decoration: none; list-style: none; background: var(--hover); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.btn-ghost:hover { background: var(--active); }
.btn-ghost::-webkit-details-marker { display: none; }
.btn-ghost.danger { color: var(--danger); }
.sets-list { list-style: none; margin: 1rem 0 0; padding: 0; border: 1px solid var(--line); border-radius: 14px; }
.sets-list li { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; }
.sets-list li + li { border-top: 1px solid var(--line); }
.sets-list form { margin: 0; }
.sets-list .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sets-list .grow strong { margin-right: .4rem; }
.sets-inline { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.sets-inline .in { flex: 1 1 12rem; max-width: 18rem; }
.pop-form { min-width: 16rem; right: 0; left: auto; }
.pop-form form { display: flex; gap: .4rem; padding: .3rem; }
.pop-form .in { flex: 1; }
.acct-links a.item { text-decoration: none; }
.acct-links a.item:hover { background: var(--hover); }


/* Contacts */
.ch { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1.1rem 1.5rem .8rem; }
.ch h1 { margin: 0; font-size: 1.25rem; font-weight: 800; }
.ch small { display: block; color: var(--muted); font-size: .82rem; font-weight: 500; }
.csearch { position: relative; flex: 1; min-width: 12rem; max-width: 30rem; margin-left: auto; margin-bottom: 0; }
.csearch .ic { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--muted); }
.csearch input { width: 100%; padding: .7rem .9rem .7rem 2.7rem; font: inherit; font-size: .92rem; color: var(--text);
                 background: var(--hover); border: 1px solid var(--line); border-radius: 12px; }
.csearch input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--active); }
.btn-add { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.2rem; font: inherit; font-size: .92rem; font-weight: 700;
           color: #fff; background: var(--grad); border: 0; border-radius: 12px; cursor: pointer; box-shadow: 0 8px 18px var(--btn-shadow); }
.btn-add:hover { filter: brightness(1.06); }
.ctabs { padding: 0 1.5rem .6rem; border-bottom: 1px solid var(--line); }
.clist { flex: 1; min-height: 0; overflow: auto; padding: .25rem 1rem 1rem; }
.cgroup { margin: 1.1rem .75rem .3rem; font-size: .8rem; font-weight: 800; color: var(--brand); }
.crow { display: grid; grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 14rem) auto; align-items: center; gap: 1rem;
        padding: .7rem .75rem; border-radius: 14px; }
.crow:hover { background: var(--hover); }
.cav { width: 2.9rem; height: 2.9rem; display: grid; place-items: center; border-radius: 50%; color: #fff; font-size: .95rem; font-weight: 800; }
.av-0 { background: linear-gradient(135deg, #f59e0b, #ea580c); }
.av-1 { background: linear-gradient(135deg, #10b981, #059669); }
.av-2 { background: linear-gradient(135deg, #f87171, #ea580c); }
.av-3 { background: linear-gradient(135deg, #38bdf8, #2563eb); }
.av-4 { background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.av-5 { background: linear-gradient(135deg, #2dd4bf, #0d9488); }
.cwho { min-width: 0; }
.cwho strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cwho small { display: block; margin-top: .1rem; color: var(--muted); font-size: .85rem; overflow-wrap: anywhere; }
.ccomp { color: var(--muted); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cops { display: flex; align-items: center; gap: .1rem; }
.cops form { margin: 0; }

span.icon-btn.done { color: var(--brand); cursor: default; }
.gal-note { margin: .6rem .75rem 0; font-size: .82rem; color: var(--muted); }

.sets-note { margin: 1rem 0; padding: .9rem 1rem; background: var(--active); border: 1px solid var(--line); border-radius: 12px; font-size: .9rem; }
.sets-note .sets-inline { margin: .6rem 0 .2rem; }

/* Dialog (add / edit contact) */
dialog.dlg { width: min(28rem, calc(100vw - 2rem)); padding: 0; color: var(--text); background: var(--solid);
             border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 24px 70px rgba(8, 20, 50, .35); }
dialog.dlg::backdrop { background: rgba(8, 20, 50, .42); backdrop-filter: blur(3px); }
.dlg-body { padding: 1.5rem; margin: 0; }
.dlg-head { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.1rem; }
.dlg-head h2 { flex: 1; margin: 0; font-size: 1.15rem; font-weight: 800; }
.dlg-ic { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; color: var(--brand); background: var(--active); border-radius: 12px; }
.dlg-body label { display: block; margin: .9rem 0 .35rem; font-size: .82rem; font-weight: 700; color: var(--muted); }
.dlg-body .in { max-width: none; }
.dlg-foot { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.5rem; }
.dlg-foot .btn-ghost, .dlg-foot .btn-primary { padding: .7rem 1.4rem; border-radius: 12px; font-size: .92rem; }

/* Workspace cards (sidebar) */
.ws { margin-top: auto; display: flex; flex-direction: column; gap: .5rem; padding-top: .5rem; }
.ws-label { margin: 0 .3rem .1rem; font-size: .78rem; font-weight: 700; color: var(--muted); }
.ws-card { display: flex; align-items: center; gap: .75rem; padding: .65rem .75rem; text-decoration: none; color: var(--text);
           background: var(--hover); border: 1px solid var(--line); border-radius: 14px; }
.ws-card:hover { background: var(--active); }
.ws-ic { width: 2.3rem; height: 2.3rem; flex: none; display: grid; place-items: center; color: #fff; border-radius: 10px; }
.ws-talk { background: linear-gradient(135deg, #14b8a6, #0d9488); }
.ws-cal { background: linear-gradient(135deg, #6366f1, #4f46e5); }
.ws-drive { background: linear-gradient(135deg, #fb923c, #f97316); }
.ws-t { flex: 1; min-width: 0; line-height: 1.25; }
.ws-t b { display: block; font-size: .9rem; }
.ws-t small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .76rem; color: var(--muted); }
.ws-go { color: var(--muted); width: .95rem; height: .95rem; }

/* Smaller screens */
@media (max-width: 900px) {
    .app { display: block; height: auto; min-height: 100vh; padding: .6rem; }
    .col { min-height: calc(100vh - 1.2rem); }
    .panel { overflow: visible; }
    .panel.bare { overflow: visible; }
    .mlist, .mview { overflow: visible; }
    .side { position: fixed; z-index: 50; top: .6rem; bottom: .6rem; left: .6rem; width: 17rem; transform: translateX(-120%);
            transition: transform .2s; background: var(--solid); }
    .side.open { transform: none; }
    .backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(5, 12, 30, .45); }
    .menu-btn { display: inline-grid; }
    .acct .who, .seg a span { display: none; }
    .search kbd { display: none; }
    .search input { padding-right: .8rem; }
    .mrow { grid-template-columns: 1.2rem minmax(0, 1fr) 2rem auto; gap: .3rem .6rem; }
    .mrow .sel { grid-row: 1; }
    .mrow .dot { display: none; }
    .mrow .who { grid-column: 2; }
    .mrow .star { grid-column: 3; grid-row: 1; }
    .mrow time { grid-column: 4; grid-row: 1; }
    .mrow .subj { grid-column: 2 / -1; grid-row: 2; }
    .settings { grid-template-columns: 1fr; }
    .sets-nav { flex-direction: row; flex-wrap: wrap; }
    .frow { grid-template-columns: 1fr; gap: .4rem; }
    .crow { grid-template-columns: 3rem minmax(0, 1fr) auto; }
    .ccomp { display: none; }
    .csearch { max-width: none; flex-basis: 100%; order: 3; margin-left: 0; }
    .cw { right: 0; left: 0; width: auto; height: 90vh; border-radius: 16px 16px 0 0; }
    .cw.max { width: auto; }
}
.cf-row select { flex: 1; min-width: 0; padding: .65rem 0; font: inherit; font-size: .92rem; color: var(--text); background: transparent; border: 0; outline: 0; }

/* ---- Signature in the compose form (shown outside Quill, no box) ---- */
.cf-signature { flex: 0 0 auto; padding: 0 1rem .8rem; font-size: 14px; color: var(--text); }
.cf-signature:empty { display: none; }
.cf-signature table { border-collapse: collapse; border: 0; }
.cf-signature td, .cf-signature th { border: 0; padding: 0; }
.cf-signature img { max-width: 100%; height: auto; }
[data-theme="dark"] .cf-signature a { color: inherit !important; }

.inpre { display: flex; gap: .4rem; align-items: stretch; }
.inpre > span { display: grid; place-items: center; padding: 0 .8rem; font-size: .88rem; color: var(--muted);
                background: var(--hover); border: 1px solid var(--line); border-radius: 10px; }
.inpre > .in { flex: 1; min-width: 0; }