.btn{ display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; padding: var(--btn-padding-y) var(--btn-padding-x); border: 1px solid transparent; border-radius: var(--radius-sm); text-decoration: none; font-family: 'Inter', system-ui, sans-serif; font-size: 0.9rem; font-weight: var(--font-weight-medium); cursor: pointer; transition: all var(--transition-fast); white-space: nowrap; line-height: var(--btn-line-height);} .btn:active{ transform: scale(0.97);} .btn-primary, .btn-primary:visited{ background: var(--neon-blue); color: #000; font-weight: var(--font-weight-semibold); border: 1px solid var(--neon-blue);} .btn-primary:hover, .btn-primary:visited:hover{ background: var(--btn-bg-primary-hover); color: var(--neon-blue); box-shadow: var(--btn-shadow-primary-hover);} .btn-secondary{ background: var(--btn-bg-secondary); color: var(--text-primary); border: 1px solid var(--btn-border-secondary);} .btn-secondary:hover{ background: var(--btn-bg-secondary-hover); color: var(--neon-blue); border-color: var(--neon-blue); box-shadow: var(--btn-shadow-secondary-hover);} .btn-danger, .btn-danger:visited{ background: var(--btn-danger-bg); color: var(--neon-red); border: 1px solid var(--btn-danger-border);} .btn-danger:hover, .btn-danger:visited:hover{ background: var(--btn-danger-hover-bg); border-color: var(--neon-red); box-shadow: var(--btn-shadow-danger-hover);} .btn-ghost{ background: transparent; color: var(--text-secondary); border: 1px solid transparent; padding: var(--btn-sm-padding-y) var(--btn-sm-padding-x);} .btn-ghost:hover{ color: var(--text-primary); background: var(--btn-ghost-hover-bg);} .btn-sm{ padding: var(--btn-sm-padding-y) var(--btn-sm-padding-x); font-size: 0.8rem; border-radius: var(--radius-sm);} .form-container{ max-width: 700px;} .form-group{ margin-bottom: var(--form-group-margin-bottom);} .form-group label{ display: block; margin-bottom: var(--form-label-margin-bottom); color: var(--text-secondary); font-size: 0.85rem; font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: 0.04em;} .form-group input, .form-group textarea, .form-group select{ width: 100%; padding: var(--form-input-padding-y) var(--form-input-padding-x); background: var(--form-input-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); color: var(--text-primary); font-family: 'Inter', system-ui, sans-serif; font-size: 0.9rem; transition: border-color var(--transition-fast), box-shadow var(--transition-fast);} .form-group textarea{ min-height: 100px; resize: vertical;} .form-group input:focus, .form-group textarea:focus, .form-group select:focus{ outline: none; border-color: var(--neon-blue); box-shadow: var(--form-input-focus-shadow); background: var(--form-input-focus-bg);} .form-group select{ cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238a8a9a' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: var(--form-select-background-position); padding-right: var(--form-select-padding-right);} .form-group input[type="file"]{ display: none;} .file-input-label{ display: flex; align-items: center; gap: 0.75rem;} .file-name{ color: var(--text-secondary); font-size: 0.85rem;} .upload-btn-hidden{ display: none;} .form-group input[type="checkbox"]{ width: auto; margin-right: 0.5rem; accent-color: var(--form-checkbox-accent);} .form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--form-row-gap);} @media (max-width: 600px){ .form-row{ grid-template-columns: 1fr;}} .form-actions{ display: flex; gap: var(--form-actions-gap); margin-top: var(--form-actions-margin-top);} .inline-form{ display: inline;} .checkbox-group{ display: flex; align-items: center; gap: 0.5rem;} .checkbox-group input[type="checkbox"]{ width: auto; accent-color: var(--form-checkbox-accent);} .alert{ padding: 0.85rem 1rem; margin-bottom: 1rem; border-radius: var(--radius-sm); font-size: 0.9rem; backdrop-filter: blur(8px);} .alert-error{ background: rgba(255, 0, 68, 0.1); border: 1px solid rgba(255, 0, 68, 0.25); color: var(--neon-red);} .alert-info{ background: rgba(0, 243, 255, 0.08); border: 1px solid rgba(0, 243, 255, 0.2); color: var(--neon-blue);} .alert-success{ background: rgba(0, 204, 102, 0.08); border: 1px solid rgba(0, 204, 102, 0.2); color: var(--neon-green);} .badge, .status-badge, .character-status{ display: inline-block; font-size: 0.7rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;} .badge.active, .status-badge.active, .character-status.active{ background: rgba(0, 204, 102, 0.15); color: var(--neon-green); border: 1px solid rgba(0, 204, 102, 0.25);} .badge.inactive, .status-badge.inactive, .character-status.inactive{ background: rgba(138, 138, 154, 0.12); color: var(--text-secondary); border: 1px solid rgba(138, 138, 154, 0.2);} .player-tag{ display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.6rem; background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: 20px; font-size: 0.85rem;} .system-list, .player-list, .character-list{ list-style: none; padding: 0;} .system-item, .character-item{ display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); margin-bottom: 0.5rem;} .player-item{ padding: 0.75rem; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--glass-border); border-left: 3px solid var(--neon-pink); border-radius: var(--radius-sm); margin-bottom: 0.75rem;} .system-item{ flex-wrap: wrap; border-color: rgba(0, 243, 255, 0.15); border-left: 3px solid var(--neon-blue);} .system-name, .system-name-link{ flex: 1; color: var(--neon-blue); font-weight: 600; text-decoration: none;} .system-name:hover, .system-name-link:hover{ color: var(--neon-pink);} .system-actions{ display: flex; gap: 0.35rem;} .system-actions .delete-form{ margin-left: auto;} .campaign-count{ color: var(--text-secondary); font-size: 0.8rem;} .tree-system{ padding: 1rem; margin-bottom: 1rem; border-color: rgba(0, 243, 255, 0.15); border-left: 3px solid var(--neon-blue);} .tree-campaign{ margin-left: 1.25rem; padding: 0.75rem; margin-bottom: 0.5rem; background: rgba(255, 255, 255, 0.06); border-radius: var(--radius-sm); border-left: 2px solid var(--neon-pink); border: 1px solid rgba(255, 255, 255, 0.1); border-left-width: 2px; border-left-color: var(--neon-pink);} .campaign-name{ font-weight: 600; color: var(--neon-green); text-decoration: none;} .campaign-name:visited{ color: var(--neon-green);} .campaign-name:hover{ color: var(--neon-pink);} .session-name{ color: var(--neon-blue); font-weight: 600; text-decoration: none;} .session-name:hover{ color: var(--neon-pink);} .session-name:visited{ color: var(--neon-blue);} .campaign-actions{ display: flex; gap: 0.35rem;} .tree-sessions{ margin-left: 0.75rem; margin-top: 0.5rem; max-height: 2000px; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease; opacity: 1;} .session-item{ padding: 0.35rem 0.5rem; background: rgba(255, 255, 255, 0.04); border-radius: 3px; margin-bottom: 0.2rem; border-left: 2px solid transparent; transition: background 0.2s, border-color 0.2s;} .session-item:hover{ background: rgba(0, 243, 255, 0.1); border-left-color: var(--neon-blue);} .session-link{ flex: 1; color: var(--neon-blue); text-decoration: none; font-size: 0.9rem; transition: color 0.2s;} .session-link:hover{ color: var(--text-primary);} .session-date{ color: var(--text-secondary); font-size: 0.8rem; margin-left: 0.5rem;} .player-header{ display: flex; align-items: baseline; gap: 0.4rem; margin-bottom: 0.5rem;} .field-label{ font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); background: rgba(138, 138, 154, 0.1); padding: 0.1rem 0.4rem; border-radius: 3px;} .player-discord{ color: var(--neon-pink); font-weight: 600;} .player-characters{ margin-top: 0.5rem;} .character-row{ padding: 0.5rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-left: 3px solid var(--neon-orange); border-radius: var(--radius-sm); margin-bottom: 0.35rem;} .character-name-line{ display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.25rem;} .character-detail-line{ display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; margin-top: 0.15rem;} .character-detail-line a{ color: var(--neon-green); text-decoration: none;} .character-detail-line:last-child a{ color: var(--neon-violet);} .character-detail-line a:hover{ color: var(--neon-pink);} .character-info{ flex: 1;} .character-name{ color: var(--neon-orange); font-weight: 600; text-decoration: none;} .character-name:hover{ color: var(--neon-pink);} .campaign-link{ display: block; font-size: 0.8rem; color: var(--text-secondary);} .campaign-link a{ color: var(--text-secondary); text-decoration: none;} .campaign-link a:hover{ color: var(--neon-green);} .discord-tag{ color: var(--text-secondary); font-size: 0.85rem;} .discord-info{ color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 0.5rem;} .data-table{ width: 100%; border-collapse: collapse; font-size: 0.9rem;} .data-table th, .data-table td{ padding: var(--space-3x) var(--space-4x); text-align: left; border-bottom: 1px solid var(--glass-border);} .data-table th{ color: var(--text-secondary); font-weight: var(--font-weight-semibold); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; background: var(--table-th-bg);} .data-table th.sortable{ cursor: pointer; user-select: none; position: relative; padding-right: 2rem;} .data-table th.sortable:hover{ color: var(--text-primary); background: rgba(0, 243, 255, 0.06);} .data-table th.sortable::after{ content: ''; position: absolute; right: 0.75rem; top: 50%; width: var(--table-sort-icon-size); height: var(--table-sort-icon-size); border-right: 1.5px solid var(--text-secondary); border-bottom: 1.5px solid var(--text-secondary); transform: translateY(-60%) rotate(135deg); opacity: 0.4; transition: opacity var(--transition-fast), transform var(--table-sort-animation-duration) ease;} .data-table th.sortable:hover::after{ opacity: 0.7; transform: translateY(-60%) rotate(135deg) scale(1.2);} .data-table th.sortable.asc::after{ border-right: none; border-bottom: 1.5px solid var(--neon-blue); transform: translateY(-40%) rotate(315deg) scale(1.1); opacity: 0.8; animation: sortBounceUp var(--table-sort-animation-duration) ease;} .data-table th.sortable.desc::after{ border-right: none; border-bottom: 1.5px solid var(--neon-blue); transform: translateY(-60%) rotate(135deg) scale(1.1); opacity: 0.8; animation: sortBounceDown var(--table-sort-animation-duration) ease;} .data-table td{ color: var(--text-primary);} .data-table tbody td{ position: relative; overflow: hidden;} .data-table tbody td::before{ content: ''; position: absolute; inset: 0; background: var(--table-wave-highlight); background-size: 300% 100%; opacity: 0; transition: opacity var(--transition-fast); pointer-events: none; z-index: -1; animation: none;} .data-table tbody td:hover::before{ opacity: 1; animation: tableWave 0.8s ease forwards;} .data-table tbody tr:nth-child(odd) td{ background: var(--table-odd-row-bg);} .data-table tbody tr:nth-child(even) td{ background: var(--table-even-row-bg);} .data-table tbody tr:hover td{ background: var(--table-hover-row-bg);} .session-details-card{ margin: 1rem 0;} .session-details p{ margin: 0.35rem 0; color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6;} .session-details strong{ color: var(--neon-blue); min-width: 7rem; display: inline-block;} .session-date{ font-size: 0.9rem; color: var(--text-secondary); font-weight: 400; margin-left: 0.75rem;} .players-section{ padding: 1rem; margin: 1rem 0; border-left: 3px solid rgba(0, 243, 255, 0.3);} .players-list{ display: flex; flex-wrap: wrap; gap: 0.5rem;} .no-players, .modal-overlay{ display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: var(--z-modal-backdrop); align-items: center; justify-content: center;} .modal-content{ background: var(--surface-primary); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 1.5rem; max-width: 560px; width: 90%; max-height: 85vh; overflow-y: auto; position: relative; z-index: var(--z-modal); box-shadow: var(--shadow-lg);} .modal-close{ position: absolute; top: 0.75rem; right: 0.75rem; background: none; border: none; color: var(--text-secondary); font-size: 1.25rem; cursor: pointer; padding: 0.25rem 0.5rem; line-height: 1; transition: color var(--transition-fast);} .modal-close:hover{ color: var(--text-primary);} .tooltip{ background: var(--surface-secondary); border: 1px solid var(--glass-border); color: var(--text-primary); padding: 0.35rem 0.65rem; border-radius: var(--radius-sm); font-size: 0.8rem; white-space: nowrap; pointer-events: none; z-index: var(--z-tooltip); box-shadow: var(--shadow-md);} .toast-container{ position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none;} .toast{ padding: 0.75rem 1.25rem; border-radius: var(--radius-sm); font-size: 0.9rem; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: var(--shadow-lg); pointer-events: auto; transition: opacity 0.3s ease, transform 0.3s ease;} .toast-info{ background: rgba(0, 243, 255, 0.12); border: 1px solid rgba(0, 243, 255, 0.25); color: var(--neon-blue);} .toast-success{ background: rgba(0, 204, 102, 0.12); border: 1px solid rgba(0, 204, 102, 0.25); color: var(--neon-green);} .toast-error{ background: rgba(255, 0, 68, 0.12); border: 1px solid rgba(255, 0, 68, 0.25); color: var(--neon-red);} .toast-warning{ background: rgba(255, 170, 0, 0.12); border: 1px solid rgba(255, 170, 0, 0.25); color: #ffaa00;} .dropdown-menu{ display: none; background: var(--surface-primary); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); z-index: var(--z-dropdown); min-width: 180px; padding: 0.35rem 0;} .dropdown-menu.dropdown-open{ display: block;} .dropdown-menu a, .dropdown-menu button{ display: block; width: 100%; text-align: left; padding: 0.5rem 0.85rem; color: var(--text-primary); text-decoration: none; font-size: 0.875rem; background: none; border: none; cursor: pointer; transition: background var(--transition-fast); white-space: nowrap;} .dropdown-menu a:hover, .dropdown-menu button:hover{ background: rgba(0, 243, 255, 0.06); color: var(--neon-blue);} .dropdown-divider{ height: 1px; background: var(--glass-border); margin: 0.25rem 0;} .no-players{