/* Native webmail (webmail.<domain>). Light + dark colour modes (html[data-theme] = auto | light | dark; auto follows
   the device). Brand colours come from /iodwm/brand.css (--brand, --brand-ink, --brand-text-light/-dark), generated
   per domain with readable contrast in both modes. No inline styles anywhere (CSP style-src 'self'). */

:root {
    --brand: #00acff; --brand-ink: #ffffff; --brand-text-light: #0076b8; --brand-text-dark: #5cc8ff;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --radius: 8px; --radius-sm: 6px;
}
/* light palette */
:root, html[data-theme="light"] {
    color-scheme: light;
    --bg: #f3f4f6; --surface: #ffffff; --surface-2: #f8f9fb; --surface-3: #eef0f3;
    --border: #e3e6ea; --border-strong: #cfd4da;
    --text: #1f2933; --text-2: #4b5563; --muted: #6b7280; --faint: #9aa3ad;
    --hover: #f1f3f5; --input: #ffffff;
    --link: var(--brand-text-light);
    --selected: color-mix(in srgb, var(--brand) 11%, #ffffff);
    --brand-soft: color-mix(in srgb, var(--brand) 14%, #ffffff);
    --ok-bg: #e7f6ec; --ok-text: #166534; --ok-border: #b7e2c4;
    --err-bg: #fdecec; --err-text: #9f1c1c; --err-border: #f5c2c2;
    --warn-bg: #fff7e0; --warn-text: #7a5a00; --warn-border: #f2d98c;
    --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
    --shadow-lg: 0 10px 30px rgba(16, 24, 40, .12);
    --logo-chip: transparent;
}
/* dark palette (explicit, or auto + dark device) */
html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #111417; --surface: #1d2125; --surface-2: #22272c; --surface-3: #2a3036;
    --border: #2f363d; --border-strong: #414a53;
    --text: #e6e9ec; --text-2: #c3cad1; --muted: #9aa5b1; --faint: #6f7a85;
    --hover: #262c32; --input: #161a1e;
    --link: var(--brand-text-dark);
    --selected: color-mix(in srgb, var(--brand) 22%, #1d2125);
    --brand-soft: color-mix(in srgb, var(--brand) 24%, #1d2125);
    --ok-bg: #12301d; --ok-text: #8fe0a8; --ok-border: #1f5232;
    --err-bg: #3a1618; --err-text: #ffaaa8; --err-border: #6a2a2d;
    --warn-bg: #362b0c; --warn-text: #f2d27a; --warn-border: #5e4b14;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, .5);
    --logo-chip: #f5f6f7;
}
@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] {
        color-scheme: dark;
        --bg: #111417; --surface: #1d2125; --surface-2: #22272c; --surface-3: #2a3036;
        --border: #2f363d; --border-strong: #414a53;
        --text: #e6e9ec; --text-2: #c3cad1; --muted: #9aa5b1; --faint: #6f7a85;
        --hover: #262c32; --input: #161a1e;
        --link: var(--brand-text-dark);
        --selected: color-mix(in srgb, var(--brand) 22%, #1d2125);
        --brand-soft: color-mix(in srgb, var(--brand) 24%, #1d2125);
        --ok-bg: #12301d; --ok-text: #8fe0a8; --ok-border: #1f5232;
        --err-bg: #3a1618; --err-text: #ffaaa8; --err-border: #6a2a2d;
        --warn-bg: #362b0c; --warn-text: #f2d27a; --warn-border: #5e4b14;
        --shadow: 0 1px 2px rgba(0, 0, 0, .4);
        --shadow-lg: 0 10px 30px rgba(0, 0, 0, .5);
        --logo-chip: #f5f6f7;
    }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body { font-family: var(--font); font-size: 14px; line-height: 1.45; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.iodwm-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.iodwm-hidden { display: none !important; }
html.js .iodwm-js-hide { display: none; }
.iodwm-muted { color: var(--muted); }
.iodwm-inline { display: inline; margin: 0; }
.iodwm-link { color: var(--link); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85em; background: var(--surface-3); padding: 1px 5px; border-radius: 4px; }

/* ── icons (masks, coloured by currentColor) ─────────────── */
.iodwm-icon { display: inline-block; width: 16px; height: 16px; flex: none; background: currentColor; vertical-align: -3px;
    -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.iodwm-btn .iodwm-icon { margin-right: 6px; }
.iodwm-icon-pen { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E"); }
.iodwm-icon-gear { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z'/%3E%3C/svg%3E"); }
.iodwm-icon-exit { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='m16 17 5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E"); }
.iodwm-icon-theme-auto { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 3a9 9 0 0 1 0 18Z' fill='black'/%3E%3C/svg%3E"); }
.iodwm-icon-theme-light { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E"); }
.iodwm-icon-theme-dark { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z'/%3E%3C/svg%3E"); }
.iodwm-icon-reply { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 17-5-5 5-5'/%3E%3Cpath d='M20 18v-2a4 4 0 0 0-4-4H4'/%3E%3C/svg%3E"); }
.iodwm-icon-replyall { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 17-5-5 5-5'/%3E%3Cpath d='m12 17-5-5 5-5'/%3E%3Cpath d='M22 18v-2a4 4 0 0 0-4-4H7'/%3E%3C/svg%3E"); }
.iodwm-icon-forward { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 17 5-5-5-5'/%3E%3Cpath d='M4 18v-2a4 4 0 0 1 4-4h12'/%3E%3C/svg%3E"); }
.iodwm-icon-send { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E"); }
.iodwm-icon-clip, .iodwm-clip { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.4 11 12.3 20.2a6 6 0 0 1-8.5-8.5l9.2-9.2a4 4 0 0 1 5.7 5.7l-9.2 9.2a2 2 0 0 1-2.8-2.8l8.5-8.5'/%3E%3C/svg%3E"); }
.iodwm-clip { display: inline-block; width: 13px; height: 13px; margin-right: 4px; vertical-align: -2px; background: var(--muted);
    -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }

/* ── brand mark ─────────────────────────────────────────── */
.iodwm-brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; vertical-align: middle; }
.iodwm-brand-logo { display: block; height: 32px; width: auto; max-width: 180px; object-fit: contain; flex: none; border-radius: 6px; }
.iodwm-logo-dark { display: none; }
html[data-theme="dark"] .iodwm-logo-light:not(.iodwm-logo-only) { display: none; }
html[data-theme="dark"] .iodwm-logo-dark { display: block; }
html[data-theme="dark"] .iodwm-logo-only { background: var(--logo-chip); padding: 3px 6px; }
@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .iodwm-logo-light:not(.iodwm-logo-only) { display: none; }
    html[data-theme="auto"] .iodwm-logo-dark { display: block; }
    html[data-theme="auto"] .iodwm-logo-only { background: var(--logo-chip); padding: 3px 6px; }
}
.iodwm-monogram { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 9px;
    background: var(--brand); color: var(--brand-ink); font-weight: 750; font-size: 17px; letter-spacing: -.02em; box-shadow: var(--shadow); }
.iodwm-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.iodwm-brand-name { font-weight: 650; font-size: 15px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iodwm-brand-domain { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iodwm-brand-lg .iodwm-brand-logo { height: 56px; max-width: 240px; }
.iodwm-brand-lg .iodwm-monogram { width: 56px; height: 56px; border-radius: 14px; font-size: 28px; }

/* ── buttons & inputs ───────────────────────────────────── */
.iodwm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0; padding: 6px 12px; min-height: 32px; border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: 13px; font-weight: 500; cursor: pointer; line-height: 1.2; white-space: nowrap; }
.iodwm-btn:hover { background: var(--hover); text-decoration: none; }
.iodwm-btn:disabled { opacity: .55; cursor: not-allowed; }
.iodwm-btn-primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); font-weight: 600; }
.iodwm-btn-primary:hover { background: color-mix(in srgb, var(--brand) 88%, #000); border-color: color-mix(in srgb, var(--brand) 88%, #000); }
.iodwm-btn-danger { color: var(--err-text); }
.iodwm-btn-danger:hover { background: var(--err-bg); border-color: var(--err-border); }
.iodwm-linkbtn { border: 0; background: none; padding: 0; cursor: pointer; }
input[type=text], input[type=search], input[type=password], input[type=email], select, textarea {
    background: var(--input); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
input[type=text]:focus, input[type=search]:focus, input[type=password]:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 0; border-color: var(--brand); }
input[type=checkbox], input[type=radio] { accent-color: var(--brand); width: 16px; height: 16px; }

/* ── notices ────────────────────────────────────────────── */
.iodwm-notice { margin: 10px 12px 0; padding: 9px 12px; border-radius: var(--radius-sm); background: var(--ok-bg); color: var(--ok-text); border: 1px solid var(--ok-border); font-size: 13px; }
.iodwm-notice.error, .iodwm-notice-error { background: var(--err-bg); color: var(--err-text); border-color: var(--err-border); }
.iodwm-notice-sub { display: block; margin-top: 2px; opacity: .9; }

/* ── sign-in / notice cards ─────────────────────────────── */
.iodwm-login-body { min-height: 100%; }
.login-page { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 3.5rem 1.25rem 2rem;
    background: radial-gradient(1200px 500px at 50% -10%, var(--brand-soft), transparent 70%), var(--bg); }
.login-tools { position: absolute; top: 14px; right: 16px; }
.login-card { width: 100%; max-width: 24rem; background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--brand);
    border-radius: 12px; padding: 2rem 1.75rem 1.5rem; box-shadow: var(--shadow-lg); }
.login-brand { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; margin-bottom: 1.25rem; }
.login-title { margin: 6px 0 0; font-size: 1.4rem; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
.login-domain { margin: 0; color: var(--muted); font-size: .9rem; }
.login-lead { margin: 0 0 1.25rem; color: var(--text-2); font-size: .95rem; text-align: center; }
.login-card label { display: block; margin-bottom: .35rem; font-size: .85rem; font-weight: 600; color: var(--text-2); }
.login-card input[type=text], .login-card input[type=password] { width: 100%; margin-bottom: 1rem; padding: .62rem .75rem; font-size: 1rem; }
.login-submit { width: 100%; min-height: 42px; font-size: 1rem; margin-top: .25rem; }
.login-error { margin: 0 0 1rem; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--err-text); background: var(--err-bg); border: 1px solid var(--err-border); font-size: .9rem; }
.login-info { margin: 0 0 1rem; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--ok-text); background: var(--ok-bg); border: 1px solid var(--ok-border); font-size: .9rem; }
.login-form { display: contents; }
.login-switch { text-align: center; margin: 14px 0 0; font-size: .9rem; }
/* "Powered by IODream" (shared PoweredBy component; same wording, link and look as the admin sign-in and side menu) */
.powered-by { margin: 1.25rem 0 0; padding-top: .85rem; border-top: 1px solid var(--border); text-align: center; font-size: .75rem; color: var(--faint); }
.powered-by a { color: inherit; text-decoration: none; }
.powered-by a:hover { color: var(--muted); text-decoration: underline; }
.iodwm-notice-card { text-align: center; }
.iodwm-notice-title { margin: 0 0 .5rem; font-size: 1.3rem; }
.iodwm-ref { font-size: 12px; }

/* card (settings and fallbacks) */
.iodwm-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); }

/* ── app shell ─────────────────────────────────────────── */
.iodwm-app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
.iodwm-top { flex: none; display: flex; align-items: center; gap: 14px; height: 58px; padding: 0 16px; background: var(--surface);
    border-bottom: 1px solid var(--border); border-top: 3px solid var(--brand); }
.iodwm-top-brand { color: var(--text); min-width: 0; flex: 0 1 auto; margin-right: 6px; }
.iodwm-top-brand:hover { text-decoration: none; }
.iodwm-compose-btn { min-height: 34px; padding: 6px 14px; }
.iodwm-top-user { display: flex; align-items: center; gap: 4px; min-width: 0; margin-left: auto; }
.iodwm-top-link, .iodwm-theme-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: var(--radius-sm); color: var(--text-2); font-size: 13px; }
.iodwm-top-link:hover, .iodwm-theme-toggle:hover { background: var(--hover); text-decoration: none; color: var(--text); }
.iodwm-top-link.active { color: var(--link); background: var(--brand-soft); }
.iodwm-theme-toggle { border: 1px solid var(--border); }
.iodwm-user { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 24vw; padding: 0 8px; font-size: 13px; }

.iodwm-main { flex: 1; display: flex; min-height: 0; }

/* folders */
.iodwm-folders { flex: none; width: 228px; background: var(--surface-2); border-right: 1px solid var(--border); overflow-y: auto; padding: 10px 8px; display: flex; flex-direction: column; }
.iodwm-folders ul { list-style: none; margin: 0; padding: 0; }
.iodwm-folders li a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; margin-bottom: 2px; color: var(--text-2); border-radius: var(--radius-sm); }
.iodwm-folders li a:hover { background: var(--hover); text-decoration: none; color: var(--text); }
.iodwm-folders li.active a { background: var(--selected); color: var(--link); font-weight: 600; box-shadow: inset 3px 0 0 var(--brand); }
.iodwm-folders li.iodwm-d1 a { padding-left: 26px; } .iodwm-folders li.iodwm-d2 a { padding-left: 42px; }
.iodwm-folders li.iodwm-d3 a { padding-left: 58px; } .iodwm-folders li.iodwm-d4 a { padding-left: 74px; }
.iodwm-folders li.iodwm-d5 a, .iodwm-folders li.iodwm-d6 a { padding-left: 90px; }
.iodwm-fname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iodwm-badge { flex: none; background: var(--brand); color: var(--brand-ink); border-radius: 10px; padding: 0 7px; font-size: 11.5px; line-height: 18px; font-weight: 700; }
.iodwm-count { flex: none; color: var(--muted); font-size: 12px; }
.iodwm-folders-foot { margin: auto 10px 2px; padding-top: 14px; color: var(--faint); font-size: 11.5px; }
.iodwm-folders-domain { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iodwm-folders-foot .powered-by { margin: 6px 0 0; padding: 6px 0 0; text-align: left; }
.iodwm-credit-phone { display: none; }
.iodwm-credit-phone .powered-by { margin: 0; padding: 10px 0 14px; border-top: 0; }
.iodwm-ficon { flex: none; width: 16px; height: 16px; background: var(--muted); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat;
    --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 6a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z'/%3E%3C/svg%3E"); }
.iodwm-ficon-inbox { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.5 5h13L22 12v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-6Z'/%3E%3C/svg%3E"); }
.iodwm-ficon-sent { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3C/svg%3E"); }
.iodwm-ficon-drafts { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E"); }
.iodwm-ficon-trash { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14'/%3E%3C/svg%3E"); }
.iodwm-ficon-junk { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m5.6 5.6 12.8 12.8'/%3E%3C/svg%3E"); }
.iodwm-folders li.active .iodwm-ficon, .iodwm-ficon-inbox { background: var(--link); }

/* list */
.iodwm-list { flex: none; width: 400px; display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--border); min-height: 0; }
.iodwm-fpick { display: none; }
.iodwm-search { flex: none; display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.iodwm-search input[type=search] { flex: 1; min-width: 0; padding: 7px 10px; font-size: 14px; background: var(--surface-2); }
.iodwm-bulk { flex: 1; display: flex; flex-direction: column; min-height: 0; margin: 0; }
.iodwm-toolbar { flex: none; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border); margin: 0; }
.iodwm-check { display: inline-flex; align-items: center; gap: 8px; padding-right: 4px; }
.iodwm-move { display: inline-flex; gap: 4px; }
.iodwm-move select { max-width: 140px; padding: 5px 6px; font-size: 13px; min-height: 32px; }
.iodwm-messages { list-style: none; margin: 0; padding: 0; flex: 1; overflow-y: auto; }
.iodwm-messages li { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px 9px 12px; border-bottom: 1px solid var(--border); border-left: 3px solid transparent; }
.iodwm-messages li:hover { background: var(--hover); }
.iodwm-messages li.open { background: var(--selected); }
.iodwm-messages li input { margin-top: 2px; flex: none; }
.iodwm-row { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr auto; column-gap: 8px; row-gap: 1px; color: var(--text); }
.iodwm-row:hover { text-decoration: none; }
.iodwm-row-from { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.iodwm-row-date { color: var(--muted); font-size: 12px; white-space: nowrap; }
.iodwm-row-subject { grid-column: 1 / span 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font-size: 13px; }
.iodwm-messages li.unread .iodwm-row-from, .iodwm-messages li.unread .iodwm-row-subject { font-weight: 700; color: var(--text); }
.iodwm-messages li.unread { border-left-color: var(--brand); }
.iodwm-empty { padding: 32px 16px; color: var(--muted); text-align: center; }
.iodwm-pager { flex: none; display: flex; gap: 8px; align-items: center; justify-content: flex-end; padding: 8px 12px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; }
.iodwm-pager span { margin-right: auto; }

/* reading pane */
.iodwm-read { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--surface); }
.iodwm-read-head { flex: none; border-bottom: 1px solid var(--border); }
.iodwm-back { display: none; }
.iodwm-subject { margin: 14px 18px 8px; font-size: 1.25rem; font-weight: 650; overflow-wrap: anywhere; color: var(--text); }
.iodwm-headers { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; margin: 0 18px 12px; font-size: 13px; }
.iodwm-headers dt { color: var(--muted); }
.iodwm-headers dd { margin: 0; overflow-wrap: anywhere; color: var(--text-2); }
.iodwm-images-bar { margin: 0 18px 12px; padding: 8px 10px; background: var(--warn-bg); color: var(--warn-text); border: 1px solid var(--warn-border); border-radius: var(--radius-sm); font-size: 13px; }
.iodwm-attachments { list-style: none; margin: 0 18px 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.iodwm-attachments li { border: 1px solid var(--border); background: var(--surface-2); border-radius: var(--radius-sm); padding: 5px 9px; font-size: 13px; }
.iodwm-size { color: var(--muted); font-size: 12px; }
.iodwm-body-wrap { flex: 1; display: flex; min-height: 0; background: var(--surface); }
.iodwm-body { flex: 1; width: 100%; border: 0; min-height: 0; background: transparent; }
.iodwm-body-html .iodwm-body { background: #fff; }
/* dark mode: HTML mail on a white "paper" card (it was designed for white); plain text follows the theme */
html[data-theme="dark"] .iodwm-body-html { background: var(--bg); padding: 12px; }
html[data-theme="dark"] .iodwm-body-html .iodwm-body { border-radius: 8px; box-shadow: var(--shadow-lg); }
@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .iodwm-body-html { background: var(--bg); padding: 12px; }
    html[data-theme="auto"] .iodwm-body-html .iodwm-body { border-radius: 8px; box-shadow: var(--shadow-lg); }
}
.iodwm-placeholder { margin: auto; color: var(--faint); font-size: 15px; padding: 2rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.iodwm-placeholder-mark { opacity: .9; }
.iodwm-placeholder-mark .iodwm-brand-logo { height: 48px; }
.iodwm-placeholder-mark .iodwm-monogram { width: 54px; height: 54px; font-size: 26px; border-radius: 14px; }

/* ── compose ────────────────────────────────────────────── */
.iodwm-compose, .iodwm-settings { flex: 1; min-width: 0; overflow-y: auto; background: var(--bg); }
.iodwm-compose-form { max-width: 980px; margin: 16px auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.iodwm-compose-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.iodwm-compose-title { margin: 0; font-size: 1.1rem; font-weight: 650; }
.iodwm-autosave { color: var(--muted); font-size: 12px; }
.iodwm-compose-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.iodwm-compose-form .iodwm-notice { margin: 12px 16px 0; }
.iodwm-fields { padding: 4px 16px; }
.iodwm-field { position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.iodwm-field > label { flex: none; width: 64px; color: var(--muted); font-size: 13px; }
.iodwm-field input[type=text], .iodwm-field select { flex: 1; min-width: 0; border: 0; background: transparent; padding: 7px 4px; font-size: 14px; border-radius: 4px; }
.iodwm-field input[type=text]:focus, .iodwm-field select:focus { outline: 2px solid color-mix(in srgb, var(--brand) 45%, transparent); border-color: transparent; }
.iodwm-field select { background: var(--surface); }
.iodwm-from-fixed { flex: 1; padding: 7px 4px; color: var(--text-2); }
.iodwm-field-links { flex: none; display: flex; gap: 10px; font-size: 13px; }
.iodwm-editor-wrap { padding: 10px 16px 6px; }
.iodwm-editor-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px; background: var(--surface-2); border: 1px solid var(--border); border-bottom: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.iodwm-format select { padding: 4px 6px; font-size: 13px; min-height: 30px; }
.iodwm-tools { display: inline-flex; gap: 2px; align-items: center; flex-wrap: wrap; }
html:not(.js) .iodwm-tools { display: none; }
.iodwm-editor-wrap[data-format="text"] .iodwm-tools { display: none; }
.iodwm-tool { min-width: 32px; height: 30px; padding: 0 8px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--text-2); cursor: pointer; font-size: 13px; }
.iodwm-tool:hover { background: var(--hover); border-color: var(--border); color: var(--text); }
.iodwm-tool-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }
.iodwm-body-src, .iodwm-editor { display: block; width: 100%; min-height: 320px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    background: var(--input); color: var(--text); font-size: 14px; line-height: 1.55; resize: vertical; }
.iodwm-editor-wrap[data-format="text"] .iodwm-body-src { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; }
.iodwm-editor { overflow-y: auto; max-height: 62vh; }
.iodwm-editor:focus { outline: 2px solid color-mix(in srgb, var(--brand) 45%, transparent); outline-offset: -1px; }
.iodwm-editor blockquote { margin: 8px 0 8px 4px; padding-left: 12px; border-left: 3px solid var(--border-strong); color: var(--text-2); }
.iodwm-editor img { max-width: 100%; height: auto; }
.iodwm-editor a { color: var(--link); }
.iodwm-editor .iodwm-signature { color: var(--text-2); }
.iodwm-editor-sig .iodwm-body-src, .iodwm-editor-sig .iodwm-editor { min-height: 120px; }
.iodwm-attach { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 16px 16px; }
.iodwm-attach-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.iodwm-attach-list:empty { display: none; }
.iodwm-attach-list li { border: 1px solid var(--border); background: var(--surface-2); border-radius: var(--radius-sm); padding: 5px 10px; font-size: 13px; }
.iodwm-attach-list label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.iodwm-attach-name { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iodwm-attach-new li.too-big { border-color: var(--err-border); background: var(--err-bg); color: var(--err-text); }
.iodwm-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.iodwm-file-input:focus-visible + .iodwm-attach-hint { text-decoration: underline; }
html:not(.js) .iodwm-file-input { position: static; width: auto; height: auto; opacity: 1; }
.iodwm-attach-hint { font-size: 12px; }
.iodwm-attach-item { display: inline-flex; align-items: center; gap: 6px; }
html.js .iodwm-attach-list input[name=keep] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.iodwm-attach-remove { border: 0; background: transparent; color: var(--muted); font-size: 16px; line-height: 1; padding: 0 2px; margin-left: 2px; cursor: pointer; border-radius: 4px; }
.iodwm-attach-remove:hover, .iodwm-attach-remove:focus-visible { color: var(--err-text); background: var(--err-bg); }
/* Drop zone: files dragged over the compose window (works in light and dark through the theme variables). */
.iodwm-compose-form { position: relative; }
.iodwm-compose-form.iodwm-drop-active { outline: 2px dashed var(--brand); outline-offset: -6px; }
.iodwm-compose-form.iodwm-drop-active::after {
    content: "Drop files to attach"; position: absolute; inset: 6px; display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--brand-soft) 88%, transparent); color: var(--link); font-size: 1.2rem; font-weight: 650;
    border-radius: var(--radius); pointer-events: none; z-index: 5;
}
.iodwm-attach-hint.error { color: var(--err-text); }

/* address suggestions */
.iodwm-suggest { position: absolute; left: 74px; right: 0; top: 100%; z-index: 20; margin: 2px 0 0; padding: 4px; list-style: none; background: var(--surface);
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); max-height: 240px; overflow-y: auto; }
.iodwm-suggest li { padding: 6px 10px; border-radius: 4px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iodwm-suggest li.active, .iodwm-suggest li:hover { background: var(--selected); }

/* ── settings ───────────────────────────────────────────── */
.iodwm-settings-inner { max-width: 760px; margin: 0 auto; padding: 20px 16px 40px; }
.iodwm-page-title { margin: 0 0 4px; font-size: 1.35rem; font-weight: 700; }
.iodwm-settings-inner > p { margin: 0 0 14px; }
.iodwm-settings .iodwm-notice { margin: 0 0 14px; }
.iodwm-settings .iodwm-card h2 { margin: 20px 0 6px; font-size: 1rem; font-weight: 650; }
.iodwm-settings .iodwm-card h2:first-of-type { margin-top: 0; }
.iodwm-settings .iodwm-card > p { margin: 0 0 10px; font-size: 13px; }
.iodwm-settings .iodwm-editor-wrap { padding: 0 0 8px; }
.iodwm-settings .iodwm-check { display: flex; margin: 6px 0; }
.iodwm-field-inline { display: inline-flex; align-items: center; gap: 10px; }
.iodwm-field-inline select { padding: 6px 8px; min-height: 34px; }
.iodwm-radios { display: flex; gap: 10px; flex-wrap: wrap; }
.iodwm-radio-card { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius); cursor: pointer; min-width: 170px; }
.iodwm-radio-card:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); background: var(--brand-soft); }
.iodwm-swatch { width: 34px; height: 24px; border-radius: 5px; border: 1px solid var(--border-strong); flex: none; }
.iodwm-swatch-light { background: linear-gradient(135deg, #ffffff 50%, #f3f4f6 50%); }
.iodwm-swatch-dark { background: linear-gradient(135deg, #1d2125 50%, #111417 50%); }
.iodwm-swatch-auto { background: linear-gradient(135deg, #ffffff 50%, #1d2125 50%); }
.iodwm-form-actions { display: flex; gap: 10px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); }

/* ── narrower screens ───────────────────────────────────── */
@media (max-width: 1100px) {
    .iodwm-list { width: 330px; }
    .iodwm-user { display: none; }
}
@media (max-width: 820px) {
    .iodwm-top { height: 54px; gap: 8px; padding: 0 10px; }
    .iodwm-brand-domain, .iodwm-top-label, .iodwm-theme-label, .iodwm-hide-phone { display: none; }
    .iodwm-top-link, .iodwm-theme-toggle { padding: 8px; }
    .iodwm-compose-btn span:last-child { display: none; }
    .iodwm-compose-btn .iodwm-icon { margin: 0; }
    .iodwm-compose-btn { padding: 6px 10px; }
    .iodwm-folders { display: none; }
    .iodwm-fpick { display: flex; padding: 10px 12px 0; }
    .iodwm-credit-phone { display: block; flex: none; }
    .iodwm-pager { border-bottom: 1px solid var(--border); }
    .iodwm-fpick select { flex: 1; padding: 8px 10px; font-size: 15px; font-weight: 600; min-height: 40px; }
    .iodwm-list { flex: 1; width: auto; border-right: 0; }
    .iodwm-read { display: none; }
    .iodwm-has-open .iodwm-list { display: none; }
    .iodwm-has-open .iodwm-read { display: flex; }
    .iodwm-back { display: inline-flex; }
    .iodwm-compose-form { margin: 0; border-radius: 0; border-left: 0; border-right: 0; min-height: 100%; }
    .iodwm-compose-head { position: sticky; top: 0; z-index: 5; background: var(--surface); }
    .iodwm-compose-actions { margin-left: 0; width: 100%; }
    .iodwm-compose-actions .iodwm-btn { flex: 1; }
    .iodwm-field > label { width: 52px; }
    .iodwm-suggest { left: 62px; }
    .iodwm-body-src, .iodwm-editor { min-height: 240px; }
    .iodwm-radio-card { min-width: 0; flex: 1; }
    .login-card { padding: 1.5rem 1.25rem 1.25rem; }
}

/* ── compose: save status and the "leave without saving?" dialog ── */
.iodwm-autosave.error { color: var(--err-text); }
.iodwm-modal-backdrop { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center;
    padding: 16px; background: rgba(16, 24, 40, .45); }
.iodwm-modal-backdrop.open { display: flex; }
html[data-theme="dark"] .iodwm-modal-backdrop { background: rgba(0, 0, 0, .6); }
body.iodwm-modal-on { overflow: hidden; }
.iodwm-modal { width: 100%; max-width: 440px; background: var(--surface); color: var(--text); border: 1px solid var(--border);
    border-top: 3px solid var(--brand); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 20px 22px 18px; }
.iodwm-modal-title { margin: 0 0 8px; font-size: 18px; font-weight: 600; }
.iodwm-modal-text { margin: 0 0 6px; color: var(--text-2); line-height: 1.45; }
.iodwm-modal-sub { margin: 0 0 6px; color: var(--muted); font-size: 13px; }
.iodwm-modal-sub:empty, .iodwm-modal-error:empty { display: none; }
.iodwm-modal-error { margin: 8px 0 0; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 13px;
    background: var(--err-bg); color: var(--err-text); border: 1px solid var(--err-border); }
.iodwm-modal-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.iodwm-modal-actions .iodwm-btn-danger { border-color: var(--err-border); }
.iodwm-modal-actions .iodwm-btn-danger:hover { background: var(--err-bg); }
@media (max-width: 480px) { .iodwm-modal-actions { flex-direction: column-reverse; } .iodwm-modal-actions .iodwm-btn { width: 100%; justify-content: center; } }

/* ── part 3: app switcher, account in the top bar, folders, settings forms, calendar, contacts ── */
.iodwm-icon-mail { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
.iodwm-icon-cal { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); }
.iodwm-icon-people { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8'/%3E%3C/svg%3E"); }
.iodwm-icon-useradd { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M19 8v6M22 11h-6'/%3E%3C/svg%3E"); }
.iodwm-apps { display: flex; align-items: center; gap: 2px; margin-left: 4px; }
.iodwm-apps a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--radius-sm); color: var(--text-2); font-size: 13.5px; font-weight: 500; }
.iodwm-apps a:hover { background: var(--hover); color: var(--text); text-decoration: none; }
.iodwm-apps a.active { color: var(--link); background: var(--brand-soft); }
.iodwm-user { display: inline-flex; flex-direction: column; justify-content: center; line-height: 1.2; color: var(--text-2); max-width: 240px; }
.iodwm-user:hover { text-decoration: none; color: var(--text); }
.iodwm-user-name { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iodwm-user-email { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iodwm-folders-manage { display: flex; align-items: center; gap: 8px; margin: 8px 2px 0; padding: 7px 10px; border-top: 1px solid var(--border);
    color: var(--muted); font-size: 13px; border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.iodwm-folders-manage:hover { color: var(--text); background: var(--hover); text-decoration: none; }
.iodwm-folders-manage .iodwm-icon { width: 14px; height: 14px; }
.iodwm-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }
.iodwm-anchor { display: block; position: relative; top: -12px; }
.iodwm-settings-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 16px; }
.iodwm-settings-nav a { padding: 5px 11px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-2); font-size: 13px; }
.iodwm-settings-nav a:hover { border-color: var(--brand); color: var(--link); text-decoration: none; }
.iodwm-settings-block { margin-bottom: 16px; scroll-margin-top: 12px; }
.iodwm-label { display: block; margin: 12px 0 5px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.iodwm-settings-block input[type=text], .iodwm-settings-block input[type=email], .iodwm-settings-block input[type=password],
.iodwm-settings-block input[type=date], .iodwm-settings-block input[type=time], .iodwm-settings-block input[type=tel], .iodwm-settings-block select,
.iodwm-settings-block textarea, .iodwm-contact-form input, .iodwm-contact-form textarea { width: 100%; padding: 8px 10px; }
input[type=date], input[type=time], input[type=tel], input[type=email] { border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--input); color: var(--text); min-height: 36px; }
html[data-theme="dark"] input[type=date], html[data-theme="dark"] input[type=time] { color-scheme: dark; }
.iodwm-hint { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
.iodwm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.iodwm-grid2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
.iodwm-grid3 { display: grid; grid-template-columns: 2fr 1fr 1.4fr; gap: 8px; margin-top: 8px; }
.iodwm-span2 { grid-column: 1 / -1; }
.iodwm-pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--brand-soft); color: var(--link); }
.iodwm-pill.off { background: var(--surface-3); color: var(--muted); }
.iodwm-pre { white-space: pre-wrap; }
.iodwm-frow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.iodwm-frow input[type=text] { flex: 1 1 200px; width: auto; }
.iodwm-frow select { flex: 0 1 220px; width: auto; }
.iodwm-folder-rows { list-style: none; margin: 0 0 6px; padding: 0; }
.iodwm-folder-row { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--border); }
.iodwm-folder-row:last-child { border-bottom: 0; }
.iodwm-folder-row.is-system .iodwm-folder-label { flex: 1; color: var(--text-2); }
.iodwm-folder-row.has-error { background: var(--err-bg); border-radius: var(--radius-sm); }
.iodwm-folder-row.iodwm-d2 { padding-left: 22px; } .iodwm-folder-row.iodwm-d3 { padding-left: 40px; } .iodwm-folder-row.iodwm-d4, .iodwm-folder-row.iodwm-d5, .iodwm-folder-row.iodwm-d6 { padding-left: 58px; }
.iodwm-folder-rename { flex: 1; display: flex; gap: 8px; min-width: 0; }
.iodwm-folder-rename input[type=text] { flex: 1; min-width: 0; padding: 6px 9px; }
.iodwm-seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.iodwm-seg a { padding: 6px 12px; color: var(--text-2); font-size: 13px; border-right: 1px solid var(--border-strong); background: var(--surface); }
.iodwm-seg a:last-child { border-right: 0; }
.iodwm-seg a:hover { background: var(--hover); text-decoration: none; }
.iodwm-seg a.on { background: var(--brand-soft); color: var(--link); font-weight: 600; }

/* calendar */
.iodwm-calendar, .iodwm-contacts { flex: 1; min-width: 0; overflow-y: auto; background: var(--bg); padding: 16px 18px 30px; }
.iodwm-cal-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.iodwm-cal-head .iodwm-page-title { margin: 0 8px 0 0; min-width: 190px; }
.iodwm-cal-nav { display: inline-flex; gap: 4px; }
.iodwm-cal-head #wm-cal-new { margin-left: auto; }
.iodwm-calendar > .iodwm-notice { margin: 0 0 12px; }
.iodwm-cal-body { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 16px; align-items: start; }
.iodwm-cal-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.iodwm-cal-wd { padding: 7px 8px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.iodwm-cal-cell { min-height: 104px; padding: 4px 5px 6px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.iodwm-cal-cell:nth-child(7n) { border-right: 0; }
.iodwm-cal-cell.other { background: var(--surface-2); }
.iodwm-cal-cell.other .iodwm-cal-date { color: var(--faint); }
.iodwm-cal-date { align-self: flex-start; min-width: 24px; height: 24px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 12.5px; color: var(--text-2); }
.iodwm-cal-date:hover { background: var(--hover); text-decoration: none; }
.iodwm-cal-cell.today .iodwm-cal-date, .iodwm-cal-col.today .iodwm-cal-colhead a { background: var(--brand); color: var(--brand-ink); font-weight: 700; }
.iodwm-cal-ev { display: block; padding: 2px 6px; border-radius: 4px; font-size: 12px; color: var(--text); background: var(--brand-soft); border-left: 3px solid var(--brand);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iodwm-cal-ev:hover { text-decoration: none; filter: brightness(.97); }
.iodwm-cal-ev.allday { background: var(--brand); color: var(--brand-ink); border-left-color: transparent; }
.iodwm-cal-time { color: var(--muted); margin-right: 4px; font-variant-numeric: tabular-nums; }
.iodwm-cal-ev.allday .iodwm-cal-time { color: inherit; opacity: .85; }
.iodwm-cal-more { font-size: 11.5px; color: var(--muted); padding-left: 4px; }
.iodwm-cal-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.iodwm-cal-days.one { grid-template-columns: minmax(0, 1fr); }
.iodwm-cal-col { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; min-height: 260px; display: flex; flex-direction: column; gap: 6px; min-width: 0; box-shadow: var(--shadow); }
.iodwm-cal-colhead { font-size: 13px; font-weight: 600; }
.iodwm-cal-colhead a { color: var(--text-2); padding: 2px 8px; border-radius: 999px; display: inline-block; }
.iodwm-cal-ev.block { white-space: normal; display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; }
.iodwm-cal-ev.block .iodwm-cal-title { font-weight: 600; }
.iodwm-cal-ev.block .iodwm-pill { align-self: flex-start; }
.iodwm-cal-free { font-size: 12.5px; margin: 0; }
.iodwm-cal-add { margin-top: auto; font-size: 12.5px; color: var(--muted); }
.iodwm-cal-side { display: flex; flex-direction: column; gap: 12px; }
.iodwm-cal-side .iodwm-card { padding: 12px 14px; }
.iodwm-cal-side h2 { margin: 0 0 6px; font-size: 14px; }
.iodwm-cal-side .iodwm-card > p { margin: 0; font-size: 13px; }
.iodwm-cal-list { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.iodwm-cal-list li { padding: 5px 0; border-bottom: 1px solid var(--border); }
.iodwm-cal-list li:last-child { border-bottom: 0; }
.iodwm-cal-list li.done span:first-child { text-decoration: line-through; color: var(--muted); }
.iodwm-cal-list .late { color: var(--err-text); }
.iodwm-cal-preview { display: block; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iodwm-cal-zone { font-size: 12px; margin: 0; }
.iodwm-ev-when { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.iodwm-ev-when > div { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.iodwm-ev-when .iodwm-label { flex-basis: 100%; }
.iodwm-settings-block .iodwm-ev-when input[type=date] { flex: 1 1 150px; width: auto; }
.iodwm-settings-block .iodwm-ev-when input[type=time] { flex: 0 1 110px; width: auto; }
.iodwm-event-form .iodwm-check { margin-top: 12px; }
#wm-event-delete { display: block; margin-top: 4px; }

/* contacts */
.iodwm-contacts { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; }
.iodwm-contacts-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.iodwm-contacts-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 12px 6px; }
.iodwm-contacts-head .iodwm-page-title { margin: 0; }
.iodwm-contacts-search { padding: 4px 12px 10px; border-bottom: 1px solid var(--border); }
.iodwm-contacts-search input { width: 100%; padding: 7px 10px; background: var(--surface-2); }
.iodwm-contacts-empty { padding: 14px; margin: 0; font-size: 13px; }
.iodwm-contact-rows { list-style: none; margin: 0; padding: 4px 0; max-height: calc(100vh - 210px); overflow-y: auto; }
.iodwm-contact-rows a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; color: var(--text); }
.iodwm-contact-rows a:hover { background: var(--hover); text-decoration: none; }
.iodwm-contact-rows li.on a { background: var(--selected); box-shadow: inset 3px 0 0 var(--brand); }
.iodwm-contact-text { display: flex; flex-direction: column; min-width: 0; }
.iodwm-contact-text > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iodwm-contact-text .iodwm-muted { font-size: 12px; }
.iodwm-contact-name { font-weight: 600; }
.iodwm-avatar { flex: none; width: 32px; height: 32px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand-soft); color: var(--link); font-weight: 700; font-size: 14px; }
.iodwm-avatar.big { width: 52px; height: 52px; font-size: 22px; }
.iodwm-contact-detail > .iodwm-notice { margin: 0 0 12px; }
.iodwm-contact-none { padding: 40px 0; text-align: center; }
.iodwm-contact-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.iodwm-contact-top h2 { margin: 0; font-size: 1.25rem; }
.iodwm-contact-top p { margin: 2px 0 0; font-size: 13px; }
.iodwm-contact-fields { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px 12px; margin: 0; font-size: 14px; }
.iodwm-contact-fields dt { color: var(--muted); font-size: 13px; }
.iodwm-contact-fields dd { margin: 0; overflow-wrap: anywhere; }
.iodwm-contact-form h2 { margin: 0 0 4px; font-size: 1.1rem; }
.iodwm-add-contact { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-size: 12px; color: var(--link); }
.iodwm-add-contact .iodwm-icon { width: 14px; height: 14px; }

@media (max-width: 1100px) { .iodwm-user { display: none; } .iodwm-cal-body { grid-template-columns: minmax(0, 1fr); } .iodwm-apps .iodwm-top-label { display: none; } }
@media (max-width: 820px) {
    .iodwm-apps a { padding: 8px; }
    .iodwm-contacts { grid-template-columns: minmax(0, 1fr); padding: 10px; }
    .iodwm-calendar { padding: 10px; }
    .iodwm-cal-days { grid-template-columns: minmax(0, 1fr); }
    .iodwm-cal-cell { min-height: 64px; }
    .iodwm-cal-ev .iodwm-cal-time { display: none; }
    .iodwm-grid2, .iodwm-ev-when, .iodwm-grid3 { grid-template-columns: minmax(0, 1fr); }
}

/* ── polish: own confirm dialog fields, sidebar Settings, icon-only colour mode, sticky settings tabs ── */
.iodwm-modal-label { display: block; margin: 10px 0 4px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.iodwm-modal-input { width: 100%; padding: 8px 10px; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
.iodwm-modal-input:focus { outline: 2px solid var(--brand); outline-offset: 0; border-color: var(--brand); }
.iodwm-modal .iodwm-modal-text:last-of-type { margin-bottom: 0; }
.iodwm-side-links { margin: 8px 2px 0; padding-top: 6px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; }
.iodwm-side-link { display: flex; align-items: center; gap: 10px; padding: 7px 10px; color: var(--text-2); font-size: 13.5px; border-radius: var(--radius-sm); }
.iodwm-side-link:hover { color: var(--text); background: var(--hover); text-decoration: none; }
.iodwm-side-link.active { background: var(--selected); color: var(--link); font-weight: 600; box-shadow: inset 3px 0 0 var(--brand); }
.iodwm-side-link .iodwm-icon, .iodwm-side-link .iodwm-ficon { width: 16px; height: 16px; flex: none; }
.iodwm-side-link.active .iodwm-icon, .iodwm-side-link.active .iodwm-ficon { background: var(--link); }
.iodwm-theme-toggle.iodwm-theme-icon { width: 34px; height: 34px; padding: 0; justify-content: center; border-radius: 50%; }
.iodwm-phone-only { display: none !important; }
@media (max-width: 820px) {
    .iodwm-phone-only { display: inline-flex !important; }
    .iodwm-theme-toggle.iodwm-theme-icon { width: 36px; height: 36px; padding: 0; }
}
.iodwm-settings-inner { padding-top: 0; }
.iodwm-settings-head { position: sticky; top: 0; z-index: 20; margin: 0 -16px 14px; padding: 18px 16px 10px; background: var(--bg);
    border-bottom: 1px solid transparent; }
.iodwm-settings-head > p { margin: 0 0 8px; }
.iodwm-settings-head .iodwm-settings-nav { margin: 0; }
.iodwm-settings-nav a.active { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); font-weight: 600; }
.iodwm-settings-nav a.active:hover { color: var(--brand-ink); }
.iodwm-settings-block, .iodwm-settings .iodwm-anchor { scroll-margin-top: 150px; }
@supports (animation-timeline: scroll()) {
    .iodwm-settings-head { animation: iodwm-head-line linear both; animation-timeline: scroll(nearest); animation-range: 0 40px; }
    @keyframes iodwm-head-line { to { border-bottom-color: var(--border); box-shadow: 0 6px 12px -10px rgba(0, 0, 0, .35); } }
}
@media (max-width: 820px) {
    .iodwm-settings-head { padding-top: 12px; }
    .iodwm-settings-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .iodwm-settings-nav a { flex: none; }
    .iodwm-settings-block, .iodwm-settings .iodwm-anchor { scroll-margin-top: 130px; }
}
@media (max-width: 480px) {
    .iodwm-top { gap: 4px; padding: 0 8px; }
    .iodwm-top-brand { margin-right: 0; flex-shrink: 1; overflow: hidden; }
    .iodwm-apps { margin-left: 0; gap: 0; }
    .iodwm-apps a, .iodwm-top-link { padding: 7px; }
    .iodwm-top-user { gap: 0; }
    .iodwm-theme-toggle.iodwm-theme-icon { width: 32px; height: 32px; }
    .iodwm-top-brand .iodwm-brand-logo { height: 28px; max-width: 112px; }
    .iodwm-top-brand .iodwm-brand:has(.iodwm-brand-logo) .iodwm-brand-text { display: none; } /* the logo says it; no "RandF…" */
    .iodwm-compose-btn { padding: 6px 9px; }
}

/* ── T356: Tasks, Notes, New menu, invitations ── */
.iodwm-icon-task { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E"); }
.iodwm-icon-note { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V9Z'/%3E%3Cpath d='M15 3v6h6M7 13h10M7 17h6'/%3E%3C/svg%3E"); }
.iodwm-icon-bell { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.9 1.9 0 0 0 3.4 0'/%3E%3C/svg%3E"); }
.iodwm-icon-clock { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.iodwm-icon-pin { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12S4 16 4 10a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }

.iodwm-caltabs-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.iodwm-caltabs { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; }
.iodwm-caltabs a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 999px; color: var(--text-2); font-size: 13.5px; font-weight: 500; }
.iodwm-caltabs a:hover { background: var(--hover); text-decoration: none; color: var(--text); }
.iodwm-caltabs a.on { background: var(--surface); color: var(--link); font-weight: 600; box-shadow: var(--shadow); }
.iodwm-caltabs .iodwm-icon { width: 15px; height: 15px; }
.iodwm-newmenu { position: relative; margin-left: auto; }
.iodwm-newmenu > summary { list-style: none; cursor: pointer; gap: 6px; user-select: none; }
.iodwm-newmenu > summary::-webkit-details-marker { display: none; }
.iodwm-caret { font-size: 11px; opacity: .85; margin-left: 2px; }
.iodwm-newmenu[open] > summary { filter: brightness(.95); }
.iodwm-newmenu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 260px; padding: 6px; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.iodwm-newmenu-list a { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--radius-sm); color: var(--text); }
.iodwm-newmenu-list a:hover, .iodwm-newmenu-list a:focus-visible { background: var(--hover); text-decoration: none; }
.iodwm-newmenu-list .iodwm-icon { width: 30px; height: 30px; padding: 7px; box-sizing: border-box; border-radius: 8px; background: var(--brand-soft); color: var(--link); -webkit-mask: none; mask: none; position: relative; }
.iodwm-newmenu-list .iodwm-icon::after { content: ""; position: absolute; inset: 7px; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.iodwm-newmenu-list strong { display: block; font-size: 14px; }
.iodwm-newmenu-list small { display: block; color: var(--muted); font-size: 12px; }

.iodwm-cal-side-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.iodwm-cal-side-head h2 a { color: inherit; }
.iodwm-cal-side-add { font-size: 12.5px; font-weight: 600; }
.iodwm-cal-list li > a { color: var(--text); display: block; }
.iodwm-cal-list li > a:hover { text-decoration: none; color: var(--link); }
.iodwm-cal-tasks li { display: flex; align-items: flex-start; gap: 8px; }
.iodwm-cal-tasks li > a { flex: 1; min-width: 0; }
.iodwm-cal-list li.done > a span:first-child { text-decoration: line-through; color: var(--muted); }
.iodwm-task-tick { margin: 0; display: inline-flex; }
.iodwm-tick { flex: none; width: 18px; height: 18px; margin-top: 1px; padding: 0; border-radius: 999px; border: 2px solid var(--border-strong); background: var(--surface); cursor: pointer; position: relative; }
.iodwm-tick:hover { border-color: var(--brand); }
.iodwm-tick.on { background: var(--brand); border-color: var(--brand); }
.iodwm-tick.on::after { content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid var(--brand-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }

.iodwm-groupware { display: block; }
.iodwm-gw { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; }
.iodwm-gw .iodwm-contacts-head .iodwm-seg a { padding: 4px 10px; }
.iodwm-task-rows, .iodwm-note-rows { list-style: none; margin: 0; padding: 4px 0; max-height: calc(100vh - 250px); overflow-y: auto; }
.iodwm-task-rows li { display: flex; align-items: center; gap: 4px; padding-left: 12px; }
.iodwm-task-rows li > a, .iodwm-note-rows li > a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 9px 12px 9px 6px; color: var(--text); }
.iodwm-note-rows li > a { padding-left: 12px; }
.iodwm-task-rows li > a:hover, .iodwm-note-rows li > a:hover { text-decoration: none; }
.iodwm-task-rows li:hover, .iodwm-note-rows li:hover { background: var(--hover); }
.iodwm-task-rows li.on, .iodwm-note-rows li.on { background: var(--selected); box-shadow: inset 3px 0 0 var(--brand); }
.iodwm-task-rows li.done .iodwm-contact-name { text-decoration: line-through; color: var(--muted); }
.iodwm-task-rows .iodwm-muted { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: center; }
.iodwm-task-rows .late { color: var(--err-text); font-weight: 600; }
.iodwm-task-bell { display: inline-flex; align-items: center; gap: 3px; }
.iodwm-task-bell .iodwm-icon { width: 12px; height: 12px; vertical-align: 0; }
.iodwm-pill-high { background: var(--err-bg); color: var(--err-text); }
.iodwm-task-remind { display: flex; gap: 6px; }
.iodwm-task-remind input[type=date] { flex: 1 1 130px; min-width: 0; }
.iodwm-task-remind input[type=time] { flex: 0 1 110px; min-width: 0; }
.iodwm-gw-none { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 60px 20px; text-align: center; }
.iodwm-gw-none > .iodwm-icon { width: 40px; height: 40px; color: var(--faint); }
.iodwm-gw-none p { margin: 0; }
.iodwm-gw-delete { display: block; margin-top: 10px; }
.iodwm-contact-detail .iodwm-settings-block { max-width: 720px; }

.iodwm-note-dot { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--border-strong); }
.iodwm-note-cat { align-self: flex-start; margin-top: 3px; }
.iodwm-note-title { width: 100%; font-size: 1.25rem; font-weight: 600; border: 0 !important; border-bottom: 1px solid var(--border) !important; border-radius: 0 !important; padding: 4px 0 8px !important; background: transparent !important; }
.iodwm-note-title:focus { outline: none; border-bottom-color: var(--brand) !important; }
.iodwm-note-when { margin: 6px 0 10px; font-size: 12px; }
.iodwm-note-form textarea { width: 100%; min-height: 260px; line-height: 1.55; }
.iodwm-note-form { border-top: 4px solid var(--note-c, var(--border)); }
.iodwm-swatches { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 2px; }
.iodwm-swatch { position: relative; cursor: pointer; }
.iodwm-swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.iodwm-swatch span { display: block; width: 26px; height: 26px; border-radius: 999px; background: var(--note-c, var(--surface)); border: 2px solid var(--border-strong); }
.iodwm-swatch.c-none span { background: linear-gradient(135deg, var(--surface) 45%, var(--err-text) 46%, var(--err-text) 54%, var(--surface) 55%); }
.iodwm-swatch input:checked + span { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand); }
.iodwm-swatch input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 3px; }
.c-yellow { --note-c: #f5c542; } .c-green { --note-c: #3fb36b; } .c-blue { --note-c: #3d8bfd; }
.c-pink { --note-c: #ec5f9a; } .c-purple { --note-c: #9061f9; } .c-grey { --note-c: #8a9099; }
.iodwm-note-dot[class*="c-"] { background: var(--note-c); }

.iodwm-ev-attendees { position: relative; }
.iodwm-ev-attendees input { width: 100%; }
.iodwm-ev-attendees .iodwm-suggest { left: 0; }
.iodwm-attendees { list-style: none; margin: 10px 0 0; padding: 4px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.iodwm-attendee { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.iodwm-attendee:last-child { border-bottom: 0; }
.iodwm-attendee .iodwm-avatar { width: 28px; height: 28px; font-size: 12px; }
.iodwm-attendee .iodwm-contact-text { flex: 1; }
.iodwm-attendee .iodwm-contact-text .iodwm-muted { font-size: 12px; }
.iodwm-rsvp { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--surface-3); color: var(--muted); }
.iodwm-rsvp::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.rsvp-accepted { background: var(--ok-bg); color: var(--ok-text); }
.rsvp-tentative { background: var(--warn-bg); color: var(--warn-text); }
.rsvp-declined { background: var(--err-bg); color: var(--err-text); }
.rsvp-notsent { background: transparent; border: 1px dashed var(--border-strong); }

.iodwm-invite { margin: 12px 0 4px; border: 1px solid var(--border); border-top: 3px solid var(--brand); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); padding: 14px 16px; }
.iodwm-invite.cancel { border-top-color: var(--err-text); }
.iodwm-invite-top { display: flex; gap: 14px; align-items: flex-start; }
.iodwm-invite-date { flex: none; width: 52px; border-radius: 10px; overflow: hidden; text-align: center; border: 1px solid var(--border); background: var(--surface); }
.iodwm-invite-date .m { display: block; background: var(--brand); color: var(--brand-ink); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 0; }
.iodwm-invite.cancel .iodwm-invite-date .m { background: var(--err-text); color: var(--surface); }
.iodwm-invite-date .d { display: block; font-size: 22px; font-weight: 700; padding: 3px 0 4px; color: var(--text); }
.iodwm-invite-date > .iodwm-icon { margin: 14px auto; display: block; width: 22px; height: 22px; }
.iodwm-invite-main { min-width: 0; flex: 1; }
.iodwm-invite-kind { margin: 0; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--link); }
.iodwm-invite.cancel .iodwm-invite-kind { color: var(--err-text); }
.iodwm-invite-title { margin: 2px 0 6px; font-size: 1.1rem; }
.iodwm-invite-title.cancelled { text-decoration: line-through; color: var(--muted); }
.iodwm-invite-line { margin: 2px 0; font-size: 13.5px; display: flex; gap: 6px; align-items: center; overflow-wrap: anywhere; }
.iodwm-invite-line .iodwm-icon { width: 14px; height: 14px; color: var(--muted); }
.iodwm-invite-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--border); }
.iodwm-invite-ask { font-weight: 600; font-size: 13.5px; margin-right: 4px; }
.iodwm-invite-actions .iodwm-btn { gap: 6px; }
.iodwm-invite-open { margin-left: auto; font-size: 13px; }
.iodwm-rsvp-dot { width: 8px; height: 8px; border-radius: 999px; }
.iodwm-rsvp-dot.yes { background: #2f9e5a; } .iodwm-rsvp-dot.maybe { background: #d29b10; } .iodwm-rsvp-dot.no { background: #d64545; }
.iodwm-btn-primary .iodwm-rsvp-dot { box-shadow: 0 0 0 2px var(--brand-ink); }
.iodwm-invite-hint { margin: 8px 0 0; font-size: 12.5px; }
.iodwm-invite-reply { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; }
.iodwm-invite-reply a { margin-left: auto; font-size: 13px; }
.iodwm-invite-notice { margin: 10px 0 0; padding: 7px 10px; border-radius: var(--radius-sm); background: var(--ok-bg); color: var(--ok-text); border: 1px solid var(--ok-border); font-size: 13px; }
.iodwm-invite-notice.err { background: var(--err-bg); color: var(--err-text); border-color: var(--err-border); }

@media (max-width: 820px) {
    .iodwm-gw { grid-template-columns: minmax(0, 1fr); }
    .iodwm-caltabs-row { flex-wrap: wrap; }
    .iodwm-caltabs a { padding: 5px 10px; }
    .iodwm-newmenu-list { min-width: 240px; }
    .iodwm-invite-open, .iodwm-invite-reply a { margin-left: 0; }
}
@media (max-width: 480px) {
    .iodwm-caltabs a .iodwm-icon { display: none; }
    .iodwm-caltabs a { padding: 5px 9px; font-size: 13px; }
}

/* ── T363: meeting mails (any client) shown as the designed invitation mail (InviteMail), original behind a toggle ── */
.iodwm-itip-view { flex: 1; min-height: 0; overflow: auto; background: #f3f4f6; display: flex; flex-direction: column; }
html[data-theme="dark"] .iodwm-itip-view { background: var(--bg); }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] .iodwm-itip-view { background: var(--bg); } }
.iodwm-invite.iodwm-itip { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.iodwm-itip-mail { display: block; width: 100%; height: 412px; flex: none; border: 0; background: #f3f4f6; }
.iodwm-itip.request .iodwm-itip-mail { height: 530px; }
.iodwm-itip.cancel .iodwm-itip-mail { height: 388px; }
.iodwm-itip-bar { max-width: 592px; margin: -8px auto 0; padding: 0 16px; width: 100%; box-sizing: border-box; }
.iodwm-itip-bar:empty { display: none; }
.iodwm-itip-bar .iodwm-invite-actions { border-top: 0; margin: 0; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.iodwm-itip-bar .iodwm-invite-hint { text-align: center; color: #667085; }
.iodwm-itip-bar .iodwm-invite-notice { margin: 0 0 8px; }
.iodwm-itip .iodwm-invite-open { margin-left: auto; }
.iodwm-original { max-width: 592px; width: 100%; margin: 14px auto 24px; padding: 0 16px; box-sizing: border-box; }
.iodwm-original > summary { cursor: pointer; list-style: none; text-align: center; font-size: 12.5px; color: #667085; padding: 6px; }
.iodwm-original > summary::-webkit-details-marker { display: none; }
.iodwm-original > summary::before { content: "▸ "; }
.iodwm-original[open] > summary::before { content: "▾ "; }
.iodwm-original[open] > summary { color: var(--text); }
.iodwm-original .iodwm-attachments { margin: 6px 0 8px; padding: 0; }
.iodwm-original .iodwm-body-wrap { height: 320px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
@media (max-width: 700px) {
    .iodwm-itip-mail { height: 448px; } .iodwm-itip.request .iodwm-itip-mail { height: 562px; } .iodwm-itip.cancel .iodwm-itip-mail { height: 420px; }
    .iodwm-itip-bar, .iodwm-original { padding: 0 10px; }
    .iodwm-itip-bar .iodwm-invite-actions .iodwm-btn { flex: 1 1 auto; justify-content: center; }
}
html[data-theme="dark"] .iodwm-itip-mail { width: calc(100% - 24px); margin: 12px; border-radius: 10px; }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] .iodwm-itip-mail { width: calc(100% - 24px); margin: 12px; border-radius: 10px; } }