.groups-page{max-width:1200px;margin:0 auto}.groups-header{margin-bottom:var(--spacing-lg)}.groups-header-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--spacing-md);margin-bottom:var(--spacing-sm)}.groups-header h1{font-size:1.75rem;font-weight:700;color:var(--color-text-primary)}.groups-actions{display:flex;gap:var(--spacing-sm)}.groups-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-xl);text-align:center;color:var(--color-text-secondary)}.spinner{width:40px;height:40px;border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:var(--spacing-md)}@keyframes spin{to{transform:rotate(1turn)}}.groups-error{display:flex;flex-direction:column;align-items:center;padding:var(--spacing-xl);background:var(--color-error-bg,#fef2f2);border-radius:var(--radius-lg);text-align:center;color:var(--color-error,#dc2626)}.groups-error p{margin-bottom:var(--spacing-md)}.groups-empty{display:flex;flex-direction:column;align-items:center;padding:var(--spacing-xl);text-align:center;background:var(--color-surface,#f9fafb);border-radius:var(--radius-lg);border:2px dashed var(--color-border)}.groups-empty-icon{color:var(--color-text-secondary);opacity:.5;margin-bottom:var(--spacing-md)}.groups-empty h2{font-size:1.25rem;font-weight:600;color:var(--color-text-primary);margin-bottom:var(--spacing-sm)}.groups-empty p{color:var(--color-text-secondary);max-width:400px;margin-bottom:var(--spacing-lg)}.groups-empty-actions{display:flex;gap:var(--spacing-sm);flex-wrap:wrap;justify-content:center}.groups-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));grid-gap:var(--spacing-md);gap:var(--spacing-md)}.group-card{display:flex;flex-direction:column;padding:var(--spacing-md);background:var(--color-surface,white);border:1px solid var(--color-border);border-radius:var(--radius-lg);text-decoration:none;color:inherit;transition:all .2s ease}.group-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-md);transform:translateY(-2px)}.group-card:focus{outline:2px solid var(--color-primary);outline-offset:2px}.group-card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.group-card-title{font-size:1.125rem;font-weight:600;color:var(--color-text-primary);margin:0}.group-card-description{margin-bottom:var(--spacing-sm);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.group-card-description,.group-card-meta{font-size:.875rem;color:var(--color-text-secondary)}.group-card-meta{display:flex;align-items:center;gap:var(--spacing-md);margin-top:auto;padding-top:var(--spacing-sm);border-top:1px solid var(--color-border)}.group-card-members{display:flex;align-items:center;gap:var(--spacing-xs)}.group-card-inactive{color:var(--color-warning,#f59e0b);background:var(--color-warning-bg,#fef3c7)}.group-card-inactive,.role-badge{font-size:.75rem;padding:2px 8px;border-radius:var(--radius-sm)}.role-badge{font-weight:500;white-space:nowrap}.role-leader{background:var(--color-primary-bg,#dbeafe);color:var(--color-primary,#2563eb)}.role-moderator{background:var(--color-secondary-bg,#f3e8ff);color:var(--color-secondary,#7c3aed)}.role-member{background:var(--color-surface,#f3f4f6);color:var(--color-text-secondary)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--spacing-md)}.modal{background:var(--color-background,white);border-radius:var(--radius-lg);padding:var(--spacing-lg);width:100%;max-width:480px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg)}.modal h2{font-size:1.25rem;font-weight:600;margin-bottom:var(--spacing-md)}.modal-form{gap:var(--spacing-md)}.form-group,.modal-form{display:flex;flex-direction:column}.form-group{gap:var(--spacing-xs)}.form-group label{font-weight:500;font-size:.875rem;color:var(--color-text-primary)}.form-group input,.form-group textarea{padding:var(--spacing-sm);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:1rem;transition:border-color .2s ease}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-bg,#dbeafe)}.form-hint{font-size:.75rem;color:var(--color-text-secondary)}.form-error{padding:var(--spacing-sm);background:var(--color-error-bg,#fef2f2);color:var(--color-error,#dc2626);border-radius:var(--radius-md);font-size:.875rem}.invite-code-input{font-family:monospace;font-size:1.25rem!important;text-align:center;letter-spacing:.25em;text-transform:uppercase}.modal-actions{display:flex;justify-content:flex-end;gap:var(--spacing-sm);margin-top:var(--spacing-sm)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--spacing-sm) var(--spacing-md);font-size:.875rem;font-weight:500;border-radius:var(--radius-md);border:none;cursor:pointer;transition:all .2s ease}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--color-primary,#2563eb);color:white}.btn-primary:hover:not(:disabled){background:var(--color-primary-hover,#1d4ed8)}.btn-secondary{background:var(--color-surface,#f3f4f6);color:var(--color-text-primary);border:1px solid var(--color-border)}.btn-secondary:hover:not(:disabled){background:var(--color-border)}@media (max-width:600px){.groups-header-top{flex-direction:column;align-items:stretch}.groups-actions{justify-content:stretch}.groups-actions .btn{flex:1 1}.groups-grid{grid-template-columns:1fr}.modal{margin:var(--spacing-md);max-height:calc(100vh - var(--spacing-xl))}}@media (prefers-color-scheme:dark){.group-card,.groups-empty{background:var(--color-surface-dark,#1f2937);border-color:var(--color-border-dark,#374151)}.modal{background:var(--color-background-dark,#111827)}}