#groupCreator { --creator-green: #14c98b; --creator-cyan: #32b9d7; --creator-red: #f05e70; --creator-pending: color-mix(in srgb, var(--line) 76%, transparent); }
.group-creator-hero { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-bottom: 16px; overflow: hidden; background: radial-gradient(circle at 95% 5%, rgba(50,185,215,.2), transparent 34%), radial-gradient(circle at 75% 110%, rgba(20,201,139,.15), transparent 38%), linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--surface) 92%, #14c98b)); }
.group-creator-hero p:last-child { max-width: 760px; margin: 6px 0 0; }
.group-creator-flow { display: flex; align-items: center; min-width: 295px; gap: 8px; padding: 13px 15px; border: 1px solid rgba(20,201,139,.25); border-radius: 14px; background: rgba(8,30,35,.35); }
.group-creator-flow span { color: var(--creator-green); font-size: 8px; font-weight: 900; letter-spacing: .11em; white-space: nowrap; }
.group-creator-flow i { width: 28px; height: 1px; background: linear-gradient(90deg, var(--creator-green), rgba(50,185,215,.25)); }
.group-creator-layout { display: grid; grid-template-columns: minmax(0,1.18fr) minmax(350px,.82fr); gap: 16px; align-items: start; }
.group-creator-form, .group-creator-monitor { min-width: 0; }
.group-creator-monitor { display: grid; position: sticky; top: 14px; gap: 16px; }
.group-creator-safe-badge, .group-creator-status-badge { padding: 6px 9px; border-radius: 999px; background: rgba(20,201,139,.12); color: var(--creator-green); font-size: 8px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.group-creator-status-badge.idle { background: var(--surface-soft); color: var(--muted); }
.group-creator-status-badge.failed, .group-creator-status-badge.canceled { background: rgba(240,94,112,.13); color: var(--creator-red); }
.group-creator-section { display: grid; gap: 12px; margin-top: 13px; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--surface-soft) 86%, transparent); }
.group-creator-section-title { display: flex; align-items: center; gap: 10px; }
.group-creator-section-title > span { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid rgba(20,201,139,.35); border-radius: 9px; background: rgba(20,201,139,.1); color: var(--creator-green); font-size: 10px; font-weight: 900; }
.group-creator-section-title > div { display: grid; gap: 2px; }.group-creator-section-title strong { font-size: 11px; }.group-creator-section-title small { color: var(--muted); font-size: 9px; }
.group-creator-number-grid { grid-template-columns: 1fr 1fr 1fr; }
.group-creator-name-preview { display: flex; flex-wrap: wrap; gap: 6px; min-height: 34px; padding: 9px; border: 1px dashed color-mix(in srgb, var(--line) 82%, var(--creator-cyan)); border-radius: 10px; background: rgba(50,185,215,.04); }
.group-creator-name-preview span { padding: 5px 8px; border-radius: 999px; background: rgba(50,185,215,.1); color: color-mix(in srgb, var(--text) 82%, var(--creator-cyan)); font-size: 9px; }
.group-creator-participant-import { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.group-creator-participant-import .file-btn { margin: 0; }.group-creator-participant-import input { display: none; }.group-creator-participant-import span { text-align: right; }
.group-creator-photo-row { display: grid; grid-template-columns: 74px minmax(0,1fr); gap: 13px; align-items: center; }
.group-creator-photo-preview { display: grid; width: 74px; aspect-ratio: 1; overflow: hidden; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: linear-gradient(135deg, rgba(20,201,139,.2), rgba(50,185,215,.16)); color: var(--creator-green); font-size: 23px; font-weight: 900; }
.group-creator-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.group-creator-photo-row > div:last-child { display: grid; gap: 5px; }.group-creator-photo-row strong { font-size: 10px; }.group-creator-photo-row small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.group-creator-photo-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 3px; }.group-creator-photo-actions input { display: none; }
.group-creator-check-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.group-creator-check-grid .check-row { padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.group-creator-check-grid .check-row > span { display: grid; gap: 2px; }.group-creator-check-grid strong { font-size: 10px; }.group-creator-check-grid small { color: var(--muted); font-size: 8px; }
.group-creator-delay-section { border-color: rgba(50,185,215,.28); background: linear-gradient(135deg, rgba(50,185,215,.06), rgba(20,201,139,.04)); }
.group-creator-delay-preview { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 9px 11px; border-radius: 10px; background: rgba(50,185,215,.09); }
.group-creator-delay-preview strong { color: var(--creator-cyan); font-size: 11px; }.group-creator-delay-preview span { color: var(--muted); font-size: 8px; }
.group-creator-consent { margin-top: 13px; padding: 12px; border: 1px solid rgba(20,201,139,.3); border-radius: 11px; background: rgba(20,201,139,.07); }
.group-creator-chart-wrap { display: grid; grid-template-columns: 145px minmax(0,1fr); gap: 18px; align-items: center; margin: 18px 0; }
.group-creator-donut { display: grid; width: 140px; aspect-ratio: 1; place-items: center; border-radius: 50%; background: conic-gradient(var(--creator-green) 0 var(--created), var(--creator-red) var(--created) var(--failed), var(--creator-pending) var(--failed) 360deg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 65%, transparent), 0 16px 38px rgba(0,0,0,.14); transition: background .35s ease; }
.group-creator-donut::before { content: ""; grid-area: 1/1; width: 69%; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); }
.group-creator-donut > div { z-index: 1; display: grid; grid-area: 1/1; text-align: center; }.group-creator-donut strong { font-size: 23px; line-height: 1; }.group-creator-donut span { margin-top: 4px; color: var(--muted); font-size: 8px; text-transform: uppercase; }
.group-creator-stats { display: grid; gap: 8px; }.group-creator-stats > div { display: grid; grid-template-columns: 8px minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 9px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.group-creator-stats i { width: 8px; height: 8px; border-radius: 50%; }.group-creator-stats i.created { background: var(--creator-green); }.group-creator-stats i.failed { background: var(--creator-red); }.group-creator-stats i.pending { background: var(--creator-pending); }
.group-creator-stats span { color: var(--muted); font-size: 9px; }.group-creator-stats strong { font-size: 13px; }
.group-creator-progress-track { height: 8px; overflow: hidden; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); }.group-creator-progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--creator-green), var(--creator-cyan)); transition: width .35s ease; }
.group-creator-current-status { min-height: 35px; margin: 12px 0; font-size: 10px; line-height: 1.55; }
.group-creator-monitor-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }.group-creator-monitor-meta > div { display: grid; min-width: 0; gap: 4px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }.group-creator-monitor-meta span { color: var(--muted); font-size: 8px; }.group-creator-monitor-meta strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.group-creator-results, .group-creator-logs { display: grid; max-height: 270px; gap: 7px; overflow-y: auto; }
.group-creator-result { display: grid; gap: 5px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }.group-creator-result-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.group-creator-result strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.group-creator-result small { color: var(--muted); font-size: 8px; }.group-creator-result-actions { display: flex; gap: 6px; }.group-creator-result-actions button { padding: 5px 7px; font-size: 8px; }
.group-creator-warning { color: #e8aa45 !important; overflow-wrap: anywhere; }
.group-creator-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.4; }.group-creator-log-entry time { color: var(--creator-green); font-weight: 800; }.group-creator-log-entry span { overflow-wrap: anywhere; }
@media (max-width: 1100px) { .group-creator-layout { grid-template-columns: 1fr; }.group-creator-monitor { position: static; grid-template-columns: 1fr 1fr; }.group-creator-progress-card { grid-column: 1/-1; } }
@media (max-width: 760px) { .group-creator-hero { align-items: stretch; flex-direction: column; }.group-creator-flow { justify-content: center; min-width: 0; }.group-creator-monitor { grid-template-columns: 1fr; }.group-creator-progress-card { grid-column: auto; }.group-creator-number-grid { grid-template-columns: 1fr; }.group-creator-delay-preview { align-items: flex-start; flex-direction: column; }.group-creator-photo-row { grid-template-columns: 60px minmax(0,1fr); }.group-creator-photo-preview { width: 60px; }.group-creator-participant-import { align-items: stretch; flex-direction: column; }.group-creator-participant-import .btn { width: 100%; }.group-creator-participant-import span { text-align: left; } }
@media (max-width: 430px) { .group-creator-chart-wrap { grid-template-columns: 1fr; justify-items: center; }.group-creator-stats { width: 100%; }.group-creator-monitor-meta { grid-template-columns: 1fr; }.group-creator-flow i { width: 14px; }.group-creator-flow span { font-size: 7px; } }