/* ═══════════════════════════════════════════════════════════════════════════
   LANDING CTA
   ═══════════════════════════════════════════════════════════════════════════ */

.landing-cta {
    display: grid;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.landing-cta-note {
    margin: 0;
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
}

.landing-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.landing-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    background: var(--color-bg-subtle);
    transition: all var(--transition-fast);
}

.landing-cta-button.primary {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-text-inverse);
}

.landing-cta-button.primary:hover {
    background: var(--color-secondary-hover);
    border-color: var(--color-secondary-hover);
}

.landing-cta-button.secondary:hover {
    background: var(--color-bg);
    border-color: var(--neutral-300);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MARKDOWN PAGES
   ═══════════════════════════════════════════════════════════════════════════ */

.page-article-content {
    margin-bottom: var(--spacing-xl);
}

.page-article-empty {
    margin: 0;
    color: var(--color-text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ORG PAGES
   ═══════════════════════════════════════════════════════════════════════════ */

.org-pages-card {
    margin-bottom: var(--spacing-lg);
}

.org-pages-form {
    display: grid;
    gap: var(--spacing-md);
}

.org-pages-form-row {
    display: grid;
    gap: var(--spacing-xs);
}

.org-pages-form-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.org-pages-form-input,
.org-pages-form-textarea {
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text-primary);
}

.org-pages-form-input:focus,
.org-pages-form-textarea:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 2px var(--color-primary-muted);
}

.org-pages-form-textarea {
    min-height: 220px;
    resize: vertical;
}

.org-pages-form-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.org-pages-form-actions {
    display: flex;
    justify-content: flex-start;
}

.org-pages-delete-form {
    margin-top: var(--spacing-sm);
}

.org-pages-list {
    display: grid;
    gap: var(--spacing-sm);
    margin: var(--spacing-sm) 0 0;
    padding: 0;
    list-style: none;
}

.org-pages-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
}

.org-pages-item-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.org-pages-item-meta {
    font-size: var(--font-size-xs-plus);
    color: var(--color-text-secondary);
}

.org-pages-item-actions {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ORG AGENDA
   ═══════════════════════════════════════════════════════════════════════════ */

.org-agenda-card {
    margin-bottom: var(--spacing-lg);
}

.org-agenda-form {
    display: grid;
    gap: var(--spacing-md);
}

.org-agenda-form-fields {
    border: 0;
    margin: 0;
    padding: 0;
    min-inline-size: 0;
    display: grid;
    gap: var(--spacing-md);
}

.org-agenda-form-row {
    display: grid;
    gap: var(--spacing-xs);
}

.org-agenda-form-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.org-agenda-form-input,
.org-agenda-form-textarea {
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text-primary);
}

.org-agenda-form-input:focus,
.org-agenda-form-textarea:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 2px var(--color-primary-muted);
}

.org-agenda-form-textarea {
    min-height: 140px;
    resize: vertical;
}

.org-agenda-form-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.org-agenda-form-actions {
    display: flex;
    justify-content: flex-start;
}

.org-agenda-delete-form {
    margin-top: var(--spacing-sm);
}

.org-agenda-checkbox {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px var(--spacing-sm);
}

.org-agenda-checkbox-input {
    grid-row: 1;
    grid-column: 1;
    align-self: center;
    accent-color: var(--color-secondary);
}

.org-agenda-checkbox-label {
    grid-row: 1;
    grid-column: 2;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.org-agenda-checkbox-desc {
    grid-row: 2;
    grid-column: 2;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.org-agenda-list {
    display: grid;
    gap: var(--spacing-sm);
    margin: var(--spacing-sm) 0 0;
    padding: 0;
    list-style: none;
}

.org-agenda-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
}

.org-agenda-item-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-2xs);
}

.org-agenda-item-type {
    font-size: var(--font-size-xs-plus);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.org-agenda-item-key {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-inverse);
    background: var(--color-secondary);
    border-radius: var(--radius-full);
    padding: 2px 8px;
}

.org-agenda-item-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.org-agenda-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    font-size: var(--font-size-xs-plus);
    color: var(--color-text-secondary);
}

.org-agenda-item-actions {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ORG ANNOUNCEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

.org-announcements-card {
    margin-bottom: var(--spacing-lg);
}

.org-announcements-form {
    display: grid;
    gap: var(--spacing-md);
}

.org-announcements-form-fields {
    border: 0;
    margin: 0;
    padding: 0;
    min-inline-size: 0;
    display: grid;
    gap: var(--spacing-md);
}

.org-announcements-form-row {
    display: grid;
    gap: var(--spacing-xs);
}

.org-announcements-form-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.org-announcements-form-input,
.org-announcements-form-textarea {
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text-primary);
}

.org-announcements-form-input:focus,
.org-announcements-form-textarea:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 2px var(--color-primary-muted);
}

.org-announcements-form-textarea {
    min-height: 180px;
    resize: vertical;
}

.org-announcements-form-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.org-announcements-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.org-announcements-option {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 6px 10px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border-light);
    background: var(--color-bg-subtle);
}

.org-announcements-option-input {
    accent-color: var(--color-secondary);
}

.org-announcements-option-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.org-announcements-option-description {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.org-announcements-checkbox {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--spacing-xs);
}

.org-announcements-form-actions {
    display: flex;
    justify-content: flex-start;
}

.org-announcements-preview {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--color-border);
    background: var(--color-bg-subtle);
}

.org-announcements-preview-title {
    margin: 0 0 var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.org-announcements-preview-empty {
    margin: 0;
    color: var(--color-text-muted);
}

.org-announcements-preview-body {
    color: var(--color-text-primary);
}

.org-announcements-list {
    display: grid;
    gap: var(--spacing-sm);
    margin: var(--spacing-sm) 0 0;
    padding: 0;
    list-style: none;
}

.org-announcements-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
}

.org-announcements-item-header {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
}

.org-announcements-status,
.org-announcements-importance,
.org-announcements-pin {
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    background: var(--color-bg-subtle);
    color: var(--color-text-secondary);
}

.org-announcements-pin {
    background: var(--color-secondary);
    color: var(--color-text-inverse);
}

.org-announcements-item-text {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.org-announcements-item-meta {
    margin-top: var(--spacing-xs);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    font-size: var(--font-size-xs-plus);
    color: var(--color-text-secondary);
}

.org-announcements-item-actions {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.org-announcements-archive-form {
    margin-top: var(--spacing-md);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ORG FEEDBACK
   ═══════════════════════════════════════════════════════════════════════════ */

.org-feedback-qr-card,
.org-feedback-form-card,
.org-feedback-preview-card {
    margin-bottom: var(--spacing-lg);
}

.org-feedback-qr-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.org-feedback-qr-desc {
    margin: var(--spacing-xs) 0 0;
    color: var(--color-text-secondary);
}

.org-feedback-qr-body {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
    align-items: center;
}

.org-feedback-qr-image {
    width: calc(var(--spacing-3xl) * 2);
    height: calc(var(--spacing-3xl) * 2);
    padding: var(--spacing-sm);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    background: var(--color-bg-subtle);
}

.org-feedback-qr-meta {
    display: grid;
    gap: var(--spacing-xs);
}

.org-feedback-qr-link {
    color: var(--color-secondary);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    word-break: break-all;
}

.org-feedback-qr-link:hover {
    text-decoration: underline;
}

.org-feedback-qr-status {
    margin: 0;
    font-size: var(--font-size-xs-plus);
    color: var(--color-text-secondary);
}

.org-feedback-form {
    display: grid;
    gap: var(--spacing-lg);
}

.org-feedback-fields {
    border: 0;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--spacing-lg);
}

.org-feedback-publish {
    display: grid;
    gap: var(--spacing-xs);
}

.org-feedback-toggle-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

.org-feedback-toggle-desc {
    font-size: var(--font-size-xs-plus);
    color: var(--color-text-secondary);
}

.org-feedback-question-list {
    display: grid;
    gap: var(--spacing-md);
}

.org-feedback-question-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.org-feedback-question-hint {
    margin: 0;
    font-size: var(--font-size-xs-plus);
    color: var(--color-text-secondary);
}

/* Question card - redesigned */
.org-feedback-question {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    display: grid;
    gap: var(--spacing-md);
    background: var(--color-bg);
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.org-feedback-question:hover {
    border-color: var(--color-border);
}

.org-feedback-question.dragging {
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
    opacity: 0.9;
}

/* Question header with drag handle, badge, and delete */
.org-feedback-question-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.org-feedback-question-drag {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    cursor: grab;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), background var(--transition-fast);
    flex-shrink: 0;
}

.org-feedback-question-drag:hover {
    color: var(--color-text-secondary);
    background: var(--color-bg-subtle);
}

.org-feedback-question-drag:active {
    cursor: grabbing;
}

.org-feedback-question-drag:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.org-feedback-question-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 var(--spacing-xs);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    background: var(--color-bg-subtle);
    border-radius: var(--radius-full);
}

.org-feedback-question-required {
    color: var(--color-danger);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    line-height: 1;
}

.org-feedback-question-header-spacer {
    flex: 1;
}

.org-feedback-question-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: color var(--transition-fast), background var(--transition-fast);
    flex-shrink: 0;
}

.org-feedback-question-delete:hover {
    color: var(--color-danger);
    background: var(--color-danger-muted, rgba(239, 68, 68, 0.1));
}

.org-feedback-question-delete:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.org-feedback-question-delete:disabled:hover {
    color: var(--color-text-muted);
    background: transparent;
}

/* Title field - full width, prominent */
.org-feedback-title-field {
    display: grid;
    gap: var(--spacing-xs);
}

.org-feedback-input--lg {
    font-size: var(--font-size-base);
    padding: var(--spacing-sm) var(--spacing-md);
}

/* Row layout for type + required */
.org-feedback-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--spacing-md);
}

.org-feedback-type-field {
    display: grid;
    gap: var(--spacing-xs);
    flex: 1;
    min-width: 200px;
}

.org-feedback-required-field {
    display: flex;
    align-items: center;
    padding-top: calc(var(--font-size-xs-plus) + var(--spacing-xs));
}

/* Type segmented control with icons */
.org-feedback-type-segment {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 3px;
    border-radius: var(--radius-lg);
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border-light);
}

.org-feedback-type-option {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 0;
    background: transparent;
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs-plus);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.org-feedback-type-option:hover {
    color: var(--color-text-primary);
}

.org-feedback-type-option.active {
    background: var(--color-bg);
    color: var(--color-text-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.org-feedback-type-option svg {
    flex-shrink: 0;
}

/* Collapsible advanced settings */
.org-feedback-advanced {
    border-top: 1px solid var(--color-border-light);
    padding-top: var(--spacing-sm);
}

.org-feedback-advanced-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.org-feedback-advanced-toggle::-webkit-details-marker {
    display: none;
}

.org-feedback-advanced-icon {
    transition: transform var(--transition-fast);
    flex-shrink: 0;
}

.org-feedback-advanced[open] .org-feedback-advanced-icon {
    transform: rotate(180deg);
}

.org-feedback-advanced-hint {
    color: var(--color-text-muted);
    font-weight: var(--font-weight-normal);
    margin-left: var(--spacing-xs);
}

.org-feedback-advanced-content {
    display: grid;
    gap: var(--spacing-md);
    padding-top: var(--spacing-md);
}

/* Field styles */
.org-feedback-field {
    display: grid;
    gap: var(--spacing-xs);
}

.org-feedback-label {
    font-size: var(--font-size-xs-plus);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
}

.org-feedback-hint {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.org-feedback-input,
.org-feedback-select,
.org-feedback-textarea {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
}

.org-feedback-input:focus,
.org-feedback-select:focus,
.org-feedback-textarea:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 2px var(--color-primary-muted);
}

.org-feedback-input.error,
.org-feedback-textarea.error {
    border-color: var(--color-danger);
}

.org-feedback-input--sm {
    max-width: 100px;
}

.org-feedback-textarea {
    min-height: calc(var(--spacing-3xl) + var(--spacing-md));
    resize: vertical;
}

/* Scale inputs row */
.org-feedback-scale-row {
    display: flex;
    gap: var(--spacing-md);
}

/* Legacy grid - kept for compatibility */
.org-feedback-grid {
    display: grid;
    gap: var(--spacing-sm);
    grid-template-columns: repeat(auto-fit, minmax(calc(var(--spacing-3xl) * 3), 1fr));
}

.org-feedback-field--wide {
    grid-column: 1 / -1;
}

/* Legacy checkbox - kept for compatibility */
.org-feedback-checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* Question type visibility */
.org-feedback-question[data-type="text"] .org-feedback-question-options,
.org-feedback-question[data-type="text"] .org-feedback-question-scale {
    display: none;
}

.org-feedback-question[data-type="single"] .org-feedback-question-scale,
.org-feedback-question[data-type="multi"] .org-feedback-question-scale {
    display: none;
}

.org-feedback-question[data-type="scale"] .org-feedback-question-options {
    display: none;
}

.org-feedback-actions {
    display: flex;
    justify-content: flex-start;
}

.org-feedback-preview {
    display: grid;
    gap: var(--spacing-md);
}

.org-feedback-preview-section {
    display: grid;
    gap: var(--spacing-xs);
}

.org-feedback-preview-title {
    margin: 0;
    font-size: var(--font-size-xs-plus);
    color: var(--color-text-secondary);
    text-transform: uppercase;
}

.org-feedback-preview-text {
    margin: 0;
    color: var(--color-text-primary);
}

.org-feedback-preview-empty {
    margin: 0;
    color: var(--color-text-muted);
}

.org-feedback-preview-list {
    margin: 0;
    padding-left: var(--spacing-md);
    display: grid;
    gap: var(--spacing-md);
}

.org-feedback-preview-item {
    display: grid;
    gap: var(--spacing-xs);
}

.org-feedback-preview-header {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    align-items: center;
}

.org-feedback-preview-question {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.org-feedback-preview-meta,
.org-feedback-preview-required {
    font-size: var(--font-size-xs-plus);
    color: var(--color-text-secondary);
}

.org-feedback-preview-options {
    margin: 0;
    padding-left: var(--spacing-md);
    color: var(--color-text-secondary);
    display: grid;
    gap: var(--spacing-xs);
}

.org-feedback-tabs {
    display: inline-flex;
    gap: var(--spacing-sm);
    margin: var(--spacing-md) 0 var(--spacing-lg);
}

.org-feedback-tab {
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-pill);
    text-decoration: none;
    color: var(--color-text-secondary);
    background: var(--color-bg-subtle);
    font-weight: var(--font-weight-medium);
}

.org-feedback-tab.active {
    color: var(--color-text-primary);
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
}

.org-feedback-results-summary,
.org-feedback-results-breakdown,
.org-feedback-results-filters {
    margin-bottom: var(--spacing-lg);
}

.org-feedback-results-summary-header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
}

.org-feedback-results-summary-grid {
    display: grid;
    gap: var(--spacing-sm);
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.org-feedback-results-table {
    overflow-x: auto;
}

.org-feedback-results-filters {
    display: grid;
    gap: var(--spacing-md);
}

.org-feedback-results-filter-form {
    display: grid;
    gap: var(--spacing-md);
    align-items: end;
}

.org-feedback-filter-field {
    display: grid;
    gap: var(--spacing-xs);
}

.org-feedback-filter-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.org-feedback-filter-input,
.org-feedback-filter-select {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-light);
    background: var(--color-bg);
    color: var(--color-text-primary);
}

.org-feedback-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.org-feedback-results-export {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.org-feedback-results-list {
    display: grid;
    gap: var(--spacing-md);
}

.org-feedback-response {
    display: grid;
    gap: var(--spacing-sm);
}

.org-feedback-response-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.org-feedback-response-title {
    margin: 0;
}

.org-feedback-response-meta {
    margin: var(--spacing-2xs) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs-plus);
}

.org-feedback-response-time {
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs-plus);
}

.org-feedback-response-comment {
    margin: 0;
}

.org-feedback-response-answers {
    display: grid;
    gap: var(--spacing-xs);
    margin: 0;
}

.org-feedback-response-answer {
    display: grid;
    gap: var(--spacing-2xs);
}

.org-feedback-response-answer dt {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.org-feedback-response-answer dd {
    margin: 0;
    color: var(--color-text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FEEDBACK PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

.feedback-form-card {
    margin-bottom: var(--spacing-xl);
}

.feedback-form {
    display: grid;
    gap: var(--spacing-xl);
}

.feedback-nps {
    border: 0;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--spacing-md);
}

.feedback-nps-title {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.feedback-nps-scale {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(36px, 1fr));
    gap: var(--spacing-xs);
}

.feedback-nps-item {
    display: grid;
    justify-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-light);
    background: var(--color-bg);
}

.feedback-nps-input {
    margin: 0;
}

.feedback-nps-value {
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

.feedback-nps-hint {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-md);
    font-size: var(--font-size-xs-plus);
    color: var(--color-text-secondary);
}

.feedback-comment {
    display: grid;
    gap: var(--spacing-xs);
}

.feedback-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

.feedback-textarea {
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-light);
    padding: var(--spacing-sm);
    font-size: var(--font-size-sm);
    font-family: inherit;
    background: var(--color-bg);
    color: var(--color-text-primary);
    resize: vertical;
}

.feedback-textarea:focus {
    outline: none;
    border-color: var(--color-border-strong);
    box-shadow: 0 0 0 2px var(--color-focus);
}

.feedback-question-list {
    display: grid;
    gap: var(--spacing-lg);
}

.feedback-question {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    display: grid;
    gap: var(--spacing-md);
    background: var(--color-bg-subtle);
}

.feedback-question-header {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    align-items: center;
}

.feedback-question-title {
    margin: 0;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.feedback-question-required {
    color: var(--color-danger);
    font-weight: var(--font-weight-semibold);
}

.feedback-question-options {
    display: grid;
    gap: var(--spacing-xs);
}

.feedback-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.feedback-option-input {
    margin: 0;
}

.feedback-option-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

.feedback-scale {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.feedback-scale-input {
    width: 120px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-light);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
    background: var(--color-bg);
    color: var(--color-text-primary);
}

.feedback-scale-input:focus {
    outline: none;
    border-color: var(--color-border-strong);
    box-shadow: 0 0 0 2px var(--color-focus);
}

.feedback-scale-range {
    font-size: var(--font-size-xs-plus);
    color: var(--color-text-secondary);
}

.feedback-form-actions {
    display: flex;
    justify-content: flex-end;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PARTICIPANT PAGE HEADER
   ═══════════════════════════════════════════════════════════════════════════ */

/* Page Header */
.participant-page-header {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
    align-items: center;
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border-light);
}

.participant-page-media {
    width: var(--page-header-media-size, 72px);
    height: var(--page-header-media-size, 72px);
    min-width: var(--page-header-media-size, 72px);
    min-height: var(--page-header-media-size, 72px);
    max-width: var(--page-header-media-size, 72px);
    max-height: var(--page-header-media-size, 72px);
    flex: 0 0 var(--page-header-media-size, 72px);
    border-radius: var(--radius-2xl);
    background: linear-gradient(135deg, var(--azure-blue), var(--blue-violet));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 8px 24px -8px rgba(58, 134, 255, 0.4);
    overflow: hidden;
}

.participant-page-header .participant-page-media {
    width: var(--page-header-media-size, 72px);
    height: var(--page-header-media-size, 72px);
}

.participant-page-media svg {
    width: 40%;
    height: 40%;
    color: white;
    display: block;
}

.participant-page-media .ui-avatar,
.participant-page-media .ui-team-logo {
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

.participant-page-media .ui-avatar-img,
.participant-page-media .ui-team-logo-img {
    width: 100%;
    height: 100%;
}

.participant-page-media--plain {
    background: transparent;
    box-shadow: none;
    border: none;
}

.participant-page-media--plain svg {
    color: var(--color-text-primary);
}

.participant-page-body {
    flex: 1;
    min-width: 200px;
    align-self: center;
}

.participant-page-actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-left: auto;
    align-items: center;
}

.participant-page-actions form {
    margin: 0;
}

.participant-page-title {
    margin: 0 0 var(--spacing-xs);
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
}

.participant-page-subtitle {
    margin: 0 0 var(--spacing-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-base);
    min-height: calc(var(--font-size-base) * var(--line-height-base));
}

.participant-page-meta {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.gallery-winners {
    margin-bottom: var(--spacing-lg);
}

.gallery-winners-header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
}

.gallery-winners-title {
    margin: 0;
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
}

.gallery-winners-subtitle {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.gallery-winners-grid {
    margin-top: var(--spacing-sm);
}

.teams-create-disabled-hint {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    background: var(--color-bg-subtle);
    border-radius: var(--radius-full);
}

@media (max-width: 640px) {
    .participant-page-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .participant-page-actions {
        margin-left: 0;
        justify-content: center;
        width: 100%;
    }
}

/* Search & Filters */
.teams-filters-section {
    margin-bottom: var(--spacing-lg);
}

.teams-search-form {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.teams-search-input-wrapper {
    flex: 1;
    position: relative;
}

.teams-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--neutral-400);
    pointer-events: none;
}

.teams-search-input {
    width: 100%;
    padding: var(--spacing-sm) 14px var(--spacing-sm) 44px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--neutral-300);
    font-size: var(--font-size-base);
    background: var(--color-bg);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.teams-search-input:focus {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: var(--shadow-focus);
}

.teams-search-input::placeholder {
    color: var(--neutral-400);
}

.teams-search-btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-lg);
    border: none;
    background: var(--color-secondary);
    color: var(--color-text-inverse);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background var(--transition-fast);
    white-space: nowrap;
}

.teams-search-btn:hover {
    background: var(--color-secondary-hover);
}

.teams-filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.teams-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: var(--color-bg-subtle);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-fast);
}

.teams-filter-tag:hover {
    border-color: var(--neutral-300);
    background: var(--color-bg);
}

.teams-filter-tag.active {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-text-inverse);
}

.teams-filter-tag.clear {
    background: var(--color-bg);
    border-style: dashed;
    color: var(--color-text-muted);
}

.teams-filter-tag.clear:hover {
    border-color: var(--color-danger);
    color: var(--color-danger);
}

/* Teams Grid */
.teams-grid {
    display: grid;
    gap: var(--spacing-md);
}


/* ═══════════════════════════════════════════════════════════════════════════
   TEAM CARD - REDESIGNED
   ═══════════════════════════════════════════════════════════════════════════ */

.teams-card {
    transition: all var(--transition-fast);
    border: 1px solid transparent;
}

.teams-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--color-border);
    transform: translateY(-2px);
}

.teams-card .team-hero-band {
    margin: calc(-1 * var(--spacing-lg)) calc(-1 * var(--spacing-lg)) var(--spacing-md);
    width: calc(100% + var(--spacing-lg) + var(--spacing-lg));
    min-height: 72px;
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

.teams-card-header {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
    margin-bottom: var(--spacing-md);
}

.teams-card-title-block {
    flex: 1;
    min-width: 0;
}

.teams-card-title {
    margin: 0 0 var(--spacing-xs);
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
}

.teams-card-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.teams-card-status.open {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.teams-card-status.closed {
    background: var(--color-bg-muted);
    color: var(--color-text-muted);
}

.teams-card-project {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-info-bg);
    color: var(--color-info);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    width: fit-content;
}

.teams-card-desc {
    margin: 0 0 var(--spacing-md);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.teams-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--spacing-md);
}

.teams-card-tag {
    padding: var(--spacing-xs) 10px;
    border-radius: var(--radius-lg);
    background: var(--color-bg-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.teams-card-tag.muted {
    color: var(--color-text-muted);
}

.teams-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-border-light);
}

.teams-card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.teams-card-members {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.teams-card-comments {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.teams-card-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--spacing-sm) 14px;
    border-radius: var(--radius-lg);
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.teams-card-action:hover {
    background: var(--color-primary-hover);
}

/* Floating Action Button */
.teams-fab {
    position: fixed;
    right: var(--spacing-lg);
    bottom: var(--spacing-xl);
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--amber-gold), var(--blaze-orange));
    color: var(--neutral-900);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 8px 24px -8px rgba(251, 86, 7, 0.5);
    transition: all var(--transition-fast);
    z-index: 850;
}

.teams-fab:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 32px -8px rgba(251, 86, 7, 0.6);
}

.page--with-bug-report .teams-fab {
    bottom: calc(var(--spacing-lg) + 52px + var(--spacing-md));
}

@media (max-width: 640px) {
    .page--with-bug-report .teams-fab {
        bottom: calc(var(--spacing-lg) + 56px + var(--spacing-md));
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROJECTS PAGE - LIST CARDS
   ═══════════════════════════════════════════════════════════════════════════ */

.projects-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.projects-card-header {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.projects-card-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    background: var(--color-bg-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-secondary);
    flex-shrink: 0;
}

.projects-card-icon svg {
    width: 22px;
    height: 22px;
}

.projects-card-title-block {
    flex: 1;
    min-width: 0;
}

.projects-card-title {
    margin: 0 0 var(--spacing-2xs);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.projects-card-team {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.projects-card-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.projects-card-status.submitted {
    color: var(--color-success);
    background: var(--color-success-bg);
}

.projects-card-status.draft {
    color: var(--color-text-secondary);
    background: var(--color-bg-subtle);
}

.projects-card-desc {
    color: var(--color-text);
}

.projects-card-desc p {
    margin: 0;
}

.projects-card-muted {
    color: var(--color-text-secondary);
}

.projects-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.projects-card-tag {
    padding: 4px 10px;
    border-radius: var(--radius-full);
    background: var(--color-bg-subtle);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.projects-card-tag.muted {
    background: var(--color-bg);
    border: 1px dashed var(--color-border);
}

.projects-card-links {
    border-top: 1px solid var(--color-border-light);
    padding-top: var(--spacing-sm);
}

.projects-card-links-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.projects-card-link {
    color: var(--color-secondary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.projects-card-link:hover {
    text-decoration: underline;
}

.projects-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.projects-card-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.projects-card-comments {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.projects-card-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-lg);
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.projects-card-action:hover {
    background: var(--color-primary-hover);
}


.team-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--spacing-md);
}

.team-tag {
    padding: var(--spacing-xs) 10px;
    border-radius: var(--radius-lg);
    background: var(--color-bg-muted);
    font-size: var(--font-size-xs);
}

.team-tag.muted {
    color: var(--color-text-muted);
}

.team-tag.needed {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.team-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-border-light);
}

.team-members {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.team-action {
    padding: var(--spacing-sm) 14px;
    border-radius: var(--radius-lg);
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.team-action:hover {
    background: var(--color-primary-hover);
}

.team-action.disabled {
    background: var(--color-bg-muted);
    color: var(--neutral-300);
    pointer-events: none;
}

.teams-create {
    position: fixed;
    right: var(--spacing-lg);
    bottom: var(--spacing-xl);
    padding: 14px var(--spacing-md);
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    box-shadow: var(--shadow-xl);
    transition: all var(--transition-fast);
}

.teams-create:hover {
    background: var(--color-primary-hover);
    transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEAM CREATE FORM
   ═══════════════════════════════════════════════════════════════════════════ */

.teams-create-form-row {
    display: grid;
    gap: var(--spacing-sm);
}

.teams-create-form-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
}

.teams-create-form-input {
    padding: var(--spacing-md);
    border: 2px solid var(--neutral-200);
    border-radius: var(--radius-xl);
    font-size: var(--font-size-base);
    background: var(--color-bg);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.teams-create-form-input:focus {
    outline: none;
    border-color: var(--color-secondary);
    box-shadow: var(--shadow-focus);
}

.teams-create-form-input::placeholder {
    color: var(--neutral-400);
}

.teams-create-form-hint {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.teams-create-tips {
    background: var(--color-bg-subtle);
    border-radius: var(--radius-xl);
    padding: var(--spacing-md);
}

.teams-create-tips-title {
    margin: 0 0 var(--spacing-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
}

.teams-create-tips-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--spacing-sm);
}

.teams-create-tips-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.teams-create-tips-list li svg {
    color: var(--color-success);
    flex-shrink: 0;
    margin-top: 2px;
}

.teams-create-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEAM DETAILS PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

.team-tabs {
    margin-bottom: 20px;
}

.team-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.team-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) 14px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: var(--color-bg-subtle);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.team-tab:hover {
    border-color: var(--neutral-300);
    background: var(--color-bg);
}

.team-tab.active {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-text-inverse);
}

.team-tab.disabled {
    background: var(--color-bg-muted);
    border-color: var(--color-border-light);
    color: var(--neutral-300);
    pointer-events: none;
}

.team-section {
    margin-bottom: 20px;
}

.team-landing {
    display: grid;
    gap: var(--spacing-lg);
}

.team-landing-hero .team-hero-band {
    min-height: 220px;
    border-radius: var(--radius-xxl);
}

.team-landing-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}

.team-landing-logo {
    flex-shrink: 0;
}

.team-landing-title {
    display: grid;
    gap: 4px;
    min-width: 220px;
    flex: 1;
}

.team-landing-eyebrow {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin: 0;
}

.team-landing-name {
    font-size: var(--font-size-xxl);
    margin: 0;
}

.team-landing-subtitle {
    margin: 0;
    color: var(--color-text-secondary);
}

.team-landing-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.team-join-hero {
    min-width: min(100%, 360px);
    margin-inline-start: auto;
    display: grid;
    gap: var(--spacing-xs);
    align-items: stretch;
}

.team-join-hero form {
    margin: 0;
}

.team-join-hero-button {
    min-height: 56px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.team-join-hero-button:disabled {
    opacity: 0.72;
    box-shadow: none;
}

.team-join-hero-reason {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-error);
}

.team-landing-section {
    display: grid;
    gap: var(--spacing-md);
}

.team-landing-project-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.team-posts {
    display: grid;
    gap: var(--spacing-md);
}

.team-posts-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.team-posts-title {
    display: grid;
    gap: 4px;
}

.team-posts-status {
    background: var(--color-success-bg);
    color: var(--color-success);
    padding: 6px 10px;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
}

.team-posts-composer {
    display: grid;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border-radius: var(--radius-xl);
    background: var(--color-bg-subtle);
}

.team-posts-fields {
    display: grid;
    gap: var(--spacing-sm);
}

.team-posts-field {
    margin: 0;
}

.team-posts-label {
    font-weight: 600;
}

.team-posts-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.team-posts-input,
.team-posts-textarea {
    width: 100%;
}

.team-posts-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
}

.team-posts-note {
    padding: var(--spacing-sm);
    border-radius: var(--radius-lg);
    background: var(--color-bg-subtle);
}

.team-posts-empty {
    padding: var(--spacing-md);
    border-radius: var(--radius-xl);
    background: var(--color-bg-subtle);
    color: var(--color-text-muted);
}

.team-posts-list {
    display: grid;
    gap: var(--spacing-md);
}

.team-post-card {
    padding: var(--spacing-md);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border-light);
    background: var(--color-bg);
    display: grid;
    gap: var(--spacing-sm);
}

.team-post-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.team-post-author {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.team-post-author-meta {
    display: grid;
    gap: 4px;
}

.team-post-author-name {
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
}

.team-post-meta {
    display: flex;
    gap: 8px;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.team-post-edited {
    color: var(--color-text-secondary);
}

.team-post-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.team-post-title {
    margin: 0;
    font-size: var(--font-size-lg);
}

.team-post-body {
    display: grid;
    gap: 6px;
}

.team-post-edit {
    position: relative;
}

.team-post-edit summary {
    list-style: none;
}

.team-post-edit summary::-webkit-details-marker {
    display: none;
}

.team-post-edit-form {
    margin-top: var(--spacing-sm);
    display: grid;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    border-radius: var(--radius-lg);
    background: var(--color-bg-subtle);
}

.team-post-delete-form {
    display: inline-flex;
}

.team-post-reactions {
    display: grid;
    gap: var(--spacing-xs);
}

.team-post-reactions-form {
    display: grid;
    gap: var(--spacing-xs);
}

.team-post-emoji-grid,
.team-post-emoji-extra {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.team-post-emoji-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid var(--color-border-light);
    background: var(--color-bg);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.team-post-emoji {
    font-size: var(--font-size-base);
}

.team-post-emoji-btn.is-selected {
    border-color: var(--color-primary);
    background: var(--color-primary-bg);
}

.team-post-emoji-btn.is-loading {
    opacity: 0.7;
    cursor: progress;
}

.team-post-emoji-count {
    font-weight: 600;
}

.team-post-comments {
    margin-top: var(--spacing-sm);
}

.team-members-list--compact .team-member-item {
    padding-bottom: var(--spacing-sm);
}

.team-landing-cta form {
    margin-top: var(--spacing-sm);
}

.team-editor-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--spacing-md);
}

.team-hero-band {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--color-bg-muted);
    border-radius: var(--radius-xl);
}

.team-hero-band--with-image {
    background: transparent;
}

.team-hero-band--pattern {
    background-image: repeating-linear-gradient(135deg,
            var(--color-primary) 0 12px,
            var(--color-secondary) 12px 24px);
}

.team-hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.team-hero-section {
    display: grid;
    gap: var(--spacing-md);
}

.team-hero-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.team-hero-preview {
    flex: 1;
    min-width: 240px;
}

.team-hero-preview .team-hero-band {
    min-height: 140px;
}

.teams-card .team-hero-band.team-hero-band--with-image,
.team-landing-hero .team-hero-band.team-hero-band--with-image,
.team-hero-preview .team-hero-band.team-hero-band--with-image {
    min-height: 0;
}

.teams-card .team-hero-band.team-hero-band--with-image {
    aspect-ratio: 6 / 1;
}

.team-landing-hero .team-hero-band.team-hero-band--with-image,
.team-hero-preview .team-hero-band.team-hero-band--with-image {
    aspect-ratio: 4 / 1;
}

.team-hero-empty {
    padding: var(--spacing-lg);
    border-radius: var(--radius-xl);
    background: var(--color-bg-subtle);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.team-hero-meta {
    display: grid;
    gap: var(--spacing-xs);
    min-width: 200px;
}

.team-hero-name {
    margin: 0;
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
}

.team-hero-hint {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.team-hero-form {
    display: grid;
    gap: var(--spacing-md);
}

.team-hero-mode {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm);
}

.team-hero-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
}

.team-hero-option {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.team-hero-upload {
    display: grid;
    gap: 6px;
}

.team-hero-input {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    background: var(--color-bg);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.team-hero-input:focus {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: var(--shadow-focus);
}

.team-hero-upload-hint {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.team-hero-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
}

.team-logo-section {
    display: grid;
    gap: var(--spacing-md);
}

.team-logo-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.team-logo-preview {
    display: flex;
    align-items: center;
}

.team-logo-meta {
    display: grid;
    gap: var(--spacing-xs);
    min-width: 200px;
}

.team-logo-name {
    margin: 0;
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
}

.team-logo-hint {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.team-logo-form {
    display: grid;
    gap: var(--spacing-md);
}

.team-logo-upload {
    display: grid;
    gap: 6px;
}

.team-logo-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
}

.team-logo-input {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    background: var(--color-bg);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.team-logo-input:focus {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: var(--shadow-focus);
}

.team-logo-upload-hint {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.team-logo-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
}

.team-presenter-form {
    display: grid;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.team-presenter-list {
    border: 0;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--spacing-xs);
}

.team-presenter-option {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
}

.team-presenter-option input {
    accent-color: var(--color-secondary);
}

.team-presenter-name {
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.team-presenter-role {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.team-presenter-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
}

.team-preference-form {
    display: grid;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.team-preference-list {
    border: 0;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--spacing-xs);
}

.team-preference-option {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
}

.team-preference-option input {
    accent-color: var(--color-secondary);
}

.team-preference-label {
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.team-preference-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
}

.team-settings-form {
    display: grid;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    max-width: 560px;
}

.team-settings-field {
    display: grid;
    gap: 6px;
}

.team-settings-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
}

.team-settings-input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    background: var(--color-bg);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.team-settings-input:focus {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: var(--shadow-focus);
}

.team-settings-actions {
    display: flex;
    justify-content: flex-start;
    gap: var(--spacing-sm);
}

.team-members-list,
.team-requests-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-md);
    display: grid;
    gap: var(--spacing-sm);
}

.team-member-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border-light);
}

.team-member-main {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 0;
}

.team-member-info {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.team-member-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.team-member-name {
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.team-member-controls {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

.team-requests-list li {
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border-light);
}

.team-member-role,
.team-request-status {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-secondary);
}

.team-status-hint {
    margin: var(--spacing-md) 0;
    color: var(--color-text-secondary);
}

.team-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    font-weight: var(--font-weight-semibold);
}

.team-muted {
    color: var(--color-text-muted);
}

.team-request-main {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-sm);
    width: 100%;
}

.team-requests-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.team-request-meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.team-request-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.team-request-actions form {
    margin: 0;
}

.team-project-name {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--spacing-sm);
}

.team-project-status {
    margin: 0 0 var(--spacing-sm);
    color: var(--color-text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROJECT TAB - VIEW & EDITOR
   ═══════════════════════════════════════════════════════════════════════════ */

/* Project View */
.project-view {
    display: grid;
    gap: var(--spacing-lg);
}

.project-view-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.project-view-title {
    margin: 0;
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
}

.project-status-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.project-status-badge.draft {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.project-status-badge.submitted {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.project-view-section {
    display: grid;
    gap: var(--spacing-sm);
}

.project-view-label {
    margin: 0;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
}

.project-description-content {
    line-height: var(--line-height-relaxed);
    color: var(--color-text);
}

.project-description-content p {
    margin: 0 0 var(--spacing-sm);
}

.project-description-content p:last-child {
    margin-bottom: 0;
}

.project-empty-hint,
.project-restricted-hint {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-style: italic;
}

.project-links-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--spacing-xs);
}

.project-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-text-link);
    text-decoration: none;
    font-size: var(--font-size-sm);
    padding: var(--spacing-xs) 0;
    transition: color var(--transition-fast);
}

.project-link:hover {
    color: var(--color-text-link-hover);
}

.project-link svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.project-link span {
    word-break: break-all;
}

.project-view-footer {
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border-light);
}

.project-footer-hint {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Project Submit Section */
.project-submit-section {
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border-light);
}

.project-submit-hint {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-warning);
}

.project-submit-form {
    margin: 0;
}

/* Project Assets */
.project-assets-section {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border-light);
}

.project-assets-list {
    list-style: none;
    margin: var(--spacing-sm) 0;
    padding: 0;
    display: grid;
    gap: var(--spacing-xs);
}

.project-asset-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    background: var(--color-surface-subtle);
}

.project-asset-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 0;
}

.project-asset-kind-badge {
    flex-shrink: 0;
    display: inline-flex;
    padding: 2px var(--spacing-xs);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-xs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: var(--color-info-bg, var(--color-surface));
    color: var(--color-info-text, var(--color-text-secondary));
}

.project-asset-kind-badge.video {
    background: var(--color-warning-bg, #fef3c7);
    color: var(--color-warning-text, #92400e);
}

.project-asset-link {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-link);
    text-decoration: none;
}

.project-asset-link:hover {
    text-decoration: underline;
}

.project-asset-meta {
    flex-shrink: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.project-asset-delete-form {
    flex-shrink: 0;
}

.project-asset-upload-form {
    margin-top: var(--spacing-md);
}

.project-asset-upload-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm);
}

.project-asset-name-input {
    flex: 1 1 200px;
    min-width: 0;
}

@media (max-width: 640px) {
    .project-asset-upload-row {
        flex-direction: column;
        align-items: stretch;
    }

    .project-asset-item {
        flex-wrap: wrap;
    }
}

/* Project Editor */
.project-editor {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border-light);
}

.project-editor-title {
    margin: 0 0 var(--spacing-lg);
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
}

/* Project Form */
.project-form {
    display: grid;
    gap: var(--spacing-lg);
}

.project-form-row {
    display: grid;
    gap: 6px;
}

.project-form-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
}

.project-form-input {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    background: var(--color-bg);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.project-form-input:focus {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: var(--shadow-focus);
}

.project-form-input::placeholder {
    color: var(--neutral-400);
}

.project-form-textarea {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    font-family: var(--font-mono);
    background: var(--color-bg);
    resize: vertical;
    min-height: 120px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.project-form-textarea:focus {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: var(--shadow-focus);
}

.project-form-textarea::placeholder {
    font-family: var(--font-base);
    color: var(--neutral-400);
}

.project-form-textarea--short {
    min-height: 80px;
}

.project-form-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.project-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ORG PANEL - SUMMARY & INVITES
   ═══════════════════════════════════════════════════════════════════════════ */

.org-summary {
    margin-bottom: var(--spacing-lg);
}

.org-invites {
    margin: var(--spacing-lg) 0;
}

.org-invite-grid {
    display: grid;
    gap: var(--spacing-md);
}

.org-invite-card {
    display: grid;
    gap: var(--spacing-sm);
}

.org-invite-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.org-invite-title {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}

.org-invite-desc {
    margin: var(--spacing-xs) 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.org-invite-button {
    padding: 10px 14px;
    border-radius: var(--radius-lg);
    border: none;
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.org-invite-button:hover {
    background: var(--color-primary-hover);
}

.org-invite-list {
    display: grid;
    gap: 10px;
}

.org-invite-item {
    display: grid;
    gap: 6px;
    padding: 10px var(--spacing-sm);
    border-radius: var(--radius-lg);
    background: var(--color-bg-subtle);
}

.org-invite-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.org-invite-sub {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.org-invite-url {
    font-size: var(--font-size-xs-plus);
    color: var(--color-text);
    text-decoration: none;
    overflow-wrap: anywhere;
    flex: 1 1 auto;
}

.org-invite-url:hover {
    text-decoration: underline;
    color: var(--color-text-link);
}

.org-invite-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    justify-content: space-between;
}

.org-invite-inline-form {
    display: inline-flex;
    margin: 0;
}

.org-invite-copy {
    padding: 6px 12px;
    border-radius: var(--radius-base);
    border: 1px solid var(--neutral-300);
    background: var(--color-bg);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.org-invite-copy:hover {
    background: var(--color-bg-subtle);
    border-color: var(--neutral-400);
}

.org-invite-copy.is-copied {
    background: var(--color-success-bg);
    color: var(--color-success);
    border-color: var(--color-success-bg);
}

.org-invite-copy.is-failed {
    background: var(--color-danger-bg);
    color: var(--color-danger);
    border-color: var(--color-danger-bg);
}

.org-invite-disable {
    padding: 6px 12px;
    border-radius: var(--radius-base);
    border: 1px solid var(--color-danger-bg);
    background: var(--color-danger-bg);
    color: var(--color-danger);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.org-invite-disable:hover {
    border-color: var(--color-danger);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ORG OPERATIONS & PREP LAYOUT
   ═══════════════════════════════════════════════════════════════════════════ */

.org-ops {
    margin: 0 0 var(--spacing-lg);
}

.org-ops-feedback {
    margin-bottom: var(--spacing-md);
}

.org-ops-grid {
    display: grid;
    gap: var(--spacing-md);
}

.org-ops-secondary {
    display: grid;
    gap: var(--spacing-md);
}

.org-export-form {
    margin-top: var(--spacing-sm);
}

.org-ops-metrics {
    margin-top: var(--spacing-md);
}

.org-ops-metrics-header {
    margin-bottom: var(--spacing-md);
}

.org-ops-metrics-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}

.org-ops-metrics-subtitle {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.org-ops-metrics-grid {
    display: grid;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.org-ops-metrics-card {
    padding: var(--spacing-xs);
    border-radius: var(--radius-lg);
    background: var(--color-bg-subtle);
}

.org-ops-metrics .admin-mini-stat-helper {
    display: none;
}

.org-ops-secondary .section-title {
    font-size: var(--font-size-h4);
    color: var(--color-text-secondary);
}

.org-ops .org-phase-actions,
.org-ops .org-stage,
.org-ops .org-fallback,
.org-ops .org-top-projects {
    margin: 0;
}

.org-context {
    margin: var(--spacing-lg) 0;
}

.org-context-card>.ui-card {
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.org-context-card>.org-summary {
    margin-bottom: 0;
}

.org-context-card>.org-ops-metrics {
    margin-top: 0;
}

.org-context-card>*+* {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ORG TEAM PRESENTERS
   ═══════════════════════════════════════════════════════════════════════════ */

.org-team-presenters {
    display: grid;
    gap: var(--spacing-sm);
    margin: 0 0 var(--spacing-lg);
}

.org-team-presenters-header {
    display: grid;
    gap: var(--spacing-xs);
}

.org-team-presenters-card {
    display: grid;
    gap: var(--spacing-md);
}

.org-team-presenters-table-wrapper {
    overflow-x: auto;
}

.org-team-presenters-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
}

.org-team-presenters-table th {
    text-align: left;
    padding-bottom: var(--spacing-sm);
    font-size: var(--font-size-xs-plus);
    color: var(--color-text-secondary);
}

.org-team-presenters-table td {
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--color-border-light);
}

.org-team-presenters-table tr:last-child td {
    border-bottom: none;
}

.org-team-presenters-link {
    color: var(--color-text-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
}

.org-team-presenters-link:hover {
    text-decoration: underline;
}

.org-team-presenters-missing {
    color: var(--color-warning);
    font-weight: var(--font-weight-semibold);
}

.org-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: var(--spacing-xl);
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-lg) var(--spacing-lg);
    min-height: 100vh;
}

.org-sidebar {
    position: sticky;
    top: var(--spacing-lg);
    height: fit-content;
}

.org-sidebar-header {
    padding: 0 var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--neutral-300);
    margin-bottom: var(--spacing-sm);
}

.org-sidebar-title {
    margin: 0;
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
}

.org-sidebar-subtitle {
    margin: var(--spacing-xs) 0 0;
    font-size: var(--font-size-xs-plus);
    color: var(--color-text-muted);
}

.org-content {
    display: grid;
    gap: var(--spacing-lg);
}

.org-page {
    display: block;
}

.org-page .admin-page-header {
    margin-bottom: 0;
    padding-bottom: 0;
}

.org-page-content {
    display: grid;
    gap: var(--spacing-lg);
}

.org-presentations {
    display: grid;
    gap: var(--spacing-sm);
}

.org-presentations-card {
    display: grid;
    gap: var(--spacing-md);
}

.org-presentations-header {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.org-presentations-desc {
    margin: 0;
    color: var(--color-text-secondary);
}

.org-presentations-meta {
    margin: var(--spacing-xs) 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.org-presentations-timezone {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.org-presentations-timestamps {
    display: grid;
    gap: var(--spacing-sm);
}

.org-presentations-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid var(--neutral-200);
}

.org-presentations-item:last-child {
    border-bottom: none;
}

.org-presentations-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.org-presentations-value {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.org-presentations-form {
    display: grid;
    gap: var(--spacing-sm);
}

.org-presentations-field {
    display: grid;
    gap: var(--spacing-xxs);
}

.org-presentations-input {
    width: 100%;
    max-width: 320px;
}

.org-presentations-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-100);
}

.org-presentations-actions {
    display: flex;
    justify-content: flex-end;
}

.org-presentation-queue {
    display: grid;
    gap: var(--spacing-sm);
}

.org-presentation-queue-card {
    display: grid;
    gap: var(--spacing-md);
}

.org-presentation-queue-header {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.org-presentation-queue-desc {
    margin: 0;
    color: var(--color-text-secondary);
}

.org-presentation-queue-meta {
    display: grid;
    gap: var(--spacing-sm);
}

.org-presentation-queue-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid var(--neutral-200);
}

.org-presentation-queue-item:last-child {
    border-bottom: none;
}

.org-presentation-queue-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.org-presentation-queue-value {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.org-presentation-queue-form {
    display: flex;
    justify-content: flex-end;
}

.org-presentation-queue-reorder-form {
    display: grid;
    gap: var(--spacing-sm);
}

.org-presentation-queue-reorder-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-sm);
}

.org-presentation-queue-hint {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.org-presentation-queue-reorder-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.org-presentation-queue-status {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.org-presentation-queue-copy {
    display: grid;
    gap: var(--spacing-xs);
}

.org-presentation-queue-copy-hint {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.org-presentation-queue-copy-text {
    width: 100%;
    min-height: 140px;
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    border: 1px solid var(--neutral-200);
    background: var(--surface-0);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    line-height: 1.4;
    resize: vertical;
}

.org-presentation-queue-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--spacing-sm);
}

.org-presentation-queue-entry {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: var(--spacing-sm);
    align-items: center;
    padding: var(--spacing-sm);
    border-radius: var(--radius-md);
    border: 1px solid var(--neutral-200);
    background: var(--surface-100);
}

.org-presentation-queue-entry.is-ready {
    border-color: var(--color-success-200);
}

.org-presentation-queue-entry.is-dragging {
    opacity: 0.7;
    border-style: dashed;
}

.org-presentation-queue-entry.is-over {
    border-color: var(--color-primary-200);
    background: var(--surface-50);
}

.org-presentation-queue-handle {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--neutral-200);
    background: var(--surface-0);
    color: var(--color-text-muted);
    cursor: grab;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-semibold);
}

.org-presentation-queue-handle:active {
    cursor: grabbing;
}

.org-presentation-queue-position {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    min-width: 1.5rem;
    text-align: center;
}

.org-presentation-queue-content {
    display: grid;
    gap: var(--spacing-xxs);
}

.org-presentation-queue-team {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    text-decoration: none;
}

.org-presentation-queue-team:hover {
    text-decoration: underline;
}

.org-presentation-queue-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.org-audit-title {
    margin: 0;
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
}

.org-audit-desc {
    margin: var(--spacing-xs) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.org-audit-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    align-items: center;
}

.org-audit-filters {
    display: grid;
    gap: var(--spacing-md);
}

.org-audit-filter-group {
    display: grid;
    gap: var(--spacing-xs);
}

.org-audit-filter-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
}

.org-audit-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.org-audit-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: var(--color-bg-subtle);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.org-audit-filter-pill input {
    accent-color: var(--color-secondary);
}

.org-audit-filter-pill.active {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-text-inverse);
}

.org-audit-filter-input {
    padding: 10px var(--spacing-sm);
    border-radius: var(--radius-md);
    border: 1px solid var(--neutral-300);
    font-size: var(--font-size-sm);
    background: var(--color-bg);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.org-audit-filter-input:focus {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: var(--shadow-focus);
}

.org-audit-filter-hint {
    font-size: var(--font-size-xs-plus);
    color: var(--color-text-muted);
}

.org-audit-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.org-audit-filter-submit {
    padding: 10px 14px;
    border-radius: var(--radius-lg);
    border: none;
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.org-audit-filter-submit:hover {
    background: var(--color-primary-hover);
}

.org-audit-filter-reset {
    display: inline-flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--neutral-300);
    background: var(--color-bg);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.org-audit-filter-reset:hover {
    background: var(--color-bg-subtle);
    border-color: var(--neutral-400);
}

.org-audit-table-wrapper {
    overflow-x: auto;
}

.org-audit-table {
    min-width: 720px;
}

.org-audit-cell-time,
.org-audit-cell-type,
.org-audit-cell-actor {
    white-space: nowrap;
}

.org-audit-cell-event {
    min-width: 240px;
}

.org-audit-type {
    font-size: var(--font-size-xs-plus);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
}

.org-audit-cell-details .admin-details {
    margin: 0;
}

.org-audit-empty {
    font-size: var(--font-size-xs-plus);
    color: var(--color-text-muted);
}

@media (min-width: 1024px) {
    .org-ops-grid {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        align-items: start;
    }
}

@media (max-width: 960px) {
    .org-layout {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .org-sidebar {
        position: static;
    }
}

@media (max-width: 768px) {
    .org-ops .org-action-button {
        width: 100%;
        justify-content: center;
    }

    .org-ops .org-fallback-body {
        align-items: flex-start;
    }

    .org-ops .org-fallback-qr {
        width: 100%;
        max-width: 220px;
        height: auto;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ORG JURY SETTINGS
   ═══════════════════════════════════════════════════════════════════════════ */

.org-jury-settings {
    margin: var(--spacing-lg) 0;
}

.org-jury-card {
    display: grid;
    gap: var(--spacing-lg);
}

.org-jury-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.org-jury-title {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}

.org-jury-desc {
    margin: var(--spacing-xs) 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.org-jury-locked {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.org-jury-locked-meta {
    display: block;
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.org-jury-form {
    display: grid;
    gap: var(--spacing-lg);
}

/* Mode Switch - Segmented Control */
.org-jury-mode-switch {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    padding: 4px;
    border-radius: var(--radius-lg);
    background: var(--neutral-100);
}

.org-jury-mode-option {
    display: block;
    cursor: pointer;
}

.org-jury-mode-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.org-jury-mode-option__box {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    text-align: center;
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.org-jury-mode-option:hover .org-jury-mode-option__box {
    background: var(--neutral-200);
}

.org-jury-mode-option input[type="radio"]:checked+.org-jury-mode-option__box {
    background: var(--color-bg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.org-jury-mode-option input[type="radio"]:focus-visible+.org-jury-mode-option__box {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 1px;
}

.org-jury-mode-option input[type="radio"]:disabled+.org-jury-mode-option__box {
    cursor: not-allowed;
    opacity: 0.6;
}

.org-jury-mode-option__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.org-jury-mode-option__desc {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* Criteria Section */
.org-jury-criteria {
    display: grid;
    gap: var(--spacing-md);
}

.org-jury-criteria-title {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.org-jury-list {
    display: grid;
    gap: var(--spacing-sm);
}

.org-jury-item {
    display: grid;
    grid-template-columns: 1fr 100px;
    gap: var(--spacing-md);
    align-items: end;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    background: var(--neutral-50);
    border: 1px solid var(--neutral-100);
}

.org-jury-item__name {
    display: grid;
    gap: var(--spacing-xs);
    min-width: 0;
}

.org-jury-item__weight {
    display: grid;
    gap: var(--spacing-xs);
}

.org-jury-item__label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
}

.org-jury-item__input {
    padding: 10px var(--spacing-sm);
    border-radius: var(--radius-md);
    border: 1px solid var(--neutral-200);
    font-size: var(--font-size-sm);
    background: var(--color-bg);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.org-jury-item__input:focus {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: var(--shadow-focus);
}

.org-jury-item__input.error {
    border-color: var(--color-danger);
}

.org-jury-item__input--weight {
    text-align: center;
}

/* Mode-based text visibility - Default: criteria mode */
.org-jury-text-nominations {
    display: none;
}

/* When nominations radio is checked - use :has() */
.org-jury-form:has(#jury-mode-nominations:checked) .org-jury-text-criteria {
    display: none;
}

.org-jury-form:has(#jury-mode-nominations:checked) .org-jury-text-nominations {
    display: inline;
}

.org-jury-form:has(#jury-mode-nominations:checked) .org-jury-item__weight {
    display: none;
}

.org-jury-form:has(#jury-mode-nominations:checked) .org-jury-item {
    grid-template-columns: 1fr;
}

/* Actions */
.org-jury-actions-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.org-jury-actions-form {
    margin: 0;
}

.org-jury-lock-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.org-jury-lock-hint {
    margin: 0;
    max-width: 280px;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-align: right;
}

.org-jury-button {
    padding: 10px 14px;
    border-radius: var(--radius-lg);
    border: none;
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.org-jury-button:hover {
    background: var(--color-primary-hover);
}

.org-jury-button.secondary {
    background: var(--color-secondary);
    color: var(--color-text-inverse);
}

.org-jury-button.secondary:hover {
    background: var(--color-secondary-hover);
}

.org-jury-button:disabled {
    background: var(--color-bg-muted);
    color: var(--neutral-300);
    cursor: not-allowed;
}

@media (max-width: 600px) {
    .org-jury-mode-switch {
        grid-template-columns: 1fr;
    }

    .org-jury-item {
        grid-template-columns: 1fr;
    }

    .org-jury-form:has(#jury-mode-nominations:checked) .org-jury-item {
        grid-template-columns: 1fr;
    }

    .org-jury-actions-row {
        flex-direction: column;
        align-items: stretch;
    }

    .org-jury-lock-group {
        justify-content: space-between;
    }

    .org-jury-lock-hint {
        max-width: none;
        text-align: left;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ORG JURY TIE-BREAK
   ═══════════════════════════════════════════════════════════════════════════ */

.org-tie-break {
    margin: var(--spacing-lg) 0;
}

.org-tie-break-card {
    display: grid;
    gap: var(--spacing-md);
}

.org-tie-break-desc {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.org-tie-break-applied {
    padding: var(--spacing-sm);
    border-radius: var(--radius-md);
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
}

.org-tie-break-applied-title {
    margin: 0;
    font-size: var(--font-size-xs-plus);
    font-weight: var(--font-weight-semibold);
}

.org-tie-break-applied-meta {
    margin: var(--spacing-xs) 0 0;
    font-size: var(--font-size-xs-plus);
    color: var(--color-text-muted);
}

.org-tie-break-form {
    display: grid;
    gap: var(--spacing-md);
}

.org-tie-break-block {
    display: grid;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}

.org-tie-break-title {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}

.org-tie-break-candidates {
    display: grid;
    gap: var(--spacing-xs);
}

.org-tie-break-label {
    font-size: var(--font-size-xs-plus);
    color: var(--color-text-muted);
}

.org-tie-break-list {
    margin: 0;
    padding-left: var(--spacing-md);
    display: grid;
    gap: var(--spacing-xs);
    color: var(--color-text-secondary);
}

.org-tie-break-item {
    display: grid;
    gap: 2px;
}

.org-tie-break-name {
    font-weight: var(--font-weight-semibold);
}

.org-tie-break-meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.org-tie-break-grid {
    display: grid;
    gap: var(--spacing-sm);
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.org-tie-break-field {
    display: grid;
    gap: 6px;
}

.org-tie-break-field-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.org-tie-break-select {
    padding: 10px var(--spacing-sm);
    border-radius: var(--radius-md);
    border: 1px solid var(--neutral-300);
    font-size: var(--font-size-sm);
    background: var(--color-bg);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.org-tie-break-select:focus {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: var(--shadow-focus);
}

.org-tie-break-reason {
    margin: 0;
}

.org-tie-break-input {
    padding: 10px var(--spacing-sm);
    border-radius: var(--radius-md);
    border: 1px solid var(--neutral-300);
    font-size: var(--font-size-sm);
    background: var(--color-bg);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.org-tie-break-input:focus {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: var(--shadow-focus);
}

.org-tie-break-actions {
    display: flex;
    justify-content: flex-end;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ORG HACKATHON SETTINGS
   ═══════════════════════════════════════════════════════════════════════════ */

.org-hackathon-settings {
    display: grid;
    gap: var(--spacing-sm);
}

.org-hackathon-settings-grid {
    display: grid;
    gap: var(--spacing-lg);
}

.org-hackathon-settings-card {
    display: grid;
    gap: var(--spacing-md);
}

.org-hackathon-settings-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.org-hackathon-settings-desc {
    margin: var(--spacing-xs) 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.org-hackathon-settings-form {
    display: grid;
    gap: var(--spacing-sm);
}

.org-hackathon-settings-field {
    display: grid;
    gap: var(--spacing-xxs);
}

.org-hackathon-settings-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.org-hackathon-settings-input,
.org-hackathon-settings-select,
.org-hackathon-settings-textarea {
    padding: 10px var(--spacing-sm);
    border-radius: var(--radius-md);
    border: 1px solid var(--neutral-300);
    font-size: var(--font-size-sm);
    background: var(--color-bg);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    width: 100%;
    box-sizing: border-box;
}

.org-hackathon-settings-textarea {
    resize: vertical;
}

.org-hackathon-settings-input:focus,
.org-hackathon-settings-select:focus,
.org-hackathon-settings-textarea:focus {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: var(--shadow-focus);
}

.org-hackathon-settings-actions {
    display: flex;
    justify-content: flex-end;
}

.org-hackathon-settings-hint {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.org-hackathon-settings-meta {
    display: grid;
    gap: var(--spacing-xs);
}

.org-hackathon-settings-meta-item {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid var(--neutral-200);
}

.org-hackathon-settings-meta-item:last-child {
    border-bottom: none;
}

.org-hackathon-settings-meta-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.org-hackathon-settings-meta-value {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.org-hackathon-settings-accordion {
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md);
}

.org-hackathon-settings-accordion>summary {
    cursor: pointer;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.org-hackathon-settings-accordion-content {
    padding: var(--spacing-sm) var(--spacing-md);
    border-top: 1px solid var(--neutral-200);
}

.org-hackathon-settings-json {
    margin: 0;
    background: var(--neutral-900);
    color: var(--neutral-100);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs-plus);
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

.org-hackathon-settings-divider {
    height: 1px;
    background: var(--neutral-200);
    margin: var(--spacing-sm) 0;
}

.org-hackathon-settings-subtitle {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ORG MATTERMOST
   ═══════════════════════════════════════════════════════════════════════════ */

.org-mattermost {
    margin: var(--spacing-lg) 0;
}

.org-mattermost-card {
    display: grid;
    gap: var(--spacing-md);
}

.org-mattermost-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.org-mattermost-title {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}

.org-mattermost-desc {
    margin: var(--spacing-xs) 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.org-mattermost-form {
    display: grid;
    gap: var(--spacing-sm);
}

.org-mattermost-grid {
    display: grid;
    gap: var(--spacing-md);
}

.org-mattermost-field {
    display: grid;
    grid-template-columns: 10rem 1fr;
    align-items: center;
    gap: var(--spacing-sm);
}

.org-mattermost-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.org-mattermost-input {
    padding: 10px var(--spacing-sm);
    border-radius: var(--radius-md);
    border: 1px solid var(--neutral-300);
    font-size: var(--font-size-sm);
    background: var(--color-bg);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    width: 100%;
    box-sizing: border-box;
}

.org-mattermost-input:focus {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: var(--shadow-focus);
}

.org-mattermost-input.error {
    border-color: var(--color-danger);
}

.org-mattermost-actions,
.org-mattermost-test {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    justify-content: flex-end;
}

.org-mattermost-tests {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    justify-content: flex-end;
}

.org-mattermost-test {
    display: block;
}

.org-mattermost-button {
    padding: 10px var(--spacing-md);
    border-radius: var(--radius-lg);
    border: none;
    background: var(--color-secondary);
    color: var(--color-text-inverse);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.org-mattermost-button:hover {
    background: var(--color-secondary-hover);
}

.org-mattermost-button.secondary {
    background: var(--color-primary);
    color: var(--color-text-on-primary);
}

.org-mattermost-button.secondary:hover {
    background: var(--color-primary-hover);
}

.org-mattermost-button:disabled {
    background: var(--color-bg-muted);
    color: var(--neutral-300);
    cursor: not-allowed;
}

.audience-status {
    display: grid;
    grid-template-columns: min-content 1fr;
    column-gap: var(--spacing-sm);
    row-gap: var(--spacing-xs);
    align-items: start;
    padding: var(--spacing-md);
    border-radius: var(--radius-xl);
    margin-bottom: 20px;
    background: var(--color-bg-muted);
    color: var(--color-text-muted);
}

.audience-status-dot {
    grid-row: 1;
    align-self: center;
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    background: var(--neutral-300);
}

.audience-status.open {
    background: var(--color-secondary-bg);
    color: var(--color-secondary);
}

.audience-status.open .audience-status-dot {
    background: var(--color-secondary);
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.audience-status.paused {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

.audience-status.paused .audience-status-dot {
    background: var(--color-danger);
}

.audience-status.closed {
    background: var(--color-bg-muted);
    color: var(--color-text-muted);
}

.audience-status-text {
    grid-column: 2;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}

.audience-status-desc {
    grid-column: 2;
    font-size: var(--font-size-sm);
}

.audience-notice {
    display: grid;
    gap: 6px;
    margin-bottom: 20px;
}

.audience-notice-title {
    margin: 0;
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
}

.audience-notice-desc {
    margin: 0;
    color: var(--color-text-secondary);
}

.audience-voting {
    display: grid;
    gap: var(--spacing-sm);
}

.audience-projects {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--spacing-sm);
}

.audience-project-card {
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    background: var(--color-bg-subtle);
    padding: 14px var(--spacing-md);
    transition: all var(--transition-fast);
}

.audience-project-card:hover {
    border-color: var(--neutral-300);
}

.audience-project-card.selected {
    border-color: var(--color-secondary);
    background: var(--color-secondary-bg);
}

.audience-vote-form {
    display: grid;
    gap: 10px;
}

.audience-project-card .project-card-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}

.audience-project-card .project-card-team {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.audience-project-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.audience-selected {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-secondary);
}

.audience-vote-button {
    border: none;
    border-radius: var(--radius-full);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-secondary);
    color: var(--color-text-inverse);
    font-size: var(--font-size-xs-plus);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.audience-vote-button:hover {
    background: var(--color-secondary-hover);
}

.audience-hint {
    margin: 0;
    font-size: var(--font-size-xs-plus);
    color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ORG SUMMARY & STATE
   ═══════════════════════════════════════════════════════════════════════════ */

.org-summary-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    justify-content: space-between;
    align-items: center;
}

.org-summary-title {
    margin: 0 0 6px;
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
}

.org-summary-meta {
    margin: 0;
    color: var(--color-text-muted);
}

.org-state {
    display: inline-flex;
    align-items: center;
    padding: 6px var(--spacing-sm);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.org-state.active {
    background: var(--color-secondary-bg);
    color: var(--color-secondary);
}

.org-state.draft {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.org-state.archived {
    background: var(--color-bg-muted);
    color: var(--color-text-muted);
}

.org-state.unknown {
    background: var(--color-bg-muted);
    color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ORG PHASE ACTIONS
   ═══════════════════════════════════════════════════════════════════════════ */

.org-phase-actions {
    margin: var(--spacing-lg) 0;
}

.org-action-group {
    display: grid;
    gap: var(--spacing-xs);
}

.org-action-group .section-title {
    margin: 0;
}

.org-action-group--secondary {
    margin-top: var(--spacing-lg);
}

.org-action-group-desc {
    margin: 0;
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.org-action-subtitle {
    margin: 0 0 var(--spacing-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
}

.org-action-list {
    display: grid;
    gap: var(--spacing-md);
}

.org-action-list--secondary .org-action-card {
    background: var(--color-bg-subtle);
    box-shadow: none;
    border: 1px solid var(--color-border-light);
}

.org-action-card {
    display: grid;
    gap: var(--spacing-sm);
}

.org-action-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.org-action-title {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}

.org-action-desc {
    margin: var(--spacing-xs) 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.org-action-next {
    margin: var(--spacing-xs) 0 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.org-action-fix {
    display: grid;
    gap: var(--spacing-2xs);
    margin: var(--spacing-xs) 0 0;
}

.org-action-reason {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.org-action-fix-link {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    text-decoration: none;
}

.org-action-fix-link:hover {
    text-decoration: underline;
}

.org-action-fix-link:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.org-action-form {
    display: grid;
    gap: 10px;
}

.org-action-confirm {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.org-action-confirm input {
    margin-top: 3px;
}

.org-action-button {
    padding: 10px 14px;
    border-radius: var(--radius-lg);
    border: none;
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.org-action-button:hover {
    background: var(--color-primary-hover);
}

.org-action-button.danger {
    background: var(--color-danger);
    color: var(--color-text-inverse);
}

.org-action-button.danger:hover {
    background: var(--color-danger-hover);
}

.org-action-button:disabled {
    background: var(--color-bg-muted);
    color: var(--neutral-300);
    cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ORG FALLBACK (QR CODE)
   ═══════════════════════════════════════════════════════════════════════════ */

.org-fallback {
    margin: var(--spacing-lg) 0;
}

.org-fallback-card {
    display: grid;
    gap: var(--spacing-md);
}

.org-fallback-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.org-fallback-title {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}

.org-fallback-desc {
    margin: var(--spacing-xs) 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.org-fallback-body {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    align-items: center;
}

.org-fallback-qr {
    width: 164px;
    height: 164px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    background: var(--color-bg);
    display: block;
    object-fit: contain;
}

.org-fallback-meta {
    display: grid;
    gap: var(--spacing-sm);
    min-width: 200px;
}

.org-fallback-code {
    margin: 0;
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.12em;
}

.org-fallback-url {
    font-size: var(--font-size-xs-plus);
    color: var(--color-text-link);
    word-break: break-all;
}

.org-fallback-url:hover {
    text-decoration: underline;
    color: var(--color-text-link-hover);
}

.org-fallback-hint {
    margin: 0;
    font-size: var(--font-size-xs-plus);
    color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ORG STAGE (TV MODE)
   ═══════════════════════════════════════════════════════════════════════════ */

.org-stage {
    margin: var(--spacing-lg) 0;
}

.org-stage-card {
    display: grid;
    gap: var(--spacing-md);
}

.org-stage-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.org-stage-title {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}

.org-stage-desc {
    margin: var(--spacing-xs) 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.org-stage-state {
    display: grid;
    gap: var(--spacing-sm);
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    padding: var(--spacing-sm);
    background: var(--color-bg-subtle);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
}

.org-stage-state-item {
    display: grid;
    gap: var(--spacing-xs);
}

.org-stage-label {
    font-size: var(--font-size-xs-plus);
    color: var(--color-text-muted);
}

.org-stage-value {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.org-stage-screen {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    align-items: flex-start;
    padding: var(--spacing-sm);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    background: var(--color-bg);
}

.org-stage-screen-qr {
    width: 100%;
    max-width: 180px;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    background: var(--color-bg);
    display: block;
    object-fit: contain;
}

.org-stage-screen-meta {
    display: grid;
    gap: var(--spacing-sm);
    width: 100%;
}

.org-stage-screen-link-row {
    display: grid;
    gap: 2px;
}

.org-stage-screen-label {
    margin: 0;
    font-size: var(--font-size-xs-plus);
    color: var(--color-text-muted);
}

.org-stage-screen-link {
    font-size: var(--font-size-xs-plus);
    color: var(--color-text-link);
    overflow-wrap: anywhere;
}

.org-stage-screen-link:hover {
    text-decoration: underline;
    color: var(--color-text-link-hover);
}

.org-stage-screen-hint {
    margin: 0;
    font-size: var(--font-size-xs-plus);
    color: var(--color-text-muted);
}

.org-stage-form {
    display: grid;
    gap: var(--spacing-sm);
}

.org-stage-form-grid {
    display: grid;
    gap: var(--spacing-sm);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.org-stage-form-label {
    font-size: var(--font-size-xs-plus);
    color: var(--color-text-muted);
}

.org-stage-form-select {
    padding: 10px var(--spacing-sm);
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-base);
    font-size: var(--font-size-sm);
    background: var(--color-bg);
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.org-stage-form-select:focus {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: var(--shadow-focus);
}

.org-stage-form-hint {
    font-size: var(--font-size-xs-plus);
    color: var(--color-text-muted);
}

.org-stage-actions {
    display: flex;
    justify-content: flex-end;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ORG INTEGRATIONS & KPIs
   ═══════════════════════════════════════════════════════════════════════════ */

.org-integrations {
    margin-top: var(--spacing-lg);
}

.org-integration-grid {
    display: grid;
    gap: var(--spacing-md);
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.org-integration-card {
    display: grid;
    gap: var(--spacing-sm);
}

.org-integration-title {
    margin: 0;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-muted);
}

.org-integration-value {
    margin: 0;
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
}

.org-integration-helper {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ORG TOP PROJECTS
   ═══════════════════════════════════════════════════════════════════════════ */

.org-top-projects {
    margin: var(--spacing-lg) 0;
}

.org-top-card {
    padding: 20px;
}

.org-top-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--spacing-sm);
}

.org-top-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--spacing-sm);
    align-items: center;
    padding: 10px var(--spacing-sm);
    border-radius: var(--radius-lg);
    background: var(--color-bg-subtle);
}

.org-top-rank {
    font-weight: var(--font-weight-bold);
    color: var(--color-secondary);
}

.org-top-name {
    font-weight: var(--font-weight-semibold);
}

.org-top-votes {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ORG KPIs
   ═══════════════════════════════════════════════════════════════════════════ */

.org-kpis {
    margin-top: var(--spacing-lg);
}

.org-kpi-grid {
    display: grid;
    gap: var(--spacing-md);
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.org-kpi-card {
    display: grid;
    gap: var(--spacing-sm);
}

.org-kpi-card .admin-mini-stat {
    display: grid;
    gap: var(--spacing-sm);
    padding: 0;
    border-bottom: none;
}

.org-kpi-card .admin-mini-stat-label {
    margin: 0;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-muted);
}

.org-kpi-card .admin-mini-stat-value {
    font-size: var(--font-size-h2-plus);
    font-weight: var(--font-weight-bold);
}

.org-kpi-card .admin-mini-stat-helper {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   JURY PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

.jury-status {
    display: grid;
    grid-template-columns: min-content 1fr;
    column-gap: var(--spacing-sm);
    row-gap: var(--spacing-xs);
    align-items: start;
    padding: var(--spacing-md) 20px;
    border-radius: var(--radius-xl);
    background: var(--color-bg);
    margin-bottom: 20px;
    border: 1px solid var(--color-border-light);
}

.jury-status-dot {
    grid-row: 1;
    align-self: center;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--neutral-300);
}

.jury-status.open .jury-status-dot {
    background: var(--color-success);
    animation: pulse 2s infinite;
}

.jury-status.pending .jury-status-dot {
    background: var(--color-warning);
}

.jury-status.closed .jury-status-dot {
    background: var(--neutral-200);
}

.jury-status-text {
    grid-column: 2;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
}

.jury-status-desc {
    grid-column: 2;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.jury-notice {
    margin-bottom: var(--spacing-lg);
}

.jury-draft {
    margin-bottom: var(--spacing-lg);
}

.jury-draft-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.jury-draft-indicator {
    font-size: var(--font-size-xs-plus);
    padding: 6px 10px;
    border-radius: var(--radius-full);
    background: var(--color-bg-muted);
    color: var(--color-text-secondary);
}

.jury-draft-indicator.saved {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.jury-draft-indicator.saving {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.jury-draft-indicator.error {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

.jury-draft-hint {
    margin: var(--spacing-sm) 0 0;
    font-size: var(--font-size-xs-plus);
    color: var(--color-text-muted);
}

.jury-voting {
    display: grid;
    gap: var(--spacing-lg);
}

.jury-form {
    display: grid;
    gap: 20px;
}

.jury-criteria-header {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.jury-criteria-pill {
    display: grid;
    gap: 2px;
    padding: 10px 14px;
    border-radius: var(--radius-lg);
    background: var(--color-bg-muted);
}

.jury-criteria-title {
    font-weight: var(--font-weight-semibold);
}

.jury-criteria-weight {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.jury-project {
    border-top: 1px solid var(--color-border-light);
    padding-top: 20px;
    display: grid;
    gap: var(--spacing-sm);
}

.jury-project:first-of-type {
    border-top: none;
    padding-top: 0;
}

.jury-project .project-card-title {
    margin: 0 0 6px;
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
}

.jury-project .project-card-team {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.jury-project .project-card-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.jury-scores {
    display: grid;
    gap: var(--spacing-sm);
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.jury-score-input {
    display: grid;
    gap: 6px;
    font-size: var(--font-size-xs-plus);
}

.jury-score-input select {
    padding: var(--spacing-sm) 10px;
    border-radius: var(--radius-md);
    border: 1px solid var(--neutral-300);
    background: var(--color-bg);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.jury-score-input select:focus {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: var(--shadow-focus);
}

.jury-score-input select.jury-score-unsaved,
.jury-nomination-item select.jury-score-unsaved {
    border-color: var(--color-warning);
    background: var(--color-warning-bg);
}

.jury-score-input select.jury-score-saved,
.jury-nomination-item select.jury-score-saved {
    border-color: var(--color-success);
    background: var(--color-success-bg);
}

.jury-nominations {
    display: grid;
    gap: 20px;
}

.jury-nomination {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    padding: var(--spacing-md);
}

.jury-nomination-title {
    margin: 0 0 var(--spacing-sm);
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
}

.jury-nomination-grid {
    display: grid;
    gap: var(--spacing-sm);
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.jury-nomination-item {
    display: grid;
    gap: 6px;
    font-size: var(--font-size-xs-plus);
}

.jury-nomination-item select {
    padding: var(--spacing-sm) 10px;
    border-radius: var(--radius-md);
    border: 1px solid var(--neutral-300);
    background: var(--color-bg);
}

.jury-voting-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.jury-voting-header .section-title {
    margin-bottom: 0;
}

.jury-filter {
    display: flex;
    gap: var(--spacing-sm);
}

.jury-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--spacing-sm) 14px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: var(--color-bg-subtle);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    transition: all var(--transition-fast);
}

.jury-filter-pill:hover {
    border-color: var(--neutral-300);
    background: var(--color-bg);
}

.jury-filter-pill.active {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-text-inverse);
}

.jury-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radius-full);
    background: rgba(0, 0, 0, 0.1);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
}

.jury-filter-pill.active .jury-filter-count {
    background: rgba(255, 255, 255, 0.2);
}

.jury-actions {
    display: flex;
    justify-content: flex-end;
}

.jury-save-button {
    background: var(--color-secondary);
    color: var(--color-text-inverse);
    border: none;
    border-radius: var(--radius-lg);
    padding: 10px var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.jury-save-button:hover {
    background: var(--color-secondary-hover);
}

.jury-results-link-wrap {
    display: flex;
    justify-content: flex-end;
}

.jury-results-link {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.results-page {
    display: grid;
    gap: var(--spacing-lg);
}

.results-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.results-progress {
    display: grid;
    gap: var(--spacing-sm);
}

.results-progress-head {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-sm);
    align-items: baseline;
}

.results-progress-meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.results-progress-bar {
    width: 100%;
    height: 14px;
}

.results-progress-percent {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
}

.results-nominations {
    display: grid;
    gap: var(--spacing-md);
}

.results-nomination {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-sm);
    background: var(--color-bg);
}

.results-nomination-title {
    margin: 0 0 var(--spacing-sm);
    font-size: var(--font-size-base);
}

.results-jury-list,
.results-top-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--spacing-sm);
}

.results-jury-item,
.results-top-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px var(--spacing-sm);
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: var(--color-bg-subtle);
}

.results-jury-name,
.results-top-name {
    font-weight: var(--font-weight-semibold);
}

.results-jury-metrics,
.results-top-score {
    font-variant-numeric: tabular-nums;
}

.results-jury-left {
    grid-column: 1 / -1;
    font-size: var(--font-size-xs-plus);
    color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADMIN PANEL
   ═══════════════════════════════════════════════════════════════════════════ */

.admin-layout {
    display: grid;
    grid-template-columns: 256px 1fr;
    gap: var(--spacing-xl);
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-lg) var(--spacing-lg);
    min-height: 100vh;
}

@media (max-width: 768px) {
    .admin-layout {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
}

/* Sidebar */
.admin-sidebar {
    position: sticky;
    top: var(--spacing-lg);
    height: fit-content;
}

.admin-sidebar-header {
    padding: 0 var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--neutral-300);
    margin-bottom: var(--spacing-sm);
}

.admin-sidebar-title {
    margin: 0;
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
}

.admin-sidebar-subtitle {
    margin: var(--spacing-xs) 0 0;
    font-size: var(--font-size-xs-plus);
    color: var(--color-text-muted);
}

/* Navigation groups */
.admin-nav {
    display: grid;
    gap: var(--spacing-xs);
}

.admin-nav-group {
    margin-bottom: var(--spacing-sm);
}

.admin-nav-group-title {
    padding: var(--spacing-sm) var(--spacing-sm) 6px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.admin-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px;
}

.admin-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--spacing-sm) var(--spacing-sm);
    border-radius: var(--radius-base);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: background var(--transition-fast);
}

.admin-nav-item:hover {
    background: var(--color-bg-muted);
}

.admin-nav-item.active {
    background: var(--color-secondary-bg);
    color: var(--color-secondary);
    font-weight: var(--font-weight-semibold);
    position: relative;
}

.admin-nav-item.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    background: var(--color-secondary);
    border-radius: 0 2px 2px 0;
}

.admin-nav-item.danger {
    color: var(--color-danger);
}

.admin-nav-item.danger:hover {
    background: var(--color-danger-bg);
}

.admin-nav-icon {
    width: 16px;
    height: 16px;
    opacity: 0.7;
}

/* Admin users */
.admin-user-cell {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.admin-user-meta {
    display: grid;
    gap: 2px;
}

.admin-user-name {
    font-weight: var(--font-weight-semibold);
}

.admin-user-id {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.admin-user-role {
    font-weight: var(--font-weight-medium);
}

.admin-user-role-code {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.admin-user-profile {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.admin-user-profile-name {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.admin-user-profile-id {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.admin-nav-badge {
    margin-left: auto;
    padding: 2px var(--spacing-sm);
    border-radius: var(--radius-full);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    background: var(--color-bg-muted);
    color: var(--color-text-muted);
}

.admin-nav-badge.active {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.admin-nav-badge.warning {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.admin-nav-badge.error {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

/* Main content area */
.admin-content {
    min-width: 0;
}

.admin-page-header {
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
}

.admin-page-header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.admin-page-title {
    margin: 0 0 6px;
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
}

.admin-page-desc {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.admin-page-back-link {
    color: var(--color-text-muted);
    text-decoration: none;
}

.admin-page-back-link:hover {
    color: var(--color-text);
    text-decoration: underline;
}

/* Section cards */
.admin-section {
    margin-bottom: 20px;
}

.admin-section-header {
    padding: var(--spacing-md) 20px;
    border-bottom: 1px solid var(--color-border-light);
}

.admin-section-title {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}

.admin-section-desc {
    margin: var(--spacing-xs) 0 0;
    font-size: var(--font-size-xs-plus);
    color: var(--color-text-muted);
}

.admin-section-body {
    padding: 20px;
}

.admin-section-footer {
    padding: var(--spacing-md) 20px;
    border-top: 1px solid var(--color-border-light);
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
}

.settings-group-title {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.settings-group-desc {
    margin: var(--spacing-xs) 0 0;
    font-size: var(--font-size-sm);
}

/* Forms */
.admin-form {
    display: grid;
    gap: var(--spacing-md);
}

.admin-form-row {
    display: grid;
    gap: 6px;
}

.admin-form-row.horizontal {
    grid-template-columns: 200px 1fr;
    gap: var(--spacing-md);
    align-items: start;
}

.admin-form-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
}

.admin-form-hint {
    font-size: var(--font-size-xs-plus);
    color: var(--color-text-muted);
    margin-top: var(--spacing-xs);
}

.admin-form-input {
    padding: 10px var(--spacing-sm);
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-base);
    font-size: var(--font-size-sm);
    background: var(--color-bg);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.admin-form-input:focus {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: var(--shadow-focus);
}

.admin-form-input::placeholder {
    color: var(--neutral-300);
}

.admin-form-input.error {
    border-color: var(--color-danger);
}

.admin-form-textarea {
    padding: 10px var(--spacing-sm);
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-base);
    font-size: var(--font-size-sm);
    font-family: inherit;
    background: var(--color-bg);
    resize: vertical;
    min-height: 100px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.admin-form-textarea:focus {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: var(--shadow-focus);
}

.admin-form-select {
    padding: 10px var(--spacing-sm);
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-base);
    font-size: var(--font-size-sm);
    background: var(--color-bg);
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.admin-form-select:focus {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: var(--shadow-focus);
}

/* Buttons */
.admin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 10px var(--spacing-md);
    border-radius: var(--radius-base);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 1px solid transparent;
    text-decoration: none;
}

.admin-btn.primary {
    background: var(--color-secondary);
    color: var(--color-text-inverse);
    border-color: var(--color-secondary);
}

.admin-btn.primary:hover {
    background: var(--color-secondary-hover);
    border-color: var(--color-secondary-hover);
}

.admin-btn.secondary {
    background: var(--color-bg);
    color: var(--color-text-secondary);
    border-color: var(--neutral-300);
}

.admin-btn.secondary:hover {
    background: var(--color-bg-subtle);
    border-color: var(--neutral-400);
}

.admin-btn.danger {
    background: var(--color-danger);
    color: var(--color-text-inverse);
    border-color: var(--color-danger);
}

.admin-btn.danger:hover {
    background: var(--color-danger-hover);
    border-color: var(--color-danger-hover);
}

.admin-btn.success {
    background: var(--color-success);
    color: var(--color-text-inverse);
    border-color: var(--color-success);
}

.admin-btn.success:hover {
    background: var(--color-secondary-hover);
    border-color: var(--color-secondary-hover);
}

.admin-btn.sm {
    padding: 6px var(--spacing-sm);
    font-size: var(--font-size-xs-plus);
}

.admin-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Tables */
.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table th {
    text-align: left;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--color-border-light);
    background: var(--color-bg-subtle);
}

.admin-table td {
    padding: 14px var(--spacing-md);
    font-size: var(--font-size-sm);
    border-bottom: 1px solid var(--color-border-light);
    vertical-align: middle;
}

.admin-table tr:last-child td {
    border-bottom: none;
}

.admin-table tr:hover td {
    background: var(--color-bg-subtle);
}

.admin-table-actions {
    text-align: right;
}

.admin-table-actions .admin-btn+.admin-btn {
    margin-left: var(--spacing-sm);
}

.admin-table-col-range {
    width: 120px;
}

.admin-table-col-value {
    width: 140px;
}

.admin-table-col-actions {
    width: 100px;
}


/* Status badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--spacing-xs) 10px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: var(--color-bg-muted);
    color: var(--color-text-muted);
}

.status-badge--large {
    font-size: var(--font-size-sm);
    padding: 6px 14px;
    letter-spacing: 0.06em;
}

.status-badge--with-dot {
    gap: 8px;
}

.status-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.status-badge--default,
.status-badge--empty,
.status-badge--used {
    background: var(--color-bg-muted);
    color: var(--color-text-muted);
}

.status-badge--ready,
.status-badge--done,
.status-badge--success {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.status-badge--warning,
.status-badge--paused,
.status-badge--draft {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.status-badge--blocked,
.status-badge--locked {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

.status-badge--waiting {
    background: var(--color-info-bg);
    color: var(--color-info);
}

/* Cards grid */
.admin-cards {
    display: grid;
    gap: var(--spacing-md);
}

.admin-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: 20px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.admin-card:hover {
    border-color: var(--neutral-300);
    box-shadow: var(--shadow-md);
}

.admin-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.admin-card-title {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}

.admin-card-subtitle {
    margin: var(--spacing-xs) 0 0;
    font-size: var(--font-size-xs-plus);
    color: var(--color-text-muted);
}

.admin-card-body {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.admin-card-footer {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-sm);
}

.admin-card-link {
    color: var(--color-text-link);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.admin-card-link:hover {
    text-decoration: underline;
    color: var(--color-text-link-hover);
}

/* Stats grid */
.admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.admin-stat {
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md) 20px;
}

.admin-stat-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.admin-stat-value {
    font-size: var(--font-size-h2-plus);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
}

.admin-stat-hint {
    font-size: var(--font-size-xs-plus);
    color: var(--color-text-muted);
    margin-top: var(--spacing-xs);
}

/* Details list */
.admin-details {
    display: grid;
    gap: var(--spacing-sm);
}

.admin-details-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: var(--spacing-md);
    padding: 10px 0;
    border-bottom: 1px solid var(--color-bg-muted);
    font-size: var(--font-size-sm);
}

.admin-details-row:last-child {
    border-bottom: none;
}

.admin-details-label {
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
}

.admin-details-value {
    color: var(--color-text);
}

/* Divider */
.admin-divider {
    height: 1px;
    background: var(--color-border-light);
    margin: 20px 0;
}

/* Code/JSON display */
.admin-code {
    background: var(--neutral-800);
    color: var(--neutral-100);
    padding: var(--spacing-md);
    border-radius: var(--radius-base);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs-plus);
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

/* Accordion/details */
.admin-accordion {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-base);
    margin-bottom: var(--spacing-sm);
}

.admin-accordion summary {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    background: var(--color-bg-subtle);
    border-radius: var(--radius-base);
}

.admin-accordion[open] summary {
    border-radius: var(--radius-base) var(--radius-base) 0 0;
    border-bottom: 1px solid var(--color-border-light);
}

.admin-accordion-content {
    padding: var(--spacing-md);
}

/* Quick actions */
.admin-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

/* Inline form */
.admin-inline-form {
    display: flex;
    gap: var(--spacing-sm);
    align-items: flex-end;
}

.admin-inline-form .admin-form-row {
    flex: 1;
    min-width: 200px;
}

/* Dashboard Grid */
.admin-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
    margin-bottom: 20px;
}

.admin-dashboard-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.admin-dashboard-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 1024px) {
    .admin-dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .admin-dashboard-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {

    .admin-dashboard-grid,
    .admin-dashboard-grid-3,
    .admin-dashboard-grid-2 {
        grid-template-columns: 1fr;
    }
}

.admin-dashboard-card {
    margin-bottom: 0;
}

.admin-dashboard-card .admin-section-header {
    padding: var(--spacing-sm) var(--spacing-md);
}

.admin-dashboard-card .admin-section-body {
    padding: var(--spacing-sm) var(--spacing-md);
}

/* Mini Stats */
.admin-mini-stats {
    display: grid;
    gap: var(--spacing-sm);
}

.admin-mini-stat {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid var(--color-bg-muted);
}

.admin-mini-stat:last-child {
    border-bottom: none;
}

.admin-mini-stat.danger {
    color: var(--color-danger);
}

.admin-mini-stat.danger .admin-mini-stat-value {
    color: var(--color-danger);
    font-weight: var(--font-weight-bold);
}

.admin-mini-stat-label {
    font-size: var(--font-size-xs-plus);
    color: var(--color-text-muted);
}

.admin-mini-stat-value {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.admin-quick-links {
    display: grid;
    gap: var(--spacing-sm);
}

.admin-quick-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.admin-quick-links-list a {
    display: block;
    padding: 6px 0;
    color: var(--color-text-link);
    text-decoration: none;
    font-size: var(--font-size-sm);
}

.admin-quick-links-list a:hover {
    text-decoration: underline;
    color: var(--color-text-link-hover);
}

/* Code badge */
.admin-code-badge {
    background: var(--color-bg-muted);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs-plus);
    font-family: var(--font-mono);
}

/* Hint text */
.admin-hint {
    margin: var(--spacing-sm) 0 0;
    font-size: var(--font-size-xs-plus);
    color: var(--color-text-muted);
}

.admin-hint.warning {
    background: var(--color-warning-bg);
    color: var(--color-warning);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-base);
    border-left: 3px solid var(--color-warning);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LANDING PAGE
   ═══════════════════════════════════════════════════════════════════════════ */
.page-body--landing .site-header {
    position: relative;
    z-index: 1;
}

.landing-hero {
    text-align: center;
    padding: var(--spacing-2xl) var(--spacing-lg) var(--spacing-2xl);
    position: relative;
    overflow: hidden;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: var(--spacing-lg);
}

.landing-hero__content {
    position: relative;
    z-index: 1;
}

.landing-hero__cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.landing-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.2));
}

.landing-logo {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--amber-gold), var(--blaze-orange));
    border-radius: var(--radius-2xl);
    margin: 0 auto var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-display);
    box-shadow: 0 8px 24px -8px rgba(251, 86, 7, 0.4);
}

.landing-logo--image {
    background: var(--color-bg);
    padding: var(--spacing-xs);
}

.landing-logo__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.landing-title {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    margin: 0 0 var(--spacing-sm);
    color: var(--color-text);
}

.landing-hero--with-cover .landing-title,
.landing-hero--with-cover .landing-date,
.landing-hero--with-cover .landing-meta {
    color: var(--color-text-inverse);
    text-shadow: 0 2px 8px rgba(15, 23, 42, 0.45), 0 0 1px rgba(15, 23, 42, 0.9);
}

.landing-date {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    margin: 0;
}

.landing-meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: var(--spacing-xs) 0 0;
}

.landing-countdown {
    margin-bottom: var(--spacing-lg);
}

.landing-countdown-label {
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0 0 var(--spacing-md);
}

.landing-countdown .countdown {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
}

.landing-countdown .countdown-unit {
    text-align: center;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-page);
    border-radius: var(--radius-lg);
    min-width: 72px;
}

.landing-countdown .countdown-value {
    font-size: var(--font-size-h2-plus);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
}

.landing-countdown .countdown-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.landing-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xl);
}

.landing-actions-note {
    margin: 0;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    background: var(--color-bg-subtle);
    color: var(--color-text-secondary);
    text-align: center;
    font-size: var(--font-size-sm-plus);
}

.landing-timeline {}

/* ─────────────────────────────────────────────────────────────────────────
   LANDING SECTION TITLES
   Заголовки секций лендинга с визуальным акцентом для ритмичной структуры
   ───────────────────────────────────────────────────────────────────────── */

.landing-section-title {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    margin: 0 0 var(--spacing-lg);
    color: var(--color-text);
    position: relative;
    padding-left: var(--spacing-md);
}

.landing-section-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15em;
    bottom: 0.15em;
    width: 4px;
    background: linear-gradient(180deg, var(--amber-gold) 0%, var(--blaze-orange) 100%);
    border-radius: var(--radius-full);
}

/* Секции лендинга - отступы для ритма */
.landing-section {
    margin-top: var(--spacing-2xl);
}

.landing-section:first-child {
    margin-top: 0;
}

.timeline-item {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-dot {
    width: 12px;
    height: 12px;
    background: var(--azure-blue);
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
}

.timeline-dot.phase-2 {
    background: var(--blue-violet);
}

.timeline-dot.phase-3 {
    background: var(--neon-pink);
}

.timeline-date {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm-plus);
    color: var(--color-text);
    margin-bottom: 2px;
}

.timeline-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

@media (min-width: 768px) {
    .landing-hero {
        padding: var(--spacing-2xl) 0 var(--spacing-xl);
    }

    .landing-logo {
        width: 96px;
        height: 96px;
        font-size: var(--font-size-display-lg);
    }

    .landing-title {
        font-size: var(--font-size-display);
    }

    .landing-actions {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .landing-actions .cta-btn,
    .landing-actions .btn {
        width: auto;
        min-width: 160px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PARTICIPANTS GRID (Landing page)
   ═══════════════════════════════════════════════════════════════════════════ */

.participants-grid-section {
    margin-top: var(--spacing-2xl);
    margin-bottom: var(--spacing-lg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   UPDATES FEED (Landing page)
   ═══════════════════════════════════════════════════════════════════════════ */

.landing-updates {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.landing-updates-empty {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.landing-updates-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--spacing-sm);
}

.landing-updates-item {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    overflow: hidden;
}

.landing-updates-row {
    display: block;
    padding: var(--spacing-md);
    color: inherit;
    transition: background var(--transition-fast);
}

.landing-updates-row:hover {
    background: var(--color-bg-subtle);
}

.landing-updates-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.landing-updates-title {
    margin: 0;
    font-size: var(--font-size-sm-plus);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.landing-updates-inline-link {
    color: inherit;
    text-decoration: none;
    border-radius: var(--radius-sm);
}

.landing-updates-inline-link:hover {
    text-decoration: underline;
}

.landing-updates-inline-link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.landing-updates-time {
    font-size: var(--font-size-xs-plus);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.landing-updates-body {
    margin: var(--spacing-xs) 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ORG ENGAGEMENT FEED
   ═══════════════════════════════════════════════════════════════════════════ */

.org-feed-card {}

.org-feed-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--spacing-sm);
}

.org-feed-item {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    overflow: hidden;
}

.org-feed-row {
    display: block;
    padding: var(--spacing-md);
    color: inherit;
    transition: background var(--transition-fast);
}

.org-feed-row:hover {
    background: var(--color-bg-subtle);
}

.org-feed-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.org-feed-title {
    margin: 0;
    font-size: var(--font-size-sm-plus);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.org-feed-inline-link {
    color: inherit;
    text-decoration: none;
    border-radius: var(--radius-sm);
}

.org-feed-inline-link:hover {
    text-decoration: underline;
}

.org-feed-inline-link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.org-feed-time {
    font-size: var(--font-size-xs-plus);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.org-feed-body {
    margin: var(--spacing-xs) 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.participants-grid-title {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    margin: 0 0 var(--spacing-lg);
    color: var(--color-text);
    position: relative;
    padding-left: var(--spacing-md);
}

.participants-grid-title-meta {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
    margin-left: var(--spacing-sm);
}

.participants-grid-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15em;
    bottom: 0.15em;
    width: 4px;
    background: linear-gradient(180deg, var(--amber-gold) 0%, var(--blaze-orange) 100%);
    border-radius: var(--radius-full);
}

.participants-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--spacing-md);
}

.participant-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-md);
    background: var(--color-bg);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border-light);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.participant-card--link {
    text-decoration: none;
    color: inherit;
}

.participant-card--link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.participant-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.12);
}

.participant-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: var(--spacing-sm);
    background: linear-gradient(135deg, var(--azure-blue-10), var(--blue-violet-10));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.participant-avatar::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--azure-blue), var(--blue-violet));
    z-index: -1;
}

.participant-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.participant-avatar-initials {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    color: var(--blue-violet);
    text-transform: uppercase;
}

.participant-avatar--has-image .participant-avatar-initials {
    display: none;
}

.participant-avatar.is-avatar-fallback .participant-avatar-img {
    display: none;
}

.participant-avatar.is-avatar-fallback .participant-avatar-initials {
    display: inline;
}

.participant-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    width: 100%;
}

.participant-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.participant-role {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.participant-company {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: var(--color-bg-subtle);
    color: var(--color-text-muted);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Role color variations - bright and distinctive */
.participant-role--participant {
    background: var(--azure-blue-10);
    color: var(--azure-blue);
}

.participant-role--captain {
    background: linear-gradient(135deg, var(--amber-gold-20), var(--blaze-orange-10));
    color: var(--blaze-orange);
}

.participant-role--organizer {
    background: var(--amber-gold-20);
    color: #9a7b00;
}

.participant-role--jury {
    background: var(--neon-pink-10);
    color: var(--neon-pink);
}

.participant-role--admin {
    background: var(--blue-violet-10);
    color: var(--blue-violet);
}

.participant-role--audience {
    background: var(--neutral-100);
    color: var(--neutral-600);
}

/* Level badge on avatar */
.participant-level-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    min-width: 22px;
    height: 22px;
    border-radius: var(--radius-full);
    background: var(--color-bg);
    border: 2px solid var(--color-border-light);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    z-index: 1;
}

/* Highlighted participant (top level) */
.participant-card--highlighted {
    border-color: var(--amber-gold);
    background: linear-gradient(135deg, var(--color-bg), var(--amber-gold-20));
    box-shadow: 0 0 0 1px var(--amber-gold), 0 2px 12px -4px rgba(255, 180, 0, 0.18);
}

.participant-card--highlighted .participant-level-badge {
    background: linear-gradient(135deg, var(--amber-gold), var(--blaze-orange));
    border-color: var(--amber-gold);
    color: #fff;
}

.participant-card--highlighted .participant-avatar::before {
    background: linear-gradient(135deg, var(--amber-gold), var(--blaze-orange));
}

.participant-card--highlighted:hover {
    box-shadow: 0 0 0 1px var(--amber-gold), 0 8px 24px -8px rgba(255, 180, 0, 0.25);
}

/* XP label under role */
.participant-xp {
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    letter-spacing: 0.02em;
}

.participant-card--highlighted .participant-xp {
    color: var(--blaze-orange);
}

.participants-more {
    text-align: center;
    margin: var(--spacing-lg) 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Responsive: smaller cards on mobile */
@media (max-width: 479px) {
    .participants-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: var(--spacing-sm);
    }

    .participant-card {
        padding: var(--spacing-sm);
    }

    .participant-avatar {
        width: 48px;
        height: 48px;
    }

    .participant-avatar-initials {
        font-size: var(--font-size-base);
    }

    .participant-name {
        font-size: var(--font-size-xs-plus);
    }

    .participant-role {
        font-size: 10px;
        padding: 2px 6px;
    }

    .participant-level-badge {
        min-width: 18px;
        height: 18px;
        font-size: 10px;
    }

    .participant-xp {
        font-size: 9px;
    }
}

/* Larger screens: more columns */
@media (min-width: 768px) {
    .participants-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }

    .participant-avatar {
        width: 72px;
        height: 72px;
    }

    .participant-avatar-initials {
        font-size: var(--font-size-h2);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PUBLIC AGENDA
   ═══════════════════════════════════════════════════════════════════════════ */

.agenda-section {
    display: grid;
    gap: var(--spacing-lg);
}

.agenda-day {
    display: grid;
    gap: var(--spacing-sm);
}

.agenda-day-title {
    margin: 0;
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.agenda-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--spacing-sm);
}

.agenda-item {
    display: grid;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    background: var(--color-bg);
}

.agenda-item-time {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
}

.agenda-item-main {
    display: grid;
    gap: 6px;
}

.agenda-item-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs);
}

.agenda-item-type {
    font-size: var(--font-size-xs-plus);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.agenda-item-key {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-inverse);
    background: var(--color-secondary);
    border-radius: var(--radius-full);
    padding: 2px 8px;
}

.agenda-item-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.agenda-item-meta {
    font-size: var(--font-size-xs-plus);
    color: var(--color-text-secondary);
}

@media (min-width: 768px) {
    .agenda-item {
        grid-template-columns: minmax(90px, 120px) 1fr;
        align-items: start;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ORG INVITE FORM (Extended forms for participant/company invites)
   ═══════════════════════════════════════════════════════════════════════════ */

.org-invite-form {
    display: grid;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.org-invite-form-fields {
    display: grid;
    gap: var(--spacing-sm);
}

@media (min-width: 640px) {
    .org-invite-form-fields {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }
}

.org-invite-form-field {
    display: grid;
    gap: 6px;
}

.org-invite-form-field label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
}

.org-invite-form-field input {
    padding: 10px var(--spacing-sm);
    border-radius: var(--radius-md);
    border: 1px solid var(--neutral-300);
    font-size: var(--font-size-sm);
    background: var(--color-bg);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.org-invite-form-field input:focus {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: var(--shadow-focus);
}

.org-invite-form-field input::placeholder {
    color: var(--neutral-400);
}

/* ═══════════════════════════════════════════════════════════════════════════
   AUTH FOOTER (Legal links on login page)
   ═══════════════════════════════════════════════════════════════════════════ */

.auth-footer {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    text-align: center;
}

.auth-stack {
    display: grid;
    gap: var(--spacing-xl);
}

.auth-secondary {
    display: grid;
    gap: var(--spacing-lg);
}

.auth-card--primary {
    position: relative;
    box-shadow: var(--shadow-card-strong, var(--shadow-card));
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    font-size: var(--font-size-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--color-border);
}

.auth-divider-label {
    padding: 0 var(--spacing-xs);
}

.auth-legal-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
}

.auth-legal-link {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.auth-legal-link:hover {
    color: var(--color-text-link);
    text-decoration: underline;
}

.auth-legal-separator {
    color: var(--neutral-300);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROFILE PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

.profile-company {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-info-bg);
    color: var(--color-info);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.profile-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

@media (max-width: 640px) {
    .profile-meta {
        justify-content: center;
    }

    .profile-actions {
        justify-content: center;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROFILE CARD — compact character-card layout (MMORPG-style)
   ═══════════════════════════════════════════════════════════════════════════ */

.profile-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* Top row: avatar (left) + identity & badges (right) */
.profile-card-top {
    display: flex;
    gap: var(--spacing-lg);
    align-items: flex-start;
}

.profile-card-avatar {
    flex-shrink: 0;
}

/* Right side of avatar: name, xp, badges */
.profile-card-identity {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

/* Name row with status badges floated right */
.profile-card-header {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.profile-card-name {
    margin: 0;
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

.profile-card-badges {
    display: flex;
    gap: var(--spacing-xs);
    align-items: center;
    flex-wrap: wrap;
    margin-left: auto;
}

/* Participation action row — button + hint, below the name */
.profile-card-participation {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.profile-card-participation-hint {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: var(--line-height-normal);
}

.profile-card-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    background: var(--color-bg-muted);
    color: var(--color-text);
}

.profile-card-status.open {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.profile-card-company {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    background: var(--color-info-bg);
    color: var(--color-info);
}

/* Compact XP bar — inline, no border box */
.profile-card-xp {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.profile-card-xp-level {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    white-space: nowrap;
}

.profile-card-xp-bar {
    flex: 1;
    max-width: 140px;
    height: 6px;
    border-radius: var(--radius-full);
    appearance: none;
    -webkit-appearance: none;
    overflow: hidden;
}

.profile-card-xp-bar::-webkit-progress-bar {
    background: var(--color-bg-muted);
    border-radius: var(--radius-full);
}

.profile-card-xp-bar::-webkit-progress-value {
    background: linear-gradient(90deg, var(--azure-blue), var(--blue-violet));
    border-radius: var(--radius-full);
}

.profile-card-xp-bar::-moz-progress-bar {
    background: linear-gradient(90deg, var(--azure-blue), var(--blue-violet));
    border-radius: var(--radius-full);
}

.profile-card-xp-text {
    white-space: nowrap;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* Separator between card zones */
.profile-card-divider {
    border: none;
    border-top: 1px solid var(--color-border-light);
    margin: 0;
}

/* Skill tags row */
.profile-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.profile-card-tag {
    padding: 4px 10px;
    border-radius: var(--radius-full);
    background: var(--color-bg-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

/* Bio text */
.profile-card-bio {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    white-space: pre-wrap;
    line-height: var(--line-height-relaxed);
}

/* Team chip under the XP bar */
.profile-card-team-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 4px 14px 4px 10px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-primary-bg, var(--color-bg-muted)), var(--color-info-bg, var(--color-bg-subtle)));
    border: 1px solid var(--color-primary-border, var(--color-border-light));
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary, var(--color-text));
    text-decoration: none;
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.profile-card-team-chip:hover {
    border-color: var(--color-primary, var(--color-border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, var(--azure-blue)) 12%, transparent);
}

.profile-card-team-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.7;
}

.profile-card-team-name {
    white-space: nowrap;
}

/* Empty hints inside the card */
.profile-card-empty {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-style: italic;
    margin: 0;
}

/* Responsive: stack on small screens */
@media (max-width: 480px) {
    .profile-card-top {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .profile-card-header {
        justify-content: center;
    }

    .profile-card-badges {
        margin-left: 0;
        justify-content: center;
    }

    .profile-card-xp {
        justify-content: center;
    }

    .profile-card-tags {
        justify-content: center;
    }
}

/* Profile Sections (below the card: edit forms, checklists, etc.) */
.profile-sections {
    display: grid;
    gap: var(--spacing-lg);
}

.profile-section {}

.profile-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.profile-section-title {
    margin: 0;
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
}

/* Legacy participant-profile-* classes (deprecated — use .profile-card-* instead) */
.participant-profile-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.participant-profile-tag {
    padding: 4px 10px;
    border-radius: var(--radius-full);
    background: var(--color-bg-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.participant-profile-bio {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    white-space: pre-wrap;
}

.participant-profile-team {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.participant-profile-team-name {
    font-weight: var(--font-weight-semibold);
}

.participant-profile-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    background: var(--color-bg-muted);
    color: var(--color-text);
}

.participant-profile-status.open {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.participant-profile-status.closed {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.participant-profile-company {
    margin: 0;
    font-weight: var(--font-weight-semibold);
}

.profile-xp-compact {
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    background: var(--color-bg-subtle);
    max-width: 260px;
}

.profile-xp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
}

.profile-xp-level {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm-plus);
}

.profile-xp-total {
    font-size: var(--font-size-sm);
}

.profile-xp-next {
    font-size: var(--font-size-xs);
    margin: 0;
}

/* Leaderboard */
/* Profile Recommendations */
.profile-recommendations {
    display: grid;
    gap: var(--spacing-md);
}

.recommendation-card {
    display: grid;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    background: var(--color-bg);
}

.recommendation-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.recommendation-title {
    display: grid;
    gap: var(--spacing-xs);
    min-width: 0;
}

.recommendation-team-name {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.recommendation-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.recommendation-status,
.recommendation-members {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.recommendation-status.open {
    color: var(--color-success);
}

.recommendation-status.closed {
    color: var(--color-text-muted);
}

.recommendation-reason {
    display: grid;
    gap: var(--spacing-xs);
}

.recommendation-reason-label {
    font-size: var(--font-size-xs-plus);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.recommendation-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.recommendation-tag {
    padding: 4px 8px;
    border-radius: var(--radius-full);
    background: var(--color-bg-subtle);
    font-size: var(--font-size-xs-plus);
    color: var(--color-text);
}

.recommendation-tag.muted {
    color: var(--color-text-muted);
}

.recommendation-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm);
    justify-content: flex-end;
}

.recommendation-actions form {
    margin: 0;
}

.recommendation-muted {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Checklist with Progress */
.checklist-progress {
    margin-bottom: var(--spacing-lg);
}

.checklist-progress-bar {
    appearance: none;
    width: 100%;
    height: 8px;
    border: none;
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--spacing-sm);
    background: var(--color-bg-muted);
}

.checklist-progress-bar::-webkit-progress-bar {
    background: var(--color-bg-muted);
    border-radius: var(--radius-full);
}

.checklist-progress-bar::-webkit-progress-value {
    background: linear-gradient(90deg, var(--azure-blue), var(--blue-violet));
    border-radius: var(--radius-full);
    transition: width var(--transition-slow);
}

.checklist-progress-bar::-moz-progress-bar {
    background: linear-gradient(90deg, var(--azure-blue), var(--blue-violet));
    border-radius: var(--radius-full);
}

.checklist-progress-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-align: right;
}

.checklist-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--spacing-sm);
}

.checklist-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-subtle);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
}

.checklist-icon {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.checklist-icon.done {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.checklist-icon.pending {
    background: var(--color-bg-muted);
    color: var(--neutral-400);
    border: 2px solid var(--neutral-300);
}

.checklist-icon svg {
    width: 14px;
    height: 14px;
}

.checklist-label {
    flex: 1;
}

.checklist-label.done {
    color: var(--color-text);
}

.checklist-label.pending {
    color: var(--color-text-muted);
}

/* Checklist compact — horizontal inline progress strip */
.checklist-compact {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.checklist-compact-bar {
    appearance: none;
    -webkit-appearance: none;
    width: 80px;
    height: 6px;
    border: none;
    border-radius: var(--radius-full);
    overflow: hidden;
    background: var(--color-bg-muted);
    flex-shrink: 0;
}

.checklist-compact-bar::-webkit-progress-bar {
    background: var(--color-bg-muted);
    border-radius: var(--radius-full);
}

.checklist-compact-bar::-webkit-progress-value {
    background: linear-gradient(90deg, var(--azure-blue), var(--blue-violet));
    border-radius: var(--radius-full);
}

.checklist-compact-bar::-moz-progress-bar {
    background: linear-gradient(90deg, var(--azure-blue), var(--blue-violet));
    border-radius: var(--radius-full);
}

.checklist-compact-text {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.checklist-compact-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.checklist-compact-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-2xs);
    background: var(--color-bg-subtle);
}

.checklist-compact-item.done {
    color: var(--color-success);
    background: var(--color-success-bg);
}

.checklist-compact-item.pending {
    color: var(--color-text-muted);
}

.checklist-compact-icon {
    width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.checklist-compact-icon svg {
    width: 10px;
    height: 10px;
}

/* Profile Edit Grid — 2-column layout for edit section */
.profile-edit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

.profile-edit-grid>.profile-form {
    grid-column: 1 / -1;
}

@media (max-width: 540px) {
    .profile-edit-grid {
        grid-template-columns: 1fr;
    }
}

/* Profile Form */
.profile-form {
    display: grid;
    gap: var(--spacing-md);
}

.profile-form-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

@media (max-width: 540px) {
    .profile-form-pair {
        grid-template-columns: 1fr;
    }
}

.profile-form-row {
    display: grid;
    gap: 6px;
}

.profile-form-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
}

.profile-form-input {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    background: var(--color-bg);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.profile-form-input:focus {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: var(--shadow-focus);
}

.profile-form-input::placeholder {
    color: var(--neutral-400);
}

.profile-form-checkbox {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-subtle);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.profile-form-checkbox--card {
    justify-content: center;
    border: 1px solid var(--color-border-light);
}

.profile-form-checkbox:hover {
    background: var(--color-bg-muted);
}

.profile-form-checkbox input {
    width: 18px;
    height: 18px;
    accent-color: var(--color-secondary);
}

.profile-form-checkbox-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.profile-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

/* Profile Avatar Upload — compact inline variant */
.profile-avatar-form {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.profile-avatar-upload {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex: 1;
    min-width: 0;
}

.profile-avatar-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.profile-avatar-input {
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-base);
    font-size: var(--font-size-sm);
    background: var(--color-bg);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    min-width: 0;
    flex: 1;
}

.profile-avatar-input:focus {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: var(--shadow-focus);
}

.profile-avatar-hint {
    margin: 0;
    font-size: var(--font-size-2xs);
    color: var(--color-text-muted);
}

.profile-avatar-actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

/* Telegram Notification Card */
.telegram-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-bg-subtle);
    border-radius: var(--radius-xl);
}

.telegram-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #0088cc, #229ED9);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.telegram-icon svg {
    width: 20px;
    height: 20px;
    fill: white;
}

.telegram-content {
    flex: 1;
    min-width: 0;
}

.telegram-status {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-xs);
}

.telegram-status.enabled {
    color: var(--color-success);
}

.telegram-status.disabled {
    color: var(--color-text-secondary);
}

.telegram-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0;
}

.telegram-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: linear-gradient(135deg, #0088cc, #229ED9);
    color: white;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.telegram-link:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* ═══════════════════════════════════════════════════════════════════════════
   STAGE SCREEN (TV-optimized layout)
   ═══════════════════════════════════════════════════════════════════════════ */

.stage-body {
    min-height: 100vh;
    background: var(--neutral-900);
    color: var(--color-text-inverse);
}

/* Hidden elements must stay hidden even with display overrides */
.stage-page [hidden] {
    display: none !important;
}

.stage-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    --stage-emoji-pipe-height: 200px;
    padding: var(--spacing-2xl) var(--spacing-3xl) calc(var(--spacing-2xl) + var(--stage-emoji-pipe-height));
}

.stage-page:has(.stage-video-screen) {
    padding: var(--spacing-xs) var(--spacing-xs) calc(var(--spacing-xs) + var(--stage-emoji-pipe-height));
}

.stage-page:has(.stage-reactions) {
    padding: 2px var(--spacing-2xs) var(--spacing-xs);
}

.stage-screen {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
    position: relative;
    z-index: 2;
}

.stage-video-screen {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    position: relative;
    z-index: 2;
    --stage-video-aspect: 16 / 9;
    --stage-video-max-height: min(76vh, calc(100vh - 240px));
}

.stage-video-fit-toggle {
    position: absolute;
    top: var(--spacing-xs);
    right: var(--spacing-xs);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--neutral-700);
    border-radius: var(--radius-xl);
    background: color-mix(in srgb, var(--neutral-900) 84%, transparent);
    backdrop-filter: blur(4px);
}

.stage-video-fit-button {
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--neutral-200);
    padding: 6px 10px;
    font-size: var(--font-size-xs-plus);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.stage-video-fit-button[aria-pressed="true"] {
    border-color: color-mix(in srgb, var(--color-accent) 56%, var(--neutral-700));
    background: color-mix(in srgb, var(--color-accent) 24%, var(--neutral-900));
    color: var(--color-text-inverse);
}

.stage-video-fit-button:hover {
    color: var(--color-text-inverse);
}

.stage-video-grid {
    flex: 1;
    display: grid;
    gap: var(--spacing-md);
    grid-template-columns: minmax(0, 1fr) minmax(220px, 16vw);
    align-items: stretch;
}

.stage-video-main {
    display: grid;
    grid-template-rows: auto auto;
    gap: var(--spacing-sm);
    min-height: 0;
}

.stage-video-frame-wrap {
    width: 100%;
    max-width: 100%;
    aspect-ratio: var(--stage-video-aspect);
    height: auto;
    max-height: var(--stage-video-max-height);
    margin-inline: auto;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    border: 1px solid var(--neutral-700);
    background: var(--neutral-900);
    box-shadow: var(--shadow-lg);
}

.stage-video-frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.stage-video-side {
    display: grid;
    grid-template-rows: 1fr auto;
    gap: var(--spacing-md);
    min-height: 0;
}

.stage-video-side .stage-card {
    padding: var(--spacing-lg);
}

.stage-video-state {
    min-height: 0;
}

.stage-video-qr .stage-qr-image {
    width: clamp(120px, 11vw, 180px);
    height: clamp(120px, 11vw, 180px);
}

.stage-video-missing {
    height: 100%;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    border-radius: var(--radius-2xl);
    border: 1px solid color-mix(in srgb, var(--color-warning) 45%, var(--neutral-700));
    background: linear-gradient(160deg, color-mix(in srgb, var(--color-warning) 24%, var(--neutral-900)),
            color-mix(in srgb, var(--color-accent) 18%, var(--neutral-900)));
    padding: var(--spacing-2xl);
    text-align: center;
}

.stage-video-missing-title {
    margin: 0;
    font-size: clamp(32px, 3.4vw, 54px);
    color: var(--color-text-inverse);
}

.stage-video-missing-hint {
    margin: 0;
    max-width: 720px;
    font-size: clamp(18px, 1.6vw, 28px);
    color: var(--neutral-100);
}

.stage-video-presence {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: var(--spacing-xs);
    min-height: clamp(112px, 14vh, 260px);
}

.stage-online-ticker--under-video {
    width: 100%;
    max-width: none;
    background: color-mix(in srgb, var(--neutral-800) 82%, transparent);
}

.stage-comments-ticker--under-video {
    width: 100%;
    max-width: none;
    background: color-mix(in srgb, var(--neutral-800) 74%, transparent);
}

.stage-video-presence .stage-online-ticker--under-video {
    width: 100%;
    max-width: none;
}

.stage-video-screen[data-stage-video-fit="fill"] {
    --stage-video-max-height: min(86vh, calc(100vh - 120px));
}

.stage-video-screen[data-stage-video-fit="fill"] .stage-video-grid {
    grid-template-columns: minmax(0, 1fr);
}

.stage-video-screen[data-stage-video-fit="fill"] .stage-video-side {
    display: none;
}

.stage-video-screen[data-stage-video-fit="fill"] .stage-video-frame-wrap {
    width: min(100%, 100vw);
}

@media (min-width: 1800px) {
    .stage-video-grid {
        grid-template-columns: minmax(0, 1fr) minmax(220px, 14vw);
    }

    .stage-video-screen {
        --stage-video-max-height: min(80vh, calc(100vh - 220px));
    }
}

.stage-feedback-takeover {
    display: none;
}

.stage-page:has([data-stage-qr][data-stage-qr-mode="feedback"]) {
    padding: var(--spacing-md);
}

.stage-page:has([data-stage-qr][data-stage-qr-mode="feedback"]) .stage-screen,
.stage-page:has([data-stage-qr][data-stage-qr-mode="feedback"]) .stage-video-screen,
.stage-page:has([data-stage-qr][data-stage-qr-mode="feedback"]) .stage-reaction-layer {
    display: none;
}

.stage-page:has([data-stage-qr][data-stage-qr-mode="feedback"]) .stage-feedback-takeover {
    min-height: calc(100vh - (var(--spacing-md) * 2));
    border-radius: var(--radius-2xl);
    border: 1px solid color-mix(in srgb, var(--neutral-600) 70%, var(--color-accent));
    background: linear-gradient(155deg,
            color-mix(in srgb, var(--neutral-900) 76%, var(--color-accent)),
            color-mix(in srgb, var(--neutral-900) 82%, var(--color-warning)));
    box-shadow: var(--shadow-lg);
    padding: clamp(20px, 4vh, 64px) clamp(20px, 4vw, 72px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(20px, 4vh, 56px);
    text-align: center;
}

.stage-feedback-title {
    margin: 0;
    max-width: 20ch;
    font-size: clamp(42px, 6.3vw, 120px);
    line-height: 1.08;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-inverse);
    text-wrap: balance;
}

.stage-feedback-qr {
    width: min(64vh, 65vw, 680px);
    height: min(64vh, 65vw, 680px);
    border-radius: clamp(10px, 1.5vw, 18px);
    background: var(--color-bg);
    padding: clamp(8px, 1vw, 14px);
    object-fit: contain;
    box-shadow: 0 24px 72px color-mix(in srgb, var(--neutral-900) 72%, transparent);
}

/* ─── Header ─────────────────────────────────────────────────────────────── */

.stage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--neutral-700);
}

.stage-header-info {
    flex-shrink: 0;
}

.stage-eyebrow {
    margin: 0;
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--neutral-400);
}

.stage-title {
    margin: var(--spacing-xs) 0 0;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-inverse);
}

.stage-header-online {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-sm);
    min-width: 0;
}

.stage-online-count {
    font-size: var(--font-size-base);
    color: var(--neutral-300);
    letter-spacing: 0.04em;
    white-space: nowrap;
    text-align: center;
}

.stage-online-ticker {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: var(--neutral-800);
    border: 1px solid var(--neutral-700);
    padding: var(--spacing-xs) 0;
    width: 100%;
    max-width: none;
}

.stage-online-track {
    position: relative;
    display: block;
    white-space: nowrap;
    padding: 0 var(--spacing-lg);
    color: var(--neutral-100);
    font-size: var(--font-size-base);
    letter-spacing: 0.03em;
    will-change: transform;
    height: 1.6em;
}

.stage-online-item {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
}

.stage-online-name {
    display: inline-block;
    color: var(--neutral-100);
}

.stage-comments-ticker {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: var(--neutral-900);
    border: 1px solid var(--neutral-700);
    padding: var(--spacing-xs) 0;
    width: 100%;
    max-width: none;
    min-height: clamp(84px, 18vh, 280px);
    height: 100%;
}

.stage-comments-track {
    position: relative;
    display: block;
    white-space: nowrap;
    padding: 0 var(--spacing-lg);
    will-change: transform;
    height: 100%;
    min-height: clamp(84px, 16vh, 240px);
}

.stage-page .stage-comments-ticker[hidden] {
    display: block !important;
    visibility: hidden;
}

.stage-comment-item {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-flex;
    align-items: baseline;
    gap: var(--spacing-xs);
    white-space: nowrap;
    font-size: var(--font-size-sm);
    color: var(--neutral-100);
}

.stage-comment-author {
    font-weight: var(--font-weight-semibold);
    color: var(--amber-gold);
}

.stage-comment-body {
    color: var(--neutral-100);
}

.stage-header-meta {
    flex-shrink: 0;
}

.stage-header-label {
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-full);
    background: var(--color-accent);
    color: var(--color-text-on-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

/* ─── Grid (3 equal columns for TV) ──────────────────────────────────────── */

.stage-grid {
    flex: 1;
    display: grid;
    gap: var(--spacing-xl);
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
}

/* ─── Cards ──────────────────────────────────────────────────────────────── */

.stage-card {
    padding: var(--spacing-xl);
    border-radius: var(--radius-2xl);
    background: var(--neutral-800);
    border: 1px solid var(--neutral-700);
    display: flex;
    flex-direction: column;
    container-type: inline-size;
}

.stage-card-title {
    margin: 0 0 var(--spacing-lg);
    font-size: clamp(20px, 5.5cqi, 42px);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-inverse);
    text-align: center;
}

/* ─── State Card (Current/Next) ──────────────────────────────────────────── */

.stage-card--state {
    justify-content: center;
}

.stage-state-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.stage-state-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    text-align: center;
}

.stage-state-label {
    font-size: clamp(12px, 3cqi, 20px);
    color: var(--neutral-400);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.stage-state-value {
    font-size: clamp(28px, 8cqi, 60px);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-inverse);
    word-break: break-word;
    line-height: 1.3;
}

.stage-state-value--next {
    color: var(--neutral-300);
}

/* ─── Timer Card ─────────────────────────────────────────────────────────── */

.stage-card--timer {
    justify-content: space-between;
}

.stage-timer-header {
    display: flex;
    justify-content: flex-end;
}

.stage-timer-timezone {
    font-size: var(--font-size-xs);
    color: var(--neutral-400);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.stage-timer-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.stage-timer-countdown {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.stage-timer-label {
    margin: 0;
    font-size: clamp(16px, 4cqi, 28px);
    color: var(--neutral-300);
}

.stage-countdown {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
}

.stage-countdown-unit {
    text-align: center;
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--neutral-900);
    border-radius: var(--radius-xl);
    min-width: 80px;
}

.stage-countdown-value {
    font-size: clamp(30px, 9cqi, 72px);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-inverse);
    font-variant-numeric: tabular-nums;
}

.stage-countdown-label {
    font-size: clamp(12px, 3cqi, 20px);
    color: var(--neutral-400);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: var(--spacing-xs);
}

.stage-timer-plan {
    margin: var(--spacing-md) 0 0;
    font-size: clamp(14px, 3.5cqi, 24px);
    color: var(--neutral-300);
}

.stage-timer-started {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.stage-timer-status {
    margin: 0;
    font-size: clamp(22px, 6cqi, 44px);
    font-weight: var(--font-weight-semibold);
    color: var(--color-success);
}

.stage-timer-started-at {
    margin: 0;
    font-size: clamp(14px, 3.5cqi, 24px);
    color: var(--neutral-300);
}

/* ─── QR Card ────────────────────────────────────────────────────────────── */

.stage-card--qr {
    align-items: center;
    justify-content: center;
}

.stage-qr-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}

.stage-qr-image {
    width: clamp(140px, 15vw, 200px);
    height: clamp(140px, 15vw, 200px);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    display: block;
    object-fit: contain;
}

.stage-qr-hint {
    margin: 0;
    font-size: clamp(14px, 3.5cqi, 24px);
    color: var(--neutral-300);
    text-align: center;
    max-width: 200px;
}

.stage-reactions {
    min-height: 100svh;
    display: block;
    box-sizing: border-box;
    padding: clamp(2px, 0.8vh, 10px) var(--spacing-xs) var(--spacing-md);
}

.stage-reactions-card {
    width: min(360px, 100%);
    margin: 0 auto;
    padding: var(--spacing-md);
    border-radius: var(--radius-xl);
    background: var(--neutral-800);
    border: 1px solid var(--neutral-700);
    box-shadow: var(--shadow-lg);
}

.stage-reactions-header {
    display: grid;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.stage-reactions-eyebrow {
    margin: 0;
    font-size: var(--font-size-xs-plus);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--neutral-300);
}

.stage-reactions-title {
    margin: 0;
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-inverse);
}

.stage-reactions-desc {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--neutral-300);
}

.stage-reactions-form {
    display: grid;
    gap: var(--spacing-md);
}

.stage-comment-composer {
    display: grid;
    gap: var(--spacing-xs);
}

.stage-comment-label {
    margin: 0;
    font-size: var(--font-size-xs-plus);
    color: var(--neutral-200);
}

.stage-comment-textarea {
    width: 100%;
    min-height: 84px;
    resize: vertical;
    border: 1px solid var(--neutral-600);
    border-radius: var(--radius-md);
    background: var(--neutral-900);
    color: var(--color-text-inverse);
    padding: var(--spacing-sm);
    font-size: var(--font-size-sm);
    box-sizing: border-box;
}

.stage-comment-textarea:focus {
    outline: none;
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-secondary) 35%, transparent);
}

.stage-comment-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.stage-comment-hint {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--neutral-400);
}

.stage-comment-submit {
    border: 1px solid var(--color-secondary);
    border-radius: var(--radius-md);
    background: var(--color-secondary);
    color: var(--color-text-inverse);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    padding: 8px var(--spacing-sm);
    cursor: pointer;
    white-space: nowrap;
}

.stage-comment-submit:disabled {
    opacity: 0.6;
    cursor: default;
}

.stage-reactions-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: var(--spacing-xs);
}

.stage-reaction-button {
    position: relative;
    border: 2px solid var(--reaction-tone, var(--neutral-600));
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
    background: var(--neutral-800);
    color: var(--color-text-inverse);
    display: grid;
    place-items: center;
    gap: 2px;
    cursor: pointer;
    width: 100%;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.stage-reaction-button:active {
    background: var(--neutral-700);
}

.stage-reaction-button:focus,
.stage-reaction-button:focus-visible {
    outline: none;
}

.stage-reaction-button.is-loading {
    opacity: 0.7;
    cursor: progress;
}

.stage-reaction-button--sent {
    animation: stage-reaction-flash 350ms ease-out;
}

.stage-reaction-button[data-reaction-tone="positive"] {
    --reaction-tone: var(--emerald-green);
    --reaction-tone-bg: var(--emerald-green-10);
}

.stage-reaction-button[data-reaction-tone="neutral"] {
    --reaction-tone: var(--amber-gold);
    --reaction-tone-bg: var(--amber-gold-10);
}

.stage-reaction-button[data-reaction-tone="negative"] {
    --reaction-tone: var(--neon-pink);
    --reaction-tone-bg: var(--neon-pink-10);
}

@keyframes stage-reaction-flash {

    0%,
    40% {
        background: color-mix(in srgb, var(--reaction-tone-bg) 40%, var(--neutral-800));
    }

    100% {
        background: var(--neutral-800);
    }
}

.stage-reaction-emoji {
    font-size: 1.5rem;
    line-height: 1;
}

.stage-reaction-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--neutral-400);
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.1;
}

.stage-reactions-hint {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--neutral-400);
    text-align: center;
}

.stage-reactions-toast {
    margin: 0;
    font-size: var(--font-size-xs-plus);
    color: var(--neutral-100);
    text-align: center;
}

.stage-reactions-toast[data-tone="ok"] {
    color: var(--emerald-green);
}

.stage-reactions-toast[data-tone="error"] {
    color: var(--neon-pink);
}

.stage-reaction-layer {
    position: fixed;
    inset: auto 0 0 0;
    height: var(--stage-emoji-pipe-height);
    pointer-events: none;
    overflow: hidden;
    z-index: 3;
}

.stage-reaction-layer--fullscreen {
    inset: 0;
    height: 100vh;
}

.stage-reaction-layer--fullscreen .stage-reaction-sea {
    height: 34%;
}

.stage-reaction-layer--fullscreen .stage-reaction-row-1 {
    top: 66%;
}

.stage-reaction-layer--fullscreen .stage-reaction-row-2 {
    top: 71%;
}

.stage-reaction-layer--fullscreen .stage-reaction-row-3 {
    top: 76%;
}

.stage-reaction-layer--fullscreen .stage-reaction-row-4 {
    top: 81%;
}

.stage-reaction-layer--fullscreen .stage-reaction-row-5 {
    top: 86%;
}

.stage-reaction-layer--fullscreen .stage-reaction-row-6 {
    top: 91%;
}

.stage-reaction-sea {
    position: absolute;
    inset: auto 0 0 0;
    height: 100%;
    overflow: hidden;
}

.stage-reaction-flow {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.stage-reaction-stream-emoji {
    position: absolute;
    opacity: 1;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
}

.stage-reaction-stream-emoji--sea {
    bottom: -2%;
    animation-name: stage-reaction-float;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

.stage-reaction-stream-emoji--flow {
    right: -10%;
    animation-name: stage-reaction-flow;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

.stage-reaction-pos-1 {
    left: 4%;
}

.stage-reaction-pos-2 {
    left: 12%;
}

.stage-reaction-pos-3 {
    left: 20%;
}

.stage-reaction-pos-4 {
    left: 28%;
}

.stage-reaction-pos-5 {
    left: 36%;
}

.stage-reaction-pos-6 {
    left: 44%;
}

.stage-reaction-pos-7 {
    left: 52%;
}

.stage-reaction-pos-8 {
    left: 60%;
}

.stage-reaction-pos-9 {
    left: 68%;
}

.stage-reaction-pos-10 {
    left: 76%;
}

.stage-reaction-pos-11 {
    left: 84%;
}

.stage-reaction-pos-12 {
    left: 92%;
}

.stage-reaction-row-1 {
    top: 68%;
}

.stage-reaction-row-2 {
    top: 72%;
}

.stage-reaction-row-3 {
    top: 76%;
}

.stage-reaction-row-4 {
    top: 80%;
}

.stage-reaction-row-5 {
    top: 84%;
}

.stage-reaction-row-6 {
    top: 88%;
}

.stage-reaction-size-1 {
    font-size: var(--font-size-h2);
}

.stage-reaction-size-2 {
    font-size: calc(var(--font-size-h1) * 0.95);
}

.stage-reaction-size-3 {
    font-size: calc(var(--font-size-h1) * 1.15);
}

.stage-reaction-size-4 {
    font-size: calc(var(--font-size-h1) * 1.35);
}

.stage-reaction-speed-1 {
    animation-duration: 4.5s;
}

.stage-reaction-speed-2 {
    animation-duration: 6s;
}

.stage-reaction-speed-3 {
    animation-duration: 7.5s;
}

.stage-reaction-speed-4 {
    animation-duration: 9s;
}

.stage-reaction-delay-1 {
    animation-delay: 0s;
}

.stage-reaction-delay-2 {
    animation-delay: 0.12s;
}

.stage-reaction-delay-3 {
    animation-delay: 0.24s;
}

.stage-reaction-delay-4 {
    animation-delay: 0.36s;
}

@keyframes stage-reaction-float {
    from {
        transform: translateY(0) scale(0.9);
        opacity: 1;
    }

    to {
        transform: translateY(-80%) scale(1.1);
        opacity: 0.35;
    }
}

@keyframes stage-reaction-flow {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(-220vw);
        opacity: 0.35;
    }
}

@media (max-width: 1200px) {
    .stage-grid {
        grid-template-columns: 1fr 1fr;
    }

    .stage-card--timer {
        grid-column: span 2;
        order: -1;
    }

    .stage-video-grid {
        grid-template-columns: 1fr;
    }

    .stage-video-side {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
    }

    .stage-video-screen {
        --stage-video-max-height: min(68vh, calc(100vh - 280px));
    }
}

@media (max-width: 768px) {
    .stage-page {
        padding: var(--spacing-xl) var(--spacing-md);
    }

    .stage-page:has(.stage-reactions) {
        padding: 0 var(--spacing-2xs) var(--spacing-xs);
    }

    .stage-header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-md);
    }

    .stage-header-info {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }

    .stage-header-online {
        order: 1;
    }

    .stage-header-meta {
        position: absolute;
        top: var(--spacing-xl);
        right: var(--spacing-md);
    }

    .stage-grid {
        grid-template-columns: 1fr;
    }

    .stage-card--timer {
        grid-column: span 1;
    }

    .stage-video-side {
        grid-template-columns: 1fr;
    }

    .stage-video-screen {
        --stage-video-max-height: min(56vh, calc(100vh - 320px));
    }

    .stage-video-fit-toggle {
        position: static;
        align-self: flex-end;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ORG BRANDING
   ═══════════════════════════════════════════════════════════════════════════ */

.org-branding-card {
    display: grid;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.org-branding-title {
    margin: 0;
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.org-branding-desc {
    margin: var(--spacing-xs) 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.org-branding-assets {
    display: grid;
    gap: var(--spacing-lg);
}

.org-branding-asset {
    display: grid;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
}

.org-branding-asset__preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    border-radius: var(--radius-md);
    border: 1px dashed var(--color-border);
    background: var(--color-bg-subtle);
    overflow: hidden;
}

.org-branding-asset__preview--cover {
    min-height: 180px;
}

.org-branding-asset__image {
    max-width: 100%;
    height: auto;
    display: block;
}

.org-branding-asset__empty {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.org-branding-asset__title {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.org-branding-asset__desc {
    margin: var(--spacing-xs) 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.org-branding-asset__form {
    display: grid;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.org-branding-asset__input {
    padding: 10px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
}

.org-branding-asset__hint {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.org-branding-asset__button {
    justify-self: start;
}

.org-branding-fonts__form,
.org-branding-tokens__form {
    display: grid;
    gap: var(--spacing-lg);
}

.org-branding-fonts__group {
    display: grid;
    gap: var(--spacing-sm);
}

.org-branding-fonts__preview {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    display: grid;
    gap: var(--spacing-sm);
    background: var(--color-bg-subtle);
}

.org-branding-fonts__preview-title {
    margin: 0;
    font-size: var(--font-size-xs-plus);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.org-branding-fonts__preview-text {
    margin: 0;
    font-size: var(--font-size-h3);
    color: var(--color-text-primary);
}

.org-branding-fonts__preview-code {
    margin: 0;
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
    background: var(--color-bg);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    width: fit-content;
}

.org-branding-fonts__title {
    margin: 0;
    font-size: var(--font-size-sm-plus);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.org-branding-fonts__options {
    display: grid;
    gap: var(--spacing-sm);
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.org-branding-font-option {
    display: block;
    position: relative;
    cursor: pointer;
}

.org-branding-font-option>input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.org-branding-font-option__card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    text-align: center;
}

.org-branding-font-option:hover .org-branding-font-option__card {
    border-color: var(--color-border-focus);
}

.org-branding-font-option>input[type="radio"]:focus-visible+.org-branding-font-option__card {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.org-branding-font-option>input[type="radio"]:checked+.org-branding-font-option__card {
    border-color: var(--color-primary);
    background: var(--color-primary-muted);
    box-shadow: 0 0 0 2px var(--color-primary-muted);
}

.org-branding-font-option__card.selected {
    border-color: var(--color-primary);
    background: var(--color-primary-muted);
}

.org-branding-font-option__label {
    font-size: var(--font-size-xs-plus);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.org-branding-font-option__preview {
    font-size: var(--font-size-h4);
    color: var(--color-text-primary);
    line-height: 1.2;
}

.org-branding-fonts__button,
.org-branding-tokens__button {
    justify-self: start;
    margin-top: var(--spacing-sm);
}

.org-branding-tokens__group {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    margin: 0;
    background: var(--color-bg);
}

.org-branding-tokens__legend {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    padding: 0 var(--spacing-xs);
}

.org-branding-tokens__desc {
    margin: var(--spacing-xs) 0 var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.org-branding-tokens__grid {
    display: grid;
    gap: var(--spacing-md) var(--spacing-lg);
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.org-branding-tokens__field {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.org-branding-tokens__field label {
    font-size: var(--font-size-xs-plus);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.org-branding-tokens__input {
    padding: 8px 10px;
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    width: 100%;
}

.org-branding-tokens__input:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 2px var(--color-primary-muted);
}

/* Color field with preview swatch */
.org-branding-color-field {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.org-branding-color-field label {
    font-size: var(--font-size-xs-plus);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.org-branding-color-field__input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.org-branding-color-field__input {
    padding: 8px 10px;
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background: var(--color-bg);
    width: 100%;
    font-family: var(--font-mono);
}

.org-branding-color-field__input:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 2px var(--color-primary-muted);
    position: relative;
    z-index: 1;
}

.org-branding-color-field__swatch {
    height: 8px;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    border: 1px solid var(--color-border);
    border-top: none;
    background: repeating-conic-gradient(var(--color-border-light) 0% 25%, transparent 0% 50%) 50% / 8px 8px;
}

.org-branding-color-field__swatch-color {
    width: 100%;
    height: 100%;
    border-radius: 0 0 calc(var(--radius-sm) - 1px) calc(var(--radius-sm) - 1px);
}

.brand-font--inter {
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.brand-font--system {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.brand-font--roboto {
    font-family: "Roboto", "Segoe UI", system-ui, -apple-system, sans-serif;
}

.brand-font--manrope {
    font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
}

.brand-font--georgia {
    font-family: Georgia, "Times New Roman", serif;
}

.brand-font--jetbrains {
    font-family: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;
}

.brand-font--system-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.brand-font--ibm-plex {
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ═══════════════════════════════════════════════════════════════════════════
   IDEA BANK
   ═══════════════════════════════════════════════════════════════════════════ */
.idea-bank-form {
    margin-bottom: var(--spacing-lg);
}

.idea-form-header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
}

.idea-form-subtitle {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.idea-form-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background: var(--color-bg-muted);
    margin-bottom: var(--spacing-md);
}

.idea-form-note p {
    margin: 0;
    color: var(--color-text-secondary);
}

.idea-form-actions {
    margin-top: var(--spacing-sm);
}

.idea-bank-list {
    display: grid;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.idea-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.idea-card-title h3 {
    margin: 0;
    font-size: var(--font-size-h4);
}

.idea-card-author {
    margin: var(--spacing-2xs) 0 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.idea-card-date {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    white-space: nowrap;
}

.idea-card-summary {
    margin: 0 0 var(--spacing-sm);
    color: var(--color-text-secondary);
}

.idea-card-details {
    margin-bottom: var(--spacing-sm);
}

.idea-card-footer {
    border-top: 1px solid var(--color-border-light);
    padding-top: var(--spacing-sm);
}

.idea-reactions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.idea-reaction-btn.is-selected {
    background: var(--color-secondary-bg);
    border-color: var(--color-secondary);
    color: var(--color-secondary);
}

.idea-emoji-block {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.idea-emoji-grid,
.idea-emoji-extra {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.idea-emoji-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.idea-emoji-btn.is-selected {
    border-color: var(--color-secondary);
    background: var(--color-secondary-bg);
}

.idea-emoji-count {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.idea-emoji-input {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.idea-emoji-text {
    flex: 1;
    min-width: 160px;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    background: var(--color-bg);
}

.idea-reactions-login {
    margin-top: var(--spacing-xs);
}

.landing-ideas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.landing-ideas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-md);
}

.landing-idea-title {
    margin: 0 0 var(--spacing-xs);
    font-size: var(--font-size-base);
}

.landing-idea-summary {
    margin: 0 0 var(--spacing-sm);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.landing-idea-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
}

.landing-idea-link {
    color: var(--color-text-link);
}

/* ═══════════════════════════════════════════════════════════════════════════
   NOTIFICATIONS FEED
   ═══════════════════════════════════════════════════════════════════════════ */

.notifications-feed {
    margin-top: var(--spacing-lg);
}

.notifications-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--spacing-md);
}

.notification-item {
    position: relative;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    background: var(--color-surface-alt);
    display: grid;
    gap: var(--spacing-xs);
}

.notification-item--unread {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 1px var(--color-danger);
}

.notification-item-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.notification-item-title {
    margin: 0;
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.notification-item-time {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.notification-item-body {
    margin: 0;
    color: var(--color-text-secondary);
}

.notification-item-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xxs);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-link);
    text-decoration: none;
}

.notification-item-link:hover {
    text-decoration: underline;
}

.notification-item-indicator {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    width: var(--spacing-sm);
    height: var(--spacing-sm);
    border-radius: var(--radius-full);
    background: var(--color-danger);
    box-shadow: 0 0 0 3px var(--color-bg);
}

.monitor-page-body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
}

.monitor-page {
    width: min(1400px, 100%);
    margin: 0 auto;
    padding: var(--spacing-lg);
}

.monitor-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.monitor-title {
    margin: 0;
    font-size: var(--font-size-h2);
}

.monitor-generated {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.monitor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-md);
}

.monitor-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    padding: var(--spacing-md);
}

.monitor-card-title {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: var(--font-size-h4);
}

.monitor-list {
    display: grid;
    gap: var(--spacing-xs);
    margin: 0;
}

.monitor-list div {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-sm);
    border-bottom: 1px dashed var(--color-border-light);
    padding-bottom: var(--spacing-xxs);
}

.monitor-list dt {
    color: var(--color-text-muted);
}

.monitor-list dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
    .monitor-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════
   PAST HACKATHONS ARCHIVE PAGE
   ═══════════════════════════════════════════════════════ */

.past-hackathons {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-md);
}

.past-hackathons__header {
    margin-bottom: var(--spacing-xl);
}

.past-hackathons__title {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    margin: 0;
}

.past-hackathons__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

.past-hackathon-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 200px;
    padding: var(--spacing-xl);
    background: var(--color-bg);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-card);
    text-decoration: none;
    color: var(--color-text);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.past-hackathon-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.past-hackathon-card__title {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    margin: 0 0 var(--spacing-lg);
}

.past-hackathon-card__stats {
    display: flex;
    gap: var(--spacing-lg);
    margin: 0;
}

.past-hackathon-card__stat {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--spacing-xs);
}

.past-hackathon-card__stat dt {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.past-hackathon-card__stat dd {
    margin: 0;
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
}

.past-hackathons__empty {
    text-align: center;
    color: var(--color-text-muted);
}

@media (max-width: 1024px) {
    .past-hackathons__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .past-hackathons__grid {
        grid-template-columns: 1fr;
    }

    .past-hackathon-card {
        min-height: 160px;
    }
}