*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{background:#f4f6f8}.app-shell{color:#172033;width:min(1200px,100% - 32px);margin:0 auto;padding:32px 0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input,select{font:inherit}input,select{color:#172033;background:#fff;border:1px solid #d7dde5;border-radius:12px;width:100%;padding:12px 14px}label{gap:8px;font-weight:700;display:grid}.card{background:#fff;border-radius:18px;margin-bottom:24px;padding:0;overflow:hidden;box-shadow:0 12px 35px #0f172a14}.app-header{color:#fff;grid-template-columns:230px 1fr;align-items:center;gap:28px;margin-bottom:0;padding:24px 28px;display:grid}.leader-header{background:linear-gradient(135deg,#0f2f7a,#123f9c)}.attendee-header{background:linear-gradient(135deg,#047857,#065f46)}.app-name{color:#fff;text-transform:none;letter-spacing:0;font-size:1.55rem;font-weight:900}.module-header{border-left:1px solid #ffffff73;padding-left:28px}.module-header h1{color:#fff;margin:0 0 6px;font-size:clamp(1.45rem,3vw,1.9rem)}.module-header .intro{color:#ffffffe6;margin:0;font-size:.95rem;line-height:1.45}.panel{background:#fff;border:1px solid #e5e7eb;border-radius:16px;margin:18px 20px 0;padding:18px}.panel-title{color:#172033;margin:0 0 14px;font-size:1rem;font-weight:900}.form-grid{gap:16px;display:grid}.compact-form-grid{grid-template-columns:1fr 1fr;gap:18px;margin-top:0}.leader-setup-grid{grid-template-columns:minmax(560px,1fr) minmax(320px,560px);align-items:start;gap:28px;display:grid}.leader-left-column,.leader-right-column{gap:18px;display:grid}.setup-actions{flex-wrap:wrap;gap:10px;display:flex}.setup-actions button{color:#fff;cursor:pointer;background:#2563eb;border:0;border-radius:12px;padding:13px 18px;font-weight:800}.setup-actions button:hover{background:#1d4ed8}.setup-actions .secondary-button{color:#172033;background:#e5e7eb}.setup-actions .secondary-button:hover{background:#d1d5db}.leader-setup-top-row,.leader-setup-bottom-row{grid-template-columns:minmax(320px,1fr) minmax(360px,1fr);align-items:start;gap:24px;display:grid}.leader-setup-top-row{margin-bottom:18px}.leader-setup-bottom-row{align-items:start}.leader-name-settings{margin-top:0;padding:14px 18px;display:block}.leader-session-info{background:#f8fbff;border:1px solid #cfe0ff;border-radius:16px;justify-content:center;align-items:center;padding:18px}.qr-side-panel{text-align:center;background:#f8fbff;border:1px solid #dbeafe;border-radius:16px;justify-items:center;gap:12px;padding:18px;display:grid}.session-code-block{color:#172033;background:#eef4ff;border:1px solid #cfe0ff;border-radius:12px;padding:10px 14px;font-weight:700}.qr-instruction{color:#526071;justify-content:center;align-items:center;gap:8px;font-size:.9rem;line-height:1.4;display:flex}.name-settings{background:#fffbeb;border:1px solid #facc15;border-radius:14px;margin-top:18px;padding:18px 22px}.name-settings-copy{gap:4px;display:grid}.name-settings-copy h3{margin:0;font-size:1rem;font-weight:900}.name-settings-copy p{color:#526071;margin:0;font-size:.9rem}.name-requirement{gap:8px;display:grid}.name-requirement-label{color:#172033;font-size:.92rem;font-weight:900}.name-requirement-help{color:#526071;margin:0;font-size:.9rem}.segmented-control{background:#fff;border:1px solid #d7dde5;border-radius:10px;grid-template-columns:repeat(3,1fr);width:100%;display:grid;overflow:hidden}.segmented-control button{color:#172033;cursor:pointer;background:#fff;border:0;border-right:1px solid #d7dde5;padding:10px 18px;font-weight:900}.segmented-control button:last-child{border-right:0}.segmented-control button.active{color:#2563eb;z-index:1;background:#eff6ff;position:relative;box-shadow:inset 0 0 0 2px #2563eb}.segmented-control button:first-child.active{border-top-left-radius:10px;border-bottom-left-radius:10px}.segmented-control button:last-child.active{border-top-right-radius:10px;border-bottom-right-radius:10px}.leader-session-row{grid-template-columns:auto auto 1fr;align-items:center;gap:18px;margin-top:20px;display:grid}.leader-actions{flex-wrap:wrap;gap:10px;display:flex}.leader-actions button{color:#fff;cursor:pointer;background:#2563eb;border:0;border-radius:12px;padding:13px 18px;font-weight:800}.leader-actions button:hover{background:#1d4ed8}.leader-actions .secondary-button,.secondary-button{color:#172033;cursor:pointer;background:#e5e7eb;border:0;border-radius:12px;padding:13px 18px;font-weight:800}.leader-actions .secondary-button:hover,.secondary-button:hover{background:#d1d5db}.session-info{flex-wrap:wrap;align-items:center;gap:18px;display:flex}.session-meta{flex-direction:column;gap:8px;display:flex}.session-code{color:#172033;background:#eef4ff;border:1px solid #cfe0ff;border-radius:12px;padding:12px 16px}.live-attendee-count{color:#16a34a;font-size:.92rem;font-weight:800}.qr-card{background:#fff;border:1px solid #d7dde5;border-radius:12px;padding:12px}.join-panel{background:#ecfdf3;margin:14px 20px}.attendee-card-shell .join-panel{border:0;margin-top:12px;padding:0}.join-session{flex-wrap:wrap;align-items:center;gap:12px;margin-top:0;display:flex}.join-session input{max-width:320px}.join-session button{color:#fff;cursor:pointer;background:#172033;border:0;border-radius:12px;padding:12px 18px;font-weight:800}.joined-banner{color:#166534;background:#ecfdf3;border:1px solid #b7ebc6;border-radius:16px;margin:18px 20px 20px;padding:16px;font-weight:800}.checkin-area{gap:14px;margin-top:16px;display:grid}.checkin-button{color:#fff;cursor:pointer;background:#16a34a;border:0;border-radius:12px;padding:14px 18px;font-weight:800}.attendee-name-field{color:#065f46;gap:8px;font-weight:800;display:grid}.attendee-name-field input{max-width:360px}.attendee-card{border:3px solid var(--group-border,transparent);text-align:center;color:#172033;background:#fff;border-radius:22px;margin-top:20px;padding:34px 28px;box-shadow:0 14px 40px #0f172a1a}.attendee-number{opacity:.7;margin-bottom:14px;font-size:1rem;font-weight:800}.group-assignment{color:var(--group-color,#2563eb);margin-bottom:20px;font-size:clamp(2.8rem,10vw,5rem);font-weight:900;line-height:.95}.assignment-note{opacity:.7;font-size:.95rem;line-height:1.6}.groups-section{width:min(1100px,100% - 32px);margin:18px auto 0;padding-bottom:16px}.groups-header{color:#172033;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px;display:flex}.groups-header h2{align-items:center;gap:8px;margin:0;font-size:1rem;font-weight:900;display:flex}.refresh-button{color:#2563eb;cursor:pointer;background:0 0;border:0;align-items:center;gap:8px;padding:4px 0;font-weight:800;display:inline-flex}.groups-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;display:grid}.group-card{background:var(--group-bg,white);border:1px solid var(--group-border,transparent);border-radius:12px;min-height:120px;padding:18px 56px 18px 22px;position:relative;overflow:hidden;box-shadow:0 8px 24px #0f172a0a}.group-card h2{color:var(--group-color,#172033);margin:0 0 12px;font-size:1rem;font-weight:900}.group-member-list{gap:4px;margin:0;padding:0;font-size:.92rem;line-height:1.25;list-style:none;display:grid}.group-member-list li{grid-template-columns:1fr auto;gap:12px;display:grid}.group-member-list strong{color:#172033;font-weight:800}.empty-group{color:#526071;margin:0;font-size:.92rem;font-weight:700}.group-count{z-index:1;background:var(--group-color,#172033);color:#fff;border-radius:999px;justify-content:center;align-items:center;width:26px;height:26px;font-size:.82rem;font-weight:900;display:flex;position:absolute;top:10px;right:12px}.groups-footer{color:#172033;border-top:1px solid #e5e7eb;justify-content:space-between;gap:16px;margin-top:18px;padding-top:12px;font-size:.95rem;display:flex}.groups-footer strong{font-weight:900}.group-color-1{--group-color:#2563eb;--group-bg:#eff6ff;--group-border:#bfdbfe}.group-color-2{--group-color:#16a34a;--group-bg:#f0fdf4;--group-border:#bbf7d0}.group-color-3{--group-color:#f97316;--group-bg:#fff7ed;--group-border:#fed7aa}.group-color-4{--group-color:#9333ea;--group-bg:#faf5ff;--group-border:#e9d5ff}.group-color-5{--group-color:#dc2626;--group-bg:#fef2f2;--group-border:#fecaca}.group-color-6{--group-color:#0891b2;--group-bg:#ecfeff;--group-border:#a5f3fc}.app-name{align-items:center;gap:12px;display:flex}.app-name svg{flex:none}.panel-title{align-items:center;gap:8px;display:flex}.panel-title svg{color:#2563eb}.attendee-header .panel-title svg{color:#047857}.leader-actions button,.secondary-button{justify-content:center;align-items:center;gap:8px;display:inline-flex}.qr-wrap{align-items:center;gap:14px;display:flex}.qr-help{color:#172033;align-items:flex-start;gap:8px;font-size:.9rem;display:flex}.qr-help strong,.qr-help span{display:block}.qr-help span{color:#526071;margin-top:2px}.session-code-row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.copy-link-button{color:#fff;cursor:pointer;background:#2563eb;border:0;border-radius:10px;padding:9px 12px;font-weight:800}.copy-link-button:hover{background:#1d4ed8}.live-sync-label{color:#16a34a;font-size:.9rem;font-weight:900}@media (width<=720px){.app-shell{width:min(100% - 20px,520px);padding:16px 0}.app-header{grid-template-columns:1fr;gap:8px;padding:22px}.app-name{font-size:1.2rem}.module-header{border-left:0;padding-left:0}.compact-form-grid,.name-settings{grid-template-columns:1fr}.segmented-control{width:100%;min-width:0}.segmented-control button{flex:1}.leader-session-row{grid-template-columns:1fr;align-items:flex-start}.session-info{align-items:flex-start}.join-session input,.join-session button{width:100%;max-width:none}.groups-section{width:min(100% - 20px,520px)}.groups-grid{grid-template-columns:1fr;gap:14px}.groups-footer{flex-direction:column;gap:6px}.leader-setup-grid{grid-template-columns:1fr}.setup-actions button{width:100%}.leader-setup-top-row,.leader-setup-bottom-row{grid-template-columns:1fr}.leader-session-info{justify-content:flex-start}}