/* QQ / 163 mailbox cards in "Plugins & connectors", matching the Gmail / Outlook cards above. Updated 2026-10-22. */
.mail-connection-panel{display:grid;gap:12px;margin-top:16px}
.mail-provider-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
/* While a form is open, the other card keeps its own height instead of stretching. */
.mail-provider-grid.has-form{align-items:start}
.mail-provider{min-width:0;padding:20px;border:1px solid #e9e1d3;border-radius:18px;background:var(--cortex-surface,#fffdf8);display:flex;flex-direction:column}
.mail-provider header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.mail-provider header>div{display:grid;min-width:0}
.mail-provider header strong{font-size:18px;color:#1d1a14}
.mail-provider header small{font-size:12px;margin:4px 0 0;color:#88847e;overflow-wrap:anywhere}
.mail-state{display:flex;align-items:center;gap:6px;color:#827e78;font-size:12px;white-space:nowrap;min-height:24px}
.mail-state-mark{display:grid;place-items:center;font-size:20px;line-height:1}
.mail-provider.is-connected .mail-state{color:#237856;font-weight:600}
.mail-provider.is-connected .mail-state-mark{width:22px;height:22px;border-radius:50%;background:#e4f5ea}
.mail-state-mark svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.mail-provider.is-pending .mail-state{color:#8a6a2a}
.mail-provider.is-pending .mail-state-mark{font-size:0;width:16px;height:16px;border:2px solid #ecdcb8;border-top-color:#9a6a12;border-radius:50%;animation:mail-spin .9s linear infinite}
.mail-provider.is-error .mail-state{color:#a15444}
.mail-provider.is-error .mail-state-mark{width:20px;height:20px;border-radius:50%;background:#f6ddd6;font-size:12px;font-weight:700}
.mail-connection-panel .mail-account{font-size:14px;margin:14px 0 0;color:#574d3a;overflow-wrap:anywhere}
.mail-connection-panel .mail-card-notice{font-size:13px;line-height:1.6;color:#827d73;margin:14px 0 0;overflow-wrap:anywhere}
.mail-connection-panel .mail-card-notice.is-error{color:#a15444}
.mail-provider footer{display:flex;align-items:center;gap:16px;margin-top:auto;padding-top:18px}
.mail-provider .button{min-height:42px;min-width:112px;font-size:14px;padding:10px 18px}
.mail-provider .is-loading:before{content:"";display:inline-block;width:12px;height:12px;border:2px solid #c9a35a;border-top-color:#fff;border-radius:50%;margin-right:8px;vertical-align:-1px;animation:mail-spin .9s linear infinite}
.mail-text-action{background:none;border:0;color:#86796f;font:inherit;font-size:13px;min-height:42px;cursor:pointer}
.mail-provider button:disabled{opacity:.45;cursor:not-allowed}
.mail-provider button:focus-visible{outline:2px solid #c9a35a;outline-offset:2px}
.mail-form{display:grid;gap:12px;margin-top:16px}
.mail-form footer{padding-top:4px}
.mail-field{display:grid;gap:6px;font-size:13px;color:#574d3a;font-weight:600}
.mail-field input{box-sizing:border-box;width:100%;min-height:44px;padding:10px 14px;border:1px solid #e3dccf;border-radius:12px;background:#fff;font:inherit;font-size:14px;font-weight:400;color:#1d1a14;-webkit-appearance:none;appearance:none;transition:border-color .15s,box-shadow .15s}
.mail-field input::placeholder{color:#b3ab9d}.mail-field input:focus{outline:none;border-color:#c9a35a;box-shadow:0 0 0 3px rgba(201,163,90,.18)}.mail-field input:disabled{background:#f6f2ea}
.mail-help{border-radius:12px;background:#f8f2e6;padding:0 14px}
.mail-help summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;min-height:40px;font-size:13px;color:#7a5a1c;font-weight:600}
.mail-help summary::-webkit-details-marker{display:none}
.mail-help summary:before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s;flex-shrink:0}
.mail-help[open] summary:before{transform:rotate(45deg)}
.mail-help ol{margin:0 0 10px;padding-left:20px;font-size:13px;line-height:1.7;color:#655d4f}.mail-help li{margin:2px 0}
.mail-help a{display:inline-block;font-size:13px;color:#7a5a1c;margin:0 0 12px;text-decoration:none}.mail-help a:hover{text-decoration:underline}
.mail-connection-panel .mail-error{margin:0;font-size:13px;line-height:1.6;color:#a15444}
.mail-connection-panel .mail-note{display:block;font-size:12px;line-height:1.65;color:#88847e}
@keyframes mail-spin{to{transform:rotate(360deg)}}
@media(max-width:680px){.mail-provider-grid{grid-template-columns:1fr}.mail-provider{padding:18px}}
@media(prefers-reduced-motion:reduce){.mail-provider.is-pending .mail-state-mark,.mail-provider .is-loading:before{animation:none}}
/* The connectors section styles its own summary row; keep this nested help row compact and left-aligned. */
.admin-office-connections .mail-help summary{justify-content:flex-start;align-items:center;gap:8px;padding:0;min-height:40px;font-size:13px;font-weight:600;color:#7a5a1c;border:0}