#inviteGroupPoster { --invite-posted: #16b77f; --invite-failed: #ef5b69; --invite-pending: color-mix(in srgb, var(--line) 75%, transparent); }
.invite-poster-hero { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:16px; overflow:hidden; background:radial-gradient(circle at 92% 12%,rgba(21,183,127,.18),transparent 32%),linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--surface) 90%,#16b77f)); }
.invite-poster-hero p:last-child { max-width:720px; margin:6px 0 0; }.invite-poster-flow { display:flex; min-width:max-content; align-items:center; gap:7px; padding:12px 14px; border:1px solid rgba(21,183,127,.25); border-radius:13px; background:rgba(21,183,127,.08); }.invite-poster-flow span { color:var(--accent); font-size:8px; font-weight:900; letter-spacing:.08em; }.invite-poster-flow i { width:14px; height:1px; background:rgba(21,183,127,.4); }
.invite-poster-layout { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr); gap:16px; align-items:start; }.invite-poster-form,.invite-poster-monitor { min-width:0; }.invite-poster-monitor { display:grid; position:sticky; top:14px; gap:16px; }.invite-count-pill,.invite-status-badge { padding:6px 9px; border-radius:999px; background:rgba(21,183,127,.1); color:var(--accent); font-size:9px; font-weight:900; text-transform:uppercase; }.invite-status-badge.idle { background:var(--surface-soft); color:var(--muted); }.invite-status-badge.failed,.invite-status-badge.canceled { background:rgba(239,91,105,.12); color:var(--invite-failed); }
.invite-import-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }.invite-import-row .file-btn { margin:0; }.invite-import-row input,.invite-media-actions input { display:none; }.invite-media-box { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 14px; align-items:center; padding:13px; border:1px solid var(--line); border-radius:12px; background:var(--surface-soft); }.invite-media-box>div:first-child { display:grid; gap:3px; }.invite-media-box strong,.invite-cleanup-card strong,.invite-card-title strong { font-size:11px; }.invite-media-box small,.invite-cleanup-card small,.invite-card-title small { color:var(--muted); font-size:9px; }.invite-media-actions { display:flex; gap:7px; }.invite-media-box>span { grid-column:1/-1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.invite-buttons-card { overflow:hidden; border:1px solid var(--line); border-radius:13px; background:var(--surface-soft); }.invite-buttons-card summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px; cursor:pointer; list-style:none; }.invite-buttons-card summary::-webkit-details-marker { display:none; }.invite-buttons-card summary>div { display:grid; gap:3px; }.invite-buttons-card summary strong { font-size:11px; }.invite-buttons-card summary small { color:var(--muted); font-size:9px; }.invite-buttons-card summary>span { color:var(--accent); font-size:9px; font-weight:900; }.invite-buttons-body { display:grid; gap:10px; padding:0 13px 13px; border-top:1px solid var(--line); }.invite-buttons-body>.check-row:first-child { margin-top:12px; }.invite-button-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }.invite-button-grid>div { display:grid; gap:8px; padding:9px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }.invite-button-grid label { margin:0; }
.invite-cadence-card { display:grid; gap:13px; padding:14px; border:1px solid var(--line); border-radius:13px; background:var(--surface-soft); }.invite-card-title { display:flex; align-items:center; justify-content:space-between; gap:12px; }.invite-card-title>div { display:grid; gap:3px; }.invite-card-title>span { padding:5px 8px; border-radius:999px; background:rgba(21,183,127,.1); color:var(--accent); font-size:8px; font-weight:900; }.invite-cadence-section { display:grid; gap:8px; padding-top:12px; border-top:1px solid var(--line); }.invite-cadence-section h4 { margin:0; font-size:10px; }.invite-cadence-section label { margin:0; }
.invite-cleanup-card { display:grid; gap:9px; padding:14px; border:1px solid rgba(242,184,75,.32); border-radius:13px; background:rgba(242,184,75,.07); }.invite-cleanup-card>div { display:grid; gap:3px; }.invite-cleanup-card .check-row { margin:0; background:var(--surface); }.invite-cleanup-card p { margin:1px 0 0; font-size:9px; line-height:1.5; }.invite-permission { padding:12px; border:1px solid rgba(21,183,127,.28); border-radius:11px; background:rgba(21,183,127,.07); }
.invite-preview-card { overflow:hidden; border:1px solid var(--line); border-radius:13px; background:var(--surface-soft); }.invite-preview-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px; border-bottom:1px solid var(--line); }.invite-preview-head>div { display:grid; gap:2px; }.invite-preview-head p { margin:0; }.invite-preview-head strong { font-size:11px; }.invite-preview-head>span { padding:5px 8px; border-radius:999px; background:rgba(21,183,127,.1); color:var(--accent); font-size:8px; font-weight:900; text-transform:uppercase; }.invite-preview-stage { min-height:250px; padding:12px; background-color:#dce8e4; background-image:radial-gradient(rgba(18,63,55,.08) .7px,transparent .7px); background-size:12px 12px; }.invite-preview-chat-head { display:flex; align-items:center; gap:9px; margin:-2px -2px 14px; padding:9px 10px; border-radius:9px; background:#f7fbfa; color:#183a34; box-shadow:0 4px 14px rgba(23,55,49,.09); }.invite-preview-chat-head>span { display:grid; width:30px; height:30px; place-items:center; border-radius:50%; background:#16b77f; color:#fff; font-size:11px; font-weight:900; }.invite-preview-chat-head>div { display:grid; }.invite-preview-chat-head strong { font-size:10px; }.invite-preview-chat-head small { color:#66817c; font-size:8px; }.invite-preview-bubble { position:relative; width:min(88%,420px); margin-left:auto; padding:7px 8px 20px; border-radius:10px 2px 10px 10px; background:#d7f8e9; color:#173c35; box-shadow:0 5px 18px rgba(26,70,60,.12); }.invite-preview-bubble>img { display:block; width:100%; max-height:220px; margin-bottom:7px; border-radius:7px; object-fit:cover; }.invite-preview-bubble>p { margin:3px 2px; font-size:10px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }.invite-preview-bubble>time { position:absolute; right:7px; bottom:5px; color:#718c86; font-size:7px; }.invite-preview-attachment { display:flex; align-items:center; gap:8px; margin-bottom:7px; padding:8px; border-radius:7px; background:rgba(255,255,255,.65); }.invite-preview-attachment>span { display:grid; width:30px; height:30px; place-items:center; border-radius:6px; background:#16b77f; color:#fff; font-size:7px; font-weight:900; }.invite-preview-attachment>div { display:grid; min-width:0; }.invite-preview-attachment strong,.invite-preview-attachment small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.invite-preview-attachment strong { font-size:9px; }.invite-preview-attachment small { color:#66817c; font-size:7px; }.invite-preview-buttons { display:grid; gap:4px; margin-top:7px; padding-top:6px; border-top:1px solid rgba(22,183,127,.2); }.invite-preview-buttons>div { padding:7px; border-radius:6px; background:rgba(255,255,255,.72); color:#0c8d65; font-size:9px; font-weight:800; text-align:center; }
.invite-chart-area { display:grid; grid-template-columns:150px minmax(0,1fr); gap:18px; align-items:center; margin:18px 0; }.invite-donut { display:grid; width:144px; aspect-ratio:1; place-items:center; border-radius:50%; background:conic-gradient(var(--invite-posted) 0 var(--posted),var(--invite-failed) var(--posted) var(--failed),var(--invite-pending) var(--failed) 360deg); box-shadow:inset 0 0 0 1px var(--line),0 14px 35px rgba(0,0,0,.1); }.invite-donut::before { content:""; grid-area:1/1; width:70%; aspect-ratio:1; border-radius:50%; background:var(--surface); box-shadow:0 0 0 1px var(--line); }.invite-donut>div { z-index:1; display:grid; grid-area:1/1; text-align:center; }.invite-donut strong { font-size:23px; line-height:1; }.invite-donut span { margin-top:5px; color:var(--muted); font-size:8px; text-transform:uppercase; }.invite-chart-stats { display:grid; gap:9px; }.invite-chart-stats>div { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 10px; border:1px solid var(--line); border-radius:9px; background:var(--surface-soft); }.invite-chart-stats span { color:var(--muted); font-size:9px; }.invite-chart-stats strong { font-size:14px; }
.invite-progress-track { height:8px; overflow:hidden; border-radius:999px; background:var(--surface-soft); box-shadow:inset 0 0 0 1px var(--line); }.invite-progress-track span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--accent),#49d7ad); transition:width .35s ease; }.invite-current-status { min-height:35px; margin:12px 0; font-size:11px; line-height:1.55; }.invite-action-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:8px; }.invite-action-metrics>div,.invite-current-group { display:grid; min-width:0; gap:4px; padding:10px; border:1px solid var(--line); border-radius:10px; background:var(--surface-soft); }.invite-action-metrics span,.invite-current-group span { color:var(--muted); font-size:8px; text-transform:uppercase; }.invite-action-metrics strong,.invite-current-group strong { overflow:hidden; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }.invite-current-group { margin-bottom:12px; }
.invite-log-list { display:grid; max-height:310px; gap:7px; overflow-y:auto; }.invite-log-entry { display:grid; grid-template-columns:62px minmax(0,1fr); gap:8px; padding:8px 9px; border-radius:8px; background:var(--surface-soft); font-size:9px; line-height:1.45; }.invite-log-entry time { color:var(--accent); font-weight:800; }.invite-log-entry span { overflow-wrap:anywhere; }
.invite-error-card>p { margin:-3px 0 12px; font-size:9px; }.invite-error-count { padding:5px 8px; border-radius:999px; background:rgba(239,91,105,.1); color:var(--invite-failed); font-size:8px; font-weight:900; text-transform:uppercase; }.invite-error-list { display:grid; max-height:360px; gap:8px; overflow-y:auto; }.invite-error-empty { padding:18px 12px; border:1px dashed var(--line); border-radius:10px; color:var(--muted); font-size:9px; text-align:center; }.invite-error-item { display:grid; gap:7px; padding:10px; border:1px solid rgba(239,91,105,.28); border-left:3px solid var(--invite-failed); border-radius:9px; background:rgba(239,91,105,.06); }.invite-error-item-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }.invite-error-item-head strong { color:var(--invite-failed); font-size:9px; text-transform:uppercase; }.invite-error-item-head time { color:var(--muted); font-size:8px; }.invite-error-item>p { margin:0; color:var(--text); font-size:10px; font-weight:700; line-height:1.45; overflow-wrap:anywhere; }.invite-error-meta { display:grid; gap:3px; }.invite-error-meta span { color:var(--muted); font-size:8px; overflow-wrap:anywhere; }.invite-error-meta b { color:var(--text); }
@media(max-width:1080px){.invite-poster-layout{grid-template-columns:1fr}.invite-poster-monitor{position:static;grid-template-columns:1fr 1fr}.invite-monitor-card,.invite-log-card{min-width:0}}
@media(max-width:760px){.invite-poster-hero{align-items:stretch;flex-direction:column}.invite-poster-flow{justify-content:center;min-width:0}.invite-poster-monitor{grid-template-columns:1fr}.invite-button-grid{grid-template-columns:1fr}.invite-import-row,.invite-media-box{align-items:stretch;grid-template-columns:1fr}.invite-import-row{flex-direction:column}.invite-import-row .btn,.invite-media-actions .btn{width:100%}.invite-media-actions{display:grid;grid-template-columns:1fr 1fr}.invite-chart-area{grid-template-columns:125px minmax(0,1fr);gap:12px}.invite-donut{width:120px}}
@media(max-width:410px){.invite-poster-flow i{width:6px}.invite-poster-flow span{font-size:7px}.invite-chart-area{grid-template-columns:1fr;justify-items:center}.invite-chart-stats{width:100%}.invite-action-metrics{grid-template-columns:1fr}}